Hugo-theme-stack/assets/scss/partials/menu.scss
Jiahao Li 6c7d42d45a
fix(sidebar): menu-bottom-section not showing in mobile (#966)
* fix(sidebar): Bottom section not showing in mobile

* fix(sidebar): Align bottom section to bottom

* fix(sidebar): Gap missing in bottom section

* refactor(sidebar): Simplify styles

* refactor(sidebar): Remove useless padding-left

* refactor(sidebar): Remove useless margin-top

* refactor(sidebar): Combine duplicate flex-direction

* refactor(sidebar): Remove redundant width
2024-03-10 22:56:30 +01:00

230 lines
4.6 KiB
SCSS

/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding-top: 10px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger.is-active:hover {
opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000;
}
.hamburger-box {
width: 30px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 30px;
height: 2px;
background-color: var(--card-text-color-main);
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--spin .hamburger-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin.is-active .hamburger-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#toggle-menu {
background: none;
border: none;
position: absolute;
right: 0;
top: 0;
z-index: 2;
cursor: pointer;
[dir="rtl"] & {
left: 0;
right: auto;
}
@include respond(md) {
display: none;
}
outline: none;
&.is-active {
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background-color: var(--accent-color);
}
}
}
/* Menu style */
#main-menu {
list-style: none;
overflow-y: auto;
flex-grow: 1;
font-size: 1.4rem;
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
display: none;
margin: 0 calc(var(--container-padding) * -1);
padding: 30px 30px;
@include respond(xl) {
padding: 15px 0;
}
&, .menu-bottom-section ol {
flex-direction: column;
gap: 30px;
@include respond(xl) {
gap: 25px;
}
}
&.show {
display: flex;
}
@include respond(md) {
align-items: flex-end;
display: flex;
background-color: transparent;
padding: 0;
box-shadow: none;
margin: 0;
}
li {
position: relative;
vertical-align: middle;
padding: 0;
@include respond(md) {
width: 100%;
}
svg {
stroke: currentColor;
stroke-width: 1.33;
width: 20px;
height: 20px;
}
a {
height: 100%;
display: inline-flex;
align-items: center;
color: var(--body-text-color);
gap: var(--menu-icon-separation);
}
span {
flex: 1;
}
&.current {
a {
color: var(--accent-color);
font-weight: bold;
}
}
&.menu-bottom-section {
margin-top: auto;
ol {
display: flex;
padding-left: 0;
}
}
}
}
.social-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
gap: 10px;
svg {
width: 24px;
height: 24px;
stroke: var(--body-text-color);
stroke-width: 1.33;
}
}