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 // PrimeNG calendar tweaks
236 p-calendar .ui-datepicker {
238 @include disable-default-a-behaviour;
241 .ui-datepicker-header {
243 .ui-datepicker-year {
247 .ui-datepicker-next {
248 @extend .glyphicon-chevron-right;
249 @include glyphicon-light;
251 color: #000 !important;
254 .pi.pi-chevron-right {
255 display: none !important;
259 .ui-datepicker-prev {
260 @extend .glyphicon-chevron-left;
261 @include glyphicon-light;
263 color: #000 !important;
266 .pi.pi-chevron-left {
267 display: none !important;
275 @extend .glyphicon-chevron-up;
276 @include glyphicon-light;
278 color: #000 !important;
281 .pi.pi-chevron-down {
282 @extend .glyphicon-chevron-down;
283 @include glyphicon-light;
285 color: #000 !important;
293 width: 18px !important;
294 height: 18px !important;
299 border-color: var(--mainColor) !important;
300 background-color: var(--mainColor) !important;
305 overflow: visible !important;
315 transform: rotate(45deg) scale(0);
316 border-right: 2px solid var(--mainBackgroundColor);
317 border-bottom: 2px solid var(--mainBackgroundColor);
322 transform: rotate(45deg) scale(1);
329 .ui-inputswitch-checked .ui-inputswitch-slider {
330 background-color: var(--mainColor) !important;
337 z-index: 10010 !important;
341 font-family: $main-fonts;
343 &.ui-toast-message-success {
344 color: #fff !important;
345 background-color: #8BC34A !important;
348 &.ui-toast-message-error {
349 color: #fff !important;
350 background-color: #F44336 !important;
353 &.ui-toast-message-info {
354 color: #fff !important;
355 background-color: #03A9F4 !important;
358 &.ui-toast-message-info {
359 color: #fff !important;
360 background-color: #03A9F4 !important;
363 .notification-block {
390 font-family: $main-fonts !important;