@clayui/css 3.163.0 → 3.164.0

package/src/scss/cadmin/variables/_cards.scss

@@ -1,22 +1,29 @@
 $cadmin-card-bg: $cadmin-white !default;
-$cadmin-card-border-color: rgba($cadmin-black, 0.125) !default;
+$cadmin-card-border-color: $cadmin-secondary-l2 !default;
+$cadmin-card-border-radius: $cadmin-border-radius-xl !default;
 $cadmin-card-border-style: solid !default;
-$cadmin-card-border-width: 0px !default;
-
-$cadmin-card-border-radius: $cadmin-border-radius !default;
-$cadmin-card-inner-border-radius: calc(
-	#{$cadmin-card-border-radius} - #{$cadmin-card-border-width}
-) !default;
-
-$cadmin-card-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6) !default;
+$cadmin-card-border-width: $cadmin-border-width !default;
+$cadmin-card-box-shadow: null !default;
 $cadmin-card-color: null !default;
 $cadmin-card-height: null !default;
 $cadmin-card-margin-bottom: 24px !default;
-
 $cadmin-card-spacer-x: 20px !default;
 $cadmin-card-spacer-y: 12px !default;
+$cadmin-card-transition:
+	$cadmin-component-transition,
+	transform 0.15s ease-in-out !default;
+
+$cadmin-card-hover-box-shadow: unquote(
+	'0 0.25rem 0.75rem -0.25rem rgb(from #{$cadmin-black} r g b / 0.25)'
+) !default;
+
+$cadmin-card-inner-border-radius: calc(
+	#{$cadmin-card-border-radius} - #{$cadmin-card-border-width}
+) !default;
 
-$cadmin-card-cap-bg: rgba($cadmin-black, 0.03) !default;
+$cadmin-card-cap-bg: unquote(
+	'hsl(from #{$cadmin-black} h s l / 0.03)'
+) !default;
 $cadmin-card-cap-color: null !default;
 
 // .card-body
@@ -160,12 +167,15 @@ $card: map-deep-merge(
 		border-radius: clay-enable-rounded($cadmin-card-border-radius),
 		border-style: $cadmin-card-border-style,
 		border-width: $cadmin-card-border-width,
-		box-shadow: clay-enable-shadows($cadmin-card-box-shadow),
 		display: block,
 		height: $cadmin-card-height,
 		margin-bottom: $cadmin-card-margin-bottom,
 		min-width: 0px,
+		outline-color: transparent,
+		outline-style: solid,
+		outline-width: $cadmin-card-border-width,
 		position: relative,
+		transition: $cadmin-card-transition,
 		word-wrap: break-word,
 
 		aspect-ratio: (
@@ -194,6 +204,10 @@ $card: map-deep-merge(
 			margin-left: 0px,
 			margin-right: 0px,
 		),
+
+		hover: (
+			box-shadow: clay-enable-shadows($cadmin-card-hover-box-shadow),
+		),
 	),
 	$card
 );
@@ -371,8 +385,98 @@ $cadmin-checkbox-right-card-padding: $cadmin-checkbox-left-card-padding !default
 
 $cadmin-checkbox-position: 16px !default;
 
-$cadmin-form-check-card-checked-box-shadow: 0 0 0 2px
-	clay-lighten($cadmin-component-active-bg, 22.94) !default;
+$cadmin-form-check-card-checked-box-shadow: null !default;
+
+$cadmin-form-check-card: () !default;
+$cadmin-form-check-card: map-deep-merge(
+	(
+		margin-bottom: $cadmin-card-margin-bottom,
+		margin-top: 0px,
+		padding-left: 0px,
+		transition: $cadmin-card-transition,
+
+		hover: (
+			card: (
+				border-color: $cadmin-primary-l1,
+				box-shadow: $cadmin-form-check-card-checked-box-shadow,
+				outline-color: $cadmin-primary-l1,
+			),
+		),
+
+		active: (
+			card: (
+				border-color: $cadmin-primary,
+				box-shadow: $cadmin-form-check-card-checked-box-shadow,
+				outline-color: $cadmin-primary,
+			),
+		),
+
+		checked: (
+			card: (
+				border-color: $cadmin-primary,
+				box-shadow: $cadmin-form-check-card-checked-box-shadow,
+				outline-color: $cadmin-primary,
+			),
+		),
+
+		disabled: (
+			transform: none,
+
+			card: (
+				box-shadow: none,
+				border-color: $cadmin-card-border-color,
+				outline-color: transparent,
+			),
+		),
+
+		card: (
+			margin-bottom: 0px,
+		),
+
+		form-check-input: (
+			margin-left: 0px,
+			margin-top: 0px,
+			opacity: 0,
+			position: absolute,
+			z-index: 1,
+		),
+
+		form-check-label: (
+			color: $cadmin-body-color,
+			display: inline,
+			font-weight: $cadmin-font-weight-normal,
+			padding-left: 0px,
+			position: static,
+		),
+
+		custom-control: (
+			display: inline,
+			margin-right: 0px,
+			position: static,
+
+			label: (
+				font-weight: $cadmin-font-weight-normal,
+				padding-left: 0px,
+			),
+
+			custom-control-label: (
+				position: absolute,
+				z-index: 1,
+			),
+
+			custom-control-input: (
+				z-index: 2,
+
+				checked: (
+					card: (
+						box-shadow: $cadmin-form-check-card-checked-box-shadow,
+					),
+				),
+			),
+		),
+	),
+	$cadmin-form-check-card
+);
 
 // Card Interactive
 
