![Jimmy Cai](/assets/img/avatar_default.png)
* feat(darkmode): initial support for dark mode toggle * fix(darkmode): add svg icons * feat(darkmode): dispatch onColorSchemeChange event * add head/darkmode * feat(darkmode); add colorScheme config * style: remove empty line * refactor(darkmode): simplify code * style: add comment for darkmode config * i18n support for dark mode toggle * Some renaming
215 lines
4.6 KiB
SCSS
215 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: 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: var(--sidebar-element-separation);
|
|
margin-bottom: 0;
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
font-size: 1.5rem;
|
|
|
|
@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;
|
|
|
|
@media (max-width: $on-desktop-large) {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
height: 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--body-text-color);
|
|
|
|
@media (max-width: $on-desktop-large) {
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
|
|
span {
|
|
flex: 1;
|
|
}
|
|
|
|
&.current {
|
|
a {
|
|
color: var(--accent-color);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|