@clayui/css 3.38.0 → 3.41.0

package/src/scss/atlas/variables/_dropdowns.scss

@@ -1,35 +1,92 @@
+// .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: $gray-300 !default;
+
+// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-border-width: 0 !default;
+
+// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3) !default;
+
+// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-font-size: 0.875rem !default; // 14px
 
-$dropdown-padding-y: 0.375rem !default; // 6px
+// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-min-height: 40px !default;
+
+// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-min-width: 240px !default;
+
+// @deprecated as of v3.x use map $dropdown-menu instead
+
 $dropdown-max-width: 240px !default;
+
+$dropdown-padding-y: 0.375rem !default; // 6px
 $dropdown-spacer: 0.3125rem !default; // 5px
 
-$dropdown-header-color: $gray-900 !default;
-$dropdown-header-font-size: 0.875rem !default; // 14px
-$dropdown-header-margin-top: 0.625rem !default; // 10px
+$dropdown-menu: () !default;
+$dropdown-menu: map-deep-merge(
+	(
+		background-color: $dropdown-bg,
+		border-color: $dropdown-border-color,
+		border-width: $dropdown-border-width,
+		box-shadow: clay-enable-shadows($dropdown-box-shadow),
+		font-size: $dropdown-font-size,
+		margin: $dropdown-spacer 0 0,
+		max-width: $dropdown-max-width,
+		min-height: $dropdown-min-height,
+		min-width: $dropdown-min-width,
+		padding: $dropdown-padding-y 0,
+	),
+	$dropdown-menu
+);
 
-$dropdown-subheader-font-size: 0.75rem !default; // 12px
-$dropdown-subheader-margin-top: 0.625rem !default; // 10px
+// .dropdown-item
 
-$dropdown-caption-color: $gray-600 !default;
+$dropdown-item-padding-x: 1.25rem !default; // 20px
+$dropdown-item-padding-y: 0.5rem !default; // 8px
+
+/// @deprecated as of v3.x use map $dropdown-item instead
 
 $dropdown-link-color: $gray-600 !default;
+
+/// @deprecated as of v3.x use map $dropdown-item instead
+
 $dropdown-link-font-weight: $font-weight-normal !default;
+
+/// @deprecated as of v3.x use map $dropdown-item instead
+
 $dropdown-link-hover-color: $gray-900 !default;
+
+/// @deprecated as of v3.x use map $dropdown-item instead
+
 $dropdown-link-hover-bg: clay-lighten($component-active-bg, 44.9) !default;
+
+/// @deprecated as of v3.x use map $dropdown-item instead
+
 $dropdown-link-active-color: $dropdown-link-hover-color !default;
+
+/// @deprecated as of v3.x use map $dropdown-item instead
+
 $dropdown-link-active-bg: $dropdown-link-hover-bg !default;
+
+/// @deprecated as of v3.x use map $dropdown-item instead
+
 $dropdown-link-active-font-weight: $font-weight-semi-bold !default;
-$dropdown-link-disabled-color: $gray-500 !default;
 
-$dropdown-item-padding-x: 1.25rem !default; // 20px
-$dropdown-item-padding-y: 0.5rem !default; // 8px
+/// @deprecated as of v3.x use map $dropdown-item instead
+
+$dropdown-link-disabled-color: $gray-500 !default;
 
 // Weird box-shadow inset with border-radius render in IE https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12515080/
 
