diff options
Diffstat (limited to 'client/src/sass/primeng-custom.scss')
-rw-r--r-- | client/src/sass/primeng-custom.scss | 178 |
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 |
14 | p-table { | 14 | p-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 | |||
314 | p-inputswitch { | ||
315 | .ui-inputswitch-checked .ui-inputswitch-slider { | ||
316 | background-color: var(--mainColor) !important; | ||
317 | } | ||
318 | } | ||
319 | |||
320 | p-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 | } | ||