@clayui/css 3.39.0 → 3.42.0

package/src/scss/variables/_dropdowns.scss

@@ -1,93 +1,163 @@
+// .dropdown-toggle
+
+$dropdown-toggle: () !default;
+$dropdown-toggle: map-deep-merge(
+	(
+		white-space: nowrap,
+	),
+	$dropdown-toggle
+);
+
+// .dropdown-menu
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-bg: $white !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-border-color: rgba($black, 0.15) !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-border-style: solid !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-border-width: $border-width !default;
 
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-border-radius: $border-radius !default;
+
+/// @deprecated as of v3.x with no replacement
+
 $dropdown-inner-border-radius: $dropdown-border-radius
 	math-sign($dropdown-border-width) !default;
 
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-color: $body-color !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-font-size: $font-size-base !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-max-height: 500px !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-max-width: 260px !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-min-height: null !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-min-width: 10rem !default;
-$dropdown-padding-y: 0.5rem !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
 
 $dropdown-font-size-mobile: null !default;
+
+/// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-max-height-mobile: 295px !default;
-$dropdown-max-width-mobile: 230px !default;
 
-$dropdown-spacer: 0.125rem !default;
+/// @deprecated as of v3.x use map $dropdown-menu instead
 
-$dropdown-divider-bg: $gray-200 !default;
-$dropdown-divider-margin-y: $spacer * 0.5 !default;
+$dropdown-max-width-mobile: 230px !default;
 
-$dropdown-full-wide-header-spacer-y: 20px !default;
+$dropdown-padding-y: 0.5rem !default;
+$dropdown-spacer: 0.125rem !default;
 
-$dropdown-wide-width: 500px !default;
+$dropdown-menu: () !default;
+$dropdown-menu: map-deep-merge(
+	(
+		breakpoint-down: md,
+		background-clip: padding-box,
+		background-color: $dropdown-bg,
+		border-color: $dropdown-border-color,
+		border-radius: clay-enable-rounded($dropdown-border-radius),
+		border-style: $dropdown-border-style,
+		border-width: $dropdown-border-width,
+		box-shadow: clay-enable-shadows($dropdown-box-shadow),
+		color: $dropdown-color,
+		display: none,
+		float: left,
+		font-size: $dropdown-font-size,
+		left: 0,
+		list-style: none,
+		margin: $dropdown-spacer 0 0,
+		max-height: $dropdown-max-height,
+		max-width: $dropdown-max-width,
+		min-height: $dropdown-min-height,
+		min-width: $dropdown-min-width,
+		overflow: auto,
+		padding: $dropdown-padding-y 0,
+		position: absolute,
+		text-align: left,
+		top: 100%,
+		z-index: $zindex-dropdown,
+		mobile: (
+			font-size: $dropdown-font-size-mobile,
+			max-height: $dropdown-max-height-mobile,
+			max-width: $dropdown-max-width-mobile,
+		),
+		show: (
+			display: block,
+		),
+	),
+	$dropdown-menu
+);
 
-// Dropdown Item
+// .dropdown-item
 
 $dropdown-item-padding-x: 1.5rem !default;
 $dropdown-item-padding-y: 0.25rem !default;
 
-$dropdown-item-disabled-cursor: $disabled-cursor !default;
+/// @deprecated as of v3.x use map $dropdown-item instead
 
-$dropdown-item-indicator-size: 1rem !default;
-$dropdown-item-indicator-spacer-x: 1rem !default;
+$dropdown-item-disabled-cursor: $disabled-cursor !default;
 
-// Dropdown Link
+/// @deprecated as of v3.x use map $dropdown-item instead
 
 $dropdown-link-color: $gray-900 !default;
-$dropdown-link-font-weight: null !default;
 
-$dropdown-link-hover-bg: $gray-100 !default;
-$dropdown-link-hover-color: clay-darken($gray-900, 5%) !default;
+/// @deprecated as of v3.x use map $dropdown-item instead
 
-$dropdown-link-active-bg: $component-active-bg !default;
-$dropdown-link-active-color: $component-active-color !default;
-$dropdown-link-active-font-weight: null !default;
+$dropdown-link-font-weight: null !default;
 
-$dropdown-link-disabled-color: $gray-600 !default;
+/// @deprecated as of v3.x use map $dropdown-item instead
 
-// Dropdown Header
+$dropdown-link-hover-bg: $gray-100 !default;
 
