coer-elements 2.0.3 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/components/lib/coer-accordion/coer-accordion.component.d.ts +4 -4
  2. package/components/lib/coer-button/coer-button.component.d.ts +3 -3
  3. package/components/lib/coer-datebox/coer-datebox.component.d.ts +1 -1
  4. package/components/lib/coer-dropdown/coer-dropdown.component.d.ts +1 -1
  5. package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
  6. package/components/lib/coer-secretbox/coer-secretbox.component.d.ts +1 -1
  7. package/components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.d.ts +5 -2
  8. package/components/lib/coer-switch/coer-switch.component.d.ts +1 -1
  9. package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
  10. package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
  11. package/fesm2022/coer-elements-components.mjs +66 -51
  12. package/fesm2022/coer-elements-components.mjs.map +1 -1
  13. package/fesm2022/coer-elements-pages.mjs +25 -13
  14. package/fesm2022/coer-elements-pages.mjs.map +1 -1
  15. package/fesm2022/coer-elements-signals.mjs +11 -1
  16. package/fesm2022/coer-elements-signals.mjs.map +1 -1
  17. package/fesm2022/coer-elements-tools.mjs +82 -26
  18. package/fesm2022/coer-elements-tools.mjs.map +1 -1
  19. package/package.json +5 -5
  20. package/pages/lib/coer-system/coer-system.component.d.ts +4 -4
  21. package/signals/lib/colors.signal.d.ts +9 -0
  22. package/signals/public-api.d.ts +1 -0
  23. package/styles/angular-material.scss +3 -1
  24. package/styles/coer-elements.css +319 -110
  25. package/styles/colors.scss +233 -9
  26. package/styles/containers.scss +1 -1
  27. package/tools/lib/colors.class.d.ts +19 -9
  28. package/tools/lib/elements-html.class.d.ts +4 -0
package/styles/coer-elements.css CHANGED
@@ -4,11 +4,11 @@ mat-expansion-panel.coer-accordion {
4
4
  }
5
5
  mat-expansion-panel.coer-accordion mat-expansion-panel-header {
6
6
  height: 35px !important;
7
- background-color: whitesmoke !important;
7
+ background-color: var(--smoke) !important;
8
8
  padding-left: 12px !important;
9
9
  }
10
10
  mat-expansion-panel.coer-accordion mat-expansion-panel-header span {
11
- color: black !important;
11
+ color: var(--black) !important;
12
12
  font-size: 16px !important;
13
13
  }
14
14
  mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title {
@@ -18,19 +18,28 @@ mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title {
18
18
  }
19
19
  mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
20
20
  padding: 0px !important;
21
- color: #ffd106;
22
21
  }
23
22
 
24
23
  :root {
25
24
  --blue: #0d6efd;
26
25
  --gray: #6c757d;
27
26
  --green: #198754;
28
- --yellow: #ffc107;
27
+ --yellow:#ffc107;
29
28
  --red: #dc3545;
30
- --white: #f5f5f5;
29
+ --smoke: #f5f5f5;
31
30
  --black: #252525;
32
- --orange: #fd6031;
33
- --purple: #a615bc;
31
+ --orange:#fd6031;
32
+ --white: #ffffff;
33
+ --purple:#a615bc;
34
+ --primary-inner: var(--primary, var(--blue));
35
+ --secondary-inner: var(--secondary, var(--gray));
36
+ --success-inner: var(--success, var(--green));
37
+ --warning-inner: var(--warning, var(--yellow));
38
+ --danger-inner: var(--danger, var(--red));
39
+ --background-inner: var(--background, var(--smoke));
40
+ --sidenav-inner: var(--sidenav, var(--black));
41
+ --navigation-inner: var(--navigation, var(--orange));
42
+ --container-inner: var(--container, var(--white));
34
43
  }
35
44
 
36
45
  .text-blue {
@@ -38,7 +47,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
38
47
  }
39
48
 
40
49
  .text-blue-bold {
41
- color: var(--blue) !important;
42
50
  font-weight: bold !important;
43
51
  }
44
52
 
@@ -209,6 +217,204 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
209
217
  border-color: var(--orange) !important;
210
218
  }
211
219
 
220
+ .text-primary {
221
+ color: var(--primary-inner) !important;
222
+ }
223
+
224
+ .text-primary-bold {
225
+ color: var(--primary-inner) !important;
226
+ font-weight: bold !important;
227
+ }
228
+
229
+ .background-primary {
230
+ background-color: var(--primary-inner) !important;
231
+ }
232
+
233
+ .background-border-primary {
234
+ background-color: var(--primary-inner) !important;
235
+ border-color: var(--primary-inner) !important;
236
+ }
237
+
238
+ .border-primary {
239
+ border-color: var(--primary-inner) !important;
240
+ }
241
+
242
+ .text-secondary {
243
+ color: var(--secondary-inner) !important;
244
+ }
245
+
246
+ .text-secondary-bold {
247
+ color: var(--secondary-inner) !important;
248
+ font-weight: bold !important;
249
+ }
250
+
251
+ .background-secondary {
252
+ background-color: var(--secondary-inner) !important;
253
+ }
254
+
255
+ .background-border-secondary {
256
+ background-color: var(--secondary-inner) !important;
257
+ border-color: var(--secondary-inner) !important;
258
+ }
259
+
260
+ .border-secondary {
261
+ border-color: var(--secondary-inner) !important;
262
+ }
263
+
264
+ .text-success {
265
+ color: var(--success-inner) !important;
266
+ }
267
+
268
+ .text-success-bold {
269
+ color: var(--success-inner) !important;
270
+ font-weight: bold !important;
271
+ }
272
+
273
+ .background-success {
274
+ background-color: var(--success-inner) !important;
275
+ }
276
+
277
+ .background-border-success {
278
+ background-color: var(--success-inner) !important;
279
+ border-color: var(--success-inner) !important;
280
+ }
281
+
282
+ .border-success {
283
+ border-color: var(--success-inner) !important;
284
+ }
285
+
286
+ .text-warning {
287
+ color: var(--warning-inner) !important;
288
+ }
289
+
290
+ .text-warning-bold {
291
+ color: var(--warning-inner) !important;
292
+ font-weight: bold !important;
293
+ }
294
+
295
+ .background-warning {
296
+ background-color: var(--warning-inner) !important;
297
+ }
298
+
299
+ .background-border-warning {
300
+ background-color: var(--warning-inner) !important;
301
+ border-color: var(--warning-inner) !important;
302
+ }
303
+
304
+ .border-warning {
305
+ border-color: var(--warning-inner) !important;
306
+ }
307
+
308
+ .text-danger {
309
+ color: var(--danger-inner) !important;
310
+ }
311
+
312
+ .text-danger-bold {
313
+ color: var(--danger-inner) !important;
314
+ font-weight: bold !important;
315
+ }
316
+
317
+ .background-danger {
318
+ background-color: var(--danger-inner) !important;
319
+ }
320
+
321
+ .background-border-danger {
322
+ background-color: var(--danger-inner) !important;
323
+ border-color: var(--danger-inner) !important;
324
+ }
325
+
326
+ .border-danger {
327
+ border-color: var(--danger-inner) !important;
328
+ }
329
+
330
+ .text-background {
331
+ color: var(--background-inner) !important;
332
+ }
333
+
334
+ .text-background-bold {
335
+ color: var(--background-inner) !important;
336
+ font-weight: bold !important;
337
+ }
338
+
339
+ .background-background {
340
+ background-color: var(--background-inner) !important;
341
+ }
342
+
343
+ .background-border-background {
344
+ background-color: var(--background-inner) !important;
345
+ border-color: var(--background-inner) !important;
346
+ }
347
+
348
+ .border-background {
349
+ border-color: var(--background-inner) !important;
350
+ }
351
+
352
+ .text-sidenav {
353
+ color: var(--sidenav-inner) !important;
354
+ }
355
+
356
+ .text-blue-sidenav {
357
+ color: var(--sidenav-inner) !important;
358
+ font-weight: bold !important;
359
+ }
360
+
361
+ .background-sidenav {
362
+ background-color: var(--sidenav-inner) !important;
363
+ }
364
+
365
+ .background-border-sidenav {
366
+ background-color: var(--sidenav-inner) !important;
367
+ border-color: var(--sidenav-inner) !important;
368
+ }
369
+
370
+ .border-sidenav {
371
+ border-color: var(--sidenav-inner) !important;
372
+ }
373
+
374
+ .text-navigation {
375
+ color: var(--navigation-inner) !important;
376
+ }
377
+
378
+ .text-navigation-bold {
379
+ color: var(--navigation-inner) !important;
380
+ font-weight: bold !important;
381
+ }
382
+
383
+ .background-navigation {
384
+ background-color: var(--navigation-inner) !important;
385
+ }
386
+
387
+ .background-border-navigation {
388
+ background-color: var(--navigation-inner) !important;
389
+ border-color: var(--navigation-inner) !important;
390
+ }
391
+
392
+ .border-navigation {
393
+ border-color: var(--navigation-inner) !important;
394
+ }
395
+
396
+ .text-container {
397
+ color: var(--container-inner) !important;
398
+ }
399
+
400
+ .text-container-bold {
401
+ color: var(--container-inner) !important;
402
+ font-weight: bold !important;
403
+ }
404
+
405
+ .background-container {
406
+ background-color: var(--container-inner) !important;
407
+ }
408
+
409
+ .background-border-container {
410
+ background-color: var(--container-inner) !important;
411
+ border-color: var(--container-inner) !important;
412
+ }
413
+
414
+ .border-container {
415
+ border-color: var(--container-inner) !important;
416
+ }
417
+
212
418
  .text-transparent {
213
419
  color: transparent !important;
214
420
  }
