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: var(--mainForegroundColor) !important;
20 // focus box-shadow for primeng
21 .ui-inputtext:enabled:focus:not(.ui-state-error) {
22 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
25 // data table customizations
28 border: none !important;
29 background-color: var(--mainBackgroundColor) !important;
38 background-color: transparent;
44 background-color: var(--mainBackgroundColor) !important;
49 font-family: $main-fonts;
50 font-size: 15px !important;
51 color: var(--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: var(--mainBackgroundColor) !important;
69 &.ui-state-highlight {
70 background-color: var(--submenuColor) !important;
73 color: var(--mainForegroundColor) !important;
81 background-color: var(--submenuColor) !important;
88 display: inline-block !important;
94 border: none !important;
98 border-top: none !important;
102 border-bottom: none !important;
114 border: none !important;
115 border-bottom: 1px solid !important;
116 border-color: var(--submenuColor) !important;
117 text-align: left !important;
118 padding: 5px 0 5px 15px !important;
119 font-weight: $font-semibold !important;
120 color: var(--mainForegroundColor) !important;
122 &.ui-sortable-column:hover {
123 background-color: var(--submenuColor) !important;
124 border: 1px solid !important;
125 border-color: var(--submenuColor) !important;
126 border-width: 0 1px !important;
129 border-width: 0 1px 0 0 !important;
133 &.ui-state-highlight {
134 background-color: var(--submenuColor) !important;
139 color: #000 !important;
140 font-size: 11px !important;
143 &.pi-sort-amount-up-alt {
144 @extend .glyphicon-triangle-top;
146 color: var(--mainForegroundColor) !important;
149 &.pi-sort-amount-down {
150 @extend .glyphicon-triangle-bottom;
152 color: var(--mainForegroundColor) !important;
159 width: 250px !important;
160 padding: 0 !important;
167 display: none !important;
171 display: inline-block !important;
174 // keep displaying on touchscreen
175 @media not all and (hover: hover) and (pointer: fine) {
176 display: inline-block !important;
186 .ui-paginator-bottom {
187 background-color: var(--mainBackgroundColor) !important;
190 border-top: 1px solid !important;
191 border-color: var(--submenuColor) !important;
194 justify-content: center;
203 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
207 color: var(--inputPlaceholderColor);
211 .ui-paginator-current {
214 color: var(--inputPlaceholderColor);
221 @include glyphicon-light;
230 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
233 &.ui-state-disabled:hover {
234 background-color: #fff !important;
237 &.ui-paginator-first {
238 @extend .glyphicon-step-backward;
241 &.ui-paginator-prev {
242 @extend .glyphicon-chevron-left;
247 &.ui-paginator-next {
248 @extend .glyphicon-chevron-right;
253 &.ui-paginator-last {
254 @extend .glyphicon-step-forward;
258 .ui-paginator-pages {
259 height: auto !important;
264 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
269 color: var(--mainForegroundColor) !important;
270 font-weight: $font-semibold !important;
271 margin: 0 5px !important;
272 outline: 0 !important;
273 border-radius: 3px !important;
274 padding: 5px 2px !important;
275 height: auto !important;
276 line-height: initial !important;
279 &, &:hover, &:active, &:focus {
280 color: #fff !important;
281 background-color: var(--mainColor) !important;
290 // overflow data table
291 @mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
295 max-width: calc(100vw - #{$horizontal-margins * 2});
298 min-width: $table-min-width;
302 @if $mobile-paginator {
303 p-paginator .ui-paginator-bottom {
306 .ui-paginator-current {
311 a, .ui-paginator-pages {
312 vertical-align: middle;
319 // multiselect customizations
322 border-color: #C6C6C6;
324 &:not(.ui-state-disabled) {
326 border-color: #C6C6C6;
331 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
336 .ui-multiselect-label {
337 font-size: 15px !important;
338 padding: 4px 30px 4px 12px !important;
341 width: $width !important;
343 @media screen and (max-width: $width) {
344 width: 100% !important;
348 .pi.pi-chevron-down {
349 margin-left: 0 !important;
352 @include select-arrow-down;
360 //position: absolute !important;
366 // left: -2px !important;
370 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
371 background-color: var(--mainColorLighter);
374 .ui-inputtext:enabled:focus:not(.ui-state-error) {
375 border-color: var(--mainColorLighter) !important;
380 // PrimeNG calendar tweaks
381 p-calendar .ui-datepicker {
383 @include disable-default-a-behaviour;
386 .ui-datepicker-header {
388 .ui-datepicker-year {
392 .ui-datepicker-next {
393 @extend .glyphicon-chevron-right;
394 @include glyphicon-light;
396 color: #000 !important;
399 .pi.pi-chevron-right {
400 display: none !important;
404 .ui-datepicker-prev {
405 @extend .glyphicon-chevron-left;
406 @include glyphicon-light;
408 color: #000 !important;
411 .pi.pi-chevron-left {
412 display: none !important;
420 @extend .glyphicon-chevron-up;
421 @include glyphicon-light;
423 color: #000 !important;
426 .pi.pi-chevron-down {
427 @extend .glyphicon-chevron-down;
428 @include glyphicon-light;
430 color: #000 !important;
435 p-tablecheckbox:hover div .ui-chkbox-box {
436 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
442 width: 18px !important;
443 height: 18px !important;
448 border-color: var(--mainColor) !important;
449 background-color: var(--mainColor) !important;
454 overflow: visible !important;
464 transform: rotate(45deg) scale(0);
465 border-right: 2px solid var(--mainBackgroundColor);
466 border-bottom: 2px solid var(--mainBackgroundColor);
471 transform: rotate(45deg) scale(1);
480 .ui-inputswitch-checked .ui-inputswitch-slider {
481 background-color: var(--mainColor) !important;
488 width: 2.5em !important;
489 height: 1.45em !important;
491 .ui-inputswitch-slider::before {
492 height: 1em !important;
493 width: 1em !important;
497 .ui-inputswitch-checked .ui-inputswitch-slider::before {
498 transform: translateX(1em) !important;
505 z-index: z(notification) !important;
507 .ui-toast-close-icon {
508 font-family: "Glyphicons Halflings";
516 &:hover .ui-toast-close-icon {
522 font-family: $main-fonts;
523 background-color: var(--mainBackgroundColor) !important;
525 box-sizing: border-box;
526 border: 1px solid #EBEEF5 !important;
527 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
530 &.ui-toast-message-success .glyphicon {
531 color: #8BC34A !important;
534 &.ui-toast-message-error .glyphicon {
535 color: #F44336 !important;
538 &.ui-toast-message-warn .glyphicon {
539 color: #F1680D !important;
542 &.ui-toast-message-info .glyphicon {
543 color: #03A9F4 !important;
546 .notification-block {
573 font-family: $main-fonts !important;