fix(button): height fixed changed to min-height

zepdev · May 7, 2019 · 8f7c221 · 8f7c221
1 parent bc400cf
commit 8f7c221
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/src/elements/button/ButtonPage.jsx b/src/elements/button/ButtonPage.jsx
@@ -81,32 +81,50 @@ function ButtonPage() {
         </div>
         <p>Icon</p>
         <div className="theme-cat" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-primary">
+          <button
+            type="button"
+            className="zep-button zep-button-primary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-zeppelin" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-primary">
+          <button
+            type="button"
+            className="zep-button zep-button-primary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-rental" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-primary">
+          <button
+            type="button"
+            className="zep-button zep-button-primary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-cat" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-secondary">
+          <button
+            type="button"
+            className="zep-button zep-button-secondary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-zeppelin" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-secondary">
+          <button
+            type="button"
+            className="zep-button zep-button-secondary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-rental" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-secondary">
+          <button
+            type="button"
+            className="zep-button zep-button-secondary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>

diff --git a/src/elements/button/_button.scss b/src/elements/button/_button.scss
@@ -10,7 +10,7 @@
     text-align: center;
     vertical-align: top;
     cursor: pointer;
-    height: 3rem;
+    min-height: 3rem;
     padding: 0;
   }
   .#{$prefix}button-primary {
@@ -107,6 +107,10 @@
     }
   }
 
+  .#{$prefix}button-icon {
+    min-width: 3rem;
+  }
+
   .#{$prefix}button__text {
     @extend %typo-special-4;
     display: inline-block;
@@ -116,7 +120,6 @@
   .#{$prefix}button__icon {
     height: 1.375rem;
     width: 1.375rem;
-    margin: 0.8125rem;
   }
 
   .#{$prefix}button__text--tertiary {
@@ -137,7 +140,7 @@
   }
 
   .#{$prefix}button--small {
-    height: 2.5rem;
+    min-height: 2.5rem;
     .#{$prefix}button__text {
       @extend %typo-special-3;
       display: inline-block;