@clayui/css 3.158.0 → 3.160.0

package/src/scss/variables/_utilities.scss

@@ -18,18 +18,22 @@ $inline-scroller-max-height: 125px !default;
 $inline-scroller: () !default;
 $inline-scroller: map-deep-merge(
 	(
-		-webkit-overflow-scrolling: touch,
 		list-style: none,
-		margin: 0,
+		margin: 0rem,
 		max-height: $inline-scroller-max-height,
 		overflow: auto,
-		padding: 0,
+
+		-webkit-overflow-scrolling: touch,
+
+		padding: 0rem,
+
 		focus: (
 			outline: 0,
 		),
+
 		focus-visible: (
 			box-shadow: $component-focus-box-shadow,
-		)
+		),
 	),
 	$inline-scroller
 );
@@ -46,6 +50,7 @@ $autofit-padded-no-gutters-sm: map-merge(
 	(
 		margin: -0.25rem,
 		width: auto,
+
 		autofit-col: (
 			padding: 0.25rem,
 		),
@@ -77,7 +82,7 @@ $close: map-deep-merge(
 		justify-content: center,
 		line-height: 1,
 		opacity: 0.5,
-		padding: 0,
+		padding: 0rem,
 		text-align: center,
 		text-shadow: $close-text-shadow,
 		transition: #{color 0.15s ease-in-out,
@@ -85,27 +90,32 @@ $close: map-deep-merge(
 		border-color 0.15s ease-in-out,
 		box-shadow 0.15s ease-in-out},
 		width: 2rem,
+
 		hover: (
 			color: $close-color,
 			opacity: 0.75,
 			text-decoration: none,
 		),
+
 		focus: (
 			box-shadow: $input-btn-focus-box-shadow,
 			outline: 0,
 			opacity: 0.75,
 		),
+
 		disabled: (
 			box-shadow: none,
 			cursor: $disabled-cursor,
 			opacity: 0.25,
 			outline: 0,
+
 			active: (
 				pointer-events: none,
 			),
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
 	),
 	$close
@@ -168,12 +178,15 @@ $inline-item: map-deep-merge(
 		align-items: center,
 		display: inline-flex,
 		vertical-align: middle,
+
 		inline-item: (
 			display: inline,
 		),
+
 		lexicon-icon: (
 			margin-top: $inline-item-lexicon-icon-margin-top,
 		),
+
 		loading-animation: (
 			font-size: $inline-item-loading-animation-font-size,
 		),
@@ -207,121 +220,160 @@ $bg-theme-colors: map-deep-merge(
 	(
 		'blue': (
 			background-color: $blue !important,
+
 			hover: (
 				background-color: clay-darken($blue, 10%) !important,
 			),
 		),
+
 		'indigo': (
 			background-color: $indigo !important,
+
 			hover: (
 				background-color: clay-darken($indigo, 10%) !important,
 			),
 		),
+
 		'purple': (
 			background-color: $purple !important,
+
 			hover: (
 				background-color: clay-darken($purple, 10%) !important,
 			),
 		),
+
 		'pink': (
 			background-color: $pink !important,
+
 			hover: (
 				background-color: clay-darken($pink, 10%) !important,
 			),
 		),
+
 		'red': (
 			background-color: $red !important,
+
 			hover: (
 				background-color: clay-darken($red, 10%) !important,
 			),
 		),
+
 		'orange': (
 			background-color: $orange !important,
+
 			hover: (
 				background-color: clay-darken($orange, 10%) !important,
 			),
 		),
+
 		'yellow': (
 			background-color: $yellow !important,
+
 			hover: (
 				background-color: clay-darken($yellow, 10%) !important,
 			),
 		),
+
 		'green': (
 			background-color: $green !important,
+
 			hover: (
 				background-color: clay-darken($green, 10%) !important,
 			),
 		),
+
 		'teal': (
 			background-color: $teal !important,
+
 			hover: (
 				background-color: clay-darken($teal, 10%) !important,
 			),
 		),
+
 		'cyan': (
 			background-color: $cyan !important,
+
 			hover: (
 				background-color: clay-darken($cyan, 10%) !important,
 			),
 		),
+
 		'primary': (
 			background-color: $primary !important,
+
 			hover: (
 				background-color: clay-darken($primary, 10%) !important,
 			),
 		),
+
 		'primary-l3': (
 			background-color: $primary-l3 !important,
+
 			hover: (
 				background-color: clay-darken($primary-l3, 10%) !important,
 			),
 		),
+
 		'secondary': (
 			background-color: $secondary !important,
+
 			hover: (
 				background-color: clay-darken($secondary, 10%) !important,
 			),
 		),
+
 		'success': (
 			background-color: $success !important,
+
 			hover: (
 				background-color: clay-darken($success, 10%) !important,
 			),
 		),
+
 		'info': (
 			background-color: $info !important,
+
 			hover: (
 				background-color: clay-darken($info, 10%) !important,
 			),
 		),
+
 		'warning': (
 			background-color: $warning !important,
+
 			hover: (
 				background-color: clay-darken($warning, 10%) !important,
 			),
 		),
+
 		'danger': (
 			background-color: $danger !important,
+
 			hover: (
 				background-color: clay-darken($danger, 10%) !important,
 			),
 		),
+
 		'light': (
 			background-color: $light !important,
+
 			hover: (
 				background-color: clay-darken($light, 10%) !important,
 			),
 		),
+
 		'dark': (
 			background-color: $dark !important,
+
 			hover: (
 				background-color: clay-darken($dark, 10%) !important,
 			),
 		),
+
 		'white': (
 			background-color: $white !important,
 		),
+
 		'transparent': (
 			background-color: transparent !important,
 		),
@@ -341,6 +393,7 @@ $bg-gradient-theme-colors: map-deep-merge(
 				)
 				repeat-x !important,
 		),
+
 		'secondary': (
 			background: $secondary
 				linear-gradient(
@@ -350,6 +403,7 @@ $bg-gradient-theme-colors: map-deep-merge(
 				)
 				repeat-x !important,
 		),
+
 		'success': (
 			background: $success
 				linear-gradient(
@@ -359,11 +413,13 @@ $bg-gradient-theme-colors: map-deep-merge(
 				)
 				repeat-x !important,
 		),
+
 		'info': (
 			background: $info
 				linear-gradient(180deg, clay-mix($body-bg, $info, 15%), $info)
 				repeat-x !important,
 		),
+
 		'warning': (
 			background: $warning
 				linear-gradient(
@@ -373,6 +429,7 @@ $bg-gradient-theme-colors: map-deep-merge(
 				)
 				repeat-x !important,
 		),
+
 		'danger': (
 			background: $danger
 				linear-gradient(
@@ -382,11 +439,13 @@ $bg-gradient-theme-colors: map-deep-merge(
 				)
 				repeat-x !important,
 		),
+
 		'light': (
 			background: $light
 				linear-gradient(180deg, clay-mix($body-bg, $light, 15%), $light)
 				repeat-x !important,
 		),
+
 		'dark': (
 			background: $dark
 				linear-gradient(180deg, clay-mix($body-bg, $dark, 15%), $dark)
@@ -404,27 +463,35 @@ $border-theme-colors: map-deep-merge(
 		'primary': (
 			border-color: $primary !important,
 		),
+
 		'secondary': (
 			border-color: $secondary !important,
 		),
+
 		'success': (
 			border-color: $success !important,
 		),
+
 		'info': (
 			border-color: $info !important,
 		),
+
 		'warning': (
 			border-color: $warning !important,
 		),
+
 		'danger': (
 			border-color: $danger !important,
 		),
+
 		'light': (
 			border-color: $light !important,
 		),
+
 		'dark': (
 			border-color: $dark !important,
 		),
+
 		'white': (
 			border-color: $white !important,
 		),
@@ -494,14 +561,17 @@ $text-theme-colors: map-deep-merge(
 	(
 		'blue': (
 			color: $blue !important,
+
 			hover: (
 				color:
 					clay-darken($blue, $emphasized-link-hover-darken-percentage)
 					!important,
 			),
 		),
+
 		'indigo': (
 			color: $indigo !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -511,8 +581,10 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'purple': (
 			color: $purple !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -522,24 +594,30 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'pink': (
 			color: $pink !important,
+
 			hover: (
 				color:
 					clay-darken($pink, $emphasized-link-hover-darken-percentage)
 					!important,
 			),
 		),
+
 		'red': (
 			color: $red !important,
+
 			hover: (
 				color:
 					clay-darken($red, $emphasized-link-hover-darken-percentage)
 					!important,
 			),
 		),
+
 		'orange': (
 			color: $orange !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -549,8 +627,10 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'yellow': (
 			color: $yellow !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -560,8 +640,10 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'green': (
 			color: $green !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -571,24 +653,30 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'teal': (
 			color: $teal !important,
+
 			hover: (
 				color:
 					clay-darken($teal, $emphasized-link-hover-darken-percentage)
 					!important,
 			),
 		),
+
 		'cyan': (
 			color: $cyan !important,
+
 			hover: (
 				color:
 					clay-darken($cyan, $emphasized-link-hover-darken-percentage)
 					!important,
 			),
 		),
+
 		'primary': (
 			color: $primary !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -598,8 +686,10 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'secondary': (
 			color: $secondary !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -609,8 +699,10 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'success': (
 			color: $success !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -620,16 +712,20 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'info': (
 			color: $info !important,
+
 			hover: (
 				color:
 					clay-darken($info, $emphasized-link-hover-darken-percentage)
 					!important,
 			),
 		),
+
 		'warning': (
 			color: $warning !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -639,8 +735,10 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'danger': (
 			color: $danger !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -650,8 +748,10 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'light': (
 			color: $light !important,
+
 			hover: (
 				color:
 					clay-darken(
@@ -661,23 +761,29 @@ $text-theme-colors: map-deep-merge(
 					!important,
 			),
 		),
+
 		'dark': (
 			color: $dark !important,
+
 			hover: (
 				color:
 					clay-darken($dark, $emphasized-link-hover-darken-percentage)
 					!important,
 			),
 		),
+
 		'body': (
 			color: $body-color !important,
 		),
+
 		'muted': (
 			color: $text-muted !important,
 		),
+
 		'black-50': (
 			color: rgba($black, 0.5) !important,
 		),
+
 		'white-50': (
 			color: rgba($white, 0.5) !important,
 		),
@@ -691,6 +797,7 @@ $text-decorations: map-deep-merge(
 		'.text-none, .text-decoration-none': (
 			text-decoration: none !important,
 		),
+
 		'.text-underline, .text-decoration-underline': (
 			text-decoration: underline !important,
 		),
@@ -718,6 +825,7 @@ $text-truncate-inline: map-deep-merge(
 	(
 		display: inline-flex,
 		max-width: 100%,
+
 		text-truncate: (
 			display: inline-block,
 			max-width: 100%,
@@ -740,6 +848,7 @@ $c-prefers-link-underline: map-deep-merge(
 			'[href]:not(.disabled):not([role="button"])': (
 				text-decoration: underline !important,
 			),
+
 			'.btn-monospaced, .nav-btn-monospaced, .nav-link-monospaced': (
 				'&[href]:not(.disabled):not([role="button"]):not([role="tab"])::after':
 				(
@@ -748,6 +857,7 @@ $c-prefers-link-underline: map-deep-merge(
 					text-decoration: underline !important,
 				),
 			),
+
 			'.multi-step-item.active, .multi-step-item.complete, .multi-step-item.error, .dropdown':
 			(
 				'.multi-step-icon[href]:not([role="button"])::after': (
@@ -756,6 +866,7 @@ $c-prefers-link-underline: map-deep-merge(
 					text-decoration: underline !important,
 				),
 			),
+
 			'.multi-step-item.disabled .multi-step-icon[href]:not([role="button"])::after':
 			(
 				text-decoration: none !important,
@@ -781,27 +892,34 @@ $displays-c-prefers-reduced-motion: map-deep-merge(
 		d-block-c-prefers-reduced-motion: (
 			display: none !important,
 		),
+
 		d-inline-block-c-prefers-reduced-motion: (
 			display: none !important,
 		),
+
 		'@media (prefers-reduced-motion: reduce)': (
 			d-none-c-prefers-reduced-motion: (
 				display: none !important,
 			),
+
 			d-block-c-prefers-reduced-motion: (
 				display: block !important,
 			),
+
 			d-inline-block-c-prefers-reduced-motion: (
 				display: inline-block !important,
 			),
 		),
+
 		c-prefers-reduced-motion: (
 			d-none-c-prefers-reduced-motion: (
 				display: none !important,
 			),
+
 			d-block-c-prefers-reduced-motion: (
 				display: block !important,
 			),
+
 			d-inline-block-c-prefers-reduced-motion: (
 				display: inline-block !important,
 			),