@unifiedsoftware/styles 2.0.0-beta.23 → 2.0.0-beta.25
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 +67 -1
- package/css/fci.min.css +1 -1
- package/css/styles.css +1211 -1126
- package/css/styles.min.css +1 -1
- package/package.json +1 -1
- package/scss/_utilities.scss +145 -23
- package/scss/components/_button.scss +1 -3
- package/scss/components/_index.scss +5 -5
- package/scss/components/_swipe.scss +2 -2
- package/scss/themes/fci/_tokens.scss +9 -2
- package/scss/themes/fci/components/_button.scss +36 -9
- package/scss/themes/fci/components/_list.scss +4 -0
|
@@ -94,6 +94,13 @@ html {
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
+
& > .#{$prefix}glow {
|
|
98
|
+
--#{$prefix}_focus-glow-spread: 1px;
|
|
99
|
+
--#{$prefix}_focus-glow-blur: 6px;
|
|
100
|
+
--#{$prefix}_focus-hover-glow-blur: 8px;
|
|
101
|
+
--#{$prefix}_focus-active-glow-blur: 10px;
|
|
102
|
+
}
|
|
103
|
+
|
|
97
104
|
&--filled {
|
|
98
105
|
--#{$prefix}button-border-width: 1px;
|
|
99
106
|
--#{$prefix}button-border-color: transparent;
|
|
@@ -104,6 +111,7 @@ html {
|
|
|
104
111
|
--#{$prefix}overlay-opacity: 0;
|
|
105
112
|
--#{$prefix}_hover-overlay-opacity: 0.24;
|
|
106
113
|
--#{$prefix}_active-overlay-opacity: 0.32;
|
|
114
|
+
--#{$prefix}_focus-overlay-opacity: 0.24;
|
|
107
115
|
--#{$prefix}_focus-hover-overlay-opacity: 0.24;
|
|
108
116
|
--#{$prefix}_focus-active-overlay-opacity: 0.32;
|
|
109
117
|
}
|
|
@@ -124,6 +132,7 @@ html {
|
|
|
124
132
|
--#{$prefix}overlay-opacity: 0;
|
|
125
133
|
--#{$prefix}_hover-overlay-opacity: 0.08;
|
|
126
134
|
--#{$prefix}_active-overlay-opacity: 0.1;
|
|
135
|
+
--#{$prefix}_focus-overlay-opacity: 0.08;
|
|
127
136
|
--#{$prefix}_focus-hover-overlay-opacity: 0.08;
|
|
128
137
|
--#{$prefix}_focus-active-overlay-opacity: 0.1;
|
|
129
138
|
}
|
|
@@ -141,6 +150,7 @@ html {
|
|
|
141
150
|
--#{$prefix}overlay-opacity: 0.16;
|
|
142
151
|
--#{$prefix}_hover-overlay-opacity: 0.24;
|
|
143
152
|
--#{$prefix}_active-overlay-opacity: 0.32;
|
|
153
|
+
--#{$prefix}_focus-overlay-opacity: 0.24;
|
|
144
154
|
--#{$prefix}_focus-hover-overlay-opacity: 0.24;
|
|
145
155
|
--#{$prefix}_focus-active-overlay-opacity: 0.32;
|
|
146
156
|
}
|
|
@@ -158,6 +168,7 @@ html {
|
|
|
158
168
|
--#{$prefix}overlay-opacity: 0;
|
|
159
169
|
--#{$prefix}_hover-overlay-opacity: 0.16;
|
|
160
170
|
--#{$prefix}_active-overlay-opacity: 0.24;
|
|
171
|
+
--#{$prefix}_focus-overlay-opacity: 0.12;
|
|
161
172
|
--#{$prefix}_focus-hover-overlay-opacity: 0.12;
|
|
162
173
|
--#{$prefix}_focus-active-overlay-opacity: 0.24;
|
|
163
174
|
}
|
|
@@ -174,6 +185,7 @@ html {
|
|
|
174
185
|
--#{$prefix}overlay-opacity: 0;
|
|
175
186
|
--#{$prefix}_hover-overlay-opacity: 0.16;
|
|
176
187
|
--#{$prefix}_active-overlay-opacity: 0.24;
|
|
188
|
+
--#{$prefix}_focus-overlay-opacity: 0.12;
|
|
177
189
|
--#{$prefix}_focus-hover-overlay-opacity: 0.12;
|
|
178
190
|
--#{$prefix}_focus-active-overlay-opacity: 0.24;
|
|
179
191
|
}
|
|
@@ -222,6 +234,12 @@ html {
|
|
|
222
234
|
}
|
|
223
235
|
|
|
224
236
|
@each $color in $colors-map {
|
|
237
|
+
.#{$prefix}button--#{$color} > .#{$prefix}glow {
|
|
238
|
+
--#{$prefix}_focus-glow-color: var(--#{$prefix}#{$color}-rgb);
|
|
239
|
+
--#{$prefix}_focus-glow-alpha: 1;
|
|
240
|
+
--#{$prefix}_focus-glow-shadow-alpha: 0.75;
|
|
241
|
+
}
|
|
242
|
+
|
|
225
243
|
.#{$prefix}button--filled.#{$prefix}button--#{$color} {
|
|
226
244
|
--#{$prefix}button-background: var(--#{$prefix}#{$color}-color);
|
|
227
245
|
}
|
|
@@ -255,15 +273,6 @@ html {
|
|
|
255
273
|
--#{$prefix}_focus-hover-overlay-opacity: 0.24;
|
|
256
274
|
--#{$prefix}_focus-active-overlay-opacity: 0.32;
|
|
257
275
|
}
|
|
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
|
-
// }
|
|
267
276
|
}
|
|
268
277
|
|
|
269
278
|
.#{$prefix}button--bordered.#{$prefix}button--#{$color} {
|
|
@@ -315,6 +324,24 @@ html {
|
|
|
315
324
|
}
|
|
316
325
|
}
|
|
317
326
|
|
|
327
|
+
.#{$prefix}button--secondary > .#{$prefix}glow {
|
|
328
|
+
--#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
|
|
329
|
+
--#{$prefix}_focus-glow-alpha: 0.5;
|
|
330
|
+
--#{$prefix}_focus-glow-shadow-alpha: 0.25;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.#{$prefix}button--filled.#{$prefix}button--secondary > .#{$prefix}glow {
|
|
334
|
+
--#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
|
|
335
|
+
--#{$prefix}_focus-glow-alpha: 0.5;
|
|
336
|
+
--#{$prefix}_focus-glow-shadow-alpha: 0.25;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.#{$prefix}button--outlined > .#{$prefix}glow {
|
|
340
|
+
--#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
|
|
341
|
+
--#{$prefix}_focus-glow-alpha: 0.5;
|
|
342
|
+
--#{$prefix}_focus-glow-shadow-alpha: 0.25;
|
|
343
|
+
}
|
|
344
|
+
|
|
318
345
|
// .#{$prefix}button--filled > .#{$prefix}outline {
|
|
319
346
|
// box-shadow:
|
|
320
347
|
// rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
|
@@ -95,6 +95,10 @@
|
|
|
95
95
|
--#{$prefix}icon-font-size: 20px;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
+
.#{$prefix}list--md .#{$prefix}list-item .#{$prefix}checkbox .#{$prefix}icon {
|
|
99
|
+
--#{$prefix}icon-font-size: 0.625rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
98
102
|
.#{$prefix}list--lg .#{$prefix}list-item {
|
|
99
103
|
--#{$prefix}list-item-min-height: 2.75rem;
|
|
100
104
|
--#{$prefix}list-item-padding-y: 0.625rem;
|