#7023 Fix loading icon in button

Author: jlukic

src/definitions/elements/button.less

@@ -879,6 +879,23 @@
   transform: translateY(-50%);
 }
 
+/* Loading */
+.ui.labeled.icon.button > .icon.loading {
+  animation: none;
+}
+.ui.labeled.icon.button > .icon.loading:before {
+  animation: labeled-button-icon-loading @loadingIconDuration linear infinite;
+}
+
+@keyframes labeled-button-icon-loading {
+  from {
+    transform: translateY(-50%) rotate(0deg);
+  }
+  to {
+    transform: translateY(-50%) rotate(360deg);
+  }
+}
+
 .ui.labeled.icon.buttons .button > .icon {
   border-radius: 0em;
 }

src/definitions/elements/icon.less

@@ -73,16 +73,16 @@ i.icon.loading {
   line-height: 1;
 }
 
-i.icon.loading:before {
+i.icon.loading {
   animation: icon-loading @loadingDuration linear infinite;
 }
 
 @keyframes icon-loading {
   from {
-    transform: translateY(-50%) rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-    transform: translateY(-50%) rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 

src/themes/default/elements/button.variables

@@ -162,6 +162,7 @@
 
 /* Icon */
 @iconButtonOpacity: 0.9;
+@loadingIconDuration: 2s;
 
 /* Labeled */
 @labeledLabelFontSize: @medium;