@clayui/css 3.39.0 → 3.42.0

package/src/scss/mixins/_close.scss

@@ -344,7 +344,6 @@
 			@include clay-css($active);
 		}
 
-		.show > &,
 		&.active {
 			@include clay-css($active-class);
 		}

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

@@ -616,53 +616,65 @@
 /// );
 
 @mixin clay-custom-control-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
-
-	@include clay-css(setter($map, ()));
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	@if ($enabled) {
-		label {
-			@include clay-css(setter(map-deep-get($map, label), ()));
-		}
+		@include clay-css(setter($map, ()));
 
-		.custom-control-label {
-			@include clay-css(
-				setter(map-deep-get($map, custom-control-label), ())
-			);
+		@if ($enabled) {
+			label {
+				@include clay-css(setter(map-deep-get($map, label), ()));
+			}
 
-			&::before {
+			.custom-control-label {
 				@include clay-css(
-					setter(map-deep-get($map, custom-control-label, before), ())
+					setter(map-deep-get($map, custom-control-label), ())
 				);
+
+				&::before {
+					@include clay-css(
+						setter(
+							map-deep-get($map, custom-control-label, before),
+							()
+						)
+					);
+				}
+
+				&::after {
+					@include clay-css(
+						setter(
+							map-deep-get($map, custom-control-label, after),
+							()
+						)
+					);
+				}
 			}
 
-			&::after {
+			.custom-control-label-text {
 				@include clay-css(
-					setter(map-deep-get($map, custom-control-label, after), ())
+					setter(map-deep-get($map, custom-control-label-text), ())
 				);
-			}
-		}
 
-		.custom-control-label-text {
-			@include clay-css(
-				setter(map-deep-get($map, custom-control-label-text), ())
-			);
+				small,
+				.small {
+					@include clay-css(
+						setter(
+							map-deep-get(
+								$map,
+								custom-control-label-text,
+								small
+							),
+							()
+						)
+					);
+				}
+			}
 
-			small,
-			.small {
-				@include clay-css(
-					setter(
-						map-deep-get($map, custom-control-label-text, small),
-						()
-					)
+			.custom-control-input {
+				@include clay-custom-control-input-variant(
+					setter(map-deep-get($map, custom-control-input), ())
 				);
 			}
 		}
-
-		.custom-control-input {
-			@include clay-custom-control-input-variant(
-				setter(map-deep-get($map, custom-control-input), ())
-			);
-		}
 	}
 }

package/src/scss/mixins/_dropdown-menu.scss

@@ -5,63 +5,89 @@
 /// A mixin to create Dropdown Menu variants. You can base your variant off Bootstrap's `.dropdown-menu` class or create your own base class (e.g., `<div class="dropdown-menu my-custom-dropdown-menu"></div>` or `<div class="my-custom-dropdown-menu"></div>`).
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
-/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
-/// breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
-/// See Mixin `clay-css` for available keys to pass into the base selector
-/// mobile: {Map | Null}, // See Mixin `clay-css` for available keys
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
+/// 	breakpoint-down: {String}, // The breakpoint to use in `media-breakpoint-down`
+/// 	mobile: (
+/// 		// .dropdown-menu { @include media-breakpoint-down(breakpoint-down) {} }
+/// 	),
+/// 	before: (
+/// 		// .dropdown-menu::before
+/// 	),
+/// 	after: (
+/// 		// .dropdown-menu::after
+/// 	),
+/// 	show: (
+/// 		// .dropdown-menu.show
+/// 	),
+/// )
 /// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// bg: {Color | String | Null}, // deprecated after 3.9.0
 /// bg-clip: {String | Null}, // deprecated after 3.9.0
 /// font-size-mobile: {Number | String | Null}, // deprecated after 3.9.0
 /// max-height-mobile: {Number | String | Null}, // deprecated after 3.9.0
 /// max-width-mobile: {Number | String | Null}, // deprecated after 3.9.0
-/// @todo
-/// - Add @example
-/// - Add @link to documentation
 
 @mixin clay-dropdown-menu-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		$breakpoint-down: map-get($map, breakpoint-down);
+
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($map, background-color)),
+				background-clip:
+					setter(
+						map-get($map, bg-clip),
+						map-get($map, background-clip)
+					),
+			)
+		);
+
+		$mobile: setter(map-get($map, mobile), ());
+		$mobile: map-merge(
+			$mobile,
+			(
+				font-size:
+					setter(
+						map-get($map, font-size-mobile),
+						map-get($mobile, font-size)
+					),
+				max-height:
+					setter(
+						map-get($map, max-height-mobile),
+						map-get($mobile, max-height)
+					),
+				max-width:
+					setter(
+						map-get($map, max-width-mobile),
+						map-get($mobile, max-width)
+					),
+			)
+		);
 
-	$breakpoint-down: map-get($map, breakpoint-down);
+		@if ($enabled) {
+			@include clay-css($base);
 
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($map, background-color)),
-			background-clip:
-				setter(map-get($map, bg-clip), map-get($map, background-clip)),
-		)
-	);
+			@if ($breakpoint-down) {
+				@include media-breakpoint-down($breakpoint-down) {
+					@include clay-css($mobile);
+				}
+			}
 
