fix(@clayui/css): LPS-205556 Reduce padding on dropdown-menu-select (…

…picker)
liferay · Jan 22, 2024 · ac93749 · ac93749
1 parent 09ebb3c
commit ac93749
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 5 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_dropdowns.scss b/packages/clay-css/src/scss/cadmin/components/_dropdowns.scss
@@ -178,6 +178,22 @@
 	display: block;
 }
 
+// Dropdown Menu Variants
+
+@each $key, $value in $cadmin-dropdown-menu-palette {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or starts-with($key, '#'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-dropdown-menu-variant($value);
+		}
+	}
+}
+
 // Dropdown Menu Alignment
 
 @each $cadmin-breakpoint in map-keys($cadmin-grid-breakpoints) {

diff --git a/packages/clay-css/src/scss/cadmin/variables/_dropdowns.scss b/packages/clay-css/src/scss/cadmin/variables/_dropdowns.scss
@@ -785,3 +785,109 @@ $cadmin-dropdown-alert-line-height: normal !default;
 $cadmin-dropdown-alert-margin: $cadmin-spacer * 0.5 !default;
 $cadmin-dropdown-alert-padding-x: $cadmin-dropdown-header-padding-x !default;
 $cadmin-dropdown-alert-padding-y: $cadmin-dropdown-header-padding-y !default;
+
+// Dropdown Menu Variants
+
+$cadmin-dropdown-menu-palette: () !default;
+$cadmin-dropdown-menu-palette: map-deep-merge(
+	(
+		'.dropdown-menu-select.dropdown-menu': (
+			dropdown-header: (
+				padding-bottom: 6px,
+				padding-left: 28px,
+				padding-right: 8px,
+				padding-top: 5px,
+			),
+			dropdown-subheader: (
+				padding-bottom: 7px,
+				padding-left: 28px,
+				padding-right: 8px,
+				padding-top: 7px,
+			),
+			dropdown-section: (
+				padding-left: 28px,
+				padding-right: 8px,
+			),
+			dropdown-item: (
+				padding-bottom: 6px,
+				padding-left: 28px,
+				padding-right: 8px,
+				padding-top: 5px,
+				'&.autofit-row': (
+					padding-left: 24px,
+					padding-right: 8px,
+				),
+			),
+			dropdown-item-scroll: (
+				font-size: 16px,
+				height: 32px,
+				padding: 0,
+				position: absolute,
+				text-align: center,
+				z-index: 1,
+				hover: (
+					background-color: $cadmin-dropdown-link-hover-bg,
+					background-image: none,
+					color: $cadmin-dropdown-link-hover-color,
+				),
+				focus: (
+					background-color: $cadmin-dropdown-link-hover-bg,
+					background-image: none,
+					color: $cadmin-dropdown-link-hover-color,
+				),
+				active: (
+					background-color: $cadmin-dropdown-link-active-bg,
+					background-image: none,
+					color: $cadmin-dropdown-link-active-color,
+				),
+				disabled: (
+					background-color: transparent,
+					background-image: none,
+					color: $cadmin-dropdown-link-disabled-color,
+					cursor: $cadmin-dropdown-item-disabled-cursor,
+				),
+			),
+			dropdown-item-scroll-up: (
+				background-image: (
+					linear-gradient(
+						to bottom,
+						rgba(255, 255, 255, 1) 84%,
+						rgba(255, 255, 255, 0) 100%
+					),
+				),
+				top: $cadmin-dropdown-padding-y,
+			),
+			dropdown-item-scroll-down: (
+				background-image: (
+					linear-gradient(
+						to top,
+						rgba(255, 255, 255, 1) 84%,
+						rgba(255, 255, 255, 0) 100%
+					),
+				),
+				bottom: $cadmin-dropdown-padding-y,
+			),
+			dropdown-divider: (
+				margin: 5px 0,
+			),
+			dropdown-menu-indicator-start: (
+				dropdown-item-indicator-start: (
+					left: 8px,
+					top: 8px,
+				),
+			),
+			dropdown-menu-indicator-end: (
+				dropdown-item-indicator-end: (
+					right: 8px,
+					top: 8px,
+				),
+			),
+		),
+		'.dropdown-menu-select.dropdown-menu-height-lg': (
+			inline-scroller: (
+				max-height: 432px,
+			),
+		),
+	),
+	$cadmin-dropdown-menu-palette
+);
diff --git a/packages/clay-css/src/scss/variables/_dropdowns.scss b/packages/clay-css/src/scss/variables/_dropdowns.scss
@@ -946,27 +946,27 @@ $dropdown-menu-palette: map-deep-merge(
 			dropdown-header: (
 				padding-bottom: 0.375rem,
 				padding-left: 1.75rem,
-				padding-right: 1.75rem,
+				padding-right: 0.5rem,
 				padding-top: 0.3125rem,
 			),
 			dropdown-subheader: (
 				padding-bottom: 0.4375rem,
 				padding-left: 1.75rem,
-				padding-right: 1.75rem,
+				padding-right: 0.5rem,
 				padding-top: 0.4375rem,
 			),
 			dropdown-section: (
 				padding-left: 1.75rem,
-				padding-right: 1.75rem,
+				padding-right: 0.5rem,
 			),
 			dropdown-item: (
 				padding-bottom: 0.375rem,
 				padding-left: 1.75rem,
-				padding-right: 1.75rem,
+				padding-right: 0.5rem,
 				padding-top: 0.3125rem,
 				'&.autofit-row': (
 					padding-left: 1.5rem,
-					padding-right: 1.5rem,
+					padding-right: 0.5rem,
 				),
 			),
 			dropdown-item-scroll: (