@@ -37,11 +94,15 @@ $dropdown-item-base: () !default;
 $dropdown-item-base: map-deep-merge(
 	(
 		font-size: inherit,
-		focus-box-shadow: $component-focus-inset-box-shadow,
-		focus-outline: 0,
-		focus-text-decoration: none,
-		active-class-c-kbd-inline: (
-			color: $dropdown-link-active-color,
+		focus: (
+			box-shadow: $component-focus-inset-box-shadow,
+			outline: 0,
+			text-decoration: none,
+		),
+		active-class: (
+			c-kbd-inline: (
+				color: $dropdown-link-active-color,
+			),
 		),
 		disabled: (
 			box-shadow: none,
@@ -53,6 +114,81 @@ $dropdown-item-base: map-deep-merge(
 	$dropdown-item-base
 );
 
+// .dropdown-header
+
+// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-color: $gray-900 !default;
+
+// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-font-size: 0.875rem !default; // 14px
+
+// @deprecated as of v3.x use map $dropdown-header instead
+
+$dropdown-header-margin-top: 0.625rem !default; // 10px
+
+$dropdown-header: () !default;
+$dropdown-header: map-deep-merge(
+	(
+		color: $dropdown-header-color,
+		font-size: $dropdown-header-font-size,
+		margin-top: $dropdown-header-margin-top,
+	),
+	$dropdown-header
+);
+
+// .dropdown-subheader
+
+// @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-margin-top: 0.625rem !default; // 10px
+
+$dropdown-subheader: () !default;
+$dropdown-subheader: map-deep-merge(
+	(
+		font-size: $dropdown-subheader-font-size,
+		margin-top: $dropdown-subheader-margin-top,
+	),
+	$dropdown-subheader
+);
+
+// .dropdown-caption
+
+// @deprecated as of v3.x use map $dropdown-caption instead
+
+$dropdown-caption-color: $gray-600 !default;
+
+$dropdown-caption: () !default;
+$dropdown-caption: map-merge(
+	(
+		color: $dropdown-caption-color,
+	),
+	$dropdown-caption
+);
+
+// .dropdown-divider
+
+// @deprecated as of v3.x use map $dropdown-divider instead
+
+$dropdown-divider-bg: $dropdown-border-color !default;
+
+$dropdown-divider: () !default;
+$dropdown-divider: map-merge(
+	(
+		background-color: $dropdown-divider-bg,
+	),
+	$dropdown-divider
+);
+
+// .dropdown-section
+
+// @deprecated as of v3.x use map $dropdown-section instead
+
 $dropdown-section-custom-control-label: () !default;
 $dropdown-section-custom-control-label: map-deep-merge(
 	(
@@ -61,6 +197,8 @@ $dropdown-section-custom-control-label: map-deep-merge(
 	$dropdown-section-custom-control-label
 );
 
+// @deprecated as of v3.x use map $dropdown-section instead
+
 $dropdown-section-active-custom-control-label: () !default;
 $dropdown-section-active-custom-control-label: map-deep-merge(
 	(
@@ -69,6 +207,8 @@ $dropdown-section-active-custom-control-label: map-deep-merge(
 	$dropdown-section-active-custom-control-label
 );
 
+// @deprecated as of v3.x use map $dropdown-section instead
+
 $dropdown-section-custom-control-label-text: () !default;
 $dropdown-section-custom-control-label-text: map-deep-merge(
 	(
@@ -77,7 +217,17 @@ $dropdown-section-custom-control-label-text: map-deep-merge(
 	$dropdown-section-custom-control-label-text
 );
 
-$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-section: () !default;
+$dropdown-section: map-deep-merge(
+	(
+		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
+);
 
 // Autocomplete Dropdown Menu
 
@@ -91,7 +241,28 @@ $autocomplete-dropdown-menu: map-deep-merge(
 
 // Dropdown Action
 
+// @deprecated as of v3.x use map $dropdown-action instead
+
 $dropdown-action-toggle-font-size: 1rem !default; // 16px
-$dropdown-action-toggle-size: $btn-monospaced-size-sm !default;
+
+/// @deprecated as of v3.x use map $dropdown-action instead
 
 $dropdown-action-toggle-disabled-opacity: $btn-disabled-opacity !default;
+
+$dropdown-action-toggle-size: $btn-monospaced-size-sm !default;
+
+$dropdown-action: () !default;
+$dropdown-action: map-deep-merge(
+	(
+		dropdown-toggle: (
+			font-size: $dropdown-action-toggle-font-size,
+			height: $dropdown-action-toggle-size,
+			line-height: $dropdown-action-toggle-size,
+			width: $dropdown-action-toggle-size,
+			disabled: (
+				opacity: $dropdown-action-toggle-disabled-opacity,
+			),
+		),
+	),
+	$dropdown-action
+);

package/src/scss/atlas/variables/_forms.scss

@@ -371,11 +371,43 @@ $input-select-icon-disabled: clay-icon(
 	$input-select-icon-disabled-color
 ) !default;
 
+// select.form-control[size]
+
+// focus.option.checked: Chrome can't style text, we invert colors to make text white
+// option.checked: hack for changing the background-color
+// firefox-only: overwrite some styles for Chrome to make it match Lexicon
+
 $input-select-size: () !default;
 $input-select-size: map-deep-merge(
 	(
+		focus: (
+			option: (
+				checked: (
+					background-image: linear-gradient(#ffa700, #ffa700),
+					color: #fff,
+					filter: invert(100%),
+				),
+			),
+		),
 		option: (
-			padding: 0.25rem 0.5rem,
+			padding: 0.4375rem 0.5rem,
+			checked: (
+				background-image: linear-gradient(#{$gray-300}, #{$gray-300}),
+			),
+		),
+		firefox-only: (
+			focus: (
+				option: (
+					checked: (
+						background-image:
+							linear-gradient(#{$primary-d2}, #{$primary-d2}),
+						filter: invert(0),
+					),
+				),
+			),
+			option: (
+				padding: 0.40625rem 0.5rem,
+			),
 		),
 	),
 	$input-select-size

package/src/scss/atlas/variables/_globals.scss

@@ -392,7 +392,7 @@ $h4-font-size-mobile: null !default;
 $h5-font-size-mobile: null !default;
 $h6-font-size-mobile: null !default;
 
-$headings-margin-bottom: $spacer / 2 !default;
+$headings-margin-bottom: $spacer * 0.5 !default;
 $headings-font-family: null !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
@@ -442,6 +442,19 @@ $link-decoration: none !default;
 $link-hover-color: $primary-d2 !default;
 $link-hover-decoration: underline !default;
 
+$link: () !default;
+$link: map-deep-merge(
+	(
+		color: $link-color,
+		text-decoration: $link-decoration,
+		hover: (
+			color: $link-hover-color,
+			text-decoration: $link-hover-decoration,
+		),
+	),
+	$link
+);
+
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 
 $emphasized-link-hover-darken-percentage: 15% !default;