@unifiedsoftware/styles 2.0.0-beta.20 → 2.0.0-beta.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/css/fci.css +189 -113
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +47 -6
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +45 -0
  7. package/scss/components/_button.scss +2 -0
  8. package/scss/components/_input.scss +19 -7
  9. package/scss/components/_tabs.scss +1 -1
  10. package/scss/themes/fci/components/_accordion.scss +45 -33
  11. package/scss/themes/fci/components/_button.scss +39 -6
  12. package/scss/themes/fci/components/_card.scss +27 -59
  13. package/scss/themes/fci/components/_icon.scss +2 -1
  14. package/scss/themes/fci/components/_input.scss +69 -16
  15. package/scss/themes/fci/components/_tabs.scss +32 -2
package/scss/themes/fci/components/_button.scss CHANGED
@@ -17,7 +17,7 @@ html {
17
17
  --#{$prefix}button-divider-color: #fff;
18
18
 
19
19
  &--xs {
20
- --#{$prefix}button-height: 22px;
20
+ --#{$prefix}button-height: 24px;
21
21
  --#{$prefix}button-padding-y: 0;
22
22
  --#{$prefix}button-padding-x: 0.625rem;
23
23
  --#{$prefix}button-font-size: 0.75rem;
@@ -30,7 +30,7 @@ html {
30
30
  }
31
31
 
32
32
  &--sm {
33
- --#{$prefix}button-height: 26px;
33
+ --#{$prefix}button-height: 28px;
34
34
  --#{$prefix}button-padding-y: 0;
35
35
  --#{$prefix}button-padding-x: 0.75rem;
36
36
  --#{$prefix}button-font-size: 0.75rem;
@@ -43,10 +43,10 @@ html {
43
43
  }
44
44
 
45
45
  &--md {
46
- --#{$prefix}button-height: 30px;
46
+ --#{$prefix}button-height: 32px;
47
47
  --#{$prefix}button-padding-y: 0;
48
48
  --#{$prefix}button-padding-x: 0.875rem;
49
- --#{$prefix}button-font-size: 0.875rem;
49
+ --#{$prefix}button-font-size: 0.8125rem;
50
50
  --#{$prefix}button-border-radius: 6px;
51
51
  --#{$prefix}button-gap: 0.375rem;
52
52
 
@@ -56,7 +56,7 @@ html {
56
56
  }
57
57
 
58
58
  &--lg {
59
- --#{$prefix}button-height: 34px;
59
+ --#{$prefix}button-height: 36px;
60
60
  --#{$prefix}button-padding-y: 0;
61
61
  --#{$prefix}button-padding-x: 1rem;
62
62
  --#{$prefix}button-font-size: 0.875rem;
@@ -147,7 +147,8 @@ html {
147
147
 
148
148
  & > .#{$prefix}outline {
149
149
  --#{$prefix}outline-border-width: 1px;
150
- --#{$prefix}outline-border-color: transparent;
150
+ --#{$prefix}outline-border-color: currentColor;
151
+ --#{$prefix}outline-opacity: 0;
151
152
  }
152
153
  }
153
154
 
@@ -254,6 +255,15 @@ html {
254
255
  --#{$prefix}_focus-hover-overlay-opacity: 0.24;
255
256
  --#{$prefix}_focus-active-overlay-opacity: 0.32;
256
257
  }
258
+
259
+ // & > .#{$prefix}outline {
260
+ // box-shadow:
261
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
262
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
263
+ // rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset,
264
+ // rgba(0, 0, 0, 0.05) 0px 1px 2px 0px,
265
+ // rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
266
+ // }
257
267
  }
258
268
 
259
269
  .#{$prefix}button--bordered.#{$prefix}button--#{$color} {
@@ -304,4 +314,27 @@ html {
304
314
  }
305
315
  }
306
316
  }
317
+
318
+ // .#{$prefix}button--filled > .#{$prefix}outline {
319
+ // box-shadow:
320
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
321
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
322
+ // rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset,
323
+ // var(--#{$prefix}button-background) 0px 0px 0px 1px;
324
+ // }
325
+
326
+ // .#{$prefix}button--flat > .#{$prefix}outline {
327
+ // box-shadow:
328
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
329
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
330
+ // rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset,
331
+ // var(--#{$prefix}outline-border-color) 0px 0px 0px 1px;
332
+ // }
333
+
334
+ // .#{$prefix}button--outlined > .#{$prefix}outline {
335
+ // box-shadow:
336
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
337
+ // rgba(0, 0, 0, 0) 0px 0px 0px 0px,
338
+ // rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
339
+ // }
307
340
  }