@@ -217,6 +423,11 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
217
423
  background-color: transparent !important;
218
424
  }
219
425
 
426
+ .background-border-transparent {
427
+ background-color: transparent !important;
428
+ border-color: transparent !important;
429
+ }
430
+
220
431
  .border-transparent {
221
432
  border-color: transparent !important;
222
433
  }
@@ -249,65 +460,65 @@ div.coer-button .slot {
249
460
  overflow: visible !important;
250
461
  }
251
462
  div.coer-button button.primary-filled {
252
- background-color: var(--blue) !important;
253
- color: var(--white) !important;
463
+ background-color: var(--primary-inner) !important;
464
+ color: var(--smoke) !important;
254
465
  }
255
466
  div.coer-button button.secondary-filled {
256
- background-color: var(--gray) !important;
257
- color: var(--white) !important;
467
+ background-color: var(--secondary-inner) !important;
468
+ color: var(--smoke) !important;
258
469
  }
259
470
  div.coer-button button.success-filled {
260
- background-color: var(--green) !important;
261
- color: var(--white) !important;
471
+ background-color: var(--success-inner) !important;
472
+ color: var(--smoke) !important;
262
473
  }
263
474
  div.coer-button button.warning-filled {
264
- background-color: var(--yellow) !important;
475
+ background-color: var(--warning-inner) !important;
265
476
  color: var(--black) !important;
266
477
  }
267
478
  div.coer-button button.danger-filled {
268
- background-color: var(--red) !important;
269
- color: var(--white) !important;
479
+ background-color: var(--danger-inner) !important;
480
+ color: var(--smoke) !important;
270
481
  }
271
482
  div.coer-button button.navigation-filled {
272
483
  background-color: var(--orange) !important;
273
- color: var(--white) !important;
484
+ color: var(--smoke) !important;
274
485
  }
275
486
  div.coer-button button.dark-filled {
276
487
  background-color: var(--black) !important;
277
- color: var(--white) !important;
488
+ color: var(--smoke) !important;
278
489
  }
279
490
  div.coer-button button.primary-outline {
280
- background-color: white !important;
281
- border: 1px solid var(--blue) !important;
282
- color: var(--blue) !important;
491
+ background-color: var(--white) !important;
492
+ border: 1px solid var(--primary-inner) !important;
493
+ color: var(--primary-inner) !important;
283
494
  }
284
495
  div.coer-button button.secondary-outline {
285
- background-color: white !important;
286
- border: 1px solid var(--gray) !important;
287
- color: var(--gray) !important;
496
+ background-color: var(--white) !important;
497
+ border: 1px solid var(--secondary-inner) !important;
498
+ color: var(--secondary-inner) !important;
288
499
  }
289
500
  div.coer-button button.success-outline {
290
- background-color: white !important;
291
- border: 1px solid var(--green) !important;
292
- color: var(--green) !important;
501
+ background-color: var(--white) !important;
502
+ border: 1px solid var(--success-inner) !important;
503
+ color: var(--success-inner) !important;
293
504
  }
294
505
  div.coer-button button.warning-outline {
295
- background-color: white !important;
296
- border: 1px solid var(--yellow) !important;
297
- color: var(--yellow) !important;
506
+ background-color: var(--white) !important;
507
+ border: 1px solid var(--warning-inner) !important;
508
+ color: var(--warning-inner) !important;
298
509
  }
299
510
  div.coer-button button.danger-outline {
300
- background-color: white !important;
301
- border: 1px solid var(--red) !important;
302
- color: var(--red) !important;
511
+ background-color: var(--white) !important;
512
+ border: 1px solid var(--danger-inner) !important;
513
+ color: var(--danger-inner) !important;
303
514
  }
304
515
  div.coer-button button.navigation-outline {
305
- background-color: white !important;
306
- border: 1px solid var(--orange) !important;
307
- color: var(--orange) !important;
516
+ background-color: var(--white) !important;
517
+ border: 1px solid var(--navigation-inner) !important;
518
+ color: var(---navigation-inner) !important;
308
519
  }
309
520
  div.coer-button button.dark-outline {
310
- background-color: white !important;
521
+ background-color: var(--white) !important;
311
522
  border: 1px solid var(--black) !important;
312
523
  color: var(--black) !important;
313
524
  }
@@ -329,27 +540,27 @@ div.coer-button button.dark-outline:not(.readonly):hover, div.coer-button button
329
540
  }
330
541
  div.coer-button button.primary-filled:not(.readonly):focus,
331
542
  div.coer-button button.primary-outline:not(.readonly):focus {
332
- box-shadow: 0px 0px 20px var(--blue) !important;
543
+ box-shadow: 0px 0px 20px var(--primary-inner) !important;
333
544
  }
334
545
  div.coer-button button.secondary-filled:not(.readonly):focus,
