@clayui/css 3.158.0 → 3.160.0

package/src/scss/mixins/_forms.scss

@@ -526,6 +526,47 @@
 			)
 		);
 
+		$base: map-remove(
+			$base,
+			'bg',
+			'bg-clip',
+			'bg-image',
+			'bg-position',
+			'bg-repeat',
+			'bg-size',
+			'disabled-bg',
+			'disabled-bg-image',
+			'disabled-border-color',
+			'disabled-box-shadow',
+			'disabled-color',
+			'disabled-cursor',
+			'disabled-opacity',
+			'disabled-placeholder-color',
+			'focus-bg',
+			'focus-bg-image',
+			'focus-border-color',
+			'focus-box-shadow',
+			'focus-color',
+			'focus-placeholder-color',
+			'hover-bg',
+			'hover-border-color',
+			'hover-box-shadow',
+			'hover-color',
+			'hover-placeholder-color',
+			'placeholder-color',
+			'placeholder-opacity',
+			'readonly-bg',
+			'readonly-bg-image',
+			'readonly-border-color',
+			'readonly-box-shadow',
+			'readonly-color',
+			'readonly-cursor',
+			'readonly-opacity',
+			'readonly-placeholder-color',
+			'selection-bg',
+			'selection-color'
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);
@@ -925,6 +966,32 @@
 
 		$mobile: setter(map-get($map, mobile), ());
 
+		$base: map-remove(
+			$base,
+			'bg',
+			'bg-clip',
+			'bg-image',
+			'bg-position',
+			'bg-repeat',
+			'bg-size',
+			'disabled-bg',
+			'disabled-bg-image',
+			'disabled-border-color',
+			'disabled-box-shadow',
+			'disabled-color',
+			'disabled-cursor',
+			'disabled-opacity',
+			'focus-bg',
+			'focus-bg-image',
+			'focus-border-color',
+			'focus-box-shadow',
+			'focus-color',
+			'hover-bg',
+			'hover-border-color',
+			'hover-box-shadow',
+			'hover-color'
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);
@@ -2528,6 +2595,87 @@
 			)
 		);
 
+		$map: map-remove(
+			$map,
+			'data-label-after-content',
+			'data-label-after-right',
+			'data-label-before-content',
+			'data-label-before-left',
+			'data-label-font-size',
+			'data-label-font-weight',
+			'data-label-line-height',
+			'data-label-margin-top',
+			'data-label-position',
+			'data-label-spacer',
+			'data-label-text-align',
+			'data-label-top',
+			'data-label-width',
+			'disabled-color',
+			'disabled-cursor',
+			'disabled-progress-bg',
+			'disabled-thumb-bg',
+			'disabled-thumb-box-shadow',
+			'disabled-track-bg',
+			'focus-outline',
+			'focus-thumb-box-shadow',
+			'form-control-appearance',
+			'form-control-bg',
+			'form-control-height',
+			'form-control-position',
+			'form-control-z-index',
+			'hover-cursor',
+			'hover-thumb-bg',
+			'progress-bg',
+			'progress-bg-image',
+			'progress-border-color',
+			'progress-border-radius',
+			'progress-border-style',
+			'progress-border-width',
+			'progress-height',
+			'progress-margin-top',
+			'progress-position',
+			'progress-top',
+			'progress-width',
+			'thumb-bg',
+			'thumb-bg-image',
+			'thumb-border-color',
+			'thumb-border-radius',
+			'thumb-border-style',
+			'thumb-border-width',
+			'thumb-box-shadow',
+			'thumb-height',
+			'thumb-width',
+			'tooltip-arrow-border-color',
+			'tooltip-arrow-border-style',
+			'tooltip-arrow-border-width',
+			'tooltip-arrow-offset',
+			'tooltip-arrow-size',
+			'tooltip-bg',
+			'tooltip-color',
+			'tooltip-line-height',
+			'tooltip-padding',
+			'tooltip-padding-bottom',
+			'tooltip-padding-left',
+			'tooltip-padding-right',
+			'tooltip-padding-top',
+			'tooltip-spacer-x',
+			'tooltip-spacer-y',
+			'tooltip-transition',
+			'tooltip-visibility',
+			'tooltip-white-space',
+			'track-bg',
+			'track-bg-image',
+			'track-border-color',
+			'track-border-radius',
+			'track-border-style',
+			'track-border-width',
+			'track-height',
+			'track-margin-top',
+			'track-position',
+			'track-top',
+			'track-width'
+		);
+
 		@if ($enabled) {
 			@if (length($map) != 0) {
 				@include clay-css($map);
@@ -3008,6 +3156,8 @@
 			)
 		);
 
