Commit f727de42 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Allow opt-out of active state in button mixin

parent d17e2546
...@@ -31,6 +31,14 @@ ...@@ -31,6 +31,14 @@
border-style: none; border-style: none;
} }
@mixin button-hover {
&:hover:not([disabled]),
&:focus:not([disabled]) {
transition: 0.2s ease-out;
color: var.$grey-7;
}
}
/** /**
* Basic color, sizing, padding and hover for buttons. * Basic color, sizing, padding and hover for buttons.
*/ */
...@@ -45,27 +53,25 @@ ...@@ -45,27 +53,25 @@
svg { svg {
@include utils.icon--medium; @include utils.icon--medium;
} }
@include button-hover;
&:hover:not([disabled]) {
transition: 0.2s ease-out;
color: var.$grey-7;
}
} }
/* A button with an icon and no displayed text */ /* A button with an icon and no displayed text */
@mixin button--icon-only { @mixin button--icon-only($with-active-state: true) {
@include button; @include button;
color: var.$grey-mid; color: var.$grey-mid;
@media (pointer: coarse) { @media (pointer: coarse) {
min-width: var.$touch-target-size; min-width: var.$touch-target-size;
min-height: var.$touch-target-size; min-height: var.$touch-target-size;
} }
&[aria-expanded='true'], @if $with-active-state == true {
&[aria-pressed='true'] { &[aria-expanded='true'],
color: var.$color-brand; &[aria-pressed='true'] {
&:hover:not([disabled]) {
color: var.$color-brand; color: var.$color-brand;
&:hover:not([disabled]) {
color: var.$color-brand;
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment