@unifiedsoftware/styles 2.0.0-beta.2 → 2.0.0-beta.21

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
@@ -30,7 +30,6 @@
30
30
  --us-accordion-header-padding-y: 0.685rem;
31
31
  --us-accordion-header-padding-x: 1rem;
32
32
  --us-accordion-header-padding-level: 1.25rem;
33
- --us-accordion-header-font-size: 12px;
34
33
  --us-accordion-header-gap: 1rem;
35
34
  --us-accordion-header-title-font-size: 12px;
36
35
  --us-accordion-header-title-line-height: 18px;
@@ -41,6 +40,9 @@
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
48
  --us-accordion-header-min-height: 48px;
@@ -48,7 +50,7 @@
48
50
  --us-accordion-header-padding-x: 1rem;
49
51
  --us-accordion-header-padding-level: 1.25rem;
50
52
  --us-accordion-header-gap: 1rem;
51
- --us-accordion-header-title-font-size: 0.875rem;
53
+ --us-accordion-header-title-font-size: 13px;
52
54
  --us-accordion-header-title-line-height: 20px;
53
55
  --us-accordion-header-subtitle-font-size: 0.75rem;
54
56
  --us-accordion-header-subtitle-line-height: 16px;
@@ -57,16 +59,18 @@
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
67
  --us-accordion-header-min-height: 56px;
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
71
  --us-accordion-header-gap: 1rem;
68
72
  --us-accordion-header-content-gap: 0.5rem;
69
- --us-accordion-header-title-font-size: 0.875rem;
73
+ --us-accordion-header-title-font-size: 15px;
70
74
  --us-accordion-header-title-line-height: 24px;
71
75
  --us-accordion-header-subtitle-font-size: 0.8125rem;
72
76
  --us-accordion-header-subtitle-line-height: 18px;
@@ -86,7 +90,7 @@
86
90
  --us-accordion-header-padding-level: 1.25rem;
87
91
  --us-accordion-header-font-size: 0.75rem;
88
92
  --us-accordion-header-gap: 1rem;
89
- --us-accordion-header-title-font-size: 1rem;
93
+ --us-accordion-header-title-font-size: 16px;
90
94
  --us-accordion-header-title-line-height: 24px;
91
95
  --us-accordion-header-subtitle-font-size: 0.8125rem;
92
96
  --us-accordion-header-subtitle-line-height: 18px;
@@ -95,15 +99,17 @@
95
99
  --us-accordion-body-font-size: 1rem;
96
100
  --us-accordion-body-line-height: 24px;
97
101
  }
102
+ .us-theme-fci .us-accordion--lg .us-accordion-header .us-icon:not(.us-button .us-icon) {
103
+ --us-icon-font-size-default: 28px;
104
+ }
98
105
  .us-theme-fci .us-accordion--xl {
99
106
  --us-accordion-splitted-gap: 1.25rem;
100
107
  --us-accordion-header-min-height: 3.5rem;
101
108
  --us-accordion-header-padding-y: 0.625rem;
102
109
  --us-accordion-header-padding-x: 1rem;
103
110
  --us-accordion-header-padding-level: 1.25rem;
104
- --us-accordion-header-font-size: 0.75rem;
105
111
  --us-accordion-header-gap: 1rem;
106
- --us-accordion-header-title-font-size: 1rem;
112
+ --us-accordion-header-title-font-size: 18px;
107
113
  --us-accordion-header-title-line-height: 24px;
108
114
  --us-accordion-header-subtitle-font-size: 0.8125rem;
109
115
  --us-accordion-header-subtitle-line-height: 18px;
@@ -112,13 +118,16 @@
112
118
  --us-accordion-body-font-size: 1rem;
113
119
  --us-accordion-body-line-height: 24px;
114
120
  }
121
+ .us-theme-fci .us-accordion--xl .us-accordion-header .us-icon:not(.us-button .us-icon) {
122
+ --us-icon-font-size-default: 36px;
123
+ }
115
124
  .us-theme-fci .us-accordion-item > .us-outline {
116
125
  --us-outline-border-width: 0px;
117
126
  --us-outline-z-index: 1;
118
127
  --us-outline-border-color: var(--us-accordion-border-color);
119
128
  }
120
129
  .us-theme-fci .us-accordion-item--selected {
121
- --us-accordion-header-title-font-weight: 700;
130
+ --us-accordion-header-title-font-weight: 600;
122
131
  }
123
132
  .us-theme-fci .us-accordion-body > .us-surface {
124
133
  --us-surface-color: var(--us-white-color);
@@ -343,7 +352,7 @@
343
352
  --us-icon-color: var(--us-primary-color);
344
353
  }
345
354
  .us-theme-fci .us-icon--secondary {
346
- --us-icon-color: var(--us-secondary-color);
355
+ --us-icon-color: rgba(0, 0, 0, 0.54);
347
356
  }
348
357
  .us-theme-fci .us-icon--secondary {
349
358
  --us-icon-color: var(--us-secondary-action-color);
@@ -643,7 +652,7 @@ html {
643
652
  --us-button-divider-color: #fff;
644
653
  }
645
654
  .us-theme-fci .us-button--xs {
646
- --us-button-height: 22px;
655
+ --us-button-height: 24px;
647
656
  --us-button-padding-y: 0;
648
657
  --us-button-padding-x: 0.625rem;
649
658
  --us-button-font-size: 0.75rem;
@@ -654,7 +663,7 @@ html {
654
663
  --us-icon-font-size: 0.75rem;
655
664
  }
656
665
  .us-theme-fci .us-button--sm {
657
- --us-button-height: 26px;
666
+ --us-button-height: 28px;
658
667
  --us-button-padding-y: 0;
659
668
  --us-button-padding-x: 0.75rem;
660
669
  --us-button-font-size: 0.75rem;
@@ -665,10 +674,10 @@ html {
665
674
  --us-icon-font-size: 0.875rem;
666
675
  }
667
676
  .us-theme-fci .us-button--md {
668
- --us-button-height: 30px;
677
+ --us-button-height: 32px;
669
678
  --us-button-padding-y: 0;
670
679
  --us-button-padding-x: 0.875rem;
671
- --us-button-font-size: 0.875rem;
680
+ --us-button-font-size: 0.8125rem;
672
681
  --us-button-border-radius: 6px;
673
682
  --us-button-gap: 0.375rem;
674
683
  }
@@ -676,7 +685,7 @@ html {
676
685
  --us-icon-font-size: 1rem;
677
686
  }
678
687
  .us-theme-fci .us-button--lg {
679
- --us-button-height: 34px;
688
+ --us-button-height: 36px;
680
689
  --us-button-padding-y: 0;
681
690
  --us-button-padding-x: 1rem;
682
691
  --us-button-font-size: 0.875rem;
@@ -723,6 +732,7 @@ html {
723
732
  }
724
733
  .us-theme-fci .us-button--filled > .us-outline {
725
734
  --us-outline-border-width: 1px;
735
+ --us-outline-border-width: 0px;
726
736
  --us-outline-border-color: transparent;
727
737
  }
728
738
  .us-theme-fci .us-button--filled .us-chip {
@@ -737,9 +747,9 @@ html {
737
747
  --us-_focus-active-overlay-opacity: 0.1;
738
748
  }
739
749
  .us-theme-fci .us-button--outlined > .us-outline {
740
- --us-outline-border-width: 1px;
750
+ --us-outline-border-width: 0px;
741
751
  --us-outline-border-color: var(--us-secondary-color);
742
- --us-outline-opacity: 0.16;
752
+ --us-outline-opacity: 1;
743
753
  }
744
754
  .us-theme-fci .us-button--flat > .us-overlay {
745
755
  --us-overlay-color: inherit;
@@ -750,8 +760,9 @@ html {
750
760
  --us-_focus-active-overlay-opacity: 0.32;
751
761
  }
752
762
  .us-theme-fci .us-button--flat > .us-outline {
753
- --us-outline-border-width: 1px;
754
- --us-outline-border-color: transparent;
763
+ --us-outline-border-width: 0px;
764
+ --us-outline-border-color: currentColor;
765
+ --us-outline-opacity: 0.24;
755
766
  }
756
767
  .us-theme-fci .us-button--text > .us-overlay {
757
768
  --us-overlay-color: inherit;
@@ -837,6 +848,9 @@ html {
837
848
  --us-_focus-hover-overlay-opacity: 0.24;
838
849
  --us-_focus-active-overlay-opacity: 0.32;
839
850
  }
851
+ .us-theme-fci .us-button--filled.us-button--secondary > .us-outline {
852
+ box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
853
+ }
840
854
  .us-theme-fci .us-button--bordered.us-button--secondary > .us-overlay {
841
855
  --us-_hover-overlay-opacity: 0.08;
842
856
  --us-_active-overlay-opacity: 0.12;
@@ -960,6 +974,15 @@ html {
960
974
  .us-theme-fci .us-button--bordered.us-button--danger {
961
975
  --us-button-color: var(--us-danger-color);
962
976
  }
977
+ .us-theme-fci .us-button--filled > .us-outline {
978
+ box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, var(--us-button-background) 0px 1px 2px 0px, var(--us-button-background) 0px 0px 0px 1px;
979
+ }
980
+ .us-theme-fci .us-button--flat > .us-outline {
981
+ box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, var(--us-outline-border-color) 0px 1px 2px 0px, var(--us-outline-border-color) 0px 0px 0px 1px;
982
+ }
983
+ .us-theme-fci .us-button--outlined > .us-outline {
984
+ box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
985
+ }
963
986
 
964
987
  .us-theme-fci .us-drawer {
965
988
  --us-drawer-background: #fff;
@@ -1062,45 +1085,70 @@ html {
1062
1085
 
1063
1086
  .us-theme-fci .us-input {
1064
1087
  --us-input-font-family: var(--us-font-sans);
1065
- --us-input-border-radius: 6px;
1066
1088
  }
1067
1089
  .us-theme-fci .us-input--xs {
1068
- --us-input-height: 22px;
1090
+ --us-input-height: 24px;
1069
1091
  --us-input-padding-y: 0.282rem;
1070
1092
  --us-input-padding-x: 0.625rem;
1071
1093
  --us-input-font-size: 0.75rem;
1094
+ --us-input-border-radius: 6px;
1095
+ --us-input-line-height: 1;
1096
+ }
1097
+ .us-theme-fci .us-input--xs .us-icon:not(.us-button .us-icon) {
1098
+ --us-icon-font-size-default: 0.75rem;
1072
1099
  }
1073
1100
  .us-theme-fci .us-input--sm {
1074
- --us-input-height: 24px;
1101
+ --us-input-height: 28px;
1075
1102
  --us-input-padding-y: 0.407rem;
1076
1103
  --us-input-padding-x: 0.75rem;
1077
1104
  --us-input-font-size: 0.75rem;
1105
+ --us-input-border-radius: 6px;
1106
+ --us-input-line-height: 1;
1107
+ }
1108
+ .us-theme-fci .us-input--sm .us-icon:not(.us-button .us-icon) {
1109
+ --us-icon-font-size-default: 0.875rem;
1078
1110
  }
1079
1111
  .us-theme-fci .us-input--md {
1080
- --us-input-height: 30px;
1112
+ --us-input-height: 32px;
1081
1113
  --us-input-padding-y: 0.532rem;
1082
1114
  --us-input-padding-x: 0.875rem;
1083
- --us-input-font-size: 0.75rem;
1115
+ --us-input-font-size: 0.8125rem;
1116
+ --us-input-border-radius: 6px;
1117
+ --us-input-line-height: 1;
1084
1118
  --us-input-content-gap: 0.25rem;
1085
1119
  }
1086
1120
  .us-theme-fci .us-input--md .us-icon:not(.us-button .us-icon) {
1087
- --us-icon-font-size-default: 16px;
1121
+ --us-icon-font-size-default: 1rem;
1088
1122
  }
1089
1123
  .us-theme-fci .us-input--lg {
1090
- --us-input-height: 34px;
1124
+ --us-input-height: 36px;
1091
1125
  --us-input-padding-y: 0.625rem;
1092
1126
  --us-input-padding-x: 1rem;
1093
- --us-input-font-size: 0.85rem;
1127
+ --us-input-font-size: 0.875rem;
1128
+ --us-input-border-radius: 8px;
1129
+ --us-input-line-height: 1;
1130
+ }
1131
+ .us-theme-fci .us-input--lg .us-icon:not(.us-button .us-icon) {
1132
+ --us-icon-font-size-default: 1.125rem;
1094
1133
  }
1095
1134
  .us-theme-fci .us-input--xl {
1096
- --us-input-height: 44px;
1135
+ --us-input-height: 40px;
1097
1136
  --us-input-padding-y: 0.75rem;
1098
- --us-input-padding-x: 1.125rem;
1099
- --us-input-font-size: 0.85rem;
1137
+ --us-input-padding-x: 1.25rem;
1138
+ --us-input-font-size: 1rem;
1139
+ --us-input-border-radius: 8px;
1140
+ --us-input-line-height: 1;
1141
+ }
1142
+ .us-theme-fci .us-input--xl .us-icon:not(.us-button .us-icon) {
1143
+ --us-icon-font-size-default: 1.25rem;
1100
1144
  }
1101
1145
  .us-theme-fci .us-input--filled > .us-outline {
1102
1146
  --us-outline-border-width: 1px;
1103
- --us-outline-focus-border-width: 1px;
1147
+ }
1148
+ .us-theme-fci .us-input--filled > .us-glow {
1149
+ --us-glow-opacity: 0;
1150
+ --us-glow-focus-border-width: 4px;
1151
+ --us-glow-focus-opacity: 0.2;
1104
1152
  }
1105
1153
  .us-theme-fci .us-input--outlined > .us-overlay {
1106
1154
  --us-overlay-color: inherit;
@@ -1108,11 +1156,19 @@ html {
1108
1156
  }
1109
1157
  .us-theme-fci .us-input--outlined > .us-outline {
1110
1158
  --us-outline-border-width: 1px;
1111
- --us-outline-focus-border-width: 1px;
1159
+ }
1160
+ .us-theme-fci .us-input--outlined > .us-glow {
1161
+ --us-glow-opacity: 0;
1162
+ --us-glow-focus-border-width: 4px;
1163
+ --us-glow-focus-opacity: 0.2;
1112
1164
  }
1113
1165
  .us-theme-fci .us-input--flat > .us-outline {
1114
1166
  --us-outline-border-width: 1px;
1115
- --us-outline-focus-border-width: 1px;
1167
+ }
1168
+ .us-theme-fci .us-input--flat > .us-glow {
1169
+ --us-glow-opacity: 0;
1170
+ --us-glow-focus-border-width: 4px;
1171
+ --us-glow-focus-opacity: 0.2;
1116
1172
  }
1117
1173
  .us-theme-fci .us-input--text {
1118
1174
  --us-input-padding-x: 0;
@@ -1120,7 +1176,11 @@ html {
1120
1176
  .us-theme-fci .us-input--text > .us-outline {
1121
1177
  --us-outline-border-width: 1px;
1122
1178
  }
1179
+ .us-theme-fci .us-input--text > .us-glow {
1180
+ --us-glow-opacity: 0;
1181
+ }
1123
1182
  .us-theme-fci .us-input--filled {
1183
+ --us-input-color: rgba(0, 0, 0, 0.87);
1124
1184
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1125
1185
  }
1126
1186
  .us-theme-fci .us-input--filled > .us-overlay {
@@ -1134,21 +1194,39 @@ html {
1134
1194
  .us-theme-fci .us-input--filled.us-input--primary > .us-outline {
1135
1195
  --us-outline-focus-border-color: var(--us-primary-color);
1136
1196
  }
1197
+ .us-theme-fci .us-input--filled.us-input--primary > .us-glow {
1198
+ --us-glow-focus-border-color: var(--us-primary-color);
1199
+ }
1137
1200
  .us-theme-fci .us-input--filled.us-input--secondary > .us-outline {
1138
1201
  --us-outline-focus-border-color: var(--us-secondary-color);
1139
1202
  }
1203
+ .us-theme-fci .us-input--filled.us-input--secondary > .us-glow {
1204
+ --us-glow-focus-border-color: var(--us-secondary-color);
1205
+ }
1140
1206
  .us-theme-fci .us-input--filled.us-input--success > .us-outline {
1141
1207
  --us-outline-focus-border-color: var(--us-success-color);
1142
1208
  }
1209
+ .us-theme-fci .us-input--filled.us-input--success > .us-glow {
1210
+ --us-glow-focus-border-color: var(--us-success-color);
1211
+ }
1143
1212
  .us-theme-fci .us-input--filled.us-input--info > .us-outline {
1144
1213
  --us-outline-focus-border-color: var(--us-info-color);
1145
1214
  }
1215
+ .us-theme-fci .us-input--filled.us-input--info > .us-glow {
1216
+ --us-glow-focus-border-color: var(--us-info-color);
1217
+ }
1146
1218
  .us-theme-fci .us-input--filled.us-input--warning > .us-outline {
1147
1219
  --us-outline-focus-border-color: var(--us-warning-color);
1148
1220
  }
1221
+ .us-theme-fci .us-input--filled.us-input--warning > .us-glow {
1222
+ --us-glow-focus-border-color: var(--us-warning-color);
1223
+ }
1149
1224
  .us-theme-fci .us-input--filled.us-input--danger > .us-outline {
1150
1225
  --us-outline-focus-border-color: var(--us-danger-color);
1151
1226
  }
1227
+ .us-theme-fci .us-input--filled.us-input--danger > .us-glow {
1228
+ --us-glow-focus-border-color: var(--us-danger-color);
1229
+ }
1152
1230
  .us-theme-fci .us-input--filled.us-input--light > .us-overlay {
1153
1231
  --us-overlay-color: #fff;
1154
1232
  --us-overlay-opacity: 0.8;
@@ -1161,6 +1239,7 @@ html {
1161
1239
  --us-outline-focus-opacity: 1;
1162
1240
  }
1163
1241
  .us-theme-fci .us-input--outlined {
1242
+ --us-input-color: rgba(0, 0, 0, 0.87);
1164
1243
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1165
1244
  }
1166
1245
  .us-theme-fci .us-input--outlined > .us-overlay {
@@ -1169,28 +1248,46 @@ html {
1169
1248
  }
1170
1249
  .us-theme-fci .us-input--outlined > .us-outline {
1171
1250
  --us-outline-border-color: currentColor;
1172
- --us-outline-opacity: 0.12;
1173
- --us-outline-hover-opacity: 0.24;
1251
+ --us-outline-opacity: 0.23;
1252
+ --us-outline-hover-opacity: 0.5;
1174
1253
  --us-outline-focus-opacity: 1;
1175
1254
  }
1176
1255
  .us-theme-fci .us-input--outlined.us-input--primary > .us-outline {
1177
1256
  --us-outline-focus-border-color: var(--us-primary-color);
1178
1257
  }
1258
+ .us-theme-fci .us-input--outlined.us-input--primary > .us-glow {
1259
+ --us-glow-focus-border-color: var(--us-primary-color);
1260
+ }
1179
1261
  .us-theme-fci .us-input--outlined.us-input--secondary > .us-outline {
1180
1262
  --us-outline-focus-border-color: var(--us-secondary-color);
1181
1263
  }
1264
+ .us-theme-fci .us-input--outlined.us-input--secondary > .us-glow {
1265
+ --us-glow-focus-border-color: var(--us-secondary-color);
1266
+ }
1182
1267
  .us-theme-fci .us-input--outlined.us-input--success > .us-outline {
1183
1268
  --us-outline-focus-border-color: var(--us-success-color);
1184
1269
  }
1270
+ .us-theme-fci .us-input--outlined.us-input--success > .us-glow {
1271
+ --us-glow-focus-border-color: var(--us-success-color);
1272
+ }
1185
1273
  .us-theme-fci .us-input--outlined.us-input--info > .us-outline {
1186
1274
  --us-outline-focus-border-color: var(--us-info-color);
1187
1275
  }
1276
+ .us-theme-fci .us-input--outlined.us-input--info > .us-glow {
1277
+ --us-glow-focus-border-color: var(--us-info-color);
1278
+ }
1188
1279
  .us-theme-fci .us-input--outlined.us-input--warning > .us-outline {
1189
1280
  --us-outline-focus-border-color: var(--us-warning-color);
1190
1281
  }
1282
+ .us-theme-fci .us-input--outlined.us-input--warning > .us-glow {
1283
+ --us-glow-focus-border-color: var(--us-warning-color);
1284
+ }
1191
1285
  .us-theme-fci .us-input--outlined.us-input--danger > .us-outline {
1192
1286
  --us-outline-focus-border-color: var(--us-danger-color);
1193
1287
  }
1288
+ .us-theme-fci .us-input--outlined.us-input--danger > .us-glow {
1289
+ --us-glow-focus-border-color: var(--us-danger-color);
1290
+ }
1194
1291
  .us-theme-fci .us-input--outlined.us-input--light {
1195
1292
  --us-input-color: #fff;
1196
1293
  --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -1207,6 +1304,7 @@ html {
1207
1304
  --us-outline-focus-opacity: 1;
1208
1305
  }
1209
1306
  .us-theme-fci .us-input--flat {
1307
+ --us-input-color: rgba(0, 0, 0, 0.87);
1210
1308
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1211
1309
  }
1212
1310
  .us-theme-fci .us-input--flat > .us-overlay {
@@ -1221,21 +1319,39 @@ html {
1221
1319
  .us-theme-fci .us-input--flat.us-input--primary > .us-outline {
1222
1320
  --us-outline-focus-border-color: var(--us-primary-color);
1223
1321
  }
1322
+ .us-theme-fci .us-input--flat.us-input--primary > .us-glow {
1323
+ --us-glow-focus-border-color: var(--us-primary-color);
1324
+ }
1224
1325
  .us-theme-fci .us-input--flat.us-input--secondary > .us-outline {
1225
1326
  --us-outline-focus-border-color: var(--us-secondary-color);
1226
1327
  }
1328
+ .us-theme-fci .us-input--flat.us-input--secondary > .us-glow {
1329
+ --us-glow-focus-border-color: var(--us-secondary-color);
1330
+ }
1227
1331
  .us-theme-fci .us-input--flat.us-input--success > .us-outline {
1228
1332
  --us-outline-focus-border-color: var(--us-success-color);
1229
1333
  }
1334
+ .us-theme-fci .us-input--flat.us-input--success > .us-glow {
1335
+ --us-glow-focus-border-color: var(--us-success-color);
1336
+ }
1230
1337
  .us-theme-fci .us-input--flat.us-input--info > .us-outline {
1231
1338
  --us-outline-focus-border-color: var(--us-info-color);
1232
1339
  }
1340
+ .us-theme-fci .us-input--flat.us-input--info > .us-glow {
1341
+ --us-glow-focus-border-color: var(--us-info-color);
1342
+ }
1233
1343
  .us-theme-fci .us-input--flat.us-input--warning > .us-outline {
1234
1344
  --us-outline-focus-border-color: var(--us-warning-color);
1235
1345
  }
1346
+ .us-theme-fci .us-input--flat.us-input--warning > .us-glow {
1347
+ --us-glow-focus-border-color: var(--us-warning-color);
1348
+ }
1236
1349
  .us-theme-fci .us-input--flat.us-input--danger > .us-outline {
1237
1350
  --us-outline-focus-border-color: var(--us-danger-color);
1238
1351
  }
1352
+ .us-theme-fci .us-input--flat.us-input--danger > .us-glow {
1353
+ --us-glow-focus-border-color: var(--us-danger-color);
1354
+ }
1239
1355
  .us-theme-fci .us-input--flat.us-input--light {
1240
1356
  --us-input-color: #fff;
1241
1357
  --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -1272,97 +1388,6 @@ html {
1272
1388
  --us-outline-border-color: transparent;
1273
1389
  }
1274
1390
 
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
1391
  .us-theme-fci .us-radio-group--xs {
1367
1392
  --us-radio-group-gap: 0.2rem;
1368
1393
  }
@@ -1610,17 +1635,23 @@ html {
1610
1635
  --us-list-item-subtitle-font-size: 11px;
1611
1636
  --us-list-item-title-line-height: 14px;
1612
1637
  }
1638
+ .us-theme-fci .us-list--sm .us-list-item .us-icon {
1639
+ --us-icon-font-size: 18px;
1640
+ }
1613
1641
  .us-theme-fci .us-list--md .us-list-item {
1614
1642
  --us-list-item-min-height: 2.25rem;
1615
1643
  --us-list-item-padding-y: 0.375rem;
1616
1644
  --us-list-item-padding-x: 0.875rem;
1617
1645
  --us-list-item-padding-level: 1.25rem;
1618
- --us-list-item-gap: 1rem;
1646
+ --us-list-item-gap: 0.5rem;
1619
1647
  --us-list-item-title-font-size: 0.8125rem;
1620
1648
  --us-list-item-title-line-height: 20px;
1621
1649
  --us-list-item-subtitle-font-size: 0.75rem;
1622
1650
  --us-list-item-subtitle-line-height: 16px;
1623
1651
  }
1652
+ .us-theme-fci .us-list--md .us-list-item .us-icon {
1653
+ --us-icon-font-size: 20px;
1654
+ }
1624
1655
  .us-theme-fci .us-list--lg .us-list-item {
1625
1656
  --us-list-item-min-height: 2.75rem;
1626
1657
  --us-list-item-padding-y: 0.625rem;
@@ -1633,6 +1664,9 @@ html {
1633
1664
  --us-list-item-subtitle-font-size: 0.8125rem;
1634
1665
  --us-list-item-subtitle-line-height: 18px;
1635
1666
  }
1667
+ .us-theme-fci .us-list--lg .us-list-item .us-icon {
1668
+ --us-icon-font-size: 22px;
1669
+ }
1636
1670
 
1637
1671
  .us-theme-fci .us-menu {
1638
1672
  --us-menu-padding-y: 0;
@@ -1687,6 +1721,31 @@ html {
1687
1721
  --us-_active-overlay-opacity: 0;
1688
1722
  }
1689
1723
 
1724
+ .us-theme-fci .us-tabs--xs {
1725
+ --us-tab-height: 28px;
1726
+ --us-tab-padding-x: 12px;
1727
+ --us-tab-font-size: 12px;
1728
+ }
1729
+ .us-theme-fci .us-tabs--sm {
1730
+ --us-tab-height: 32px;
1731
+ --us-tab-font-size: 14px;
1732
+ --us-tab-padding-x: 13px;
1733
+ }
1734
+ .us-theme-fci .us-tabs--md {
1735
+ --us-tab-height: 36px;
1736
+ --us-tab-padding-x: 16px;
1737
+ --us-tab-font-size: 14px;
1738
+ }
1739
+ .us-theme-fci .us-tabs--lg {
1740
+ --us-tab-height: 40px;
1741
+ --us-tab-padding-x: 18px;
1742
+ --us-tab-font-size: 16px;
1743
+ }
1744
+ .us-theme-fci .us-tabs--xl {
1745
+ --us-tab-height: 44px;
1746
+ --us-tab-padding-x: 22px;
1747
+ --us-tab-font-size: 18px;
1748
+ }
1690
1749
  .us-theme-fci .us-tabs--underlined {
1691
1750
  --us-tab-indicator-color: var(--us-primary-action-color);
1692
1751
  --us-tab-indicator-height: 3px;
@@ -1783,8 +1842,6 @@ html {
1783
1842
  .us-theme-fci .us-tab {
1784
1843
  --us-tab-color: var(--us-secondary-action-color);
1785
1844
  --us-tab-padding-y: 0px;
1786
- --us-tab-padding-x: 16px;
1787
- --us-tab-font-size: 0.8125rem;
1788
1845
  --us-tab-font-weight: 500;
1789
1846
  --us-tab-closable-color: var(--us-secondary-action-color);
1790
1847
  }
@@ -1800,7 +1857,7 @@ html {
1800
1857
  --us-card-subtitle-font-weight: 400;
1801
1858
  --us-card-header-title-font-weight: 500;
1802
1859
  --us-card-header-title-color: var(--us-title-color);
1803
- --us-card-header-subtitle-font-weight: 400;
1860
+ --us-card-header-subtitle-font-weight: 500;
1804
1861
  --us-card-header-subtitle-color: var(--us-subtitle-color);
1805
1862
  --us-card-body-color: var(--us-body-color);
1806
1863
  }
@@ -1830,11 +1887,9 @@ html {
1830
1887
  --us-card-header-min-height: 2.5rem;
1831
1888
  --us-card-header-gap: 0.5rem;
1832
1889
  --us-card-header-content-gap: 0.25rem;
1833
- --us-card-header-title-font-size: 11px;
1834
- --us-card-header-title-font-weight: 500;
1890
+ --us-card-header-title-font-size: 12px;
1835
1891
  --us-card-header-title-line-height: 14px;
1836
1892
  --us-card-header-subtitle-font-size: 10px;
1837
- --us-card-header-subtitle-font-weight: 500;
1838
1893
  --us-card-header-subtitle-line-height: 14px;
1839
1894
  --us-card-body-padding-y: 0.375rem;
1840
1895
  --us-card-body-padding-x: 0.75rem;
@@ -1856,11 +1911,9 @@ html {
1856
1911
  --us-card-header-min-height: 2.75rem;
1857
1912
  --us-card-header-gap: 0.75rem;
1858
1913
  --us-card-header-content-gap: 0.5rem;
1859
- --us-card-header-title-font-size: 12px;
1860
- --us-card-header-title-font-weight: 500;
1914
+ --us-card-header-title-font-size: 13px;
1861
1915
  --us-card-header-title-line-height: 16px;
1862
1916
  --us-card-header-subtitle-font-size: 11px;
1863
- --us-card-header-subtitle-font-weight: 500;
1864
1917
  --us-card-header-subtitle-line-height: 16px;
1865
1918
  --us-card-body-padding-y: 0.375rem;
1866
1919
  --us-card-body-padding-x: 1rem;
@@ -1882,7 +1935,7 @@ html {
1882
1935
  --us-card-header-padding-x: 1rem;
1883
1936
  --us-card-header-gap: 0.75rem;
1884
1937
  --us-card-header-content-gap: 0.5rem;
1885
- --us-card-header-title-font-size: 13px;
1938
+ --us-card-header-title-font-size: 15px;
1886
1939
  --us-card-header-title-line-height: 16px;
1887
1940
  --us-card-header-subtitle-font-size: 12px;
1888
1941
  --us-card-header-subtitle-line-height: 16px;
@@ -1906,7 +1959,7 @@ html {
1906
1959
  --us-card-header-min-height: 3.5rem;
1907
1960
  --us-card-header-gap: 1rem;
1908
1961
  --us-card-header-content-gap: 0.75rem;
1909
- --us-card-header-title-font-size: 14px;
1962
+ --us-card-header-title-font-size: 16px;
1910
1963
  --us-card-header-title-line-height: 18px;
1911
1964
  --us-card-header-subtitle-font-size: 13px;
1912
1965
  --us-card-header-subtitle-line-height: 18px;
@@ -1928,7 +1981,7 @@ html {
1928
1981
  --us-card-header-min-height: 4rem;
1929
1982
  --us-card-header-gap: 1rem;
1930
1983
  --us-card-header-content-gap: 0.875rem;
1931
- --us-card-header-title-font-size: 16px;
1984
+ --us-card-header-title-font-size: 18px;
1932
1985
  --us-card-header-title-line-height: 20px;
1933
1986
  --us-card-header-subtitle-font-size: 15px;
1934
1987
  --us-card-header-subtitle-line-height: 20px;
@@ -1950,7 +2003,7 @@ html {
1950
2003
  --us-card-header-min-height: 4.5rem;
1951
2004
  --us-card-header-gap: 1rem;
1952
2005
  --us-card-header-content-gap: 1rem;
1953
- --us-card-header-title-font-size: 18px;
2006
+ --us-card-header-title-font-size: 20px;
1954
2007
  --us-card-header-title-line-height: 24px;
1955
2008
  --us-card-header-subtitle-font-size: 16px;
1956
2009
  --us-card-header-subtitle-line-height: 24px;
@@ -2266,6 +2319,100 @@ html {
2266
2319
  --us-surface-color: var(--us-danger-color);
2267
2320
  }
2268
2321
 
2322
+ .us-theme-fci .us-checkbox-group--xs {
2323
+ --us-checkbox-group-gap: 0.2rem;
2324
+ }
2325
+ .us-theme-fci .us-checkbox-group--sm {
2326
+ --us-checkbox-group-gap: 0.375rem;
2327
+ }
2328
+ .us-theme-fci .us-checkbox-group--md {
2329
+ --us-checkbox-group-gap: 0.5rem;
2330
+ }
2331
+ .us-theme-fci .us-checkbox-group--lg {
2332
+ --us-checkbox-group-gap: 0.75rem;
2333
+ }
2334
+ .us-theme-fci .us-checkbox-group--xl {
2335
+ --us-checkbox-group-gap: 0.875rem;
2336
+ }
2337
+ .us-theme-fci .us-checkbox {
2338
+ --us-checkbox-control-border-width: 1px;
2339
+ --us-checkbox-control-border-style: solid;
2340
+ --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
2341
+ --us-checkbox-control-color: var(--us-white-color);
2342
+ --us-_checked-checkbox-control-border-color: var(--us-primary-color);
2343
+ --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(var(--us-primary-rgb) / 40%);
2344
+ --us-checkbox-tap-background: var(--us-primary-color);
2345
+ }
2346
+ .us-theme-fci .us-checkbox .us-icon {
2347
+ --us-icon-color: inherit !important;
2348
+ }
2349
+ .us-theme-fci .us-checkbox--xs {
2350
+ --us-checkbox-gap: 0.375rem;
2351
+ --us-checkbox-control-border-radius: 4px;
2352
+ --us-checkbox-control-width: 14px;
2353
+ --us-checkbox-control-height: 14px;
2354
+ --us-checkbox-label-font-size: 0.75rem;
2355
+ }
2356
+ .us-theme-fci .us-checkbox--xs .us-icon {
2357
+ --us-icon-font-size: 0.5rem;
2358
+ }
2359
+ .us-theme-fci .us-checkbox--sm {
2360
+ --us-checkbox-gap: 0.375rem;
2361
+ --us-checkbox-control-border-radius: 4px;
2362
+ --us-checkbox-control-width: 16px;
2363
+ --us-checkbox-control-height: 16px;
2364
+ --us-checkbox-label-font-size: 0.75rem;
2365
+ }
2366
+ .us-theme-fci .us-checkbox--sm .us-icon {
2367
+ --us-icon-font-size: 0.5rem;
2368
+ }
2369
+ .us-theme-fci .us-checkbox--md {
2370
+ --us-checkbox-gap: 0.5rem;
2371
+ --us-checkbox-control-border-radius: 4px;
2372
+ --us-checkbox-control-width: 18px;
2373
+ --us-checkbox-control-height: 18px;
2374
+ --us-checkbox-label-font-size: 0.875rem;
2375
+ }
2376
+ .us-theme-fci .us-checkbox--md .us-icon {
2377
+ --us-icon-font-size: 0.625rem;
2378
+ }
2379
+ .us-theme-fci .us-checkbox--lg {
2380
+ --us-checkbox-gap: 0.5rem;
2381
+ --us-checkbox-control-border-radius: 6px;
2382
+ --us-checkbox-control-width: 20px;
2383
+ --us-checkbox-control-height: 20px;
2384
+ --us-checkbox-label-font-size: 0.875rem;
2385
+ }
2386
+ .us-theme-fci .us-checkbox--lg .us-icon {
2387
+ --us-icon-font-size: 0.75rem;
2388
+ }
2389
+ .us-theme-fci .us-checkbox--xl {
2390
+ --us-checkbox-gap: 0.5rem;
2391
+ --us-checkbox-control-border-radius: 6px;
2392
+ --us-checkbox-control-width: 22px;
2393
+ --us-checkbox-control-height: 22px;
2394
+ --us-checkbox-label-font-size: 1rem;
2395
+ }
2396
+ .us-theme-fci .us-checkbox--xl .us-icon {
2397
+ --us-icon-font-size: 0.875rem;
2398
+ }
2399
+ .us-theme-fci .us-checkbox--light {
2400
+ --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
2401
+ --us-checkbox-tap-background: rgba(0, 0, 0, 0.8);
2402
+ --us-checkbox-control-color: var(--us-white-color);
2403
+ --us-_checked-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
2404
+ --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(0 0 0 / 15%);
2405
+ --us-checkbox-label-color: var(--us-black-color);
2406
+ }
2407
+ .us-theme-fci .us-checkbox--dark {
2408
+ --us-checkbox-control-border-color: rgba(255 255 255 / 30%);
2409
+ --us-checkbox-tap-background: rgba(255 255 255 / 30%);
2410
+ --us-checkbox-control-color: var(--us-white-color);
2411
+ --us-_checked-checkbox-control-border-color: rgba(255 255 255 / 30%);
2412
+ --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(255 255 255 / 15%);
2413
+ --us-checkbox-label-color: var(--us-white-color);
2414
+ }
2415
+
2269
2416
  .light-scroll::-webkit-scrollbar,
2270
2417
  .us-viewer .k-overflow-auto::-webkit-scrollbar {
2271
2418
  width: 6px !important;