-$dropdown-header-color: $gray-600 !default;
-$dropdown-header-font-size: null !default;
-$dropdown-header-margin-bottom: null !default;
-$dropdown-header-margin-top: null !default;
-$dropdown-header-padding-x: $dropdown-item-padding-x !default;
-$dropdown-header-padding-y: $dropdown-padding-y !default;
-$dropdown-header-text-transform: null !default;
+/// @deprecated as of v3.x use map $dropdown-item instead
 
-$dropdown-header-font-size-mobile: null !default;
+$dropdown-link-hover-color: clay-darken($gray-900, 5%) !default;
 
-// Dropdown Subheader
+/// @deprecated as of v3.x use map $dropdown-item instead
 
-$dropdown-subheader-color: $dropdown-header-color !default;
-$dropdown-subheader-font-size: 0.75rem !default; // 12px
-$dropdown-subheader-font-weight: $font-weight-semi-bold !default;
-$dropdown-subheader-margin-bottom: null !default;
-$dropdown-subheader-margin-top: null !default;
-$dropdown-subheader-padding-x: $dropdown-header-padding-x !default;
-$dropdown-subheader-padding-y: $dropdown-header-padding-y !default;
-$dropdown-subheader-text-transform: uppercase !default;
+$dropdown-link-active-bg: $component-active-bg !default;
 
-$dropdown-caption-color: $dropdown-header-color !default;
-$dropdown-caption-font-size: 0.875rem !default; // 14px
-$dropdown-caption-font-weight: null !default;
+/// @deprecated as of v3.x use map $dropdown-item instead
 
-// Dropdown Inline Scroller
+$dropdown-link-active-color: $component-active-color !default;
 
-$dropdown-inline-scroller-max-height: 200px !default;
-$dropdown-inline-scroller-max-height-mobile: none !default;
+/// @deprecated as of v3.x use map $dropdown-item instead
+
+$dropdown-link-active-font-weight: null !default;
 
-// Dropdown Item
+/// @deprecated as of v3.x use map $dropdown-item instead
 
-$dropdown-item-disabled-cursor: $disabled-cursor !default;
+$dropdown-link-disabled-color: $gray-600 !default;
 
 // .dropdown-item `background-color`, `border-width`, `text-align` for `<button>`s
 
@@ -152,6 +222,247 @@ $dropdown-item-base: map-deep-merge(
 	$dropdown-item-base
 );
 
