Vars | Rollback on rem unit for line-height

Wisembly · Mar 11, 2015 · 7518565 · 7518565
1 parent 851c954
commit 7518565
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 47 deletions.
diff --git a/dist/app.css b/dist/app.css
diff --git a/src/scss/components/avatar/_base.scss b/src/scss/components/avatar/_base.scss
@@ -1,14 +1,14 @@
 .Avatar {
-  width: $base-line-height * 3 * 1rem;
-  height: $base-line-height * 3 * 1rem;
-  line-height: $base-line-height * 3 * 1rem;
+  display: inline-block;
+  width: $base-line-height * 3;
+  height: $base-line-height * 3;
+  line-height: $base-line-height * 3;
   border-radius: 50%;
   overflow: hidden;
-  display: inline-block;
 }
 
 .Avatar-initials {
-  height: $base-line-height * 3 * 1rem;
+  height: $base-line-height * 3;
   font-size: $base-font-size;
   text-align: center;
   color: $white;

diff --git a/src/scss/components/avatar/_sizes.scss b/src/scss/components/avatar/_sizes.scss
@@ -1,28 +1,28 @@
 .Avatar--xs {
-  width: $base-line-height * 1rem;
-  height: $base-line-height * 1rem;
+  width: $base-line-height;
+  height: $base-line-height;
   font-size: $font-size--s;
-  line-height: $base-line-height * 1rem;
+  line-height: $base-line-height;
 
   &.Avatar-initials {
-    height: $base-line-height * 1rem;
+    height: $base-line-height;
   }
 }
 
 .Avatar--s {
-  width: $base-line-height * 2 * 1rem;
-  height: $base-line-height * 2 * 1rem;
+  width: $base-line-height * 2;
+  height: $base-line-height * 2;
   font-size: $font-size--s;
-  line-height: $base-line-height * 2 * 1rem;
+  line-height: $base-line-height * 2;
 
   &.Avatar-initials {
-    height: $base-line-height * 2 * 1rem;
+    height: $base-line-height * 2;
   }
 }
 
 .Avatar--l {
-  width: $base-line-height * 4 * 1rem;
-  height: $base-line-height * 4 * 1rem;
+  width: $base-line-height * 4;
+  height: $base-line-height * 4;
   font-size: $font-size--l;
-  line-height: $base-line-height * 4 * 1rem;
+  line-height: $base-line-height * 4;
 }
diff --git a/src/scss/utils/_vars.scss b/src/scss/utils/_vars.scss
@@ -9,7 +9,7 @@ $font-size--l: rem(17px) !default;
 $font-size--xl: rem(24px) !default;
 $font-size--xxl: rem(27px) !default;
 
-$base-line-height: 22/14 !default; // Sketch line-height * 2 values ~= 1,3235
+$base-line-height: rem($base-font-size * 22/14) !default; // Sketch line-height * 2 values ~= 1,57
 $line-height--s: $base-line-height / 2;
 $line-height--l: $base-line-height * 2;