mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-04-24 15:08:44 -05:00
58 lines
1.2 KiB
CSS
58 lines
1.2 KiB
CSS
.transformingBurger {
|
|
display: flex;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
border: 2px solid;
|
|
border-color: var(--bg-lighter);
|
|
background-color: transparent;
|
|
border-radius: var(--rounded);
|
|
color: inherit;
|
|
cursor: pointer;
|
|
gap: 2px;
|
|
}
|
|
|
|
.topLine {
|
|
transform: none;
|
|
transform-origin: 16px 10px;
|
|
transition-duration: 150ms;
|
|
transition-property: transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.topLine[data-expanded="true"] {
|
|
transform: translateY(7px) rotate(45deg);
|
|
}
|
|
|
|
.middleLine {
|
|
opacity: 1;
|
|
transition-duration: 150ms;
|
|
transition-property: opacity;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.middleLine[data-expanded="true"] {
|
|
opacity: 0;
|
|
}
|
|
|
|
.bottomLine {
|
|
transform: none;
|
|
transform-origin: 16px 22px;
|
|
transition-duration: 150ms;
|
|
transition-property: transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.bottomLine[data-expanded="true"] {
|
|
transform: translateY(-5px) rotate(-45deg);
|
|
}
|
|
|
|
@media only screen and (min-width: 640px) {
|
|
.transformingBurger {
|
|
display: none;
|
|
}
|
|
}
|