@clayui/css 3.69.0 → 3.73.0

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 (24) hide show
  1. package/lib/css/atlas.css +51 -18
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +38 -1
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +71 -36
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/flags-es-AR.svg +13 -0
  8. package/lib/images/icons/flags-es-CO.svg +12 -0
  9. package/lib/images/icons/flags-es-MX.svg +13 -0
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/package.json +2 -2
  12. package/src/images/icons/flags-es-AR.svg +13 -0
  13. package/src/images/icons/flags-es-CO.svg +12 -0
  14. package/src/images/icons/flags-es-MX.svg +13 -0
  15. package/src/scss/_license-text.scss +1 -1
  16. package/src/scss/atlas/variables/_buttons.scss +1 -1
  17. package/src/scss/atlas/variables/_menubar.scss +20 -14
  18. package/src/scss/cadmin/variables/_buttons.scss +44 -15
  19. package/src/scss/cadmin/variables/_menubar.scss +18 -20
  20. package/src/scss/components/_buttons.scss +2 -2
  21. package/src/scss/functions/_global-functions.scss +1 -1
  22. package/src/scss/functions/_lx-icons-generated.scss +6 -0
  23. package/src/scss/mixins/_buttons.scss +16 -0
  24. package/src/scss/variables/_buttons.scss +29 -0
package/src/scss/cadmin/variables/_menubar.scss CHANGED
@@ -73,11 +73,11 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
73
73
  box-shadow 0.15s ease-in-out},
74
74
  color: $cadmin-gray-600,
75
75
  hover: (
76
- background-color: rgba($cadmin-gray-900, 0.03),
76
+ background-color: rgba($cadmin-primary, 0.04),
77
77
  color: $cadmin-gray-900,
78
78
  ),
