12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- @if index($hamburger-types, squeeze) {
- /*
- * Squeeze
- */
- .hamburger--squeeze {
- .hamburger-inner {
- -webkit-transition-duration: 0.075s;
- transition-duration: 0.075s;
- -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
- &::before {
- -webkit-transition: top 0.075s 0.12s ease,
- opacity 0.075s ease;
- transition: top 0.075s 0.12s ease,
- opacity 0.075s ease;
- }
- &::after {
- -webkit-transition: bottom 0.075s 0.12s ease,
- -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
- transition: bottom 0.075s 0.12s ease,
- -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
- transition: bottom 0.075s 0.12s ease,
- transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
- transition: bottom 0.075s 0.12s ease,
- transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19),
- -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
- }
- }
- &.is-active {
- .hamburger-inner {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- -webkit-transition-delay: 0.12s;
- transition-delay: 0.12s;
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- &::before {
- top: 0;
- opacity: 0;
- -webkit-transition: top 0.075s ease,
- opacity 0.075s 0.12s ease;
- transition: top 0.075s ease,
- opacity 0.075s 0.12s ease;
- }
- &::after {
- bottom: 0;
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
- -webkit-transition: bottom 0.075s ease,
- -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
- transition: bottom 0.075s ease,
- -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
- transition: bottom 0.075s ease,
- transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
- transition: bottom 0.075s ease,
- transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1),
- -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
- }
- }
- }
- }
- }
|