package/scss/themes/fci/components/_card.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  --#{$prefix}card-header-title-font-weight: 500;
16
16
  --#{$prefix}card-header-title-color: var(--#{$prefix}title-color);
17
17
 
18
- --#{$prefix}card-header-subtitle-font-weight: 400;
18
+ --#{$prefix}card-header-subtitle-font-weight: 500;
19
19
  --#{$prefix}card-header-subtitle-color: var(--#{$prefix}subtitle-color);
20
20
 
21
21
  --#{$prefix}card-body-color: var(--#{$prefix}body-color);
@@ -48,26 +48,24 @@
48
48
  .#{$prefix}card--xs {
49
49
  --#{$prefix}card-header-padding-y: 0.375rem;
50
50
  --#{$prefix}card-header-padding-x: 0.75rem;
51
- --#{$prefix}card-header-min-height: 2.5rem;
51
+ --#{$prefix}card-header-min-height: 2.75rem;
52
52
  --#{$prefix}card-header-gap: 0.5rem;
53
53
  --#{$prefix}card-header-content-gap: 0.25rem;
54
54
 
55
- --#{$prefix}card-header-title-font-size: 11px;
56
- --#{$prefix}card-header-title-font-weight: 500;
55
+ --#{$prefix}card-header-title-font-size: 12px;
57
56
  --#{$prefix}card-header-title-line-height: 14px;
58
57
 
59
58
  --#{$prefix}card-header-subtitle-font-size: 10px;
60
- --#{$prefix}card-header-subtitle-font-weight: 500;
61
59
  --#{$prefix}card-header-subtitle-line-height: 14px;
62
60
 
63
- --#{$prefix}card-body-padding-y: 0.375rem;
61
+ --#{$prefix}card-body-padding-y: 0.75rem;
64
62
  --#{$prefix}card-body-padding-x: 0.75rem;
65
63
  --#{$prefix}card-body-font-size: 0.75rem;
66
64
  --#{$prefix}card-body-line-height: 18px;
67
65
 
68
66
  --#{$prefix}card-footer-padding-y: 0.375rem;
69
67
  --#{$prefix}card-footer-padding-x: 0.75rem;
70
- --#{$prefix}card-footer-min-height: 2.5rem;
68
+ --#{$prefix}card-footer-min-height: 2.75rem;
71
69
  --#{$prefix}card-footer-gap: 0.5rem;
72
70
  }
73
71
 
@@ -79,28 +77,26 @@
79
77
  --#{$prefix}card-title-padding-y: 0.875rem 0.375rem;
80
78
  --#{$prefix}card-title-font-size: 1.25rem;
81
79
 
82
- --#{$prefix}card-header-padding-y: 0.375rem;
80
+ --#{$prefix}card-header-padding-y: 0.5rem;
83
81
  --#{$prefix}card-header-padding-x: 1rem;
84
- --#{$prefix}card-header-min-height: 2.75rem;
82
+ --#{$prefix}card-header-min-height: 3rem;
85
83
  --#{$prefix}card-header-gap: 0.75rem;
86
84
  --#{$prefix}card-header-content-gap: 0.5rem;
87
85
 
88
- --#{$prefix}card-header-title-font-size: 12px;
89
- --#{$prefix}card-header-title-font-weight: 500;
86
+ --#{$prefix}card-header-title-font-size: 13px;
90
87
  --#{$prefix}card-header-title-line-height: 16px;
91
88
 
92
89
  --#{$prefix}card-header-subtitle-font-size: 11px;
93
- --#{$prefix}card-header-subtitle-font-weight: 500;
94
90
  --#{$prefix}card-header-subtitle-line-height: 16px;
95
91
 
96
- --#{$prefix}card-body-padding-y: 0.375rem;
92
+ --#{$prefix}card-body-padding-y: 1rem;
97
93
  --#{$prefix}card-body-padding-x: 1rem;
98
94
  --#{$prefix}card-body-font-size: 0.875rem;
99
95
  --#{$prefix}card-body-line-height: 20px;
100
96
 
101
- --#{$prefix}card-footer-padding-y: 0.375rem;
97
+ --#{$prefix}card-footer-padding-y: 0.5rem;
102
98
  --#{$prefix}card-footer-padding-x: 1rem;
