@clayui/css 3.64.0 → 3.68.0

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;
+		}
 	}
 }

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/_popovers.scss

@@ -2,7 +2,9 @@
 
 @each $selector, $value in $popovers {
 	$selector: if(
-		starts-with($selector, '.') or starts-with($selector, '#'),
+		starts-with($selector, '.') or
+			starts-with($selector, '#') or
+			starts-with($selector, '%'),
 		$selector,
 		str-insert($selector, '.', 1)
 	);
@@ -149,7 +151,9 @@
 
 @each $selector, $value in $popover-headers {
 	$selector: if(
-		starts-with($selector, '.') or starts-with($selector, '#'),
+		starts-with($selector, '.') or
+			starts-with($selector, '#') or
+			starts-with($selector, '%'),
 		$selector,
 		str-insert($selector, '.', 1)
 	);
@@ -163,7 +167,9 @@
 
 @each $selector, $value in $popover-bodies {
 	$selector: if(
-		starts-with($selector, '.') or starts-with($selector, '#'),
+		starts-with($selector, '.') or
+			starts-with($selector, '#') or
+			starts-with($selector, '%'),
 		$selector,
 		str-insert($selector, '.', 1)
 	);
@@ -177,7 +183,9 @@
 
 @each $selector, $value in $popover-widths {
 	$selector: if(
-		starts-with($selector, '.') or starts-with($selector, '#'),
+		starts-with($selector, '.') or
+			starts-with($selector, '#') or
+			starts-with($selector, '%'),
 		$selector,
 		str-insert($selector, '.', 1)
 	);

package/src/scss/components/_print.scss

@@ -1,6 +1,6 @@
-/* REUSE-Snippet-Begin
+/* SPDX-SnippetBegin
  * SPDX-License-Identifier: MIT
- * SPDX-FileCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>
+ * SPDX-SnippetCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>
  */
 
 @if $enable-print-styles {
@@ -120,4 +120,4 @@
 	}
 }
 
-/* REUSE-Snippet-End */
+/* SPDX-SnippetEnd */

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/_reboot.scss

@@ -1,6 +1,6 @@
-/* REUSE-Snippet-Begin
+/* SPDX-SnippetBegin
  * SPDX-License-Identifier: MIT
- * SPDX-FileCopyrightText: © 2016 Nicolas Gallagher and Jonathan Neal <https://github.com/necolas/normalize.css>
+ * SPDX-SnippetCopyrightText: © 2016 Nicolas Gallagher and Jonathan Neal <https://github.com/necolas/normalize.css>
  */
 
 *,
@@ -323,4 +323,4 @@ template {
 	display: none !important;
 }
 
-/* REUSE-Snippet-End */
+/* SPDX-SnippetEnd */

package/src/scss/components/_sidebar.scss

@@ -112,7 +112,9 @@
 
 @each $color, $value in $sidebar-palette {
 	$selector: if(
-		starts-with($color, '.') or starts-with($color, '#'),
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
 		$color,
 		str-insert($color, '.', 1)
 	);

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

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/components/_utilities-functional-important.scss

@@ -25,17 +25,23 @@
 // Background
 
 @each $color, $value in $bg-theme-colors {
-	$hover: setter(map-get($value, hover), ());
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.bg-', 1)
+	);
 
-	.bg-#{$color} {
-		@include clay-css(setter($value, ()));
+	#{$selector} {
+		@include clay-css($value);
 	}
 
-	a.bg-#{$color},
-	button.bg-#{$color} {
+	a#{$selector},
+	button#{$selector} {
 		&:hover,
 		&:focus {
-			@include clay-css($hover);
+			@include clay-css(map-get($value, hover));
 		}
 	}
 }
@@ -43,7 +49,7 @@
 @if $enable-gradients {
 	@each $color, $value in $bg-gradient-theme-colors {
 		.bg-gradient-#{$color} {
-			@include clay-css(setter($value, ()));
+			@include clay-css($value);
 		}
 	}
 }
@@ -91,8 +97,16 @@
 }
 
 @each $color, $value in $border-theme-colors {
-	.border-#{$color} {
-		@include clay-css(setter($value, ()));
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.border-', 1)
+	);
+
+	#{$selector} {
+		@include clay-css($value);
 	}
 }
 
@@ -180,9 +194,9 @@
 	}
 }
 
-/* REUSE-Snippet-Begin
+/* SPDX-SnippetBegin
  * SPDX-License-Identifier: MIT
- * SPDX-Copyright: © 2012 Nicolas Gallagher <https://github.com/suitcss/components-flex-embed>
+ * SPDX-SnippetCopyrightText: © 2012 Nicolas Gallagher <https://github.com/suitcss/components-flex-embed>
  */
 
 .embed-responsive {
@@ -227,7 +241,7 @@
 	}
 }
 
-/* REUSE-Snippet-End */
+/* SPDX-SnippetEnd */
 
 // Flex
 
@@ -719,7 +733,9 @@
 
 @each $selector, $value in $font-sizes {
 	$selector: if(
-		starts-with($selector, '.') or starts-with($selector, '#'),
+		starts-with($selector, '.') or
+			starts-with($selector, '#') or
+			starts-with($selector, '%'),
 		$selector,
 		str-insert($selector, '.', 1)
 	);
@@ -736,16 +752,22 @@
 }
 
 @each $color, $value in $text-theme-colors {
-	$hover: setter(map-get($value, hover), ());
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.text-', 1)
+	);
 
-	.text-#{$color} {
-		@include clay-css(setter($value, ()));
+	#{$selector} {
+		@include clay-css($value);
 	}
 
-	a.text-#{$color} {
+	a#{$selector} {
 		&:hover,
 		&:focus {
-			@include clay-css($hover);
+			@include clay-css(map-get($value, hover));
 		}
 	}
 }

package/src/scss/components/_utilities.scss

@@ -272,14 +272,15 @@
 // Inline Scroller
 
 .inline-scroller {
-	list-style: none;
-	margin: 0;
-	max-height: $inline-scroller-max-height;
-	overflow: auto;
+	@include clay-css($inline-scroller);
 
-	-webkit-overflow-scrolling: touch;
+	&:focus {
+		@include clay-css(map-get($inline-scroller, focus));
+	}
 
-	padding: 0;
+	&:focus-visible {
+		@include clay-css(map-get($inline-scroller, focus-visible));
+	}
 }
 
 // Inline Item

package/src/scss/functions/_global-functions.scss

@@ -776,9 +776,9 @@
 	@return $returnVal;
 }
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2016 Hugo Giraudel <https://hugogiraudel.com/>
+// * SPDX-SnippetCopyrightText: © 2016 Hugo Giraudel <https://hugogiraudel.com/>
 // *
 
 /// A function that fetches deeply nested values from a Sass map.
@@ -842,11 +842,11 @@
 	@return clay-str-replace($string, $search, $replace);
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2018 Jakob Eriksen <http://codepen.io/jakob-e/pen/doMoML>
+// * SPDX-SnippetCopyrightText: © 2018 Jakob Eriksen <http://codepen.io/jakob-e/pen/doMoML>
 // *
 
 /// A function to encode an SVG and provide back a data URI to be used in `background-image`. If the SVG uses double quotes to delimit attribute names and values, wrap the SVG in single quotes or vice versa.
@@ -880,11 +880,11 @@
 	@return url('data:image/svg+xml;charset=utf8,#{$encoded}');
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2018 Kevin Weber <https://codepen.io/kevinweber/pen/dXWoRw>
+// * SPDX-SnippetCopyrightText: © 2018 Kevin Weber <https://codepen.io/kevinweber/pen/dXWoRw>
 // *
 
 /// A Bootstrap 4 function that converts ASCII characters in SVG's to URL encoded characters.
@@ -914,7 +914,7 @@
 	@return $string;
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
 /// A function that returns a specific Lexicon Icon with a specific color as a data URI to be used in `background-image`.
 /// @param {String} $name - The Lexicon Icon name (e.g., angle-right)

package/src/scss/functions/_type-conversion-functions.scss

@@ -4,9 +4,9 @@
 	@return map-remove((), 'key');
 }
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2014 Kitty Giraudel <https://kittygiraudel.com/>
+// * SPDX-SnippetCopyrightText: © 2014 Kitty Giraudel <https://kittygiraudel.com/>
 // *
 
 /// Add `$unit` to `$value`
@@ -95,11 +95,11 @@
 	@return if($minus, -$result, $result);
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: MIT
-// * SPDX-FileCopyrightText: © 2014 Kitty Giraudel <https://github.com/KittyGiraudel/SassyJSON>
+// * SPDX-SnippetCopyrightText: © 2014 Kitty Giraudel <https://github.com/KittyGiraudel/SassyJSON>
 // *
 
 /// Logs an error at `$pointer` with `$string` message
@@ -606,4 +606,4 @@
 	}
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd