@clayui/css 3.62.1 → 3.65.1

package/src/scss/components/_alerts.scss

@@ -420,11 +420,31 @@
 // Alert Variants
 
 @each $color, $value in $alert-palette {
-	%alert-#{$color} {
-		@include clay-alert-variant($value);
-	}
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.alert-', 1)
+	);
+
+	@if (starts-with($color, '%') or map-get($value, extend)) {
+		#{$selector} {
+			@include clay-alert-variant($value);
+		}
+	} @else {
+		$placeholder: if(
+			starts-with($color, '.') or starts-with($color, '#'),
+			'%#{str-slice($color, 2)}',
+			'%alert-#{$color}'
+		);
 
-	.alert-#{$color} {
-		@extend %alert-#{$color} !optional;
+		#{$placeholder} {
+			@include clay-alert-variant($value);
+		}
+
+		#{$selector} {
+			@extend %alert-#{$color} !optional;
+		}
 	}
 }

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

@@ -162,26 +162,41 @@
 
 @each $selector, $value in $aspect-ratio-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)
 	);
 
-	$placeholder: str-insert(
-		str-slice($selector, 2, str-length($selector)),
-		'%',
-		1
-	);
-
-	#{$placeholder} {
-		@include clay-aspect-ratio(
-			map-get($value, width),
-			map-get($value, height)
+	@if (starts-with($selector, '%')) {
+		#{$selector} {
+			@include clay-aspect-ratio(
+				map-get($value, width),
+				map-get($value, height)
+			);
+		}
+	} @else if (map-get($value, extend)) {
+		#{$selector} {
+			@include clay-css($value);
+		}
+	} @else {
+		$placeholder: str-insert(
+			str-slice($selector, 2, str-length($selector)),
+			'%',
+			1
 		);
-	}
 
-	#{$selector} {
-		@extend #{$placeholder} !optional;
+		#{$placeholder} {
+			@include clay-aspect-ratio(
+				map-get($value, width),
+				map-get($value, height)
+			);
+		}
+
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }
 

package/src/scss/components/_badges.scss

@@ -108,11 +108,31 @@
 // Badge Variants
 
 @each $color, $value in $badge-palette {
-	%badge-#{$color} {
-		@include clay-badge-variant($value);
-	}
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.badge-', 1)
+	);
+
+	@if (starts-with($color, '%') or map-get($value, extend)) {
+		#{$selector} {
+			@include clay-badge-variant($value);
+		}
+	} @else {
+		$placeholder: if(
+			starts-with($color, '.') or starts-with($color, '#'),
+			'%#{str-slice($color, 2)}',
+			'%badge-#{$color}'
+		);
+
+		#{$placeholder} {
+			@include clay-badge-variant($value);
+		}
 
-	.badge-#{$color} {
-		@extend %badge-#{$color} !optional;
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }

package/src/scss/components/_buttons.scss

@@ -19,24 +19,30 @@ fieldset:disabled a.btn {
 // 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/_grid.scss

@@ -2,11 +2,7 @@
 	// Single container class with breakpoint max-widths
 
 	.container {
-		margin-left: auto;
-		margin-right: auto;
-		padding-left: $grid-gutter-width * 0.5;
-		padding-right: $grid-gutter-width * 0.5;
-		width: 100%;
+		@include clay-css($clay-container);
 
 		@each $breakpoint, $container-max-width in $container-max-widths {
 			@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
@@ -18,11 +14,7 @@
 	// 100% wide container at all breakpoints
 
 	%container-fluid {
-		margin-left: auto;
-		margin-right: auto;
-		padding-left: $grid-gutter-width * 0.5;
-		padding-right: $grid-gutter-width * 0.5;
-		width: 100%;
+		@include clay-css($clay-container-fluid);
 	}
 
 	.container-fluid {
@@ -45,7 +37,13 @@
 				$_container-max-width: clay-get-fallback($container-max-width);
 				$_width: clay-get-fallback($width);
 
-				@if ($_container-max-width > $_width or $breakpoint == $name) {
+				$container-max-width-pos: index(
+					$grid-breakpoints,
+					$breakpoint map-get($grid-breakpoints, $breakpoint)
+				);
+				$grid-breakpoint-pos: index($grid-breakpoints, $name $width);
+
+				@if ($container-max-width-pos >= $grid-breakpoint-pos) {
 					.container#{breakpoint-infix($name, $grid-breakpoints)} {
 						@extend %responsive-container-#{$breakpoint} !optional;
 					}

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

@@ -80,7 +80,9 @@
 
 @each $selector, $value in $loading-animation-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)
 	);
@@ -93,23 +95,15 @@
 // Loading Animation Variants
 
 @each $selector, $value in $loading-animation-palette {
-	$placeholder: if(
-		starts-with($selector, '.') or starts-with($selector, '#'),
-		'%#{str-slice($selector, 2)}',
-		'%#{$selector}'
-	);
-
 	$_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)
 	);
 
-	#{$placeholder} {
-		@include clay-spinner-variant($value);
-	}
-
 	#{$_selector} {
-		@extend #{$placeholder} !optional;
+		@include clay-spinner-variant($value);
 	}
 }

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

@@ -310,6 +310,12 @@
 				);
 			}
 		}
+
+		&.treeview-no-hover {
+			@include clay-link(
+				map-deep-get($treeview-light, treeview-link, treeview-no-hover)
+			);
+		}
 	}
 
 	.component-action {
@@ -395,6 +401,12 @@
 				);
 			}
 		}
+
+		&.treeview-no-hover {
+			@include clay-link(
+				map-deep-get($treeview-dark, treeview-link, treeview-no-hover)
+			);
+		}
 	}
 
 	.component-action {