@clayui/css 3.64.0 → 3.65.1

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

@@ -420,11 +420,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}'
+		);
 
-	.alert-#{$color} {
-		@extend %alert-#{$color} !optional;
+		#{$placeholder} {
+			@include clay-alert-variant($value);
+		}
+
+		#{$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;
+		}
 	}
 }

package/src/scss/components/_buttons.scss

@@ -19,24 +19,30 @@ fieldset:disabled a.btn {
 // Button Sizes
 
 @each $size, $value in $btn-sizes {
-	$placeholder: if(
-		starts-with($size, 'btn-'),
-		'%clay-#{$size}',
-		'%#{str-slice($size, 2)}'
-	);
-
 	$selector: if(
 		starts-with($size, 'btn-'),
 		clay-str-replace($size, 'btn-', '.btn-'),
 		$size
 	);
 
-	#{$placeholder} {
-		@include clay-button-variant($value);
-	}
-
-	#{$selector} {
-		@extend #{$placeholder} !optional;
+	@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;
+		}
 	}
 }
 
@@ -74,12 +80,6 @@ input[type='button'] {
 // Button Monospaced
 
 @each $size, $value in $btn-monospaced-sizes {
-	$placeholder: if(
-		starts-with($size, 'btn-monospaced'),
-		'%clay-#{$size}',
-		'%#{str-slice($size, 2)}'
-	);
-
 	$selector: if(
 		starts-with($size, 'btn-monospaced-'),
 		clay-str-replace($size, 'btn-monospaced', '.btn-monospaced.btn'),
@@ -90,80 +90,108 @@ input[type='button'] {
 		)
 	);
 
-	#{$placeholder} {
-		@include clay-button-variant($value);
-	}
-
-	#{$selector} {
-		@extend #{$placeholder} !optional;
+	@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;
+		}
 	}
 }
 
 // Button Variants
 
 @each $color, $value in $btn-palette {
-	$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'
-	);
-
 	$selector: if(
-		starts-with($color, '.') or starts-with($color, '#'),
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
 		$color,
 		str-insert($color, '.btn-', 1)
 	);
 
-	#{$placeholder} {
-		@include clay-button-variant($value);
-	}
-
-	#{$selector} {
-		@extend #{$placeholder} !optional;
-	}
-
-	#{$placeholder-focus} {
-		@include clay-button-variant(map-get($value, focus));
+	@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 $color, $value in $btn-outline-palette {
-	$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'
-	);
-
 	$selector: if(
-		starts-with($color, '.') or starts-with($color, '#'),
+		starts-with($color, '.') or
+			starts-with($color, '#') or
+			starts-with($color, '%'),
 		$color,
 		str-insert($color, '.btn-outline-', 1)
 	);
 
-	#{$placeholder} {
-		@include clay-button-variant($value);
-	}
-
-	#{$selector} {
-		@extend #{$placeholder} !optional;
-	}
-
-	#{$placeholder-focus} {
-		@include clay-button-variant(map-get($value, focus));
+	@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));
+		}
 	}
 }