4 @import '~primeng/resources/primeng.css';
6 // Taken from old nova light theme
14 display: inline-block;
15 vertical-align: middle;
20 body .p-checkbox .p-checkbox-box {
21 border: 1px solid #a6a6a6;
22 background-color: #ffffff;
27 transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
29 body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
30 border-color: #212121;
32 body .p-checkbox .p-checkbox-box .p-checkbox-icon {
40 background-color: #f4f4f4;
41 border: 1px solid #c8c8c8;
44 body .p-paginator .p-paginator-first,
45 body .p-paginator .p-paginator-prev,
46 body .p-paginator .p-paginator-next,
47 body .p-paginator .p-paginator-last {
56 transition: box-shadow 0.2s;
59 body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
60 body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
61 body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
62 body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
63 background-color: #e0e0e0;
66 body .p-paginator .p-paginator-first:focus,
67 body .p-paginator .p-paginator-prev:focus,
68 body .p-paginator .p-paginator-next:focus,
69 body .p-paginator .p-paginator-last:focus {
72 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
74 body .p-paginator .p-paginator-current {
80 body .p-paginator .p-dropdown {
83 body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
86 body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
89 body .p-paginator .p-paginator-first:before {
93 body .p-paginator .p-paginator-prev:before {
97 body .p-paginator .p-paginator-next:before {
101 body .p-paginator .p-paginator-last:before {
105 body .p-paginator .p-paginator-pages {
107 display: inline-block;
110 body .p-paginator .p-paginator-pages .p-paginator-page {
115 line-height: 2.286em;
119 transition: box-shadow 0.2s;
122 body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
123 background-color: #e0e0e0;
126 body .p-paginator .p-paginator-pages .p-paginator-page:focus {
129 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
131 body .p-paginator .p-dropdown {
141 border: 1px solid #a6a6a6;
142 transition: border-color 0.2s, box-shadow 0.2s;
144 body .p-dropdown:not(.p-disabled):hover {
145 border-color: #212121;
147 body .p-dropdown:not(.p-disabled).p-focus {
150 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
151 border-color: pvar(--mainColor);
153 body .p-dropdown .p-dropdown-label {
156 body .p-dropdown .p-dropdown-trigger {
157 background-color: #ffffff;
164 body .p-dropdown .p-dropdown-clear-icon {
167 body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
170 body .p-dropdown-panel {
172 border: 1px solid #c8c8c8;
173 background-color: #ffffff;
174 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
176 body .p-dropdown-panel .p-dropdown-filter-container {
177 padding: 0.429em 0.857em 0.429em 0.857em;
178 border-bottom: 1px solid #eaeaea;
180 background-color: #ffffff;
183 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
187 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
191 color: pvar(--mainColor);
193 body .p-dropdown-panel .p-dropdown-items {
196 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
198 padding: 0.429em 0.857em;
201 background-color: transparent;
202 -moz-border-radius: 0;
203 -webkit-border-radius: 0;
206 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
207 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
209 background-color: pvar(--mainColor);
211 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
212 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
214 background-color: #eaeaea;
216 body p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
217 border: 1px solid #a80000;
221 body .p-toast .p-toast-message {
222 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
230 background-color: #ffffff;
232 border: 1px solid #a6a6a6;
235 body .p-datepicker:not(.p-datepicker-inline) {
236 border: 1px solid #c8c8c8;
237 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
239 body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:focus,
240 body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:focus {
243 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
245 body .p-datepicker:not(.p-disabled) table td a:not(.p-highlight):not(.p-highlight):hover {
246 background-color: #eaeaea;
248 body .p-datepicker:not(.p-disabled) .p-monthpicker a.p-monthpicker-month:not(.p-highlight):hover {
249 background-color: #eaeaea;
251 body .p-datepicker .p-datepicker-header {
252 padding: 0.429em 0.857em 0.429em 0.857em;
253 background-color: #ffffff;
255 -moz-border-radius: 0;
256 -webkit-border-radius: 0;
259 body .p-datepicker .p-datepicker-header .p-datepicker-prev,
260 body .p-datepicker .p-datepicker-header .p-datepicker-next {
264 transition: color 0.2s, box-shadow 0.2s;
266 body .p-datepicker .p-datepicker-header .p-datepicker-title {
271 body .p-datepicker .p-datepicker-header .p-datepicker-title select {
274 transition: color 0.2s, box-shadow 0.2s;
276 body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
279 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
281 body .p-datepicker table {
283 margin: 0.857em 0 0 0;
285 body .p-datepicker table th {
288 body .p-datepicker table th.p-datepicker-weekheader {
289 border-right: 1px solid #a6a6a6;
291 body .p-datepicker table td {
294 body .p-datepicker table td > a,
295 body .p-datepicker table td > span {
300 transition: box-shadow 0.2s;
303 body .p-datepicker table td > a.p-highlight,
304 body .p-datepicker table td > span.p-highlight {
306 background-color: pvar(--mainColor);
308 body .p-datepicker table td > a {
311 body .p-datepicker table td > a:focus {
314 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
316 body .p-datepicker table td.p-datepicker-today > a,
317 body .p-datepicker table td.p-datepicker-today > span {
318 background-color: #d0d0d0;
321 body .p-datepicker table td.p-datepicker-today > a.p-highlight,
322 body .p-datepicker table td.p-datepicker-today > span.p-highlight {
324 background-color: pvar(--mainColor);
326 body .p-datepicker table td.p-datepicker-weeknumber {
327 border-right: 1px solid #a6a6a6;
329 body .p-datepicker .p-datepicker-buttonbar {
330 border-top: 1px solid #d8dae2;
332 body .p-datepicker .p-timepicker {
334 border-top: 1px solid #d8dae2;
337 body .p-datepicker .p-timepicker a {
341 body .p-datepicker .p-timepicker a:hover {
342 color: pvar(--mainColor);
344 body .p-datepicker .p-timepicker span {
347 body .p-datepicker .p-monthpicker .p-monthpicker-month {
350 body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
352 background-color: pvar(--mainColor);
354 body .p-datepicker.p-datepicker-timeonly {
357 body .p-datepicker.p-datepicker-timeonly .p-timepicker {
360 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
361 border-right: 1px solid #d8dae2;
362 padding-right: 0.857em;
363 padding-left: 0.857em;
367 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
370 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
372 border-right: 0 none;
374 body .p-calendar.p-calendar-w-btn .p-inputtext {
375 border-top-right-radius: 0;
376 border-bottom-right-radius: 0;
377 border-right: 0 none;
379 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error),
380 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
381 border-right: 0 none;
383 body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
385 border-top-left-radius: 0;
386 border-bottom-left-radius: 0;
388 body .ui-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
389 width: calc(100% - 2.357em);
391 body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
392 border: 1px solid #a80000;
394 body .p-timepicker .p-separator {
400 body .p-autocomplete .p-autocomplete-input {
403 body .p-autocomplete-panel {
405 border: 1px solid #c8c8c8;
406 background-color: #ffffff;
407 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
409 body .p-autocomplete-panel .p-autocomplete-items {
412 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
414 padding: 0.429em 0.857em;
417 background-color: transparent;
420 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
421 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
423 background-color: pvar(--mainColor);
425 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
426 padding: 0.429em 0.857em;
427 background-color: #d8dae2;
430 body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
431 border: 1px solid #a80000;
435 body .p-selectbutton .p-button {
436 background-color: #dadada;
437 border: 1px solid #dadada;
440 transition: background-color 0.2s, box-shadow 0.2s;
442 body .p-selectbutton .p-button .p-button-icon-left {
445 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
446 background-color: #c8c8c8;
447 border-color: #c8c8c8;
450 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
453 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight).ui-state-focus {
454 box-shadow: 0 0 0 0.2em #8dcdff;
457 body .p-selectbutton .p-button.p-highlight {
458 background-color: pvar(--mainColor);
459 border-color: pvar(--mainColor);
462 body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
465 body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
466 background-color: pvar(--mainColorLighter);
467 border-color: pvar(--mainColorLighter);
470 body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
473 body .p-selectbutton .p-button:first-child {
474 border-top-left-radius: 3px;
475 border-bottom-left-radius: 3px;
477 body .p-selectbutton .p-button:last-child {
478 border-top-right-radius: 3px;
479 border-bottom-right-radius: 3px;
481 body p-selectbutton.ng-dirty.ng-invalid .p-button {
482 border: 1px solid #a80000;
487 @mixin glyphicon-light {
488 font-family: 'Glyphicons Halflings';
489 text-decoration: none !important;
490 color: pvar(--mainForegroundColor) !important;
494 // data table customizations
496 .p-datatable-header {
497 border: none !important;
498 background-color: pvar(--mainBackgroundColor) !important;
503 display: inline-flex;
511 background-color: transparent;
517 background-color: pvar(--mainBackgroundColor) !important;
520 text-overflow: ellipsis;
525 font-family: $main-fonts;
526 font-size: 15px !important;
527 color: pvar(--mainForegroundColor) !important;
531 padding-left: 15px !important;
537 &:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
538 overflow: hidden !important;
539 text-overflow: ellipsis !important;
540 white-space: nowrap !important;
546 background-color: pvar(--mainBackgroundColor) !important;
550 background-color: pvar(--submenuBackgroundColor) !important;
553 color: pvar(--mainForegroundColor) !important;
561 background-color: pvar(--submenuBackgroundColor) !important;
565 border: none !important;
566 white-space: normal !important;
570 border-top: none !important;
574 border-bottom: none !important;
579 box-shadow: none !important;
591 border: none !important;
592 border-bottom: 1px solid !important;
593 border-color: pvar(--submenuBackgroundColor) !important;
594 text-align: left !important;
595 padding: 5px 0 5px 15px !important;
596 font-weight: $font-semibold !important;
597 color: pvar(--mainForegroundColor) !important;
599 &.p-sortable-column:hover {
600 background-color: pvar(--submenuBackgroundColor) !important;
601 border: 1px solid !important;
602 border-color: pvar(--submenuBackgroundColor) !important;
603 border-width: 0 1px !important;
606 border-width: 0 1px 0 0 !important;
611 background-color: pvar(--submenuBackgroundColor) !important;
616 color: #000 !important;
617 font-size: 11px !important;
620 &.pi-sort-amount-up-alt {
621 @extend .glyphicon-triangle-top;
623 color: pvar(--mainForegroundColor) !important;
626 &.pi-sort-amount-down {
627 @extend .glyphicon-triangle-bottom;
629 color: pvar(--mainForegroundColor) !important;
636 width: 250px !important;
642 display: inline-block !important;
652 .p-paginator-bottom {
653 background-color: pvar(--mainBackgroundColor) !important;
656 border-top: 1px solid !important;
657 border-color: pvar(--submenuBackgroundColor) !important;
660 justify-content: center;
669 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
673 color: pvar(--inputPlaceholderColor);
677 .p-paginator-current {
680 color: pvar(--inputPlaceholderColor);
688 @include glyphicon-light;
697 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
701 background-color: #fff !important;
704 &.p-paginator-first {
705 @extend .glyphicon-step-backward;
709 @extend .glyphicon-chevron-left;
715 @extend .glyphicon-chevron-right;
721 @extend .glyphicon-step-forward;
726 height: auto !important;
731 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
734 color: pvar(--mainForegroundColor) !important;
735 font-weight: $font-semibold !important;
736 margin: 0 5px !important;
737 outline: 0 !important;
738 border-radius: 3px !important;
739 padding: 5px 2px !important;
740 height: auto !important;
741 line-height: initial !important;
744 &, &:hover, &:active, &:focus {
745 color: #fff !important;
746 background-color: pvar(--mainColor) !important;
755 // overflow data table
757 .p-datatable-wrapper {
762 min-width: breakpoint(lg);
766 @media screen and (max-width: #{breakpoint(lg)}) {
769 .p-paginator-current,
777 @media screen and (max-width: $mobile-view) {
780 .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
787 // PrimeNG calendar tweaks
788 p-calendar .p-datepicker {
790 @include disable-default-a-behaviour;
793 .p-datepicker-header {
800 @extend .glyphicon-chevron-right;
801 @include glyphicon-light;
803 color: #000 !important;
806 .pi.pi-chevron-right {
807 display: none !important;
812 @extend .glyphicon-chevron-left;
813 @include glyphicon-light;
815 color: #000 !important;
818 .pi.pi-chevron-left {
819 display: none !important;
827 @extend .glyphicon-chevron-up;
828 @include glyphicon-light;
830 color: #000 !important;
833 .pi.pi-chevron-down {
834 @extend .glyphicon-chevron-down;
835 @include glyphicon-light;
837 color: #000 !important;
842 p-tablecheckbox:hover div .p-checkbox-box {
843 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
849 width: 18px !important;
850 height: 18px !important;
855 border-color: pvar(--mainColor) !important;
856 background-color: pvar(--mainColor) !important;
861 overflow: visible !important;
871 transform: rotate(45deg) scale(0);
872 border-right: 2px solid pvar(--mainBackgroundColor);
873 border-bottom: 2px solid pvar(--mainBackgroundColor);
878 transform: rotate(45deg) scale(1);
889 z-index: z(notification) !important;
891 .p-toast-icon-close {
892 font-family: "Glyphicons Halflings";
903 &:hover .p-toast-icon-close {
909 font-family: $main-fonts;
910 background-color: pvar(--mainBackgroundColor) !important;
911 color: pvar(--mainForegroundColor) !important;
913 box-sizing: border-box;
914 border: 1px solid #EBEEF5 !important;
915 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
918 &.p-toast-message-success .glyphicon {
919 color: #8BC34A !important;
922 &.p-toast-message-error .glyphicon {
923 color: #F44336 !important;
926 &.p-toast-message-warn .glyphicon {
927 color: #F1680D !important;
930 &.p-toast-message-info .glyphicon {
931 color: #03A9F4 !important;
934 .notification-block {