@clayui/css 3.65.1 → 3.69.0

package/src/scss/components/_forms.scss

@@ -22,33 +22,23 @@ label {
 	@include clay-css($input-label);
 
 	@include clay-scale-component {
-		$mobile: setter(map-get($input-label, mobile), ());
-
-		@include clay-css($mobile);
+		@include clay-css(map-get($input-label, mobile));
 	}
 
 	&.focus {
-		$focus: setter(map-get($input-label, focus), ());
-
-		@include clay-css($focus);
+		@include clay-css(map-get($input-label, focus));
 	}
 
 	&[for] {
-		$for: setter(map-get($input-label, for), ());
-
-		@include clay-css($for);
+		@include clay-css(map-get($input-label, for));
 	}
 
 	+ .form-text {
-		$form-text: setter(map-get($input-label, form-text), ());
-
-		@include clay-css($form-text);
+		@include clay-css(map-get($input-label, form-text));
 	}
 
 	.reference-mark {
-		$reference-mark: setter(map-get($input-label, reference-mark), ());
-
-		@include clay-css($reference-mark);
+		@include clay-css(map-get($input-label, reference-mark));
 	}
 }
 
@@ -66,9 +56,7 @@ label {
 
 fieldset[disabled] label,
 label.disabled {
-	$disabled: setter(map-get($input-label, disabled), ());
-
-	@include clay-css($disabled);
+	@include clay-css(map-get($input-label, disabled));
 }
 
 fieldset[disabled] label {
@@ -84,9 +72,7 @@ fieldset[disabled] label {
 	@include clay-form-control-variant($input);
 
 	@include clay-scale-component {
-		$mobile: setter(map-get($input, mobile), ());
-
-		@include clay-css($mobile);
+		@include clay-css(map-get($input, mobile));
 	}
 
 	// Removes inner shadow on inputs in iOS. Bootstrap 4 uses
@@ -125,9 +111,7 @@ fieldset[disabled] label {
 // This adds disabled styles to div.form-control inside a disabled fielset.
 
 fieldset[disabled] .form-control {
-	$disabled: setter(map-get($input, disabled), ());
-
-	@include clay-css($disabled);
+	@include clay-css(map-get($input, disabled));
 }
 
 // Readonly controls as plain text
@@ -280,15 +264,11 @@ select.form-control {
 	@include clay-css($form-control-select);
 
 	&:hover {
-		$hover: setter(map-get($form-control-select, hover), ());
-
-		@include clay-css($hover);
+		@include clay-css(map-get($form-control-select, hover));
 	}
 
 	&:focus {
-		$focus: setter(map-get($form-control-select, focus), ());
-
-		@include clay-css($focus);
+		@include clay-css(map-get($form-control-select, focus));
 	}
 }
 
@@ -523,50 +503,33 @@ textarea.form-control-sm,
 	@include clay-css($form-fieldset);
 
 	&[disabled] {
-		@include clay-css(setter(map-get($form-fieldset, disabled), ()));
+		@include clay-css(map-get($form-fieldset, disabled));
 
 		label {
-			@include clay-css(
-				setter(map-deep-get($form-fieldset, disabled, label), ())
-			);
+			@include clay-css(map-deep-get($form-fieldset, disabled, label));
 
 			.form-control {
 				@include clay-css(
-					setter(
-						map-deep-get(
-							$form-fieldset,
-							disabled,
-							label,
-							form-control
-						),
-						()
-					)
+					map-deep-get($form-fieldset, disabled, label, form-control)
 				);
 			}
 		}
 
 		.form-control-label-text {
 			@include clay-css(
-				setter(
-					map-deep-get(
-						$form-fieldset,
-						disabled,
-						form-control-label-text
-					),
-					()
-				)
+				map-deep-get($form-fieldset, disabled, form-control-label-text)
 			);
 		}
 
 		.form-legend {
 			@include clay-css(
-				setter(map-deep-get($form-fieldset, disabled, form-legend), ())
+				map-deep-get($form-fieldset, disabled, form-legend)
 			);
 		}
 
 		.form-control {
 			@include clay-css(
-				setter(map-deep-get($form-fieldset, disabled, form-control), ())
+				map-deep-get($form-fieldset, disabled, form-control)
 			);
 		}
 	}

package/src/scss/components/_icons.scss

@@ -1,17 +1,17 @@
 .lexicon-icon {
-	@include clay-css(setter($lexicon-icon, ()));
+	@include clay-css($lexicon-icon);
 }
 
 .lexicon-icon-sm {
-	@include clay-css(setter($lexicon-icon-sm, ()));
+	@include clay-css($lexicon-icon-sm);
 }
 
 .lexicon-icon-lg {
-	@include clay-css(setter($lexicon-icon-lg, ()));
+	@include clay-css($lexicon-icon-lg);
 }
 
 .lexicon-icon-xl {
-	@include clay-css(setter($lexicon-icon-xl, ()));
+	@include clay-css($lexicon-icon-xl);
 }
 
 .order-arrow-down-active {

package/src/scss/components/_labels.scss

@@ -50,27 +50,23 @@
 	@include clay-css($label-item);
 
 	a {
-		@include clay-link(setter(map-get($label-item, link), ()));
+		@include clay-link(map-get($label-item, link));
 	}
 
 	.btn-unstyled {
-		@include clay-button-variant(
-			setter(map-get($label-item, btn-unstyled), ())
-		);
+		@include clay-button-variant(map-get($label-item, btn-unstyled));
 	}
 
 	.close {
-		@include clay-close(setter(map-get($label-item, close), ()));
+		@include clay-close(map-get($label-item, close));
 	}
 
 	.lexicon-icon {
-		@include clay-css(setter(map-get($label-item, lexicon-icon), ()));
+		@include clay-css(map-get($label-item, lexicon-icon));
 	}
 
 	.text-truncate-inline {
-		@include clay-css(
-			setter(map-get($label-item, text-truncate-inline), ())
-		);
+		@include clay-css(map-get($label-item, text-truncate-inline));
 	}
 }
 
@@ -78,7 +74,7 @@
 	@include clay-css($label-item-expand);
 
 	a {
-		@include clay-link(setter(map-get($label-item-expand, link), ()));
+		@include clay-link(map-get($label-item-expand, link));
 	}
 }
 

package/src/scss/components/_list-group.scss

@@ -411,24 +411,19 @@
 
 @each $color, $value in $list-group-item-theme-colors {
 	.list-group-item-#{$color} {
-		@include clay-css(setter($value, ()));
+		@include clay-css($value);
 
 		&.list-group-item-action {
-			$active: setter(map-get($value, active), ());
-			$hover: setter(map-get($value, hover), ());
-
-			$focus: setter(map-get($value, focus), $hover);
-
 			&:hover {
-				@include clay-css($hover);
+				@include clay-css(map-get($value, hover));
 			}
 
 			&:focus {
-				@include clay-css($focus);
+				@include clay-css(map-get($value, focus));
 			}
 
 			&.active {
-				@include clay-css($active);
+				@include clay-css(map-get($value, active));
 			}
 		}
 	}

package/src/scss/components/_modals.scss

@@ -184,9 +184,7 @@
 	@include clay-css($modal-header);
 
 	@include clay-scale-component(null, $breakpoint-down) {
-		$mobile: setter(map-get($modal-header, mobile), ());
-
-		@include clay-css($mobile);
+		@include clay-css(map-get($modal-header, mobile));
 	}
 }
 
@@ -194,9 +192,7 @@
 	@include clay-css($modal-body);
 
 	&.inline-scroller {
-		$inline-scroller: setter(map-get($modal-body, inline-scroller), ());
-
-		@include clay-css($inline-scroller);
+		@include clay-css(map-get($modal-body, inline-scroller));
 	}
 }
 

package/src/scss/components/_progress-bars.scss

@@ -88,15 +88,11 @@
 	@include clay-css($progress-group-addon);
 
 	&:first-child {
-		$first-child: setter(map-get($progress-group-addon, first-child), ());
-
-		@include clay-css($first-child);
+		@include clay-css(map-get($progress-group-addon, first-child));
 	}
 
 	&:last-child {
-		$last-child: setter(map-get($progress-group-addon, last-child), ());
-
-		@include clay-css($last-child);
+		@include clay-css(map-get($progress-group-addon, last-child));
 	}
 }
 

