@clayui/css 3.64.0 → 3.65.1

package/src/scss/components/_labels.scss

@@ -93,23 +93,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}'
+		);
 
-	.#{$selector} {
-		@extend %#{$selector} !optional;
+		#{$placeholder} {
+			@include clay-label-variant($value);
+		}
+
+		#{$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/_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/_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

@@ -66,24 +66,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/_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

package/src/scss/mixins/_globals.scss

@@ -274,6 +274,8 @@
 							transition: none;
 						}
 					}
+				} @else if ($key == 'extend') {
+					@extend #{$value} !optional;
 				} @else if ($key == 'user-select') {
 					-ms-user-select: $value;
 					-moz-user-select: $value;

package/src/scss/mixins/_utilities.scss

@@ -29,9 +29,9 @@
 	resize: $direction;
 }
 
-// * REUSE-Snippet-Begin
+// * SPDX-SnippetBegin
 // * SPDX-License-Identifier: APLv2
-// * SPDX-FileCopyrightText: © 2018 A11Y Project <https://a11yproject.com/posts/how-to-hide-content/>
+// * SPDX-SnippetCopyrightText: © 2018 A11Y Project <https://a11yproject.com/posts/how-to-hide-content/>
 // *
 
 /// A Bootstrap 4 mixin that generates styles to only display content to screen readers.
@@ -48,11 +48,11 @@
 	width: 1px;
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
-// * 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>
 // *
 
 /// A Bootstrap 4 mixin to display `.sr-only` content when focused. Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@@ -69,7 +69,7 @@
 	}
 }
 
-// * REUSE-Snippet-End
+// * SPDX-SnippetEnd
 
 /// A Bootstrap 4 mixin for generating `width` and `height` properties.
 /// @deprecated

package/src/scss/variables/_alerts.scss

@@ -182,6 +182,8 @@ $alert-indicator: () !default;
 $alert-indicator: map-deep-merge(
 	(
 		font-size: $alert-indicator-font-size,
+		line-height: 1,
+		vertical-align: 8%,
 		lead: (
 			margin-left: $alert-lead-spacer-x,
 		),
@@ -397,6 +399,7 @@ $alert-notification-sm-down: map-merge(
 $alert-autofit-row: () !default;
 $alert-autofit-row: map-deep-merge(
 	(
+		align-items: baseline,
 		margin-left: -0.5rem,
 		margin-right: -0.5rem,
 		width: auto,

package/src/scss/variables/_globals.scss

@@ -35,7 +35,7 @@ $enable-grid-classes: true !default;
 $enable-pointer-cursor-for-buttons: true !default;
 $enable-print-styles: true !default;
 $enable-responsive-font-sizes: false !default;
-$enable-validation-icons: true !default;
+$enable-validation-icons: false !default;
 $enable-deprecation-messages: true !default;
 
 // Deprecated, no longer affects any compiled CSS

package/src/scss/variables/_utilities.scss

@@ -1,6 +1,28 @@
 $bg-checkered-fg: $gray-200 !default;
+
+// .inline-scroller
+
 $inline-scroller-max-height: 125px !default;
 
+$inline-scroller: () !default;
+$inline-scroller: map-deep-merge(
+	(
+		-webkit-overflow-scrolling: touch,
+		list-style: none,
+		margin: 0,
+		max-height: $inline-scroller-max-height,
+		overflow: auto,
+		padding: 0,
+		focus: (
+			outline: 0,
+		),
+		focus-visible: (
+			box-shadow: $component-focus-box-shadow,
+		)
+	),
+	$inline-scroller
+);
+
 // Autofit Row
 
 $autofit-col-expand-min-width: 3.125rem !default; // 50px