@clayui/css 3.94.0 → 3.95.1

package/src/scss/components/_aspect-ratio.scss

@@ -160,14 +160,14 @@
 
 // aspect-ratio-#-to-#
 
-@each $selector, $value in $aspect-ratio-sizes {
+@each $size, $value in $aspect-ratio-sizes {
 	@if not clay-is-map-unset($value) {
 		$selector: if(
-			starts-with($selector, '.') or
-				starts-with($selector, '#') or
-				starts-with($selector, '%'),
-			$selector,
-			str-insert($selector, '.', 1)
+			starts-with($size, '.') or
+				starts-with($size, '#') or
+				starts-with($size, '%'),
+			$size,
+			str-insert($size, '.', 1)
 		);
 
 		@if (starts-with($selector, '%')) {
@@ -181,12 +181,8 @@
 			#{$selector} {
 				@include clay-css($value);
 			}
-		} @else {
-			$placeholder: str-insert(
-				str-slice($selector, 2, str-length($selector)),
-				'%',
-				1
-			);
+		} @else if (starts-with($size, 'aspect-ratio-')) {
+			$placeholder: '%#{$size}';
 
 			#{$placeholder} {
 				@include clay-aspect-ratio(
@@ -198,6 +194,13 @@
 			#{$selector} {
 				@extend #{$placeholder} !optional;
 			}
+		} @else {
+			#{$selector} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
 		}
 	}
 }

package/src/scss/components/_badges.scss

@@ -109,23 +109,26 @@
 
 @each $color, $value in $badge-palette {
 	@if not clay-is-map-unset($value) {
+		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
+			'danger', 'dark', 'light';
+
 		$selector: if(
-			starts-with($color, '.') or
-				starts-with($color, '#') or
-				starts-with($color, '%'),
-			$color,
-			if(
-				starts-with($color, 'badge'),
-				str-insert($color, '.', 1),
-				str-insert($color, '.badge-', 1)
-			)
+			index($deprecated-keys, '#{$color}') != null,
+			str-insert($color, '.badge-', 1),
+			if(starts-with($color, 'badge'), str-insert($color, '.', 1), $color)
 		);
 
 		@if (starts-with($color, '%') or map-get($value, extend)) {
 			#{$selector} {
 				@include clay-badge-variant($value);
 			}
-		} @else {
+		} @else if
+			(
+				starts-with($color, 'badge') or
+					index($deprecated-keys, '#{$color}') !=
+					null
+			)
+		{
 			$placeholder: if(
 				starts-with($color, '.') or starts-with($color, '#'),
 				'%#{str-slice($color, 2)}',
@@ -139,6 +142,10 @@
 			#{$selector} {
 				@extend #{$placeholder} !optional;
 			}
+		} @else {
+			#{$selector} {
+				@include clay-badge-variant($value);
+			}
 		}
 	}
 }

package/src/scss/components/_buttons.scss

@@ -30,12 +30,8 @@ fieldset:disabled a.btn {
 			#{$selector} {
 				@include clay-button-variant($value);
 			}
-		} @else {
-			$placeholder: if(
-				starts-with($size, 'btn-'),
-				'%clay-#{$size}',
-				'%#{str-slice($size, 2)}'
-			);
+		} @else if (starts-with($size, 'btn-')) {
+			$placeholder: '%clay-#{$size}';
 
 			#{$placeholder} {
 				@include clay-button-variant($value);
@@ -44,6 +40,10 @@ fieldset:disabled a.btn {
 			#{$selector} {
 				@extend #{$placeholder} !optional;
 			}
+		} @else {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
 		}
 	}
 }
@@ -97,12 +97,8 @@ input[type='button'] {
 			#{$selector} {
 				@include clay-button-variant($value);
 			}
-		} @else {
-			$placeholder: if(
-				starts-with($size, 'btn-monospaced'),
-				'%clay-#{$size}',
-				'%#{str-slice($size, 2)}'
-			);
+		} @else if (starts-with($size, 'btn-monospaced')) {
+			$placeholder: '%clay-#{$size}';
 
 			#{$placeholder} {
 				@include clay-button-variant($value);
@@ -111,6 +107,10 @@ input[type='button'] {
 			#{$selector} {
 				@extend #{$placeholder} !optional;
 			}
+		} @else {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
 		}
 	}
 }
@@ -135,7 +135,7 @@ input[type='button'] {
 			#{$selector} {
 				@include clay-button-variant($value);
 			}
-		} @else {
+		} @else if (starts-with($color, 'btn-')) {
 			$placeholder: '%#{str-slice($selector, 2)}';
 
 			$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
@@ -151,6 +151,10 @@ input[type='button'] {
 			#{$placeholder-focus} {
 				@include clay-button-variant(map-get($value, focus));
 			}
+		} @else {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
 		}
 	}
 }
