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;
37 background-color: transparent;
43 background-color: var(--mainBackgroundColor) !important;
48 font-family: $main-fonts;
49 font-size: 15px !important;
50 color: var(--mainForegroundColor) !important;
54 padding-left: 15px !important;
56 &:not(.action-cell):not(.expand-cell) {
57 overflow: hidden !important;
58 text-overflow: ellipsis !important;
59 white-space: nowrap !important;
65 background-color: var(--mainBackgroundColor) !important;
68 &.ui-state-highlight {
69 background-color: var(--submenuColor) !important;
72 color: var(--mainForegroundColor) !important;
80 background-color: var(--submenuColor) !important;
87 display: inline-block !important;
93 border: none !important;
97 border-top: none !important;
101 border-bottom: none !important;
113 border: none !important;
114 border-bottom: 1px solid !important;
115 border-color: var(--submenuColor) !important;
116 text-align: left !important;
117 padding: 5px 0 5px 15px !important;
118 font-weight: $font-semibold !important;
119 color: var(--mainForegroundColor) !important;
121 &.ui-sortable-column:hover {
122 background-color: var(--submenuColor) !important;
123 border: 1px solid !important;
124 border-color: var(--submenuColor) !important;
125 border-width: 0 1px !important;
128 border-width: 0 1px 0 0 !important;
132 &.ui-state-highlight {
133 background-color: var(--submenuColor) !important;
138 color: #000 !important;
139 font-size: 11px !important;
143 @extend .glyphicon-triangle-top;
145 color: var(--mainForegroundColor) !important;
149 @extend .glyphicon-triangle-bottom;
151 color: var(--mainForegroundColor) !important;
158 width: 250px !important;
159 padding: 0 !important;
166 display: none !important;
170 display: inline-block !important;
173 // keep displaying on touchscreen
174 @media not all and (hover: hover) and (pointer: fine) {
175 display: inline-block !important;
185 .ui-paginator-bottom {
186 background-color: var(--mainBackgroundColor) !important;
189 border-top: 1px solid !important;
190 border-color: var(--submenuColor) !important;
193 justify-content: center;
202 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
206 color: var(--inputPlaceholderColor);
210 .ui-paginator-current {
213 color: var(--inputPlaceholderColor);
220 @include glyphicon-light;
229 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
232 &.ui-state-disabled:hover {
233 background-color: #fff !important;
236 &.ui-paginator-first {
237 @extend .glyphicon-step-backward;
240 &.ui-paginator-prev {
241 @extend .glyphicon-chevron-left;
246 &.ui-paginator-next {
247 @extend .glyphicon-chevron-right;
252 &.ui-paginator-last {
253 @extend .glyphicon-step-forward;
257 .ui-paginator-pages {
258 height: auto !important;
263 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
268 color: var(--mainForegroundColor) !important;
269 font-weight: $font-semibold !important;
270 margin: 0 5px !important;
271 outline: 0 !important;
272 border-radius: 3px !important;
273 padding: 5px 2px !important;
274 height: auto !important;
275 line-height: initial !important;
278 &, &:hover, &:active, &:focus {
279 color: #fff !important;
280 background-color: var(--mainColor) !important;
289 // overflow data table
290 @mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
294 max-width: calc(100vw - #{$horizontal-margins * 2});
297 min-width: $table-min-width;
301 @if $mobile-paginator {
302 p-paginator .ui-paginator-bottom {
305 .ui-paginator-current {
310 a, .ui-paginator-pages {
311 vertical-align: middle;
318 // multiselect customizations
321 border-color: #C6C6C6;
323 &:not(.ui-state-disabled) {
325 border-color: #C6C6C6;
330 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
335 .ui-multiselect-label {
336 font-size: 15px !important;
337 padding: 4px 30px 4px 12px !important;
340 width: $width !important;
342 @media screen and (max-width: $width) {
343 width: 100% !important;
348 margin-left: 0 !important;
351 @include select-arrow-down;
359 //position: absolute !important;
365 // left: -2px !important;
369 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
370 background-color: var(--mainColorLighter);
373 .ui-inputtext:enabled:focus:not(.ui-state-error) {
374 border-color: var(--mainColorLighter) !important;
379 // PrimeNG calendar tweaks
380 p-calendar .ui-datepicker {
382 @include disable-default-a-behaviour;
385 .ui-datepicker-header {
387 .ui-datepicker-year {
391 .ui-datepicker-next {
392 @extend .glyphicon-chevron-right;
393 @include glyphicon-light;
395 color: #000 !important;
398 .pi.pi-chevron-right {
399 display: none !important;
403 .ui-datepicker-prev {
404 @extend .glyphicon-chevron-left;
405 @include glyphicon-light;
407 color: #000 !important;
410 .pi.pi-chevron-left {
411 display: none !important;
419 @extend .glyphicon-chevron-up;
420 @include glyphicon-light;
422 color: #000 !important;
425 .pi.pi-chevron-down {
426 @extend .glyphicon-chevron-down;
427 @include glyphicon-light;
429 color: #000 !important;
434 p-tablecheckbox:hover div .ui-chkbox-box {
435 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
441 width: 18px !important;
442 height: 18px !important;
447 border-color: var(--mainColor) !important;
448 background-color: var(--mainColor) !important;
453 overflow: visible !important;
463 transform: rotate(45deg) scale(0);
464 border-right: 2px solid var(--mainBackgroundColor);
465 border-bottom: 2px solid var(--mainBackgroundColor);
470 transform: rotate(45deg) scale(1);
479 .ui-inputswitch-checked .ui-inputswitch-slider {
480 background-color: var(--mainColor) !important;
487 width: 2.5em !important;
488 height: 1.45em !important;
490 .ui-inputswitch-slider::before {
491 height: 1em !important;
492 width: 1em !important;
496 .ui-inputswitch-checked .ui-inputswitch-slider::before {
497 transform: translateX(1em) !important;
504 z-index: z(notification) !important;
506 .ui-toast-close-icon {
507 font-family: "Glyphicons Halflings";
515 &:hover .ui-toast-close-icon {
521 font-family: $main-fonts;
522 background-color: var(--mainBackgroundColor) !important;
524 box-sizing: border-box;
525 border: 1px solid #EBEEF5 !important;
526 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
529 &.ui-toast-message-success .glyphicon {
530 color: #8BC34A !important;
533 &.ui-toast-message-error .glyphicon {
534 color: #F44336 !important;
537 &.ui-toast-message-warn .glyphicon {
538 color: #F1680D !important;
541 &.ui-toast-message-info .glyphicon {
542 color: #03A9F4 !important;
545 .notification-block {
572 font-family: $main-fonts !important;