1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- // Hamburger
- // ==================================================
- .hamburger {
- padding: $hamburger-padding-y $hamburger-padding-x;
- display: inline-block;
- cursor: pointer;
- -webkit-transition-property: opacity, -webkit-filter;
- transition-property: opacity, -webkit-filter;
- transition-property: opacity, filter;
- transition-property: opacity, filter, -webkit-filter;
- -webkit-transition-duration: $hamburger-hover-transition-duration;
- transition-duration: $hamburger-hover-transition-duration;
- -webkit-transition-timing-function: $hamburger-hover-transition-timing-function;
- transition-timing-function: $hamburger-hover-transition-timing-function;
- // Normalize (<button>)
- font: inherit;
- color: inherit;
- text-transform: none;
- background-color: transparent;
- border: 0;
- margin: 0;
- overflow: visible;
- &:hover {
- @if $hamburger-hover-use-filter == true {
- -webkit-filter: $hamburger-hover-filter;
- filter: $hamburger-hover-filter;
- }
- @else {
- opacity: $hamburger-hover-opacity;
- }
- }
- }
- .hamburger-box {
- width: $hamburger-layer-width;
- height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
- display: inline-block;
- position: relative;
- }
- .hamburger-inner {
- display: block;
- top: 50%;
- margin-top: $hamburger-layer-height / -2;
- &,
- &::before,
- &::after {
- width: $hamburger-layer-width;
- height: $hamburger-layer-height;
- background-color: $hamburger-layer-color;
- border-radius: $hamburger-layer-border-radius;
- position: absolute;
- -webkit-transition-property: -webkit-transform;
- transition-property: -webkit-transform;
- transition-property: transform;
- transition-property: transform, -webkit-transform;
- -webkit-transition-duration: 0.15s;
- transition-duration: 0.15s;
- -webkit-transition-timing-function: ease;
- transition-timing-function: ease;
- }
- &::before,
- &::after {
- content: "";
- display: block;
- }
- &::before {
- top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
- }
- &::after {
- bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
- }
- }
|