@clayui/css 3.63.0 → 3.65.2

package/src/scss/components/_buttons.scss

@@ -8,35 +8,41 @@ fieldset:disabled a.btn {
 	@include clay-css($btn-disabled);
 
 	&:focus {
-		@include clay-css(setter(map-get($btn-disabled, focus), ()));
+		@include clay-css(map-get($btn-disabled, focus));
 	}
 
 	&:active {
-		@include clay-css(setter(map-get($btn-disabled, active), ()));
+		@include clay-css(map-get($btn-disabled, active));
 	}
 }
 
 // Button Sizes
 
 @each $size, $value in $btn-sizes {
-	$placeholder: if(
-		starts-with($size, 'btn-'),
-		'%clay-#{$size}',
-		'%#{str-slice($size, 2)}'
-	);
-
 	$selector: if(
 		starts-with($size, 'btn-'),
 		clay-str-replace($size, 'btn-', '.btn-'),
 		$size
 	);
 
-	#{$placeholder} {
-		@include clay-button-variant($value);
-	}
-
-	#{$selector} {
-		@extend #{$placeholder} !optional;
+	@if (starts-with($size, '%') or map-get($value, extend)) {
+		#{$selector} {
+			@include clay-button-variant($value);
+		}
+	} @else {
+		$placeholder: if(
+			starts-with($size, 'btn-'),
+			'%clay-#{$size}',
+			'%#{str-slice($size, 2)}'
+		);
+
+		#{$placeholder} {
+			@include clay-button-variant($value);
+		}
+
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }
 
@@ -74,12 +80,6 @@ input[type='button'] {
 // Button Monospaced
 
 @each $size, $value in $btn-monospaced-sizes {
-	$placeholder: if(
-		starts-with($size, 'btn-monospaced'),
-		'%clay-#{$size}',
-		'%#{str-slice($size, 2)}'
-	);
-
 	$selector: if(
 		starts-with($size, 'btn-monospaced-'),
 		clay-str-replace($size, 'btn-monospaced', '.btn-monospaced.btn'),
@@ -90,80 +90,108 @@ input[type='button'] {
 		)
 	);
 
-	#{$placeholder} {
-		@include clay-button-variant($value);
-	}
-
-	#{$selector} {
-		@extend #{$placeholder} !optional;
+	@if (starts-with($size, '%') or map-get($value, extend)) {
+		#{$selector} {
+			@include clay-button-variant($value);
+		}
+	} @else {
+		$placeholder: if(
+			starts-with($size, 'btn-monospaced'),
+			'%clay-#{$size}',
+			'%#{str-slice($size, 2)}'
+		);
+
+		#{$placeholder} {
+			@include clay-button-variant($value);
+		}
+
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }
 
 // Button Variants
 
 @each $color, $value in $btn-palette {
-	$placeholder: if(
-		starts-with($color, '.') or starts-with($color, '#'),
-		'%#{str-slice($color, 2)}',
-		'%btn-#{$color}'
-	);
-
-	$placeholder-focus: if(
-		starts-with($color, '.') or starts-with($color, '#'),
-		'%#{str-slice($color, 2)}-focus',
-		'%btn-#{$color}-focus'
-	);
-
 	$selector: if(
-		starts-with($color, '.') or starts-with($color, '#'),
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
 		$color,
 		str-insert($color, '.btn-', 1)
 	);
 
-	#{$placeholder} {
-		@include clay-button-variant($value);
-	}
-
-	#{$selector} {
-		@extend #{$placeholder} !optional;
-	}
-
-	#{$placeholder-focus} {
-		@include clay-button-variant(map-get($value, focus));
+	@if (starts-with($color, '%') or map-get($value, extend)) {
+		#{$selector} {
+			@include clay-button-variant($value);
+		}
+	} @else {
+		$placeholder: if(
+			starts-with($color, '.') or starts-with($color, '#'),
+			'%#{str-slice($color, 2)}',
+			'%btn-#{$color}'
+		);
+
+		$placeholder-focus: if(
+			starts-with($color, '.') or starts-with($color, '#'),
+			'%#{str-slice($color, 2)}-focus',
+			'%btn-#{$color}-focus'
+		);
+
+		#{$placeholder} {
+			@include clay-button-variant($value);
+		}
+
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
+
+		#{$placeholder-focus} {
+			@include clay-button-variant(map-get($value, focus));
+		}
 	}
 }
 
 // Button Outline Variants
 
 @each $color, $value in $btn-outline-palette {
-	$placeholder: if(
-		starts-with($color, '.') or starts-with($color, '#'),
-		'%#{str-slice($color, 2)}',
-		'%btn-outline-#{$color}'
-	);
-
-	$placeholder-focus: if(
-		starts-with($color, '.') or starts-with($color, '#'),
-		'%#{str-slice($color, 2)}-focus',
-		'%btn-outline-#{$color}-focus'
-	);
-
 	$selector: if(
-		starts-with($color, '.') or starts-with($color, '#'),
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
 		$color,
 		str-insert($color, '.btn-outline-', 1)
 	);
 
-	#{$placeholder} {
-		@include clay-button-variant($value);
-	}
-
-	#{$selector} {
-		@extend #{$placeholder} !optional;
-	}
-
-	#{$placeholder-focus} {
-		@include clay-button-variant(map-get($value, focus));
+	@if (starts-with($color, '%') or map-get($value, extend)) {
+		#{$selector} {
+			@include clay-button-variant($value);
+		}
+	} @else {
+		$placeholder: if(
+			starts-with($color, '.') or starts-with($color, '#'),
+			'%#{str-slice($color, 2)}',
+			'%btn-outline-#{$color}'
+		);
+
+		$placeholder-focus: if(
+			starts-with($color, '.') or starts-with($color, '#'),
+			'%#{str-slice($color, 2)}-focus',
+			'%btn-outline-#{$color}-focus'
+		);
+
+		#{$placeholder} {
+			@include clay-button-variant($value);
+		}
+
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
+
+		#{$placeholder-focus} {
+			@include clay-button-variant(map-get($value, focus));
+		}
 	}
 }
 

