chore: Refactor button styles (#2259)
This commit is contained in:
parent
af8e681f2a
commit
c681e8a01b
32 changed files with 490 additions and 260 deletions
|
@ -1,13 +1,7 @@
|
|||
<template>
|
||||
<button
|
||||
class="button"
|
||||
:class="[
|
||||
variant,
|
||||
size,
|
||||
colorScheme,
|
||||
classNames,
|
||||
isDisabled ? 'disabled' : '',
|
||||
]"
|
||||
:class="buttonClasses"
|
||||
:disabled="isDisabled || isLoading"
|
||||
@click="handleClick"
|
||||
>
|
||||
|
@ -51,6 +45,28 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isExpanded: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
variantClasses() {
|
||||
if (this.variant.includes('link')) {
|
||||
return `clear ${this.variant}`;
|
||||
}
|
||||
return this.variant;
|
||||
},
|
||||
buttonClasses() {
|
||||
return [
|
||||
this.variantClasses,
|
||||
this.size,
|
||||
this.colorScheme,
|
||||
this.classNames,
|
||||
this.isDisabled ? 'disabled' : '',
|
||||
this.isExpanded ? 'expanded' : '',
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClick(evt) {
|
||||
|
@ -59,20 +75,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.link {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.spinner {
|
||||
padding: 0 var(--space-small);
|
||||
}
|
||||
.icon + .button__content {
|
||||
padding-left: var(--space-small);
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue