mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
manage button states and color schemes with mixin
This commit is contained in:
Alina Beck
parent
be30b55f65
commit
1b9249c685
69
webapp/assets/_new/styles/mixins/buttonStates.scss
Normal file
69
webapp/assets/_new/styles/mixins/buttonStates.scss
Normal file
@ -0,0 +1,69 @@
|
||||
@mixin buttonStates($color-scheme: primary, $filled: false) {
|
||||
$main-color: $color-primary;
|
||||
$active-color: $color-primary-dark;
|
||||
$hover-color: $color-primary-light;
|
||||
|
||||
@if $color-scheme == danger {
|
||||
$main-color: $color-danger;
|
||||
$active-color: $color-danger-dark;
|
||||
$hover-color: $color-danger-light;
|
||||
}
|
||||
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.1s;
|
||||
|
||||
&:focus {
|
||||
outline: 1px dashed $main-color;
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
&:hover {
|
||||
color: $color-neutral-100;
|
||||
border-color: $main-color;
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $color-neutral-100;
|
||||
border-color: $active-color;
|
||||
background-color: $active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $color-neutral-60;
|
||||
border-color: $color-neutral-60;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.--loading {
|
||||
color: $color-neutral-80;
|
||||
}
|
||||
|
||||
@if $filled {
|
||||
color: $color-neutral-100;
|
||||
border-color: $main-color;
|
||||
background-color: $main-color;
|
||||
|
||||
&:enabled {
|
||||
&:hover {
|
||||
border-color: $hover-color;
|
||||
background-color: $hover-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $color-neutral-100;
|
||||
border-color: $active-color;
|
||||
background-color: $active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $color-neutral-80;
|
||||
background-color: $color-neutral-60;
|
||||
border-color: $color-neutral-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -40,27 +40,6 @@ 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: `
|
||||
<div>
|
||||
<base-button primary>Primary</base-button>
|
||||
<base-button primary disabled>Disabled</base-button>
|
||||
<base-button primary loading>Loading</base-button>
|
||||
</div>
|
||||
`,
|
||||
}))
|
||||
|
||||
.add('danger', () => ({
|
||||
components: { BaseButton },
|
||||
template: `
|
||||
@ -72,6 +51,28 @@ storiesOf('Generic/BaseButton', module)
|
||||
`,
|
||||
}))
|
||||
|
||||
.add('filled', () => ({
|
||||
components: { BaseButton },
|
||||
template: `
|
||||
<div>
|
||||
<base-button filled>Filled</base-button>
|
||||
<base-button filled danger>Filled Danger</base-button>
|
||||
<base-button filled disabled>Disabled</base-button>
|
||||
<base-button filled loading>Loading</base-button>
|
||||
</div>
|
||||
`,
|
||||
}))
|
||||
|
||||
.add('small', () => ({
|
||||
components: { BaseButton },
|
||||
template: `
|
||||
<div>
|
||||
<base-button size="small">Small</base-button>
|
||||
<base-button size="small" circle>S</base-button>
|
||||
</div>
|
||||
`,
|
||||
}))
|
||||
|
||||
.add('ghost', () => ({
|
||||
// TODO: add documentation --> ghost button should only be used for very special occasions
|
||||
// e.g. for the ContentMenu + for the EditorMenuBarButtons
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<button
|
||||
:type="type"
|
||||
:class="buttonClass"
|
||||
:disabled="loading"
|
||||
:type="type"
|
||||
@click.capture="event => $emit('click', event)"
|
||||
>
|
||||
<loading-spinner v-if="loading" />
|
||||
<base-icon v-if="icon" :name="icon" />
|
||||
<loading-spinner v-if="loading" />
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
@ -23,20 +23,20 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
danger: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
filled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
ghost: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
primary: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
danger: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
icon: {
|
||||
type: String,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
type: String,
|
||||
default: 'regular',
|
||||
validator(value) {
|
||||
return value.match(/(small|regular|large)/)
|
||||
return value.match(/(small|regular)/)
|
||||
},
|
||||
},
|
||||
type: {
|
||||
@ -63,14 +63,12 @@ export default {
|
||||
|
||||
if (this.$slots.default == null) buttonClass += ' --icon-only'
|
||||
if (this.circle) buttonClass += ' --circle'
|
||||
if (this.ghost) buttonClass += ' --ghost'
|
||||
if (this.danger) buttonClass += ' --danger'
|
||||
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'
|
||||
|
||||
if (this.filled) buttonClass += ' --filled'
|
||||
else if (this.ghost) buttonClass += ' --ghost'
|
||||
|
||||
return buttonClass
|
||||
},
|
||||
@ -79,95 +77,32 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~/assets/_new/styles/mixins/buttonStates.scss';
|
||||
|
||||
.base-button {
|
||||
@include buttonStates;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
vertical-align: bottom;
|
||||
color: $color-primary;
|
||||
background-color: transparent;
|
||||
border: 1px solid $color-primary;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
font-weight: $font-weight-bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s;
|
||||
|
||||
&:focus {
|
||||
outline: 1px dashed $color-primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-neutral-100;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $color-neutral-100;
|
||||
border-color: $color-primary-dark;
|
||||
background-color: $color-primary-dark;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $color-neutral-60;
|
||||
border-color: $color-neutral-60;
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.--primary {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
@include buttonStates($color-scheme: danger);
|
||||
}
|
||||
|
||||
&.--small {
|
||||
height: 26px;
|
||||
font-size: $font-size-small;
|
||||
|
||||
&.--circle {
|
||||
width: 26px;
|
||||
}
|
||||
&.--filled {
|
||||
@include buttonStates($filled: true);
|
||||
}
|
||||
|
||||
&.--large {
|
||||
&.--danger.--filled {
|
||||
@include buttonStates($color-scheme: danger, $filled: true)
|
||||
}
|
||||
|
||||
&.--circle {
|
||||
@ -179,6 +114,15 @@ export default {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.--small {
|
||||
height: 26px;
|
||||
font-size: $font-size-small;
|
||||
|
||||
&.--circle {
|
||||
width: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.--icon-only) > .base-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
@ -189,13 +133,8 @@ export default {
|
||||
color: $color-neutral-60;
|
||||
}
|
||||
|
||||
&.--loading {
|
||||
color: $color-neutral-80;
|
||||
|
||||
&.--primary > .loading-spinner,
|
||||
&.--danger > .loading-spinner {
|
||||
color: $color-neutral-100;
|
||||
}
|
||||
&.--filled > .loading-spinner {
|
||||
color: $color-neutral-100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user