package/src/scss/components/_custom-forms.scss

@@ -66,15 +66,11 @@
 	@include clay-css($custom-control);
 
 	&:only-child {
-		$only-child: setter(map-get($custom-control, only-child), ());
-
-		@include clay-css($only-child);
+		@include clay-css(map-get($custom-control, only-child));
 	}
 
 	label {
-		$label: setter(map-get($custom-control, label), ());
-
-		@include clay-css($label);
+		@include clay-css(map-get($custom-control, label));
 	}
 }
 
@@ -106,15 +102,11 @@ label.custom-control-label {
 // Custom Control Indicator
 
 .custom-control-label::before {
-	$before: setter(map-get($custom-control-label, before), ());
-
-	@include clay-css($before);
+	@include clay-css(map-get($custom-control-label, before));
 }
 
 .custom-control-label::after {
-	$after: setter(map-get($custom-control-label, after), ());
-
-	@include clay-css($after);
+	@include clay-css(map-get($custom-control-label, after));
 }
 
 .custom-control-input {

package/src/scss/components/_date-picker.scss

@@ -76,42 +76,25 @@
 	@include clay-css($date-picker-col);
 
 	&.c-selected {
-		$_c-selected: setter(map-get($date-picker-col, c-selected), ());
-
-		@include clay-css($_c-selected);
+		@include clay-css(map-get($date-picker-col, c-selected));
 
 		&:first-child {
-			$_c-selected-first-child: setter(
-				map-get($date-picker-col, c-selected-first-child),
-				()
+			@include clay-css(
+				map-get($date-picker-col, c-selected-first-child)
 			);
-
-			@include clay-css($_c-selected-first-child);
 		}
 
 		&:last-child {
-			$_c-selected-last-child: setter(
-				map-get($date-picker-col, c-selected-last-child),
-				()
-			);
-
-			@include clay-css($_c-selected-last-child);
+			@include clay-css(map-get($date-picker-col, c-selected-last-child));
 		}
 	}
 
 	&.c-selected-start {
-		$_c-selected-start: setter(
-			map-get($date-picker-col, c-selected-start),
-			()
-		);
-
-		@include clay-css($_c-selected-start);
+		@include clay-css(map-get($date-picker-col, c-selected-start));
 	}
 
 	&.c-selected-end {
-		$_c-selected-end: setter(map-get($date-picker-col, c-selected-end), ());
-
-		@include clay-css($_c-selected-end);
+		@include clay-css(map-get($date-picker-col, c-selected-end));
 	}
 }
 

package/src/scss/components/_dropdowns.scss

@@ -15,11 +15,11 @@
 	@include clay-css($dropdown-header);
 
 	@include media-breakpoint-down(map-get($dropdown-header, breakpoint-down)) {
-		@include clay-css(setter(map-get($dropdown-header, mobile), ()));
+		@include clay-css(map-get($dropdown-header, mobile));
 	}
 
 	&:first-child {
-		@include clay-css(setter(map-get($dropdown-header, first-child), ()));
+		@include clay-css(map-get($dropdown-header, first-child));
 	}
 }
 
@@ -27,9 +27,7 @@
 	@include clay-css($dropdown-subheader);
 
 	&:first-child {
-		@include clay-css(
-			setter(map-get($dropdown-subheader, first-child), ())
-		);
+		@include clay-css(map-get($dropdown-subheader, first-child));
 	}
 }
 
