@clayui/css 3.38.0 → 3.41.0

package/src/scss/cadmin/components/_type.scss

@@ -203,7 +203,7 @@ strong {
 	@include clay-css($cadmin-c-kbd-group);
 
 	> .c-kbd {
-		font-size: inherit;
+		@include clay-css(setter(map-get($cadmin-c-kbd-group, c-kbd), ()));
 	}
 }
 
@@ -266,6 +266,10 @@ strong {
 
 .c-kbd-group-sm {
 	@include clay-css($cadmin-c-kbd-group-sm);
+
+	> .c-kbd {
+		@include clay-css(setter(map-get($cadmin-c-kbd-group-sm, c-kbd), ()));
+	}
 }
 
 .c-kbd-sm,
@@ -281,6 +285,10 @@ strong {
 
 .c-kbd-group-lg {
 	@include clay-css($cadmin-c-kbd-group-lg);
+
+	> .c-kbd {
+		@include clay-css(setter(map-get($cadmin-c-kbd-group-lg, c-kbd), ()));
+	}
 }
 
 .c-kbd-lg,

package/src/scss/cadmin/variables/_alerts.scss

@@ -232,30 +232,34 @@ $cadmin-alert-dismissible: map-deep-merge(
 
 // Alert Fluid
 
+// @deprecated use the Sass map `$alert-fluid` instead
+
 $cadmin-alert-fluid-border-bottom-width: 1px !default;
+
+// @deprecated use the Sass map `$alert-fluid` instead
+
 $cadmin-alert-fluid-border-left-width: 0 !default;
+
+// @deprecated use the Sass map `$alert-fluid` instead
+
 $cadmin-alert-fluid-border-right-width: 0 !default;
+
+// @deprecated use the Sass map `$alert-fluid` instead
+
 $cadmin-alert-fluid-border-top-width: 0 !default;
 
+// @deprecated use the Sass map `$alert-fluid` instead
+
 $cadmin-alert-fluid-border-width: $cadmin-alert-fluid-border-top-width
 	$cadmin-alert-fluid-border-right-width
 	$cadmin-alert-fluid-border-bottom-width
 	$cadmin-alert-fluid-border-left-width !default;
 $cadmin-alert-fluid-margin-bottom: 0 !default;
 
-$cadmin-alert-fluid: () !default;
-$cadmin-alert-fluid: map-merge(
-	(
-		border-radius: 0,
-		border-width: $cadmin-alert-fluid-border-width,
-		margin-bottom: $cadmin-alert-fluid-margin-bottom,
-		padding: 0,
-	),
-	$cadmin-alert-fluid
-);
-
 // .alert-fluid .container-fluid
 
+// @deprecated use the Sass map `$alert-fluid` instead
+
 $cadmin-alert-fluid-container: () !default;
 $cadmin-alert-fluid-container: map-merge(
 	(
@@ -269,6 +273,8 @@ $cadmin-alert-fluid-container: map-merge(
 
 // .alert-fluid.alert-dismissible .container-fluid
 
+// @deprecated use the Sass map `$alert-fluid` instead
+
 $cadmin-alert-fluid-dismissible-container: () !default;
 $cadmin-alert-fluid-dismissible-container: map-merge(
 	(
@@ -287,14 +293,32 @@ $cadmin-alert-fluid-dismissible-container: map-merge(
 
 // .alert-fluid .close
 
+// @deprecated use the Sass map `$alert-fluid` instead
+
 $cadmin-alert-fluid-close: () !default;
 $cadmin-alert-fluid-close: map-deep-merge(
 	(
-		right: calc(#{$cadmin-grid-gutter-width / 2} + 4px),
+		right: calc(#{$cadmin-grid-gutter-width * 0.5} + 4px),
 	),
 	$cadmin-alert-fluid-close
 );
 
+$cadmin-alert-fluid: () !default;
+$cadmin-alert-fluid: map-merge(
+	(
+		border-radius: 0,
+		border-width: $cadmin-alert-fluid-border-width,
+		margin-bottom: $cadmin-alert-fluid-margin-bottom,
+		padding: 0,
+		alert-dismissible: (
+			container-fluid: $cadmin-alert-fluid-dismissible-container,
+		),
+		close: $cadmin-alert-fluid-close,
+		container-fluid: $cadmin-alert-fluid-container,
+	),
+	$cadmin-alert-fluid
+);
+
 // .alert-notifications-absolute
 
 $cadmin-alert-notifications-absolute-bottom: null !default;
@@ -337,10 +361,10 @@ $cadmin-alert-notifications-fixed-top: null !default;
 
 $cadmin-alert-notifications-fixed-bottom-mobile: 16px !default;
 $cadmin-alert-notifications-fixed-left-mobile: (
-	$cadmin-grid-gutter-width / 2
+	$cadmin-grid-gutter-width * 0.5
 ) !default;
 $cadmin-alert-notifications-fixed-right-mobile: (
-	$cadmin-grid-gutter-width / 2
+	$cadmin-grid-gutter-width * 0.5
 ) !default;
 $cadmin-alert-notifications-fixed-top-mobile: null !default;
 

package/src/scss/cadmin/variables/_breadcrumbs.scss

@@ -39,12 +39,16 @@ $cadmin-breadcrumb-link: map-deep-merge(
 		text-decoration: $cadmin-breadcrumb-link-text-decoration,
 		text-transform: $cadmin-breadcrumb-text-transform,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $cadmin-breadcrumb-link-hover-color,
-		hover-text-decoration: $cadmin-breadcrumb-link-hover-text-decoration,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-color: $cadmin-breadcrumb-link-hover-color,
-		focus-outline: 0,
-		focus-text-decoration: $cadmin-breadcrumb-link-hover-text-decoration,
+		hover: (
+			color: $cadmin-breadcrumb-link-hover-color,
+			text-decoration: $cadmin-breadcrumb-link-hover-text-decoration,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			color: $cadmin-breadcrumb-link-hover-color,
+			outline: 0,
+			text-decoration: $cadmin-breadcrumb-link-hover-text-decoration,
+		),
 	),
 	$cadmin-breadcrumb-link
 );

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

@@ -1,7 +1,7 @@
 $cadmin-card-bg: $cadmin-white !default;
 $cadmin-card-border-color: rgba($cadmin-black, 0.125) !default;
 $cadmin-card-border-style: solid !default;
-$cadmin-card-border-width: 0 !default;
+$cadmin-card-border-width: 0px !default;
 
 $cadmin-card-border-radius: $cadmin-border-radius !default;
 $cadmin-card-inner-border-radius: calc(
@@ -29,7 +29,7 @@ $cadmin-card-section-header-font-size: 12px !default;
 $cadmin-card-section-header-font-weight: $cadmin-font-weight-semi-bold !default;
 $cadmin-card-section-header-line-height: 2.5 !default;
 $cadmin-card-section-header-margin-bottom: 24px !default;
-$cadmin-card-section-header-padding: 0 ($cadmin-grid-gutter-width / 2) !default;
+$cadmin-card-section-header-padding: 0 ($cadmin-grid-gutter-width * 0.5) !default;
 $cadmin-card-section-header-text-transform: uppercase !default;
 
 $cadmin-card-img-overlay-padding: 20px !default;
@@ -126,7 +126,9 @@ $cadmin-card-title-link: () !default;
 $cadmin-card-title-link: map-deep-merge(
 	(
 		color: map-get($cadmin-card-title, color),
-		hover-color: map-get($cadmin-card-title, color),
+		hover: (
+			color: map-get($cadmin-card-title, color),
+		),
 	),
 	$cadmin-card-title-link
 );
@@ -149,7 +151,9 @@ $cadmin-card-subtitle-link: () !default;
 $cadmin-card-subtitle-link: map-deep-merge(
 	(
 		color: map-get($cadmin-card-subtitle, color),
-		hover-color: $cadmin-gray-600,
+		hover: (
+			color: $cadmin-gray-600,
+		),
 	),
 	$cadmin-card-subtitle-link
 );
@@ -282,8 +286,54 @@ $cadmin-card-interactive-secondary: map-deep-merge(
 $cadmin-card-type-asset: () !default;
 $cadmin-card-type-asset: map-deep-merge(
 	(
-		aspect-ratio-border-color: $cadmin-gray-300,
-		card-body-padding-top: 12px,
+		aspect-ratio: (
+			border-color: $cadmin-gray-300,
+			border-style: solid,
+			border-width: 0 0 1px 0,
+			horizontal: 16,
+			vertical: 9,
+			custom-control: (
+				label: (
+					bottom: 0,
+					cursor: $cadmin-link-cursor,
+					left: 0,
+					position: absolute,
+					right: 0,
+					top: 0,
+				),
+			),
+		),
+		card-type-asset-icon: (
+			width: 22.225%,
+			inline-item: (
+				bottom: 0,
+				left: 0,
+				position: absolute,
+				right: 0,
+				top: 0,
+			),
+			lexicon-icon: (
+				height: 100%,
+				width: 100%,
+			),
+			sticker: (
+				border-radius: 50%,
+				display: block,
+				font-size: 2vw,
+				padding-bottom: 100%,
+				width: 100%,
+			),
+		),
+		card-body: (
+			padding-top: 12px,
+		),
+		card-row: (
+			align-items: flex-start,
+		),
+		dropdown-action: (
+			margin-right: -8px,
+			margin-top: -3px,
+		),
 	),
 	$cadmin-card-type-asset
 );
@@ -293,7 +343,9 @@ $cadmin-card-type-asset: map-deep-merge(
 $cadmin-image-card: () !default;
 $cadmin-image-card: map-deep-merge(
 	(
-		aspect-ratio-checkered-fg: $cadmin-gray-300,
+		aspect-ratio: (
+			checkered-foreground-color: $cadmin-gray-300,
+		),
 	),
 	$cadmin-image-card
 );
@@ -303,7 +355,9 @@ $cadmin-image-card: map-deep-merge(
 $cadmin-file-card: () !default;
 $cadmin-file-card: map-deep-merge(
 	(
-		asset-icon-color: $cadmin-gray-400,
+		card-type-asset-icon: (
+			color: $cadmin-gray-400,
+		),
 	),
 	$cadmin-file-card
 );
@@ -314,8 +368,8 @@ $cadmin-product-card: () !default;
 $cadmin-product-card: map-deep-merge(
 	(
 		aspect-ratio: (
-			bg: $cadmin-white,
-			bg-image: linear-gradient(0deg, #ebebeb, #ebebeb),
+			background-color: $cadmin-white,
+			background-image: linear-gradient(0deg, #ebebeb, #ebebeb),
 		),
 		card-body: (
 			text-align: center,
@@ -339,11 +393,15 @@ $cadmin-product-card: map-deep-merge(
 $cadmin-user-card: () !default;
 $cadmin-user-card: map-deep-merge(
 	(
-		asset-icon-max-width: 80px,
-		asset-icon-min-width: 48px,
-		asset-icon-width: 30%,
-		asset-icon-lexicon-icon-height: auto,
-		asset-icon-lexicon-icon-width: 50%,
+		card-type-asset-icon: (
+			max-width: 80px,
+			min-width: 48px,
+			width: 30%,
+			lexicon-icon: (
+				height: auto,
+				width: 50%,
+			),
+		),
 	),
 	$cadmin-user-card
 );
@@ -359,8 +417,8 @@ $cadmin-card-page-item-asset: map-deep-merge(
 		base: (
 			breakpoint: 0,
 			min-width: 193px,
-			padding-left: $cadmin-grid-gutter-width / 2,
-			padding-right: $cadmin-grid-gutter-width / 2,
+			padding-left: $cadmin-grid-gutter-width * 0.5,
+			padding-right: $cadmin-grid-gutter-width * 0.5,
 		),
 		sm: (
 			breakpoint: map-get($cadmin-grid-breakpoints, sm),
@@ -392,8 +450,8 @@ $cadmin-card-page-item-user: map-deep-merge(
 			breakpoint: 0,
 			flex-basis: 50%,
 			max-width: 50%,
-			padding-left: $cadmin-grid-gutter-width / 2,
-			padding-right: $cadmin-grid-gutter-width / 2,
+			padding-left: $cadmin-grid-gutter-width * 0.5,
+			padding-right: $cadmin-grid-gutter-width * 0.5,
 		),
 		sm: (
 			breakpoint: map-get($cadmin-grid-breakpoints, sm),
@@ -415,7 +473,9 @@ $cadmin-card-page-item-user: map-deep-merge(
 $cadmin-card-type-directory: () !default;
 $cadmin-card-type-directory: map-deep-merge(
 	(
-		sticker-font-size: 18px,
+		sticker: (
+			font-size: 18px,
+		),
 	),
 	$cadmin-card-type-directory
 );
@@ -424,7 +484,7 @@ $cadmin-card-type-directory: map-deep-merge(
 
 $cadmin-card-page-item-directory: () !default;
 $cadmin-card-page-item-directory: map-deep-merge(
-	($cadmin-card-page-item-asset),
+	$cadmin-card-page-item-asset,
 	$cadmin-card-page-item-directory
 );
 
@@ -443,14 +503,16 @@ $cadmin-card-type-template-after-highlight: map-deep-merge(
 $cadmin-card-type-template-aspect-ratio: () !default;
 $cadmin-card-type-template-aspect-ratio: map-deep-merge(
 	(
-		bg-image: none,
+		background-image: none,
 		border-width: 0,
 		color: $cadmin-gray-600,
 		horizontal: 16,
 		text-align: center,
 		vertical: 9,
-		lexicon-icon-height: auto,
-		lexicon-icon-width: 28%,
+		lexicon-icon: (
+			height: auto,
+			width: 28%,
+		),
 	),
 	$cadmin-card-type-template-aspect-ratio
 );
@@ -487,7 +549,9 @@ $cadmin-card-type-template: map-deep-merge(
 		border-width: 1px,
 		box-shadow: none,
 		color: $cadmin-gray-900,
-		hover-color: $cadmin-gray-900,
+		hover: (
+			color: $cadmin-gray-900,
+		),
 		after-highlight: $cadmin-card-type-template-after-highlight,
 		aspect-ratio: $cadmin-card-type-template-aspect-ratio,
 		aspect-ratio-item: $cadmin-card-type-template-aspect-ratio-item,
@@ -532,8 +596,10 @@ $cadmin-template-card-horizontal-card-row: map-deep-merge(
 		margin-left: -4px,
 		margin-right: -4px,
 		width: auto,
-		autofit-col-padding-left: 4px,
-		autofit-col-padding-right: 4px,
+		autofit-col: (
+			padding-left: 4px,
+			padding-right: 4px,
+		),
 	),
 	$cadmin-template-card-horizontal-card-row
 );
@@ -551,7 +617,9 @@ $cadmin-template-card-horizontal: () !default;
 $cadmin-template-card-horizontal: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
-		hover-color: $cadmin-gray-600,
+		hover: (
+			color: $cadmin-gray-600,
+		),
 		sticker: $cadmin-template-card-horizontal-sticker,
 		card-row: $cadmin-template-card-horizontal-card-row,
 		card-title: $cadmin-template-card-horizontal-card-title,