From 5523b67fe3994d2aa9b63031fa3d5acc4181d503 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Mon, 19 Jul 2021 14:29:10 -0700
Subject: [PATCH 1/2] fix(@clayui/css): Mixins update `sheet-footer-btn-block`
 to use `clay-css` pattern

issue #3987
---
 .../src/scss/cadmin/variables/_sheets.scss    | 16 +++++++++-
 packages/clay-css/src/scss/mixins/_sheet.scss | 29 ++++++++++++++-----
 .../clay-css/src/scss/variables/_sheets.scss  | 16 +++++++++-
 3 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/packages/clay-css/src/scss/cadmin/variables/_sheets.scss b/packages/clay-css/src/scss/cadmin/variables/_sheets.scss
index a77c211bae..e5e9f68921 100644
--- 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
index f48c2928ae..ef52aa185b 100644
--- 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
index 4da9ce9885..4328abc98d 100644
--- 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
 );

From 4280c6f5b9f04def3a2f204dce14935460b56e85 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Mon, 19 Jul 2021 15:09:44 -0700
Subject: [PATCH 2/2] fix(@clayui/css): Mixins update
 `clay-loading-animation-variant` to use `clay-css` pattern

fixes #3987
---
 .../src/scss/atlas/variables/_loaders.scss    |  4 +-
 .../src/scss/cadmin/variables/_loaders.scss   | 22 ++++-
 .../clay-css/src/scss/mixins/_loaders.scss    | 84 ++++++++++---------
 .../clay-css/src/scss/variables/_loaders.scss | 22 ++++-
 4 files changed, 84 insertions(+), 48 deletions(-)

diff --git a/packages/clay-css/src/scss/atlas/variables/_loaders.scss b/packages/clay-css/src/scss/atlas/variables/_loaders.scss
index b483ecaa62..ac64d37772 100644
--- a/packages/clay-css/src/scss/atlas/variables/_loaders.scss
+++ b/packages/clay-css/src/scss/atlas/variables/_loaders.scss
@@ -1,7 +1,9 @@
 $loading-animation: () !default;
 $loading-animation: map-deep-merge(
 	(
-		color: $gray-600,
+		after: (
+			color: $gray-600,
+		),
 	),
 	$loading-animation
 );
diff --git a/packages/clay-css/src/scss/cadmin/variables/_loaders.scss b/packages/clay-css/src/scss/cadmin/variables/_loaders.scss
index bc83d549d6..cab22e8c18 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_loaders.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_loaders.scss
@@ -7,8 +7,20 @@ $cadmin-loading-icon-font-size-sm: 20px !default; // 20px
 $cadmin-loading-animation: () !default;
 $cadmin-loading-animation: map-deep-merge(
 	(
-		animation-name: loading-animation,
-		color: $cadmin-gray-600,
+		after: (
+			animation: 1.2s ease-out infinite,
+			animation-name: loading-animation,
+			border-radius: 50%,
+			color: $cadmin-gray-600,
+			content: '',
+			display: block,
+			height: 1em,
+			left: 0,
+			position: absolute,
+			top: 0,
+			transform: scale(0.33334),
+			width: 1em,
+		),
 	),
 	$cadmin-loading-animation
 );
