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: #fff !important;
27 background-color: #fff !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;
69 display: none !important;
74 border: none !important;
78 border-top: none !important;
82 border-bottom: none !important;
94 border: none !important;
95 border-bottom: 1px solid !important;
96 border-color: var(--submenuColor) !important;
97 text-align: left !important;
98 padding: 5px 0 5px 15px !important;
99 font-weight: $font-semibold !important;
100 color: var(--mainForegroundColor) !important;
102 &.ui-sortable-column:hover {
103 background-color: var(--submenuColor) !important;
104 border: 1px solid !important;
105 border-color: var(--submenuColor) !important;
106 border-width: 0 1px !important;
109 border-width: 0 1px 0 0 !important;
113 &.ui-state-highlight {
114 background-color: var(--submenuColor) !important;
119 color: #000 !important;
120 font-size: 11px !important;
124 @extend .glyphicon-triangle-top;
128 @extend .glyphicon-triangle-bottom;
135 width: 250px !important;
136 padding: 0 !important;
139 my-edit-button + my-delete-button {
145 .ui-paginator-bottom {
146 background-color: var(--mainBackgroundColor) !important;
149 border-top: 1px solid !important;
150 border-color: var(--submenuColor) !important;
153 justify-content: center;
160 @include glyphicon-light;
167 &.ui-state-disabled:hover {
168 background-color: #fff !important;
171 &.ui-paginator-first {
172 @extend .glyphicon-step-backward;
175 &.ui-paginator-prev {
176 @extend .glyphicon-chevron-left;
181 &.ui-paginator-next {
182 @extend .glyphicon-chevron-right;
187 &.ui-paginator-last {
188 @extend .glyphicon-step-forward;
192 .ui-paginator-pages {
193 height: auto !important;
196 color: #000 !important;
197 font-weight: $font-semibold !important;
198 margin: 0 5px !important;
199 outline: 0 !important;
200 border-radius: 3px !important;
201 padding: 5px 2px !important;
202 height: auto !important;
203 line-height: initial !important;
206 &, &:hover, &:active, &:focus {
207 color: #fff !important;
208 background-color: var(--mainColor) !important;
217 // PrimeNG calendar tweaks
218 p-calendar .ui-datepicker {
220 @include disable-default-a-behaviour;
223 .ui-datepicker-header {
225 .ui-datepicker-year {
229 .ui-datepicker-next {
230 @extend .glyphicon-chevron-right;
231 @include glyphicon-light;
235 .pi.pi-chevron-right {
236 display: none !important;
240 .ui-datepicker-prev {
241 @extend .glyphicon-chevron-left;
242 @include glyphicon-light;
246 .pi.pi-chevron-left {
247 display: none !important;
255 @extend .glyphicon-chevron-up;
256 @include glyphicon-light;
259 .pi.pi-chevron-down {
260 @extend .glyphicon-chevron-down;
261 @include glyphicon-light;
269 width: 18px !important;
270 height: 18px !important;
275 border-color: var(--mainColor) !important;
276 background-color: var(--mainColor) !important;
281 overflow: visible !important;
291 transform: rotate(45deg) scale(0);
292 border-right: 2px solid var(--mainBackgroundColor);
293 border-bottom: 2px solid var(--mainBackgroundColor);
298 transform: rotate(45deg) scale(1);
305 .ui-inputswitch-checked .ui-inputswitch-slider {
306 background-color: var(--mainColor) !important;
313 z-index: 10010 !important;
317 font-family: $main-fonts;
319 &.ui-toast-message-success {
320 color: #fff !important;
321 background-color: #8BC34A !important;
324 &.ui-toast-message-error {
325 color: #fff !important;
326 background-color: #F44336 !important;
329 &.ui-toast-message-info {
330 color: #fff !important;
331 background-color: #03A9F4 !important;
334 &.ui-toast-message-info {
335 color: #fff !important;
336 background-color: #03A9F4 !important;
339 .notification-block {
366 font-family: $main-fonts !important;