granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add disabled state to Button

Browse source
This commit is contained in:
Justin Edmund 2022-12-23 20:00:39 -08:00
parent 3983d5411c
commit a7705707ce
2 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/Button/index.scss
View file

@ -60,6 +60,17 @@
} }
} }
&.Disabled {
background-color: var(--button-bg-disabled);
color: var(--button-text-disabled);
&:hover {
background-color: var(--button-bg-disabled);
color: var(--button-text-disabled);
cursor: default;
}
}
&.medium { &.medium {
height: $unit * 5.5; height: $unit * 5.5;
padding: ($unit * 1.5) $unit-2x; padding: ($unit * 1.5) $unit-2x;

6
styles/variables.scss
View file

@ -133,7 +133,7 @@ $menu--text--dark--hover: $grey-15;
// Color Definitions: Button // Color Definitions: Button
$button--bg--light: $grey-80; $button--bg--light: $grey-80;
$button--bg--light--hover: $grey-100; $button--bg--light--hover: $grey-100;
$button--bg--light--disabled: $grey-50; $button--bg--light--disabled: $grey-80;
$button--contained--bg--light: $grey-85; $button--contained--bg--light: $grey-85;
$button--contained--bg--light--hover: $grey-80; $button--contained--bg--light--hover: $grey-80;
@ -145,10 +145,10 @@ $button--contained--bg--dark--hover: $grey-05;
$button--text--light: $grey-55; $button--text--light: $grey-55;
$button--text--light--hover: $grey-40; $button--text--light--hover: $grey-40;
$button--text--light--disabled: $grey-40; $button--text--light--disabled: $grey-70;
$button--text--dark: $grey-70; $button--text--dark: $grey-70;
$button--text--dark--hover: $grey-100; $button--text--dark--hover: $grey-100;
$button--text--dark--disabled: $grey-50; $button--text--dark--disabled: $grey-40;
// Color Definitions: Input // Color Definitions: Input
$input--bg--light: $grey-100; $input--bg--light: $grey-100;