Fixed button loading animation

2021-04-16 14:51:20 +03:00 · 2021-04-16 14:51:20 +03:00 · c99e242eb7
parent deaf7367da
commit c99e242eb7
35 changed files with 70 additions and 69 deletions
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
 }

--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@ -47,7 +47,8 @@ export default {
                'p-button-icon-only': this.icon && !this.label,
                'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                'p-disabled': this.$attrs.disabled || this.loading,
-                'p-button-loading': this.loading
+                'p-button-loading': this.loading,
+                'p-button-loading-label-only': this.loading && !this.icon && this.label
            }
        },
        iconClass() {