Merge pull request #5848 from pat270/LPD-30959

fix(@clayui/css): LPD-30959 Adds $list-group Sass map for more custom…
liferay · Jul 29, 2024 · 44cda22 · 44cda22
2 parents 02dba4d + 2fa2486
commit 44cda22
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 26 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_list-group.scss b/packages/clay-css/src/scss/cadmin/components/_list-group.scss
@@ -18,21 +18,10 @@
 }
 
 .list-group {
-	@include border-radius($cadmin-list-group-border-radius);
-	@include box-shadow($cadmin-list-group-box-shadow);
-
-	color: $cadmin-list-group-color;
-	display: flex;
-	flex-direction: column;
-	font-size: $cadmin-list-group-font-size;
-	margin-bottom: $cadmin-list-group-margin-bottom;
-	margin-top: $cadmin-list-group-margin-top;
-	padding-left: 0;
+	@include clay-css($cadmin-list-group);
 
 	.list-group {
-		@if ($cadmin-list-group-box-shadow != null) {
-			@include box-shadow(none);
-		}
+		@include clay-css(map-get($cadmin-list-group, list-group));
 	}
 }
 

diff --git a/packages/clay-css/src/scss/cadmin/variables/_list-group.scss b/packages/clay-css/src/scss/cadmin/variables/_list-group.scss
@@ -224,6 +224,25 @@ $cadmin-list-group-link-color: $cadmin-gray-900 !default;
 $cadmin-list-group-link-hover-color: $cadmin-list-group-link-color !default;
 $cadmin-list-group-link-active-color: $cadmin-list-group-link-color !default;
 
+$cadmin-list-group: () !default;
+$cadmin-list-group: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($cadmin-list-group-border-radius),
+		box-shadow: clay-enable-shadows($cadmin-list-group-box-shadow),
+		color: $cadmin-list-group-color,
+		display: flex,
+		flex-direction: column,
+		font-size: $cadmin-list-group-font-size,
+		margin-bottom: $cadmin-list-group-margin-bottom,
+		margin-top: $cadmin-list-group-margin-top,
+		padding-left: 0,
+		list-group: (
+			box-shadow: if($cadmin-list-group-box-shadow != null, none, null),
+		),
+	),
+	$cadmin-list-group
+);
+
 // List Group Notification
 
 $cadmin-list-group-notification-item-border-bottom-color: $cadmin-list-group-border-color !default;

diff --git a/packages/clay-css/src/scss/components/_list-group.scss b/packages/clay-css/src/scss/components/_list-group.scss
@@ -18,21 +18,10 @@
 }
 
 .list-group {
-	@include border-radius($list-group-border-radius);
-	@include box-shadow($list-group-box-shadow);
-
-	color: $list-group-color;
-	display: flex;
-	flex-direction: column;
-	font-size: $list-group-font-size;
-	margin-bottom: $list-group-margin-bottom;
-	margin-top: $list-group-margin-top;
-	padding-left: 0;
+	@include clay-css($list-group);
 
 	.list-group {
-		@if ($list-group-box-shadow != null) {
-			@include box-shadow(none);
-		}
+		@include clay-css(map-get($list-group, list-group));
 	}
 }
 

diff --git a/packages/clay-css/src/scss/variables/_list-group.scss b/packages/clay-css/src/scss/variables/_list-group.scss
@@ -188,6 +188,25 @@ $list-group-link-color: null !default;
 $list-group-link-hover-color: null !default;
 $list-group-link-active-color: $white !default;
 
+$list-group: () !default;
+$list-group: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($list-group-border-radius),
+		box-shadow: clay-enable-shadows($list-group-box-shadow),
+		color: $list-group-color,
+		display: flex,
+		flex-direction: column,
+		font-size: $list-group-font-size,
+		margin-bottom: $list-group-margin-bottom,
+		margin-top: $list-group-margin-top,
+		padding-left: 0,
+		list-group: (
+			box-shadow: if($list-group-box-shadow != null, none, null),
+		),
+	),
+	$list-group
+);
+
 // List Group Item Variants
 
 $list-group-item-theme-colors: () !default;