Hugo-theme-stack/assets/scss/partials/menu.scss
2020-09-14 13:38:24 +02:00

208 lines
4.5 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: 30px;
top: 30px;
z-index: 2;
cursor: pointer;
@media (min-width: $on-phone + 1) {
display: none;
}
outline: none;
&.is-active {
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background-color: var(--accent-color);
}
}
}
/* Menu style */
.menu {
padding-left: 0;
list-style: none;
display: flex;
flex-direction: column;
margin-top: 25px;
overflow-y: auto;
@media (min-width: $on-desktop-large) {
margin-top: 30px;
}
@media (max-width: $on-phone) {
background-color: var(--card-background);
margin-top: 0;
padding: 15px 0;
box-shadow: var(--shadow-l1);
display: none;
&.show {
display: block;
}
}
@media (min-width: $on-phone + 1) {
align-items: flex-end;
}
li {
position: relative;
vertical-align: middle;
padding: 10px 0;
&:not(:last-of-type) {
margin-bottom: 15px;
@media (min-width: $on-desktop-large) {
margin-bottom: 20px;
}
}
@media (max-width: $on-phone) {
padding: 10px 30px;
}
@media (min-width: $on-phone + 1) and (max-width: ($on-desktop - 1)) {
padding: 10px 0;
}
@media (min-width: $on-phone + 1) {
width: 100%;
}
svg {
width: 25px;
height: 25px;
stroke-width: 1.33;
margin-right: 40px;
}
a {
height: 100%;
display: inline-flex;
align-items: center;
color: var(--body-text-color);
font-size: 1.5rem;
@media (max-width: $on-desktop) {
font-size: 1.4rem;
}
}
span {
flex: 1;
}
&.current {
a {
color: var(--accent-color);
font-weight: bold;
}
}
}
}