fix(@clayui/empty-state): LPD-2278 Add flexbox property to prevent im…

…age to overlap text
liferay · May 20, 2024 · 67b379c · 67b379c
1 parent c432c2c
commit 67b379c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/variables/_empty-state.scss b/packages/clay-css/src/scss/cadmin/variables/_empty-state.scss
@@ -9,6 +9,7 @@ $cadmin-c-empty-state-animation: map-deep-merge(
 		margin: 80px auto 24px,
 		max-width: 340px,
 		text-align: center,
+		flex-shrink: 0,
 	),
 	$cadmin-c-empty-state-animation
 );

diff --git a/packages/clay-css/src/scss/variables/_empty-state.scss b/packages/clay-css/src/scss/variables/_empty-state.scss
@@ -3,18 +3,21 @@ $c-empty-state: () !default;
 $c-empty-state-animation: () !default;
 $c-empty-state-animation: map-deep-merge(
 	(
-		display: block,
+		align-items: center,
+		display: flex,
+		flex-direction: column,
 		margin: 5rem auto 1.5rem,
 		max-width: 340px,
 		text-align: center,
+		flex-shrink: 0,
 	),
 	$c-empty-state-animation
 );
 
 $c-empty-state-image: () !default;
 $c-empty-state-image: map-deep-merge(
 	(
-		margin: 0 auto 2rem,
+		margin-bottom: -0.5rem,
 		max-width: 250px,
 		width: 100%,
 		word-wrap: break-word,