@@ -175,7 +179,7 @@ input[type='button'] {
 			#{$selector} {
 				@include clay-button-variant($value);
 			}
-		} @else {
+		} @else if (starts-with($color, 'btn-outline')) {
 			$placeholder: '%#{str-slice($selector, 2)}';
 
 			$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
@@ -191,6 +195,10 @@ input[type='button'] {
 			#{$placeholder-focus} {
 				@include clay-button-variant(map-get($value, focus));
 			}
+		} @else {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
 		}
 	}
 }

package/src/scss/components/_forms.scss

@@ -297,14 +297,16 @@ select.form-control[multiple] {
 // Form Control Select Variants
 
 @each $key, $value in $form-control-select-palette {
-	$selector: if(
-		starts-with($key, '.') or starts-with($key, '#'),
-		$key,
-		str-insert($key, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-select-variant($value);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or starts-with($key, '#'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-select-variant($value);
+		}
 	}
 }
 

package/src/scss/components/_labels.scss

@@ -88,26 +88,22 @@
 
 // Label Sizes
 
-@each $selector, $value in $label-sizes {
+@each $size, $value in $label-sizes {
 	@if not clay-is-map-unset($value) {
 		$selector: if(
-			starts-with($selector, '.') or
-				starts-with($selector, '#') or
-				starts-with($selector, '%'),
-			$selector,
-			str-insert($selector, '.', 1)
+			starts-with($size, '.') or
+				starts-with($size, '#') or
+				starts-with($size, '%'),
+			$size,
+			str-insert($size, '.', 1)
 		);
 
-		@if (starts-with($selector, '%') or map-get($value, extend)) {
+		@if (starts-with($size, '%') or map-get($value, extend)) {
 			#{$selector} {
 				@include clay-label-variant($value);
 			}
-		} @else {
-			$placeholder: if(
-				starts-with($selector, '.') or starts-with($selector, '#'),
-				'%#{str-slice($selector, 2)}',
-				'%#{$selector}'
-			);
+		} @else if (starts-with($size, 'label-')) {
+			$placeholder: '%#{size}';
 
 			#{$placeholder} {
 				@include clay-label-variant($value);
@@ -116,6 +112,10 @@
 			#{$selector} {
 				@extend #{$placeholder} !optional;
 			}
+		} @else {
+			#{$selector} {
+				@include clay-label-variant($value);
+			}
 		}
 	}
 }
@@ -124,6 +124,9 @@
 
 @each $color, $value in $label-palette {
 	@if not clay-is-map-unset($value) {
+		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
+			'danger', 'dark', 'light';
+
 		$selector: if(
 			starts-with($color, '.') or
 				starts-with($color, '#') or
@@ -136,12 +139,14 @@
 			#{$selector} {
 				@include clay-label-variant($value);
 			}
-		} @else {
-			$placeholder: if(
-				starts-with($color, '.') or starts-with($color, '#'),
-				'%#{str-slice($color, 2)}',
-				'%label-#{$color}'
-			);
+		} @else if
+			(
+				starts-with($color, 'inverse-') or
+					index($deprecated-keys, '#{$color}') !=
+					null
+			)
+		{
+			$placeholder: '%label-#{$color}';
 
 			#{$placeholder} {
 				@include clay-label-variant($value);
@@ -150,6 +155,10 @@
 			#{$selector} {
 				@extend #{$placeholder} !optional;
 			}
+		} @else {
+			#{$selector} {
+				@include clay-label-variant($value);
+			}
 		}
 	}
 }

package/src/scss/components/_modals.scss