package/src/scss/components/_stickers.scss

@@ -33,27 +33,15 @@
 	@include clay-css($sticker-outside);
 
 	&.sticker-bottom-left {
-		$bottom-left: setter(
-			map-get($sticker-outside, sticker-bottom-left),
-			()
-		);
-
-		@include clay-css($bottom-left);
+		@include clay-css(map-get($sticker-outside, sticker-bottom-left));
 	}
 
 	&.sticker-bottom-right {
-		$bottom-right: setter(
-			map-get($sticker-outside, sticker-bottom-right),
-			()
-		);
-
-		@include clay-css($bottom-right);
+		@include clay-css(map-get($sticker-outside, sticker-bottom-right));
 	}
 
 	&.sticker-top-right {
-		$top-right: setter(map-get($sticker-outside, sticker-top-right), ());
-
-		@include clay-css($top-right);
+		@include clay-css(map-get($sticker-outside, sticker-top-right));
 	}
 }
 

package/src/scss/components/_type.scss

@@ -189,7 +189,7 @@ strong {
 	@include clay-css($c-kbd-group);
 
 	> .c-kbd {
-		@include clay-css(setter(map-get($c-kbd-group, c-kbd), ()));
+		@include clay-css(map-get($c-kbd-group, c-kbd));
 	}
 }
 
