ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix some bugs with mobile toggle and reuse button and link classes for mobile menu.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-05-08 15:49:49 +02:00
commit 06479083fb
2 changed files with 33 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

28
assets/sass/components/button/_button.scss
View file

@ -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

38
assets/sass/mobile.scss
View file

@ -55,41 +55,43 @@
right: var(--gutters);
margin: 0;
padding: 0 .3rem;
border-color: var(--color-button-text-hover);
font-weight: var(--fw-bold);
background-color: var(--color-text-bg);
color: var(--color-text);
z-index: 22;
border: 1px solid var(--color-border);
pointer-events: auto;
@include respond-to(s) {
display: none;
}
.js-nav-open & {
color: var(--color-text-bg);
}
&:hover,
&:focus-visible {
svg {
fill: var(--color-button-text-hover);
}
&:hover svg,
&:focus-visible svg {
fill: var(--color-text-bg);
&.button--outline {
border-color: var(--color-button-text-hover);
}
}
}
&__hamburger {
fill: var(--color-text);
fill: var(--color-button-text-hover);
width: 1.6rem;
margin-left: .1rem;
.button--outline & {
fill: var(--color-button);
}
rect {
transform-origin: center;
}
.js-nav-open & { // stylelint-disable max-nesting-depth
fill: var(--color-text-bg);
rect {
y: 45;
y: 45px;
&:nth-of-type(1) {
transform: rotate(45deg);
@ -115,16 +117,6 @@
transform: translateX(100vw);
z-index: 21;
a {
color: var(--color-text-bg);
text-decoration: none;
&:hover,
&:focus {
color: var(--color-text-bg);
}
}
.js-nav-open & {
visibility: visible;
pointer-events: auto;