From cb3285e22f26058114a29b3ed5a09ae3b0c1097e Mon Sep 17 00:00:00 2001 From: Ilza Medeiros Date: Mon, 20 May 2024 17:28:14 -0300 Subject: [PATCH] fix(@clayui/empty-state): LPD-2278 Add flexbox property to prevent image to overlap text --- .../clay-css/src/scss/cadmin/variables/_empty-state.scss | 1 + packages/clay-css/src/scss/variables/_empty-state.scss | 7 +++++-- 2 files changed, 6 insertions(+), 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 index 5ded3963a6..f2d54b5113 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_empty-state.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_empty-state.scss @@ -6,6 +6,7 @@ $cadmin-c-empty-state-animation: map-deep-merge( align-items: center, display: flex, flex-direction: column, + flex-shrink: 0, margin: 80px auto 24px, max-width: 340px, text-align: center, diff --git a/packages/clay-css/src/scss/variables/_empty-state.scss b/packages/clay-css/src/scss/variables/_empty-state.scss index 5fdcbd97f1..19ef728da3 100644 --- a/packages/clay-css/src/scss/variables/_empty-state.scss +++ b/packages/clay-css/src/scss/variables/_empty-state.scss @@ -3,7 +3,10 @@ $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, + flex-shrink: 0, margin: 5rem auto 1.5rem, max-width: 340px, text-align: center, @@ -14,7 +17,7 @@ $c-empty-state-animation: map-deep-merge( $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,