IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

style button variants

Browse Source
This commit is contained in:
Alina Beck 2019-12-17 13:29:29 +05:30
parent 557fa3211d
commit ab9ad46b14
3 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/assets/_new/styles/tokens.scss
View File

@ -4,6 +4,8 @@
*/ */
$color-primary: rgb(23, 181, 63); $color-primary: rgb(23, 181, 63);
$color-primary-light: rgb(96, 214, 98);
$color-primary-dark: rgb(25, 122, 49);
$color-primary-active: rgb(25, 194, 67); $color-primary-active: rgb(25, 194, 67);
$color-primary-inverse: rgb(241, 253, 244); $color-primary-inverse: rgb(241, 253, 244);
$color-secondary: rgb(0, 142, 230); $color-secondary: rgb(0, 142, 230);
@ -13,6 +15,8 @@
$color-success-active: rgb(26, 203, 71); $color-success-active: rgb(26, 203, 71);
$color-success-inverse: rgb(241, 253, 244); $color-success-inverse: rgb(241, 253, 244);
$color-danger: rgb(219, 57, 36); $color-danger: rgb(219, 57, 36);
$color-danger-light: rgb(242, 97, 65);
$color-danger-dark: rgb(158, 43, 28);
$color-danger-active: rgb(224, 81, 62); $color-danger-active: rgb(224, 81, 62);
$color-danger-inverse: rgb(253, 243, 242); $color-danger-inverse: rgb(253, 243, 242);
$color-warning: rgb(230, 121, 25); $color-warning: rgb(230, 121, 25);

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

@ -54,7 +54,7 @@ storiesOf('Generic/BaseButton', module)
components: { BaseButton }, components: { BaseButton },
template: ` template: `
<div> <div>
<base-button circle icon="flag" /> <base-button circle icon="eye" />
<base-button circle>EN</base-button> <base-button circle>EN</base-button>
<base-button circle disabled icon="eye-slash" /> <base-button circle disabled icon="eye-slash" />
<base-button circle loading icon="eye-slash" /> <base-button circle loading icon="eye-slash" />

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

@ -9,6 +9,10 @@
<script> <script>
export default { export default {
props: { props: {
circle: {
type: Boolean,
default: false,
},
icon: { icon: {
type: String, type: String,
}, },
@ -30,6 +34,7 @@ export default {
let buttonClass = 'base-button' let buttonClass = 'base-button'
if (this.$slots.default == null) buttonClass += ' --icon-only' if (this.$slots.default == null) buttonClass += ' --icon-only'
if (this.circle) buttonClass += ' --circle'
if (this.primary) buttonClass += ' --primary' if (this.primary) buttonClass += ' --primary'
else if (this.danger) buttonClass += ' --danger' else if (this.danger) buttonClass += ' --danger'
@ -43,18 +48,20 @@ export default {
.base-button { .base-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center;
height: 36px; height: 36px;
padding: 0 12px; padding: 0 12px;
color: $color-primary; color: $color-primary;
background-color: $color-neutral-90; background-color: $color-neutral-90;
border: 1px solid $color-primary; border: 1px solid $color-primary;
border-radius: 6px; border-radius: 6px;
overflow: hidden;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
cursor: pointer; cursor: pointer;
transition: background-color .1s;
&:focus { &:focus {
outline: 1px dashed $color-primary; outline: 1px dashed $color-primary;
outline-offset: 2px;
} }
&:hover { &:hover {
@ -64,7 +71,8 @@ export default {
&:active { &:active {
color: $color-neutral-100; color: $color-neutral-100;
background-color: $color-primary-active; border-color: $color-primary-dark;
background-color: $color-primary-dark;
} }
&:disabled { &:disabled {
@ -80,7 +88,15 @@ export default {
background-color: $color-primary; background-color: $color-primary;
&:hover { &:hover {
background-color: $color-primary-active; background-color: $color-primary-light;
}
&:active {
background-color: $color-primary-dark;
}
&:disabled {
background-color: $color-neutral-60;
} }
} }
@ -90,8 +106,21 @@ export default {
background-color: $color-danger; background-color: $color-danger;
&:hover { &:hover {
background-color: $color-danger-active; background-color: $color-danger-light;
} }
&:active {
background-color: $color-danger-dark;
}
&:disabled {
background-color: $color-neutral-60;
}
}
&.--circle {
width: 36px;
border-radius: 50%;
} }
&:not(.--icon-only) > .base-icon { &:not(.--icon-only) > .base-icon {