.greyd-burger-btn { --button-color: none;
--button-size: 48px;
--button-radius: 2px;
display: grid;
place-items: center;
padding: 0;
margin: 0;
width: var(--button-size);
height: var(--button-size);
border-radius: var(--button-radius);
background: var(--button-color); --burger-color: currentColor;
--burger-width: 28px;
--burger-stroke: 3px;
--burger-gap: 6px;
color: var(--burger-color)
}
.greyd-burger {
width: var(--burger-width);
height: calc( var(--burger-stroke) + var(--burger-stroke) + var(--burger-stroke) + var(--burger-gap) + var(--burger-gap) );
display: inline-block;
position: relative;
}
.greyd-burger-inner {
display: block;
top: 50%;
margin-top: calc( var(--burger-stroke) / -2 );
}
.greyd-burger-inner,
.greyd-burger-inner::before,
.greyd-burger-inner::after {
position: absolute;
width: var(--burger-width);
height: var(--burger-stroke);
border-radius: 0; background: currentColor;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.greyd-burger-inner::before,
.greyd-burger-inner::after {
content: "";
display: block;
}
.greyd-burger-inner::before {
top: calc( -1 * ( var(--burger-stroke) + var(--burger-gap) ) );
}
.greyd-burger-inner::after {
bottom: calc( -1 * ( var(--burger-stroke) + var(--burger-gap) ) );
} .greyd-burger--boring .greyd-burger-inner,
.greyd-burger--boring .greyd-burger-inner::before,
.greyd-burger--boring .greyd-burger-inner::after {
transition-property: none;
}
.greyd-burger--boring.is-active .greyd-burger-inner {
transform: rotate(45deg);
}
.greyd-burger--boring.is-active .greyd-burger-inner::before {
top: 0;
opacity: 0;
}
.greyd-burger--boring.is-active .greyd-burger-inner::after {
bottom: 0;
transform: rotate(-90deg);
} .greyd-burger--collapse .greyd-burger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.greyd-burger--collapse .greyd-burger-inner::after {
top: calc( -2 * ( var(--burger-stroke) + var(--burger-gap) ) );
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.greyd-burger--collapse .greyd-burger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.greyd-burger--collapse.is-active .greyd-burger-inner {
transform: translate3d(0, calc( -1 * ( var(--burger-stroke) + var(--burger-gap) ) ), 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.greyd-burger--collapse.is-active .greyd-burger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.greyd-burger--collapse.is-active .greyd-burger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
} .greyd-burger--elastic .greyd-burger-inner {
top: calc( var(--burger-stroke) / 2 );
transition-duration: 0.275s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.greyd-burger--elastic .greyd-burger-inner::before {
top: calc( var(--burger-stroke) + var(--burger-gap) );
transition: opacity 0.125s 0.275s ease;
}
.greyd-burger--elastic .greyd-burger-inner::after {
top: calc( 2 * ( var(--burger-stroke) + var(--burger-gap) ) );
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.greyd-burger--elastic.is-active .greyd-burger-inner {
transform: translate3d(0, calc( var(--burger-stroke) + var(--burger-gap) ), 0) rotate(135deg);
transition-delay: 0.075s;
}
.greyd-burger--elastic.is-active .greyd-burger-inner::before {
transition-delay: 0s;
opacity: 0;
}
.greyd-burger--elastic.is-active .greyd-burger-inner::after {
transform: translate3d(0, calc( -2 * ( var(--burger-stroke) + var(--burger-gap) ) ), 0) rotate(-270deg);
transition-delay: 0.075s;
} .greyd-burger--spin .greyd-burger-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.greyd-burger--spin .greyd-burger-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.greyd-burger--spin .greyd-burger-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.greyd-burger--spin.is-active .greyd-burger-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.greyd-burger--spin.is-active .greyd-burger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.greyd-burger--spin.is-active .greyd-burger-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);
} .greyd-burger--spring .greyd-burger-inner {
top: calc( var(--burger-stroke) / 2 );
transition: background 0s 0.13s linear;
}
.greyd-burger--spring .greyd-burger-inner::before {
top: calc( var(--burger-stroke) + var(--burger-gap) );
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.greyd-burger--spring .greyd-burger-inner::after {
top: calc( 2 * ( var(--burger-stroke) + var(--burger-gap) ) );
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.greyd-burger--spring.is-active .greyd-burger-inner {
transition-delay: 0.22s;
background: transparent !important;
}
.greyd-burger--spring.is-active .greyd-burger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, calc( var(--burger-stroke) + var(--burger-gap) ), 0) rotate(45deg);
}
.greyd-burger--spring.is-active .greyd-burger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, calc( var(--burger-stroke) + var(--burger-gap) ), 0) rotate(-45deg);
} .greyd-burger--squeeze .greyd-burger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.greyd-burger--squeeze .greyd-burger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.greyd-burger--squeeze .greyd-burger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.greyd-burger--squeeze.is-active .greyd-burger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.greyd-burger--squeeze.is-active .greyd-burger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.greyd-burger--squeeze.is-active .greyd-burger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
} .greyd-burger.shape-e:not(.is-active) .greyd-burger-inner {
width: calc( var(--burger-width) * 0.66 );
}
.greyd-burger.shape-e-reverse:not(.is-active) .greyd-burger-inner {
width: calc( var(--burger-width) * 0.66 );
}
.greyd-burger.shape-e-reverse:not(.is-active) .greyd-burger-inner,
.greyd-burger.shape-e-reverse:not(.is-active) .greyd-burger-inner::before,
.greyd-burger.shape-e-reverse:not(.is-active) .greyd-burger-inner::after {
right: 0;
} .greyd-burger.shape-f:not(.is-active) .greyd-burger-inner::after {
width: calc( var(--burger-width) * 0.5 );
}
.greyd-burger.shape-f-reverse:not(.is-active) .greyd-burger-inner::after {
width: calc( var(--burger-width) * 0.5 );
right: 0;
} .greyd-burger.shape-kebab:not(.is-active) .greyd-burger-inner::before,
.greyd-burger.shape-kebab:not(.is-active) .greyd-burger-inner::after {
width: calc( var(--burger-width) * 0.6 );
left: calc( var(--burger-width) * 0.2 );
} .greyd-burger.shape-equal:not(.is-active) .greyd-burger-inner {
background: transparent;
transition-property: transform background;
}