fix(button): correct vertical align for icons within buttons

Since we centralized the vertical-align setting for icons , now icons within buttons also get the wrong vertical align. This PR sets a valid value for them
fomantic · May 26, 2020 · defb29e · defb29e
1 parent feed67a
commit defb29e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
@@ -615,15 +615,17 @@
 .ui.button > .icon:not(.button) {
   height: @iconHeight;
   opacity: @iconOpacity;
-  margin: @iconMargin;
   transition: @iconTransition;
-  vertical-align: @iconVerticalAlign;
   color: @iconColor;
 }
 
 .ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
 .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
   margin: @iconMargin;
+  vertical-align: @iconVerticalAlign;
+}
+.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon {
+  vertical-align: @iconVerticalAlign;
 }
 .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
   margin: @rightIconMargin;

diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables
@@ -49,7 +49,7 @@
 @iconDistance: @relative6px;
 @iconColor: '';
 @iconTransition: opacity @defaultDuration @defaultEasing;
-@iconVerticalAlign: '';
+@iconVerticalAlign: baseline;
 
 @iconMargin: 0 @iconDistance 0 -(@iconDistance / 2);
 @rightIconMargin: 0 -(@iconDistance / 2) 0 @iconDistance;