fix(icon): vertical position for unsized icons and sized text

This PR corrects/partly reverts the vertical alignment of unsized icons which unfortunately breaks the vertical alignment in most cases when icons are just used beside inline texts which is probably the most used case. I also recognized the text element needs the same line-height setting to avoid overlapping which is also fixed now.
fomantic · Jun 12, 2020 · 4ac35a7 · 4ac35a7
1 parent 2cd5e9c
commit 4ac35a7
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/src/definitions/elements/icon.less b/src/definitions/elements/icon.less
@@ -288,15 +288,15 @@ each(@colors, {
 i.icon,
 i.icons {
   font-size: @medium;
-  line-height: 1;
-  vertical-align: middle;
+  line-height: @lineHeight;
 }
 & when not (@variationIconSizes = false) {
   each(@variationIconSizes, {
     @s: @@value;
     i.@{value}.@{value}.@{value}.icon,
     i.@{value}.@{value}.@{value}.icons {
       font-size: @s;
+      vertical-align: middle;
     }
   })
 }

diff --git a/src/definitions/elements/text.less b/src/definitions/elements/text.less
@@ -22,6 +22,9 @@
 /*******************************
              Text
 *******************************/
+span.ui.text {
+  line-height: @lineHeight;
+}
 
 each(@colors, {
   @color: replace(@key, '@', '');

diff --git a/src/themes/default/elements/icon.variables b/src/themes/default/elements/icon.variables
@@ -53,6 +53,7 @@
 @width: @iconWidth;
 @height: 1em;
 @distanceFromText: 0.25rem;
+@lineHeight: 1;
 
 
 /* Variations */

diff --git a/src/themes/default/elements/text.variables b/src/themes/default/elements/text.variables
@@ -5,6 +5,8 @@
 /*-------------------
        Element
 --------------------*/
+@lineHeight: 1;
+
 @mini: 0.4em;
 @tiny: 0.5em;
 @small: 0.75em;