@@ -416,21 +520,24 @@ $cadmin-card-interactive: () !default;
 $cadmin-card-interactive: map-deep-merge(
 	(
 		cursor: $cadmin-link-cursor,
-		outline: 0,
-		transition: $cadmin-component-transition,
+		transition: $cadmin-card-transition,
 
 		hover: (
-			background-color: #f7f8f9,
+			background-color: $cadmin-gray-100,
 			text-decoration: none,
 		),
 
 		focus: (
-			box-shadow: #{0 0 0 2px #fff,
-			0 0 0 4px #719aff},
+			border-color: $cadmin-primary-l1,
+			box-shadow: none,
+			outline-color: $cadmin-primary-l1,
+			outline-offset: 0,
+			outline-style: solid,
+			outline-width: $cadmin-card-border-width,
 		),
 
 		active: (
-			background-color: #f1f2f5,
+			background-color: $cadmin-gray-200,
 		),
 
 		after-highlight: $cadmin-card-interactive-after-highlight,
@@ -442,6 +549,10 @@ $cadmin-card-interactive: map-deep-merge(
 
 // Card Interactive Primary
 
+$cadmin-card-interactive-primary-hover-box-shadow: unquote(
+	'#{$cadmin-card-hover-box-shadow}, 0px -2.5rem 0px -2.25rem #{$cadmin-primary} inset'
+) !default;
+
 $cadmin-card-interactive-primary-after-highlight: () !default;
 $cadmin-card-interactive-primary-after-highlight: map-deep-merge(
 	(
@@ -463,15 +574,19 @@ $cadmin-card-interactive-primary-after-highlight: map-deep-merge(
 $cadmin-card-interactive-primary: () !default;
 $cadmin-card-interactive-primary: map-deep-merge(
 	(
+		hover: (
+			box-shadow: $cadmin-card-interactive-primary-hover-box-shadow,
+		),
+
 		focus: (
-			background-color: $cadmin-gray-100,
+			box-shadow: $cadmin-card-interactive-primary-hover-box-shadow,
 		),
 
 		active: (
-			background-color: $cadmin-gray-200,
+			box-shadow: $cadmin-card-interactive-primary-hover-box-shadow,
 		),
 
-		after-highlight: $cadmin-card-interactive-primary-after-highlight,
+		after-highlight: null,
 	),
 	$cadmin-card-interactive-primary
 );
@@ -485,14 +600,8 @@ $cadmin-card-interactive-secondary: map-deep-merge(
 
 		hover: (
 			background-color: $cadmin-white,
-			border-color: transparent,
-			box-shadow: 0 0 0 2px #719aff,
 			color: $cadmin-gray-900,
-		),
-
-		focus: (
-			border-color: transparent,
-			box-shadow: 0 0 0 2px #719aff,
+			transform: translateY(-0.25rem),
 		),
 
 		active: (
@@ -507,6 +616,12 @@ $cadmin-card-interactive-secondary: map-deep-merge(
 $cadmin-card-type-asset: () !default;
 $cadmin-card-type-asset: map-deep-merge(
 	(
+		transition: $cadmin-card-transition,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
+
 		aspect-ratio: (
 			border-color: $cadmin-gray-300,
 			border-style: solid,
@@ -559,6 +674,10 @@ $cadmin-card-type-asset: map-deep-merge(
 			align-items: flex-start,
 		),
 
+		disabled: (
+			transform: none,
+		),
+
 		dropdown-action: (
 			margin-right: -8px,
 			margin-top: -3px,
@@ -811,6 +930,10 @@ $cadmin-template-card: () !default;
 $cadmin-template-card: map-deep-merge(
 	(
 		card-body: $cadmin-template-card-body,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
 	),
 	$cadmin-template-card
 );

package/src/scss/cadmin/variables/_clay-color.scss

@@ -96,15 +96,18 @@ $cadmin-clay-color-dropdown-menu-close: map-deep-merge(
 		opacity: 1,
 
 		hover: (
-			background-color: rgba($cadmin-gray-900, 0.03),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 		),
 
 		focus: (
-			background-color: rgba($cadmin-gray-900, 0.03),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 		),
 
 		active: (
-			background-color: rgba($cadmin-gray-900, 0.06),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 		),
 
 		disabled: (
@@ -265,8 +268,10 @@ $cadmin-clay-color-map: map-merge(
 $cadmin-clay-color-map-hsb: () !default;
 $cadmin-clay-color-map-hsb: map-merge(
 	(
-		background-image: #{linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
-		linear-gradient(to right, #fff, rgba(255, 255, 255, 0))},
+		background-image:
+			unquote(
+				'linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0))'
+			),
 	),
 	$cadmin-clay-color-map-hsb
 );
@@ -434,8 +439,10 @@ $cadmin-clay-color-slider: map-deep-merge(
 
 			focus: (
 				clay-range-thumb: (
-					box-shadow: #{0 0 0 2px $cadmin-white,
-					0 0 0 4px $cadmin-primary-l1},
+					box-shadow:
+						unquote(
+							'0 0 0 2px #{$cadmin-white}, 0 0 0 4px #{$cadmin-primary-l1}'
+						),
 				),
 			),
 		),
@@ -475,26 +482,11 @@ $cadmin-clay-color-slider-alpha: map-deep-merge(
 
 			clay-range-track: (
 				background-color: $cadmin-white,
-				background-image: #{linear-gradient(
-						45deg,
-						#e7e7ed 25%,
-						transparent 25%
+				background-image:
+					unquote(
+						'linear-gradient(45deg, #e7e7ed 25%, transparent 25%), linear-gradient(-45deg, #e7e7ed 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7e7ed 75%), linear-gradient(-45deg, transparent 75%, #e7e7ed 75%)'
 					),
-				linear-gradient(
-					-45deg,
-					#e7e7ed 25%,
-					transparent 25%,
-				),
-				linear-gradient(
-					45deg,
-					transparent 75%,
-					#e7e7ed 75%,
-				),
-				linear-gradient(-45deg, transparent 75%, #e7e7ed 75%)},
-				background-position: #{0 0,
-				0 4px,
-				4px -4px,
-				-4px 0px},
+				background-position: unquote('0 0, 0 4px, 4px -4px, -4px 0px'),
 				background-size: 8px 8px,
 			),
 

package/src/scss/cadmin/variables/_custom-forms.scss

@@ -67,9 +67,8 @@ $cadmin-custom-control-indicator-checked-active-border-color: $cadmin-custom-con
 
 // @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-disabled-bg` instead
 
-$cadmin-custom-control-indicator-disabled-checked-bg: clay-lighten(
-	$cadmin-component-active-bg,
-	32.94
+$cadmin-custom-control-indicator-disabled-checked-bg: unquote(
+	'hsl(from #{$cadmin-component-active-bg} h s calc(l + 32.94))'
 ) !default;
 
 $cadmin-custom-control-indicator-checked-disabled-bg: $cadmin-custom-control-indicator-disabled-checked-bg !default;
@@ -80,6 +79,15 @@ $cadmin-custom-control-indicator-disabled-checked-border-color: $cadmin-custom-c
 
 $cadmin-custom-control-indicator-checked-disabled-border-color: $cadmin-custom-control-indicator-disabled-checked-border-color !default;
 
+// .custom-control-input
+
+$cadmin-custom-control-input-size: 24px !default;
+$cadmin-custom-control-input-offset: calc(
+	(
+			#{$cadmin-custom-control-input-size} - #{$cadmin-custom-control-indicator-size}
+		) / -2
+) !default;
+
 // Custom Control
 
 $cadmin-custom-control-cursor: null !default;
@@ -135,12 +143,13 @@ $cadmin-custom-control-label: map-deep-merge(
 	(
 		color: $cadmin-custom-control-label-color,
 		cursor: $cadmin-custom-control-description-cursor,
+		display: inline-block,
 		font-size: $cadmin-custom-control-description-font-size,
 		font-weight: $cadmin-custom-control-description-font-weight,
 		line-height: $cadmin-custom-control-description-line-height,
 		margin-bottom: 0px,
+		max-width: 100%,
 		position: static,
-		vertical-align: top,
 
 		before: (
 			background-color: $cadmin-custom-control-indicator-bg,
@@ -156,22 +165,25 @@ $cadmin-custom-control-label: map-deep-merge(
 			height: $cadmin-custom-control-indicator-size,
 			left: 0px,
 			position: relative,
-			top: 4px,
+			top: $cadmin-custom-control-indicator-position-top,
 			transition: clay-enable-transitions($cadmin-custom-forms-transition),
 			width: $cadmin-custom-control-indicator-size,
 			z-index: 0,
 		),
 
 		after: (
-			background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size},
+			background:
+				unquote(
+					'no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size}'
+				),
 			border-radius: $cadmin-rounded-circle-border-radius,
 			content: '',
 			display: block,
-			height: 24px,
-			left: -4px,
+			height: $cadmin-custom-control-input-size,
+			left: $cadmin-custom-control-input-offset,
 			position: absolute,
-			top: $cadmin-custom-control-indicator-position-top,
-			width: 24px,
+			top: $cadmin-custom-control-input-offset,
+			width: $cadmin-custom-control-input-size,
 			z-index: 0,
 		),
 	),
@@ -211,6 +223,8 @@ $cadmin-custom-control-label-text: () !default;
 $cadmin-custom-control-label-text: map-deep-merge(
 	(
 		padding-left: $cadmin-custom-control-description-padding-left,
+		position: relative,
+		top: -4px,
 	),
 	$cadmin-custom-control-label-text
 );
@@ -258,12 +272,12 @@ $cadmin-custom-control-input: () !default;
 $cadmin-custom-control-input: map-deep-merge(
 	(
 		cursor: $cadmin-form-check-input-cursor,
-		height: 24px,
-		left: -4px,
+		height: $cadmin-custom-control-input-size,
+		left: $cadmin-custom-control-input-offset,
 		opacity: 0,
 		position: absolute,
-		top: $cadmin-custom-control-indicator-position-top,
-		width: 24px,
+		top: $cadmin-custom-control-input-offset,
+		width: $cadmin-custom-control-input-size,
 		z-index: 1,
 
 		focus: (
@@ -369,9 +383,9 @@ $cadmin-custom-control-primary-label-text: map-merge(
 
 $cadmin-custom-checkbox-indicator-border-radius: 2px !default; // 2px
 
-$cadmin-custom-checkbox-indicator-icon-checked: clay-icon(
-	check-small,
-	$cadmin-custom-control-indicator-checked-color
+$cadmin-custom-checkbox-indicator-icon-checked: var(
+	--cadmin-custom-checkbox-indicator-icon-checked,
+	clay-icon(check-small, #fff)
 ) !default;
 $cadmin-custom-checkbox-indicator-icon-checked-bg-size: 16px !default;
 
@@ -383,9 +397,9 @@ $cadmin-custom-control-indicator-indeterminate-border-color: $cadmin-custom-cont
 $cadmin-custom-checkbox-indicator-indeterminate-box-shadow: null !default;
 $cadmin-custom-checkbox-indicator-indeterminate-color: $cadmin-custom-control-indicator-checked-color !default;
 
-$cadmin-custom-checkbox-indicator-icon-indeterminate: clay-icon(
-	hr,
-	$cadmin-custom-checkbox-indicator-indeterminate-color
+$cadmin-custom-checkbox-indicator-icon-indeterminate: var(
+	--cadmin-custom-checkbox-indicator-icon-indeterminate,
+	clay-icon(hr, #fff)
 ) !default;
 $cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size: 16px !default;
 
@@ -431,7 +445,10 @@ $cadmin-custom-checkbox: map-deep-merge(
 
 						after: (
 							background-image:
-								clay-icon(check-small, $cadmin-secondary),
+								var(
+									--cadmin-custom-checkbox-indicator-icon-checked-readonly,
+									clay-icon(check-small, #6b6c7e),
+								),
 						),
 					),
 
@@ -490,7 +507,11 @@ $cadmin-custom-checkbox: map-deep-merge(
 						),
 
 						after: (
-							background-image: clay-icon(hr, $cadmin-secondary),
+							background-image:
+								var(
+									--cadmin-custom-checkbox-indicator-icon-indeterminate-readonly,
+									clay-icon(hr, #6b6c7e),
+								),
 						),
 					),
 
@@ -516,9 +537,9 @@ $cadmin-custom-checkbox: map-deep-merge(
 
 $cadmin-custom-radio-indicator-border-radius: 50% !default;
 
-$cadmin-custom-radio-indicator-icon-checked: clay-icon(
-	circle,
-	$cadmin-white
+$cadmin-custom-radio-indicator-icon-checked: var(
+	--cadmin-custom-radio-indicator-icon-checked,
+	clay-icon(circle, #fff)
 ) !default;
 $cadmin-custom-radio-indicator-icon-checked-bg-size: 8px !default;
 

package/src/scss/cadmin/variables/_dropdowns.scss

@@ -19,7 +19,9 @@ $cadmin-dropdown-border-radius: $cadmin-border-radius !default;
 $cadmin-dropdown-inner-border-radius: $cadmin-dropdown-border-radius
 	calc(#{$cadmin-dropdown-border-width} * -1) !default;
 
-$cadmin-dropdown-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3) !default;
+$cadmin-dropdown-box-shadow: unquote(
+	'0 1px 5px -1px hsl(from #{$cadmin-black} h s l / 0.3)'
+) !default;
 $cadmin-dropdown-color: $cadmin-body-color !default;
 $cadmin-dropdown-font-size: 14px !default; // 14px
 $cadmin-dropdown-max-height: 500px !default;
@@ -85,10 +87,7 @@ $cadmin-dropdown-item-indicator-spacer-x: 12px !default;
 $cadmin-dropdown-link-color: $cadmin-gray-600 !default;
 $cadmin-dropdown-link-font-weight: $cadmin-font-weight-normal !default;
 
-$cadmin-dropdown-link-hover-bg: clay-lighten(
-	$cadmin-component-active-bg,
-	44.9
-) !default;
+$cadmin-dropdown-link-hover-bg: $cadmin-primary-l3 !default;
 $cadmin-dropdown-link-hover-color: $cadmin-gray-900 !default;
 
 $cadmin-dropdown-link-active-bg: $cadmin-dropdown-link-hover-bg !default;
@@ -285,7 +284,9 @@ $cadmin-dropdown-subheader-text-transform: uppercase !default;
 $cadmin-dropdown-subheader: () !default;
 $cadmin-dropdown-subheader: map-deep-merge(
 	(
+		align-items: center,
 		color: $cadmin-dropdown-subheader-color,
+		display: flex,
 		font-size: $cadmin-dropdown-subheader-font-size,
 		font-weight: $cadmin-dropdown-subheader-font-weight,
 		margin-bottom: $cadmin-dropdown-subheader-margin-bottom,
@@ -411,7 +412,8 @@ $cadmin-dropdown-section: map-deep-merge(
 $cadmin-dropdown-footer: () !default;
 $cadmin-dropdown-footer: map-merge(
 	(
-		box-shadow: -1px -2px 3px -3px rgba(0, 0, 0, 0.5),
+		box-shadow:
+			unquote('-1px -2px 3px -3px hsl(from #{$cadmin-black} h s l / 0.5)'),
 		padding: 8px $cadmin-dropdown-item-padding-x 0px,
 		position: relative,
 	),
@@ -908,24 +910,18 @@ $cadmin-dropdown-menu-palette: map-deep-merge(
 			),
 
 			dropdown-item-scroll-up: (
-				background-image: (
-					linear-gradient(
-						to bottom,
-						rgba(255, 255, 255, 1) 84%,
-						rgba(255, 255, 255, 0) 100%
+				background-image:
+					unquote(
+						'linear-gradient(to bottom, hsl(from #{$cadmin-white} h s l / 1) 84%, hsl(from #{$cadmin-white} h s l / 0) 100%)'
 					),
-				),
 				top: $cadmin-dropdown-padding-y,
 			),
 
 			dropdown-item-scroll-down: (
-				background-image: (
-					linear-gradient(
-						to top,
-						rgba(255, 255, 255, 1) 84%,
-						rgba(255, 255, 255, 0) 100%
+				background-image:
+					unquote(
+						'linear-gradient(to top, hsl(from #{$cadmin-white} h s l / 1) 84%, hsl(from #{$cadmin-white} h s l / 0) 100%)'
 					),
-				),
 				bottom: $cadmin-dropdown-padding-y,
 			),