@unifiedsoftware/styles 2.0.0-beta.23 → 2.0.0-beta.24

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 (11) hide show
  1. package/css/fci.css +60 -1
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +1186 -1123
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +115 -24
  7. package/scss/components/_button.scss +1 -3
  8. package/scss/components/_index.scss +5 -5
  9. package/scss/themes/fci/_tokens.scss +9 -2
  10. package/scss/themes/fci/components/_button.scss +45 -31
  11. package/scss/themes/fci/components/_list.scss +4 -0
package/scss/themes/fci/components/_button.scss CHANGED
@@ -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: 4px;
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,11 @@ html {
222
234
  }
223
235
 
224
236
  @each $color in $colors-map {
237
+ .#{$prefix}button--#{$color} > .#{$prefix}glow {
238
+ --#{$prefix}glow-color: var(--#{$prefix}#{$color}-rgb);
239
+ --#{$prefix}glow-alpha: 0.75;
240
+ }
241
+
225
242
  .#{$prefix}button--filled.#{$prefix}button--#{$color} {
226
243
  --#{$prefix}button-background: var(--#{$prefix}#{$color}-color);
227
244
  }
@@ -255,15 +272,6 @@ html {
255
272
  --#{$prefix}_focus-hover-overlay-opacity: 0.24;
256
273
  --#{$prefix}_focus-active-overlay-opacity: 0.32;
257
274
  }
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
275
  }
268
276
 
269
277
  .#{$prefix}button--bordered.#{$prefix}button--#{$color} {
@@ -315,26 +323,32 @@ html {
315
323
  }
316
324
  }
317
325
 
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
- // }
326
+ .#{$prefix}button--outlined > .#{$prefix}glow {
327
+ --#{$prefix}glow-spread: 0px;
328
+ --#{$prefix}glow-color: var(--#{$prefix}secondary-rgb, var(--#{$prefix}secondary-color));
329
+ --#{$prefix}glow-alpha: 0.375;
330
+ }
331
+
332
+ .#{$prefix}button--filled > .#{$prefix}outline {
333
+ box-shadow:
334
+ rgba(0, 0, 0, 0) 0px 0px 0px 0px,
335
+ rgba(0, 0, 0, 0) 0px 0px 0px 0px,
336
+ rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset,
337
+ var(--#{$prefix}button-background) 0px 0px 0px 1px;
338
+ }
339
+
340
+ .#{$prefix}button--flat > .#{$prefix}outline {
341
+ box-shadow:
342
+ rgba(0, 0, 0, 0) 0px 0px 0px 0px,
343
+ rgba(0, 0, 0, 0) 0px 0px 0px 0px,
344
+ rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset,
345
+ var(--#{$prefix}outline-border-color) 0px 0px 0px 1px;
346
+ }
347
+
348
+ .#{$prefix}button--outlined > .#{$prefix}outline {
349
+ box-shadow:
350
+ rgba(0, 0, 0, 0) 0px 0px 0px 0px,
351
+ rgba(0, 0, 0, 0) 0px 0px 0px 0px,
352
+ rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
353
+ }
340
354
  }
package/scss/themes/fci/components/_list.scss CHANGED
@@ -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;