103
- --#{$prefix}card-footer-min-height: 2.75rem;
99
+ --#{$prefix}card-footer-min-height: 3rem;
104
100
  --#{$prefix}card-footer-gap: 0.75rem;
105
101
  }
106
102
 
@@ -112,26 +108,26 @@
112
108
  --#{$prefix}card-title-padding-y: 1rem 0.5rem;
113
109
  --#{$prefix}card-title-font-size: 1.25rem;
114
110
 
115
- --#{$prefix}card-header-min-height: 3rem;
116
- --#{$prefix}card-header-padding-y: 0.5rem;
111
+ --#{$prefix}card-header-padding-y: 0.625rem;
117
112
  --#{$prefix}card-header-padding-x: 1rem;
113
+ --#{$prefix}card-header-min-height: 3.5rem;
118
114
  --#{$prefix}card-header-gap: 0.75rem;
119
115
  --#{$prefix}card-header-content-gap: 0.5rem;
120
116
 
121
- --#{$prefix}card-header-title-font-size: 13px;
117
+ --#{$prefix}card-header-title-font-size: 15px;
122
118
  --#{$prefix}card-header-title-line-height: 16px;
123
119
 
124
120
  --#{$prefix}card-header-subtitle-font-size: 12px;
125
121
  --#{$prefix}card-header-subtitle-line-height: 16px;
126
122
 
127
- --#{$prefix}card-body-padding-y: 0.5rem;
123
+ --#{$prefix}card-body-padding-y: 1rem;
128
124
  --#{$prefix}card-body-padding-x: 1rem;
129
125
  --#{$prefix}card-body-font-size: 0.875rem;
130
126
  --#{$prefix}card-body-line-height: 24px;
131
127
 
132
- --#{$prefix}card-footer-padding-y: 0.5rem;
128
+ --#{$prefix}card-footer-padding-y: 0.625rem;
133
129
  --#{$prefix}card-footer-padding-x: 1rem;
134
- --#{$prefix}card-footer-min-height: 3rem;
130
+ --#{$prefix}card-footer-min-height: 3.5rem;
135
131
  --#{$prefix}card-footer-gap: 1rem;
136
132
  }
137
133
 
@@ -143,26 +139,26 @@
143
139
  --#{$prefix}card-title-padding-y: 1.25rem 0.75rem;
144
140
  --#{$prefix}card-title-font-size: 1.5rem;
145
141
 
146
- --#{$prefix}card-header-padding-y: 0.625rem;
142
+ --#{$prefix}card-header-padding-y: 0.75rem;
147
143
  --#{$prefix}card-header-padding-x: 1.25rem;
148
- --#{$prefix}card-header-min-height: 3.5rem;
144
+ --#{$prefix}card-header-min-height: 4rem;
149
145
  --#{$prefix}card-header-gap: 1rem;
150
146
  --#{$prefix}card-header-content-gap: 0.75rem;
151
147
 
152
- --#{$prefix}card-header-title-font-size: 14px;
148
+ --#{$prefix}card-header-title-font-size: 16px;
153
149
  --#{$prefix}card-header-title-line-height: 18px;
154
150
 
155
151
  --#{$prefix}card-header-subtitle-font-size: 13px;
156
152
  --#{$prefix}card-header-subtitle-line-height: 18px;
157
153
 
158
- --#{$prefix}card-body-padding-y: 0.875rem;
154
+ --#{$prefix}card-body-padding-y: 1.25rem;
159
155
  --#{$prefix}card-body-padding-x: 1.25rem;
160
156
  --#{$prefix}card-body-font-size: 1rem;
161
157
  --#{$prefix}card-body-line-height: 24px;
162
158
 
163
- --#{$prefix}card-footer-padding-y: 0.625rem;
159
+ --#{$prefix}card-footer-padding-y: 0.75rem;
164
160
  --#{$prefix}card-footer-padding-x: 1.25rem;
165
- --#{$prefix}card-footer-min-height: 3.5rem;
161
+ --#{$prefix}card-footer-min-height: 4rem;
166
162
  --#{$prefix}card-footer-gap: 1rem;
167
163
  }
168
164
 
@@ -173,56 +169,28 @@
173
169
  .#{$prefix}card--xl {
174
170
  --#{$prefix}card-header-padding-y: 0.75rem;
175
171
  --#{$prefix}card-header-padding-x: 1.5rem;
