@unifiedsoftware/styles 2.0.0-beta.8 → 2.0.1-beta.1

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.
package/css/fci.css CHANGED
@@ -26,51 +26,55 @@
26
26
  }
27
27
  .us-theme-fci .us-accordion--xs {
28
28
  --us-accordion-splitted-gap: 0.25rem;
29
- --us-accordion-header-min-height: 36px;
30
- --us-accordion-header-padding-y: 0.685rem;
31
- --us-accordion-header-padding-x: 1rem;
29
+ --us-accordion-header-min-height: 2.75rem;
30
+ --us-accordion-header-padding-y: 0.375rem;
31
+ --us-accordion-header-padding-x: 0.75rem;
32
32
  --us-accordion-header-padding-level: 1.25rem;
33
- --us-accordion-header-font-size: 12px;
34
- --us-accordion-header-gap: 1rem;
33
+ --us-accordion-header-gap: 0.5rem;
35
34
  --us-accordion-header-title-font-size: 12px;
36
- --us-accordion-header-title-line-height: 18px;
37
- --us-accordion-header-subtitle-font-size: 11px;
38
35
  --us-accordion-header-title-line-height: 14px;
39
- --us-accordion-body-padding-y: 1rem;
40
- --us-accordion-body-padding-x: 1rem;
36
+ --us-accordion-header-subtitle-font-size: 10px;
37
+ --us-accordion-header-title-line-height: 14px;
38
+ --us-accordion-body-padding-y: 0.75rem;
39
+ --us-accordion-body-padding-x: 0.75rem;
41
40
  --us-accordion-body-font-size: 0.75rem;
42
41
  --us-accordion-body-line-height: 18px;
43
42
  }
43
+ .us-theme-fci .us-accordion--xs .us-accordion-header .us-icon:not(.us-button .us-icon) {
44
+ --us-icon-font-size-default: 16px;
45
+ }
44
46
  .us-theme-fci .us-accordion--sm {
45
47
  --us-accordion-splitted-gap: 0.5rem;
46
- --us-accordion-header-min-height: 48px;
47
- --us-accordion-header-padding-y: 0.625rem;
48
+ --us-accordion-header-min-height: 3rem;
49
+ --us-accordion-header-padding-y: 0.5rem;
48
50
  --us-accordion-header-padding-x: 1rem;
49
51
  --us-accordion-header-padding-level: 1.25rem;
50
- --us-accordion-header-gap: 1rem;
51
- --us-accordion-header-title-font-size: 0.875rem;
52
- --us-accordion-header-title-line-height: 20px;
53
- --us-accordion-header-subtitle-font-size: 0.75rem;
52
+ --us-accordion-header-gap: 0.75rem;
53
+ --us-accordion-header-title-font-size: 13px;
54
+ --us-accordion-header-title-line-height: 16px;
55
+ --us-accordion-header-subtitle-font-size: 11px;
54
56
  --us-accordion-header-subtitle-line-height: 16px;
55
- --us-accordion-body-padding-y: 1.25rem;
57
+ --us-accordion-body-padding-y: 1rem;
56
58
  --us-accordion-body-padding-x: 1rem;
57
59
  --us-accordion-body-font-size: 0.875rem;
58
60
  --us-accordion-body-line-height: 20px;
59
61
  }
62
+ .us-theme-fci .us-accordion--sm .us-accordion-header .us-icon:not(.us-button .us-icon) {
63
+ --us-icon-font-size-default: 20px;
64
+ }
60
65
  .us-theme-fci .us-accordion--md {
61
66
  --us-accordion-splitted-gap: 0.75rem;
62
- --us-accordion-header-min-height: 56px;
67
+ --us-accordion-header-min-height: 3.5rem;
63
68
  --us-accordion-header-padding-y: 0.625rem;
64
69
  --us-accordion-header-padding-x: 1rem;
65
70
  --us-accordion-header-padding-level: 1.25rem;
66
- --us-accordion-header-font-size: 0.75rem;
67
- --us-accordion-header-gap: 1rem;
71
+ --us-accordion-header-gap: 0.75rem;
68
72
  --us-accordion-header-content-gap: 0.5rem;
69
- --us-accordion-header-title-font-size: 0.875rem;
70
- --us-accordion-header-title-line-height: 24px;
71
- --us-accordion-header-subtitle-font-size: 0.8125rem;
72
- --us-accordion-header-subtitle-line-height: 18px;
73
- --us-accordion-body-padding-y: 1.5rem;
73
+ --us-accordion-header-title-font-size: 14px;
74
+ --us-accordion-header-title-line-height: 18px;
75
+ --us-accordion-header-subtitle-font-size: 12px;
76
+ --us-accordion-header-subtitle-line-height: 16px;
77
+ --us-accordion-body-padding-y: 1rem;
74
78
  --us-accordion-body-padding-x: 1rem;
75
79
  --us-accordion-body-font-size: 1rem;
76
80
  --us-accordion-body-line-height: 24px;
@@ -80,30 +84,31 @@
80
84
  }
81
85
  .us-theme-fci .us-accordion--lg {
82
86
  --us-accordion-splitted-gap: 1rem;
83
- --us-accordion-header-min-height: 64px;
84
- --us-accordion-header-padding-y: 0.625rem;
85
- --us-accordion-header-padding-x: 1rem;
87
+ --us-accordion-header-min-height: 4rem;
88
+ --us-accordion-header-padding-y: 0.75rem;
89
+ --us-accordion-header-padding-x: 1.25rem;
86
90
  --us-accordion-header-padding-level: 1.25rem;
87
- --us-accordion-header-font-size: 0.75rem;
88
91
  --us-accordion-header-gap: 1rem;
89
- --us-accordion-header-title-font-size: 1rem;
92
+ --us-accordion-header-title-font-size: 16px;
90
93
  --us-accordion-header-title-line-height: 24px;
91
94
  --us-accordion-header-subtitle-font-size: 0.8125rem;
92
95
  --us-accordion-header-subtitle-line-height: 18px;
93
- --us-accordion-body-padding-y: 1.5rem;
94
- --us-accordion-body-padding-x: 1rem;
96
+ --us-accordion-body-padding-y: 1.25rem;
97
+ --us-accordion-body-padding-x: 1.25rem;
95
98
  --us-accordion-body-font-size: 1rem;
96
99
  --us-accordion-body-line-height: 24px;
97
100
  }
101
+ .us-theme-fci .us-accordion--lg .us-accordion-header .us-icon:not(.us-button .us-icon) {
102
+ --us-icon-font-size-default: 28px;
103
+ }
98
104
  .us-theme-fci .us-accordion--xl {
99
105
  --us-accordion-splitted-gap: 1.25rem;
100
106
  --us-accordion-header-min-height: 3.5rem;
101
107
  --us-accordion-header-padding-y: 0.625rem;
102
108
  --us-accordion-header-padding-x: 1rem;
103
109
  --us-accordion-header-padding-level: 1.25rem;
104
- --us-accordion-header-font-size: 0.75rem;
105
110
  --us-accordion-header-gap: 1rem;
106
- --us-accordion-header-title-font-size: 1rem;
111
+ --us-accordion-header-title-font-size: 18px;
107
112
  --us-accordion-header-title-line-height: 24px;
108
113
  --us-accordion-header-subtitle-font-size: 0.8125rem;
109
114
  --us-accordion-header-subtitle-line-height: 18px;
@@ -112,14 +117,14 @@
112
117
  --us-accordion-body-font-size: 1rem;
113
118
  --us-accordion-body-line-height: 24px;
114
119
  }
120
+ .us-theme-fci .us-accordion--xl .us-accordion-header .us-icon:not(.us-button .us-icon) {
121
+ --us-icon-font-size-default: 36px;
122
+ }
115
123
  .us-theme-fci .us-accordion-item > .us-outline {
116
124
  --us-outline-border-width: 0px;
117
125
  --us-outline-z-index: 1;
118
126
  --us-outline-border-color: var(--us-accordion-border-color);
119
127
  }
120
- .us-theme-fci .us-accordion-item--selected {
121
- --us-accordion-header-title-font-weight: 700;
122
- }
123
128
  .us-theme-fci .us-accordion-body > .us-surface {
124
129
  --us-surface-color: var(--us-white-color);
125
130
  }
@@ -343,7 +348,7 @@
343
348
  --us-icon-color: var(--us-primary-color);
344
349
  }
345
350
  .us-theme-fci .us-icon--secondary {
346
- --us-icon-color: var(--us-secondary-color);
351
+ --us-icon-color: rgba(0, 0, 0, 0.54);
347
352
  }
348
353
  .us-theme-fci .us-icon--secondary {
349
354
  --us-icon-color: var(--us-secondary-action-color);
@@ -643,7 +648,7 @@ html {
643
648
  --us-button-divider-color: #fff;
644
649
  }
645
650
  .us-theme-fci .us-button--xs {
646
- --us-button-height: 22px;
651
+ --us-button-height: 24px;
647
652
  --us-button-padding-y: 0;
648
653
  --us-button-padding-x: 0.625rem;
649
654
  --us-button-font-size: 0.75rem;
@@ -654,7 +659,7 @@ html {
654
659
  --us-icon-font-size: 0.75rem;
655
660
  }
656
661
  .us-theme-fci .us-button--sm {
657
- --us-button-height: 26px;
662
+ --us-button-height: 28px;
658
663
  --us-button-padding-y: 0;
659
664
  --us-button-padding-x: 0.75rem;
660
665
  --us-button-font-size: 0.75rem;
@@ -665,7 +670,7 @@ html {
665
670
  --us-icon-font-size: 0.875rem;
666
671
  }
667
672
  .us-theme-fci .us-button--md {
668
- --us-button-height: 30px;
673
+ --us-button-height: 32px;
669
674
  --us-button-padding-y: 0;
670
675
  --us-button-padding-x: 0.875rem;
671
676
  --us-button-font-size: 0.875rem;
@@ -676,7 +681,7 @@ html {
676
681
  --us-icon-font-size: 1rem;
677
682
  }
678
683
  .us-theme-fci .us-button--lg {
679
- --us-button-height: 34px;
684
+ --us-button-height: 36px;
680
685
  --us-button-padding-y: 0;
681
686
  --us-button-padding-x: 1rem;
682
687
  --us-button-font-size: 0.875rem;
@@ -708,6 +713,12 @@ html {
708
713
  .us-theme-fci .us-button--2xl .us-icon {
709
714
  --us-icon-font-size: 1.5rem;
710
715
  }
716
+ .us-theme-fci .us-button > .us-glow {
717
+ --us-_focus-glow-spread: 1px;
718
+ --us-_focus-glow-blur: 6px;
719
+ --us-_focus-hover-glow-blur: 8px;
720
+ --us-_focus-active-glow-blur: 10px;
721
+ }
711
722
  .us-theme-fci .us-button--filled {
712
723
  --us-button-border-width: 1px;
713
724
  --us-button-border-color: transparent;
@@ -718,6 +729,7 @@ html {
718
729
  --us-overlay-opacity: 0;
719
730
  --us-_hover-overlay-opacity: 0.24;
720
731
  --us-_active-overlay-opacity: 0.32;
732
+ --us-_focus-overlay-opacity: 0.24;
721
733
  --us-_focus-hover-overlay-opacity: 0.24;
722
734
  --us-_focus-active-overlay-opacity: 0.32;
723
735
  }
@@ -733,6 +745,7 @@ html {
733
745
  --us-overlay-opacity: 0;
734
746
  --us-_hover-overlay-opacity: 0.08;
735
747
  --us-_active-overlay-opacity: 0.1;
748
+ --us-_focus-overlay-opacity: 0.08;
736
749
  --us-_focus-hover-overlay-opacity: 0.08;
737
750
  --us-_focus-active-overlay-opacity: 0.1;
738
751
  }
@@ -746,18 +759,21 @@ html {
746
759
  --us-overlay-opacity: 0.16;
747
760
  --us-_hover-overlay-opacity: 0.24;
748
761
  --us-_active-overlay-opacity: 0.32;
762
+ --us-_focus-overlay-opacity: 0.24;
749
763
  --us-_focus-hover-overlay-opacity: 0.24;
750
764
  --us-_focus-active-overlay-opacity: 0.32;
751
765
  }
752
766
  .us-theme-fci .us-button--flat > .us-outline {
753
767
  --us-outline-border-width: 1px;
754
- --us-outline-border-color: transparent;
768
+ --us-outline-border-color: currentColor;
769
+ --us-outline-opacity: 0;
755
770
  }
756
771
  .us-theme-fci .us-button--text > .us-overlay {
757
772
  --us-overlay-color: inherit;
758
773
  --us-overlay-opacity: 0;
759
774
  --us-_hover-overlay-opacity: 0.16;
760
775
  --us-_active-overlay-opacity: 0.24;
776
+ --us-_focus-overlay-opacity: 0.12;
761
777
  --us-_focus-hover-overlay-opacity: 0.12;
762
778
  --us-_focus-active-overlay-opacity: 0.24;
763
779
  }
@@ -770,6 +786,7 @@ html {
770
786
  --us-overlay-opacity: 0;
771
787
  --us-_hover-overlay-opacity: 0.16;
772
788
  --us-_active-overlay-opacity: 0.24;
789
+ --us-_focus-overlay-opacity: 0.12;
773
790
  --us-_focus-hover-overlay-opacity: 0.12;
774
791
  --us-_focus-active-overlay-opacity: 0.24;
775
792
  }
@@ -795,6 +812,11 @@ html {
795
812
  .us-theme-fci .us-button--2xl.us-button--icon-only .us-icon {
796
813
  --us-icon-font-size: 1.875rem;
797
814
  }
815
+ .us-theme-fci .us-button--primary > .us-glow {
816
+ --us-_focus-glow-color: var(--us-primary-rgb);
817
+ --us-_focus-glow-alpha: 1;
818
+ --us-_focus-glow-shadow-alpha: 0.75;
819
+ }
798
820
  .us-theme-fci .us-button--filled.us-button--primary {
799
821
  --us-button-background: var(--us-primary-color);
800
822
  }
@@ -810,6 +832,11 @@ html {
810
832
  .us-theme-fci .us-button--bordered.us-button--primary {
811
833
  --us-button-color: var(--us-primary-color);
812
834
  }
835
+ .us-theme-fci .us-button--secondary > .us-glow {
836
+ --us-_focus-glow-color: var(--us-secondary-rgb);
837
+ --us-_focus-glow-alpha: 1;
838
+ --us-_focus-glow-shadow-alpha: 0.75;
839
+ }
813
840
  .us-theme-fci .us-button--filled.us-button--secondary {
814
841
  --us-button-background: var(--us-secondary-color);
815
842
  }
@@ -846,6 +873,11 @@ html {
846
873
  .us-theme-fci .us-button--bordered.us-button--secondary > .us-outline {
847
874
  --us-outline-opacity: 0.16;
848
875
  }
876
+ .us-theme-fci .us-button--success > .us-glow {
877
+ --us-_focus-glow-color: var(--us-success-rgb);
878
+ --us-_focus-glow-alpha: 1;
879
+ --us-_focus-glow-shadow-alpha: 0.75;
880
+ }
849
881
  .us-theme-fci .us-button--filled.us-button--success {
850
882
  --us-button-background: var(--us-success-color);
851
883
  }
@@ -882,6 +914,11 @@ html {
882
914
  .us-theme-fci .us-button--text.us-button--success > .us-overlay {
883
915
  --us-overlay-color: var(--us-success-color);
884
916
  }
917
+ .us-theme-fci .us-button--info > .us-glow {
918
+ --us-_focus-glow-color: var(--us-info-rgb);
919
+ --us-_focus-glow-alpha: 1;
920
+ --us-_focus-glow-shadow-alpha: 0.75;
921
+ }
885
922
  .us-theme-fci .us-button--filled.us-button--info {
886
923
  --us-button-background: var(--us-info-color);
887
924
  }
@@ -909,6 +946,11 @@ html {
909
946
  .us-theme-fci .us-button--text.us-button--info > .us-overlay {
910
947
  --us-overlay-color: var(--us-info-color);
911
948
  }
949
+ .us-theme-fci .us-button--warning > .us-glow {
950
+ --us-_focus-glow-color: var(--us-warning-rgb);
951
+ --us-_focus-glow-alpha: 1;
952
+ --us-_focus-glow-shadow-alpha: 0.75;
953
+ }
912
954
  .us-theme-fci .us-button--filled.us-button--warning {
913
955
  --us-button-background: var(--us-warning-color);
914
956
  }
@@ -945,6 +987,11 @@ html {
945
987
  .us-theme-fci .us-button--text.us-button--warning > .us-overlay {
946
988
  --us-overlay-color: var(--us-warning-color);
947
989
  }
990
+ .us-theme-fci .us-button--danger > .us-glow {
991
+ --us-_focus-glow-color: var(--us-danger-rgb);
992
+ --us-_focus-glow-alpha: 1;
993
+ --us-_focus-glow-shadow-alpha: 0.75;
994
+ }
948
995
  .us-theme-fci .us-button--filled.us-button--danger {
949
996
  --us-button-background: var(--us-danger-color);
950
997
  }
@@ -960,6 +1007,21 @@ html {
960
1007
  .us-theme-fci .us-button--bordered.us-button--danger {
961
1008
  --us-button-color: var(--us-danger-color);
962
1009
  }
1010
+ .us-theme-fci .us-button--secondary > .us-glow {
1011
+ --us-_focus-glow-color: var(--us-secondary-rgb);
1012
+ --us-_focus-glow-alpha: 0.5;
1013
+ --us-_focus-glow-shadow-alpha: 0.25;
1014
+ }
1015
+ .us-theme-fci .us-button--filled.us-button--secondary > .us-glow {
1016
+ --us-_focus-glow-color: var(--us-secondary-rgb);
1017
+ --us-_focus-glow-alpha: 0.5;
1018
+ --us-_focus-glow-shadow-alpha: 0.25;
1019
+ }
1020
+ .us-theme-fci .us-button--outlined > .us-glow {
1021
+ --us-_focus-glow-color: var(--us-secondary-rgb);
1022
+ --us-_focus-glow-alpha: 0.5;
1023
+ --us-_focus-glow-shadow-alpha: 0.25;
1024
+ }
963
1025
 
964
1026
  .us-theme-fci .us-drawer {
965
1027
  --us-drawer-background: #fff;
@@ -1062,45 +1124,69 @@ html {
1062
1124
 
1063
1125
  .us-theme-fci .us-input {
1064
1126
  --us-input-font-family: var(--us-font-sans);
1065
- --us-input-border-radius: 6px;
1066
1127
  }
1067
1128
  .us-theme-fci .us-input--xs {
1068
- --us-input-height: 22px;
1129
+ --us-input-height: 24px;
1069
1130
  --us-input-padding-y: 0.282rem;
1070
1131
  --us-input-padding-x: 0.625rem;
1071
1132
  --us-input-font-size: 0.75rem;
1133
+ --us-input-border-radius: 6px;
1134
+ --us-input-line-height: 1;
1135
+ }
1136
+ .us-theme-fci .us-input--xs .us-icon:not(.us-button .us-icon) {
1137
+ --us-icon-font-size-default: 0.75rem;
1072
1138
  }
1073
1139
  .us-theme-fci .us-input--sm {
1074
- --us-input-height: 24px;
1140
+ --us-input-height: 28px;
1075
1141
  --us-input-padding-y: 0.407rem;
1076
1142
  --us-input-padding-x: 0.75rem;
1077
1143
  --us-input-font-size: 0.75rem;
1144
+ --us-input-border-radius: 6px;
1145
+ --us-input-line-height: 1;
1146
+ }
1147
+ .us-theme-fci .us-input--sm .us-icon:not(.us-button .us-icon) {
1148
+ --us-icon-font-size-default: 0.875rem;
1078
1149
  }
1079
1150
  .us-theme-fci .us-input--md {
1080
- --us-input-height: 30px;
1151
+ --us-input-height: 32px;
1081
1152
  --us-input-padding-y: 0.532rem;
1082
1153
  --us-input-padding-x: 0.875rem;
1083
- --us-input-font-size: 0.75rem;
1154
+ --us-input-font-size: 0.8125rem;
1155
+ --us-input-border-radius: 6px;
1156
+ --us-input-line-height: 1;
1084
1157
  --us-input-content-gap: 0.25rem;
1085
1158
  }
1086
1159
  .us-theme-fci .us-input--md .us-icon:not(.us-button .us-icon) {
1087
- --us-icon-font-size-default: 16px;
1160
+ --us-icon-font-size-default: 1rem;
1088
1161
  }
1089
1162
  .us-theme-fci .us-input--lg {
1090
- --us-input-height: 34px;
1163
+ --us-input-height: 36px;
1091
1164
  --us-input-padding-y: 0.625rem;
1092
1165
  --us-input-padding-x: 1rem;
1093
- --us-input-font-size: 0.85rem;
1166
+ --us-input-font-size: 0.875rem;
1167
+ --us-input-border-radius: 8px;
1168
+ --us-input-line-height: 1;
1169
+ }
1170
+ .us-theme-fci .us-input--lg .us-icon:not(.us-button .us-icon) {
1171
+ --us-icon-font-size-default: 1.125rem;
1094
1172
  }
1095
1173
  .us-theme-fci .us-input--xl {
1096
- --us-input-height: 44px;
1174
+ --us-input-height: 40px;
1097
1175
  --us-input-padding-y: 0.75rem;
1098
- --us-input-padding-x: 1.125rem;
1099
- --us-input-font-size: 0.85rem;
1176
+ --us-input-padding-x: 1.25rem;
1177
+ --us-input-font-size: 1rem;
1178
+ --us-input-border-radius: 8px;
1179
+ --us-input-line-height: 1;
1180
+ }
1181
+ .us-theme-fci .us-input--xl .us-icon:not(.us-button .us-icon) {
1182
+ --us-icon-font-size-default: 1.25rem;
1100
1183
  }
1101
1184
  .us-theme-fci .us-input--filled > .us-outline {
1102
1185
  --us-outline-border-width: 1px;
1103
- --us-outline-focus-border-width: 1px;
1186
+ --us-outline-focus-border-width: 2px;
1187
+ }
1188
+ .us-theme-fci .us-input--filled > .us-glow {
1189
+ --us-glow-opacity: 0;
1104
1190
  }
1105
1191
  .us-theme-fci .us-input--outlined > .us-overlay {
1106
1192
  --us-overlay-color: inherit;
@@ -1108,19 +1194,30 @@ html {
1108
1194
  }
1109
1195
  .us-theme-fci .us-input--outlined > .us-outline {
1110
1196
  --us-outline-border-width: 1px;
1111
- --us-outline-focus-border-width: 1px;
1197
+ --us-outline-focus-border-width: 2px;
1198
+ }
1199
+ .us-theme-fci .us-input--outlined > .us-glow {
1200
+ --us-glow-opacity: 0;
1112
1201
  }
1113
1202
  .us-theme-fci .us-input--flat > .us-outline {
1114
1203
  --us-outline-border-width: 1px;
1115
- --us-outline-focus-border-width: 1px;
1204
+ --us-outline-focus-border-width: 2px;
1205
+ }
1206
+ .us-theme-fci .us-input--flat > .us-glow {
1207
+ --us-glow-opacity: 0;
1116
1208
  }
1117
1209
  .us-theme-fci .us-input--text {
1118
1210
  --us-input-padding-x: 0;
1119
1211
  }
1120
1212
  .us-theme-fci .us-input--text > .us-outline {
1121
1213
  --us-outline-border-width: 1px;
1214
+ --us-outline-focus-border-width: 2px;
1215
+ }
1216
+ .us-theme-fci .us-input--text > .us-glow {
1217
+ --us-glow-opacity: 0;
1122
1218
  }
1123
1219
  .us-theme-fci .us-input--filled {
1220
+ --us-input-color: rgba(0, 0, 0, 0.87);
1124
1221
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1125
1222
  }
1126
1223
  .us-theme-fci .us-input--filled > .us-overlay {
@@ -1161,6 +1258,7 @@ html {
1161
1258
  --us-outline-focus-opacity: 1;
1162
1259
  }
1163
1260
  .us-theme-fci .us-input--outlined {
1261
+ --us-input-color: rgba(0, 0, 0, 0.87);
1164
1262
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1165
1263
  }
1166
1264
  .us-theme-fci .us-input--outlined > .us-overlay {
@@ -1169,28 +1267,46 @@ html {
1169
1267
  }
1170
1268
  .us-theme-fci .us-input--outlined > .us-outline {
1171
1269
  --us-outline-border-color: currentColor;
1172
- --us-outline-opacity: 0.12;
1173
- --us-outline-hover-opacity: 0.24;
1270
+ --us-outline-opacity: 0.23;
1271
+ --us-outline-hover-opacity: 0.5;
1174
1272
  --us-outline-focus-opacity: 1;
1175
1273
  }
1176
1274
  .us-theme-fci .us-input--outlined.us-input--primary > .us-outline {
1177
1275
  --us-outline-focus-border-color: var(--us-primary-color);
1178
1276
  }
1277
+ .us-theme-fci .us-input--outlined.us-input--primary > .us-glow {
1278
+ --us-glow-focus-border-color: var(--us-primary-color);
1279
+ }
1179
1280
  .us-theme-fci .us-input--outlined.us-input--secondary > .us-outline {
1180
1281
  --us-outline-focus-border-color: var(--us-secondary-color);
1181
1282
  }
1283
+ .us-theme-fci .us-input--outlined.us-input--secondary > .us-glow {
1284
+ --us-glow-focus-border-color: var(--us-secondary-color);
1285
+ }
1182
1286
  .us-theme-fci .us-input--outlined.us-input--success > .us-outline {
1183
1287
  --us-outline-focus-border-color: var(--us-success-color);
1184
1288
  }
1289
+ .us-theme-fci .us-input--outlined.us-input--success > .us-glow {
1290
+ --us-glow-focus-border-color: var(--us-success-color);
1291
+ }
1185
1292
  .us-theme-fci .us-input--outlined.us-input--info > .us-outline {
1186
1293
  --us-outline-focus-border-color: var(--us-info-color);
1187
1294
  }
1295
+ .us-theme-fci .us-input--outlined.us-input--info > .us-glow {
1296
+ --us-glow-focus-border-color: var(--us-info-color);
1297
+ }
1188
1298
  .us-theme-fci .us-input--outlined.us-input--warning > .us-outline {
1189
1299
  --us-outline-focus-border-color: var(--us-warning-color);
1190
1300
  }
1301
+ .us-theme-fci .us-input--outlined.us-input--warning > .us-glow {
1302
+ --us-glow-focus-border-color: var(--us-warning-color);
1303
+ }
1191
1304
  .us-theme-fci .us-input--outlined.us-input--danger > .us-outline {
1192
1305
  --us-outline-focus-border-color: var(--us-danger-color);
1193
1306
  }
1307
+ .us-theme-fci .us-input--outlined.us-input--danger > .us-glow {
1308
+ --us-glow-focus-border-color: var(--us-danger-color);
1309
+ }
1194
1310
  .us-theme-fci .us-input--outlined.us-input--light {
1195
1311
  --us-input-color: #fff;
1196
1312
  --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -1207,6 +1323,7 @@ html {
1207
1323
  --us-outline-focus-opacity: 1;
1208
1324
  }
1209
1325
  .us-theme-fci .us-input--flat {
1326
+ --us-input-color: rgba(0, 0, 0, 0.87);
1210
1327
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1211
1328
  }
1212
1329
  .us-theme-fci .us-input--flat > .us-overlay {
@@ -1221,21 +1338,39 @@ html {
1221
1338
  .us-theme-fci .us-input--flat.us-input--primary > .us-outline {
1222
1339
  --us-outline-focus-border-color: var(--us-primary-color);
1223
1340
  }
1341
+ .us-theme-fci .us-input--flat.us-input--primary > .us-glow {
1342
+ --us-glow-focus-border-color: var(--us-primary-color);
1343
+ }
1224
1344
  .us-theme-fci .us-input--flat.us-input--secondary > .us-outline {
1225
1345
  --us-outline-focus-border-color: var(--us-secondary-color);
1226
1346
  }
1347
+ .us-theme-fci .us-input--flat.us-input--secondary > .us-glow {
1348
+ --us-glow-focus-border-color: var(--us-secondary-color);
1349
+ }
1227
1350
  .us-theme-fci .us-input--flat.us-input--success > .us-outline {
1228
1351
  --us-outline-focus-border-color: var(--us-success-color);
1229
1352
  }
1353
+ .us-theme-fci .us-input--flat.us-input--success > .us-glow {
1354
+ --us-glow-focus-border-color: var(--us-success-color);
1355
+ }
1230
1356
  .us-theme-fci .us-input--flat.us-input--info > .us-outline {
1231
1357
  --us-outline-focus-border-color: var(--us-info-color);
1232
1358
  }
1359
+ .us-theme-fci .us-input--flat.us-input--info > .us-glow {
1360
+ --us-glow-focus-border-color: var(--us-info-color);
1361
+ }
1233
1362
  .us-theme-fci .us-input--flat.us-input--warning > .us-outline {
1234
1363
  --us-outline-focus-border-color: var(--us-warning-color);
1235
1364
  }
1365
+ .us-theme-fci .us-input--flat.us-input--warning > .us-glow {
1366
+ --us-glow-focus-border-color: var(--us-warning-color);
1367
+ }
1236
1368
  .us-theme-fci .us-input--flat.us-input--danger > .us-outline {
1237
1369
  --us-outline-focus-border-color: var(--us-danger-color);
1238
1370
  }
1371
+ .us-theme-fci .us-input--flat.us-input--danger > .us-glow {
1372
+ --us-glow-focus-border-color: var(--us-danger-color);
1373
+ }
1239
1374
  .us-theme-fci .us-input--flat.us-input--light {
1240
1375
  --us-input-color: #fff;
1241
1376
  --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -1272,97 +1407,6 @@ html {
1272
1407
  --us-outline-border-color: transparent;
1273
1408
  }
1274
1409
 
1275
- .us-theme-fci .us-checkbox-group--xs {
1276
- --us-checkbox-group-gap: 0.2rem;
1277
- }
1278
- .us-theme-fci .us-checkbox-group--sm {
1279
- --us-checkbox-group-gap: 0.375rem;
1280
- }
1281
- .us-theme-fci .us-checkbox-group--md {
1282
- --us-checkbox-group-gap: 0.5rem;
1283
- }
1284
- .us-theme-fci .us-checkbox-group--lg {
1285
- --us-checkbox-group-gap: 0.75rem;
1286
- }
1287
- .us-theme-fci .us-checkbox-group--xl {
1288
- --us-checkbox-group-gap: 0.875rem;
1289
- }
1290
- .us-theme-fci .us-checkbox {
1291
- --us-checkbox-control-border-width: 1px;
1292
- --us-checkbox-control-border-style: solid;
1293
- --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
1294
- --us-checkbox-control-color: var(--us-white-color);
1295
- --us-_checked-checkbox-control-border-color: var(--us-primary-color);
1296
- --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(var(--us-primary-rgb) / 40%);
1297
- --us-checkbox-tap-background: var(--us-primary-color);
1298
- }
1299
- .us-theme-fci .us-checkbox--xs {
1300
- --us-checkbox-gap: 0.375rem;
1301
- --us-checkbox-control-border-radius: 4px;
1302
- --us-checkbox-control-width: 14px;
1303
- --us-checkbox-control-height: 14px;
1304
- --us-checkbox-label-font-size: 0.75rem;
1305
- }
1306
- .us-theme-fci .us-checkbox--xs .us-icon {
1307
- --us-icon-font-size: 0.5rem;
1308
- }
1309
- .us-theme-fci .us-checkbox--sm {
1310
- --us-checkbox-gap: 0.375rem;
1311
- --us-checkbox-control-border-radius: 4px;
1312
- --us-checkbox-control-width: 16px;
1313
- --us-checkbox-control-height: 16px;
1314
- --us-checkbox-label-font-size: 0.75rem;
1315
- }
1316
- .us-theme-fci .us-checkbox--sm .us-icon {
1317
- --us-icon-font-size: 0.5rem;
1318
- }
1319
- .us-theme-fci .us-checkbox--md {
1320
- --us-checkbox-gap: 0.5rem;
1321
- --us-checkbox-control-border-radius: 4px;
1322
- --us-checkbox-control-width: 18px;
1323
- --us-checkbox-control-height: 18px;
1324
- --us-checkbox-label-font-size: 0.875rem;
1325
- }
1326
- .us-theme-fci .us-checkbox--md .us-icon {
1327
- --us-icon-font-size: 0.625rem;
1328
- }
1329
- .us-theme-fci .us-checkbox--lg {
1330
- --us-checkbox-gap: 0.5rem;
1331
- --us-checkbox-control-border-radius: 6px;
1332
- --us-checkbox-control-width: 20px;
1333
- --us-checkbox-control-height: 20px;
1334
- --us-checkbox-label-font-size: 0.875rem;
1335
- }
1336
- .us-theme-fci .us-checkbox--lg .us-icon {
1337
- --us-icon-font-size: 0.75rem;
1338
- }
1339
- .us-theme-fci .us-checkbox--xl {
1340
- --us-checkbox-gap: 0.5rem;
1341
- --us-checkbox-control-border-radius: 6px;
1342
- --us-checkbox-control-width: 22px;
1343
- --us-checkbox-control-height: 22px;
1344
- --us-checkbox-label-font-size: 1rem;
1345
- }
1346
- .us-theme-fci .us-checkbox--xl .us-icon {
1347
- --us-icon-font-size: 0.875rem;
1348
- }
1349
- .us-theme-fci .us-checkbox--light {
1350
- --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
1351
- --us-checkbox-tap-background: rgba(0, 0, 0, 0.8);
1352
- --us-checkbox-control-color: var(--us-white-color);
1353
- --us-_checked-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
1354
- --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(0 0 0 / 15%);
1355
- --us-checkbox-label-color: var(--us-black-color);
1356
- }
1357
- .us-theme-fci .us-checkbox--dark {
1358
- --us-checkbox-control-border-color: rgba(255 255 255 / 30%);
1359
- --us-checkbox-tap-background: rgba(255 255 255 / 30%);
1360
- --us-checkbox-control-color: var(--us-white-color);
1361
- --us-_checked-checkbox-control-border-color: rgba(255 255 255 / 30%);
1362
- --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(255 255 255 / 15%);
1363
- --us-checkbox-label-color: var(--us-white-color);
1364
- }
1365
-
1366
1410
  .us-theme-fci .us-radio-group--xs {
1367
1411
  --us-radio-group-gap: 0.2rem;
1368
1412
  }
@@ -1566,6 +1610,12 @@ html {
1566
1610
  --us-list-color: #343a40;
1567
1611
  --us-list-background: #fff;
1568
1612
  }
1613
+ .us-theme-fci .us-list--divider .us-list-item {
1614
+ border-bottom: 1px solid #e0e0e0;
1615
+ }
1616
+ .us-theme-fci .us-list--divider .us-list-item:last-child {
1617
+ border-bottom: 0px;
1618
+ }
1569
1619
  .us-theme-fci .us-list-item {
1570
1620
  --us-list-item-border-radius: 0px;
1571
1621
  --us-list-item-title-font-weight: 500;
@@ -1610,17 +1660,26 @@ html {
1610
1660
  --us-list-item-subtitle-font-size: 11px;
1611
1661
  --us-list-item-title-line-height: 14px;
1612
1662
  }
1663
+ .us-theme-fci .us-list--sm .us-list-item .us-icon {
1664
+ --us-icon-font-size: 18px;
1665
+ }
1613
1666
  .us-theme-fci .us-list--md .us-list-item {
1614
1667
  --us-list-item-min-height: 2.25rem;
1615
1668
  --us-list-item-padding-y: 0.375rem;
1616
1669
  --us-list-item-padding-x: 0.875rem;
1617
1670
  --us-list-item-padding-level: 1.25rem;
1618
- --us-list-item-gap: 1rem;
1671
+ --us-list-item-gap: 0.5rem;
1619
1672
  --us-list-item-title-font-size: 0.8125rem;
1620
1673
  --us-list-item-title-line-height: 20px;
1621
1674
  --us-list-item-subtitle-font-size: 0.75rem;
1622
1675
  --us-list-item-subtitle-line-height: 16px;
1623
1676
  }
1677
+ .us-theme-fci .us-list--md .us-list-item .us-icon {
1678
+ --us-icon-font-size: 20px;
1679
+ }
1680
+ .us-theme-fci .us-list--md .us-list-item .us-checkbox .us-icon {
1681
+ --us-icon-font-size: 0.625rem;
1682
+ }
1624
1683
  .us-theme-fci .us-list--lg .us-list-item {
1625
1684
  --us-list-item-min-height: 2.75rem;
1626
1685
  --us-list-item-padding-y: 0.625rem;
@@ -1633,6 +1692,9 @@ html {
1633
1692
  --us-list-item-subtitle-font-size: 0.8125rem;
1634
1693
  --us-list-item-subtitle-line-height: 18px;
1635
1694
  }
1695
+ .us-theme-fci .us-list--lg .us-list-item .us-icon {
1696
+ --us-icon-font-size: 22px;
1697
+ }
1636
1698
 
1637
1699
  .us-theme-fci .us-menu {
1638
1700
  --us-menu-padding-y: 0;
@@ -1687,6 +1749,31 @@ html {
1687
1749
  --us-_active-overlay-opacity: 0;
1688
1750
  }
1689
1751
 
1752
+ .us-theme-fci .us-tabs--xs {
1753
+ --us-tab-height: 32px;
1754
+ --us-tab-padding-x: 12px;
1755
+ --us-tab-font-size: 12px;
1756
+ }
1757
+ .us-theme-fci .us-tabs--sm {
1758
+ --us-tab-height: 36px;
1759
+ --us-tab-font-size: 13px;
1760
+ --us-tab-padding-x: 13px;
1761
+ }
1762
+ .us-theme-fci .us-tabs--md {
1763
+ --us-tab-height: 40px;
1764
+ --us-tab-padding-x: 16px;
1765
+ --us-tab-font-size: 14px;
1766
+ }
1767
+ .us-theme-fci .us-tabs--lg {
1768
+ --us-tab-height: 44px;
1769
+ --us-tab-padding-x: 18px;
1770
+ --us-tab-font-size: 16px;
1771
+ }
1772
+ .us-theme-fci .us-tabs--xl {
1773
+ --us-tab-height: 48px;
1774
+ --us-tab-padding-x: 22px;
1775
+ --us-tab-font-size: 18px;
1776
+ }
1690
1777
  .us-theme-fci .us-tabs--underlined {
1691
1778
  --us-tab-indicator-color: var(--us-primary-action-color);
1692
1779
  --us-tab-indicator-height: 3px;
@@ -1783,8 +1870,6 @@ html {
1783
1870
  .us-theme-fci .us-tab {
1784
1871
  --us-tab-color: var(--us-secondary-action-color);
1785
1872
  --us-tab-padding-y: 0px;
1786
- --us-tab-padding-x: 16px;
1787
- --us-tab-font-size: 0.8125rem;
1788
1873
  --us-tab-font-weight: 500;
1789
1874
  --us-tab-closable-color: var(--us-secondary-action-color);
1790
1875
  }
@@ -1827,22 +1912,20 @@ html {
1827
1912
  .us-theme-fci .us-card--xs {
1828
1913
  --us-card-header-padding-y: 0.375rem;
1829
1914
  --us-card-header-padding-x: 0.75rem;
1830
- --us-card-header-min-height: 2.5rem;
1915
+ --us-card-header-min-height: 2.75rem;
1831
1916
  --us-card-header-gap: 0.5rem;
1832
1917
  --us-card-header-content-gap: 0.25rem;
1833
- --us-card-header-title-font-size: 11px;
1834
- --us-card-header-title-font-weight: 500;
1918
+ --us-card-header-title-font-size: 12px;
1835
1919
  --us-card-header-title-line-height: 14px;
1836
1920
  --us-card-header-subtitle-font-size: 10px;
1837
- --us-card-header-subtitle-font-weight: 500;
1838
1921
  --us-card-header-subtitle-line-height: 14px;
1839
- --us-card-body-padding-y: 0.375rem;
1922
+ --us-card-body-padding-y: 0.75rem;
1840
1923
  --us-card-body-padding-x: 0.75rem;
1841
1924
  --us-card-body-font-size: 0.75rem;
1842
1925
  --us-card-body-line-height: 18px;
1843
1926
  --us-card-footer-padding-y: 0.375rem;
1844
1927
  --us-card-footer-padding-x: 0.75rem;
1845
- --us-card-footer-min-height: 2.5rem;
1928
+ --us-card-footer-min-height: 2.75rem;
1846
1929
  --us-card-footer-gap: 0.5rem;
1847
1930
  }
1848
1931
  .us-theme-fci .us-card--xs .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1851,24 +1934,22 @@ html {
1851
1934
  .us-theme-fci .us-card--sm {
1852
1935
  --us-card-title-padding-y: 0.875rem 0.375rem;
1853
1936
  --us-card-title-font-size: 1.25rem;
1854
- --us-card-header-padding-y: 0.375rem;
1937
+ --us-card-header-padding-y: 0.5rem;
1855
1938
  --us-card-header-padding-x: 1rem;
1856
- --us-card-header-min-height: 2.75rem;
1939
+ --us-card-header-min-height: 3rem;
1857
1940
  --us-card-header-gap: 0.75rem;
1858
1941
  --us-card-header-content-gap: 0.5rem;
1859
- --us-card-header-title-font-size: 12px;
1860
- --us-card-header-title-font-weight: 500;
1942
+ --us-card-header-title-font-size: 13px;
1861
1943
  --us-card-header-title-line-height: 16px;
1862
1944
  --us-card-header-subtitle-font-size: 11px;
1863
- --us-card-header-subtitle-font-weight: 500;
1864
1945
  --us-card-header-subtitle-line-height: 16px;
1865
- --us-card-body-padding-y: 0.375rem;
1946
+ --us-card-body-padding-y: 1rem;
1866
1947
  --us-card-body-padding-x: 1rem;
1867
1948
  --us-card-body-font-size: 0.875rem;
1868
1949
  --us-card-body-line-height: 20px;
1869
- --us-card-footer-padding-y: 0.375rem;
1950
+ --us-card-footer-padding-y: 0.5rem;
1870
1951
  --us-card-footer-padding-x: 1rem;
1871
- --us-card-footer-min-height: 2.75rem;
1952
+ --us-card-footer-min-height: 3rem;
1872
1953
  --us-card-footer-gap: 0.75rem;
1873
1954
  }
1874
1955
  .us-theme-fci .us-card--sm .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1877,22 +1958,22 @@ html {
1877
1958
  .us-theme-fci .us-card--md {
1878
1959
  --us-card-title-padding-y: 1rem 0.5rem;
1879
1960
  --us-card-title-font-size: 1.25rem;
1880
- --us-card-header-min-height: 3rem;
1881
- --us-card-header-padding-y: 0.5rem;
1961
+ --us-card-header-padding-y: 0.625rem;
1882
1962
  --us-card-header-padding-x: 1rem;
1963
+ --us-card-header-min-height: 3.5rem;
1883
1964
  --us-card-header-gap: 0.75rem;
1884
1965
  --us-card-header-content-gap: 0.5rem;
1885
- --us-card-header-title-font-size: 13px;
1886
- --us-card-header-title-line-height: 16px;
1966
+ --us-card-header-title-font-size: 14px;
1967
+ --us-card-header-title-line-height: 18px;
1887
1968
  --us-card-header-subtitle-font-size: 12px;
1888
1969
  --us-card-header-subtitle-line-height: 16px;
1889
- --us-card-body-padding-y: 0.5rem;
1970
+ --us-card-body-padding-y: 1rem;
1890
1971
  --us-card-body-padding-x: 1rem;
1891
1972
  --us-card-body-font-size: 0.875rem;
1892
1973
  --us-card-body-line-height: 24px;
1893
- --us-card-footer-padding-y: 0.5rem;
1974
+ --us-card-footer-padding-y: 0.625rem;
1894
1975
  --us-card-footer-padding-x: 1rem;
1895
- --us-card-footer-min-height: 3rem;
1976
+ --us-card-footer-min-height: 3.5rem;
1896
1977
  --us-card-footer-gap: 1rem;
1897
1978
  }
1898
1979
  .us-theme-fci .us-card--md .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1901,22 +1982,22 @@ html {
1901
1982
  .us-theme-fci .us-card--lg {
1902
1983
  --us-card-title-padding-y: 1.25rem 0.75rem;
1903
1984
  --us-card-title-font-size: 1.5rem;
1904
- --us-card-header-padding-y: 0.625rem;
1985
+ --us-card-header-padding-y: 0.75rem;
1905
1986
  --us-card-header-padding-x: 1.25rem;
1906
- --us-card-header-min-height: 3.5rem;
1987
+ --us-card-header-min-height: 4rem;
1907
1988
  --us-card-header-gap: 1rem;
1908
1989
  --us-card-header-content-gap: 0.75rem;
1909
- --us-card-header-title-font-size: 14px;
1990
+ --us-card-header-title-font-size: 16px;
1910
1991
  --us-card-header-title-line-height: 18px;
1911
1992
  --us-card-header-subtitle-font-size: 13px;
1912
1993
  --us-card-header-subtitle-line-height: 18px;
1913
- --us-card-body-padding-y: 0.875rem;
1994
+ --us-card-body-padding-y: 1.25rem;
1914
1995
  --us-card-body-padding-x: 1.25rem;
1915
1996
  --us-card-body-font-size: 1rem;
1916
1997
  --us-card-body-line-height: 24px;
1917
- --us-card-footer-padding-y: 0.625rem;
1998
+ --us-card-footer-padding-y: 0.75rem;
1918
1999
  --us-card-footer-padding-x: 1.25rem;
1919
- --us-card-footer-min-height: 3.5rem;
2000
+ --us-card-footer-min-height: 4rem;
1920
2001
  --us-card-footer-gap: 1rem;
1921
2002
  }
1922
2003
  .us-theme-fci .us-card--lg .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1925,47 +2006,25 @@ html {
1925
2006
  .us-theme-fci .us-card--xl {
1926
2007
  --us-card-header-padding-y: 0.75rem;
1927
2008
  --us-card-header-padding-x: 1.5rem;
1928
- --us-card-header-min-height: 4rem;
2009
+ --us-card-header-min-height: 4.5rem;
1929
2010
  --us-card-header-gap: 1rem;
1930
2011
  --us-card-header-content-gap: 0.875rem;
1931
- --us-card-header-title-font-size: 16px;
2012
+ --us-card-header-title-font-size: 18px;
1932
2013
  --us-card-header-title-line-height: 20px;
1933
2014
  --us-card-header-subtitle-font-size: 15px;
1934
2015
  --us-card-header-subtitle-line-height: 20px;
1935
- --us-card-body-padding-y: 0.75rem;
2016
+ --us-card-body-padding-y: 1.5rem;
1936
2017
  --us-card-body-padding-x: 1.5rem;
1937
2018
  --us-card-body-font-size: 1.125rem;
1938
2019
  --us-card-body-line-height: 28px;
1939
2020
  --us-card-footer-padding-y: 0.75rem;
1940
2021
  --us-card-footer-padding-x: 1.5rem;
1941
- --us-card-footer-min-height: 4rem;
2022
+ --us-card-footer-min-height: 4.5rem;
1942
2023
  --us-card-footer-gap: 1rem;
1943
2024
  }
1944
2025
  .us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
1945
2026
  --us-icon-font-size-default: 36px;
1946
2027
  }
1947
- .us-theme-fci .us-card--2xl {
1948
- --us-card-header-padding-y: 0.75rem;
1949
- --us-card-header-padding-x: 1.5rem;
1950
- --us-card-header-min-height: 4.5rem;
1951
- --us-card-header-gap: 1rem;
1952
- --us-card-header-content-gap: 1rem;
1953
- --us-card-header-title-font-size: 18px;
1954
- --us-card-header-title-line-height: 24px;
1955
- --us-card-header-subtitle-font-size: 16px;
1956
- --us-card-header-subtitle-line-height: 24px;
1957
- --us-card-body-padding-y: 0.75rem;
1958
- --us-card-body-padding-x: 1.5rem;
1959
- --us-card-body-font-size: 1.25rem;
1960
- --us-card-body-line-height: 36px;
1961
- --us-card-footer-padding-y: 0.75rem;
1962
- --us-card-footer-padding-x: 1.5rem;
1963
- --us-card-footer-min-height: 4.5rem;
1964
- --us-card-footer-gap: 1rem;
1965
- }
1966
- .us-theme-fci .us-card--2xl .us-card-header .us-icon:not(.us-button .us-icon) {
1967
- --us-icon-font-size-default: 40px;
1968
- }
1969
2028
 
1970
2029
  .us-theme-fci .us-description > .us-surface {
1971
2030
  --us-surface-opacity: 0;
@@ -2266,6 +2325,100 @@ html {
2266
2325
  --us-surface-color: var(--us-danger-color);
2267
2326
  }
2268
2327
 
2328
+ .us-theme-fci .us-checkbox-group--xs {
2329
+ --us-checkbox-group-gap: 0.2rem;
2330
+ }
2331
+ .us-theme-fci .us-checkbox-group--sm {
2332
+ --us-checkbox-group-gap: 0.375rem;
2333
+ }
2334
+ .us-theme-fci .us-checkbox-group--md {
2335
+ --us-checkbox-group-gap: 0.5rem;
2336
+ }
2337
+ .us-theme-fci .us-checkbox-group--lg {
2338
+ --us-checkbox-group-gap: 0.75rem;
2339
+ }
2340
+ .us-theme-fci .us-checkbox-group--xl {
2341
+ --us-checkbox-group-gap: 0.875rem;
2342
+ }
2343
+ .us-theme-fci .us-checkbox {
2344
+ --us-checkbox-control-border-width: 1px;
2345
+ --us-checkbox-control-border-style: solid;
2346
+ --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
2347
+ --us-checkbox-control-color: var(--us-white-color);
2348
+ --us-_checked-checkbox-control-border-color: var(--us-primary-color);
2349
+ --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(var(--us-primary-rgb) / 40%);
2350
+ --us-checkbox-tap-background: var(--us-primary-color);
2351
+ }
2352
+ .us-theme-fci .us-checkbox .us-icon {
2353
+ --us-icon-color: inherit !important;
2354
+ }
2355
+ .us-theme-fci .us-checkbox--xs {
2356
+ --us-checkbox-gap: 0.375rem;
2357
+ --us-checkbox-control-border-radius: 4px;
2358
+ --us-checkbox-control-width: 14px;
2359
+ --us-checkbox-control-height: 14px;
2360
+ --us-checkbox-label-font-size: 0.75rem;
2361
+ }
2362
+ .us-theme-fci .us-checkbox--xs .us-icon {
2363
+ --us-icon-font-size: 0.5rem;
2364
+ }
2365
+ .us-theme-fci .us-checkbox--sm {
2366
+ --us-checkbox-gap: 0.375rem;
2367
+ --us-checkbox-control-border-radius: 4px;
2368
+ --us-checkbox-control-width: 16px;
2369
+ --us-checkbox-control-height: 16px;
2370
+ --us-checkbox-label-font-size: 0.75rem;
2371
+ }
2372
+ .us-theme-fci .us-checkbox--sm .us-icon {
2373
+ --us-icon-font-size: 0.5rem;
2374
+ }
2375
+ .us-theme-fci .us-checkbox--md {
2376
+ --us-checkbox-gap: 0.5rem;
2377
+ --us-checkbox-control-border-radius: 4px;
2378
+ --us-checkbox-control-width: 18px;
2379
+ --us-checkbox-control-height: 18px;
2380
+ --us-checkbox-label-font-size: 0.875rem;
2381
+ }
2382
+ .us-theme-fci .us-checkbox--md .us-icon {
2383
+ --us-icon-font-size: 0.625rem;
2384
+ }
2385
+ .us-theme-fci .us-checkbox--lg {
2386
+ --us-checkbox-gap: 0.5rem;
2387
+ --us-checkbox-control-border-radius: 6px;
2388
+ --us-checkbox-control-width: 20px;
2389
+ --us-checkbox-control-height: 20px;
2390
+ --us-checkbox-label-font-size: 0.875rem;
2391
+ }
2392
+ .us-theme-fci .us-checkbox--lg .us-icon {
2393
+ --us-icon-font-size: 0.75rem;
2394
+ }
2395
+ .us-theme-fci .us-checkbox--xl {
2396
+ --us-checkbox-gap: 0.5rem;
2397
+ --us-checkbox-control-border-radius: 6px;
2398
+ --us-checkbox-control-width: 22px;
2399
+ --us-checkbox-control-height: 22px;
2400
+ --us-checkbox-label-font-size: 1rem;
2401
+ }
2402
+ .us-theme-fci .us-checkbox--xl .us-icon {
2403
+ --us-icon-font-size: 0.875rem;
2404
+ }
2405
+ .us-theme-fci .us-checkbox--light {
2406
+ --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
2407
+ --us-checkbox-tap-background: rgba(0, 0, 0, 0.8);
2408
+ --us-checkbox-control-color: var(--us-white-color);
2409
+ --us-_checked-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
2410
+ --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(0 0 0 / 15%);
2411
+ --us-checkbox-label-color: var(--us-black-color);
2412
+ }
2413
+ .us-theme-fci .us-checkbox--dark {
2414
+ --us-checkbox-control-border-color: rgba(255 255 255 / 30%);
2415
+ --us-checkbox-tap-background: rgba(255 255 255 / 30%);
2416
+ --us-checkbox-control-color: var(--us-white-color);
2417
+ --us-_checked-checkbox-control-border-color: rgba(255 255 255 / 30%);
2418
+ --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(255 255 255 / 15%);
2419
+ --us-checkbox-label-color: var(--us-white-color);
2420
+ }
2421
+
2269
2422
  .light-scroll::-webkit-scrollbar,
2270
2423
  .us-viewer .k-overflow-auto::-webkit-scrollbar {
2271
2424
  width: 6px !important;
@@ -2311,7 +2464,14 @@ html {
2311
2464
 
2312
2465
  .us-theme-fci {
2313
2466
  --us-primary-rgb: 153 0 0;
2314
- --us-primary-color: hsl(0, 100%, 30%);
2467
+ --us-secondary-rgb: 15 23 42;
2468
+ --us-success-rgb: 22 163 74;
2469
+ --us-info-rgb: 124 58 237;
2470
+ --us-warning-rgb: 248 148 6;
2471
+ --us-danger-rgb: 220 38 38;
2472
+ --us-black-rgb: 0 0 0;
2473
+ --us-white-rgb: 255 255 255;
2474
+ --us-primary-color: #990000;
2315
2475
  --us-secondary-color: #0f172a;
2316
2476
  --us-success-color: #16a34a;
2317
2477
  --us-success-dark-color: #15803d;