79
79
  focus: (
80
- background-color: rgba($cadmin-gray-900, 0.03),
80
+ background-color: rgba($cadmin-primary, 0.04),
81
81
  box-shadow:
82
82
  clay-enable-shadows(
83
83
  $cadmin-component-focus-inset-box-shadow
@@ -89,8 +89,8 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
89
89
  color: rgba($cadmin-black, 0.9),
90
90
  ),
91
91
  active-class: (
92
- background-color: $cadmin-primary-l3,
93
- color: $cadmin-primary,
92
+ background-color: rgba($cadmin-primary, 0.06),
93
+ color: $cadmin-gray-900,
94
94
  font-weight: $cadmin-font-weight-semi-bold,
95
95
  ),
96
96
  disabled: (
@@ -107,16 +107,15 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
107
107
  border-radius: clay-enable-rounded(0),
108
108
  color: $cadmin-gray-900,
109
109
  hover: (
110
- background-color: $cadmin-gray-100,
111
- color: clay-darken($cadmin-gray-900, 5%),
110
+ background-color: rgba($cadmin-primary, 0.04),
111
+ color: $cadmin-gray-900,
112
112
  ),
113
113
  focus: (
114
- background-color:
115
- clay-lighten($cadmin-component-active-bg, 44.9),
114
+ background-color: rgba($cadmin-primary, 0.04),
116
115
  ),
117
116
  active-class: (
118
- background-color: $cadmin-primary-l3,
119
- color: $cadmin-primary,
117
+ background-color: rgba($cadmin-primary, 0.06),
118
+ color: $cadmin-gray-900,
120
119
  font-weight: $cadmin-font-weight-semi-bold,
121
120
  ),
122
121
  disabled: (
@@ -286,11 +285,11 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
286
285
  box-shadow 0.15s ease-in-out},
287
286
  color: $cadmin-gray-600,
288
287
  hover: (
289
- background-color: rgba($cadmin-gray-900, 0.03),
288
+ background-color: rgba($cadmin-primary, 0.04),
290
289
  color: $cadmin-gray-900,
291
290
  ),
292
291
  focus: (
293
- background-color: rgba($cadmin-gray-900, 0.03),
292
+ background-color: rgba($cadmin-primary, 0.04),
294
293
  box-shadow:
295
294
  clay-enable-shadows(
296
295
  $cadmin-component-focus-inset-box-shadow
@@ -302,8 +301,8 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
302
301
  color: rgba($cadmin-black, 0.9),
303
302
  ),
304
303
  active-class: (
305
- background-color: $cadmin-primary-l3,
306
- color: $cadmin-primary,
304
+ background-color: rgba($cadmin-primary, 0.06),
305
+ color: $cadmin-gray-900,
307
306
  font-weight: $cadmin-font-weight-semi-bold,
308
307
  ),
309
308
  disabled: (
@@ -320,16 +319,15 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
320
319
  border-radius: clay-enable-rounded(0),
321
320
  color: $cadmin-gray-900,
322
321
  hover: (
323
- background-color: $cadmin-gray-100,
324
- color: clay-darken($cadmin-gray-900, 5%),
322
+ background-color: rgba($cadmin-primary, 0.04),
323
+ color: $cadmin-gray-900,
325
324
  ),
326
325
  focus: (
327
- background-color:
328
- clay-lighten($cadmin-component-active-bg, 44.9),
326
+ background-color: rgba($cadmin-primary, 0.04),
329
327
  ),
330
328
  active-class: (
331
- background-color: $cadmin-primary-l3,
332
- color: $cadmin-primary,
329
+ background-color: rgba($cadmin-primary, 0.06),
330
+ color: $cadmin-gray-900,
333
331
  font-weight: $cadmin-font-weight-semi-bold,
334
332
  ),
335
333
  disabled: (
package/src/scss/components/_buttons.scss CHANGED
@@ -120,7 +120,7 @@ input[type='button'] {
120
120
  starts-with($color, '%'),
121
121
  $color,
122
122
  if(
123
- starts-with($color, 'btn-'),
123
+ starts-with($color, 'btn'),
124
124
  str-insert($color, '.', 1),
125
125
  str-insert($color, '.btn-', 1)
126
126
  )
@@ -158,7 +158,7 @@ input[type='button'] {
158
158
  starts-with($color, '%'),
159
159
  $color,
160
160
  if(
161
- starts-with($color, 'btn-'),
161
+ starts-with($color, 'btn'),
162
162
  str-insert($color, '.', 1),
163
163
  str-insert($color, '.btn-outline-', 1)
164
164
  )
package/src/scss/functions/_global-functions.scss CHANGED
@@ -300,7 +300,7 @@
300
300
  /// @param {String} $var - The CSS Custom Property to evaluate.
301
301
 
302
302
  @function clay-get-fallback($var) {
303
- @if (is-css-var($var)) {
303
+ @if (is-css-var($var) and str-index($var, ',')) {
304
304
  $fallback-value: str-slice(
305
305
  $var,
306
306
  str-index($var, ',') + 2,
package/src/scss/functions/_lx-icons-generated.scss CHANGED
@@ -350,8 +350,14 @@
350
350
 
351
351
  'en-us': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h480v32H16z"/><path fill="#FFF" d="M16 112h480v32H16z"/><path fill="#E03232" d="M16 144h480v32H16z"/><path fill="#FFF" d="M16 176h480v32H16z"/><path fill="#E03232" d="M16 208h480v32H16z"/><path fill="#FFF" d="M16 240h480v32H16z"/><path fill="#E03232" d="M16 272h480v32H16z"/><path fill="#FFF" d="M16 304h480v32H16z"/><path fill="#E03232" d="M16 336h480v32H16z"/><path fill="#FFF" d="M16 368h480v32H16z"/><path fill="#E03232" d="M16 400h480v32H16z"/><path fill="#66A1CC" d="M16 80h256v192H16z"/><path fill="#0035A0" d="M16 80h256v192H16z"/></svg>',
352
352
 
353
+ 'es-ar': '<svg width="512" height="384" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M512 0H0v384h512V0Z" fill="#C0CFD8"/><path d="M496 16.3H16v112h480v-112ZM496 256H16v112h480V256Z" fill="#5FC8FF"/><path d="M496 128H16v128h480V128Z" fill="#fff"/><circle cx="256" cy="192" r="64" fill="#FFD76E"/></svg>',
354
+
355
+ 'es-co': '<svg width="512" height="384" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M512 0H0v384h512V0Z" fill="#C0CFD8"/><path d="M496 16H16v160h480V16Z" fill="#FFDB3E"/><path d="M496 272H16v96h480v-96Z" fill="#E03232"/><path d="M496 176H16v96h480v-96Z" fill="#2E5AAC"/></svg>',
356
+
353
357
  'es-es': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80.3h480v112H16zM16 320h480v112H16z"/><path fill="#FCD638" d="M16 192h480v128H16z"/></svg>',
354
358
 
359
+ 'es-mx': '<svg width="512" height="384" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M512 0H0v384h512V0Z" fill="#C0CFD8"/><path d="M176 16H16v352h160V16Z" fill="#6FB247"/><path d="M496 16H336v352h160V16Z" fill="#E03232"/><path d="M336 16H176v352h160V16Z" fill="#fff"/><circle cx="256" cy="192" r="64" fill="#FF9A3B"/></svg>',
360
+
355
361
  'et-ee': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#448FDC" d="M16 80.3h480v112H16z"/><path fill="#FFF" d="M16 320h480v112H16z"/><path d="M16 192h480v128H16z"/></svg>',
356
362
 
357
363
  'eu-es': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#0094CE" d="M16 80.3h480v112H16z"/><path fill="#FFF" d="M16 320h480v112H16z"/><path fill="#4C4C4E" d="M16 192h480v128H16z"/><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h480v352H16z"/><path fill="#75BD4A" d="M256 295.7 441.9 432H496v-39.7L310.1 256 496 119.7V80h-54.1L256 216.3 70.1 80H16v39.7L201.9 256 16 392.3V432h54.1z"/><path fill="#FFF" d="M496 224H288V80h-64v144H16v64h208v144h64V288h208z"/></svg>',
package/src/scss/mixins/_buttons.scss CHANGED
@@ -656,6 +656,22 @@
656
656
  @include clay-css(map-deep-get($map, focus, after));
657
657
  }
658
658
 
659
+ &:hover {
660
+ @include clay-css(map-deep-get($map, focus, hover));
661
+
662
+ &::before {
663
+ @include clay-css(
664
+ map-deep-get($map, focus, hover, before)
665
+ );
666
+ }
667
+
668
+ &::after {
669
+ @include clay-css(
670
+ map-deep-get($map, focus, hover, after)
671
+ );
672
+ }
673
+ }
674
+
659
675
  .inline-item {
660
676
  @include clay-css(map-get($focus, inline-item));
661
677
  }
package/src/scss/variables/_buttons.scss CHANGED
@@ -93,6 +93,8 @@ $btn: map-deep-merge(
93
93
  ),
94
94
  inline-item: (
95
95
  font-size: $btn-inline-item-font-size,
96
+ line-height: 1,
97
+ margin-top: -3px,
96
98
  lexicon-icon: (
97
99
  margin-top: 0,
98
100
  ),
@@ -194,6 +196,26 @@ $btn-sm: map-deep-merge(
194
196
  $btn-sizes: () !default;
195
197
  $btn-sizes: map-deep-merge(
196
198
  (
199
+ btn-xs: (
200
+ font-size: 0.75rem,
201
+ padding-bottom: 0.125rem,
202
+ padding-left: 0.5rem,
203
+ padding-right: 0.5rem,
204
+ padding-top: 0.125rem,
205
+ inline-item: (
206
+ font-size: inherit,
207
+ margin-top: -3px,
208
+ ),
209
+ inline-item-before: (
210
+ margin-right: 0.25rem,
211
+ ),
212
+ inline-item-after: (
213
+ margin-left: 0.25rem,
214
+ ),
215
+ btn-section: (
216
+ font-size: 0.375rem,
217
+ ),
218
+ ),
197
219
  btn-lg: $btn-lg,
198
220
  btn-sm: $btn-sm,
199
221
  ),
@@ -230,6 +252,9 @@ $btn-monospaced: map-deep-merge(
230
252
  height: $btn-monospaced-size-mobile,
231
253
  width: $btn-monospaced-size-mobile,
232
254
  ),
255
+ inline-item: (
256
+ margin-top: 0,
257
+ ),
233
258
  lexicon-icon: (
234
259
  margin-top: 0,
235
260
  ),
@@ -301,6 +326,10 @@ $btn-monospaced-sm: map-deep-merge(
301
326
  $btn-monospaced-sizes: () !default;
302
327
  $btn-monospaced-sizes: map-deep-merge(
303
328
  (
329
+ btn-monospaced-xs: (
330
+ height: 1.5rem,
331
+ width: 1.5rem,
332
+ ),
304
333
  btn-monospaced: $btn-monospaced,
305
334
  btn-monospaced-lg: $btn-monospaced-lg,
306
335
  btn-monospaced-sm: $btn-monospaced-sm,