@@ -16,8 +28,10 @@ $cadmin-loading-animation: map-deep-merge(
 $cadmin-loading-animation-light: () !default;
 $cadmin-loading-animation-light: map-deep-merge(
 	(
-		animation-name: loading-animation-light,
-		color: $cadmin-white,
+		after: (
+			animation-name: loading-animation-light,
+			color: $cadmin-white,
+		),
 	),
 	$cadmin-loading-animation-light
 );
diff --git a/packages/clay-css/src/scss/mixins/_loaders.scss b/packages/clay-css/src/scss/mixins/_loaders.scss
index 537ff781dc..1cb88d568e 100644
--- a/packages/clay-css/src/scss/mixins/_loaders.scss
+++ b/packages/clay-css/src/scss/mixins/_loaders.scss
@@ -37,18 +37,8 @@
 	$enabled: setter(map-get($map, enabled), true);
 	$mixin-name: 'clay-loading-animation-variant';
 
-	$border-radius: setter(map-get($map, border-radius), 50%);
-	$color: setter(
-		map-get($map, color),
-		if(variable-exists(secondary), $secondary, $cadmin-secondary)
-	);
-	$transform: setter(map-get($map, transform), scale(0.33334));
-
-	$animation: setter(map-get($map, animation), 1.2s ease-out infinite);
-	$animation-name: required(
-		map-get($map, animation-name),
-		'The property `animation-name` in `#{$mixin-name}` is required!'
-	);
+	$after: setter(map-get($map, after), ());
+	$after-color: setter(map-get($map, color), map-get($after, color));
 
 	$ball-0-scale: setter(map-get($map, ball-0-scale), 0em);
 	$ball-1-scale: setter(map-get($map, ball-1-scale), -0.1em);
@@ -66,54 +56,70 @@
 
 	$ball-0-color: setter(
 		map-get($map, ball-0-color),
-		rgba($color, $ball-0-alpha)
+		rgba($after-color, $ball-0-alpha)
 	);
 	$ball-1-color: setter(
 		map-get($map, ball-1-color),
-		rgba($color, $ball-1-alpha)
+		rgba($after-color, $ball-1-alpha)
 	);
 	$ball-2-color: setter(
 		map-get($map, ball-2-color),
-		rgba($color, $ball-2-alpha)
+		rgba($after-color, $ball-2-alpha)
 	);
 	$ball-3-color: setter(
 		map-get($map, ball-3-color),
-		rgba($color, $ball-3-alpha)
+		rgba($after-color, $ball-3-alpha)
 	);
 	$ball-4-color: setter(
 		map-get($map, ball-4-color),
-		rgba($color, $ball-4-alpha)
+		rgba($after-color, $ball-4-alpha)
 	);
 	$ball-5-color: setter(
 		map-get($map, ball-5-color),
-		rgba($color, $ball-5-alpha)
+		rgba($after-color, $ball-5-alpha)
+	);
+
+	$after: map-merge(
+		$after,
+		(
+			animation:
+				setter(map-get($map, animation), map-get($after, animation)),
+			animation-name:
+				required(
+					setter(
+						map-get($map, animation-name),
+						map-get($after, animation-name)
+					),
+					'The property `animation-name` in `#{$mixin-name}` is required!'
+				),
+			border-radius:
+				setter(
+					map-get($map, border-radius),
+					map-get($after, border-radius)
+				),
+			box-shadow:
+				setter(
+					map-get($map, box-shadow),
+					map-get($after, box-shadow),
+					#{0 -1em 0 $ball-0-scale $ball-0-color,
+					1em -0.5em 0 $ball-5-scale $ball-5-color,
+					1em 0.5em 0 $ball-4-scale $ball-4-color,
+					0 1em 0 $ball-3-scale $ball-3-color,
+					-1em 0.5em 0 $ball-2-scale $ball-2-color,
+					-1em -0.5em 0 $ball-1-scale $ball-1-color}
+				),
+			color: $after-color,
+			transform:
+				setter(map-get($map, transform), map-get($after, transform)),
+		)
 	);
 
 	@if ($enabled) {
 		&:after {
-			animation: $animation;
-			animation-name: $animation-name;
-			border-radius: $border-radius;
-			content: '';
-
-			// Box shadow needs this specific order for proper animation
-
-			box-shadow: 0 -1em 0 $ball-0-scale $ball-0-color,
-				1em -0.5em 0 $ball-5-scale $ball-5-color,
-				1em 0.5em 0 $ball-4-scale $ball-4-color,
-				0 1em 0 $ball-3-scale $ball-3-color,
-				-1em 0.5em 0 $ball-2-scale $ball-2-color,
-				-1em -0.5em 0 $ball-1-scale $ball-1-color;
-			display: block;
-			height: 1em;
-			left: 0;
-			position: absolute;
-			top: 0;
-			transform: $transform;
-			width: 1em;
+			@include clay-css($after);
 		}
 
-		@keyframes #{$animation-name} {
+		@keyframes #{map-get($after, animation-name)} {
 			// Box shadows need this specific order for proper animation
 
 			0%,
diff --git a/packages/clay-css/src/scss/variables/_loaders.scss b/packages/clay-css/src/scss/variables/_loaders.scss
index ec1b49060c..ed9706123b 100644
--- a/packages/clay-css/src/scss/variables/_loaders.scss
+++ b/packages/clay-css/src/scss/variables/_loaders.scss
@@ -7,8 +7,20 @@ $loading-icon-font-size-sm: 1.25rem !default; // 20px
 $loading-animation: () !default;
 $loading-animation: map-deep-merge(
 	(
-		animation-name: loading-animation,
-		color: $gray-900,
+		after: (
+			animation: 1.2s ease-out infinite,
+			animation-name: loading-animation,
+			border-radius: 50%,
+			color: $gray-900,
+			content: '',
+			display: block,
+			height: 1em,
+			left: 0,
+			position: absolute,
+			top: 0,
+			transform: scale(0.33334),
+			width: 1em,
+		),
 	),
 	$loading-animation
 );
@@ -16,8 +28,10 @@ $loading-animation: map-deep-merge(
 $loading-animation-light: () !default;
 $loading-animation-light: map-deep-merge(
 	(
-		animation-name: loading-animation-light,
-		color: $white,
+		after: (
+			animation-name: loading-animation-light,
+			color: $white,
+		),
 	),
 	$loading-animation-light
 );