@@ -8,15 +8,7 @@
 }
 
 .modal {
-	display: none;
-	height: 100%;
-	left: 0;
-	outline: 0;
-	overflow: hidden;
-	position: fixed;
-	top: 0;
-	width: 100%;
-	z-index: $zindex-modal;
+	@include clay-css($modal);
 }
 
 .modal-dialog {
@@ -143,57 +135,42 @@
 }
 
 .modal-backdrop {
-	background-color: $modal-backdrop-bg;
-	height: 100vh;
-	left: 0;
-	position: fixed;
-	top: 0;
-	width: 100vw;
-	z-index: $zindex-modal-backdrop;
-
-	&.fade {
-		opacity: 0;
-	}
-
-	&.show {
-		opacity: $modal-backdrop-opacity;
-	}
+	@include clay-map-to-css($modal-backdrop);
 }
 
 .modal-content {
-	background-clip: padding-box;
-	background-color: $modal-content-bg;
-	border: $modal-content-border-width solid $modal-content-border-color;
-
-	@include border-radius($modal-content-border-radius);
-	@include box-shadow($modal-content-box-shadow-xs);
-
-	color: $modal-content-color;
-	display: flex;
-	flex-direction: column;
-	outline: 0;
-	overflow: hidden;
-	pointer-events: auto;
-	position: relative;
-	width: 100%;
+	@include clay-map-to-css($modal-content);
 }
 
 .modal-header {
-	$breakpoint-down: map-get($modal-header, breakpoint-down);
+	$_modal-header: setter(map-get($modal, modal-header), ());
 
-	@include clay-css($modal-header);
+	$_breakpoint-down: map-get($_modal-header, breakpoint-down);
+	$_mobile: map-get($_modal-header, mobile);
 
-	@include clay-scale-component(null, $breakpoint-down) {
-		@include clay-css(map-get($modal-header, mobile));
+	$_modal-header: map-remove($_modal-header, breakpoint-down, mobile);
+
+	@include clay-map-to-css($_modal-header);
+
+	@include clay-scale-component(null, $_breakpoint-down) {
+		@include clay-css(map-get($_modal-header, mobile));
 	}
 }
 
 .modal-body {
-	@include clay-css($modal-body);
+	$_modal-body: setter(map-get($modal, modal-body), ());
+	$_modal-body: map-deep-merge(
+		$_modal-body,
+		(
+			'&.inline-scroller':
+				map-merge(
+					setter(map-get($_modal-body, '&.inline-scroller'), ()),
+					setter(map-get($_modal-body, inline-scroller), ())
+				),
+		)
+	);
 
-	&.inline-scroller {
-		@include clay-css(map-get($modal-body, inline-scroller));
-	}
+	@include clay-map-to-css($_modal-body);
 }
 
 .modal-body-flush {
@@ -201,31 +178,11 @@
 }
 
 .modal-footer {
-	align-items: center;
-	background-color: $modal-footer-bg;
-	border-top: $modal-footer-border-width solid $modal-footer-border-color;
-
-	@include border-bottom-radius($modal-content-inner-border-radius);
-	@include box-shadow($modal-footer-box-shadow);
-
-	color: $modal-footer-color;
-	display: flex;
-	flex-shrink: 0;
-	flex-wrap: wrap;
-	height: $modal-footer-height;
-	justify-content: flex-start;
-	padding-bottom: $modal-footer-padding-y;
-	padding-left: $modal-footer-padding-x;
-	padding-right: $modal-footer-padding-x;
-	padding-top: $modal-footer-padding-y;
+	@include clay-map-to-css(map-get($modal, modal-footer));
 
 	@include clay-scale-component {
 		height: $modal-footer-height-mobile;
 	}
-
-	> * {
-		margin: $modal-footer-margin-between * 0.5;
-	}
 }
 
 // Modal Item
@@ -279,15 +236,7 @@
 // Modal Title
 
 .modal-title {
-	flex-grow: 1;
-	font-size: $modal-title-font-size;
-	font-weight: $modal-title-font-weight;
-	line-height: $modal-title-line-height;
-	margin-bottom: 0;
-	overflow: hidden;
-	text-align: $modal-title-text-align;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	@include clay-css(map-get($modal, modal-title));
 
 	@include clay-scale-component {
 		font-size: $modal-title-font-size-mobile;
@@ -295,11 +244,7 @@
 }
 
 .modal-title-indicator {
-	display: inline-block;
-	font-size: $modal-title-indicator-font-size;
-	margin-right: $modal-title-indicator-spacer-x;
-	margin-top: -0.2em;
-	vertical-align: middle;
+	@include clay-css(map-get($modal, modal-title-indicator));
 }
 
 // Modal Subtitle
@@ -319,13 +264,7 @@
 // Modal Close
 
 .modal .close {
-	&:first-child {
-		margin-left: math-sign($modal-close-spacer-x);
-	}
-
-	&:last-child {
-		margin-right: math-sign($modal-close-spacer-x);
-	}
+	@include clay-close(map-get($modal, close));
 }
 
 .close + .modal-title {
@@ -491,7 +430,16 @@
 
 @each $color, $value in $modal-palette {
 	@if not clay-is-map-unset($value) {
-		.modal-#{$color} {
+		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
+			'danger', 'dark', 'light';
+
+		$selector: if(
+			index($deprecated-keys, '#{$color}') != null,
+			str-insert($color, '.modal-', 1),
+			$color
+		);
+
+		#{$selector} {
 			@include clay-modal-variant($value);
 		}
 	}

package/src/scss/components/_navs.scss

@@ -118,7 +118,11 @@
 	flex-direction: column;
 	flex-wrap: nowrap;
 
-	@include clay-nav-nested($nav-nested-spacer-x);
+	@include clay-nav-nested(
+		$nav-nested-spacer-x,
+		$nav-nested-nest-level,
+		$nav-nested-nav-class
+	);
 }
 
 .nav-nested-margins {

package/src/scss/components/_pagination.scss

@@ -19,7 +19,7 @@
 
 	&.active {
 		.page-link {
-			@include clay-link(map-get($pagination-link, active));
+			@include clay-link(map-get($pagination-link, active-class));
 		}
 	}
 

package/src/scss/components/_stickers.scss

@@ -53,26 +53,22 @@
 
 // Sticker Sizes
 
-@each $selector, $value in $sticker-sizes {
+@each $size, $value in $sticker-sizes {
 	@if not clay-is-map-unset($value) {
 		$selector: if(
-			starts-with($selector, '.') or
-				starts-with($selector, '#') or
-				starts-with($selector, '%'),
-			$selector,
-			str-insert($selector, '.', 1)
+			starts-with($size, '.') or
+				starts-with($size, '#') or
+				starts-with($size, '%'),
+			$size,
+			str-insert($size, '.', 1)
 		);
 
-		@if (starts-with($selector, '%') or map-get($value, extend)) {
+		@if (starts-with($size, '%') or map-get($value, extend)) {
 			#{$selector} {
 				@include clay-sticker-variant($value);
 			}
-		} @else {
-			$placeholder: if(
-				starts-with($selector, '.') or starts-with($selector, '#'),
-				'%#{str-slice($selector, 2)}',
-				'%#{$selector}'
-			);
+		} @else if(starts-with($size, 'sticker-')) {
+			$placeholder: '%#{$size}';
 
 			#{$placeholder} {
 				@include clay-sticker-variant($value);
@@ -81,6 +77,10 @@
 			#{$selector} {
 				@extend #{$placeholder} !optional;
 			}
+		} @else {
+			#{$selector} {
+				@include clay-sticker-variant($value);
+			}
 		}
 	}
 }
@@ -89,6 +89,9 @@
 
 @each $color, $value in $sticker-palette {
 	@if not clay-is-map-unset($value) {
+		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
+			'danger', 'dark', 'light';
+
 		$selector: if(
 			starts-with($color, '.') or
 				starts-with($color, '#') or
@@ -101,12 +104,8 @@
 			#{$selector} {
 				@include clay-sticker-variant($value);
 			}
-		} @else {
-			$placeholder: if(
-				starts-with($color, '.') or starts-with($color, '#'),
-				'%#{str-slice($color, 2)}',
-				'%sticker-#{$color}'
-			);
+		} @else if (index($deprecated-keys, '#{$color}') != null) {
+			$placeholder: '%sticker-#{$color}';
 
 			#{$placeholder} {
 				@include clay-sticker-variant($value);
@@ -115,6 +114,10 @@
 			#{$selector} {
 				@extend #{$placeholder} !optional;
 			}
+		} @else {
+			#{$selector} {
+				@include clay-sticker-variant($value);
+			}
 		}
 	}
 }

