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

use scss variables in base button component

Browse Source
This commit is contained in:
Alina Beck 2020-01-09 14:31:25 +05:30
parent 04e5ecc87d
commit b71638d29f
3 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
webapp/assets/_new/styles/mixins/buttonStates.scss
View File

@ -12,10 +12,10 @@
color: $main-color;
border-color: $main-color;
background-color: transparent;
transition: background-color 0.1s;
transition: background-color $duration-short;
&:focus {
outline: 1px dashed $main-color;
outline: $border-size-base dashed $main-color;
}
&:enabled {
@ -38,10 +38,6 @@
cursor: default;
}
&.--loading {
color: $color-neutral-80;
}
@if $filled {
color: $color-neutral-100;
border-color: $main-color;
@ -61,7 +57,7 @@
}
&:disabled {
color: $color-neutral-80;
color: $color-neutral-100;
background-color: $color-neutral-60;
border-color: $color-neutral-60;
}

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

@ -250,6 +250,14 @@ $size-avatar-base: 44px;
$size-avatar-large: 64px;
$size-avatar-x-large: 114px;
/**
* @tokens Size Buttons
* @presenter Spacing
*/
$size-button-base: 36px;
$size-button-small: 26px;
/**
* @tokens Shadow
* @presenter Shadow

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

@ -84,11 +84,11 @@ export default {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 12px;
height: $size-button-base;
padding: 0 $space-x-small;
vertical-align: bottom;
border: 1px solid;
border-radius: 6px;
border: $border-size-base solid;
border-radius: $border-radius-x-large;
overflow: hidden;
font-weight: $font-weight-bold;
cursor: pointer;
@ -106,7 +106,7 @@ export default {
}
&.--circle {
width: 36px;
width: $size-button-base;
border-radius: 50%;
}
@ -115,21 +115,25 @@ export default {
}
&.--small {
height: 26px;
height: $size-button-small;
font-size: $font-size-small;
&.--circle {
width: 26px;
width: $size-button-small;
}
}
&:not(.--icon-only) > .base-icon {
margin-right: 6px;
margin-right: $space-xx-small;
}
&:disabled.--loading {
color: $color-neutral-80;
}
> .loading-spinner {
position: absolute;
height: 26px;
height: $size-button-small;
color: $color-neutral-60;
}