ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

add button size small

Browse Source
This commit is contained in:
Alina Beck 2019-12-18 22:55:28 +05:30
parent c83f158ca4
commit 63549d987e
2 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
webapp/components/_new/generic/BaseButton/BaseButton.story.js
View File

@ -40,6 +40,16 @@ storiesOf('Generic/BaseButton', module)
`, `,
})) }))
.add('small', () => ({
components: { BaseButton },
template: `
<div>
<base-button size="small">Small</base-button>
<base-button size="small" circle>S</base-button>
</div>
`
}))
.add('primary', () => ({ .add('primary', () => ({
components: { BaseButton }, components: { BaseButton },
template: ` template: `

39
webapp/components/_new/generic/BaseButton/BaseButton.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<button :class="buttonClass" :disabled="loading"> <button :class="buttonClass" :disabled="loading" @click="$emit('click')">
<loading-spinner v-if="loading" /> <loading-spinner v-if="loading" />
<base-icon v-if="icon" :name="icon" /> <base-icon v-if="icon" :name="icon" />
<slot /> <slot />
@ -33,6 +33,13 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
size: {
type: String,
default: 'regular',
validator(value) {
return value.match(/(small|regular|large)/)
},
},
}, },
computed: { computed: {
buttonClass() { buttonClass() {
@ -41,9 +48,13 @@ export default {
if (this.$slots.default == null) buttonClass += ' --icon-only' if (this.$slots.default == null) buttonClass += ' --icon-only'
if (this.circle) buttonClass += ' --circle' if (this.circle) buttonClass += ' --circle'
if (this.loading) buttonClass += ' --loading' if (this.loading) buttonClass += ' --loading'
if (this.primary) buttonClass += ' --primary' if (this.primary) buttonClass += ' --primary'
else if (this.danger) buttonClass += ' --danger' else if (this.danger) buttonClass += ' --danger'
if (this.size === 'small') buttonClass += ' --small'
else if (this.size === 'large') buttonClass += ' --large'
return buttonClass return buttonClass
} }
} }
@ -59,7 +70,7 @@ export default {
padding: 0 12px; padding: 0 12px;
vertical-align: bottom; vertical-align: bottom;
color: $color-primary; color: $color-primary;
background-color: $color-neutral-90; background-color: transparent;
border: 1px solid $color-primary; border: 1px solid $color-primary;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
@ -85,46 +96,64 @@ export default {
&:disabled { &:disabled {
color: $color-neutral-60; color: $color-neutral-60;
border-color: $color-neutral-60; border-color: $color-neutral-60;
background-color: $color-neutral-90; background-color: transparent;
cursor: default; cursor: default;
} }
&.--primary { &.--primary {
border: none;
color: $color-neutral-100; color: $color-neutral-100;
background-color: $color-primary; background-color: $color-primary;
&:hover { &:hover {
background-color: $color-primary-light; background-color: $color-primary-light;
border-color: $color-primary-light;
} }
&:active { &:active {
background-color: $color-primary-dark; background-color: $color-primary-dark;
border-color: $color-primary-dark;
} }
&:disabled { &:disabled {
background-color: $color-neutral-60; background-color: $color-neutral-60;
border-color: $color-neutral-60;
} }
} }
&.--danger { &.--danger {
border: none;
color: $color-neutral-100; color: $color-neutral-100;
background-color: $color-danger; background-color: $color-danger;
border-color: $color-danger;
&:hover { &:hover {
background-color: $color-danger-light; background-color: $color-danger-light;
border-color: $color-danger-light;
} }
&:active { &:active {
background-color: $color-danger-dark; background-color: $color-danger-dark;
border-color: $color-danger-dark;
} }
&:disabled { &:disabled {
background-color: $color-neutral-60; background-color: $color-neutral-60;
border-color: $color-neutral-60;
} }
} }
&.--small {
height: 26px;
font-size: $font-size-small;
&.--circle {
width: 26px;
}
}
&.--large {
}
&.--circle { &.--circle {
width: 36px; width: 36px;
border-radius: 50%; border-radius: 50%;