176
- --#{$prefix}card-header-min-height: 4rem;
172
+ --#{$prefix}card-header-min-height: 4.5rem;
177
173
  --#{$prefix}card-header-gap: 1rem;
178
174
  --#{$prefix}card-header-content-gap: 0.875rem;
179
175
 
180
- --#{$prefix}card-header-title-font-size: 16px;
176
+ --#{$prefix}card-header-title-font-size: 18px;
181
177
  --#{$prefix}card-header-title-line-height: 20px;
182
178
 
183
179
  --#{$prefix}card-header-subtitle-font-size: 15px;
184
180
  --#{$prefix}card-header-subtitle-line-height: 20px;
185
181
 
186
- --#{$prefix}card-body-padding-y: 0.75rem;
182
+ --#{$prefix}card-body-padding-y: 1.5rem;
187
183
  --#{$prefix}card-body-padding-x: 1.5rem;
188
184
  --#{$prefix}card-body-font-size: 1.125rem;
189
185
  --#{$prefix}card-body-line-height: 28px;
190
186
 
191
187
  --#{$prefix}card-footer-padding-y: 0.75rem;
192
188
  --#{$prefix}card-footer-padding-x: 1.5rem;
193
- --#{$prefix}card-footer-min-height: 4rem;
189
+ --#{$prefix}card-footer-min-height: 4.5rem;
194
190
  --#{$prefix}card-footer-gap: 1rem;
195
191
  }
196
192
 
197
193
  .#{$prefix}card--xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
198
194
  --#{$prefix}icon-font-size-default: 36px;
199
195
  }
200
-
201
- .#{$prefix}card--2xl {
202
- --#{$prefix}card-header-padding-y: 0.75rem;
203
- --#{$prefix}card-header-padding-x: 1.5rem;
204
- --#{$prefix}card-header-min-height: 4.5rem;
205
- --#{$prefix}card-header-gap: 1rem;
206
- --#{$prefix}card-header-content-gap: 1rem;
207
-
208
- --#{$prefix}card-header-title-font-size: 18px;
209
- --#{$prefix}card-header-title-line-height: 24px;
210
-
211
- --#{$prefix}card-header-subtitle-font-size: 16px;
212
- --#{$prefix}card-header-subtitle-line-height: 24px;
213
-
214
- --#{$prefix}card-body-padding-y: 0.75rem;
215
- --#{$prefix}card-body-padding-x: 1.5rem;
216
- --#{$prefix}card-body-font-size: 1.25rem;
217
- --#{$prefix}card-body-line-height: 36px;
218
-
219
- --#{$prefix}card-footer-padding-y: 0.75rem;
220
- --#{$prefix}card-footer-padding-x: 1.5rem;
221
- --#{$prefix}card-footer-min-height: 4.5rem;
222
- --#{$prefix}card-footer-gap: 1rem;
223
- }
224
-
225
- .#{$prefix}card--2xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
226
- --#{$prefix}icon-font-size-default: 40px;
227
- }
228
196
  }
