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;
105 border: none !important;
106 border-bottom: 1px solid !important;
107 border-color: pvar(--submenuColor) !important;
108 text-align: left !important;
109 padding: 5px 0 5px 15px !important;
110 font-weight: $font-semibold !important;
111 color: pvar(--mainForegroundColor) !important;
113 &.ui-sortable-column:hover {
114 background-color: pvar(--submenuColor) !important;
115 border: 1px solid !important;
116 border-color: pvar(--submenuColor) !important;
117 border-width: 0 1px !important;
120 border-width: 0 1px 0 0 !important;
124 &.ui-state-highlight {
125 background-color: pvar(--submenuColor) !important;
130 color: #000 !important;
131 font-size: 11px !important;
134 &.pi-sort-amount-up-alt {
135 @extend .glyphicon-triangle-top;
137 color: pvar(--mainForegroundColor) !important;
140 &.pi-sort-amount-down {
141 @extend .glyphicon-triangle-bottom;
143 color: pvar(--mainForegroundColor) !important;
150 width: 250px !important;
151 padding: 0 !important;
158 display: inline-block !important;
168 .ui-paginator-bottom {
169 background-color: pvar(--mainBackgroundColor) !important;
172 border-top: 1px solid !important;
173 border-color: pvar(--submenuColor) !important;
176 justify-content: center;
185 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
189 color: pvar(--inputPlaceholderColor);
193 .ui-paginator-current {
196 color: pvar(--inputPlaceholderColor);
203 @include glyphicon-light;
212 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
215 &.ui-state-disabled:hover {
216 background-color: #fff !important;
219 &.ui-paginator-first {
220 @extend .glyphicon-step-backward;
223 &.ui-paginator-prev {
224 @extend .glyphicon-chevron-left;
229 &.ui-paginator-next {
230 @extend .glyphicon-chevron-right;
235 &.ui-paginator-last {
236 @extend .glyphicon-step-forward;
240 .ui-paginator-pages {
241 height: auto !important;
246 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
251 color: pvar(--mainForegroundColor) !important;
252 font-weight: $font-semibold !important;
253 margin: 0 5px !important;
254 outline: 0 !important;
255 border-radius: 3px !important;
256 padding: 5px 2px !important;
257 height: auto !important;
258 line-height: initial !important;
261 &, &:hover, &:active, &:focus {
262 color: #fff !important;
263 background-color: pvar(--mainColor) !important;
272 // overflow data table
273 @mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
277 max-width: calc(100vw - #{$horizontal-margins * 2});
280 min-width: $table-min-width;
284 @if $mobile-paginator {
285 p-paginator .ui-paginator-bottom {
288 .ui-paginator-current {
293 a, .ui-paginator-pages {
294 vertical-align: middle;
301 // multiselect customizations
304 border-color: #C6C6C6;
306 &:not(.ui-state-disabled) {
308 border-color: #C6C6C6;
313 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
318 .ui-multiselect-label {
319 font-size: 15px !important;
320 padding: 4px 30px 4px 12px !important;
323 width: $width !important;
325 @media screen and (max-width: $width) {
326 width: 100% !important;
330 .pi.pi-chevron-down {
331 margin-left: 0 !important;
334 @include select-arrow-down;
342 //position: absolute !important;
348 // left: -2px !important;
352 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
353 background-color: pvar(--mainColorLighter);
356 .ui-inputtext:enabled:focus:not(.ui-state-error) {
357 border-color: pvar(--mainColorLighter) !important;
362 // PrimeNG calendar tweaks
363 p-calendar .ui-datepicker {
365 @include disable-default-a-behaviour;
368 .ui-datepicker-header {
370 .ui-datepicker-year {
374 .ui-datepicker-next {
375 @extend .glyphicon-chevron-right;
376 @include glyphicon-light;
378 color: #000 !important;
381 .pi.pi-chevron-right {
382 display: none !important;
386 .ui-datepicker-prev {
387 @extend .glyphicon-chevron-left;
388 @include glyphicon-light;
390 color: #000 !important;
393 .pi.pi-chevron-left {
394 display: none !important;
402 @extend .glyphicon-chevron-up;
403 @include glyphicon-light;
405 color: #000 !important;
408 .pi.pi-chevron-down {
409 @extend .glyphicon-chevron-down;
410 @include glyphicon-light;
412 color: #000 !important;
417 p-tablecheckbox:hover div .ui-chkbox-box {
418 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
424 width: 18px !important;
425 height: 18px !important;
430 border-color: pvar(--mainColor) !important;
431 background-color: pvar(--mainColor) !important;
436 overflow: visible !important;
446 transform: rotate(45deg) scale(0);
447 border-right: 2px solid pvar(--mainBackgroundColor);
448 border-bottom: 2px solid pvar(--mainBackgroundColor);
453 transform: rotate(45deg) scale(1);
462 .ui-inputswitch-checked .ui-inputswitch-slider {
463 background-color: pvar(--mainColor) !important;
470 width: 2.5em !important;
471 height: 1.45em !important;
473 .ui-inputswitch-slider::before {
474 height: 1em !important;
475 width: 1em !important;
479 .ui-inputswitch-checked .ui-inputswitch-slider::before {
480 transform: translateX(1em) !important;
487 z-index: z(notification) !important;
489 .ui-toast-close-icon {
490 font-family: "Glyphicons Halflings";
498 &:hover .ui-toast-close-icon {
504 font-family: $main-fonts;
505 background-color: pvar(--mainBackgroundColor) !important;
506 color: pvar(--mainForegroundColor) !important;
508 box-sizing: border-box;
509 border: 1px solid #EBEEF5 !important;
510 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
513 &.ui-toast-message-success .glyphicon {
514 color: #8BC34A !important;
517 &.ui-toast-message-error .glyphicon {
518 color: #F44336 !important;
521 &.ui-toast-message-warn .glyphicon {
522 color: #F1680D !important;
525 &.ui-toast-message-info .glyphicon {
526 color: #03A9F4 !important;
529 .notification-block {
556 font-family: $main-fonts !important;