liferay-frontend-theme-unstyled 6.0.74 → 6.0.75

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 (44) hide show
  1. package/css/clay/_license-text.scss +1 -1
  2. package/css/clay/atlas/variables/_forms.scss +1 -0
  3. package/css/clay/cadmin/components/_breadcrumbs.scss +4 -0
  4. package/css/clay/cadmin/components/_cards.scss +4 -4
  5. package/css/clay/cadmin/components/_dropdowns.scss +10 -0
  6. package/css/clay/cadmin/components/_forms.scss +16 -14
  7. package/css/clay/cadmin/components/_grid.scss +1 -0
  8. package/css/clay/cadmin/components/_input-groups.scss +12 -1
  9. package/css/clay/cadmin/components/_type.scss +5 -1
  10. package/css/clay/cadmin/components/_utilities-functional-important.scss +9 -0
  11. package/css/clay/cadmin/variables/_breadcrumbs.scss +9 -0
  12. package/css/clay/cadmin/variables/_cards.scss +28 -37
  13. package/css/clay/cadmin/variables/_custom-forms.scss +1 -1
  14. package/css/clay/cadmin/variables/_forms.scss +15 -0
  15. package/css/clay/cadmin/variables/_loaders.scss +48 -0
  16. package/css/clay/components/_breadcrumbs.scss +4 -0
  17. package/css/clay/components/_cards.scss +4 -4
  18. package/css/clay/components/_dropdowns.scss +10 -0
  19. package/css/clay/components/_forms.scss +16 -14
  20. package/css/clay/components/_grid.scss +1 -0
  21. package/css/clay/components/_input-groups.scss +12 -1
  22. package/css/clay/components/_type.scss +5 -1
  23. package/css/clay/components/_utilities-functional-important.scss +6 -0
  24. package/css/clay/functions/_lx-icons-generated.scss +8 -0
  25. package/css/clay/mixins/_forms.scss +0 -13
  26. package/css/clay/mixins/_globals.scss +8 -0
  27. package/css/clay/mixins/_grid.scss +2 -0
  28. package/css/clay/mixins/_loaders.scss +6 -0
  29. package/css/clay/variables/_breadcrumbs.scss +9 -0
  30. package/css/clay/variables/_cards.scss +28 -34
  31. package/css/clay/variables/_custom-forms.scss +1 -1
  32. package/css/clay/variables/_forms.scss +10 -0
  33. package/css/clay/variables/_loaders.scss +48 -0
  34. package/images/clay/icons.svg +1 -1
  35. package/images/clay/send.svg +9 -0
  36. package/images/clay/slash.svg +9 -0
  37. package/images/clay/speed.svg +10 -0
  38. package/images/clay/voice.svg +9 -0
  39. package/images/lexicon/icons.svg +1 -1
  40. package/images/lexicon/send.svg +9 -0
  41. package/images/lexicon/slash.svg +9 -0
  42. package/images/lexicon/speed.svg +10 -0
  43. package/images/lexicon/voice.svg +9 -0
  44. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Clay 3.128.0
2
+ * Clay 3.133.0
3
3
  *
