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;
333 p-tablecheckbox:hover div .ui-chkbox-box {
334 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
340 width: 18px !important;
341 height: 18px !important;
346 border-color: var(--mainColor) !important;
347 background-color: var(--mainColor) !important;
352 overflow: visible !important;
362 transform: rotate(45deg) scale(0);
363 border-right: 2px solid var(--mainBackgroundColor);
364 border-bottom: 2px solid var(--mainBackgroundColor);
369 transform: rotate(45deg) scale(1);
376 .ui-inputswitch-checked .ui-inputswitch-slider {
377 background-color: var(--mainColor) !important;
384 z-index: 10010 !important;
388 font-family: $main-fonts;
390 &.ui-toast-message-success {
391 color: #fff !important;
392 background-color: #8BC34A !important;
395 &.ui-toast-message-error {
396 color: #fff !important;
397 background-color: #F44336 !important;
400 &.ui-toast-message-info {
401 color: #fff !important;
402 background-color: #03A9F4 !important;
405 &.ui-toast-message-info {
406 color: #fff !important;
407 background-color: #03A9F4 !important;
410 .notification-block {
437 font-family: $main-fonts !important;