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', () => ({
components: { BaseButton },
template: `

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

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