+		$map: map-remove($map, 'tooltip-arrow-offset');
+
 		@if ($enabled) {
 			@if (length($map) != 0) {
 				@include clay-css($map);

package/src/scss/mixins/_globals.scss

@@ -10,269 +10,6 @@
 
 @mixin clay-css($map) {
 	@if (type-of($map) == 'map') {
-		$properties: (
-			'-moz-appearance',
-			'-moz-osx-font-smoothing',
-			'-ms-overflow-style',
-			'-webkit-appearance',
-			'-webkit-font-smoothing',
-			'-webkit-overflow-scrolling',
-			'-webkit-tap-highlight-color',
-			'-webkit-text-size-adjust',
-			'accent-color',
-			'align-content',
-			'align-items',
-			'align-self',
-			'animation',
-			'animation-delay',
-			'animation-direction',
-			'animation-duration',
-			'animation-fill-mode',
-			'animation-iteration-count',
-			'animation-name',
-			'animation-play-state',
-			'animation-timing-function',
-			'aspect-ratio',
-			'backdrop-filter',
-			'backface-visibility',
-			'background',
-			'background-attachment',
-			'background-blend-mode',
-			'background-clip',
-			'background-color',
-			'background-image',
-			'background-origin',
-			'background-position',
-			'background-repeat',
-			'background-size',
-			'border',
-			'border-bottom',
-			'border-bottom-color',
-			'border-bottom-left-radius',
-			'border-bottom-right-radius',
-			'border-bottom-style',
-			'border-bottom-width',
-			'border-collapse',
-			'border-color',
-			'border-image',
-			'border-image-outset',
-			'border-image-repeat',
-			'border-image-slice',
-			'border-image-source',
-			'border-image-width',
-			'border-left',
-			'border-left-color',
-			'border-left-style',
-			'border-left-width',
-			'border-radius',
-			'border-right',
-			'border-right-color',
-			'border-right-style',
-			'border-right-width',
-			'border-spacing',
-			'border-style',
-			'border-top',
-			'border-top-color',
-			'border-top-left-radius',
-			'border-top-right-radius',
-			'border-top-style',
-			'border-top-width',
-			'border-width',
-			'bottom',
-			'box-decoration-break',
-			'box-shadow',
-			'box-sizing',
-			'caption-side',
-			'caret-color',
-			'clear',
-			'clip',
-			'-webkit-clip-path',
-			'clip-path',
-			'contain',
-			'container',
-			'container-name',
-			'container-type',
-			'color',
-			'column-count',
-			'column-fill',
-			'column-gap',
-			'column-rule',
-			'column-rule-color',
-			'column-rule-style',
-			'column-rule-width',
-			'column-span',
-			'column-width',
-			'columns',
-			'content',
-			'counter-increment',
-			'counter-reset',
-			'cursor',
-			'direction',
-			'display',
-			'empty-cells',
-			'fill',
-			'filter',
-			'flex',
-			'flex-basis',
-			'flex-direction',
-			'flex-flow',
-			'flex-grow',
-			'flex-shrink',
-			'flex-wrap',
-			'float',
-			'font',
-			'font-family',
-			'font-feature-settings',
-			'font-kerning',
-			'font-size',
-			'font-stretch',
-			'font-style',
-			'font-variant',
-			'font-variant-numeric',
-			'font-weight',
-			'gap',
-			'grid',
-			'grid-area',
-			'grid-auto-columns',
-			'grid-auto-flow',
-			'grid-auto-rows',
-			'grid-column',
-			'grid-column-end',
-			'grid-column-gap',
-			'grid-column-start',
-			'grid-gap',
-			'grid-row',
-			'grid-row-end',
-			'grid-row-gap',
-			'grid-row-start',
-			'grid-template',
-			'grid-template-areas',
-			'grid-template-columns',
-			'grid-template-rows',
-			'height',
-			'hyphens',
-			'inset',
-			'isolation',
-			'justify-content',
-			'left',
-			'letter-spacing',
-			'line-height',
-			'list-style',
-			'list-style-image',
-			'list-style-position',
-			'list-style-type',
-			'margin',
-			'margin-bottom',
-			'margin-left',
-			'margin-right',
-			'margin-top',
-			'-webkit-mask',
-			'-webkit-mask-clip',
-			'-webkit-mask-composite',
-			'-webkit-mask-image',
-			'-webkit-mask-mode',
-			'-webkit-mask-origin',
-			'-webkit-mask-position',
-			'-webkit-mask-repeat',
-			'-webkit-mask-size',
-			'mask',
-			'mask-clip',
-			'mask-composite',
-			'mask-image',
-			'mask-mode',
-			'mask-origin',
-			'mask-position',
-			'mask-repeat',
-			'mask-size',
-			'max-height',
-			'max-width',
-			'min-height',
-			'min-width',
-			'mix-blend-mode',
-			'object-fit',
-			'object-position',
-			'opacity',
-			'order',
-			'outline',
-			'outline-color',
-			'outline-offset',
-			'outline-style',
-			'outline-width',
-			'overflow',
-			'overflow-x',
-			'overflow-y',
-			'overscroll-behavior',
-			'overscroll-behavior-x',
-			'overscroll-behavior-y',
-			'padding',
-			'padding-bottom',
-			'padding-left',
-			'padding-right',
-			'padding-top',
-			'page-break-after',
-			'page-break-before',
-			'page-break-inside',
-			'perspective',
-			'perspective-origin',
-			'place-content',
-			'place-items',
-			'place-self',
-			'pointer-events',
-			'position',
-			'resize',
-			'right',
-			'row-gap',
-			'scroll-behavior',
-			'scroll-margin',
-			'scroll-margin-bottom',
-			'scroll-margin-left',
-			'scroll-margin-right',
-			'scroll-margin-top',
-			'scroll-padding',
-			'scroll-padding-bottom',
-			'scroll-padding-left',
-			'scroll-padding-right',
-			'scroll-padding-top',
-			'scroll-snap-align',
-			'scroll-snap-stop',
-			'scroll-snap-type',
-			'scrollbar-width',
-			'table-layout',
-			'text-align',
-			'text-decoration',
-			'text-decoration-color',
-			'text-decoration-line',
-			'text-decoration-skip-ink',
-			'text-decoration-style',
-			'text-decoration-thickness',
-			'text-underline-offset',
-			'text-underline-position',
-			'text-indent',
-			'text-justify',
-			'text-overflow',
-			'text-shadow',
-			'text-transform',
-			'top',
-			'touch-action',
-			'transform',
-			'transform-origin',
-			'transform-style',
-			'transition',
-			'transition-delay',
-			'transition-duration',
-			'transition-property',
-			'transition-timing-function',
-			'vertical-align',
-			'visibility',
-			'white-space',
-			'width',
-			'will-change',
-			'word-break',
-			'word-spacing',
-			'writing-mode',
-			'z-index'
-		);
-
 		$enabled: setter(map-get($map, enabled), true);
 
 		$_prefers-reduced-motion-media-query: if(
@@ -289,113 +26,119 @@
 
 		@if ($enabled) {
 			@each $key, $value in $map {
-				@if ($value == clay-unset or $value == c-unset) {
-					$value: null;
-				}
+				// $variable: (); defaults to type `list`, convert empty maps
+				// to type map
 
-				@if (starts-with($key, '--')) {
-					#{$key}: $value;
+				@if (length($value) == 0 and type-of($value) == 'list') {
+					$value: map-new();
 				}
 
-				@if ($key == 'appearance') {
-					-moz-appearance: $value;
-					-webkit-appearance: $value;
+				@if (type-of($value) != 'map') {
+					@if ($key != 'enabled') {
+						@if ($value == clay-unset or $value == c-unset) {
+							$value: null;
+						} @else if ($key == 'appearance') {
+							-moz-appearance: $value;
+							-webkit-appearance: $value;
 
-					&::-ms-expand {
-						display: $value;
-					}
-
-					appearance: $value;
-				} @else if ($key == 'animation') {
-					animation: $value;
-
-					@if ($value != 'none' and $value != null) {
-						@if ($_prefers-reduced-motion-media-query) {
-							@media (prefers-reduced-motion: reduce) {
-								animation: none;
+							&::-ms-expand {
+								display: $value;
 							}
-						}
 
-						@at-root {
-							$selector: '.c-prefers-reduced-motion &';
-
-							@if (variable-exists(cadmin-selector)) {
-								$selector: clay-insert-before(
-									'.cadmin',
-									'.c-prefers-reduced-motion '
-								);
+							appearance: $value;
+						} @else if ($key == 'animation') {
+							animation: $value;
+
+							@if ($value != 'none' and $value != null) {
+								@if ($_prefers-reduced-motion-media-query) {
+									@media (prefers-reduced-motion: reduce) {
+										animation: none;
+									}
+								}
+
+								@at-root {
+									$selector: '.c-prefers-reduced-motion &';
+
+									@if (variable-exists(cadmin-selector)) {
+										$selector: clay-insert-before(
+											'.cadmin',
+											'.c-prefers-reduced-motion '
+										);
+									}
+
+									#{$selector} {
+										animation: none;
+									}
+								}
 							}
-
-							#{$selector} {
-								animation: none;
+						} @else if ($key == 'content') {
+							content: $value;
+						} @else if ($key == 'word-wrap') {
+							overflow-wrap: $value;
+							word-wrap: $value;
+						} @else if ($key == 'overflow-wrap') {
+							overflow-wrap: $value;
+							word-wrap: $value;
+						} @else if ($key == 'text-overflow') {
+							@if ($value == 'ellipsis') {
+								text-overflow: $value;
+
+								@at-root {
+									$selector: '.c-prefers-expanded-text &';
+
+									@if (variable-exists(cadmin-selector)) {
+										$selector: clay-insert-before(
+											'.cadmin',
+											'.c-prefers-expanded-text '
+										);
+									}
+
+									#{$selector} {
+										@extend %c-prefers-expanded-text
+												!optional;
+									}
+								}
 							}
-						}
-					}
-				} @else if ($key == 'content') {
-					content: $value;
-				} @else if ($key == 'word-wrap') {
-					overflow-wrap: $value;
-					word-wrap: $value;
-				} @else if ($key == 'overflow-wrap') {
-					overflow-wrap: $value;
-					word-wrap: $value;
-				} @else if ($key == 'text-overflow') {
-					@if ($value == 'ellipsis') {
-						text-overflow: $value;
-
-						@at-root {
-							$selector: '.c-prefers-expanded-text &';
-
-							@if (variable-exists(cadmin-selector)) {
-								$selector: clay-insert-before(
-									'.cadmin',
-									'.c-prefers-expanded-text '
-								);
+						} @else if ($key == 'transition') {
+							transition: $value;
+
+							@if ($value != 'none' and $value != null) {
+								@if ($_prefers-reduced-motion-media-query) {
+									@media (prefers-reduced-motion: reduce) {
+										transition: none;
+									}
+								}
+
+								@at-root {
+									$selector: '.c-prefers-reduced-motion &';
+
+									@if (variable-exists(cadmin-selector)) {
+										$selector: clay-insert-before(
+											'.cadmin',
+											'.c-prefers-reduced-motion '
+										);
+									}
+
+									#{$selector} {
+										transition: none;
+									}
+								}
 							}
-
-							#{$selector} {
-								@extend %c-prefers-expanded-text !optional;
-							}
-						}
-					}
-				} @else if ($key == 'transition') {
-					transition: $value;
-
-					@if ($value != 'none' and $value != null) {
-						@if ($_prefers-reduced-motion-media-query) {
-							@media (prefers-reduced-motion: reduce) {
-								transition: none;
-							}
-						}
-
-						@at-root {
-							$selector: '.c-prefers-reduced-motion &';
-
-							@if (variable-exists(cadmin-selector)) {
-								$selector: clay-insert-before(
-									'.cadmin',
-									'.c-prefers-reduced-motion '
-								);
-							}
-
-							#{$selector} {
-								transition: none;
+						} @else if ($key == 'extend') {
+							@extend #{$value} !optional;
+						} @else if ($key == 'user-select') {
+							-ms-user-select: $value;
+							-moz-user-select: $value;
+							-webkit-user-select: $value;
+							user-select: $value;
+						} @else if ($key == 'aspect-ratio') {
+							@if (type-of($value) != 'map') {
+								aspect-ratio: $value;
 							}
+						} @else {
+							#{$key}: #{$value};
 						}
 					}
-				} @else if ($key == 'extend') {
-					@extend #{$value} !optional;
-				} @else if ($key == 'user-select') {
-					-ms-user-select: $value;
-					-moz-user-select: $value;
-					-webkit-user-select: $value;
-					user-select: $value;
-				} @else if ($key == 'aspect-ratio') {
-					@if (type-of($value) != 'map') {
-						aspect-ratio: $value;
-					}
-				} @else if (index($properties, $key)) {
-					#{$key}: #{$value};
 				}
 			}