335
546
  div.coer-button button.secondary-outline:not(.readonly):focus {
336
- box-shadow: 0px 0px 20px var(--gray) !important;
547
+ box-shadow: 0px 0px 20px var(--secondary-inner) !important;
337
548
  }
338
549
  div.coer-button button.success-filled:not(.readonly):focus,
339
550
  div.coer-button button.success-outline:not(.readonly):focus {
340
- box-shadow: 0px 0px 20px var(--green) !important;
551
+ box-shadow: 0px 0px 20px var(--success-inner) !important;
341
552
  }
342
553
  div.coer-button button.warning-filled:not(.readonly):focus,
343
554
  div.coer-button button.warning-outline:not(.readonly):focus {
344
- box-shadow: 0px 0px 20px var(--yellow) !important;
555
+ box-shadow: 0px 0px 20px var(--warning-inner) !important;
345
556
  }
346
557
  div.coer-button button.danger-filled:not(.readonly):focus,
347
558
  div.coer-button button.danger-outline:not(.readonly):focus {
348
- box-shadow: 0px 0px 20px var(--red) !important;
559
+ box-shadow: 0px 0px 20px var(--danger-inner) !important;
349
560
  }
350
561
  div.coer-button button.navigation-filled:not(.readonly):focus,
351
562
  div.coer-button button.navigation-outline:not(.readonly):focus {
352
- box-shadow: 0px 0px 20px var(--orange) !important;
563
+ box-shadow: 0px 0px 20px var(--navigation-inner) !important;
353
564
  }
354
565
  div.coer-button button.dark-filled:not(.readonly):focus,
355
566
  div.coer-button button.dark-outline:not(.readonly):focus {
@@ -379,7 +590,7 @@ div.coer-button button.readonly:hover,
379
590
  div.coer-button button.readonly:focus {
380
591
  background-color: rgb(223, 222, 222) !important;
381
592
  border-color: rgb(223, 222, 222) !important;
382
- color: white !important;
593
+ color: var(--white) !important;
383
594
  }
384
595
  div.coer-button coer-button[ishidden=true],
385
596
  div.coer-button coer-button[ng-reflect-invisible=true] {
@@ -413,7 +624,7 @@ div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.md
413
624
  padding: 10px !important;
414
625
  }
415
626
  div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background {
416
- background-color: var(--white) !important;
627
+ background-color: var(--smoke) !important;
417
628
  border-radius: 5px !important;
418
629
  }
419
630
  div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple {
@@ -433,8 +644,8 @@ div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.
433
644
  background-color: transparent !important;
434
645
  }
435
646
  div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background {
436
- background-color: var(--orange) !important;
437
- border-color: var(--orange) !important;
647
+ background-color: var(--primary-inner) !important;
648
+ border-color: var(--primary-inner) !important;
438
649
  }
439
650
 
440
651
  coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox,
@@ -487,7 +698,7 @@ div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field d
487
698
  top: 20px !important;
488
699
  }