package/src/scss/mixins/_globals.scss

@@ -336,42 +336,29 @@
 }
 
 /// A mixin that outputs CSS based on the structure of a Sass map.
+/// @param {Map} $map - A map of `key: value` pairs.
 
 @mixin clay-map-to-css($map) {
+	@include clay-css($map);
+
 	@each $key, $value in $map {
 		@if not clay-is-map-unset($value) {
-			@each $nestedKey, $nestedValue in $value {
-				@if (type-of($nestedValue) == 'map') {
-					$parentSelector: if(
-						starts-with($key, '.') or
-							starts-with($key, '#') or
-							starts-with($key, '@'),
-						$key,
-						str-insert($key, '.', 1)
-					);
+			@if (type-of($value) == 'map') {
+				$valid-prefixes: '#', '&', '.', '>', '@';
 
-					$nestedMap: (#{$nestedKey}: $nestedValue);
+				$selector: if(
+					index($valid-prefixes, str-slice($key, 1, 1)),
+					$key,
+					str-insert($key, '.', 1)
+				);
 
-					@if (starts-with($parentSelector, '@media ')) {
-						@media #{clay-str-replace('#{$parentSelector}', '@media ', '')} {
-							@include clay-map-to-css($nestedMap);
-						}
-					} @else {
-						#{$parentSelector} {
-							@include clay-map-to-css($nestedMap);
-						}
+				@if (starts-with($selector, '@media ')) {
+					@media #{clay-str-replace('#{$selector}', '@media ', '')} {
+						@include clay-map-to-css($value);
 					}
 				} @else {
-					$selector: if(
-						starts-with($key, '.') or
-							starts-with($key, '#') or
-							starts-with($key, '@'),
-						$key,
-						str-insert($key, '.', 1)
-					);
-
 					#{$selector} {
-						@include clay-css($value);
+						@include clay-map-to-css($value);
 					}
 				}
 			}