@clayui/css 3.64.0 → 3.68.0

package/src/scss/cadmin/variables/_utilities.scss

@@ -1,6 +1,28 @@
 $cadmin-bg-checkered-fg: $cadmin-gray-300 !default;
+
+// .inline-scroller
+
 $cadmin-inline-scroller-max-height: 125px !default;
 
+$cadmin-inline-scroller: () !default;
+$cadmin-inline-scroller: map-deep-merge(
+	(
+		list-style: none,
+		margin: 0,
+		max-height: $cadmin-inline-scroller-max-height,
+		overflow: auto,
+		-webkit-overflow-scrolling: touch,
+		padding: 0,
+		focus: (
+			outline: 0,
+		),
+		focus-visible: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+		),
+	),
+	$cadmin-inline-scroller
+);
+
 // Autofit Row
 
 $cadmin-autofit-col-expand-min-width: 50px !default; // 50px
@@ -150,6 +172,184 @@ $cadmin-inline-item: map-deep-merge(
 
 $cadmin-page-header-bg: $cadmin-white !default;
 
+// Background
+
+$cadmin-bg-theme-colors: () !default;
+$cadmin-bg-theme-colors: map-deep-merge(
+	(
+		'primary': (
+			background-color: $cadmin-primary !important,
+			hover: (
+				background-color: clay-darken($cadmin-primary, 10%) !important,
+			),
+		),
+		'secondary': (
+			background-color: $cadmin-secondary !important,
+			hover: (
+				background-color: clay-darken($cadmin-secondary, 10%) !important,
+			),
+		),
+		'success': (
+			background-color: $cadmin-success !important,
+			hover: (
+				background-color: clay-darken($cadmin-success, 10%) !important,
+			),
+		),
+		'info': (
+			background-color: $cadmin-info !important,
+			hover: (
+				background-color: clay-darken($cadmin-info, 10%) !important,
+			),
+		),
+		'warning': (
+			background-color: $cadmin-warning !important,
+			hover: (
+				background-color: clay-darken($cadmin-warning, 10%) !important,
+			),
+		),
+		'danger': (
+			background-color: $cadmin-danger !important,
+			hover: (
+				background-color: clay-darken($cadmin-danger, 10%) !important,
+			),
+		),
+		'light': (
+			background-color: $cadmin-light !important,
+			hover: (
+				background-color: clay-darken($cadmin-light, 10%) !important,
+			),
+		),
+		'dark': (
+			background-color: $cadmin-dark !important,
+			hover: (
+				background-color: clay-darken($cadmin-dark, 10%) !important,
+			),
+		),
+		'white': (
+			background-color: $cadmin-white !important,
+		),
+		'transparent': (
+			background-color: transparent !important,
+		),
+	),
+	$cadmin-bg-theme-colors
+);
+
+$cadmin-bg-gradient-theme-colors: () !default;
+$cadmin-bg-gradient-theme-colors: map-deep-merge(
+	(
+		'primary': (
+			background: $cadmin-primary
+				linear-gradient(
+					180deg,
+					clay-mix($cadmin-body-bg, $cadmin-primary, 15%),
+					$cadmin-primary
+				)
+				repeat-x !important,
+		),
+		'secondary': (
+			background: $cadmin-secondary
+				linear-gradient(
+					180deg,
+					clay-mix($cadmin-body-bg, $cadmin-secondary, 15%),
+					$cadmin-secondary
+				)
+				repeat-x !important,
+		),
+		'success': (
+			background: $cadmin-success
+				linear-gradient(
+					180deg,
+					clay-clay-mix($cadmin-body-bg, $cadmin-success, 15%),
+					$cadmin-success
+				)
+				repeat-x !important,
+		),
+		'info': (
+			background: $cadmin-info
+				linear-gradient(
+					180deg,
+					clay-mix($cadmin-body-bg, $cadmin-info, 15%),
+					$cadmin-info
+				)
+				repeat-x !important,
+		),
+		'warning': (
+			background: $cadmin-warning
+				linear-gradient(
+					180deg,
+					clay-mix($cadmin-body-bg, $cadmin-warning, 15%),
+					$cadmin-warning
+				)
+				repeat-x !important,
+		),
+		'danger': (
+			background: $cadmin-danger
+				linear-gradient(
+					180deg,
+					clay-mix($cadmin-body-bg, $cadmin-danger, 15%),
+					$cadmin-danger
+				)
+				repeat-x !important,
+		),
+		'light': (
+			background: $cadmin-light
+				linear-gradient(
+					180deg,
+					clay-mix($cadmin-body-bg, $cadmin-light, 15%),
+					$cadmin-light
+				)
+				repeat-x !important,
+		),
+		'dark': (
+			background: $cadmin-dark
+				linear-gradient(
+					180deg,
+					clay-mix($cadmin-body-bg, $cadmin-dark, 15%),
+					$cadmin-dark
+				)
+				repeat-x !important,
+		),
+	),
+	$cadmin-bg-gradient-theme-colors
+);
+
+// Border
+
+$cadmin-border-theme-colors: () !default;
+$cadmin-border-theme-colors: map-deep-merge(
+	(
+		'primary': (
+			border-color: $cadmin-primary !important,
+		),
+		'secondary': (
+			border-color: $cadmin-secondary !important,
+		),
+		'success': (
+			border-color: $cadmin-success !important,
+		),
+		'info': (
+			border-color: $cadmin-info !important,
+		),
+		'warning': (
+			border-color: $cadmin-warning !important,
+		),
+		'danger': (
+			border-color: $cadmin-danger !important,
+		),
+		'light': (
+			border-color: $cadmin-light !important,
+		),
+		'dark': (
+			border-color: $cadmin-dark !important,
+		),
+		'white': (
+			border-color: $cadmin-white !important,
+		),
+	),
+	$cadmin-border-theme-colors
+);
+
 // Display
 
 $cadmin-displays: none, inline, inline-block, block, table, table-row,
@@ -204,3 +404,112 @@ $cadmin-font-sizes: map-deep-merge(
 	),
 	$cadmin-font-sizes
 );
