aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/primeng-custom.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/primeng-custom.scss')
-rw-r--r--client/src/sass/primeng-custom.scss178
1 files changed, 168 insertions, 10 deletions
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 5a03ac9c5..6e502b028 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -2,7 +2,7 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4@import '~primeng/resources/primeng.css'; 4@import '~primeng/resources/primeng.css';
5@import '~primeng/resources/themes/bootstrap/theme.css'; 5@import '~primeng/resources/themes/nova-light/theme.css';
6 6
7@mixin glyphicon-light { 7@mixin glyphicon-light {
8 font-family: 'Glyphicons Halflings'; 8 font-family: 'Glyphicons Halflings';
@@ -12,10 +12,29 @@
12 12
13// data table customizations 13// data table customizations
14p-table { 14p-table {
15 font-size: 15px !important; 15 .ui-table-caption {
16 border: none !important;
17 background-color: var(--mainBackgroundColor) !important;
18
19 .caption {
20 height: 40px;
21 display: flex;
22 align-items: center;
23 }
24 }
25
26 th {
27 background-color: var(--mainBackgroundColor) !important;
28 outline: 0;
29 }
30
31 td, th {
32 font-family: $main-fonts;
33 font-size: 15px !important;
34 color: var(--mainForegroundColor) !important;
35 }
16 36
17 td { 37 td {
18 // border: 1px solid #E5E5E5 !important;
19 padding-left: 15px !important; 38 padding-left: 15px !important;
20 39
21 &:not(.action-cell) { 40 &:not(.action-cell) {
@@ -26,8 +45,17 @@ p-table {
26 } 45 }
27 46
28 tr { 47 tr {
48 outline: 0;
29 background-color: var(--mainBackgroundColor) !important; 49 background-color: var(--mainBackgroundColor) !important;
30 height: 46px; 50 height: 46px;
51
52 &.ui-state-highlight {
53 background-color: var(--submenuColor) !important;
54
55 td, td > a {
56 color: var(--mainForegroundColor) !important;
57 }
58 }
31 } 59 }
32 60
33 .ui-table-tbody { 61 .ui-table-tbody {
@@ -42,6 +70,10 @@ p-table {
42 } 70 }
43 } 71 }
44 72
73 td {
74 border: none !important;
75 }
76
45 &:first-child td { 77 &:first-child td {
46 border-top: none !important; 78 border-top: none !important;
47 } 79 }
@@ -79,21 +111,25 @@ p-table {
79 } 111 }
80 112
81 &.ui-state-highlight { 113 &.ui-state-highlight {
82 background-color:var(--submenuColor) !important; 114 background-color: var(--submenuColor) !important;
83 115
84 .pi { 116 .pi {
85 @extend .glyphicon; 117 @extend .glyphicon;
86 118
87 color: #000; 119 color: #000 !important;
88 font-size: 11px; 120 font-size: 11px !important;
89 top: 0; 121 top: 0 !important;
90 122
91 &.pi-sort-up { 123 &.pi-sort-up {
92 @extend .glyphicon-triangle-top; 124 @extend .glyphicon-triangle-top;
125
126 color: var(--mainForegroundColor) !important;
93 } 127 }
94 128
95 &.pi-sort-down { 129 &.pi-sort-down {
96 @extend .glyphicon-triangle-bottom; 130 @extend .glyphicon-triangle-bottom;
131
132 color: var(--mainForegroundColor) !important;
97 } 133 }
98 } 134 }
99 } 135 }
@@ -161,13 +197,14 @@ p-table {
161 height: auto !important; 197 height: auto !important;
162 198
163 a { 199 a {
164 color: #000 !important; 200 color: var(--mainForegroundColor) !important;
165 font-weight: $font-semibold !important; 201 font-weight: $font-semibold !important;
166 margin: 0 10px !important; 202 margin: 0 5px !important;
167 outline: 0 !important; 203 outline: 0 !important;
168 border-radius: 3px !important; 204 border-radius: 3px !important;
169 padding: 5px 2px !important; 205 padding: 5px 2px !important;
170 height: auto !important; 206 height: auto !important;
207 line-height: initial !important;
171 208
172 &.ui-state-active { 209 &.ui-state-active {
173 &, &:hover, &:active, &:focus { 210 &, &:hover, &:active, &:focus {
@@ -196,11 +233,25 @@ p-calendar .ui-datepicker {
196 .ui-datepicker-next { 233 .ui-datepicker-next {
197 @extend .glyphicon-chevron-right; 234 @extend .glyphicon-chevron-right;
198 @include glyphicon-light; 235 @include glyphicon-light;
236
237 color: #000 !important;
238 text-align: right;
239
240 .pi.pi-chevron-right {
241 display: none !important;
242 }
199 } 243 }
200 244
201 .ui-datepicker-prev { 245 .ui-datepicker-prev {
202 @extend .glyphicon-chevron-left; 246 @extend .glyphicon-chevron-left;
203 @include glyphicon-light; 247 @include glyphicon-light;
248
249 color: #000 !important;
250 text-align: left;
251
252 .pi.pi-chevron-left {
253 display: none !important;
254 }
204 } 255 }
205 } 256 }
206 257
@@ -209,11 +260,118 @@ p-calendar .ui-datepicker {
209 .pi.pi-chevron-up { 260 .pi.pi-chevron-up {
210 @extend .glyphicon-chevron-up; 261 @extend .glyphicon-chevron-up;
211 @include glyphicon-light; 262 @include glyphicon-light;
263
264 color: #000 !important;
212 } 265 }
213 266
214 .pi.pi-chevron-down { 267 .pi.pi-chevron-down {
215 @extend .glyphicon-chevron-down; 268 @extend .glyphicon-chevron-down;
216 @include glyphicon-light; 269 @include glyphicon-light;
270
271 color: #000 !important;
272 }
273 }
274}
275
276.ui-chkbox {
277
278 &, .ui-chkbox-box {
279 width: 18px !important;
280 height: 18px !important;
281 }
282
283 .ui-chkbox-box {
284 &.ui-state-active {
285 border-color: var(--mainColor) !important;
286 background-color: var(--mainColor) !important;
287 }
288
289 .ui-chkbox-icon {
290 position: relative;
291 overflow: visible !important;
292
293 &:after {
294 content: '';
295 position: absolute;
296 top: 1px;
297 left: 6px;
298 width: 5px;
299 height: 12px;
300 opacity: 0;
301 transform: rotate(45deg) scale(0);
302 border-right: 2px solid var(--mainBackgroundColor);
303 border-bottom: 2px solid var(--mainBackgroundColor);
304 }
305
306 &.pi-check:after {
307 opacity: 1;
308 transform: rotate(45deg) scale(1);
309 }
217 } 310 }
218 } 311 }
219} \ No newline at end of file 312}
313
314p-inputswitch {
315 .ui-inputswitch-checked .ui-inputswitch-slider {
316 background-color: var(--mainColor) !important;
317 }
318}
319
320p-toast {
321 .ui-toast {
322 // Modal is 10005
323 z-index: 10010 !important;
324 }
325
326 .ui-toast-message {
327 font-family: $main-fonts;
328
329 &.ui-toast-message-success {
330 color: #fff !important;
331 background-color: #8BC34A !important;
332 }
333
334 &.ui-toast-message-error {
335 color: #fff !important;
336 background-color: #F44336 !important;
337 }
338
339 &.ui-toast-message-info {
340 color: #fff !important;
341 background-color: #03A9F4 !important;
342 }
343
344 &.ui-toast-message-info {
345 color: #fff !important;
346 background-color: #03A9F4 !important;
347 }
348
349 .notification-block {
350 display: flex;
351 align-items: center;
352 padding: 5px;
353
354 .message {
355 flex-grow: 1;
356
357 h3 {
358 font-size: 21px;
359 }
360
361 p {
362 font-size: 15px;
363 margin-bottom: 0;
364 }
365 }
366
367 .glyphicon {
368 font-size: 32px;
369 margin-right: 5px;
370 }
371 }
372 }
373}
374
375.ui-widget {
376 font-family: $main-fonts !important;
377}