@clayui/css 3.63.0 → 3.65.2

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/_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 {

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

@@ -364,6 +364,7 @@ $cadmin-form-control-inset: map-deep-merge(
 		color: $cadmin-input-color,
 		flex-grow: 1,
 		margin-bottom: $cadmin-form-control-inset-margin-y,
+		margin-left: 8px,
 		margin-top: $cadmin-form-control-inset-margin-y,
 		min-height: $cadmin-form-control-inset-min-height,
 		padding: 0,
@@ -391,6 +392,7 @@ $cadmin-form-control-tag-group: map-deep-merge(
 		flex-wrap: wrap,
 		height: auto,
 		padding-bottom: $cadmin-form-control-tag-group-padding-y,
+		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: $cadmin-form-control-tag-group-padding-y,
 	),
@@ -487,21 +489,22 @@ $cadmin-form-control-tag-group-sm: map-deep-merge(
 		line-height: $cadmin-input-line-height-sm,
 		min-height: $cadmin-input-height-sm,
 		padding-bottom: 0,
-		padding-left: 0.25rem,
-		padding-right: 0.25rem,
+		padding-left: 4px,
+		padding-right: 4px,
 		padding-top: 0,
 		inline-item: (
 			margin-bottom: 0,
 			margin-top: 0,
 		),
 		label: (
-			margin-bottom: 0.1875rem,
-			margin-right: 0.25rem,
-			margin-top: 0.1875rem,
+			margin-bottom: 3px,
+			margin-right: 4px,
+			margin-top: 3px,
 		),
 		form-control-inset: (
-			margin-bottom: 0.125rem,
-			margin-top: 0.1875rem,
+			margin-bottom: 2px,
+			margin-left: 8px,
+			margin-top: 3px,
 		),
 	),
 	$cadmin-form-control-tag-group-sm
@@ -579,9 +582,9 @@ $cadmin-form-text: map-merge(
 
 // .form-feedback-item
 
-$cadmin-form-feedback-font-size: 0.875rem !default;
+$cadmin-form-feedback-font-size: 14px !default;
 $cadmin-form-feedback-font-weight: $cadmin-font-weight-semi-bold !default;
-$cadmin-form-feedback-margin-top: 0.25rem !default;
+$cadmin-form-feedback-margin-top: 4px !default;
 
 $cadmin-form-feedback-item: () !default;
 $cadmin-form-feedback-item: map-merge(
@@ -1268,7 +1271,7 @@ $cadmin-input-select-size: map-deep-merge(
 				),
 			),
 			option: (
-				padding: 0.40625rem 0.5rem,
+				padding: 6.5px 8px,
 			),
 		),
 	),

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

package/src/scss/cadmin/variables/_treeview.scss

@@ -197,6 +197,12 @@ $cadmin-treeview-light: map-deep-merge(
 		),
 		treeview-link: (
 			color: $cadmin-gray-600,
+			treeview-no-hover: (
+				hover: (
+					background-color: transparent,
+					color: $cadmin-gray-600,
+				),
+			),
 			hover: (
 				background-color: $cadmin-gray-100,
 				color: $cadmin-gray-900,
@@ -233,6 +239,12 @@ $cadmin-treeview-dark: map-deep-merge(
 		),
 		treeview-link: (
 			color: $cadmin-secondary-l1,
+			treeview-no-hover: (
+				hover: (
+					background-color: transparent,
+					color: $cadmin-secondary-l1,
+				),
+			),
 			hover: (
 				background-color: rgba($cadmin-white, 0.04),
 			),