ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2026-04-06 01:25:38 +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; color: $main-color;
border-color: $main-color; border-color: $main-color;
background-color: transparent; background-color: transparent;
transition: background-color 0.1s; transition: background-color $duration-short;
&:focus { &:focus {
outline: 1px dashed $main-color; outline: $border-size-base dashed $main-color;
} }
&:enabled { &:enabled {
@ -38,10 +38,6 @@
cursor: default; cursor: default;
} }
&.--loading {
color: $color-neutral-80;
}
@if $filled { @if $filled {
color: $color-neutral-100; color: $color-neutral-100;
border-color: $main-color; border-color: $main-color;
@ -61,7 +57,7 @@
} }
&:disabled { &:disabled {
color: $color-neutral-80; color: $color-neutral-100;
background-color: $color-neutral-60; background-color: $color-neutral-60;
border-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-large: 64px;
$size-avatar-x-large: 114px; $size-avatar-x-large: 114px;
/**
* @tokens Size Buttons
* @presenter Spacing
*/
$size-button-base: 36px;
$size-button-small: 26px;
/** /**
* @tokens Shadow * @tokens Shadow
* @presenter Shadow * @presenter Shadow

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

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