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;
13 // data table customizations
16 border: none !important;
17 background-color: var(--mainBackgroundColor) !important;
27 background-color: var(--mainBackgroundColor) !important;
32 font-family: $main-fonts;
33 font-size: 15px !important;
34 color: var(--mainForegroundColor) !important;
38 padding-left: 15px !important;
41 overflow: hidden !important;
42 text-overflow: ellipsis !important;
43 white-space: nowrap !important;
49 background-color: var(--mainBackgroundColor) !important;
52 &.ui-state-highlight {
53 background-color: var(--submenuColor) !important;
56 color: var(--mainForegroundColor) !important;
64 background-color: var(--submenuColor) !important;
71 display: block !important;
77 border: none !important;
81 border-top: none !important;
85 border-bottom: none !important;
97 border: none !important;
98 border-bottom: 1px solid !important;
99 border-color: var(--submenuColor) !important;
100 text-align: left !important;
101 padding: 5px 0 5px 15px !important;
102 font-weight: $font-semibold !important;
103 color: var(--mainForegroundColor) !important;
105 &.ui-sortable-column:hover {
106 background-color: var(--submenuColor) !important;
107 border: 1px solid !important;
108 border-color: var(--submenuColor) !important;
109 border-width: 0 1px !important;
112 border-width: 0 1px 0 0 !important;
116 &.ui-state-highlight {
117 background-color: var(--submenuColor) !important;
122 color: #000 !important;
123 font-size: 11px !important;
127 @extend .glyphicon-triangle-top;
129 color: var(--mainForegroundColor) !important;
133 @extend .glyphicon-triangle-bottom;
135 color: var(--mainForegroundColor) !important;
142 width: 250px !important;
143 padding: 0 !important;
150 display: none !important;
153 display: block !important;
157 my-edit-button + my-delete-button {
163 .ui-paginator-bottom {
164 background-color: var(--mainBackgroundColor) !important;
167 border-top: 1px solid !important;
168 border-color: var(--submenuColor) !important;
171 justify-content: center;
178 @include glyphicon-light;
185 &.ui-state-disabled:hover {
186 background-color: #fff !important;
189 &.ui-paginator-first {
190 @extend .glyphicon-step-backward;
193 &.ui-paginator-prev {
194 @extend .glyphicon-chevron-left;
199 &.ui-paginator-next {
200 @extend .glyphicon-chevron-right;
205 &.ui-paginator-last {
206 @extend .glyphicon-step-forward;
210 .ui-paginator-pages {
211 height: auto !important;
214 color: var(--mainForegroundColor) !important;
215 font-weight: $font-semibold !important;
216 margin: 0 5px !important;
217 outline: 0 !important;
218 border-radius: 3px !important;
219 padding: 5px 2px !important;
220 height: auto !important;
221 line-height: initial !important;
224 &, &:hover, &:active, &:focus {
225 color: #fff !important;
226 background-color: var(--mainColor) !important;
235 // multiselect customizations
237 .ui-multiselect-label {
238 font-size: 15px !important;
239 padding: 4px 30px 4px 12px !important;
242 width: $width !important;
244 @media screen and (max-width: $width) {
245 width: 100% !important;
250 margin-left: 0 !important;
253 @include select-arrow-down;
261 //position: absolute !important;
267 // left: -2px !important;
272 // PrimeNG calendar tweaks
273 p-calendar .ui-datepicker {
275 @include disable-default-a-behaviour;
278 .ui-datepicker-header {
280 .ui-datepicker-year {
284 .ui-datepicker-next {
285 @extend .glyphicon-chevron-right;
286 @include glyphicon-light;
288 color: #000 !important;
291 .pi.pi-chevron-right {
292 display: none !important;
296 .ui-datepicker-prev {
297 @extend .glyphicon-chevron-left;
298 @include glyphicon-light;
300 color: #000 !important;
303 .pi.pi-chevron-left {
304 display: none !important;
312 @extend .glyphicon-chevron-up;
313 @include glyphicon-light;
315 color: #000 !important;
318 .pi.pi-chevron-down {
319 @extend .glyphicon-chevron-down;
320 @include glyphicon-light;
322 color: #000 !important;
330 width: 18px !important;
331 height: 18px !important;
336 border-color: var(--mainColor) !important;
337 background-color: var(--mainColor) !important;
342 overflow: visible !important;
352 transform: rotate(45deg) scale(0);
353 border-right: 2px solid var(--mainBackgroundColor);
354 border-bottom: 2px solid var(--mainBackgroundColor);
359 transform: rotate(45deg) scale(1);
366 .ui-inputswitch-checked .ui-inputswitch-slider {
367 background-color: var(--mainColor) !important;
374 z-index: 10010 !important;
378 font-family: $main-fonts;
380 &.ui-toast-message-success {
381 color: #fff !important;
382 background-color: #8BC34A !important;
385 &.ui-toast-message-error {
386 color: #fff !important;
387 background-color: #F44336 !important;
390 &.ui-toast-message-info {
391 color: #fff !important;
392 background-color: #03A9F4 !important;
395 &.ui-toast-message-info {
396 color: #fff !important;
397 background-color: #03A9F4 !important;
400 .notification-block {
427 font-family: $main-fonts !important;