4 @import '~primeng/resources/primeng.css';
5 @import '~primeng/resources/themes/nova-light/theme.css';
7 @mixin glyphicon-light {
8 font-family: 'Glyphicons Halflings';
9 text-decoration: none !important;
10 color: pvar(--mainForegroundColor) !important;
20 // focus box-shadow for primeng
21 .ui-inputtext:enabled:focus:not(.ui-state-error) {
22 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
25 // data table customizations
28 border: none !important;
29 background-color: pvar(--mainBackgroundColor) !important;
38 background-color: transparent;
44 background-color: pvar(--mainBackgroundColor) !important;
49 font-family: $main-fonts;
50 font-size: 15px !important;
51 color: pvar(--mainForegroundColor) !important;
55 padding-left: 15px !important;
57 &:not(.action-cell):not(.expand-cell) {
58 overflow: hidden !important;
59 text-overflow: ellipsis !important;
60 white-space: nowrap !important;
66 background-color: pvar(--mainBackgroundColor) !important;
69 &.ui-state-highlight {
70 background-color: pvar(--submenuColor) !important;
73 color: pvar(--mainForegroundColor) !important;
81 background-color: pvar(--submenuColor) !important;
85 border: none !important;
89 border-top: none !important;
93 border-bottom: none !important;
98 box-shadow: none !important;
110 border: none !important;
111 border-bottom: 1px solid !important;
112 border-color: pvar(--submenuColor) !important;
113 text-align: left !important;
114 padding: 5px 0 5px 15px !important;
115 font-weight: $font-semibold !important;
116 color: pvar(--mainForegroundColor) !important;
118 &.ui-sortable-column:hover {
119 background-color: pvar(--submenuColor) !important;
120 border: 1px solid !important;
121 border-color: pvar(--submenuColor) !important;
122 border-width: 0 1px !important;
125 border-width: 0 1px 0 0 !important;
129 &.ui-state-highlight {
130 background-color: pvar(--submenuColor) !important;
135 color: #000 !important;
136 font-size: 11px !important;
139 &.pi-sort-amount-up-alt {
140 @extend .glyphicon-triangle-top;
142 color: pvar(--mainForegroundColor) !important;
145 &.pi-sort-amount-down {
146 @extend .glyphicon-triangle-bottom;
148 color: pvar(--mainForegroundColor) !important;
155 width: 250px !important;
156 padding: 0 !important;
163 display: inline-block !important;
173 .ui-paginator-bottom {
174 background-color: pvar(--mainBackgroundColor) !important;
177 border-top: 1px solid !important;
178 border-color: pvar(--submenuColor) !important;
181 justify-content: center;
190 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
194 color: pvar(--inputPlaceholderColor);
198 .ui-paginator-current {
201 color: pvar(--inputPlaceholderColor);
208 @include glyphicon-light;
217 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
220 &.ui-state-disabled:hover {
221 background-color: #fff !important;
224 &.ui-paginator-first {
225 @extend .glyphicon-step-backward;
228 &.ui-paginator-prev {
229 @extend .glyphicon-chevron-left;
234 &.ui-paginator-next {
235 @extend .glyphicon-chevron-right;
240 &.ui-paginator-last {
241 @extend .glyphicon-step-forward;
245 .ui-paginator-pages {
246 height: auto !important;
251 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
256 color: pvar(--mainForegroundColor) !important;
257 font-weight: $font-semibold !important;
258 margin: 0 5px !important;
259 outline: 0 !important;
260 border-radius: 3px !important;
261 padding: 5px 2px !important;
262 height: auto !important;
263 line-height: initial !important;
266 &, &:hover, &:active, &:focus {
267 color: #fff !important;
268 background-color: pvar(--mainColor) !important;
277 // overflow data table
278 @mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
282 max-width: calc(100vw - #{$horizontal-margins * 2});
285 min-width: $table-min-width;
289 @if $mobile-paginator {
290 p-paginator .ui-paginator-bottom {
293 .ui-paginator-current {
298 a, .ui-paginator-pages {
299 vertical-align: middle;
306 // PrimeNG calendar tweaks
307 p-calendar .ui-datepicker {
309 @include disable-default-a-behaviour;
312 .ui-datepicker-header {
314 .ui-datepicker-year {
318 .ui-datepicker-next {
319 @extend .glyphicon-chevron-right;
320 @include glyphicon-light;
322 color: #000 !important;
325 .pi.pi-chevron-right {
326 display: none !important;
330 .ui-datepicker-prev {
331 @extend .glyphicon-chevron-left;
332 @include glyphicon-light;
334 color: #000 !important;
337 .pi.pi-chevron-left {
338 display: none !important;
346 @extend .glyphicon-chevron-up;
347 @include glyphicon-light;
349 color: #000 !important;
352 .pi.pi-chevron-down {
353 @extend .glyphicon-chevron-down;
354 @include glyphicon-light;
356 color: #000 !important;
361 p-tablecheckbox:hover div .ui-chkbox-box {
362 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
368 width: 18px !important;
369 height: 18px !important;
374 border-color: pvar(--mainColor) !important;
375 background-color: pvar(--mainColor) !important;
380 overflow: visible !important;
390 transform: rotate(45deg) scale(0);
391 border-right: 2px solid pvar(--mainBackgroundColor);
392 border-bottom: 2px solid pvar(--mainBackgroundColor);
397 transform: rotate(45deg) scale(1);
406 .ui-inputswitch-checked .ui-inputswitch-slider {
407 background-color: pvar(--mainColor) !important;
414 width: 2.5em !important;
415 height: 1.45em !important;
417 .ui-inputswitch-slider::before {
418 height: 1em !important;
419 width: 1em !important;
423 .ui-inputswitch-checked .ui-inputswitch-slider::before {
424 transform: translateX(1em) !important;
431 z-index: z(notification) !important;
433 .ui-toast-close-icon {
434 font-family: "Glyphicons Halflings";
442 &:hover .ui-toast-close-icon {
448 font-family: $main-fonts;
449 background-color: pvar(--mainBackgroundColor) !important;
450 color: pvar(--mainForegroundColor) !important;
452 box-sizing: border-box;
453 border: 1px solid #EBEEF5 !important;
454 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
457 &.ui-toast-message-success .glyphicon {
458 color: #8BC34A !important;
461 &.ui-toast-message-error .glyphicon {
462 color: #F44336 !important;
465 &.ui-toast-message-warn .glyphicon {
466 color: #F1680D !important;
469 &.ui-toast-message-info .glyphicon {
470 color: #03A9F4 !important;
473 .notification-block {
500 font-family: $main-fonts !important;