@clayui/css 3.38.0 → 3.41.0

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

@@ -5,19 +5,28 @@
 /// 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);
@@ -59,18 +68,22 @@
 	@if ($enabled) {
 		@include clay-css($base);
 
-		// Firefox clips overflowing content and doesn't respect `padding-bottom` on `.dropdown-menu`
+		@if ($breakpoint-down) {
+			@include media-breakpoint-down($breakpoint-down) {
+				@include clay-css($mobile);
+			}
+		}
 
-		padding-bottom: 0;
+		&::before {
+			@include clay-css(setter(map-get($map, before), ()));
+		}
 
 		&::after {
-			padding-top: map-get($base, padding-bottom);
+			@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), ()));
 		}
 	}
 }
@@ -78,28 +91,58 @@
 /// A mixin to create Dropdown Item variants. You can base your variant off Bootstrap's `.dropdown-item` class or create your own base class (e.g., `<a class="dropdown-item my-custom-dropdown-item" href="/"></a>` or `<a class="my-custom-dropdown-item" href="/"></a>`).
 /// @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
-/// See Mixin `clay-css` for available keys to pass into the base selector
-/// hover: {Map | Null}, // See Mixin `clay-css` for available keys
-/// hover-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
-/// focus: {Map | Null}, // See Mixin `clay-css` for available keys
-/// focus-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
-/// active: {Map | Null}, // See Mixin `clay-css` for available keys
-/// active-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
-/// active-class: {Map | Null}, // See Mixin `clay-css` for available keys
-/// active-class-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
-/// disabled: {Map | Null}, // See Mixin `clay-css` for available keys
-/// disabled-c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
-/// disabled-active: {Map | Null}, // See Mixin `clay-css` for available keys
-/// autofit-row: {Map | Null}, // See Mixin `clay-css` for available keys
-/// c-kbd-inline: {Map | Null}, // See Mixin `clay-css` for available keys
-/// c-inner: {Map | Null}, // Pass parameters to `clay-css` mixin
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
+/// 	hover: (
+/// 		// .dropdown-item:hover
+/// 		c-kbd-inline: (
+/// 			// .dropdown-item:hover .c-kbd-inline
+/// 		),
+/// 	),
+/// 	focus: (
+/// 		// .dropdown-item:focus
+/// 		c-kbd-inline: (
+/// 			// .dropdown-item:focus .c-kbd-inline
+/// 		),
+/// 	),
+/// 	active: (
+/// 		// .dropdown-item:active
+/// 		c-kbd-inline: (
+/// 			// .dropdown-item:active .c-kbd-inline
+/// 		),
+/// 	),
+/// 	active-class: (
+/// 		// .dropdown-item.active
+/// 		c-kbd-inline: (
+/// 			// .dropdown-item.active .c-kbd-inline
+/// 		),
+/// 	),
+/// 	disabled: (
+/// 		c-kbd-inline: (
+/// 			// .dropdown-item:disabled .c-kbd-inline
+/// 		),
+/// 		active: (
+/// 			// .dropdown-item:disabled:active
+/// 		),
+/// 	),
+/// 	c-inner: (
+/// 		enabled: {Bool}, // Set to false to prevent .c-inner styles from being output. Default: true
+/// 		// .dropdown-item .c-inner
+/// 	),
+/// 	autofit-row: (
+/// 		// .dropdown-item.autofit-row, .dropdown-item .autofit-row
+/// 	),
+/// 	c-kbd-inline: (
+/// 		// .dropdown-item .c-kbd-inline
+/// 	),
+/// )
 /// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// bg: {Color | String | Null}, // deprecated after 3.9.0
 /// hover-bg: {Color | String | Null}, // deprecated after 3.9.0
 /// hover-color: {Color | String | Null}, // deprecated after 3.9.0
 /// hover-opacity: {Number | String | Null}, // deprecated after 3.9.0
 /// hover-text-decoration: {String | Null}, // deprecated after 3.9.0
+/// hover-c-kbd-inline: {Map},
 /// focus-bg: {Color | String | Null}, // deprecated after 3.9.0
 /// focus-border-radius: {Number | String | List | Null}, // deprecated after 3.9.0
 /// focus-box-shadow: {String | List | Null}, // deprecated after 3.9.0
@@ -107,16 +150,19 @@
 /// focus-opacity: {Number | String | Null}, // deprecated after 3.9.0
 /// focus-outline: {Number | String | Null}, // deprecated after 3.9.0
 /// focus-text-decoration: {String | Null}, // deprecated after 3.9.0
+/// focus-c-kbd-inline: {Map},
 /// active-bg: {Color | String | Null}, // deprecated after 3.9.0
 /// active-border-color: {String | List | Null}, // deprecated after 3.9.0
 /// active-color: {Color | String | Null}, // deprecated after 3.9.0
 /// active-font-weight: {Number | String | Null}, // deprecated after 3.9.0
 /// active-text-decoration: {String | Null}, // deprecated after 3.9.0
+/// active-c-kbd-inline: {Map},
 /// active-class-bg: {Color | String | Null}, // deprecated after 3.9.0
 /// active-class-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
 /// active-class-color: {Color | String | Null}, // deprecated after 3.9.0
 /// active-class-font-weight: {Number | String | Null}, // deprecated after 3.9.0
 /// active-class-text-decoration: {String | Null}, // deprecated after 3.9.0
+/// active-class-c-kbd-inline: {Map},
 /// disabled-bg: {Color | String | Null}, // deprecated after 3.9.0
 /// disabled-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
 /// disabled-box-shadow: {String | List | Null}, // deprecated after 3.9.0
@@ -126,10 +172,9 @@
 /// disabled-outline: {Number | String | Null}, // deprecated after 3.9.0
 /// disabled-pointer-events: {String | Null}, // deprecated after 3.9.0
 /// disabled-text-decoration: {String | Null}, // deprecated after 3.9.0
+/// disabled-c-kbd-inline: {Map},
 /// disabled-active-pointer-events: {String | Null}, // deprecated after 3.9.0
-/// @todo
-/// - Add @example
-/// - Add @link to documentation
+/// disabled-active: {Map},
 
 @mixin clay-dropdown-item-variant($map) {
 	$enabled: setter(map-get($map, enabled), true);
@@ -143,7 +188,7 @@
 	);
 
 	$hover: setter(map-get($map, hover), ());
-	$hover: map-merge(
+	$hover: map-deep-merge(
 		$hover,
 		(
 			background-color:
@@ -162,10 +207,13 @@
 		)
 	);
 
-	$hover-c-kbd-inline: setter(map-get($map, hover-c-kbd-inline), ());
+	$hover-c-kbd-inline: map-merge(
+		setter(map-get($hover, c-kbd-inline), ()),
+		setter(map-get($map, hover-c-kbd-inline), ())
+	);
 
 	$focus: setter(map-get($map, focus), ());
-	$focus: map-merge(
+	$focus: map-deep-merge(
 		$focus,
 		(
 			background-color:
@@ -196,10 +244,13 @@
 		)
 	);
 
-	$focus-c-kbd-inline: setter(map-get($map, focus-c-kbd-inline), ());
+	$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:
@@ -226,11 +277,14 @@
 		)
 	);
 
-	$active-c-kbd-inline: setter(map-get($map, active-c-kbd-inline), ());
+	$active-c-kbd-inline: map-merge(
+		setter(map-get($active, c-kbd-inline), ()),
+		setter(map-get($map, active-c-kbd-inline), ())
+	);
 
 	$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:
@@ -261,13 +315,13 @@
 		)
 	);
 
-	$active-class-c-kbd-inline: setter(
-		map-get($map, active-class-c-kbd-inline),
-		()
+	$active-class-c-kbd-inline: map-merge(
+		setter(map-get($active-class, c-kbd-inline), ()),
+		setter(map-get($map, active-class-c-kbd-inline), ())
 	);
 
 	$disabled: setter(map-get($map, disabled), ());
-	$disabled: map-merge(
+	$disabled: map-deep-merge(
 		$disabled,
 		(
 			background-color:
@@ -315,10 +369,16 @@
 		)
 	);
 
-	$disabled-c-kbd-inline: setter(map-get($map, disabled-c-kbd-inline), ());
+	$disabled-c-kbd-inline: map-merge(
+		setter(map-get($disabled, c-kbd-inline), ()),
+		setter(map-get($map, disabled-c-kbd-inline), ())
+	);
 
-	$disabled-active: setter(map-get($map, disabled-active), ());
-	$disabled-active: map-merge(
+	$disabled-active: map-deep-merge(
+		setter(map-get($disabled, active), ()),
+		setter(map-get($map, disabled-active), ())
+	);
+	$disabled-active: map-deep-merge(
 		$disabled-active,
 		(
 			pointer-events:
@@ -361,6 +421,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);
 			}
@@ -369,6 +437,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);
 			}
@@ -377,6 +453,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);
 			}
@@ -398,6 +482,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);
 			}
@@ -430,6 +522,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);
@@ -441,9 +541,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);