-	$mobile: setter(map-get($map, mobile), ());
-	$mobile: map-merge(
-		$mobile,
-		(
-			font-size:
-				setter(
-					map-get($map, font-size-mobile),
-					map-get($mobile, font-size)
-				),
-			max-height:
-				setter(
-					map-get($map, max-height-mobile),
-					map-get($mobile, max-height)
-				),
-			max-width:
-				setter(
-					map-get($map, max-width-mobile),
-					map-get($mobile, max-width)
-				),
-		)
-	);
+			&::before {
+				@include clay-css(setter(map-get($map, before), ()));
+			}
 
-	@if ($enabled) {
-		@include clay-css($base);
+			&::after {
+				@include clay-css(setter(map-get($map, after), ()));
+			}
 
-		@if ($breakpoint-down) {
-			@include media-breakpoint-down($breakpoint-down) {
-				@include clay-css($mobile);
+			&.show {
+				@include clay-css(setter(map-get($map, show), ()));
 			}
 		}
 	}
@@ -167,7 +193,7 @@
 	);
 
 	$hover: setter(map-get($map, hover), ());
-	$hover: map-merge(
+	$hover: map-deep-merge(
 		$hover,
 		(
 			background-color:
@@ -192,7 +218,7 @@
 	);
 
 	$focus: setter(map-get($map, focus), ());
-	$focus: map-merge(
+	$focus: map-deep-merge(
 		$focus,
 		(
 			background-color:
@@ -223,13 +249,13 @@
 		)
 	);
 
-	$focus-c-kbd-inline: map-merge(
+	$focus-c-kbd-inline: map-deep-merge(
 		setter(map-get($focus, c-kbd-inline), ()),
 		setter(map-get($map, focus-c-kbd-inline), ())
 	);
 
 	$active: setter(map-get($map, active), ());
-	$active: map-merge(
+	$active: map-deep-merge(
 		$active,
 		(
 			background-color:
@@ -262,8 +288,8 @@
 	);
 
 	$active-class: setter(map-get($map, active-class), ());
-	$active-class: map-merge($active, $active-class);
-	$active-class: map-merge(
+	$active-class: map-deep-merge($active, $active-class);
+	$active-class: map-deep-merge(
 		$active-class,
 		(
 			background-color:
@@ -300,7 +326,7 @@
 	);
 
 	$disabled: setter(map-get($map, disabled), ());
-	$disabled: map-merge(
+	$disabled: map-deep-merge(
 		$disabled,
 		(
 			background-color:
@@ -353,11 +379,11 @@
 		setter(map-get($map, disabled-c-kbd-inline), ())
 	);
 
-	$disabled-active: map-merge(
+	$disabled-active: map-deep-merge(
 		setter(map-get($disabled, active), ()),
 		setter(map-get($map, disabled-active), ())
 	);
-	$disabled-active: map-merge(
+	$disabled-active: map-deep-merge(
 		$disabled-active,
 		(
 			pointer-events:
@@ -400,6 +426,14 @@
 		&:hover {
 			@include clay-css($hover);
 
+			&::before {
+				@include clay-css(setter(map-get($hover, before), ()));
+			}
+
+			&::after {
+				@include clay-css(setter(map-get($hover, after), ()));
+			}
+
 			.c-kbd-inline {
 				@include clay-css($hover-c-kbd-inline);
 			}
@@ -408,6 +442,14 @@
 		&:focus {
 			@include clay-css($focus);
 
+			&::before {
+				@include clay-css(setter(map-get($focus, before), ()));
+			}
+
+			&::after {
+				@include clay-css(setter(map-get($focus, after), ()));
+			}
+
 			.c-kbd-inline {
 				@include clay-css($focus-c-kbd-inline);
 			}
@@ -416,6 +458,14 @@
 		&:active {
 			@include clay-css($active);
 
+			&::before {
+				@include clay-css(setter(map-get($active, before), ()));
+			}
+
+			&::after {
+				@include clay-css(setter(map-get($active, after), ()));
+			}
+
 			label {
 				color: map-get($active, color);
 			}
@@ -437,6 +487,14 @@
 		&.active {
 			@include clay-css($active-class);
 
+			&::before {
+				@include clay-css(setter(map-get($active-class, before), ()));
+			}
+
+			&::after {
+				@include clay-css(setter(map-get($active-class, after), ()));
+			}
+
 			label {
 				color: map-get($active-class, color);
 			}
@@ -469,6 +527,14 @@
 		&.disabled {
 			@include clay-css($disabled);
 
+			&::before {
+				@include clay-css(setter(map-get($disabled, before), ()));
+			}
+
+			&::after {
+				@include clay-css(setter(map-get($disabled, after), ()));
+			}
+
 			label,
 			.form-check-label {
 				color: map-get($disabled, color);
@@ -480,9 +546,29 @@
 
 			&:active {
 				@include clay-css($disabled-active);
+
+				&::before {
+					@include clay-css(
+						setter(map-get($disabled-active, before), ())
+					);
+				}
+
+				&::after {
+					@include clay-css(
+						setter(map-get($disabled-active, after), ())
+					);
+				}
 			}
 		}
 
+		&::before {
+			@include clay-css(setter(map-get($map, before), ()));
+		}
+
+		&::after {
+			@include clay-css(setter(map-get($map, after), ()));
+		}
+
 		@if (map-get($c-inner, enabled)) {
 			.c-inner {
 				@include clay-css($c-inner);