Hugo-theme-stack/assets/scss/partials/menu.scss

204 lines
4.2 KiB
SCSS
Raw Normal View History

2020-08-22 07:20:08 -04:00
/*!
* 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;
@include respond(md) {
2020-08-22 07:20:08 -04:00
display: none;
}
2020-08-22 07:20:08 -04:00
outline: none;
&.is-active {
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background-color: var(--accent-color);
}
}
}
/* Menu style */
.menu {
2020-09-14 07:38:24 -04:00
padding-left: 0;
2020-08-22 07:20:08 -04:00
list-style: none;
display: flex;
flex-direction: column;
overflow-y: auto;
flex-grow: 1;
font-size: 1.4rem;
2020-09-03 05:42:01 -04:00
background-color: var(--card-background);
padding: 15px 0;
box-shadow: var(--shadow-l1);
display: none;
2020-08-22 07:20:08 -04:00
margin: 0 -15px;
&.show {
display: block;
2020-08-22 07:20:08 -04:00
}
@include respond(md) {
2020-08-22 07:20:08 -04:00
align-items: flex-end;
display: flex;
background-color: transparent;
padding: 0;
box-shadow: none;
margin: 0;
margin-top: var(--sidebar-element-separation);
}
@include respond(xl) {
margin-top: 30px;
2020-08-22 07:20:08 -04:00
}
li {
position: relative;
vertical-align: middle;
padding: 10px 30px;
2020-08-22 07:20:08 -04:00
&:not(:last-of-type) {
2020-09-03 05:42:01 -04:00
margin-bottom: 15px;
2020-08-22 07:20:08 -04:00
@include respond(xl) {
2020-09-03 05:42:01 -04:00
margin-bottom: 20px;
2020-08-22 07:20:08 -04:00
}
}
@include respond(md) {
2020-08-22 07:20:08 -04:00
width: 100%;
padding: 10px 0;
2020-08-22 07:20:08 -04:00
}
svg {
stroke-width: 1.33;
margin-right: 40px;
2020-10-04 09:58:32 -04:00
width: 20px;
height: 20px;
2020-08-22 07:20:08 -04:00
}
a {
height: 100%;
display: inline-flex;
align-items: center;
color: var(--body-text-color);
}
span {
flex: 1;
}
&.current {
a {
color: var(--accent-color);
font-weight: bold;
}
}
}
}