KevinMidboe/planetposen
1
0
Fork 0
mirror of https://github.com/KevinMidboe/planetposen.git synced 2025-10-29 17:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Button has xs prop and size.

Browse Source
This commit is contained in:
Kevin
2020-07-19 19:18:28 +02:00
parent 0c94c75c63
commit 7e7e0568f5
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/components/ui/Button.vue
View File

@@ -15,6 +15,11 @@ export default {
default: false, default: false,
required: false required: false
}, },
xs: {
type: Boolean,
default: false,
required: false
},
scaleRotate: { scaleRotate: {
type: Boolean, type: Boolean,
default: false default: false
@@ -28,6 +33,8 @@ export default {
classNames.push('scale-rotate') classNames.push('scale-rotate')
if (this.small) if (this.small)
classNames.push('small'); classNames.push('small');
if (this.xs)
classNames.push('xs');
if (this.color) if (this.color)
classNames.push(this.color); classNames.push(this.color);
return classNames.join(' '); return classNames.join(' ');
@@ -57,6 +64,11 @@ button {
font-size: var(--btn-sm); font-size: var(--btn-sm);
} }
&.xs {
padding: var(--space-xs) var(--space-sm);
font-size: var(--btn-xs);
}
@media(hover: hover) and (pointer: fine) { @media(hover: hover) and (pointer: fine) {
&.scale-rotate:hover { &.scale-rotate:hover {
transform: rotate(4deg) scale(1.05); transform: rotate(4deg) scale(1.05);