@clayui/css 3.38.0 → 3.41.0

package/src/scss/mixins/_globals.scss

@@ -9,249 +9,259 @@
 /// @param {Map} $map - A map of `key: value` pairs.
 
 @mixin clay-css($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',
-		'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',
-		'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-shadow',
-		'box-sizing',
-		'caption-side',
-		'clear',
-		'clip',
-		'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-kerning',
-		'font-size',
-		'font-stretch',
-		'font-style',
-		'font-variant',
-		'font-weight',
-		'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',
-		'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',
-		'max-height',
-		'max-width',
-		'min-height',
-		'min-width',
-		'object-fit',
-		'object-position',
-		'opacity',
-		'order',
-		'outline',
-		'outline-color',
-		'outline-offset',
-		'outline-style',
-		'outline-width',
-		'overflow',
-		'overflow-x',
-		'overflow-y',
-		'padding',
-		'padding-bottom',
-		'padding-left',
-		'padding-right',
-		'padding-top',
-		'page-break-after',
-		'page-break-before',
-		'page-break-inside',
-		'perspective',
-		'perspective-origin',
-		'pointer-events',
-		'position',
-		'resize',
-		'right',
-		'scroll-behavior',
-		'scrollbar-width',
-		'table-layout',
-		'text-align',
-		'text-decoration',
-		'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',
-		'word-break',
-		'word-spacing',
-		'writing-mode',
-		'z-index'
-	);
+	@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',
+			'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',
+			'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-shadow',
+			'box-sizing',
+			'caption-side',
+			'clear',
+			'clip',
+			'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-kerning',
+			'font-size',
+			'font-stretch',
+			'font-style',
+			'font-variant',
+			'font-weight',
+			'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',
+			'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',
+			'max-height',
+			'max-width',
+			'min-height',
+			'min-width',
+			'object-fit',
+			'object-position',
+			'opacity',
+			'order',
+			'outline',
+			'outline-color',
+			'outline-offset',
+			'outline-style',
+			'outline-width',
+			'overflow',
+			'overflow-x',
+			'overflow-y',
+			'padding',
+			'padding-bottom',
+			'padding-left',
+			'padding-right',
+			'padding-top',
+			'page-break-after',
+			'page-break-before',
+			'page-break-inside',
+			'perspective',
+			'perspective-origin',
+			'pointer-events',
+			'position',
+			'resize',
+			'right',
+			'scroll-behavior',
+			'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);
+		$enabled: setter(map-get($map, enabled), true);
 
-	@if ($enabled) {
-		@each $key, $value in $map {
-			@if ($value == clay-unset) {
-				$value: null;
-			}
+		@if ($enabled) {
+			@each $key, $value in $map {
+				@if ($value == clay-unset) {
+					$value: null;
+				}
 
-			@if (starts-with($key, '--')) {
-				#{$key}: $value;
-			}
+				@if (starts-with($key, '--')) {
+					#{$key}: $value;
+				}
 
-			@if ($key == 'appearance') {
-				-moz-appearance: $value;
-				-webkit-appearance: $value;
+				@if ($key == 'appearance') {
+					-moz-appearance: $value;
+					-webkit-appearance: $value;
 
-				&::-ms-expand {
-					display: $value;
-				}
+					&::-ms-expand {
+						display: $value;
+					}
 
-				appearance: $value;
-			} @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 == 'transition') {
-				transition: $value;
+					appearance: $value;
+				} @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 == 'transition') {
+					transition: $value;
 
-				@if ($value != 'none' and $value != null) {
-					@media (prefers-reduced-motion: reduce) {
-						transition: none;
+					@if ($value != 'none' and $value != null) {
+						@media (prefers-reduced-motion: reduce) {
+							transition: none;
+						}
 					}
+				} @else if ($key == 'user-select') {
+					-ms-user-select: $value;
+					-moz-user-select: $value;
+					-webkit-user-select: $value;
+					user-select: $value;
+				} @else if (index($properties, $key)) {
+					#{$key}: #{$value};
 				}
-			} @else if ($key == 'user-select') {
-				-ms-user-select: $value;
-				-moz-user-select: $value;
-				-webkit-user-select: $value;
-				user-select: $value;
-			} @else if (index($properties, $key)) {
-				#{$key}: #{$value};
 			}
 		}
 	}

package/src/scss/mixins/_grid.scss

@@ -188,8 +188,8 @@
 	$breakpoints: $grid-breakpoints
 ) {
 	%grid-column {
-		padding-left: $gutter / 2;
-		padding-right: $gutter / 2;
+		padding-left: $gutter * 0.5;
+		padding-right: $gutter * 0.5;
 		position: relative;
 		width: 100%;
 	}
@@ -262,8 +262,8 @@
 @mixin make-container($gutter: $grid-gutter-width) {
 	margin-left: auto;
 	margin-right: auto;
-	padding-left: $gutter / 2;
-	padding-right: $gutter / 2;
+	padding-left: $gutter * 0.5;
+	padding-right: $gutter * 0.5;
 	width: 100%;
 }
 
@@ -290,8 +290,8 @@
 @mixin make-row($gutter: $grid-gutter-width) {
 	display: flex;
 	flex-wrap: wrap;
-	margin-left: -$gutter / 2;
-	margin-right: -$gutter / 2;
+	margin-left: math-sign($gutter * 0.5);
+	margin-right: math-sign($gutter * 0.5);
 }
 
 /// A Bootstrap 4 mixin. This mixin is deprecated, not used in Bootstrap 4.
@@ -299,8 +299,8 @@
 /// @param {Number} $gutter[$grid-gutter-width]
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
-	padding-left: $gutter / 2;
-	padding-right: $gutter / 2;
+	padding-left: $gutter * 0.5;
+	padding-right: $gutter * 0.5;
 	position: relative;
 	width: 100%;
 }
@@ -311,8 +311,8 @@
 /// @param {Number} $columns[$grid-columns]
 
 @mixin make-col($size, $columns: $grid-columns) {
-	flex: 0 0 percentage($size / $columns);
-	max-width: percentage($size / $columns);
+	flex: 0 0 calc(#{$size} / #{$columns} * 100%);
+	max-width: calc(#{$size} / #{$columns} * 100%);
 }
 
 /// A Bootstrap 4 mixin that generates styles for `.col-{bp}-auto` classes. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
@@ -332,9 +332,7 @@
 /// @param {Number} $columns[$grid-columns]
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-	$num: $size / $columns;
-
-	margin-left: if($num == 0, 0, percentage($num));
+	margin-left: calc(#{$size} / #{$columns} * 100%);
 }
 
 /// A Bootstrap 4 mixin that generates styles for `.row-cols-{bp}-*` classes. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
@@ -343,7 +341,7 @@
 
 @mixin row-cols($count) {
 	& > * {
-		flex: 0 0 100% / $count;
-		max-width: 100% / $count;
+		flex: 0 0 calc(100% / #{$count});
+		max-width: calc(100% / #{$count});
 	}
 }