diff options
| author | Dylan Anderson <dylana@ualberta.ca> | 2020-12-17 08:16:54 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-12-17 08:16:54 +0300 |
| commit | df763d64572f9876e02f5af616f9cb987aec1b46 (patch) | |
| tree | 821116ff700f1f76f1c85c4bbb555737cd0b58ad /scss | |
| parent | 8984255158c3866ab1d11617e266ebf5f1e18a70 (diff) | |
Add variables for modifying button state colours. (#32317)
Add some variables to allow users to modify how much a button gets
lighter or darker on :hover and :active.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_variables.scss | 9 | ||||
| -rw-r--r-- | scss/mixins/_buttons.scss | 8 |
2 files changed, 13 insertions, 4 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 5af6686591..62fbc0d4d6 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -612,6 +612,15 @@ $btn-border-radius-lg: $border-radius-lg !default; $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$btn-hover-bg-shade-amount: 15% !default; +$btn-hover-bg-tint-amount: 15% !default; +$btn-hover-border-shade-amount: 20% !default; +$btn-hover-border-tint-amount: 10% !default; +$btn-active-bg-shade-amount: 20% !default; +$btn-active-bg-tint-amount: 20% !default; +$btn-active-border-shade-amount: 25% !default; +$btn-active-border-tint-amount: 10% !default; + // Forms diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 3aabd896c6..3fbd708969 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -7,11 +7,11 @@ $background, $border, $color: color-contrast($background), - $hover-background: if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)), - $hover-border: if($color == $color-contrast-light, shade-color($border, 20%), tint-color($border, 10%)), + $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), + $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), - $active-background: if($color == $color-contrast-light, shade-color($background, 20%), tint-color($background, 20%)), - $active-border: if($color == $color-contrast-light, shade-color($border, 25%), tint-color($border, 10%)), + $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), + $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, |