+
+// Text
+
+$cadmin-text-theme-colors: () !default;
+$cadmin-text-theme-colors: map-deep-merge(
+	(
+		'primary': (
+			color: $cadmin-primary !important,
+			hover: (
+				color:
+					clay-darken(
+						$cadmin-primary,
+						$cadmin-emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'secondary': (
+			color: $cadmin-secondary !important,
+			hover: (
+				color:
+					clay-darken(
+						$cadmin-secondary,
+						$cadmin-emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'success': (
+			color: $cadmin-success !important,
+			hover: (
+				color:
+					clay-darken(
+						$cadmin-success,
+						$cadmin-emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'info': (
+			color: $cadmin-info !important,
+			hover: (
+				color:
+					clay-darken(
+						$cadmin-info,
+						$cadmin-emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'warning': (
+			color: $cadmin-warning !important,
+			hover: (
+				color:
+					clay-darken(
+						$cadmin-warning,
+						$cadmin-emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'danger': (
+			color: $cadmin-danger !important,
+			hover: (
+				color:
+					clay-darken(
+						$cadmin-danger,
+						$cadmin-emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'light': (
+			color: $cadmin-light !important,
+			hover: (
+				color:
+					clay-darken(
+						$cadmin-light,
+						$cadmin-emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'dark': (
+			color: $cadmin-dark !important,
+			hover: (
+				color:
+					clay-darken(
+						$cadmin-dark,
+						$cadmin-emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'body': (
+			color: $cadmin-body-color !important,
+		),
+		'muted': (
+			color: $cadmin-text-muted !important,
+		),
+		'black-50': (
+			color: rgba($cadmin-black, 0.5) !important,
+		),
+		'white-50': (
+			color: rgba($cadmin-white, 0.5) !important,
+		),
+	),
+	$cadmin-text-theme-colors
+);

package/src/scss/components/_alerts.scss

@@ -21,13 +21,11 @@
 	@include clay-css($alert-indicator);
 
 	.lexicon-icon {
-		@include clay-css(setter(map-get($alert-indicator, lexicon-icon), ()));
+		@include clay-css(map-get($alert-indicator, lexicon-icon));
 	}
 
 	+ .lead {
-		$lead: setter(map-get($alert-indicator, lead), ());
-
-		@include clay-css($lead);
+		@include clay-css(map-get($alert-indicator, lead));
 	}
 }
 
@@ -75,9 +73,7 @@
 	@include clay-css($alert-notifications-absolute);
 
 	@include clay-scale-component(null, $breakpoint-down) {
-		$mobile: setter(map-get($alert-notifications-absolute, mobile), ());
-
-		@include clay-css($mobile);
+		@include clay-css(map-get($alert-notifications-absolute, mobile));
 	}
 }
 
@@ -87,9 +83,7 @@
 	@include clay-css($alert-notifications-fixed);
 
 	@include clay-scale-component(null, $breakpoint-down) {
-		$mobile: setter(map-get($alert-notifications-fixed, mobile), ());
-
-		@include clay-css($mobile);
+		@include clay-css(map-get($alert-notifications-fixed, mobile));
 	}
 }
 
@@ -170,12 +164,7 @@
 	@include clay-css($alert-inline);
 
 	&.alert-dismissible {
-		$alert-dismissible: setter(
-			map-get($alert-inline, alert-dismissible),
-			()
-		);
-
-		@include clay-css($alert-dismissible);
+		@include clay-css(map-get($alert-inline, alert-dismissible));
 
 		&.alert-fluid {
 			$alert-dismissible-alert-fluid: setter(
@@ -195,21 +184,17 @@
 				@include clay-css($container-fluid);
 
 				> .alert-autofit-row {
-					$alert-autofit-row: setter(
-						map-get($container-fluid, alert-autofit-row),
-						map-get($alert-inline, alert-autofit-row),
-						()
+					@include clay-css(
+						setter(
+							map-get($container-fluid, alert-autofit-row),
+							map-get($alert-inline, alert-autofit-row)
+						)
 					);
 
-					@include clay-css($alert-autofit-row);
-
 					.btn-group {
-						$btn-group: setter(
-							map-get($alert-autofit-row, btn-group),
-							()
+						@include clay-css(
+							map-get($alert-autofit-row, btn-group)
 						);
-
-						@include clay-css($btn-group);
 					}
 				}
 			}
@@ -225,16 +210,12 @@
 		@include clay-css($alert-autofit-row);
 
 		.btn-group {
-			$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
-
-			@include clay-css($btn-group);
+			@include clay-css(map-get($alert-autofit-row, btn-group));
 		}
 	}
 
 	.close {
-		$close: setter(map-get($alert-inline, close), ());
-
-		@include clay-close($close);
+		@include clay-close(map-get($alert-inline, close));
 	}
 }
 
@@ -252,22 +233,16 @@
 		@include clay-css($alert-autofit-row);
 
 		> .autofit-col {
-			$autofit-col: setter(map-get($alert-autofit-row, autofit-col), ());
-
-			@include clay-css($autofit-col);
+			@include clay-css(map-get($alert-autofit-row, autofit-col));
 		}
 
 		.btn-group {
-			$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
-
-			@include clay-css($btn-group);
+			@include clay-css(map-get($alert-autofit-row, btn-group));
 		}
 	}
 
 	.close {
-		$close: setter(map-get($alert-autofit-stacked, close), ());
-
-		@include clay-close($close);
+		@include clay-close(map-get($alert-autofit-stacked, close));
 	}
 }
 
@@ -287,27 +262,21 @@
 		}
 
 		> .autofit-col {
-			$autofit-col: setter(map-get($alert-autofit-row, autofit-col), ());
-
 			@include media-breakpoint-down(sm) {
-				@include clay-css($autofit-col);
+				@include clay-css(map-get($alert-autofit-row, autofit-col));
 			}
 		}
 
 		.btn-group {
-			$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
-
 			@include media-breakpoint-down(sm) {
-				@include clay-css($btn-group);
+				@include clay-css(map-get($alert-autofit-row, btn-group));
 			}
 		}
 	}
 
 	.close {
-		$close: setter(map-get($alert-autofit-stacked-sm-down, close), ());
-
 		@include media-breakpoint-down(sm) {
-			@include clay-css($close);
+			@include clay-css(map-get($alert-autofit-stacked-sm-down, close));
 		}
 	}
 }
@@ -328,27 +297,21 @@
 		}
 
 		> .autofit-col {
-			$autofit-col: setter(map-get($alert-autofit-row, autofit-col), ());
-
 			@include media-breakpoint-down(xs) {
-				@include clay-css($autofit-col);
+				@include clay-css(map-get($alert-autofit-row, autofit-col));
 			}
 		}
 
 		.btn-group {
-			$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
-
 			@include media-breakpoint-down(xs) {
-				@include clay-css($btn-group);
+				@include clay-css(map-get($alert-autofit-row, btn-group));
 			}
 		}
 	}
 
 	.close {
-		$close: setter(map-get($alert-autofit-stacked-xs-down, close), ());
-
 		@include media-breakpoint-down(xs) {
-			@include clay-css($close);
+			@include clay-css(map-get($alert-autofit-stacked-xs-down, close));
 		}
 	}
 }
@@ -365,22 +328,12 @@
 
 		> .container,
 		> .container-fluid {
-			$container-fluid: setter(
-				map-get($alert-fluid, container-fluid),
-				()
-			);
-
-			@include clay-css($container-fluid);
+			@include clay-css(map-get($alert-fluid, container-fluid));
 		}
 	}
 
 	&.alert-feedback {
-		$alert-feedback: setter(
-			map-get($alert-indicator-start, alert-feedback),
-			()
-		);
-
-		@include clay-css($alert-feedback);
+		@include clay-css(map-get($alert-indicator-start, alert-feedback));
 	}
 
 	.alert-indicator {
@@ -392,9 +345,7 @@
 		@include clay-css($alert-indicator);
 
 		+ .lead {
-			$lead: setter(map-get($alert-indicator, lead), ());
-
-			@include clay-css($lead);
+			@include clay-css(map-get($alert-indicator, lead));
 		}
 	}
 
@@ -407,12 +358,9 @@
 		@include clay-css($alert-autofit-row);
 
 		.alert-indicator:only-child {
-			$alert-indicator-only-child: setter(
-				map-get($alert-autofit-row, alert-indicator-only-child),
-				()
+			@include clay-css(
+				map-get($alert-autofit-row, alert-indicator-only-child)
 			);
-
-			@include clay-css($alert-indicator-only-child);
 		}
 	}
 }
@@ -420,11 +368,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}'
+		);
+
+		#{$placeholder} {
+			@include clay-alert-variant($value);
+		}
 
-	.alert-#{$color} {
-		@extend %alert-#{$color} !optional;
+		#{$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;
+		}
 	}
 }