fix(@clayui/css): Mixins update sheet-footer-btn-block to use `clay…

…-css` pattern issue #3987
liferay · Jul 19, 2021 · 5523b67 · 5523b67
1 parent 64c20ca
commit 5523b67
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/variables/_sheets.scss b/packages/clay-css/src/scss/cadmin/variables/_sheets.scss
@@ -51,7 +51,21 @@ $cadmin-sheet-footer-btn-block-sm-down: () !default;
 $cadmin-sheet-footer-btn-block-sm-down: map-deep-merge(
 	(
 		breakpoint-down: sm,
-		btn-margin-bottom-mobile: 16px,
+		mobile: (
+			display: block,
+			btn: (
+				display: block,
+				margin-bottom: 16px,
+				width: 100%,
+			),
+			btn-group: (
+				display: block,
+			),
+			btn-group-item: (
+				display: block,
+				margin-right: 0,
+			),
+		),
 	),
 	$cadmin-sheet-footer-btn-block-sm-down
 );

diff --git a/packages/clay-css/src/scss/mixins/_sheet.scss b/packages/clay-css/src/scss/mixins/_sheet.scss
@@ -17,25 +17,38 @@
 
 	$breakpoint-down: map-get($map, breakpoint-down);
 
-	$btn-margin-bottom-mobile: map-get($map, btn-margin-bottom-mobile);
+	$mobile: setter(map-get($map, mobile), ());
+
+	$btn-mobile: setter(map-get($mobile, btn), ());
+	$btn-mobile: map-merge(
+		$btn-mobile,
+		(
+			margin-bottom:
+				setter(
+					map-get($map, btn-margin-bottom-mobile),
+					map-get($btn-mobile, margin-bottom)
+				),
+		)
+	);
+
+	$btn-group-mobile: setter(map-get($mobile, btn-group), ());
+
+	$btn-group-item-mobile: setter(map-get($mobile, btn-group-item), ());
 
 	@if ($enabled) {
 		@include media-breakpoint-down($breakpoint-down) {
-			display: block;
+			@include clay-css($mobile);
 
 			.btn {
-				display: block;
-				margin-bottom: $btn-margin-bottom-mobile;
-				width: 100%;
+				@include clay-css($btn-mobile);
 			}
 
 			.btn-group {
-				display: block;
+				@include clay-css($btn-group-mobile);
 			}
 
 			.btn-group-item {
-				display: block;
-				margin-right: 0;
+				@include clay-css($btn-group-item-mobile);
 			}
 		}
 	}

diff --git a/packages/clay-css/src/scss/variables/_sheets.scss b/packages/clay-css/src/scss/variables/_sheets.scss
@@ -56,7 +56,21 @@ $sheet-footer-btn-block-sm-down: () !default;
 $sheet-footer-btn-block-sm-down: map-deep-merge(
 	(
 		breakpoint-down: sm,
-		btn-margin-bottom-mobile: 1rem,
+		mobile: (
+			display: block,
+			btn: (
+				display: block,
+				margin-bottom: 1rem,
+				width: 100%,
+			),
+			btn-group: (
+				display: block,
+			),
+			btn-group-item: (
+				display: block,
+				margin-right: 0,
+			),
+		),
 	),
 	$sheet-footer-btn-block-sm-down
 );