@clayui/css 3.64.0 → 3.68.0

package/src/scss/cadmin/components/_dropdowns.scss

@@ -248,18 +248,22 @@
 	.dropdown-subheader,
 	.dropdown-caption,
 	.dropdown-item {
-		padding-left: $cadmin-dropdown-item-padding-x +
-			$cadmin-dropdown-item-indicator-size +
-			$cadmin-dropdown-item-indicator-spacer-x;
+		padding-left: calc(
+			#{$cadmin-dropdown-item-padding-x} + #{$cadmin-dropdown-item-indicator-size} +
+				#{$cadmin-dropdown-item-indicator-spacer-x}
+		);
 	}
 
 	@if ($cadmin-enable-c-inner) {
 		.dropdown-item {
 			.c-inner {
-				margin-left: math-sign(
-					$cadmin-dropdown-item-padding-x +
-						$cadmin-dropdown-item-indicator-size +
-						$cadmin-dropdown-item-indicator-spacer-x
+				margin-left: calc(
+					(
+							#{$cadmin-dropdown-item-padding-x} +
+								#{$cadmin-dropdown-item-indicator-size} +
+								#{$cadmin-dropdown-item-indicator-spacer-x}
+						) *
+						-1
 				);
 			}
 		}
@@ -291,16 +295,20 @@
 	}
 
 	.dropdown-item {
-		padding-right: $cadmin-dropdown-item-padding-x +
-			$cadmin-dropdown-item-indicator-size +
-			$cadmin-dropdown-item-indicator-spacer-x;
+		padding-right: calc(
+			#{$cadmin-dropdown-item-padding-x} + #{$cadmin-dropdown-item-indicator-size} +
+				#{$cadmin-dropdown-item-indicator-spacer-x}
+		);
 
 		@if ($cadmin-enable-c-inner) {
 			.c-inner {
-				margin-right: math-sign(
-					$cadmin-dropdown-item-padding-x +
-						$cadmin-dropdown-item-indicator-size +
-						$cadmin-dropdown-item-indicator-spacer-x
+				margin-right: calc(
+					(
+							#{$cadmin-dropdown-item-padding-x} +
+								#{$cadmin-dropdown-item-indicator-size} +
+								#{$cadmin-dropdown-item-indicator-spacer-x}
+						) *
+						-1
 				);
 			}
 		}

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/_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/_dropdowns.scss

@@ -73,8 +73,8 @@ $cadmin-dropdown-menu: map-deep-merge(
 
 // .dropdown-item
 
-$cadmin-dropdown-item-padding-x: 20px !default; // 20px
-$cadmin-dropdown-item-padding-y: 8px !default; // 8px
+$cadmin-dropdown-item-padding-x: 16px !default;
+$cadmin-dropdown-item-padding-y: 8px !default;
 
 $cadmin-dropdown-item-disabled-cursor: $cadmin-disabled-cursor !default;
 
@@ -163,20 +163,20 @@ $cadmin-dropdown-item-base: map-deep-merge(
 			line-height: $cadmin-dropdown-font-size * $cadmin-line-height-base,
 		),
 		'&.autofit-row': (
-			padding-left: 1rem,
-			padding-right: 1rem,
+			padding-left: calc(#{$cadmin-dropdown-item-padding-x} - 4px),
+			padding-right: calc(#{$cadmin-dropdown-item-padding-x} - 4px),
 			autofit-col: (
-				padding-left: 0.25rem,
-				padding-right: 0.25rem,
+				padding-left: 4px,
+				padding-right: 4px,
 			),
 		),
 		autofit-row: (
-			margin-left: 0.25rem,
-			margin-right: 0.25rem,
+			margin-left: -4px,
+			margin-right: -4px,
 			width: auto,
 			autofit-col: (
-				padding-left: 0.25rem,
-				padding-right: 0.25rem,
+				padding-left: 4px,
+				padding-right: 4px,
 			),
 		),
 	),

package/src/scss/cadmin/variables/_forms.scss

@@ -118,12 +118,15 @@ $cadmin-input-plaintext-color: $cadmin-body-color !default;
 
 // Deprecated
 
-$cadmin-input-height-border: $cadmin-input-border-bottom-width +
-	$cadmin-input-border-top-width !default;
+$cadmin-input-height-border: calc(
+	#{$cadmin-input-border-bottom-width} + #{$cadmin-input-border-top-width}
+) !default;
 
 // Deprecated
 
-$cadmin-input-height-inner: $cadmin-input-height - $cadmin-input-height-border !default;
+$cadmin-input-height-inner: calc(
+	#{$cadmin-input-height} - #{$cadmin-input-border-bottom-width} - #{$cadmin-input-border-top-width}
+) !default;
 
 // Deprecated
 
@@ -194,6 +197,7 @@ $cadmin-input-label: map-deep-merge(
 		font-weight: $cadmin-input-label-font-weight,
 		margin-bottom: $cadmin-input-label-margin-bottom,
 		max-width: 100%,
+		position: static,
 		word-wrap: break-word,
 		mobile: (
 			font-size: $cadmin-input-label-font-size-mobile,

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

@@ -19,8 +19,9 @@ $cadmin-modal-content-border-color: transparent !default;
 $cadmin-modal-content-border-width: $cadmin-border-width !default;
 
 $cadmin-modal-content-border-radius: $cadmin-border-radius-lg !default;
-$cadmin-modal-content-inner-border-radius: $cadmin-modal-content-border-radius -
-	$cadmin-modal-content-border-width !default;
+$cadmin-modal-content-inner-border-radius: calc(
+	#{$cadmin-modal-content-border-radius} - #{$cadmin-modal-content-border-width}
+) !default;
 
 $cadmin-modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default;
 $cadmin-modal-content-box-shadow-sm-up: 0 8px 16px rgba($cadmin-black, 0.5) !default;

package/src/scss/cadmin/variables/_popovers.scss

@@ -3,8 +3,9 @@ $cadmin-popover-border-color: transparent !default;
 $cadmin-popover-border-width: $cadmin-border-width !default;
 
 $cadmin-popover-border-radius: $cadmin-border-radius !default; // 4px
-$cadmin-popover-inner-border-radius: $cadmin-popover-border-radius -
-	$cadmin-popover-border-width !default;
+$cadmin-popover-inner-border-radius: calc(
+	#{$cadmin-popover-border-radius} - #{$cadmin-popover-border-width}
+) !default;
 
 $cadmin-popover-box-shadow: 0 1px 15px -2px rgba(0, 0, 0, 0.2) !default;
 $cadmin-popover-font-size: $cadmin-font-size-sm !default;