4 @import '~primeng/resources/primeng.css';
6 // Override primeng style we don't want
8 border-radius: inherit;
11 // Taken from old nova light theme
19 display: inline-block;
20 vertical-align: middle;
25 body .p-checkbox .p-checkbox-box {
26 border: 1px solid #a6a6a6;
27 background-color: #ffffff;
32 transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
34 body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
35 border-color: #212121;
37 body .p-checkbox .p-checkbox-box .p-checkbox-icon {
45 background-color: #f4f4f4;
46 border: 1px solid #c8c8c8;
49 body .p-paginator .p-paginator-first,
50 body .p-paginator .p-paginator-prev,
51 body .p-paginator .p-paginator-next,
52 body .p-paginator .p-paginator-last {
61 transition: box-shadow 0.2s;
64 body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
65 body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
66 body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
67 body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
68 background-color: #e0e0e0;
71 body .p-paginator .p-paginator-first:focus,
72 body .p-paginator .p-paginator-prev:focus,
73 body .p-paginator .p-paginator-next:focus,
74 body .p-paginator .p-paginator-last:focus {
77 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
79 body .p-paginator .p-paginator-current {
85 body .p-paginator .p-dropdown {
88 body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
91 body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
94 body .p-paginator .p-paginator-first:before {
98 body .p-paginator .p-paginator-prev:before {
102 body .p-paginator .p-paginator-next:before {
106 body .p-paginator .p-paginator-last:before {
110 body .p-paginator .p-paginator-pages {
112 display: inline-block;
115 body .p-paginator .p-paginator-pages .p-paginator-page {
120 line-height: 2.286em;
124 transition: box-shadow 0.2s;
127 body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
128 background-color: #e0e0e0;
131 body .p-paginator .p-paginator-pages .p-paginator-page:focus {
134 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
136 body .p-paginator .p-dropdown {
146 border: 1px solid #a6a6a6;
147 transition: border-color 0.2s, box-shadow 0.2s;
149 body .p-dropdown:not(.p-disabled):hover {
150 border-color: #212121;
152 body .p-dropdown:not(.p-disabled).p-focus {
155 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
156 border-color: pvar(--mainColor);
158 body .p-dropdown .p-dropdown-label {
161 body .p-dropdown .p-dropdown-trigger {
162 background-color: #ffffff;
169 body .p-dropdown .p-dropdown-clear-icon {
172 body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
175 body .p-dropdown-panel {
177 border: 1px solid #c8c8c8;
178 background-color: #ffffff;
179 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
181 body .p-dropdown-panel .p-dropdown-filter-container {
182 padding: 0.429em 0.857em 0.429em 0.857em;
183 border-bottom: 1px solid #eaeaea;
185 background-color: #ffffff;
188 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
192 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
196 color: pvar(--mainColor);
198 body .p-dropdown-panel .p-dropdown-items {
201 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
203 padding: 0.429em 0.857em;
206 background-color: transparent;
207 -moz-border-radius: 0;
208 -webkit-border-radius: 0;
211 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
212 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
214 background-color: pvar(--mainColor);
216 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
217 body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
219 background-color: #eaeaea;
221 body p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
222 border: 1px solid #a80000;
226 body .p-toast .p-toast-message {
227 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
235 background-color: #ffffff;
237 border: 1px solid #a6a6a6;
240 body .p-datepicker:not(.p-datepicker-inline) {
241 border: 1px solid #c8c8c8;
242 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
244 body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:focus,
245 body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:focus {
248 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
250 body .p-datepicker:not(.p-disabled) table td a:not(.p-highlight):not(.p-highlight):hover {
251 background-color: #eaeaea;
253 body .p-datepicker:not(.p-disabled) .p-monthpicker a.p-monthpicker-month:not(.p-highlight):hover {
254 background-color: #eaeaea;
256 body .p-datepicker .p-datepicker-header {
257 padding: 0.429em 0.857em 0.429em 0.857em;
258 background-color: #ffffff;
260 -moz-border-radius: 0;
261 -webkit-border-radius: 0;
264 body .p-datepicker .p-datepicker-header .p-datepicker-prev,
265 body .p-datepicker .p-datepicker-header .p-datepicker-next {
269 transition: color 0.2s, box-shadow 0.2s;
271 body .p-datepicker .p-datepicker-header .p-datepicker-title {
276 body .p-datepicker .p-datepicker-header .p-datepicker-title select {
279 transition: color 0.2s, box-shadow 0.2s;
281 body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
284 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
286 body .p-datepicker table {
288 margin: 0.857em 0 0 0;
290 body .p-datepicker table th {
293 body .p-datepicker table th.p-datepicker-weekheader {
294 border-right: 1px solid #a6a6a6;
296 body .p-datepicker table td {
299 body .p-datepicker table td > a,
300 body .p-datepicker table td > span {
305 transition: box-shadow 0.2s;
308 body .p-datepicker table td > a.p-highlight,
309 body .p-datepicker table td > span.p-highlight {
311 background-color: pvar(--mainColor);
313 body .p-datepicker table td > a {
316 body .p-datepicker table td > a:focus {
319 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
321 body .p-datepicker table td.p-datepicker-today > a,
322 body .p-datepicker table td.p-datepicker-today > span {
323 background-color: #d0d0d0;
326 body .p-datepicker table td.p-datepicker-today > a.p-highlight,
327 body .p-datepicker table td.p-datepicker-today > span.p-highlight {
329 background-color: pvar(--mainColor);
331 body .p-datepicker table td.p-datepicker-weeknumber {
332 border-right: 1px solid #a6a6a6;
334 body .p-datepicker .p-datepicker-buttonbar {
335 border-top: 1px solid #d8dae2;
337 body .p-datepicker .p-timepicker {
339 border-top: 1px solid #d8dae2;
342 body .p-datepicker .p-timepicker a {
346 body .p-datepicker .p-timepicker a:hover {
347 color: pvar(--mainColor);
349 body .p-datepicker .p-timepicker span {
352 body .p-datepicker .p-monthpicker .p-monthpicker-month {
355 body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
357 background-color: pvar(--mainColor);
359 body .p-datepicker.p-datepicker-timeonly {
362 body .p-datepicker.p-datepicker-timeonly .p-timepicker {
365 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
366 border-right: 1px solid #d8dae2;
367 padding-right: 0.857em;
368 padding-left: 0.857em;
372 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
375 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
377 border-right: 0 none;
379 body .p-calendar.p-calendar-w-btn .p-inputtext {
380 border-top-right-radius: 0;
381 border-bottom-right-radius: 0;
382 border-right: 0 none;
384 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error),
385 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
386 border-right: 0 none;
388 body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
390 border-top-left-radius: 0;
391 border-bottom-left-radius: 0;
393 body .ui-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
394 width: calc(100% - 2.357em);
396 body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
397 border: 1px solid #a80000;
399 body .p-timepicker .p-separator {
405 body .p-autocomplete .p-autocomplete-input {
408 body .p-autocomplete-panel {
410 border: 1px solid #c8c8c8;
411 background-color: #ffffff;
412 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
414 body .p-autocomplete-panel .p-autocomplete-items {
417 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
419 padding: 0.429em 0.857em;
422 background-color: transparent;
425 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
426 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
428 background-color: pvar(--mainColor);
430 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
431 padding: 0.429em 0.857em;
432 background-color: #d8dae2;
435 body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
436 border: 1px solid #a80000;
440 body .p-selectbutton .p-button {
441 background-color: #dadada;
442 border: 1px solid #dadada;
445 transition: background-color 0.2s, box-shadow 0.2s;
447 body .p-selectbutton .p-button .p-button-icon-left {
450 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
451 background-color: #c8c8c8;
452 border-color: #c8c8c8;
455 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
458 body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight).ui-state-focus {
459 box-shadow: 0 0 0 0.2em #8dcdff;
462 body .p-selectbutton .p-button.p-highlight {
463 background-color: pvar(--mainColor);
464 border-color: pvar(--mainColor);
467 body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
470 body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
471 background-color: pvar(--mainColorLighter);
472 border-color: pvar(--mainColorLighter);
475 body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
478 body .p-selectbutton .p-button:first-child {
479 border-top-left-radius: 3px;
480 border-bottom-left-radius: 3px;
482 body .p-selectbutton .p-button:last-child {
483 border-top-right-radius: 3px;
484 border-bottom-right-radius: 3px;
486 body p-selectbutton.ng-dirty.ng-invalid .p-button {
487 border: 1px solid #a80000;
492 @mixin glyphicon-light {
493 font-family: 'Glyphicons Halflings';
494 text-decoration: none !important;
495 color: pvar(--mainForegroundColor) !important;
499 // data table customizations
501 .p-datatable-header {
502 border: none !important;
503 background-color: pvar(--mainBackgroundColor) !important;
508 display: inline-flex;
516 background-color: transparent;
522 background-color: pvar(--mainBackgroundColor) !important;
525 text-overflow: ellipsis;
530 font-family: $main-fonts;
531 font-size: 15px !important;
532 color: pvar(--mainForegroundColor) !important;
536 padding-left: 15px !important;
542 &:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
543 overflow: hidden !important;
544 text-overflow: ellipsis !important;
545 white-space: nowrap !important;
551 background-color: pvar(--mainBackgroundColor) !important;
555 background-color: pvar(--submenuBackgroundColor) !important;
558 color: pvar(--mainForegroundColor) !important;
566 background-color: pvar(--submenuBackgroundColor) !important;
570 border: none !important;
571 white-space: normal !important;
575 border-top: none !important;
579 border-bottom: none !important;
584 box-shadow: none !important;
596 border: none !important;
597 border-bottom: 1px solid !important;
598 border-color: pvar(--submenuBackgroundColor) !important;
599 text-align: left !important;
600 padding: 5px 0 5px 15px !important;
601 font-weight: $font-semibold !important;
602 color: pvar(--mainForegroundColor) !important;
604 &.p-sortable-column:hover {
605 background-color: pvar(--submenuBackgroundColor) !important;
606 border: 1px solid !important;
607 border-color: pvar(--submenuBackgroundColor) !important;
608 border-width: 0 1px !important;
611 border-width: 0 1px 0 0 !important;
616 background-color: pvar(--submenuBackgroundColor) !important;
621 color: #000 !important;
622 font-size: 11px !important;
625 &.pi-sort-amount-up-alt {
626 @extend .glyphicon-triangle-top;
628 color: pvar(--mainForegroundColor) !important;
631 &.pi-sort-amount-down {
632 @extend .glyphicon-triangle-bottom;
634 color: pvar(--mainForegroundColor) !important;
641 width: 250px !important;
647 display: inline-block !important;
657 .p-paginator-bottom {
658 background-color: pvar(--mainBackgroundColor) !important;
661 border-top: 1px solid !important;
662 border-color: pvar(--submenuBackgroundColor) !important;
665 justify-content: center;
674 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
678 color: pvar(--inputPlaceholderColor);
682 .p-paginator-current {
685 color: pvar(--inputPlaceholderColor);
693 @include glyphicon-light;
702 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
706 background-color: #fff !important;
709 &.p-paginator-first {
710 @extend .glyphicon-step-backward;
714 @extend .glyphicon-chevron-left;
720 @extend .glyphicon-chevron-right;
726 @extend .glyphicon-step-forward;
731 height: auto !important;
736 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
739 color: pvar(--mainForegroundColor) !important;
740 font-weight: $font-semibold !important;
741 margin: 0 5px !important;
742 outline: 0 !important;
743 border-radius: 3px !important;
744 padding: 5px 2px !important;
745 height: auto !important;
746 line-height: initial !important;
749 &, &:hover, &:active, &:focus {
750 color: #fff !important;
751 background-color: pvar(--mainColor) !important;
760 // overflow data table
762 .p-datatable-wrapper {
767 min-width: breakpoint(lg);
771 @media screen and (max-width: #{breakpoint(lg)}) {
774 .p-paginator-current,
782 @media screen and (max-width: $mobile-view) {
785 .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
792 // PrimeNG calendar tweaks
793 p-calendar .p-datepicker {
795 @include disable-default-a-behaviour;
798 .p-datepicker-header {
805 @extend .glyphicon-chevron-right;
806 @include glyphicon-light;
808 color: #000 !important;
811 .pi.pi-chevron-right {
812 display: none !important;
817 @extend .glyphicon-chevron-left;
818 @include glyphicon-light;
820 color: #000 !important;
823 .pi.pi-chevron-left {
824 display: none !important;
832 @extend .glyphicon-chevron-up;
833 @include glyphicon-light;
835 color: #000 !important;
838 .pi.pi-chevron-down {
839 @extend .glyphicon-chevron-down;
840 @include glyphicon-light;
842 color: #000 !important;
847 p-tablecheckbox:hover div .p-checkbox-box {
848 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
854 width: 18px !important;
855 height: 18px !important;
860 border-color: pvar(--mainColor) !important;
861 background-color: pvar(--mainColor) !important;
866 overflow: visible !important;
876 transform: rotate(45deg) scale(0);
877 border-right: 2px solid pvar(--mainBackgroundColor);
878 border-bottom: 2px solid pvar(--mainBackgroundColor);
883 transform: rotate(45deg) scale(1);
894 z-index: z(notification) !important;
896 .p-toast-icon-close {
897 font-family: "Glyphicons Halflings";
908 &:hover .p-toast-icon-close {
914 font-family: $main-fonts;
915 background-color: pvar(--mainBackgroundColor) !important;
916 color: pvar(--mainForegroundColor) !important;
918 box-sizing: border-box;
919 border: 1px solid #EBEEF5 !important;
920 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
923 &.p-toast-message-success .glyphicon {
924 color: #8BC34A !important;
927 &.p-toast-message-error .glyphicon {
928 color: #F44336 !important;
931 &.p-toast-message-warn .glyphicon {
932 color: #F1680D !important;
935 &.p-toast-message-info .glyphicon {
936 color: #03A9F4 !important;
939 .notification-block {