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;
19 // data table customizations
22 border: none !important;
23 background-color: var(--mainBackgroundColor) !important;
33 background-color: var(--mainBackgroundColor) !important;
38 font-family: $main-fonts;
39 font-size: 15px !important;
40 color: var(--mainForegroundColor) !important;
44 padding-left: 15px !important;
46 &:not(.action-cell):not(.expand-cell) {
47 overflow: hidden !important;
48 text-overflow: ellipsis !important;
49 white-space: nowrap !important;
55 background-color: var(--mainBackgroundColor) !important;
58 &.ui-state-highlight {
59 background-color: var(--submenuColor) !important;
62 color: var(--mainForegroundColor) !important;
70 background-color: var(--submenuColor) !important;
77 display: block !important;
83 border: none !important;
87 border-top: none !important;
91 border-bottom: none !important;
103 border: none !important;
104 border-bottom: 1px solid !important;
105 border-color: var(--submenuColor) !important;
106 text-align: left !important;
107 padding: 5px 0 5px 15px !important;
108 font-weight: $font-semibold !important;
109 color: var(--mainForegroundColor) !important;
111 &.ui-sortable-column:hover {
112 background-color: var(--submenuColor) !important;
113 border: 1px solid !important;
114 border-color: var(--submenuColor) !important;
115 border-width: 0 1px !important;
118 border-width: 0 1px 0 0 !important;
122 &.ui-state-highlight {
123 background-color: var(--submenuColor) !important;
128 color: #000 !important;
129 font-size: 11px !important;
133 @extend .glyphicon-triangle-top;
135 color: var(--mainForegroundColor) !important;
139 @extend .glyphicon-triangle-bottom;
141 color: var(--mainForegroundColor) !important;
148 width: 250px !important;
149 padding: 0 !important;
156 display: none !important;
159 display: block !important;
163 my-edit-button + my-delete-button {
169 .ui-paginator-bottom {
170 background-color: var(--mainBackgroundColor) !important;
173 border-top: 1px solid !important;
174 border-color: var(--submenuColor) !important;
177 justify-content: center;
184 @include glyphicon-light;
191 &.ui-state-disabled:hover {
192 background-color: #fff !important;
195 &.ui-paginator-first {
196 @extend .glyphicon-step-backward;
199 &.ui-paginator-prev {
200 @extend .glyphicon-chevron-left;
205 &.ui-paginator-next {
206 @extend .glyphicon-chevron-right;
211 &.ui-paginator-last {
212 @extend .glyphicon-step-forward;
216 .ui-paginator-pages {
217 height: auto !important;
220 color: var(--mainForegroundColor) !important;
221 font-weight: $font-semibold !important;
222 margin: 0 5px !important;
223 outline: 0 !important;
224 border-radius: 3px !important;
225 padding: 5px 2px !important;
226 height: auto !important;
227 line-height: initial !important;
230 &, &:hover, &:active, &:focus {
231 color: #fff !important;
232 background-color: var(--mainColor) !important;
241 // multiselect customizations
243 .ui-multiselect-label {
244 font-size: 15px !important;
245 padding: 4px 30px 4px 12px !important;
248 width: $width !important;
250 @media screen and (max-width: $width) {
251 width: 100% !important;
256 margin-left: 0 !important;
259 @include select-arrow-down;
267 //position: absolute !important;
273 // left: -2px !important;
278 // PrimeNG calendar tweaks
279 p-calendar .ui-datepicker {
281 @include disable-default-a-behaviour;
284 .ui-datepicker-header {
286 .ui-datepicker-year {
290 .ui-datepicker-next {
291 @extend .glyphicon-chevron-right;
292 @include glyphicon-light;
294 color: #000 !important;
297 .pi.pi-chevron-right {
298 display: none !important;
302 .ui-datepicker-prev {
303 @extend .glyphicon-chevron-left;
304 @include glyphicon-light;
306 color: #000 !important;
309 .pi.pi-chevron-left {
310 display: none !important;
318 @extend .glyphicon-chevron-up;
319 @include glyphicon-light;
321 color: #000 !important;
324 .pi.pi-chevron-down {
325 @extend .glyphicon-chevron-down;
326 @include glyphicon-light;
328 color: #000 !important;
336 width: 18px !important;
337 height: 18px !important;
342 border-color: var(--mainColor) !important;
343 background-color: var(--mainColor) !important;
348 overflow: visible !important;
358 transform: rotate(45deg) scale(0);
359 border-right: 2px solid var(--mainBackgroundColor);
360 border-bottom: 2px solid var(--mainBackgroundColor);
365 transform: rotate(45deg) scale(1);
372 .ui-inputswitch-checked .ui-inputswitch-slider {
373 background-color: var(--mainColor) !important;
380 z-index: 10010 !important;
384 font-family: $main-fonts;
386 &.ui-toast-message-success {
387 color: #fff !important;
388 background-color: #8BC34A !important;
391 &.ui-toast-message-error {
392 color: #fff !important;
393 background-color: #F44336 !important;
396 &.ui-toast-message-info {
397 color: #fff !important;
398 background-color: #03A9F4 !important;
401 &.ui-toast-message-info {
402 color: #fff !important;
403 background-color: #03A9F4 !important;
406 .notification-block {
433 font-family: $main-fonts !important;