fix(Modal): fix close button alignment and color (#2973)

rsuite · Dec 15, 2022 · b1eb5b4 · b1eb5b4 · vercel · Dec 15, 2022
1 parent 20af7a3
commit b1eb5b4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git 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
@@ -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;