@clayui/css 3.64.0 → 3.65.1

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

@@ -24,42 +24,36 @@
 
 // Background
 
-@each $cadmin-color, $cadmin-value in $cadmin-theme-colors {
-	.bg-#{$cadmin-color} {
-		background-color: $cadmin-value !important;
+@each $color, $value in $cadmin-bg-theme-colors {
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.bg-', 1)
+	);
+
+	#{$selector} {
+		@include clay-css($value);
 	}
 
-	a.bg-#{$cadmin-color},
-	button.bg-#{$cadmin-color} {
+	a#{$selector},
+	button#{$selector} {
 		&:hover,
 		&:focus {
-			background-color: clay-darken($cadmin-value, 10%) !important;
+			@include clay-css(map-get($value, hover));
 		}
 	}
 }
 
 @if $cadmin-enable-gradients {
-	@each $cadmin-color, $cadmin-value in $cadmin-theme-colors {
-		.bg-gradient-#{$cadmin-color} {
-			background: $cadmin-value
-				linear-gradient(
-					180deg,
-					clay-mix($cadmin-body-bg, $cadmin-value, 15%),
-					$cadmin-value
-				)
-				repeat-x !important;
+	@each $color, $value in $cadmin-bg-gradient-theme-colors {
+		.bg-gradient-#{$color} {
+			@include clay-css($value);
 		}
 	}
 }
 
-.bg-white {
-	background-color: $cadmin-white !important;
-}
-
-.bg-transparent {
-	background-color: transparent !important;
-}
-
 // Border
 
 .border {
@@ -102,14 +96,18 @@
 	border-left: 0 !important;
 }
 
-@each $cadmin-color, $cadmin-value in $cadmin-theme-colors {
-	.border-#{$cadmin-color} {
-		border-color: $cadmin-value !important;
-	}
-}
+@each $color, $value in $cadmin-border-theme-colors {
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.border-', 1)
+	);
 
-.border-white {
-	border-color: $cadmin-white !important;
+	#{$selector} {
+		@include clay-css($value);
+	}
 }
 
 // Border-radius
@@ -200,9 +198,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 {
@@ -255,7 +253,7 @@
 	}
 }
 
-/* REUSE-Snippet-End */
+/* SPDX-SnippetEnd */
 
 // Flex
 
@@ -759,7 +757,9 @@
 
 @each $selector, $value in $cadmin-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)
 	);
@@ -775,40 +775,27 @@
 	color: $cadmin-white !important;
 }
 
-@each $cadmin-color, $cadmin-value in $cadmin-theme-colors {
-	.text-#{$cadmin-color} {
-		color: $cadmin-value !important;
+@each $color, $value in $cadmin-text-theme-colors {
+	$selector: if(
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
+		$color,
+		str-insert($color, '.text-', 1)
+	);
+
+	#{$selector} {
+		@include clay-css($value);
 	}
 
-	@if $cadmin-emphasized-link-hover-darken-percentage != 0 {
-		a.text-#{$cadmin-color} {
-			&:hover,
-			&:focus {
-				color: clay-darken(
-					$cadmin-value,
-					$cadmin-emphasized-link-hover-darken-percentage
-				) !important;
-			}
+	a#{$selector} {
+		&:hover,
+		&:focus {
+			@include clay-css(map-get($value, hover));
 		}
 	}
 }
 
-.text-body {
-	color: $cadmin-body-color !important;
-}
-
-.text-muted {
-	color: $cadmin-text-muted !important;
-}
-
-.text-black-50 {
-	color: rgba($cadmin-black, 0.5) !important;
-}
-
-.text-white-50 {
-	color: rgba($cadmin-white, 0.5) !important;
-}
-
 // Misc
 
 .text-hide {

package/src/scss/cadmin/components/_utilities.scss

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

package/src/scss/cadmin/variables/_alerts.scss

@@ -196,6 +196,7 @@ $cadmin-alert-indicator: () !default;
 $cadmin-alert-indicator: map-deep-merge(
 	(
 		font-size: $cadmin-alert-indicator-font-size,
+		line-height: 1,
 		lead: (
 			margin-left: $cadmin-alert-lead-spacer-x,
 		),
@@ -420,6 +421,7 @@ $cadmin-alert-notification-sm-down: map-merge(
 $cadmin-alert-autofit-row: () !default;
 $cadmin-alert-autofit-row: map-deep-merge(
 	(
+		align-items: baseline,
 		margin-left: -4px,
 		margin-right: -4px,
 		width: auto,

package/src/scss/cadmin/variables/_buttons.scss

@@ -187,6 +187,17 @@ $cadmin-btn-sm: map-deep-merge(
 	$cadmin-btn-sm
 );
 
+// Button Sizes
+
+$cadmin-btn-sizes: () !default;
+$cadmin-btn-sizes: map-deep-merge(
+	(
+		btn-lg: $cadmin-btn-lg,
+		btn-sm: $cadmin-btn-sm,
+	),
+	$cadmin-btn-sizes
+);
+
 // Button Monospaced
 
 $cadmin-btn-monospaced-padding-x: 0 !default;
@@ -280,6 +291,18 @@ $cadmin-btn-monospaced-sm: map-deep-merge(
 	$cadmin-btn-monospaced-sm
 );
 
+// Button Monospaced Sizes
+
+$cadmin-btn-monospaced-sizes: () !default;
+$cadmin-btn-monospaced-sizes: map-deep-merge(
+	(
+		btn-monospaced: $cadmin-btn-monospaced,
+		btn-monospaced-lg: $cadmin-btn-monospaced-lg,
+		btn-monospaced-sm: $cadmin-btn-monospaced-sm,
+	),
+	$cadmin-btn-monospaced-sizes
+);
+
 // Button Block
 
 $cadmin-btn-block-spacing-y: 8px !default;

package/src/scss/cadmin/variables/_globals.scss

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