From b1eb5b406a29788290a704414cc5a19b115690c7 Mon Sep 17 00:00:00 2001 From: Doma Date: Thu, 15 Dec 2022 15:27:00 +0800 Subject: [PATCH] fix(Modal): fix close button alignment and color (#2973) --- src/Modal/styles/index.less | 12 ++++++------ src/styles/variables.less | 5 +++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/Modal/styles/index.less b/src/Modal/styles/index.less index f0dfc489d..2066e79e3 100644 --- a/src/Modal/styles/index.less +++ b/src/Modal/styles/index.less @@ -3,6 +3,7 @@ // // Modals +// Figma: https://www.figma.com/file/uEq9QBplcKUYZrcWWA3RK2/NXT-UI?node-id=0%3A1348&t=H5h3Dd3AnJVgbAbz-4 // -------------------------------------------------- // Modal background @@ -100,17 +101,16 @@ padding-right: @line-height-computed; .rs-modal-header-close { - // button width the same to height - @padding-right: 4px; - position: absolute; right: @modal-content-padding; top: @modal-content-padding; font-size: @modal-close-btn-size; - line-height: @modal-close-btn-line-height; color: @modal-close-btn-color; - width: @line-height-computed; - padding: 0 @padding-right; + padding: 0; + + &:hover { + color: @modal-close-btn-hover-color; + } } } diff --git a/src/styles/variables.less b/src/styles/variables.less index a2651fa4c..1b8d823b8 100644 --- a/src/styles/variables.less +++ b/src/styles/variables.less @@ -520,7 +520,8 @@ @modal-close-btn-size: @font-size-small; @modal-close-btn-line-height: @line-height-small; -@modal-close-btn-color: var(--rs-text-primary); +@modal-close-btn-color: var(--rs-text-secondary); +@modal-close-btn-hover-color: var(--rs-text-primary); // Modal sizes @modal-lg: 968px; @@ -540,7 +541,7 @@ @drawer-close-btn-size: @font-size-small; @drawer-close-btn-line-height: @line-height-small; -@drawer-close-btn-color: @modal-close-btn-color; +@drawer-close-btn-color: var(--rs-text-primary); // Drawer sizes @drawer-horizontal-lg: @modal-lg;