@clayui/css 3.62.1 → 3.65.1

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
@@ -349,6 +349,30 @@ $cadmin-grid-row-columns: 6 !default;
 
 // Containers
 
+$cadmin-clay-container: () !default;
+$cadmin-clay-container: map-merge(
+	(
+		margin-left: auto,
+		margin-right: auto,
+		padding-left: $cadmin-grid-gutter-width * 0.5,
+		padding-right: $cadmin-grid-gutter-width * 0.5,
+		width: 100%,
+	),
+	$cadmin-clay-container
+);
+
+$cadmin-clay-container-fluid: () !default;
+$cadmin-clay-container-fluid: map-merge(
+	(
+		margin-left: auto,
+		margin-right: auto,
+		padding-left: $cadmin-grid-gutter-width * 0.5,
+		padding-right: $cadmin-grid-gutter-width * 0.5,
+		width: 100%,
+	),
+	$cadmin-clay-container-fluid
+);
+
 $cadmin-container-max-widths: (
 	sm: 540px,
 	md: 720px,

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),
 			),

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
+);