fix(button, icon): loading icon position in button was not rotating a…

…round center
fomantic · Jan 5, 2019 · 1f71602 · 1f71602
1 parent 4c9da88
commit 1f71602
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 14 deletions.
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
@@ -983,6 +983,8 @@
   border-top-left-radius: inherit;
   border-bottom-left-radius: inherit;
   text-align: center;
+  animation:none;
+  padding: @verticalPadding 0 @verticalPadding 0;
 
   margin: @labeledIconMargin;
   width: @labeledIconWidth;
@@ -1011,11 +1013,10 @@
 .ui.labeled.icon.buttons > .button > .icon:after,
 .ui.labeled.icon.button > .icon:after {
   display: block;
-  position: absolute;
+  position: relative;
   width: 100%;
-  top: 50%;
+  top: 0;
   text-align: center;
-  transform: translateY(-50%);
 }
 
 .ui.labeled.icon.buttons .button > .icon {
@@ -1045,7 +1046,10 @@
   padding-right: @horizontalPadding !important;
 }
 
-
+/* Loading Icon in Labeled Button */
+.ui.labeled.icon.button > .loading.icon:before {
+  animation: loader 2s linear infinite;
+}
 
 
 /*--------------

diff --git a/src/definitions/elements/icon.less b/src/definitions/elements/icon.less
@@ -70,15 +70,7 @@ i.icon:before {
 i.icon.loading {
   height: 1em;
   line-height: 1;
-  animation: icon-loading @loadingDuration linear infinite;
-}
-@keyframes icon-loading {
- from {
-    transform: rotate(0deg);
- }
- to {
-    transform: rotate(360deg);
- }
+  animation: loader @loadingDuration linear infinite;
 }
 
 /*******************************

diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables
@@ -44,7 +44,7 @@
 ;
 
 /* Icon */
-@iconHeight: @relativeTiny;
+@iconHeight: auto;
 @iconOpacity: 0.8;
 @iconDistance: @relative6px;
 @iconColor: '';