package/scss/themes/fci/components/_icon.scss CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  $colors-map: (
4
4
  primary: var(--#{$prefix}primary-color),
5
- secondary: var(--#{$prefix}secondary-color),
5
+ //secondary: var(--#{$prefix}secondary-color),
6
+ secondary: rgba(0, 0, 0, 0.54),
6
7
  success: var(--#{$prefix}success-color),
7
8
  info: var(--#{$prefix}info-color),
8
9
  warning: var(--#{$prefix}warning-color),
package/scss/themes/fci/components/_input.scss CHANGED
@@ -5,52 +5,81 @@ $colors-map: (primary, secondary, success, info, warning, danger);
5
5
  .#{$prefix}theme-fci {
6
6
  .#{$prefix}input {
7
7
  --#{$prefix}input-font-family: var(--#{$prefix}font-sans);
8
- --#{$prefix}input-border-radius: 6px;
9
8
 
10
9
  &--xs {
11
- --#{$prefix}input-height: 22px;
10
+ --#{$prefix}input-height: 24px;
12
11
  --#{$prefix}input-padding-y: 0.282rem;
13
12
  --#{$prefix}input-padding-x: 0.625rem;
14
13
  --#{$prefix}input-font-size: 0.75rem;
14
+ --#{$prefix}input-border-radius: 6px;
15
+ --#{$prefix}input-line-height: 1;
16
+ }
17
+
18
+ &--xs .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
19
+ --#{$prefix}icon-font-size-default: 0.75rem;
15
20
  }
16
21
 
17
22
  &--sm {
18
- --#{$prefix}input-height: 24px;
23
+ --#{$prefix}input-height: 28px;
19
24
  --#{$prefix}input-padding-y: 0.407rem;
20
25
  --#{$prefix}input-padding-x: 0.75rem;
21
26
  --#{$prefix}input-font-size: 0.75rem;
27
+ --#{$prefix}input-border-radius: 6px;
28
+ --#{$prefix}input-line-height: 1;
29
+ }
30
+
31
+ &--sm .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
32
+ --#{$prefix}icon-font-size-default: 0.875rem;
22
33
  }
23
34
 
24
35
  &--md {
25
- --#{$prefix}input-height: 30px;
36
+ --#{$prefix}input-height: 32px;
26
37
  --#{$prefix}input-padding-y: 0.532rem;
27
38
  --#{$prefix}input-padding-x: 0.875rem;
28
- --#{$prefix}input-font-size: 0.75rem;
39
+ --#{$prefix}input-font-size: 0.8125rem;
40
+ --#{$prefix}input-border-radius: 6px;
41
+ --#{$prefix}input-line-height: 1;
29
42
  --#{$prefix}input-content-gap: 0.25rem;
30
43
  }
31
44
 
32
45
  &--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
33
- --#{$prefix}icon-font-size-default: 16px;
46
+ --#{$prefix}icon-font-size-default: 1rem;
34
47
  }
35
48
 
36
49
  &--lg {
37
- --#{$prefix}input-height: 34px;
50
+ --#{$prefix}input-height: 36px;
38
51
  --#{$prefix}input-padding-y: 0.625rem;
39
52
  --#{$prefix}input-padding-x: 1rem;
40
- --#{$prefix}input-font-size: 0.85rem;
53
+ --#{$prefix}input-font-size: 0.875rem;
54
+ --#{$prefix}input-border-radius: 8px;
55
+ --#{$prefix}input-line-height: 1;
56
+ }
57
+
58
+ &--lg .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
59
+ --#{$prefix}icon-font-size-default: 1.125rem;
41
60
  }
42
61
 
43
62
  &--xl {
44
- --#{$prefix}input-height: 44px;
63
+ --#{$prefix}input-height: 40px;
45
64
  --#{$prefix}input-padding-y: 0.75rem;
46
- --#{$prefix}input-padding-x: 1.125rem;
47
- --#{$prefix}input-font-size: 0.85rem;
65
+ --#{$prefix}input-padding-x: 1.25rem;
66
+ --#{$prefix}input-font-size: 1rem;
67
+ --#{$prefix}input-border-radius: 8px;
68
+ --#{$prefix}input-line-height: 1;
69
+ }
70
+
71
+ &--xl .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
72
+ --#{$prefix}icon-font-size-default: 1.25rem;
48
73
  }
49
74
 
50
75
  &--filled {
51
76
  & > .#{$prefix}outline {
52
77
  --#{$prefix}outline-border-width: 1px;
53
- --#{$prefix}outline-focus-border-width: 1px;
78
+ --#{$prefix}outline-focus-border-width: 2px;
79
+ }
80
+
81
+ & > .#{$prefix}glow {
82
+ --#{$prefix}glow-opacity: 0;
54
83
  }
55
84
  }
56
85
 
@@ -62,14 +91,22 @@ $colors-map: (primary, secondary, success, info, warning, danger);
62
91
 
63
92
  & > .#{$prefix}outline {
64
93
  --#{$prefix}outline-border-width: 1px;
65
- --#{$prefix}outline-focus-border-width: 1px;
94
+ --#{$prefix}outline-focus-border-width: 2px;
95
+ }
96
+
97
+ & > .#{$prefix}glow {
98
+ --#{$prefix}glow-opacity: 0;
66
99
  }
67
100
  }
68
101
 
69
102
  &--flat {
70
103
  & > .#{$prefix}outline {
71
104
  --#{$prefix}outline-border-width: 1px;
72
- --#{$prefix}outline-focus-border-width: 1px;
105
+ --#{$prefix}outline-focus-border-width: 2px;
106
+ }
107
+
108
+ & > .#{$prefix}glow {
109
+ --#{$prefix}glow-opacity: 0;
73
110
  }
74
111
  }
75
112
 
@@ -78,11 +115,17 @@ $colors-map: (primary, secondary, success, info, warning, danger);
78
115
 
