@clayui/css 3.38.0 → 3.41.0

package/src/scss/variables/_alerts.scss

@@ -218,26 +218,30 @@ $alert-dismissible: map-deep-merge(
 
 // Alert Fluid
 
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-bottom-width: 1px !default;
+
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-left-width: 0 !default;
+
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-right-width: 0 !default;
+
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-top-width: 0 !default;
 
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-border-width: $alert-fluid-border-top-width
 	$alert-fluid-border-right-width $alert-fluid-border-bottom-width
 	$alert-fluid-border-left-width !default;
 $alert-fluid-margin-bottom: 0 !default;
 
-$alert-fluid: () !default;
-$alert-fluid: map-merge(
-	(
-		border-radius: 0,
-		border-width: $alert-fluid-border-width,
-		margin-bottom: $alert-fluid-margin-bottom,
-		padding: 0,
-	),
-	$alert-fluid
-);
+/// @deprecated use the Sass map `$alert-fluid` instead
 
 $alert-fluid-container: () !default;
 $alert-fluid-container: map-merge(
@@ -250,6 +254,8 @@ $alert-fluid-container: map-merge(
 	$alert-fluid-container
 );
 
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-dismissible-container: () !default;
 $alert-fluid-dismissible-container: map-merge(
 	(
@@ -257,7 +263,7 @@ $alert-fluid-dismissible-container: map-merge(
 		padding-left: $alert-dismissible-padding-left,
 		padding-right:
 			calc(
-				#{$alert-dismissible-padding-right} + #{$grid-gutter-width / 2}
+				#{$alert-dismissible-padding-right} + #{$grid-gutter-width * 0.5}
 			),
 		padding-top: $alert-dismissible-padding-top,
 		position: relative,
@@ -267,14 +273,32 @@ $alert-fluid-dismissible-container: map-merge(
 
 // .alert-fluid .close
 
+/// @deprecated use the Sass map `$alert-fluid` instead
+
 $alert-fluid-close: () !default;
 $alert-fluid-close: map-deep-merge(
 	(
-		right: calc(#{$grid-gutter-width / 2} + 0.25rem),
+		right: calc(#{$grid-gutter-width * 0.5} + 0.25rem),
 	),
 	$alert-fluid-close
 );
 
+$alert-fluid: () !default;
+$alert-fluid: map-deep-merge(
+	(
+		border-radius: 0,
+		border-width: $alert-fluid-border-width,
+		margin-bottom: $alert-fluid-margin-bottom,
+		padding: 0,
+		alert-dismissible: (
+			container-fluid: $alert-fluid-dismissible-container,
+		),
+		container-fluid: $alert-fluid-container,
+		close: $alert-fluid-close,
+	),
+	$alert-fluid
+);
+
 // .alert-notifications-absolute
 
 $alert-notifications-absolute-bottom: null !default;
@@ -316,8 +340,8 @@ $alert-notifications-fixed-right: null !default;
 $alert-notifications-fixed-top: null !default;
 
 $alert-notifications-fixed-bottom-mobile: 1rem !default;
-$alert-notifications-fixed-left-mobile: ($grid-gutter-width / 2) !default;
-$alert-notifications-fixed-right-mobile: ($grid-gutter-width / 2) !default;
+$alert-notifications-fixed-left-mobile: $grid-gutter-width * 0.5 !default;
+$alert-notifications-fixed-right-mobile: $grid-gutter-width * 0.5 !default;
 $alert-notifications-fixed-top-mobile: null !default;
 
 $alert-notifications-fixed: () !default;

package/src/scss/variables/_breadcrumbs.scss

@@ -37,10 +37,14 @@ $breadcrumb-link: map-deep-merge(
 		display: block,
 		text-decoration: $breadcrumb-link-text-decoration,
 		text-transform: $breadcrumb-text-transform,
-		hover-color: $breadcrumb-link-hover-color,
-		hover-text-decoration: $breadcrumb-link-hover-text-decoration,
-		focus-color: $breadcrumb-link-hover-color,
-		focus-text-decoration: $breadcrumb-link-hover-text-decoration,
+		hover: (
+			color: $breadcrumb-link-hover-color,
+			text-decoration: $breadcrumb-link-hover-text-decoration,
+		),
+		focus: (
+			color: $breadcrumb-link-hover-color,
+			text-decoration: $breadcrumb-link-hover-text-decoration,
+		),
 	),
 	$breadcrumb-link
 );

package/src/scss/variables/_cards.scss

@@ -29,7 +29,7 @@ $card-section-header-font-size: 0.75rem !default;
 $card-section-header-font-weight: $font-weight-semi-bold !default;
 $card-section-header-line-height: 2.5 !default;
 $card-section-header-margin-bottom: 1.5rem !default;
-$card-section-header-padding: 0 ($grid-gutter-width / 2) !default;
+$card-section-header-padding: 0 ($grid-gutter-width * 0.5) !default;
 $card-section-header-text-transform: uppercase !default;
 
 /// @deprecated as of v3.x with no replacement
@@ -38,7 +38,7 @@ $card-img-overlay-padding: 1.25rem !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$card-group-margin: $grid-gutter-width / 2 !default;
+$card-group-margin: $grid-gutter-width * 0.5 !default;
 
 /// @deprecated as of v3.x with no replacement
 
@@ -327,13 +327,51 @@ $card-interactive-secondary: map-deep-merge(
 $card-type-asset: () !default;
 $card-type-asset: map-deep-merge(
 	(
+		aspect-ratio: (
+			border-color: $card-border-color,
+			border-style: solid,
+			border-width: 0 0 0.0625rem 0,
+			horizontal: 16,
+			vertical: 9,
+			custom-control: (
+				label: (
+					bottom: 0,
+					cursor: $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-row: (
+			align-items: flex-start,
+		),
+		dropdown-action: (
+			margin-right: -0.5rem,
+			margin-top: -0.1875rem,
+		),
 	),
 	$card-type-asset
 );
@@ -347,7 +385,7 @@ $image-card: () !default;
 $file-card: () !default;
 $file-card: map-deep-merge(
 	(
-		asset-icon: (
+		card-type-asset-icon: (
 			color: $gray-600,
 		),
 	),
@@ -385,7 +423,7 @@ $product-card: map-deep-merge(
 $user-card: () !default;
 $user-card: map-deep-merge(
 	(
-		asset-icon: (
+		card-type-asset-icon: (
 			max-width: 80px,
 			min-width: 48px,
 			width: 30%,
@@ -409,8 +447,8 @@ $card-page-item-asset: map-deep-merge(
 		base: (
 			breakpoint: 0,
 			min-width: 193px,
-			padding-left: $grid-gutter-width / 2,
-			padding-right: $grid-gutter-width / 2,
+			padding-left: $grid-gutter-width * 0.5,
+			padding-right: $grid-gutter-width * 0.5,
 		),
 		sm: (
 			breakpoint: map-get($grid-breakpoints, sm),
@@ -442,8 +480,8 @@ $card-page-item-user: map-deep-merge(
 			breakpoint: 0,
 			flex-basis: 50%,
 			max-width: 50%,
-			padding-left: $grid-gutter-width / 2,
-			padding-right: $grid-gutter-width / 2,
+			padding-left: $grid-gutter-width * 0.5,
+			padding-right: $grid-gutter-width * 0.5,
 		),
 		sm: (
 			breakpoint: map-get($grid-breakpoints, sm),

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

@@ -29,7 +29,7 @@ $custom-control-indicator-active-border-color: $custom-control-indicator-active-
 $custom-control-indicator-active-color: $component-active-color !default;
 
 $custom-control-indicator-disabled-bg: $input-disabled-bg !default;
-$custom-control-indicator-disabled-border-color: null !default;
+$custom-control-indicator-disabled-border-color: $gray-400 !default;
 $custom-control-indicator-disabled-cursor: $disabled-cursor !default;
 
 // Custom Control Indicator Checked
@@ -59,7 +59,7 @@ $custom-control-indicator-checked-disabled-bg: $custom-control-indicator-disable
 $custom-control-indicator-disabled-checked-border-color: null !default;
 $custom-control-indicator-checked-disabled-border-color: $custom-control-indicator-disabled-checked-border-color !default;
 
-// Custom Control
+// .custom-control
 
 $custom-control-cursor: null !default;
 $custom-control-gutter: 0.5rem !default;
@@ -78,21 +78,7 @@ $custom-control-margin-top: null !default;
 $custom-control-min-height: $custom-control-indicator-size +
 	($custom-control-indicator-position-top * 2) !default;
 
-$custom-control: () !default;
-$custom-control: map-deep-merge(
-	(
-		cursor: $custom-control-cursor,
-		display: block,
-		margin-bottom: $custom-control-margin-bottom,
-		margin-top: $custom-control-margin-top,
-		min-height: $custom-control-min-height,
-		position: relative,
-		text-align: left,
-	),
-	$custom-control
-);
-
-// Custom Description
+// .custom-control-label
 
 /// @deprecated as of v2.19.0 use the Sass map `$custom-control-label` instead
 
@@ -135,6 +121,34 @@ $custom-control-label: map-deep-merge(
 		margin-bottom: 0,
 		position: static,
 		vertical-align: top,
+		before: (
+			background-color: $custom-control-indicator-bg,
+			border-color: $custom-control-indicator-border-color,
+			border-style: $custom-control-indicator-border-style,
+			border-width: $custom-control-indicator-border-width,
+			box-shadow:
+				clay-enable-shadows($custom-control-indicator-box-shadow),
+			content: '',
+			display: block,
+			float: left,
+			font-size: $custom-control-indicator-size,
+			height: $custom-control-indicator-size,
+			left: 0,
+			position: relative,
+			top: $custom-control-indicator-position-top,
+			transition: clay-enable-transitions($custom-forms-transition),
+			width: $custom-control-indicator-size,
+		),
+		after: (
+			background: no-repeat 50% / #{$custom-control-indicator-bg-size},
+			content: '',
+			display: block,
+			height: $custom-control-indicator-size,
+			left: 0,
+			position: absolute,
+			top: $custom-control-indicator-position-top,
+			width: $custom-control-indicator-size,
+		),
 	),
 	$custom-control-label
 );
@@ -146,10 +160,27 @@ $custom-control-label-disabled: map-deep-merge(
 	(
 		color: $custom-control-label-disabled-color,
 		cursor: $custom-control-description-disabled-cursor,
+		before: (
+			background-color: $custom-control-indicator-disabled-bg,
+			border-color: $custom-control-indicator-disabled-border-color,
+			box-shadow: none,
+		),
 	),
 	$custom-control-label-disabled
 );
 
+// label.custom-control-label
+
+$label-custom-control-label: () !default;
+$label-custom-control-label: map-deep-merge(
+	(
+		font-size: map-get($custom-control-label, font-size),
+	),
+	$label-custom-control-label
+);
+
+// .custom-control-label-text
+
 $custom-control-label-text: () !default;
 $custom-control-label-text: map-deep-merge(
 	(
@@ -158,6 +189,8 @@ $custom-control-label-text: map-deep-merge(
 	$custom-control-label-text
 );
 
+// .custom-control-label-text small, .custom-control-label-text .small
+
 $custom-control-label-text-small: () !default;
 $custom-control-label-text-small: map-deep-merge(
 	(
@@ -166,6 +199,99 @@ $custom-control-label-text-small: map-deep-merge(
 	$custom-control-label-text-small
 );
 
+$custom-control: () !default;
+$custom-control: map-deep-merge(
+	(
+		cursor: $custom-control-cursor,
+		display: block,
+		margin-bottom: $custom-control-margin-bottom,
+		margin-top: $custom-control-margin-top,
+		min-height: $custom-control-min-height,
+		position: relative,
+		text-align: left,
+		only-child: (
+			margin-bottom: 0,
+		),
+		label: (
+			cursor: map-get($custom-control-label, cursor),
+			display: inline,
+			font-size: $font-size-base,
+			margin-bottom: 0,
+		),
+	),
+	$custom-control
+);
+
+// .custom-control-input
+
+$custom-control-input: () !default;
+$custom-control-input: map-deep-merge(
+	(
+		cursor: $form-check-input-cursor,
+		height: $custom-control-indicator-size,
+		left: 0,
+		opacity: 0,
+		position: absolute,
+		top: $custom-control-indicator-position-top,
+		width: $custom-control-indicator-size,
+		z-index: 1,
+		focus: (
+			custom-control-label: (
+				before: (
+					border-color: $custom-control-indicator-focus-border-color,
+					box-shadow: $custom-control-indicator-focus-box-shadow,
+				),
+			),
+		),
+		active: (
+			custom-control-label: (
+				before: (
+					background-color: $custom-control-indicator-active-bg,
+					border-color: $custom-control-indicator-active-border-color,
+					box-shadow: $custom-control-indicator-active-box-shadow,
+					color: $custom-control-indicator-active-color,
+				),
+			),
+		),
+		disabled: (
+			custom-control-label: $custom-control-label-disabled,
+		),
+		checked: (
+			custom-control-label: (
+				before: (
+					background-color: $custom-control-indicator-checked-bg,
+					border-color: $custom-control-indicator-checked-border-color,
+					box-shadow:
+						clay-enable-shadows(
+							$custom-control-indicator-checked-box-shadow
+						),
+					color: $custom-control-indicator-checked-color,
+				),
+			),
+			active: (
+				custom-control-label: (
+					before: (
+						background-color:
+							$custom-control-indicator-checked-active-bg,
+						border-color:
+							$custom-control-indicator-checked-active-border-color,
+					),
+				),
+			),
+			disabled: (
+				cursor: $custom-control-indicator-disabled-cursor,
+				custom-control-label: (
+					before: (
+						background-color: $custom-control-indicator-disabled-bg,
+						box-shadow: none,
+					),
+				),
+			),
+		),
+	),
+	$custom-control-input
+);
+
 // Custom Control Primary
 
 $custom-control-primary-label-text: () !default;
@@ -198,6 +324,73 @@ $custom-checkbox-indicator-icon-indeterminate: clay-svg-url(
 ) !default;
 $custom-checkbox-indicator-icon-indeterminate-bg-size: null !default;
 
+$custom-checkbox: () !default;
+$custom-checkbox: map-deep-merge(
+	(
+		custom-control-input: (
+			custom-control-label: (
+				before: (
+					border-radius:
+						clay-enable-rounded(
+							$custom-checkbox-indicator-border-radius
+						),
+				),
+			),
+			checked: (
+				custom-control-label: (
+					after: (
+						background-image:
+							escape-svg($custom-checkbox-indicator-icon-checked),
+						background-size:
+							$custom-checkbox-indicator-icon-checked-bg-size,
+					),
+				),
+				disabled: (
+					custom-control-label: (
+						before: (
+							background-color:
+								$custom-control-indicator-checked-disabled-bg,
+						),
+					),
+				),
+			),
+			indeterminate: (
+				custom-control-label: (
+					before: (
+						background-color:
+							$custom-checkbox-indicator-indeterminate-bg,
+						border-color:
+							$custom-control-indicator-indeterminate-border-color,
+						box-shadow:
+							clay-enable-shadows(
+								$custom-checkbox-indicator-indeterminate-box-shadow
+							),
+					),
+					after: (
+						background-image:
+							escape-svg(
+								$custom-checkbox-indicator-icon-indeterminate
+							),
+						background-size:
+							$custom-checkbox-indicator-icon-indeterminate-bg-size,
+					),
+				),
+				disabled: (
+					custom-control-label: (
+						before: (
+							background-color:
+								$custom-control-indicator-checked-disabled-bg,
+							border-color:
+								$custom-control-indicator-checked-disabled-border-color,
+						),
+					),
+				),
+			),
+		),
+	),
+	$custom-checkbox
+);
+
 // Custom Radio
 
 $custom-radio-indicator-border-radius: 50% !default;
@@ -214,6 +407,48 @@ $custom-radio-indicator-disabled-border-color: null !default;
 $custom-radio-indicator-disabled-checked-border-color: null !default;
 $custom-radio-indicator-checked-disabled-border-color: $custom-radio-indicator-disabled-checked-border-color !default;
 
+$custom-radio: () !default;
+$custom-radio: map-deep-merge(
+	(
+		custom-control-input: (
+			custom-control-label: (
+				before: (
+					border-radius: $custom-radio-indicator-border-radius,
+				),
+			),
+			disabled: (
+				custom-control-label: (
+					before: (
+						border-color:
+							$custom-radio-indicator-disabled-border-color,
+					),
+				),
+			),
+			checked: (
+				custom-control-label: (
+					after: (
+						background-image:
+							escape-svg($custom-radio-indicator-icon-checked),
+						background-size:
+							$custom-radio-indicator-icon-checked-bg-size,
+					),
+				),
+				disabled: (
+					custom-control-label: (
+						before: (
+							background-color:
+								$custom-control-indicator-checked-disabled-bg,
+							border-color:
+								$custom-radio-indicator-checked-disabled-border-color,
+						),
+					),
+				),
+			),
+		),
+	),
+	$custom-radio
+);
+
 // Custom Switch
 
 /// @deprecated as of v3.x with no replacement
@@ -222,7 +457,7 @@ $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-border-radius: $custom-control-indicator-size * 0.5 !default;
 
 /// @deprecated as of v3.x with no replacement