@@ -254,7 +254,7 @@ strong {
 	@include clay-css($c-kbd-group-sm);
 
 	> .c-kbd {
-		@include clay-css(setter(map-get($c-kbd-group-sm, c-kbd), ()));
+		@include clay-css(map-get($c-kbd-group-sm, c-kbd));
 	}
 }
 
@@ -273,7 +273,7 @@ strong {
 	@include clay-css($c-kbd-group-lg);
 
 	> .c-kbd {
-		@include clay-css(setter(map-get($c-kbd-group-lg, c-kbd), ()));
+		@include clay-css(map-get($c-kbd-group-lg, c-kbd));
 	}
 }
 

package/src/scss/mixins/_alerts.scss

@@ -106,18 +106,8 @@
 			)
 		);
 
-		$hr: setter(map-get($map, hr), ());
-
 		$alert-indicator: setter(map-get($map, alert-indicator), ());
 
-		$alert-indicator-lead: setter(map-get($alert-indicator, lead), ());
-
-		$alert-btn: setter(map-get($map, alert-btn), ());
-
-		$btn-group: setter(map-get($map, btn-group), ());
-
-		$btn-group-item: setter(map-get($map, btn-group-item), ());
-
 		$close: setter(map-get($map, close), ());
 		$close: map-deep-merge(
 			$close,
@@ -161,10 +151,6 @@
 			)
 		);
 
