Button fixes to handle icons without margin adjustments

3 files changed, 18 insertions, 16 deletions

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index cfd859c..48ac2a6 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -4,9 +4,10 @@
 @include iro.props-namespace('action-button') {
     @include iro.props-store((
         --dims: (
-            --pad-x:    fn.global-dim(--size --125),
-            --pad-y:    fn.global-dim(--size --125),
-            --rounding: 3px,
+            --line-height: 1.4,
+            --pad-x:       fn.global-dim(--size --100),
+            --pad-y:       fn.global-dim(--size --85),
+            --rounding:    3px,
         ),
     ), 'dims');
 
@@ -80,7 +81,7 @@
         border-radius:    fn.dim(--rounding);
         background-color: fn.color(--disabled --bg);
         color:            fn.color(--disabled --label);
-        line-height:      1;
+        line-height:      fn.dim(--line-height);
         text-align:       center;
         text-decoration:  none;
         text-overflow:    ellipsis;
@@ -212,8 +213,9 @@
         }
     
         @include iro.bem-modifier('round') {
-            padding-right: fn.dim(--pad-y);
-            padding-left:  fn.dim(--pad-y);
+            width:         calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
+            padding-right: 0;
+            padding-left:  0;
             border-radius: 100em;
         }
     }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index b830475..7cc24fa 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -43,13 +43,14 @@
 @include iro.props-namespace('button') {
     @include iro.props-store((
         --dims: (
-            --pad-x:    fn.global-dim(--size --225),
-            --pad-y:    fn.global-dim(--size --100),
-            --rounding: 10em,
+            --line-height: 1.4,
+            --pad-x:       fn.global-dim(--size --225),
+            --pad-y:       fn.global-dim(--size --65),
+            --rounding:    10em,
 
             --lg: (
                 --pad-x: fn.global-dim(--size --300),
-                --pad-y: fn.global-dim(--size --150),
+                --pad-y: fn.global-dim(--size --100),
             ),
         ),
     ), 'dims');
@@ -133,7 +134,7 @@
         box-shadow:       fn.color(--any --disabled --shadow);
         color:            fn.color(--any --disabled --label);
         font-weight:      500;
-        line-height:      1;
+        line-height:      fn.dim(--line-height);
         text-align:       center;
         text-decoration:  none;
         vertical-align:   top;
@@ -169,8 +170,9 @@
         }
     
         @include iro.bem-modifier('round') {
-            padding-right: fn.dim(--pad-y);
-            padding-left:  fn.dim(--pad-y);
+            width:         calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
+            padding-right: 0;
+            padding-left:  0;
             border-radius: 100em;
         }
     }
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 0522d4b..5c4bfab 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -6,8 +6,7 @@
         --dims: (
             --stroke:  1.5px,
             --size:    calc(1 / 14 * 16em),
-            --margin:  calc((1em - fn.dim(--size, null)) * .5),
-            --valign:  -.14em,
+            --valign:  -.2em,
         )
     ), 'dims');
 
@@ -15,7 +14,6 @@
         display:         inline;
         width:           fn.dim(--size);
         height:          fn.dim(--size);
-        margin:          fn.dim(--margin);
         stroke-width:    fn.dim(--stroke);
         stroke-linecap:  round;
         stroke-linejoin: round;