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 // data table customizations
23 border: none !important;
24 background-color: var(--mainBackgroundColor) !important;
34 background-color: var(--mainBackgroundColor) !important;
39 font-family: $main-fonts;
40 font-size: 15px !important;
41 color: var(--mainForegroundColor) !important;
45 padding-left: 15px !important;
47 &:not(.action-cell):not(.expand-cell) {
48 overflow: hidden !important;
49 text-overflow: ellipsis !important;
50 white-space: nowrap !important;
56 background-color: var(--mainBackgroundColor) !important;
59 &.ui-state-highlight {
60 background-color: var(--submenuColor) !important;
63 color: var(--mainForegroundColor) !important;
71 background-color: var(--submenuColor) !important;
78 display: block !important;
84 border: none !important;
88 border-top: none !important;
92 border-bottom: none !important;
104 border: none !important;
105 border-bottom: 1px solid !important;
106 border-color: var(--submenuColor) !important;
107 text-align: left !important;
108 padding: 5px 0 5px 15px !important;
109 font-weight: $font-semibold !important;
110 color: var(--mainForegroundColor) !important;
112 &.ui-sortable-column:hover {
113 background-color: var(--submenuColor) !important;
114 border: 1px solid !important;
115 border-color: var(--submenuColor) !important;
116 border-width: 0 1px !important;
119 border-width: 0 1px 0 0 !important;
123 &.ui-state-highlight {
124 background-color: var(--submenuColor) !important;
129 color: #000 !important;
130 font-size: 11px !important;
134 @extend .glyphicon-triangle-top;
136 color: var(--mainForegroundColor) !important;
140 @extend .glyphicon-triangle-bottom;
142 color: var(--mainForegroundColor) !important;
149 width: 250px !important;
150 padding: 0 !important;
157 display: none !important;
160 display: block !important;
164 my-edit-button + my-delete-button {
170 .ui-paginator-bottom {
171 background-color: var(--mainBackgroundColor) !important;
174 border-top: 1px solid !important;
175 border-color: var(--submenuColor) !important;
178 justify-content: center;
185 @include glyphicon-light;
192 &.ui-state-disabled:hover {
193 background-color: #fff !important;
196 &.ui-paginator-first {
197 @extend .glyphicon-step-backward;
200 &.ui-paginator-prev {
201 @extend .glyphicon-chevron-left;
206 &.ui-paginator-next {
207 @extend .glyphicon-chevron-right;
212 &.ui-paginator-last {
213 @extend .glyphicon-step-forward;
217 .ui-paginator-pages {
218 height: auto !important;
221 color: var(--mainForegroundColor) !important;
222 font-weight: $font-semibold !important;
223 margin: 0 5px !important;
224 outline: 0 !important;
225 border-radius: 3px !important;
226 padding: 5px 2px !important;
227 height: auto !important;
228 line-height: initial !important;
231 &, &:hover, &:active, &:focus {
232 color: #fff !important;
233 background-color: var(--mainColor) !important;
238 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
247 // multiselect customizations
250 border-color: #C6C6C6;
252 &:not(.ui-state-disabled) {
254 border-color: #C6C6C6;
259 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
264 .ui-multiselect-label {
265 font-size: 15px !important;
266 padding: 4px 30px 4px 12px !important;
269 width: $width !important;
271 @media screen and (max-width: $width) {
272 width: 100% !important;
277 margin-left: 0 !important;
280 @include select-arrow-down;
288 //position: absolute !important;
294 // left: -2px !important;
298 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
299 background-color: var(--mainColorLighter);
302 .ui-inputtext:enabled:focus:not(.ui-state-error) {
303 border-color: var(--mainColorLighter) !important;
308 // PrimeNG calendar tweaks
309 p-calendar .ui-datepicker {
311 @include disable-default-a-behaviour;
314 .ui-datepicker-header {
316 .ui-datepicker-year {
320 .ui-datepicker-next {
321 @extend .glyphicon-chevron-right;
322 @include glyphicon-light;
324 color: #000 !important;
327 .pi.pi-chevron-right {
328 display: none !important;
332 .ui-datepicker-prev {
333 @extend .glyphicon-chevron-left;
334 @include glyphicon-light;
336 color: #000 !important;
339 .pi.pi-chevron-left {
340 display: none !important;
348 @extend .glyphicon-chevron-up;
349 @include glyphicon-light;
351 color: #000 !important;
354 .pi.pi-chevron-down {
355 @extend .glyphicon-chevron-down;
356 @include glyphicon-light;
358 color: #000 !important;
363 p-tablecheckbox:hover div .ui-chkbox-box {
364 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
370 width: 18px !important;
371 height: 18px !important;
376 border-color: var(--mainColor) !important;
377 background-color: var(--mainColor) !important;
382 overflow: visible !important;
392 transform: rotate(45deg) scale(0);
393 border-right: 2px solid var(--mainBackgroundColor);
394 border-bottom: 2px solid var(--mainBackgroundColor);
399 transform: rotate(45deg) scale(1);
408 .ui-inputswitch-checked .ui-inputswitch-slider {
409 background-color: var(--mainColor) !important;
416 width: 2.5em !important;
417 height: 1.45em !important;
419 .ui-inputswitch-slider::before {
420 height: 1em !important;
421 width: 1em !important;
425 .ui-inputswitch-checked .ui-inputswitch-slider::before {
426 transform: translateX(1em) !important;
433 z-index: z(notification) !important;
435 .ui-toast-close-icon {
436 font-family: "Glyphicons Halflings";
444 &:hover .ui-toast-close-icon {
450 font-family: $main-fonts;
451 background-color: var(--mainBackgroundColor) !important;
453 box-sizing: border-box;
454 border: 1px solid #EBEEF5 !important;
455 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
458 &.ui-toast-message-success .glyphicon {
459 color: #8BC34A !important;
462 &.ui-toast-message-error .glyphicon {
463 color: #F44336 !important;
466 &.ui-toast-message-warn .glyphicon {
467 color: #F1680D !important;
470 &.ui-toast-message-info .glyphicon {
471 color: #03A9F4 !important;
474 .notification-block {
501 font-family: $main-fonts !important;