4
4
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
5
5
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -408,6 +408,7 @@ $form-control-select-palette: map-deep-merge(
408
408
  (
409
409
  form-control-select-secondary: (
410
410
  background-color: $white,
411
+ border-color: $secondary-l0,
411
412
  color: $gray-600,
412
413
  hover: (
413
414
  color: $gray-600,
@@ -1,3 +1,7 @@
1
+ .breadcrumb-bar {
2
+ @include clay-css($cadmin-breadcrumb-bar);
3
+ }
4
+
1
5
  .breadcrumb {
2
6
  @include clay-css($cadmin-breadcrumb);
3
7
  }
@@ -470,7 +470,7 @@
470
470
  // Card Page
471
471
 
472
472
  .card-page {
473
- @extend %clay-custom-grid-wrapper !optional;
473
+ @include clay-map-to-css($cadmin-card-page);
474
474
 
475
475
  &.card-page-equal-height {
476
476
  .card-page-item,
@@ -499,15 +499,15 @@
499
499
  }
500
500
 
501
501
  .card-page-item-directory {
502
- @include clay-custom-grid-columns($cadmin-card-page-item-directory);
502
+ @include clay-map-to-css($cadmin-card-page-item-directory);
503
503
  }
504
504
 
505
505
  .card-page-item-asset {
506
- @include clay-custom-grid-columns($cadmin-card-page-item-asset);
506
+ @include clay-map-to-css($cadmin-card-page-item-asset);
507
507
  }
508
508
 
509
509
  .card-page-item-user {
510
- @include clay-custom-grid-columns($cadmin-card-page-item-user);
510
+ @include clay-map-to-css($cadmin-card-page-item-user);
511
511
  }
512
512
 
513
513
  // Card Interactive
@@ -115,6 +115,16 @@
115
115
  }
116
116
  }
117
117
 
118
+ .dropdown-section-grid {
119
+ @extend %list-unstyled !optional;
120
+
121
+ display: grid;
122
+ gap: 0.5rem 0.75rem;
123
+ grid-template-columns: repeat(9, 1fr);
124
+ margin-bottom: 0;
125
+ padding: map-get($cadmin-dropdown-section, padding);
126
+ }
127
+
118
128
  // Dropdown Footer
119
129
 
120
130
  .dropdown-footer {
@@ -159,20 +159,6 @@ fieldset[disabled] {
159
159
  }
160
160
  }
161
161
 
162
- @each $key, $value in $cadmin-input-palette {
163
- @if not clay-is-map-unset($value) {
164
- $selector: if(
165
- starts-with($key, '.') or starts-with($key, '#'),
166
- $key,
167
- str-insert($key, '.', 1)
168
- );
169
-
170
- #{$selector} {
171
- @include clay-form-control-variant($value);
172
- }
173
- }
174
- }
175
-
176
162
  .form-control-hidden {
177
163
  left: 0;
178
164
  opacity: 0;
@@ -302,6 +288,22 @@ select.form-control[multiple] {
302
288
  @include clay-select-variant($cadmin-input-select-multiple);
303
289
  }
304
290
 
291
+ // Form Control Variants
292
+
293
+ @each $key, $value in $cadmin-input-palette {
294
+ @if not clay-is-map-unset($value) {
295
+ $selector: if(
296
+ starts-with($key, '.') or starts-with($key, '#'),
297
+ $key,
298
+ str-insert($key, '.', 1)
299
+ );
300
+
301
+ #{$selector} {
302
+ @include clay-form-control-variant($value);
303
+ }
304
+ }
305
+ }
306
+
305
307
  // Form Control Select Variants
306
308
 
307
309
  @each $key, $value in $cadmin-form-control-select-palette {
@@ -234,6 +234,7 @@
234
234
  }
235
235
 
236
236
  %clay-custom-grid-wrapper {
237
+ container-type: inline-size;
237
238
  display: flex;
238
239
  flex-wrap: wrap;
239
240
  list-style: none;
@@ -193,7 +193,8 @@
193
193
  }
194
194
  }
195
195
 
196
- .btn-monospaced {
196
+ .btn-monospaced,
197
+ .input-group-inset-icon {
197
198
  @include clay-button-variant(
198
199
  $cadmin-input-group-inset-item-btn-monospaced
199
200
  );
@@ -210,6 +211,16 @@
210
211
  }
211
212
  }
212
213
 
214
+ .input-group-inset-icon {
215
+ align-items: center;
216
+ display: flex;
217
+ justify-content: center;
218
+
219
+ .lexicon-icon {
220
+ margin-top: 0;
221
+ }
222
+ }
223
+
213
224
  .input-group-item .input-group-inset-before.form-control {
214
225
  @include border-left-radius(0);
215
226
  @include border-right-radius($cadmin-input-border-radius);
@@ -130,11 +130,15 @@ mark.clay-dark,
130
130
 
131
131
  // Lists
132
132
 
133
- .list-unstyled {
133
+ %list-unstyled {
134
134
  list-style: none;
135
135
  padding-left: 0;
136
136
  }
137
137
 
138
+ .list-unstyled {
139
+ @extend %list-unstyled;
140
+ }
141
+
138
142
  // Inline turns list items into inline-block
139
143
 
140
144
  .list-inline {
@@ -880,5 +880,14 @@
880
880
 
881
881
  html#{$cadmin-selector} .c-prefers-reduced-motion .cadmin {
882
882
  @include clay-css($cadmin-c-prefers-reduced-motion);
883
+
884
+ .loading-animation-squares {
885
+ @include clay-map-to-css(
886
+ map-deep-get(
887
+ $cadmin-loading-animation-squares,
888
+ 'prefers-reduced-motion'
889
+ )
890
+ );
891
+ }
883
892
  }
884
893
  }
@@ -155,3 +155,12 @@ $cadmin-breadcrumb-toggle: map-merge(
155
155
  ),
156
156
  $cadmin-breadcrumb-toggle
157
157
  );
158
+
159
+ $cadmin-breadcrumb-bar: () !default;
160
+ $cadmin-breadcrumb-bar: map-deep-merge(
161
+ (
162
+ align-items: center,
163
+ display: flex,
164
+ ),
165
+ $cadmin-breadcrumb-bar
166
+ );
@@ -598,35 +598,45 @@ $cadmin-user-card: map-deep-merge(
598
598
  $cadmin-user-card
599
599
  );
600
600
 
601
- // Card Page Item Asset
601
+ $cadmin-card-page: () !default;
602
+ $cadmin-card-page: map-deep-merge(
603
+ (
604
+ container-name: c-card-page,
605
+ container-type: inline-size,
606
+ extend: '%clay-custom-grid-wrapper',
607
+ ),
608
+ $cadmin-card-page
609
+ );
602
610
 
603
- // base: min-width 0, sm min-width: 576px, md: min-width: 768px,
604
- // lg: min-width: 992px
611
+ // Card Page Item Asset
605
612
 
606
613
  $cadmin-card-page-item-asset: () !default;
607
614
  $cadmin-card-page-item-asset: map-deep-merge(
608
615
  (
609
- base: (
610
- breakpoint: 0,
611
- min-width: 193px,
612
- padding-left: $cadmin-grid-gutter-width * 0.5,
613
- padding-right: $cadmin-grid-gutter-width * 0.5,
614
- ),
615
- sm: (
616
- breakpoint: map-get($cadmin-grid-breakpoints, sm),
616
+ flex-basis: 100%,
617
+ max-width: 100%,
618
+ padding-left: $cadmin-grid-gutter-width * 0.5,
619
+ padding-right: $cadmin-grid-gutter-width * 0.5,
620
+ '@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, sm)})':
621
+ (
617
622
  flex-basis: 50%,
618
623
  max-width: 50%,
619
624
  ),
620
- md: (
621
- breakpoint: map-get($cadmin-grid-breakpoints, md),
622
- flex-basis: 33.3333%,
623
- max-width: 33.3333%,
625
+ '@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, md)})':
626
+ (
627
+ flex-basis: 33.33333%,
628
+ max-width: 33.33333%,
624
629
  ),
625
- lg: (
626
- breakpoint: map-get($cadmin-grid-breakpoints, lg),
630
+ '@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, lg)})':
631
+ (
627
632
  flex-basis: 25%,
628
633
  max-width: 25%,
629
634
  ),
635
+ '@container #{map-get($cadmin-card-page, container-name)} (min-width: #{map-get($cadmin-container-max-widths, xl)})':
636
+ (
637
+ flex-basis: 20%,
638
+ max-width: 20%,
639
+ ),
630
640
  ),
631
641
  $cadmin-card-page-item-asset
632
642
  );
@@ -637,26 +647,7 @@ $cadmin-card-page-item-asset: map-deep-merge(
637
647
 
638
648
  $cadmin-card-page-item-user: () !default;
639
649
  $cadmin-card-page-item-user: map-deep-merge(
640
- (
641
- base: (
642
- breakpoint: 0,
643
- flex-basis: 50%,
644
- max-width: 50%,
645
- padding-left: $cadmin-grid-gutter-width * 0.5,
646
- padding-right: $cadmin-grid-gutter-width * 0.5,
647
- ),
648
- sm: (
649
- breakpoint: map-get($cadmin-grid-breakpoints, sm),
650
- flex-basis: 33.33333%,
651
- max-width: 33.33333%,
652
- min-width: 200px,
653
- ),
654
- lg: (
655
- breakpoint: map-get($cadmin-grid-breakpoints, lg),
656
- flex-basis: 20%,
657
- max-width: 20%,
658
- ),
659
- ),
650
+ $cadmin-card-page-item-asset,
660
651
  $cadmin-card-page-item-user
661
652
  );
662
653
 
@@ -538,7 +538,7 @@ $cadmin-custom-control-outside: () !default;
538
538
  $cadmin-custom-control-outside: map-deep-merge(
539
539
  (
540
540
  label: (
541
- display: block,
541
+ display: inline-block,
542
542
  padding-left:
543
543
  calc(
544
544
  #{$cadmin-custom-control-indicator-size} + #{$cadmin-custom-control-description-padding-left}
@@ -122,6 +122,16 @@ $cadmin-input: map-deep-merge(
122
122
  // Form Control Variants
123
123
 
124
124
  $cadmin-input-palette: () !default;
125
+ $cadmin-input-palette: map-deep-merge(
126
+ (
127
+ '.form-control-shrink': (
128
+ max-width: 100%,
129
+ white-space: nowrap,
130
+ width: min-content,
131
+ ),
132
+ ),
133
+ $cadmin-input-palette
134
+ );
125
135
 
126
136
  // Form Control Plaintext
127
137
 
@@ -1266,6 +1276,7 @@ $cadmin-form-control-select-palette: map-deep-merge(
1266
1276
  (
1267
1277
  form-control-select-secondary: (
1268
1278
  background-color: $cadmin-white,
1279
+ border-color: $cadmin-secondary-l0,
1269
1280
  color: $cadmin-gray-600,
1270
1281
  hover: (
1271
1282
  color: $cadmin-gray-600,
@@ -1285,6 +1296,10 @@ $cadmin-form-control-select-palette: map-deep-merge(
1285
1296
  color: $cadmin-gray-900,
1286
1297
  ),
1287
1298
  ),
1299
+ '.form-control-select-shrink': (
1300
+ max-width: 100%,
1301
+ width: min-content,
1302
+ ),
1288
1303
  ),
1289
1304
  $cadmin-form-control-select-palette
1290
1305
  );
@@ -98,6 +98,54 @@ $cadmin-loading-animation-squares: map-deep-merge(
98
98
  transform: scale(2),
99
99
  width: 1em,
100
100
  ),
101
+ 'prefers-reduced-motion': (
102
+ display: block,
103
+ height: 1em,
104
+ margin-left: auto,
105
+ margin-right: auto,
106
+ overflow: hidden,
107
+ position: relative,
108
+ text-align: left,
109
+ vertical-align: middle,
110
+ width: 1em,
111
+ '&::before': (
112
+ animation: loading-animation-circle 1s linear infinite,
113
+ background-color: transparent,
114
+ border-radius: 50%,
115
+ box-shadow: -0.03125em -0.375em 0 0 currentColor,
116
+ content: '',
117
+ display: block,
118
+ font-size: inherit,
119
+ height: 0.25em,
120
+ left: 50%,
121
+ margin-left: -0.125em,
122
+ margin-top: -0.125em,
123
+ opacity: inherit,
124
+ position: absolute,
125
+ top: 50%,
126
+ transform: none,
127
+ width: 0.25em,
128
+ ),
129
+ '&::after': (
130
+ animation: loading-animation-circle 1s linear infinite,
131
+ background-color: currentColor,
132
+ border-radius: 50%,
133
+ content: '',
134
+ display: block,
135
+ font-size: inherit,
136
+ height: 1em,
137
+ left: auto,
138
+ -webkit-mask: #{conic-gradient(transparent 10%, #000),
139
+ linear-gradient(#000 0 0) content-box},
140
+ -webkit-mask-composite: source-out,
141
+ mask-composite: subtract,
142
+ padding: 0.25em,
143
+ position: relative,
144
+ top: auto,
145
+ transform: none,
146
+ width: 1em,
147
+ ),
148
+ ),
101
149
  ),
102
150
  $cadmin-loading-animation-squares
103
151
  );
@@ -1,3 +1,7 @@
1
+ .breadcrumb-bar {
2
+ @include clay-css($breadcrumb-bar);
3
+ }
4
+
1
5
  .breadcrumb {
2
6
  @include clay-css($breadcrumb);
3
7
  }
@@ -535,7 +535,7 @@
535
535
  // Card Page
536
536
 
537
537
  .card-page {
538
- @extend %clay-custom-grid-wrapper !optional;
538
+ @include clay-map-to-css($card-page);
539
539
 
540
540
  &.card-page-equal-height {
541
541
  .card-page-item,
@@ -564,15 +564,15 @@
564
564
  }
565
565
 
566
566
  .card-page-item-directory {
567
- @include clay-custom-grid-columns($card-page-item-directory);
567
+ @include clay-map-to-css($card-page-item-directory);
568
568
  }
569
569
 
570
570
  .card-page-item-asset {
571
- @include clay-custom-grid-columns($card-page-item-asset);
571
+ @include clay-map-to-css($card-page-item-asset);
572
572
  }
573
573
 
574
574
  .card-page-item-user {
575
- @include clay-custom-grid-columns($card-page-item-user);
575
+ @include clay-map-to-css($card-page-item-user);
576
576
  }
577
577
 
578
578
  // Card Interactive
@@ -99,6 +99,16 @@
99
99
  }
100
100
  }
101
101
 
102
+ .dropdown-section-grid {
103
+ @extend %list-unstyled !optional;
104
+
105
+ display: grid;
106
+ gap: 0.5rem 0.75rem;
107
+ grid-template-columns: repeat(9, 1fr);
108
+ margin-bottom: 0;
109
+ padding: map-get($dropdown-section, padding);
110
+ }
111
+
102
112
  // Dropdown Footer
103
113
 
104
114
  .dropdown-footer {
@@ -136,20 +136,6 @@ fieldset[disabled] {
136
136
  }
137
137
  }
138
138
 
139
- @each $key, $value in $input-palette {
140
- @if not clay-is-map-unset($value) {
141
- $selector: if(
142
- starts-with($key, '.') or starts-with($key, '#'),
143
- $key,
144
- str-insert($key, '.', 1)
145
- );
146
-
147
- #{$selector} {
148
- @include clay-form-control-variant($value);
149
- }
150
- }
151
- }
152
-
153
139
  .form-control-hidden {
154
140
  left: 0;
155
141
  opacity: 0;
@@ -273,6 +259,22 @@ select.form-control[multiple] {
273
259
  @include clay-select-variant($input-select-multiple);
274
260
  }
275
261
 
262
+ // Form Control Variants
263
+
264
+ @each $key, $value in $input-palette {
265
+ @if not clay-is-map-unset($value) {
266
+ $selector: if(
267
+ starts-with($key, '.') or starts-with($key, '#'),
268
+ $key,
269
+ str-insert($key, '.', 1)
270
+ );
271
+
272
+ #{$selector} {
273
+ @include clay-form-control-variant($value);
274
+ }
275
+ }
276
+ }
277
+
276
278
  // Form Control Select Variants
277
279
 
278
280
  @each $key, $value in $form-control-select-palette {
@@ -201,6 +201,7 @@
201
201
  }
202
202
 
203
203
  %clay-custom-grid-wrapper {
204
+ container-type: inline-size;
204
205
  display: flex;
205
206
  flex-wrap: wrap;
206
207
  list-style: none;
@@ -245,7 +245,8 @@
245
245
  }
246
246
  }
247
247
 
248
- .btn-monospaced {
248
+ .btn-monospaced,
249
+ .input-group-inset-icon {
249
250
  @include clay-button-variant(
250
251
  $input-group-inset-item-btn-monospaced
251
252
  );
@@ -260,6 +261,16 @@
260
261
  }
261
262
  }
262
263
 
264
+ .input-group-inset-icon {
265
+ align-items: center;
266
+ display: flex;
267
+ justify-content: center;
268
+
269
+ .lexicon-icon {
270
+ margin-top: 0;
271
+ }
272
+ }
273
+
263
274
  .input-group-item .input-group-inset-before.form-control {
264
275
  @include border-left-radius(0);
265
276
  @include border-right-radius($input-border-radius);
@@ -130,11 +130,15 @@ mark.clay-dark,
130
130
 
131
131
  // Lists
132
132
 
133
- .list-unstyled {
133
+ %list-unstyled {
134
134
  list-style: none;
135
135
  padding-left: 0;
136
136
  }
137
137
 
138
+ .list-unstyled {
139
+ @extend %list-unstyled;
140
+ }
141
+
138
142
  // Inline turns list items into inline-block
139
143
 
140
144
  .list-inline {
@@ -855,4 +855,10 @@
855
855
 
856
856
  .c-prefers-reduced-motion {
857
857
  @include clay-css($c-prefers-reduced-motion);
858
+
859
+ .loading-animation-squares {
860
+ @include clay-map-to-css(
861
+ map-deep-get($loading-animation-squares, 'prefers-reduced-motion')
862
+ );
863
+ }
858
864
  }
@@ -780,6 +780,8 @@
780
780
 
781
781
  'select': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline select-border" d="M448 64v384H64V64h384M64 0C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64z" fill="#{$color}"/><path class="lexicon-icon-outline select-caret-up" fill="#{$color}" d="M414.5 224H278.8l67.9-67.9z"/><path class="lexicon-icon-outline select-caret-down" fill="#{$color}" d="M278.8 288h135.7l-67.8 67.9z"/><path class="lexicon-icon-outline select-s" d="M104.8 306.8c14.2 20.2 94.7 49.1 96.9-3.6C205 259 89.5 268.5 91.5 193.3c6-77.3 100-83.3 143.7-35.9-6.2 8.6-20.2 26.4-20.2 26.4-43.2-35.8-84.9-17.7-83.6 7.5C129 237 238 215 242.2 300.1c2.8 92.4-135.7 76.4-160.7 34.9l23.3-28.2z" fill="#{$color}"/></svg>',
782
782
 
783
+ 'send': '<svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M15.343 9.148c.876-.427.876-1.869 0-2.296L1.488.098C.78-.246 0 .356 0 1.246v3.377c0 .951.736 1.74 1.684 1.806l4.65.326h.638c.592 0 1.073.557 1.073 1.245 0 .688-.48 1.245-1.073 1.245h-.637l-4.65.326A1.81 1.81 0 0 0 0 11.377v3.377c0 .89.781 1.492 1.488 1.148l13.855-6.754Z" fill="#{$color}"/></svg>',
784
+
783
785
  'seo': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M111.994 152.002c0-13.276 10.734-24.001 23.999-24.001 13.265 0 23.999 10.725 23.999 24.001v128.001c0 13.275-10.734 24-23.999 24-13.265 0-23.999-10.725-23.999-24V152.002Zm143.993 96.001c0-13.276 10.734-24.001 23.999-24.001 13.265 0 23.999 10.725 23.999 24.001v32c0 13.275-10.734 24-23.999 24-13.265 0-23.999-10.725-23.999-24v-32Z" fill="#{$color}"/><path class="lexicon-icon-outline" clip-rule="evenodd" d="M499.207 455.48 377.713 333.378C523.706 92.276 229.62-102.426 59.529 59.375-105.563 245.277 101.127 519.98 332.915 378.38l121.494 118.8c35.098 38.6 79.996-6.4 44.798-41.7ZM206.221 63.575c191.891 0 198.091 289.003 0 289.003-192.89 0-187.39-289.003 0-289.003Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M183.991 200.002c0-13.275 10.734-24 23.999-24 13.265 0 23.999 10.725 23.999 24v80.001c0 13.275-10.734 24-23.999 24-13.265 0-23.999-10.725-23.999-24v-80.001Z" fill="#{$color}"/></svg>',
784
786
 
785
787
  'separator': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline separator-content-2" d="M416 448H96c-17.7 0-32-14.3-32-32v-32c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-divider" d="M464 272H48c-21.2 0-20.5-32 0-32h416c20.8 0 21.8 32 0 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-content-1" d="M416 160H96c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/></svg>',
@@ -816,6 +818,8 @@
816
818
 
817
819
  'sites': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body lx-sites-bg" fill="none" d="M437 75C388.7 26.6 324.4 0 256 0S123.3 26.6 75 75C26.6 123.3 0 187.6 0 256s26.6 132.7 75 181c48.4 48.4 112.6 75 181 75s132.7-26.6 181-75c48.4-48.4 75-112.6 75-181s-26.6-132.7-75-181z"/><path class="lexicon-icon-outline lx-sites-border" d="M437 75C388.7 26.6 324.4 0 256 0S123.3 26.6 75 75C26.6 123.3 0 187.6 0 256s26.6 132.7 75 181c48.4 48.4 112.6 75 181 75s132.7-26.6 181-75c48.4-48.4 75-112.6 75-181s-26.6-132.7-75-181zM256 448c-105.9 0-192-86.1-192-192S150.1 64 256 64s192 86.1 192 192-86.1 192-192 192z" fill="#{$color}"/><path class="lexicon-icon-outline lx-sites-hands" d="m128 384 192-64 64-192-192 64-64 192zm126.9-160c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32z" fill="#{$color}"/></svg>',
818
820
 
821
+ 'slash': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m5.5 14.503 5-13"/></svg>',
822
+
819
823
  'slideshow': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-slideshow-border" d="M64 480h384c32 0 64-32 64-64V96c0-32-32-64-64-64H64C32 32 0 64 0 96v320c0 32 32 64 64 64zm0-384h384v320H64" fill="#{$color}"/><circle class="lexicon-icon-outline lx-slideshow-dot-1" cx="160" cy="320" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline lx-slideshow-dot-2" cx="256" cy="320" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline lx-slideshow-dot-3" cx="352" cy="320" r="32" fill="#{$color}"/></svg>',
820
824
 
821
825
  'social-facebook': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M483.7 0H28.3C12.6 0 0 12.6 0 28.3v455.5C0 499.4 12.6 512 28.3 512h245.2V313.7h-66.7v-77.3h66.7v-57c0-66.1 40.4-102.1 99.4-102.1 28.3 0 52.5 2.1 59.6 3v69.1h-40.9c-32.1 0-38.3 15.2-38.3 37.6v49.3h76.5l-10 77.3h-66.6V512h130.5c15.6 0 28.3-12.7 28.3-28.3V28.3C512 12.6 499.3 0 483.7 0z" fill="#{$color}"/></svg>',
@@ -832,6 +836,8 @@
832
836
 
833
837
  'special-character': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M255.87 32C35.55 43.31 12.72 299.8 151.6 384H96.29c-43.54 0-42.58 64 0 64h127.99v-78.07c0-12.64-7.49-24.01-19.08-29.07C90.01 293.65 105.82 101.28 256.58 96c144.34 3.53 171.57 193.26 50.77 244.86-11.58 5.06-19.08 16.43-19.08 29.07V448h127.99c41.84 0 42.8-64 0-64h-55.31C501.05 301.56 474.7 38.92 255.87 32z" fill="#{$color}"/></svg>',
834
838
 
839
+ 'speed': '<svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline lx-speed-outline" d="M12.985 6.67A5.962 5.962 0 0 1 14 10.003c0 .702-.121 1.375-.343 2H2.342a5.973 5.973 0 0 1-.342-2c0-3.308 2.694-6 6-6 .604 0 1.188.09 1.738.257l1.55-1.55A7.951 7.951 0 0 0 8 2.004c-4.41 0-8 3.587-8 8 0 .97.174 1.902.492 2.765.297.803 1.065 1.235 1.815 1.235h11.385c.75 0 1.518-.432 1.815-1.235A7.961 7.961 0 0 0 16 10.004a7.958 7.958 0 0 0-1.58-4.768L12.985 6.67Z" fill="#{$color}"/><path class="lexicon-icon-outline lx-speed-dial" d="M6.92 10.162a1.316 1.316 0 0 1 .076-2.078l5.908-4.243a.206.206 0 0 1 .285.291L8.815 9.944a1.316 1.316 0 0 1-1.896.218Z" fill="#{$color}"/></svg>',
840
+
835
841
  'square-hole-multi': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-square-hole-multi-square-1" d="M460 0H148c-28.6 0-52 23.4-52 52v12h320c17.7 0 32 14.3 32 32v320h12c28.6 0 52-23.4 52-52V52c0-28.6-23.4-52-52-52z" fill="#{$color}"/><path class="lexicon-icon-outline lx-square-hole-multi-square-2" d="M364 96H52c-28.6 0-52 23.4-52 52v312c0 28.6 23.4 52 52 52h312c28.6 0 52-23.4 52-52V148c0-28.6-23.4-52-52-52zm-78 286H130V226h156v156z" fill="#{$color}"/></svg>',
836
842
 
837
843
  'square-hole': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 0H64A64 64 0 0 0 0 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V64a64 64 0 0 0-64-64Zm-96 352H160V160h192Z" fill="#{$color}"/></svg>',
@@ -954,6 +960,8 @@
954
960
 
955
961
  'vocabulary': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-vocabulary-a" d="M145.689 252.622c15.808 7.903 35.029 1.497 42.933-14.31L195.777 224h120.446l7.155 14.311c5.607 11.214 16.908 17.697 28.646 17.696 4.81 0 9.694-1.089 14.287-3.386 15.807-7.903 22.214-27.125 14.311-42.932l-96-192a32 32 0 0 0-57.244 0l-96 192c-7.903 15.808-1.496 35.029 14.311 42.933zM256 103.554 284.223 160h-56.446L256 103.554z" fill="#{$color}"/><path class="lexicon-icon-outline lx-vocabulary-b" d="M160 352v-64c0-17.673-14.327-32-32-32H0v256h160c17.673 0 32-14.327 32-32v-96c0-17.673-14.327-32-32-32zm-64-32v32H64v-32h32zm32 128H64v-32h64v32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-vocabulary-c" d="M478.736 448.025c-16.4.646-18.544.48-20.266.344-2.576-.202-5.14-.369-10.47-.369-35.29 0-64-28.71-64-64s28.71-64 64-64c15.178 0 28.193 1.474 28.295 1.485 17.567 2.04 33.444-10.526 35.49-28.08 2.046-17.554-10.526-33.443-28.08-35.49-.67-.078-16.652-1.915-35.705-1.915-70.58 0-128 57.42-128 128s57.42 128 128 128c3.255 0 4.229.076 5.46.173 2.357.185 4.5.325 8.43.325 3.96 0 9.737-.143 19.374-.523 17.659-.698 31.409-15.58 30.71-33.239-.697-17.66-15.608-31.434-33.238-30.71z" fill="#{$color}"/></svg>',
956
962
 
963
+ 'voice': '<svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M14.139 1.922a.9.9 0 0 0-1.353 1.187c.765.872 1.21 2.267 1.225 3.753.015 1.486-.403 2.886-1.15 3.768a.9.9 0 0 0 1.374 1.163c1.107-1.307 1.594-3.174 1.576-4.95-.018-1.774-.542-3.633-1.672-4.921Zm-8.537 9.265a8.667 8.667 0 0 0-2.5.354c-1.047.314-1.992.837-2.7 1.571-.506.525-.047 1.279.681 1.279h.476c.253 0 .494-.1.698-.25.013-.01.025-.02.039-.029.808-.577 1.999-.928 3.3-.925 1.301.004 2.497.362 3.31.944l.021.015c.202.147.44.245.69.245h.486c.73 0 1.187-.758.676-1.281-.709-.725-1.65-1.246-2.692-1.56a8.714 8.714 0 0 0-2.485-.363ZM2.352 6.79c0 1.041.447 1.973 1.152 2.596.566.5 1.298.802 2.098.802a3.15 3.15 0 0 0 2.089-.795A3.455 3.455 0 0 0 8.85 6.79c0-1.877-1.454-3.398-3.25-3.398-1.794 0-3.25 1.521-3.25 3.398Zm4.5 0c0 .857-.643 1.398-1.25 1.398s-1.25-.54-1.25-1.398c0-.857.643-1.398 1.25-1.398s1.25.54 1.25 1.398Zm2.947-2.915a.75.75 0 0 1 1.06-.027c.832.79 1.22 1.935 1.234 3.029.013 1.093-.348 2.247-1.164 3.05a.75.75 0 1 1-1.052-1.07c.462-.455.725-1.18.716-1.962-.01-.781-.29-1.507-.766-1.96a.75.75 0 0 1-.028-1.06Z" fill="#{$color}"/></svg>',
964
+
957
965
  'warehouse': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-warehouse-square-1" d="M176 215c0-18.2 14.3-33 32-33h32c17.7 0 32 14.8 32 33v33c0 18.2-14.3 33-32 33h-32c-17.7 0-32-14.8-32-33v-33z" fill="#{$color}"/><path class="lexicon-icon-outline lx-warehouse-square-2" d="M240 347.1c0-18.2-14.3-33-32-33h-32c-17.7 0-32 14.8-32 33v33c0 18.2 14.3 33 32 33h32c17.7 0 32-14.8 32-33v-33z" fill="#{$color}"/><path class="lexicon-icon-outline lx-warehouse-square-3" d="M336 314.1c17.7 0 32 14.8 32 33v33c0 18.2-14.3 33-32 33h-32c-17.7 0-32-14.8-32-33v-33c0-18.2 14.3-33 32-33h32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-warehouse-border" d="M217.6 13.5c22.8-17.6 54-17.6 76.8 0l192 148.6c16.1 12.5 25.6 32.1 25.6 52.9v297.3H0V215c0-20.8 9.5-40.4 25.6-52.9l192-148.6zM448 215 256 66.3 64 215v231.2h384V215z" clip-rule="evenodd" fill-rule="evenodd" fill="#{$color}"/></svg>',
958
966
 
959
967
  'warning-full': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="m506.3 409.3-214-353.7c-16.8-30.6-55.8-32.6-72.6 0L5.7 409.3C-8 436.5 5 480 42 480h428c36 0 52.5-43.5 36.3-70.7zM224 392c0-42.5 64-42 64 0 0 41.5-64 42.5-64 0zm64-104c0 42.5-64 40.5-64 0V184c0-43 64-43.5 64 0v104z" fill="#{$color}"/></svg>',
@@ -750,19 +750,6 @@
750
750
  map-get($map, bg-size),
751
751
  map-get($map, background-size)
752
752
  ),
753
- color:
754
- setter(
755
- map-get($map, color),
756
- if(
757
- variable-exists(input-color),
758
- $input-color,
759
- if(
760
- variable-exists(cadmin-input-color),
761
- $cadmin-input-color,
762
- null
763
- )
764
- )
765
- ),
766
753
  )
767
754
  );
768
755
 
@@ -436,6 +436,14 @@
436
436
  @media #{clay-str-replace('#{$selector}', '@media ', '')} {
437
437
  @include clay-map-to-css($value);
438
438
  }
439
+ } @else if (starts-with($selector, '@container ')) {
440
+ @at-root {
441
+ @container #{clay-str-replace('#{$selector}', '@container ', '')} {
442
+ & {
443
+ @include clay-map-to-css($value);
444
+ }
445
+ }
446
+ }
439
447
  } @else {
440
448
  #{$selector} {
441
449
  @include clay-map-to-css($value);
@@ -128,6 +128,8 @@
128
128
  }
129
129
  }
130
130
 
131
+ /// @deprecated as of v3.130.0
132
+
131
133
  @mixin clay-custom-grid-columns($map) {
132
134
  @if (type-of($map) == 'map') {
133
135
  $custom-grid-props: map-merge(
@@ -219,6 +219,12 @@
219
219
  &::after {
220
220
  @include clay-css(map-get($map, after));
221
221
  }
222
+
223
+ @media (prefers-reduced-motion: reduce) {
224
+ @include clay-map-to-css(
225
+ map-get($map, 'prefers-reduced-motion')
226
+ );
227
+ }
222
228
  }
223
229
  }
224
230
  }