+// .dropdown-item-text
+
+$dropdown-item-text: () !default;
+$dropdown-item-text: map-merge(
+	(
+		color: map-get($dropdown-item-base, color),
+		display: map-get($dropdown-item-base, display),
+		font-weight: map-get($dropdown-item-base, font-weight),
+		padding: map-get($dropdown-item-base, padding),
+		padding-bottom: map-get($dropdown-item-base, padding-bottom),
+		padding-left: map-get($dropdown-item-base, padding-left),
+		padding-right: map-get($dropdown-item-base, padding-right),
+		padding-top: map-get($dropdown-item-base, padding-top),
+	),
+	$dropdown-item-text
+);
+
+// .dropdown-header
+
+/// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-color: $gray-600 !default;
+
+/// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-font-size: null !default;
+
+/// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-margin-bottom: null !default;
+
+/// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-margin-top: null !default;
+
+/// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-padding-x: $dropdown-item-padding-x !default;
+
+/// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-padding-y: $dropdown-padding-y !default;
+
+/// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-text-transform: null !default;
+
+/// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-font-size-mobile: null !default;
+
+$dropdown-header: () !default;
+$dropdown-header: map-deep-merge(
+	(
+		breakpoint-down: sm,
+		color: $dropdown-header-color,
+		display: block,
+		font-size: $dropdown-header-font-size,
+		margin-bottom: $dropdown-header-margin-bottom,
+		margin-top: $dropdown-header-margin-top,
+		padding-bottom: $dropdown-header-padding-y,
+		padding-left: $dropdown-header-padding-x,
+		padding-right: $dropdown-header-padding-x,
+		padding-top: $dropdown-header-padding-y,
+		position: relative,
+		text-transform: $dropdown-header-text-transform,
+		word-wrap: break-word,
+		mobile: (
+			font-size: $dropdown-header-font-size-mobile,
+		),
+		first-child: (
+			margin-top: 0,
+		),
+	),
+	$dropdown-header
+);
+
+// .dropdown-subheader
+
+/// @deprecated as of v3.x use map $dropdown-subheader instead
+
+$dropdown-subheader-color: $dropdown-header-color !default;
+
+/// @deprecated as of v3.x use map $dropdown-subheader instead
+
+$dropdown-subheader-font-size: 0.75rem !default; // 12px
+
+/// @deprecated as of v3.x use map $dropdown-subheader instead
+
+$dropdown-subheader-font-weight: $font-weight-semi-bold !default;
+
+/// @deprecated as of v3.x use map $dropdown-subheader instead
+
+$dropdown-subheader-margin-bottom: null !default;
+
+/// @deprecated as of v3.x use map $dropdown-subheader instead
+
+$dropdown-subheader-margin-top: null !default;
+
+/// @deprecated as of v3.x use map $dropdown-subheader instead
+
+$dropdown-subheader-padding-x: $dropdown-header-padding-x !default;
+
+/// @deprecated as of v3.x use map $dropdown-subheader instead
+
+$dropdown-subheader-padding-y: $dropdown-header-padding-y !default;
+
+/// @deprecated as of v3.x use map $dropdown-subheader instead
+
+$dropdown-subheader-text-transform: uppercase !default;
+
+$dropdown-subheader: () !default;
+$dropdown-subheader: map-deep-merge(
+	(
+		color: $dropdown-subheader-color,
+		font-size: $dropdown-subheader-font-size,
+		font-weight: $dropdown-subheader-font-weight,
+		margin-bottom: $dropdown-subheader-margin-bottom,
+		margin-top: $dropdown-subheader-margin-top,
+		padding-bottom: $dropdown-subheader-padding-y,
+		padding-left: $dropdown-subheader-padding-x,
+		padding-right: $dropdown-subheader-padding-x,
+		padding-top: $dropdown-subheader-padding-y,
+		text-transform: $dropdown-subheader-text-transform,
+		white-space: normal,
+		word-wrap: break-word,
+		first-child: (
+			margin-top: 0,
+		),
+	),
+	$dropdown-subheader
+);
+
+// .dropdown-caption
+
+/// @deprecated as of v3.x use map $dropdown-caption instead
+
+$dropdown-caption-color: $dropdown-header-color !default;
+
+/// @deprecated as of v3.x use map $dropdown-caption instead
+
+$dropdown-caption-font-size: 0.875rem !default; // 14px
+
+/// @deprecated as of v3.x use map $dropdown-caption instead
+
+$dropdown-caption-font-weight: null !default;
+
+$dropdown-caption: () !default;
+$dropdown-caption: map-merge(
+	(
+		color: $dropdown-caption-color,
+		font-size: $dropdown-caption-font-size,
+		font-weight: $dropdown-caption-font-weight,
+		padding: $dropdown-item-padding-y $dropdown-item-padding-x,
+		white-space: normal,
+		word-wrap: break-word,
+	),
+	$dropdown-caption
+);
+
+// .dropdown-divider
+
+/// @deprecated as of v3.x use map $dropdown-divider instead
+
+$dropdown-divider-bg: $gray-200 !default;
+
+/// @deprecated as of v3.x use map $dropdown-divider instead
+
+$dropdown-divider-margin-y: $spacer * 0.5 !default;
+
+$dropdown-divider: () !default;
+$dropdown-divider: map-merge(
+	(
+		border-top: 1px solid $dropdown-divider-bg,
+		height: 0,
+		margin: $dropdown-divider-margin-y 0,
+		overflow: hidden,
+	),
+	$dropdown-divider
+);
+
+// .dropdown-section
+
+/// @deprecated as of v3.x use map $dropdown-section instead
+
+$dropdown-section-custom-control: () !default;
+$dropdown-section-custom-control: map-deep-merge(
+	(
+		margin-bottom: 0,
+	),
+	$dropdown-section-custom-control
+);
+
+/// @deprecated as of v3.x use map $dropdown-section instead
+
+$dropdown-section-custom-control-label: () !default;
+
+/// @deprecated as of v3.x use map $dropdown-section instead
+
+$dropdown-section-custom-control-label-text: () !default;
+
+/// @deprecated as of v3.x use map $dropdown-section instead
+
+$dropdown-section-active-custom-control-label: () !default;
+
+$dropdown-section: () !default;
+$dropdown-section: map-deep-merge(
+	(
+		padding: $dropdown-item-padding-y $dropdown-item-padding-x,
+		form-group: (
+			form-group: (
+				margin-top: $dropdown-item-padding-y * 2,
+			),
+		),
+		custom-control: $dropdown-section-custom-control,
+		custom-control-label: $dropdown-section-custom-control-label,
+		custom-control-label-text: $dropdown-section-custom-control-label-text,
+		active: (
+			custom-control-label: $dropdown-section-active-custom-control-label,
+		),
+	),
+	$dropdown-section
+);
+
+// .dropdown-footer
+
+$dropdown-footer: () !default;
+$dropdown-footer: map-merge(
+	(
+		box-shadow: -1px -2px 3px -3px rgba(0, 0, 0, 0.5),
+		padding: 0.5rem $dropdown-item-padding-x 0,
+		position: relative,
+	),
+	$dropdown-footer
+);
+
+// Dropdown Inline Scroller
+
+$dropdown-inline-scroller-max-height: 200px !default;
+$dropdown-inline-scroller-max-height-mobile: none !default;
+
 // Dropdown Item Indicator
 
 $dropdown-item-indicator-size: 1rem !default;