489
700
  div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label {
490
- color: var(--orange);
701
+ color: var(--primary-inner);
491
702
  font-weight: bold;
492
703
  position: relative;
493
704
  left: -10px;
@@ -501,7 +712,7 @@ div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field d
501
712
  div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,
502
713
  div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::before,
503
714
  div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::after {
504
- border-bottom-color: var(--orange) !important;
715
+ border-bottom-color: var(--primary-inner) !important;
505
716
  }
506
717
  div.coer-date-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
507
718
  height: 0px !important;
@@ -560,7 +771,7 @@ div.coer-date-box div.button-container {
560
771
  background-color: rgb(229.517167382, 231.3519313305, 232.982832618) !important;
561
772
  }
562
773
  div.coer-date-box .mat-datepicker-toggle-active * {
563
- color: var(--orange) !important;
774
+ color: var(--primary-inner) !important;
564
775
  }
565
776
 
566
777
  coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field {
@@ -613,7 +824,7 @@ div.coer-grid table thead tr th {
613
824
  z-index: 100 !important;
614
825
  top: 0 !important;
615
826
  background-color: var(--gray) !important;
616
- color: var(--white) !important;
827
+ color: var(--smoke) !important;
617
828
  padding: 5px !important;
618
829
  vertical-align: middle !important;
619
830
  overflow: hidden;
@@ -701,7 +912,7 @@ div.coer-grid tr.loading {
701
912
  background-color: rgba(187, 187, 187, 0.5137254902) !important;
702
913
  }
703
914
  div.coer-grid div.loading i.spinner-border {
704
- color: var(--orange) !important;
915
+ color: var(--primary-inner) !important;
705
916
  width: 70px !important;
706
917
  height: 70px !important;
707
918
  font-size: 20px !important;
@@ -714,7 +925,7 @@ div.coer-grid td.check-box div.spinner-border-container {
714
925
  div.coer-grid td.check-box div.spinner-border-container i.spinner-border {
715
926
  width: 15px !important;
716
927
  height: 15px !important;
717
- color: var(--orange) !important;
928
+ color: var(--primary-inner) !important;
718
929
  }
719
930
  div.coer-grid table thead tr th.check-box > div,
720
931
  div.coer-grid table tbody tr td.check-box > div {
@@ -775,7 +986,7 @@ div.coer-list ul.coer-list {
775
986
  width: 100%;
776
987
  border: solid 1px #ccc;
777
988
  display: block;
778
- background: white;
989
+ background: var(--white);
779
990
  border-radius: 4px;
780
991
  overflow: auto;
781
992
  }
@@ -788,7 +999,7 @@ div.coer-list li.coer-list-box {
788
999
  align-items: center;
789
1000
  justify-content: space-between;
790
1001
  box-sizing: border-box;
791
- background: white;
1002
+ background: var(--white);
792
1003
  font-size: 14px;
793
1004
  }
794
1005
  div.coer-list li.coer-list-box div.coer-list-content {
@@ -831,7 +1042,7 @@ div.coer-list div.no-data {
831
1042
  width: 100%;
832
1043
  height: 100%;
833
1044
  font-size: 25px;
834
- color: gray;
1045
+ color: var(--gray);
835
1046
  z-index: 1;
836
1047
  }
837
1048
  div.coer-list div.loading {
@@ -917,7 +1128,7 @@ div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field
917
1128
  top: 20px !important;
918
1129
  }
919
1130
  div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label {
920
- color: var(--orange);
1131
+ color: var(--primary-inner);
921
1132
  font-weight: bold;
922
1133
  position: relative;
923
1134
  left: -10px;
@@ -934,7 +1145,7 @@ div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field
934
1145
  div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,
935
1146
  div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::before,
936
1147
  div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::after {
937
- border-bottom-color: var(--orange) !important;
1148
+ border-bottom-color: var(--primary-inner) !important;
938
1149
  }
939
1150
  div.coer-number-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
940
1151
  height: 0px !important;
@@ -1026,7 +1237,7 @@ header.coer-page-title nav {
1026
1237
  height: auto;
1027
1238
  min-height: 25px;
1028
1239
  font-size: small;
1029
- background-color: whitesmoke;
1240
+ background-color: rgb(239.05, 239.05, 239.05) !important;
1030
1241
  display: flex;
1031
1242
  align-items: center;
1032
1243
  justify-content: space-between;
@@ -1038,7 +1249,7 @@ header.coer-page-title ol, header.coer-page-title a {
1038
1249
  margin: 0px;
1039
1250
  padding-left: 5px;
1040
1251
  text-decoration: none;
1041
- color: var(--blue) !important;
1252
+ color: var(--primary-inner) !important;
1042
1253
  font-weight: normal !important;
1043
1254
  cursor: pointer !important;
1044
1255
  }
@@ -1048,9 +1259,6 @@ header.coer-page-title ol::selection, header.coer-page-title a::selection {
1048
1259
  header.coer-page-title li {
1049
1260
  border: none;
1050
1261
  }
1051
- header.coer-page-title li.list-group-item a {
1052
- color: var(--orange) !important;
1053
- }
1054
1262
 
1055
1263
  div.coer-dropdown {
1056
1264
  position: relative !important;
@@ -1064,7 +1272,7 @@ div.coer-dropdown .btn-group {
1064
1272
  width: 100% !important;
1065
1273
  }
1066
1274
  div.coer-dropdown ul.dropdown-menu {
1067
- background-color: white !important;
1275
+ background-color: var(--white) !important;
1068
1276
  border-top-left-radius: 0px !important;
1069
1277
  border-top-right-radius: 0px !important;
1070
1278
  max-height: 205px !important;
@@ -1074,13 +1282,13 @@ div.coer-dropdown ul.dropdown-menu {
1074
1282
  }
1075
1283
  div.coer-dropdown .dropdown-divider {
1076
1284
  margin: 0px !important;
1077
- background-color: white !important;
1285
+ background-color: var(--white) !important;
1078
1286
  }
1079
1287
  div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,
1080
1288
  div.coer-dropdown ul.dropdown-menu li > div:not(.no-options):hover,
1081
1289
  div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,
1082
1290
  div.coer-dropdown ul.dropdown-menu li > div:not(.dropdown-item-focus):hover {
1083
- color: black !important;
1291
+ color: var(--black) !important;
1084
1292
  background-color: rgb(240.618852459, 246.3831967213, 254.881147541) !important;
1085
1293
  }
1086
1294
  div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,
@@ -1123,7 +1331,7 @@ div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field
1123
1331
  top: 20px !important;
1124
1332
  }
1125
1333
  div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label {
1126
- color: var(--orange);
1334
+ color: var(--primary-inner);
1127
1335
  font-weight: bold;
1128
1336
  position: relative;
1129
1337
  left: -10px;
@@ -1137,7 +1345,7 @@ div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field
1137
1345
  div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,
1138
1346
  div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::before,
1139
1347
  div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::after {
1140
- border-bottom-color: var(--orange) !important;
1348
+ border-bottom-color: var(--primary-inner) !important;
1141
1349
  }
1142
1350
  div.coer-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
1143
1351
  height: 0px !important;
@@ -1195,7 +1403,7 @@ div.coer-select-box .btn-group {
1195
1403
  width: 100% !important;
1196
1404
  }
1197
1405
  div.coer-select-box ul.dropdown-menu {
1198
- background-color: white !important;
1406
+ background-color: var(--white) !important;
1199
1407
  border-top-left-radius: 0px !important;
1200
1408
  border-top-right-radius: 0px !important;
1201
1409
  max-height: 205px !important;
@@ -1204,11 +1412,11 @@ div.coer-select-box ul.dropdown-menu {
1204
1412
  }
1205
1413
  div.coer-select-box .dropdown-divider {
1206
1414
  margin: 0px !important;
1207
- background-color: white !important;
1415
+ background-color: var(--white) !important;
1208
1416
  }
1209
1417
  div.coer-select-box ul.dropdown-menu li:not(.dropdown-item-focus):hover,
1210
1418
  div.coer-select-box ul.dropdown-menu li > div:not(.dropdown-item-focus):hover {
1211
- color: black !important;
1419
+ color: var(--black) !important;
1212
1420
  background-color: rgb(240.618852459, 246.3831967213, 254.881147541) !important;
1213
1421
  }
1214
1422
  div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider,
@@ -1268,20 +1476,20 @@ mat-drawer-container .margin-left-40px {
1268
1476
  mat-drawer-container mat-drawer {
1269
1477
  width: auto;
1270
1478
  min-width: 200px;
1271
- background-color: var(--black) !important;
1479
+ background-color: var(--sidenav-inner) !important;
1272
1480
  }
1273
1481
  mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar {
1274
1482
  width: 1px !important;
1275
1483
  }
1276
1484
  mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb {
1277
- background-color: var(--gray) !important;
1485
+ background-color: var(--secondary-inner) !important;
1278
1486
  border-radius: 5px !important;
1279
1487
  }
1280
1488
  mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover {
1281
- background-color: var(--gray) !important;
1489
+ background-color: var(--secondary-inner) !important;
1282
1490
  }
1283
1491
  mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active {
1284
- background-color: var(--white) !important;
1492
+ background-color: var(--background-inner) !important;
1285
1493
  }
1286
1494
  mat-drawer-container mat-drawer i {
1287
1495
  font-size: 16px !important;
@@ -1291,9 +1499,10 @@ mat-drawer-container mat-drawer div.separator {
1291
1499
  }
1292
1500
  mat-drawer-container mat-drawer-content {
1293
1501
  margin-right: 0px !important;
1502
+ background-color: var(--background-inner) !important;
1294
1503
  }
1295
1504
  mat-drawer-container mat-drawer-content aside.side-nav {
1296
- background-color: var(--black) !important;
1505
+ background-color: var(--sidenav-inner) !important;
1297
1506
  width: 40px !important;
1298
1507
  position: fixed !important;
1299
1508
  left: 0px !important;
@@ -1309,13 +1518,13 @@ mat-drawer-container mat-drawer-content aside.side-nav span.icon-container {
1309
1518
  justify-content: center !important;
1310
1519
  font-size: 16px !important;
1311
1520
  border-bottom: 1px solid rgba(245, 245, 245, 0.041) !important;
1312
- color: var(--white);
1521
+ color: var(--background-inner);
1313
1522
  }
1314
1523
  mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover {
1315
1524
  background-color: rgb(47.2, 47.2, 47.2) !important;
1316
1525
  }
1317
1526
  mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link {
1318
- color: var(--orange) !important;
1527
+ color: var(--navigation-inner) !important;
1319
1528
  }
1320
1529
  mat-drawer-container div.backdrop {
1321
1530
  position: absolute !important;
@@ -1339,7 +1548,7 @@ mat-nav-list.coer-menu-option mat-list-item {
1339
1548
  padding: 0px 35px 0px 10px !important;
1340
1549
  display: inline-flex !important;
1341
1550
  height: 48px !important;
1342
- color: var(--white);
1551
+ color: var(--background-inner);
1343
1552
  }
1344
1553
  mat-nav-list.coer-menu-option mat-list-item span.icon-container {
1345
1554
  display: inline-flex !important;
@@ -1348,7 +1557,7 @@ mat-nav-list.coer-menu-option mat-list-item span.icon-container {
1348
1557
  height: 48px !important;
1349
1558
  min-width: 20px !important;
1350
1559
  max-width: 20px !important;
1351
- color: var(--white);
1560
+ color: var(--background-inner);
1352
1561
  }
1353
1562
  mat-nav-list.coer-menu-option mat-list-item span.icon-container i {
1354
1563
  min-height: 16px !important;
@@ -1358,11 +1567,11 @@ mat-nav-list.coer-menu-option mat-list-item span.label-container {
1358
1567
  display: inline-flex !important;
1359
1568
  height: auto !important;
1360
1569
  margin-left: 10px !important;
1361
- color: var(--white);
1570
+ color: var(--background-inner);
1362
1571
  }
1363
1572
  mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,
1364
1573
  mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link {
1365
- color: var(--orange) !important;
1574
+ color: var(--navigation-inner) !important;
1366
1575
  }
1367
1576
  mat-nav-list.coer-menu-option mat-list-item:hover {
1368
1577
  background-color: rgb(47.2, 47.2, 47.2) !important;
@@ -1374,7 +1583,7 @@ mat-accordion.coer-tree-accordion div, mat-accordion.coer-tree-accordion span {
1374
1583
  font-weight: bold;
1375
1584
  }
1376
1585
  mat-accordion.coer-tree-accordion mat-expansion-panel {
1377
- background-color: var(--black) !important;
1586
+ background-color: var(--sidenav-inner) !important;
1378
1587
  box-shadow: none !important;
1379
1588
  border-radius: 0px !important;
1380
1589
  }
@@ -1396,7 +1605,7 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
1396
1605
  margin-left: 15px !important;
1397
1606
  }
1398
1607
  mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator::after {
1399
- color: var(--white) !important;
1608
+ color: var(--background-inner) !important;
1400
1609
  }
1401
1610
  mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description {
1402
1611
  margin-right: 0px !important;
@@ -1408,19 +1617,19 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
1408
1617
  display: flex !important;
1409
1618
  align-items: center !important;
1410
1619
  justify-content: center !important;
1411
- color: var(--white);
1620
+ color: var(--background-inner);
1412
1621
  }
1413
1622
  mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.label-container {
1414
1623
  height: 48px !important;
1415
1624
  margin-left: 10px !important;
1416
1625
  display: flex !important;
1417
1626
  align-items: center !important;
1418
- color: var(--white);
1627
+ color: var(--background-inner);
1419
1628
  }
1420
- mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-orange span.mat-expansion-indicator::after {
1421
- color: var(--orange) !important;
1629
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-navigation span.mat-expansion-indicator::after {
1630
+ color: var(--navigation-inner) !important;
1422
1631
  }
1423
- mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-orange):hover {
1632
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover {
1424
1633
  background-color: rgb(47.2, 47.2, 47.2) !important;
1425
1634
  }
1426
1635
 
@@ -1431,7 +1640,7 @@ div.coer-switch {
1431
1640
  position: relative !important;
1432
1641
  }
1433
1642
  div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track::after {
1434
- background-color: var(--orange) !important;
1643
+ background-color: var(--primary-inner) !important;
1435
1644
  filter: opacity(0.6) !important;
1436
1645
  }
1437
1646
  div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple {
@@ -1439,7 +1648,7 @@ div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field butt
1439
1648
  height: 30px !important;
1440
1649
  }
1441
1650
  div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons {
1442
- background-color: var(--orange) !important;
1651
+ background-color: var(--primary-inner) !important;
1443
1652
  border-radius: 20px !important;
1444
1653
  }
1445
1654
  div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label,
@@ -1464,15 +1673,15 @@ coer-grid div.coer-switch {
1464
1673
 
1465
1674
  div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header {
1466
1675
  background-color: rgba(245, 245, 245, 0.384) !important;
1467
- border-bottom: 1px solid whitesmoke !important;
1676
+ border-bottom: 1px solid var(--smoke) !important;
1468
1677
  }
1469
1678
  div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab {
1470
1679
  padding: 0px !important;
1471
1680
  height: 35px !important;
1472
1681
  }
1473
1682
  div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active * {
1474
- color: var(--orange) !important;
1475
- border-color: var(--orange) !important;
1683
+ color: var(--primary-inner) !important;
1684
+ border-color: var(--primary-inner) !important;
1476
1685
  }
1477
1686
  div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab {
1478
1687
  padding: 10px 20px !important;
@@ -1505,7 +1714,7 @@ div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field d
1505
1714
  top: 20px !important;
1506
1715
  }
1507
1716
  div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label {
1508
- color: var(--orange);
1717
+ color: var(--primary-inner);
1509
1718
  font-weight: bold;
1510
1719
  position: relative;
1511
1720
  left: -10px;
@@ -1520,7 +1729,7 @@ div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field d
1520
1729
  div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,
1521
1730
  div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::before,
1522
1731
  div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::after {
1523
- border-bottom-color: var(--orange) !important;
1732
+ border-bottom-color: var(--primary-inner) !important;
1524
1733
  }
1525
1734
  div.coer-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
1526
1735
  height: 0px !important;
@@ -1598,7 +1807,7 @@ div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field d
1598
1807
  top: 20px !important;
1599
1808
  }
1600
1809
  div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label {
1601
- color: var(--orange);
1810
+ color: var(--primary-inner);
1602
1811
  font-weight: bold;
1603
1812
  position: relative;
1604
1813
  left: -10px;
@@ -1612,7 +1821,7 @@ div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field d
1612
1821
  div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,
1613
1822
  div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::before,
1614
1823
  div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active::after {
1615
- border-bottom-color: var(--orange) !important;
1824
+ border-bottom-color: var(--primary-inner) !important;
1616
1825
  }
1617
1826
  div.coer-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
1618
1827
  height: 0px !important;
@@ -1713,7 +1922,7 @@ aside.toast-container div.toast,
1713
1922
  aside.toast-container div.toast-header {
1714
1923
  border-top-left-radius: 10px;
1715
1924
  border-top-right-radius: 10px;
1716
- color: var(--white);
1925
+ color: var(--smoke);
1717
1926
  }
1718
1927
  aside.toast-container div.toast,
1719
1928
  aside.toast-container div.toast-body {
@@ -1722,7 +1931,7 @@ aside.toast-container div.toast-body {
1722
1931
  width: auto !important;
1723
1932
  min-width: 350px !important;
1724
1933
  max-width: 470px !important;
1725
- color: var(--white);
1934
+ color: var(--smoke);
1726
1935
  }
1727
1936
  aside.toast-container div.toast-body {
1728
1937
  min-height: 36px;
@@ -1742,19 +1951,19 @@ aside.toast-container button {
1742
1951
  }
1743
1952
  aside.toast-container div#alert-success div.toast-header,
1744
1953
  aside.toast-container div#alert-success div.toast-body {
1745
- background-color: var(--green);
1954
+ background-color: var(--success-inner);
1746
1955
  }
1747
1956
  aside.toast-container div#alert-info div.toast-header,
1748
1957
  aside.toast-container div#alert-info div.toast-body {
1749
- background-color: var(--blue);
1958
+ background-color: var(--primary-inner);
1750
1959
  }
1751
1960
  aside.toast-container div#alert-error div.toast-header,
1752
1961
  aside.toast-container div#alert-error div.toast-body {
1753
- background-color: var(--red);
1962
+ background-color: var(--danger-inner);
1754
1963
  }
1755
1964
  aside.toast-container div#alert-warning div.toast-header,
1756
1965
  aside.toast-container div#alert-warning div.toast-body {
1757
- background-color: var(--yellow);
1966
+ background-color: var(--warning-inner);
1758
1967
  border-color: var(--black);
1759
1968
  color: var(--black);
1760
1969
  }
@@ -1808,7 +2017,7 @@ aside.toast-container > * {
1808
2017
  padding: 10px;
1809
2018
  box-shadow: 0px 0px 10px -10px black;
1810
2019
  border-radius: 8px;
1811
- background-color: white;
2020
+ background-color: var(--container-inner);
1812
2021
  animation-name: fadeIn;
1813
2022
  animation-duration: 1.5s;
1814
2023
  animation-iteration-count: 1;
@@ -1820,7 +2029,7 @@ aside.toast-container > * {
1820
2029
  padding: 10px;
1821
2030
  box-shadow: 0px 0px 10px -10px black;
1822
2031
  border-radius: 8px;
1823
- background-color: white;
2032
+ background-color: var(--container-inner);
1824
2033
  animation-name: fadeIn;
1825
2034
  animation-duration: 1.5s;
1826
2035
  animation-iteration-count: 1;
@@ -1833,7 +2042,7 @@ aside.toast-container > * {
1833
2042
  padding: 10px;
1834
2043
  box-shadow: 0px 0px 10px -10px black;
1835
2044
  border-radius: 8px;
1836
- background-color: white;
2045
+ background-color: var(--container-inner);
1837
2046
  animation-name: fadeIn;
1838
2047
  animation-duration: 1.5s;
1839
2048
  animation-iteration-count: 1;
@@ -1849,7 +2058,7 @@ aside.toast-container > * {
1849
2058
  padding: 10px;
1850
2059
  box-shadow: 0px 0px 10px -10px black;
1851
2060
  border-radius: 8px;
1852
- background-color: white;
2061
+ background-color: var(--container-inner);
1853
2062
  animation-name: fadeIn;
1854
2063
  animation-duration: 1.5s;
1855
2064
  animation-iteration-count: 1;
@@ -1862,7 +2071,7 @@ aside.toast-container > * {
1862
2071
  padding: 10px;
1863
2072
  box-shadow: 0px 0px 10px -10px black;
1864
2073
  border-radius: 8px;
1865
- background-color: white;
2074
+ background-color: var(--container-inner);
1866
2075
  animation-name: fadeIn;
1867
2076
  animation-duration: 1.5s;
1868
2077
  animation-iteration-count: 1;