79
116
  & > .#{$prefix}outline {
80
117
  --#{$prefix}outline-border-width: 1px;
118
+ --#{$prefix}outline-focus-border-width: 2px;
119
+ }
120
+
121
+ & > .#{$prefix}glow {
122
+ --#{$prefix}glow-opacity: 0;
81
123
  }
82
124
  }
83
125
  }
84
126
 
85
127
  .#{$prefix}input--filled {
128
+ --#{$prefix}input-color: rgba(0, 0, 0, 0.87);
86
129
  --#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
87
130
 
88
131
  & > .#{$prefix}overlay {
@@ -120,6 +163,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
120
163
  }
121
164
 
122
165
  .#{$prefix}input--outlined {
166
+ --#{$prefix}input-color: rgba(0, 0, 0, 0.87);
123
167
  --#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
124
168
 
125
169
  & > .#{$prefix}overlay {
@@ -129,8 +173,8 @@ $colors-map: (primary, secondary, success, info, warning, danger);
129
173
 
130
174
  & > .#{$prefix}outline {
131
175
  --#{$prefix}outline-border-color: currentColor;
132
- --#{$prefix}outline-opacity: 0.12;
133
- --#{$prefix}outline-hover-opacity: 0.24;
176
+ --#{$prefix}outline-opacity: 0.23;
177
+ --#{$prefix}outline-hover-opacity: 0.5;
134
178
  --#{$prefix}outline-focus-opacity: 1;
135
179
  }
136
180
  }
@@ -140,6 +184,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
140
184
  & > .#{$prefix}outline {
141
185
  --#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
142
186
  }
187
+
188
+ & > .#{$prefix}glow {
189
+ --#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
190
+ }
143
191
  }
144
192
  }
145
193
 
@@ -162,6 +210,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
162
210
  }
163
211
 
164
212
  .#{$prefix}input--flat {
213
+ --#{$prefix}input-color: rgba(0, 0, 0, 0.87);
165
214
  --#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
166
215
 
167
216
  & > .#{$prefix}overlay {
@@ -181,6 +230,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
181
230
  & > .#{$prefix}outline {
182
231
  --#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
183
232
  }
233
+
234
+ & > .#{$prefix}glow {
235
+ --#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
236
+ }
184
237
  }
185
238
  }
186
239
 
package/scss/themes/fci/components/_tabs.scss CHANGED
@@ -1,6 +1,38 @@
1
1
  @use '../../../variables' as *;
2
2
 
3
3
  .#{$prefix}theme-fci {
4
+ .#{$prefix}tabs {
5
+ &--xs {
6
+ --#{$prefix}tab-height: 28px;
7
+ --#{$prefix}tab-padding-x: 12px;
8
+ --#{$prefix}tab-font-size: 12px;
9
+ }
10
+
11
+ &--sm {
12
+ --#{$prefix}tab-height: 32px;
13
+ --#{$prefix}tab-font-size: 14px;
14
+ --#{$prefix}tab-padding-x: 13px;
15
+ }
16
+
17
+ &--md {
18
+ --#{$prefix}tab-height: 36px;
19
+ --#{$prefix}tab-padding-x: 16px;
20
+ --#{$prefix}tab-font-size: 14px;
21
+ }
22
+
23
+ &--lg {
24
+ --#{$prefix}tab-height: 40px;
25
+ --#{$prefix}tab-padding-x: 18px;
26
+ --#{$prefix}tab-font-size: 16px;
27
+ }
28
+
29
+ &--xl {
30
+ --#{$prefix}tab-height: 44px;
31
+ --#{$prefix}tab-padding-x: 22px;
32
+ --#{$prefix}tab-font-size: 18px;
33
+ }
34
+ }
35
+
4
36
  .#{$prefix}tabs--underlined {
5
37
  --#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
6
38
  --#{$prefix}tab-indicator-height: 3px;
@@ -126,8 +158,6 @@
126
158
  .#{$prefix}tab {
127
159
  --#{$prefix}tab-color: var(--#{$prefix}secondary-action-color);
128
160
  --#{$prefix}tab-padding-y: 0px;
129
- --#{$prefix}tab-padding-x: 16px;
130
- --#{$prefix}tab-font-size: 0.8125rem;
131
161
  --#{$prefix}tab-font-weight: 500;
132
162
 
133
163
  --#{$prefix}tab-closable-color: var(--#{$prefix}secondary-action-color);