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;
66 .action-cell .dropdown-root {
67 display: block !important;
72 border: none !important;
76 border-top: none !important;
80 border-bottom: none !important;
92 border: none !important;
93 border-bottom: 1px solid !important;
94 border-color: var(--submenuColor) !important;
95 text-align: left !important;
96 padding: 5px 0 5px 15px !important;
97 font-weight: $font-semibold !important;
98 color: var(--mainForegroundColor) !important;
100 &.ui-sortable-column:hover {
101 background-color: var(--submenuColor) !important;
102 border: 1px solid !important;
103 border-color: var(--submenuColor) !important;
104 border-width: 0 1px !important;
107 border-width: 0 1px 0 0 !important;
111 &.ui-state-highlight {
112 background-color: var(--submenuColor) !important;
117 color: #000 !important;
118 font-size: 11px !important;
122 @extend .glyphicon-triangle-top;
124 color: var(--mainForegroundColor) !important;
128 @extend .glyphicon-triangle-bottom;
130 color: var(--mainForegroundColor) !important;
137 width: 250px !important;
138 padding: 0 !important;
142 display: none !important;
145 display: block !important;
149 my-edit-button + my-delete-button {
155 .ui-paginator-bottom {
156 background-color: var(--mainBackgroundColor) !important;
159 border-top: 1px solid !important;
160 border-color: var(--submenuColor) !important;
163 justify-content: center;
170 @include glyphicon-light;
177 &.ui-state-disabled:hover {
178 background-color: #fff !important;
181 &.ui-paginator-first {
182 @extend .glyphicon-step-backward;
185 &.ui-paginator-prev {
186 @extend .glyphicon-chevron-left;
191 &.ui-paginator-next {
192 @extend .glyphicon-chevron-right;
197 &.ui-paginator-last {
198 @extend .glyphicon-step-forward;
202 .ui-paginator-pages {
203 height: auto !important;
206 color: var(--mainForegroundColor) !important;
207 font-weight: $font-semibold !important;
208 margin: 0 5px !important;
209 outline: 0 !important;
210 border-radius: 3px !important;
211 padding: 5px 2px !important;
212 height: auto !important;
213 line-height: initial !important;
216 &, &:hover, &:active, &:focus {
217 color: #fff !important;
218 background-color: var(--mainColor) !important;
227 // PrimeNG calendar tweaks
228 p-calendar .ui-datepicker {
230 @include disable-default-a-behaviour;
233 .ui-datepicker-header {
235 .ui-datepicker-year {
239 .ui-datepicker-next {
240 @extend .glyphicon-chevron-right;
241 @include glyphicon-light;
243 color: #000 !important;
246 .pi.pi-chevron-right {
247 display: none !important;
251 .ui-datepicker-prev {
252 @extend .glyphicon-chevron-left;
253 @include glyphicon-light;
255 color: #000 !important;
258 .pi.pi-chevron-left {
259 display: none !important;
267 @extend .glyphicon-chevron-up;
268 @include glyphicon-light;
270 color: #000 !important;
273 .pi.pi-chevron-down {
274 @extend .glyphicon-chevron-down;
275 @include glyphicon-light;
277 color: #000 !important;
285 width: 18px !important;
286 height: 18px !important;
291 border-color: var(--mainColor) !important;
292 background-color: var(--mainColor) !important;
297 overflow: visible !important;
307 transform: rotate(45deg) scale(0);
308 border-right: 2px solid var(--mainBackgroundColor);
309 border-bottom: 2px solid var(--mainBackgroundColor);
314 transform: rotate(45deg) scale(1);
321 .ui-inputswitch-checked .ui-inputswitch-slider {
322 background-color: var(--mainColor) !important;
329 z-index: 10010 !important;
333 font-family: $main-fonts;
335 &.ui-toast-message-success {
336 color: #fff !important;
337 background-color: #8BC34A !important;
340 &.ui-toast-message-error {
341 color: #fff !important;
342 background-color: #F44336 !important;
345 &.ui-toast-message-info {
346 color: #fff !important;
347 background-color: #03A9F4 !important;
350 &.ui-toast-message-info {
351 color: #fff !important;
352 background-color: #03A9F4 !important;
355 .notification-block {
382 font-family: $main-fonts !important;