fix(vertical-align): 修复全局 icon 和 text 的 vertical align 问题

DaoCloud · Apr 28, 2018 · adc9cfa · adc9cfa
1 parent 51be723
commit adc9cfa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/components/common.scss b/src/components/common.scss
@@ -56,14 +56,12 @@ svg.icon {
   width: 16px;
   height: 16px;
 
-  // 为了配合解决 dao-btn 在最新版 firefox 下面 svg 偏下的问题
-  vertical-align: top;
+  vertical-align: middle;
 
   fill: currentColor;
   & + .text {
     display: inline-block;
 
-    // 为了解决 dao-btn 在最新版 firefox 下面 svg 偏下的问题
-    vertical-align: top;
+    vertical-align: middle;
   }
 }
diff --git a/src/components/dao-button/dao-button.scss b/src/components/dao-button/dao-button.scss
@@ -68,6 +68,14 @@
     pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
     cursor: $cursor-disabled;
   }
+  svg.icon {
+    // 为了配合解决 dao-btn 在最新版 firefox 下面 svg 偏下的问题
+    vertical-align: top;
+    & + .text {
+      // 为了解决 dao-btn 在最新版 firefox 下面 svg 偏下的问题
+      vertical-align: top;
+    }
+  }
 }
 
 a.dao-btn {

diff --git a/src/components/dao-input/dao-input.scss b/src/components/dao-input/dao-input.scss
@@ -109,8 +109,6 @@
     &.message-bottom {
       flex-direction: column;
       align-items: flex-start;
-      // 统一 vertical-align，解决没有垂直对齐的问题
-      vertical-align: top;
       .dao-input-message {
         margin: 6px 0 0;
       }
@@ -397,8 +395,7 @@
     word-break: break-all;
     margin-left: 10px;
     > span {
-      // 统一 vertical-align，解决没有垂直对齐的问题
-      vertical-align: top;
+      vertical-align: middle;
     }
     @at-root .no-message-icon & > .icon {
       display: none;