vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Animation for button loading

pull/1088/head
Cagatay Civici 2021-04-16 11:36:04 +03:00
parent 3e29cec8f3
commit 3e9cf7b746
36 changed files with 210 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/themes/arya-blue/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/arya-green/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/arya-orange/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/arya-purple/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/bootstrap4-light-blue/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/bootstrap4-light-purple/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/fluent-light/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/luna-amber/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/luna-blue/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/luna-green/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/luna-pink/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/md-dark-deeppurple/theme.css
View File

@ -1722,6 +1722,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/md-dark-indigo/theme.css
View File

@ -1722,6 +1722,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/md-light-deeppurple/theme.css
View File

@ -1722,6 +1722,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/md-light-indigo/theme.css
View File

@ -1722,6 +1722,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -1722,6 +1722,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/mdc-dark-indigo/theme.css
View File

@ -1722,6 +1722,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/mdc-light-deeppurple/theme.css
View File

@ -1722,6 +1722,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/mdc-light-indigo/theme.css
View File

@ -1722,6 +1722,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/nova-accent/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/nova-alt/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/nova-vue/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/nova/theme.css
View File

@ -1710,6 +1710,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/rhea/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/saga-blue/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/saga-green/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/saga-orange/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/saga-purple/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/vela-blue/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/vela-green/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/vela-orange/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

6
public/themes/vela-purple/theme.css
View File

@ -1698,6 +1698,12 @@
.p-button.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button.p-button-loading .p-button-label {
margin-left: 0.5rem;
}
.p-button.p-button-loading .p-button-icon {
margin-right: 0;
}
.p-fluid .p-button {
width: 100%;

4
src/components/button/Button.css
View File

@ -65,4 +65,8 @@
.p-buttonset .p-button:focus {
position: relative;
z-index: 1;
}
.p-button-label {
transition: all .2s;
}

4
src/components/button/Button.vue
View File

@ -52,7 +52,7 @@ export default {
},
iconClass() {
return [
this.loading ? this.loadingIcon : this.icon,
this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
'p-button-icon',
{
'p-button-icon-left': this.iconPos === 'left' && this.label,
@ -65,7 +65,7 @@ export default {
badgeStyleClass() {
return [
'p-badge p-component', this.badgeClass, {
'p-badge-no-gutter': this.badge && String(this.badge).length === 1
'p-badge-no-gutter': this.badge && String(this.badge).length === 1
}]
},
disabled() {