@clayui/css 3.93.0 → 3.94.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.
@@ -265,14 +265,19 @@
265
265
 
266
266
  @if ($value != 'none' and $value != null) {
267
267
  @at-root {
268
- $selector: if(
269
- variable-exists(cadmin-selector),
270
- clay-insert-after(
268
+ $selector: '.c-prefers-reduced-motion &';
269
+
270
+ @if (variable-exists(cadmin-selector)) {
271
+ $selector: clay-insert-after(
271
272
  '.cadmin ',
272
273
  '.c-prefers-reduced-motion '
273
- ),
274
- '.c-prefers-reduced-motion &'
275
- );
274
+ );
275
+ $selector: clay-insert-after(
276
+ '.cadmin.',
277
+ 'c-prefers-reduced-motion.',
278
+ $selector
279
+ );
280
+ }
276
281
 
277
282
  #{$selector} {
278
283
  animation: none;
@@ -296,14 +301,19 @@
296
301
  }
297
302
 
298
303
  @at-root {
299
- $selector: if(
300
- variable-exists(cadmin-selector),
301
- clay-insert-after(
304
+ $selector: '.c-prefers-reduced-motion &';
305
+
306
+ @if (variable-exists(cadmin-selector)) {
307
+ $selector: clay-insert-after(
302
308
  '.cadmin ',
303
309
  '.c-prefers-reduced-motion '
304
- ),
305
- '.c-prefers-reduced-motion &'
306
- );
310
+ );
311
+ $selector: clay-insert-after(
312
+ '.cadmin.',
313
+ 'c-prefers-reduced-motion.',
314
+ $selector
315
+ );
316
+ }
307
317
 
308
318
  #{$selector} {
309
319
  transition: none;
@@ -324,3 +334,47 @@
324
334
  }
325
335
  }
326
336
  }
337
+
338
+ /// A mixin that outputs CSS based on the structure of a Sass map.
339
+
340
+ @mixin clay-map-to-css($map) {
341
+ @each $key, $value in $map {
342
+ @if not clay-is-map-unset($value) {
343
+ @each $nestedKey, $nestedValue in $value {
344
+ @if (type-of($nestedValue) == 'map') {
345
+ $parentSelector: if(
346
+ starts-with($key, '.') or
347
+ starts-with($key, '#') or
348
+ starts-with($key, '@'),
349
+ $key,
350
+ str-insert($key, '.', 1)
351
+ );
352
+
353
+ $nestedMap: (#{$nestedKey}: $nestedValue);
354
+
355
+ @if (starts-with($parentSelector, '@media ')) {
356
+ @media #{clay-str-replace('#{$parentSelector}', '@media ', '')} {
357
+ @include clay-map-to-css($nestedMap);
358
+ }
359
+ } @else {
360
+ #{$parentSelector} {
361
+ @include clay-map-to-css($nestedMap);
362
+ }
363
+ }
364
+ } @else {
365
+ $selector: if(
366
+ starts-with($key, '.') or
367
+ starts-with($key, '#') or
368
+ starts-with($key, '@'),
369
+ $key,
370
+ str-insert($key, '.', 1)
371
+ );
372
+
373
+ #{$selector} {
374
+ @include clay-css($value);
375
+ }
376
+ }
377
+ }
378
+ }
379
+ }
380
+ }
@@ -34,11 +34,19 @@
34
34
  }
35
35
 
36
36
  @at-root {
37
- $selector: if(
38
- variable-exists(cadmin-selector),
39
- clay-insert-after('.cadmin ', '.c-prefers-reduced-motion '),
40
- '.c-prefers-reduced-motion &'
41
- );
37
+ $selector: '.c-prefers-reduced-motion &';
38
+
39
+ @if (variable-exists(cadmin-selector)) {
40
+ $selector: clay-insert-after(
41
+ '.cadmin ',
42
+ '.c-prefers-reduced-motion '
43
+ );
44
+ $selector: clay-insert-after(
45
+ '.cadmin.',
46
+ 'c-prefers-reduced-motion.',
47
+ $selector
48
+ );
49
+ }
42
50
 
43
51
  #{$selector} {
44
52
  transition: none;
@@ -360,6 +360,41 @@ $border-theme-colors: map-deep-merge(
360
360
  $displays: none, inline, inline-block, block, grid, contents, table, table-row,
361
361
  table-cell, flex, inline-flex !default;
362
362
 
363
+ $displays-c-prefers-reduced-motion: () !default;
364
+ $displays-c-prefers-reduced-motion: map-deep-merge(
365
+ (
366
+ d-block-c-prefers-reduced-motion: (
367
+ display: none !important,
368
+ ),
369
+ d-inline-block-c-prefers-reduced-motion: (
370
+ display: none !important,
371
+ ),
372
+ '@media (prefers-reduced-motion: reduce)': (
373
+ d-none-c-prefers-reduced-motion: (
374
+ display: none !important,
375
+ ),
376
+ d-block-c-prefers-reduced-motion: (
377
+ display: block !important,
378
+ ),
379
+ d-inline-block-c-prefers-reduced-motion: (
380
+ display: inline-block !important,
381
+ ),
382
+ ),
383
+ c-prefers-reduced-motion: (
384
+ d-none-c-prefers-reduced-motion: (
385
+ display: none !important,
386
+ ),
387
+ d-block-c-prefers-reduced-motion: (
388
+ display: block !important,
389
+ ),
390
+ d-inline-block-c-prefers-reduced-motion: (
391
+ display: inline-block !important,
392
+ ),
393
+ ),
394
+ ),
395
+ $displays-c-prefers-reduced-motion
396
+ );
397
+
363
398
  // Overflow
364
399
 
365
400
  $overflows: auto, hidden !default;