From df763d64572f9876e02f5af616f9cb987aec1b46 Mon Sep 17 00:00:00 2001 From: Dylan Anderson <dylana@ualberta.ca> Date: Wed, 16 Dec 2020 22:16:54 -0700 Subject: [PATCH] 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> --- scss/_variables.scss | 9 +++++++++ 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,