@@ -62,41 +60,30 @@
 
 	.form-group + .form-group {
 		@include clay-css(
-			setter(map-deep-get($dropdown-section, form-group, form-group), ())
+			map-deep-get($dropdown-section, form-group, form-group)
 		);
 	}
 
 	.custom-control {
-		@include clay-css(
-			setter(map-get($dropdown-section, custom-control), ())
-		);
+		@include clay-css(map-get($dropdown-section, custom-control));
 	}
 
 	.custom-control-label {
-		@include clay-css(
-			setter(map-get($dropdown-section, custom-control-label), ())
-		);
+		@include clay-css(map-get($dropdown-section, custom-control-label));
 	}
 
 	.custom-control-label-text {
 		@include clay-css(
-			setter(map-get($dropdown-section, custom-control-label-text), ())
+			map-get($dropdown-section, custom-control-label-text)
 		);
 	}
 
 	&.active {
-		@include clay-css(setter(map-get($dropdown-section, active), ()));
+		@include clay-css(map-get($dropdown-section, active));
 
 		.custom-control-label {
 			@include clay-css(
-				setter(
-					map-deep-get(
-						$dropdown-section,
-						active,
-						custom-control-label
-					),
-					()
-				)
+				map-deep-get($dropdown-section, active, custom-control-label)
 			);
 		}
 	}
@@ -225,7 +212,7 @@
 
 	> .dropdown-toggle {
 		@include clay-button-variant(
-			setter(map-get($dropdown-action, dropdown-toggle), ())
+			map-get($dropdown-action, dropdown-toggle)
 		);
 	}
 }

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));
 	}
 }
 
@@ -93,23 +89,63 @@
 // Label Sizes
 
 @each $selector, $value in $label-sizes {
-	%#{$selector} {
-		@include clay-label-variant($value);
-	}
+	$selector: if(
+		starts-with($selector, '.') or
+			starts-with($selector, '#') or
+			starts-with($selector, '%'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	@if (starts-with($selector, '%') 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}'
+		);
+
+		#{$placeholder} {
+			@include clay-label-variant($value);
+		}
 
-	.#{$selector} {
-		@extend %#{$selector} !optional;
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }
 
 // Label Variants
 
 @each $color, $value in $label-palette {
-	%label-#{$color} {
-		@include clay-label-variant($value);
-	}
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.label-', 1)
+	);
+
+	@if (starts-with($color, '%') or map-get($value, extend)) {
+		#{$selector} {
+			@include clay-label-variant($value);
+		}
+	} @else {
+		$placeholder: if(
+			starts-with($color, '.') or starts-with($color, '#'),
+			'%#{str-slice($color, 2)}',
+			'%label-#{$color}'
+		);
 
-	.label-#{$color} {
-		@extend %label-#{$color} !optional;
+		#{$placeholder} {
+			@include clay-label-variant($value);
+		}
+
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }