@clayui/css 3.62.1 → 3.65.1

package/src/scss/cadmin/components/_buttons.scss

@@ -18,20 +18,32 @@ fieldset:disabled a.btn {
 
 // Button Sizes
 
-%clay-btn-lg {
-	@include clay-button-variant($cadmin-btn-lg);
-}
-
-.btn-lg {
-	@extend %clay-btn-lg !optional;
-}
-
-%clay-btn-sm {
-	@include clay-button-variant($cadmin-btn-sm);
-}
-
-.btn-sm {
-	@extend %clay-btn-sm !optional;
+@each $size, $value in $cadmin-btn-sizes {
+	$selector: if(
+		starts-with($size, 'btn-'),
+		clay-str-replace($size, 'btn-', '.btn-'),
+		$size
+	);
+
+	@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;
+		}
+	}
 }
 
 // Button Block
@@ -67,65 +79,119 @@ input[type='button'] {
 
 // Button Monospaced
 
-.btn-monospaced {
-	@include clay-button-variant($cadmin-btn-monospaced);
-
-	&.btn .lexicon-icon {
-		margin-top: 0;
+@each $size, $value in $cadmin-btn-monospaced-sizes {
+	$selector: if(
+		starts-with($size, 'btn-monospaced-'),
+		clay-str-replace($size, 'btn-monospaced', '.btn-monospaced.btn'),
+		if(
+			$size == 'btn-monospaced',
+			clay-str-replace($size, 'btn-monospaced', '.btn-monospaced'),
+			$size
+		)
+	);
+
+	@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;
+		}
 	}
 }
 
-%clay-btn-monospaced-lg {
-	@include clay-button-variant($cadmin-btn-monospaced-lg);
-}
-
-.btn-monospaced.btn-lg {
-	@extend %clay-btn-monospaced-lg !optional;
-}
-
-%clay-btn-monospaced-sm {
-	@include clay-button-variant($cadmin-btn-monospaced-sm);
-}
-
-.btn-monospaced.btn-sm {
-	@extend %clay-btn-monospaced-sm !optional;
-}
-
 // Button Variants
 
-@each $cadmin-color, $cadmin-value in $cadmin-btn-palette {
-	%btn-#{$cadmin-color} {
-		@include clay-button-variant($cadmin-value);
-	}
-
-	.btn-#{$cadmin-color} {
-		@extend %btn-#{$cadmin-color} !optional;
-	}
-
-	%btn-#{$cadmin-color}-focus {
-		background-color: map-get($cadmin-value, focus-bg);
-		border-color: map-get($cadmin-value, focus-border-color);
-		box-shadow: map-get($cadmin-value, focus-box-shadow);
-		color: map-get($cadmin-value, focus-color);
+@each $color, $value in $cadmin-btn-palette {
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.btn-', 1)
+	);
+
+	@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 $cadmin-color, $cadmin-value in $cadmin-btn-outline-palette {
-	%btn-outline-#{$cadmin-color} {
-		@include clay-button-variant($cadmin-value);
-	}
-
-	.btn-outline-#{$cadmin-color} {
-		@extend %btn-outline-#{$cadmin-color} !optional;
-	}
-
-	%btn-outline-#{$cadmin-color}-focus {
-		background-color: map-get($cadmin-value, focus-bg);
-		border-color: map-get($cadmin-value, focus-border-color);
-		box-shadow: map-get($cadmin-value, focus-box-shadow);
-		color: map-get($cadmin-value, focus-color);
+@each $color, $value in $cadmin-btn-outline-palette {
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.btn-outline-', 1)
+	);
+
+	@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/cadmin/components/_grid.scss

@@ -2,11 +2,7 @@
 	// Single container class with breakpoint max-widths
 
 	.container {
-		margin-left: auto;
-		margin-right: auto;
-		padding-left: $cadmin-grid-gutter-width * 0.5;
-		padding-right: $cadmin-grid-gutter-width * 0.5;
-		width: 100%;
+		@include clay-css($cadmin-clay-container);
 
 		@each $cadmin-breakpoint,
 			$cadmin-container-max-width in $cadmin-container-max-widths
@@ -23,11 +19,7 @@
 	// 100% wide container at all breakpoints
 
 	%container-fluid {
-		margin-left: auto;
-		margin-right: auto;
-		padding-left: $cadmin-grid-gutter-width * 0.5;
-		padding-right: $cadmin-grid-gutter-width * 0.5;
-		width: 100%;
+		@include clay-css($cadmin-clay-container-fluid);
 	}
 
 	.container-fluid {
@@ -52,12 +44,17 @@
 			}
 
 			@each $cadmin-name, $cadmin-width in $cadmin-grid-breakpoints {
-				@if (
-					$cadmin-container-max-width >
-						$cadmin-width or
-						$cadmin-breakpoint ==
-						$cadmin-name
-				) {
+				$container-max-width-pos: index(
+					$cadmin-grid-breakpoints,
+					$cadmin-breakpoint
+						map-get($cadmin-grid-breakpoints, $cadmin-breakpoint)
+				);
+				$grid-breakpoint-pos: index(
+					$cadmin-grid-breakpoints,
+					$cadmin-name $cadmin-width
+				);
+
+				@if ($container-max-width-pos >= $grid-breakpoint-pos) {
 					.container#{breakpoint-infix($cadmin-name, $cadmin-grid-breakpoints)} {
 						@extend %responsive-container-#{$cadmin-breakpoint}
 								!optional;

package/src/scss/cadmin/components/_labels.scss

@@ -56,24 +56,64 @@
 
 // Label Sizes
 
-@each $cadmin-selector, $cadmin-value in $cadmin-label-sizes {
-	%#{$cadmin-selector} {
-		@include clay-label-variant($cadmin-value);
-	}
+@each $selector, $value in $cadmin-label-sizes {
+	$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);
+		}
 
-	.#{$cadmin-selector} {
-		@extend %#{$cadmin-selector} !optional;
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }
 
 // Label Variants
 
-@each $cadmin-color, $cadmin-value in $cadmin-label-palette {
-	%label-#{$cadmin-color} {
-		@include clay-label-variant($cadmin-value);
-	}
+@each $color, $value in $cadmin-label-palette {
+	$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}'
+		);
+
+		#{$placeholder} {
+			@include clay-label-variant($value);
+		}
 
-	.label-#{$cadmin-color} {
-		@extend %label-#{$cadmin-color} !optional;
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }

package/src/scss/cadmin/components/_loaders.scss

@@ -80,7 +80,9 @@
 
 @each $selector, $value in $cadmin-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 $cadmin-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/cadmin/components/_popovers.scss

@@ -2,7 +2,9 @@
 
 @each $selector, $value in $cadmin-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)
 	);
@@ -154,7 +156,9 @@
 
 @each $selector, $value in $cadmin-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)
 	);
@@ -168,7 +172,9 @@
 
 @each $selector, $value in $cadmin-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)
 	);
@@ -182,7 +188,9 @@
 
 @each $selector, $value in $cadmin-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/cadmin/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 $cadmin-enable-print-styles {
@@ -120,4 +120,4 @@
 	}
 }
 
-/* REUSE-Snippet-End */
+/* SPDX-SnippetEnd */

package/src/scss/cadmin/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>
  */
 
 html#{$cadmin-selector} {
@@ -393,4 +393,4 @@ html#{$cadmin-selector} {
 	}
 }
 
-/* REUSE-Snippet-End */
+/* SPDX-SnippetEnd */

package/src/scss/cadmin/components/_stickers.scss

@@ -68,25 +68,65 @@
 
 // Sticker Sizes
 
-@each $cadmin-selector, $cadmin-value in $cadmin-sticker-sizes {
-	%#{$cadmin-selector} {
-		@include clay-sticker-variant($cadmin-value);
-	}
+@each $selector, $value in $cadmin-sticker-sizes {
+	$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);
+		}
 
-	.#{$cadmin-selector} {
-		@extend %#{$cadmin-selector} !optional;
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }
 
 // Sticker Variants
 
-@each $cadmin-color, $cadmin-value in $cadmin-sticker-palette {
-	%sticker-#{$cadmin-color} {
-		@include clay-sticker-variant($cadmin-value);
-	}
+@each $color, $value in $cadmin-sticker-palette {
+	$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-#{$cadmin-color} {
-		@extend %sticker-#{$cadmin-color} !optional;
+		#{$selector} {
+			@extend #{$placeholder} !optional;
+		}
 	}
 }
 

package/src/scss/cadmin/components/_treeview.scss

@@ -346,6 +346,16 @@
 				);
 			}
 		}
+
+		&.treeview-no-hover {
+			@include clay-link(
+				map-deep-get(
+					$cadmin-treeview-light,
+					treeview-link,
+					treeview-no-hover
+				)
+			);
+		}
 	}
 
 	.component-action {
@@ -437,6 +447,16 @@
 				);
 			}
 		}
+
+		&.treeview-no-hover {
+			@include clay-link(
+				map-deep-get(
+					$cadmin-treeview-dark,
+					treeview-link,
+					treeview-no-hover
+				)
+			);
+		}
 	}
 
 	.component-action {