@unifiedsoftware/styles 2.0.0-beta.20 → 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 +182 -47
- package/css/fci.min.css +1 -1
- package/css/styles.css +47 -6
- package/css/styles.min.css +1 -1
- package/package.json +1 -1
- package/scss/_utilities.scss +45 -0
- package/scss/components/_button.scss +2 -0
- package/scss/components/_input.scss +19 -7
- package/scss/components/_tabs.scss +1 -1
- package/scss/themes/fci/components/_accordion.scss +21 -8
- package/scss/themes/fci/components/_button.scss +46 -9
- package/scss/themes/fci/components/_card.scss +7 -11
- package/scss/themes/fci/components/_icon.scss +2 -1
- package/scss/themes/fci/components/_input.scss +75 -16
- package/scss/themes/fci/components/_tabs.scss +32 -2
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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.
|
|
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:
|
|
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:
|
|
750
|
+
--us-outline-border-width: 0px;
|
|
741
751
|
--us-outline-border-color: var(--us-secondary-color);
|
|
742
|
-
--us-outline-opacity:
|
|
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:
|
|
754
|
-
--us-outline-border-color:
|
|
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:
|
|
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:
|
|
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:
|
|
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.
|
|
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:
|
|
1121
|
+
--us-icon-font-size-default: 1rem;
|
|
1088
1122
|
}
|
|
1089
1123
|
.us-theme-fci .us-input--lg {
|
|
1090
|
-
--us-input-height:
|
|
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.
|
|
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:
|
|
1135
|
+
--us-input-height: 40px;
|
|
1097
1136
|
--us-input-padding-y: 0.75rem;
|
|
1098
|
-
--us-input-padding-x: 1.
|
|
1099
|
-
--us-input-font-size:
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
1173
|
-
--us-outline-hover-opacity: 0.
|
|
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);
|
|
@@ -1605,6 +1721,31 @@ html {
|
|
|
1605
1721
|
--us-_active-overlay-opacity: 0;
|
|
1606
1722
|
}
|
|
1607
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
|
+
}
|
|
1608
1749
|
.us-theme-fci .us-tabs--underlined {
|
|
1609
1750
|
--us-tab-indicator-color: var(--us-primary-action-color);
|
|
1610
1751
|
--us-tab-indicator-height: 3px;
|
|
@@ -1701,8 +1842,6 @@ html {
|
|
|
1701
1842
|
.us-theme-fci .us-tab {
|
|
1702
1843
|
--us-tab-color: var(--us-secondary-action-color);
|
|
1703
1844
|
--us-tab-padding-y: 0px;
|
|
1704
|
-
--us-tab-padding-x: 16px;
|
|
1705
|
-
--us-tab-font-size: 0.8125rem;
|
|
1706
1845
|
--us-tab-font-weight: 500;
|
|
1707
1846
|
--us-tab-closable-color: var(--us-secondary-action-color);
|
|
1708
1847
|
}
|
|
@@ -1718,7 +1857,7 @@ html {
|
|
|
1718
1857
|
--us-card-subtitle-font-weight: 400;
|
|
1719
1858
|
--us-card-header-title-font-weight: 500;
|
|
1720
1859
|
--us-card-header-title-color: var(--us-title-color);
|
|
1721
|
-
--us-card-header-subtitle-font-weight:
|
|
1860
|
+
--us-card-header-subtitle-font-weight: 500;
|
|
1722
1861
|
--us-card-header-subtitle-color: var(--us-subtitle-color);
|
|
1723
1862
|
--us-card-body-color: var(--us-body-color);
|
|
1724
1863
|
}
|
|
@@ -1748,11 +1887,9 @@ html {
|
|
|
1748
1887
|
--us-card-header-min-height: 2.5rem;
|
|
1749
1888
|
--us-card-header-gap: 0.5rem;
|
|
1750
1889
|
--us-card-header-content-gap: 0.25rem;
|
|
1751
|
-
--us-card-header-title-font-size:
|
|
1752
|
-
--us-card-header-title-font-weight: 500;
|
|
1890
|
+
--us-card-header-title-font-size: 12px;
|
|
1753
1891
|
--us-card-header-title-line-height: 14px;
|
|
1754
1892
|
--us-card-header-subtitle-font-size: 10px;
|
|
1755
|
-
--us-card-header-subtitle-font-weight: 500;
|
|
1756
1893
|
--us-card-header-subtitle-line-height: 14px;
|
|
1757
1894
|
--us-card-body-padding-y: 0.375rem;
|
|
1758
1895
|
--us-card-body-padding-x: 0.75rem;
|
|
@@ -1774,11 +1911,9 @@ html {
|
|
|
1774
1911
|
--us-card-header-min-height: 2.75rem;
|
|
1775
1912
|
--us-card-header-gap: 0.75rem;
|
|
1776
1913
|
--us-card-header-content-gap: 0.5rem;
|
|
1777
|
-
--us-card-header-title-font-size:
|
|
1778
|
-
--us-card-header-title-font-weight: 500;
|
|
1914
|
+
--us-card-header-title-font-size: 13px;
|
|
1779
1915
|
--us-card-header-title-line-height: 16px;
|
|
1780
1916
|
--us-card-header-subtitle-font-size: 11px;
|
|
1781
|
-
--us-card-header-subtitle-font-weight: 500;
|
|
1782
1917
|
--us-card-header-subtitle-line-height: 16px;
|
|
1783
1918
|
--us-card-body-padding-y: 0.375rem;
|
|
1784
1919
|
--us-card-body-padding-x: 1rem;
|
|
@@ -1800,7 +1935,7 @@ html {
|
|
|
1800
1935
|
--us-card-header-padding-x: 1rem;
|
|
1801
1936
|
--us-card-header-gap: 0.75rem;
|
|
1802
1937
|
--us-card-header-content-gap: 0.5rem;
|
|
1803
|
-
--us-card-header-title-font-size:
|
|
1938
|
+
--us-card-header-title-font-size: 15px;
|
|
1804
1939
|
--us-card-header-title-line-height: 16px;
|
|
1805
1940
|
--us-card-header-subtitle-font-size: 12px;
|
|
1806
1941
|
--us-card-header-subtitle-line-height: 16px;
|
|
@@ -1824,7 +1959,7 @@ html {
|
|
|
1824
1959
|
--us-card-header-min-height: 3.5rem;
|
|
1825
1960
|
--us-card-header-gap: 1rem;
|
|
1826
1961
|
--us-card-header-content-gap: 0.75rem;
|
|
1827
|
-
--us-card-header-title-font-size:
|
|
1962
|
+
--us-card-header-title-font-size: 16px;
|
|
1828
1963
|
--us-card-header-title-line-height: 18px;
|
|
1829
1964
|
--us-card-header-subtitle-font-size: 13px;
|
|
1830
1965
|
--us-card-header-subtitle-line-height: 18px;
|
|
@@ -1846,7 +1981,7 @@ html {
|
|
|
1846
1981
|
--us-card-header-min-height: 4rem;
|
|
1847
1982
|
--us-card-header-gap: 1rem;
|
|
1848
1983
|
--us-card-header-content-gap: 0.875rem;
|
|
1849
|
-
--us-card-header-title-font-size:
|
|
1984
|
+
--us-card-header-title-font-size: 18px;
|
|
1850
1985
|
--us-card-header-title-line-height: 20px;
|
|
1851
1986
|
--us-card-header-subtitle-font-size: 15px;
|
|
1852
1987
|
--us-card-header-subtitle-line-height: 20px;
|
|
@@ -1868,7 +2003,7 @@ html {
|
|
|
1868
2003
|
--us-card-header-min-height: 4.5rem;
|
|
1869
2004
|
--us-card-header-gap: 1rem;
|
|
1870
2005
|
--us-card-header-content-gap: 1rem;
|
|
1871
|
-
--us-card-header-title-font-size:
|
|
2006
|
+
--us-card-header-title-font-size: 20px;
|
|
1872
2007
|
--us-card-header-title-line-height: 24px;
|
|
1873
2008
|
--us-card-header-subtitle-font-size: 16px;
|
|
1874
2009
|
--us-card-header-subtitle-line-height: 24px;
|