-		$component-title: setter(map-get($map, component-title), ());
-
-		$component-subtitle: setter(map-get($map, component-subtitle), ());
-
 		@if ($enabled) {
 			@include clay-css($base);
 
@@ -177,7 +163,7 @@
 			}
 
 			hr {
-				@include clay-css($hr);
+				@include clay-css(map-get($map, hr));
 			}
 
 			&.alert-dismissible {
@@ -202,26 +188,24 @@
 				@include clay-css($alert-indicator);
 
 				.lexicon-icon {
-					@include clay-css(
-						setter(map-get($alert-indicator, lexicon-icon), ())
-					);
+					@include clay-css(map-get($alert-indicator, lexicon-icon));
 				}
 
 				+ .lead {
-					@include clay-css($alert-indicator-lead);
+					@include clay-css(map-get($alert-indicator, lead));
 				}
 			}
 
 			.alert-btn {
-				@include clay-button-variant($alert-btn);
+				@include clay-button-variant(map-get($map, alert-btn));
 			}
 
 			.btn-group {
-				@include clay-container($btn-group);
+				@include clay-container(map-get($map, btn-group));
 			}
 
 			.btn-group-item {
-				@include clay-container($btn-group-item);
+				@include clay-container(map-get($map, btn-group-item));
 			}
 
 			.close {
@@ -242,11 +226,13 @@
 			}
 
 			.component-title {
-				@include clay-text-typography($component-title);
+				@include clay-text-typography(map-get($map, component-title));
 			}
 
 			.component-subtitle {
-				@include clay-text-typography($component-subtitle);
+				@include clay-text-typography(
+					map-get($map, component-subtitle)
+				);
 			}
 
 			@each $key, $properties in map-get($map, custom-selectors) {

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

@@ -35,12 +35,12 @@
 /// - Add @link to documentation
 
 @mixin clay-aspect-ratio-item-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$base: setter($map, ());
-
-	@if ($enabled) {
-		@include clay-css($base);
+		@if ($enabled) {
+			@include clay-css($map);
+		}
 	}
 }
 
@@ -58,56 +58,58 @@
 /// - Add @link to documentation
 
 @mixin clay-aspect-ratio-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$horizontal: map-get($map, horizontal);
-	$vertical: map-get($map, vertical);
+		$horizontal: map-get($map, horizontal);
+		$vertical: map-get($map, vertical);
 
-	$base: setter($map, ());
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($base, background-color)),
-			background-image:
-				setter(
-					map-get($map, bg-image),
-					map-get($base, background-image)
-				),
-		)
-	);
+		$base: setter($map, ());
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($base, background-color)),
+				background-image:
+					setter(
+						map-get($map, bg-image),
+						map-get($base, background-image)
+					),
+			)
+		);
 
-	$lexicon-icon: setter(map-get($map, lexicon-icon), ());
-	$lexicon-icon: map-merge(
-		$lexicon-icon,
-		(
-			height:
-				setter(
-					map-get($map, lexicon-icon-height),
-					map-get($lexicon-icon, height)
-				),
-			margin-top:
-				setter(
-					map-get($map, lexicon-icon-margin-top),
-					map-get($lexicon-icon, margin-top)
-				),
-			width:
-				setter(
-					map-get($map, lexicon-icon-width),
-					map-get($lexicon-icon, width)
-				),
-		)
-	);
+		$lexicon-icon: setter(map-get($map, lexicon-icon), ());
+		$lexicon-icon: map-merge(
+			$lexicon-icon,
+			(
+				height:
+					setter(
+						map-get($map, lexicon-icon-height),
+						map-get($lexicon-icon, height)
+					),
+				margin-top:
+					setter(
+						map-get($map, lexicon-icon-margin-top),
+						map-get($lexicon-icon, margin-top)
+					),
+				width:
+					setter(
+						map-get($map, lexicon-icon-width),
+						map-get($lexicon-icon, width)
+					),
+			)
+		);
 
-	@if ($enabled) {
-		@include clay-css($base);
+		@if ($enabled) {
+			@include clay-css($base);
 
-		@if ($horizontal and $vertical) {
-			@include clay-aspect-ratio($horizontal, $vertical);
-		}
+			@if ($horizontal and $vertical) {
+				@include clay-aspect-ratio($horizontal, $vertical);
+			}
 
-		.lexicon-icon {
-			@include clay-css($lexicon-icon);
+			.lexicon-icon {
+				@include clay-css($lexicon-icon);
+			}
 		}
 	}
 }