Fix some bugs with mobile toggle and reuse button and link classes for mobile menu.
This commit is contained in:
parent
79ad438b19
commit
06479083fb
1 changed files with 33 additions and 38 deletions
|
|
@ -27,25 +27,17 @@ button,
|
|||
cursor: pointer;
|
||||
color: var(--color-button-text);
|
||||
background-color: var(--color-button);
|
||||
border: 0;
|
||||
border: 1px solid var(--color-button);
|
||||
border-radius: var(--radius-s);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
text-decoration: none;
|
||||
color: var(--color-button-text-hover);
|
||||
background-color: var(--color-button-hover);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 2px 2px 5px 1px var(--color-button-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 2px 2px 5px 1px var(--color-button);
|
||||
}
|
||||
}
|
||||
|
||||
// Add button variations here.
|
||||
|
|
@ -63,7 +55,7 @@ button,
|
|||
background-color: var(--color-button-hover);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
color: var(--color-button-text);
|
||||
background-color: var(--color-button);
|
||||
|
|
@ -73,15 +65,25 @@ button,
|
|||
&--outline {
|
||||
color: var(--color-button);
|
||||
background-color: var(--color-button-text);
|
||||
border: 1px solid var(--color-button);
|
||||
border-color: var(--color-button);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
color: var(--color-button-text);
|
||||
background-color: var(--color-button);
|
||||
}
|
||||
}
|
||||
|
||||
&--shadow {
|
||||
&:hover {
|
||||
box-shadow: 2px 2px 5px 1px var(--color-button-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 2px 2px 5px 1px var(--color-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The disabled variation should always go last, so that it overrides any
|
||||
|
|
|
|||
Loading…
Reference in a new issue