@@ -249,34 +560,182 @@ $dropdown-item-indicator-text-end: map-deep-merge(
 	$dropdown-item-indicator-text-end
 );
 
-// Dropdown Section
+// .dropdown-menu-top
 
-$dropdown-section-custom-control: () !default;
-$dropdown-section-custom-control: map-deep-merge(
+$dropdown-menu-top: () !default;
+$dropdown-menu-top: map-deep-merge(
 	(
-		margin-bottom: 0,
+		bottom: 100% !important,
+		left: 0 !important,
+		margin-top: 0,
+		margin-bottom: $dropdown-spacer,
+		right: auto !important,
+		top: auto !important,
+		transform: none !important,
+		will-change: auto !important,
 	),
-	$dropdown-section-custom-control
+	$dropdown-menu-top
 );
 
-$dropdown-section-custom-control-label: () !default;
+// .dropdown-menu-top-right
 
-$dropdown-section-custom-control-label-text: () !default;
+$dropdown-menu-top-right: () !default;
+$dropdown-menu-top-right: map-deep-merge(
+	(
+		bottom: 100% !important,
+		left: auto !important,
+		margin-top: 0,
+		margin-bottom: $dropdown-spacer,
+		right: 0 !important,
+		top: auto !important,
+		transform: none !important,
+		will-change: auto !important,
+	),
+	$dropdown-menu-top-right
+);
 
-$dropdown-section-active-custom-control-label: () !default;
+// .dropdown-menu-top-center
 
-// Dropdown Footer
+$dropdown-menu-top-center: () !default;
+$dropdown-menu-top-center: map-deep-merge(
+	(
+		bottom: 100% !important,
+		left: 50% !important,
+		margin-top: 0,
+		margin-bottom: $dropdown-spacer,
+		right: auto !important,
+		top: auto !important,
+		transform: translateX(-50%) !important,
+		will-change: auto !important,
+	),
+	$dropdown-menu-top-center
+);
 
-$dropdown-footer: () !default;
-$dropdown-footer: map-merge(
+// .dropdown-menu-center
+
+$dropdown-menu-center: () !default;
+$dropdown-menu-center: map-deep-merge(
 	(
-		box-shadow: -1px -2px 3px -3px rgba(0, 0, 0, 0.5),
-		padding: 0.5rem $dropdown-item-padding-x 0,
-		position: relative,
+		bottom: auto !important,
+		left: 50% !important,
+		right: auto !important,
+		top: 100% !important,
+		transform: translateX(-50%) !important,
+		will-change: auto !important,
 	),
-	$dropdown-footer
+	$dropdown-menu-center
+);
+
+// .dropdown-menu-left-side
+
+$dropdown-menu-left-side: () !default;
+$dropdown-menu-left-side: map-deep-merge(
+	(
+		bottom: auto !important,
+		left: auto !important,
+		margin-right: $dropdown-spacer,
+		margin-top: 0,
+		right: 100% !important,
+		top: 0 !important,
+		transform: none !important,
+		will-change: auto !important,
+	),
+	$dropdown-menu-left-side
+);
+
+// .dropdown-menu-left-side-bottom
+
+$dropdown-menu-left-side-bottom: () !default;
+$dropdown-menu-left-side-bottom: map-deep-merge(
+	(
+		bottom: 0 !important,
+		left: auto !important,
+		margin-right: $dropdown-spacer,
+		margin-top: 0,
+		right: 100% !important,
+		top: auto !important,
+		transform: none !important,
+		will-change: auto !important,
+	),
+	$dropdown-menu-left-side-bottom
+);
+
+// .dropdown-menu-left-side-middle
+
+$dropdown-menu-left-side-middle: () !default;
+$dropdown-menu-left-side-middle: map-deep-merge(
+	(
+		bottom: auto !important,
+		left: auto !important,
+		margin-right: $dropdown-spacer,
+		margin-top: 0,
+		right: 100% !important,
+		top: 50% !important,
+		transform: translate(0, -50%) !important,
+		will-change: auto !important,
+	),
+	$dropdown-menu-left-side-middle
 );
 
+// .dropdown-menu-right-side
+
+$dropdown-menu-right-side: () !default;
+$dropdown-menu-right-side: map-deep-merge(
+	(
+		bottom: auto !important,
+		left: 100% !important,
+		margin-left: $dropdown-spacer,
+		margin-top: 0,
+		right: auto !important,
+		top: 0 !important,
+		transform: none !important,
+		will-change: auto !important,
+	),
+	$dropdown-menu-right-side
+);
+
+// .dropdown-menu-right-side-bottom
+
+$dropdown-menu-right-side-bottom: () !default;
+$dropdown-menu-right-side-bottom: map-deep-merge(
+	(
+		bottom: 0 !important,
+		left: 100% !important,
+		margin-left: $dropdown-spacer,
+		margin-top: 0,
+		right: auto !important,
+		top: auto !important,
+		transform: none !important,
+		will-change: auto !important,
+	),
+	$dropdown-menu-right-side-bottom
+);
+
+// .dropdown-menu-right-side-middle
+
+$dropdown-menu-right-side-middle: () !default;
+$dropdown-menu-right-side-middle: map-deep-merge(
+	(
+		bottom: auto !important,
+		left: 100% !important,
+		margin-left: $dropdown-spacer,
+		margin-top: 0,
+		right: auto !important,
+		top: 50% !important,
+		transform: translate(0, -50%) !important,
+		will-change: auto !important,
+	),
+	$dropdown-menu-right-side-middle
+);
+
+// .dropdown-full, .dropdown-wide
+
+$dropdown-full-wide-header-spacer-y: 20px !default;
+
+// .dropdown-wide
+
+$dropdown-wide-width: 500px !default;
+
 // Dropdown Menu Width
 
 $dropdown-menu-width-full: () !default;
@@ -335,15 +794,64 @@ $autocomplete-dropdown-menu: map-deep-merge(
 	$autocomplete-dropdown-menu
 );
 
-// Dropdown Action
+// .dropdown-action
+
+/// @deprecated as of v3.x use map $dropdown-action instead
 
 $dropdown-action-toggle-border-radius: $border-radius !default;
+
+/// @deprecated as of v3.x use map $dropdown-action instead
+
 $dropdown-action-toggle-font-size: null !default;
-$dropdown-action-toggle-size: $btn-monospaced-size-sm !default;
+
+/// @deprecated as of v3.x use map $dropdown-action instead
 
 $dropdown-action-toggle-disabled-cursor: $disabled-cursor !default;
+
+/// @deprecated as of v3.x use map $dropdown-action instead
+
 $dropdown-action-toggle-disabled-opacity: 0.65 !default;
 
+$dropdown-action-toggle-size: $btn-monospaced-size-sm !default;
+
+$dropdown-action: () !default;
+$dropdown-action: map-deep-merge(
+	(
+		display: inline-block,
+		font-size: $dropdown-action-toggle-font-size,
+		vertical-align: middle,
+		dropdown-toggle: (
+			align-items: center,
+			border-radius:
+				clay-enable-rounded($dropdown-action-toggle-border-radius),
+			cursor: $btn-cursor,
+			display: flex,
+			font-size: inherit,
+			font-weight: inherit,
+			height: $dropdown-action-toggle-size,
+			justify-content: center,
+			line-height: inherit,
+			padding: 0,
+			text-transform: inherit,
+			vertical-align: baseline,
+			width: $dropdown-action-toggle-size,
+			disabled: (
+				cursor: $dropdown-action-toggle-disabled-cursor,
+				opacity: $dropdown-action-toggle-disabled-opacity,
+			),
+			lexicon-icon: (
+				margin-top: 0,
+			),
+			inline-item: (
+				lexicon-icon: (
+					margin-top: 0,
+				),
+			),
+		),
+	),
+	$dropdown-action
+);
+
 // Alert inside Dropdowns
 
 $dropdown-alert-font-size: null !default;