1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- // 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;
- }
- }
- }
- .hamburger-box {
- width: 30px;
- height: 16px;
- display: inline-block;
- position: relative;
- }
- .hamburger-inner {
- display: block;
- top: 50%;
- margin-top: $hamburger-layer-height / -2;
- background: white;
- &,
- &::before,
- &::after {
- background: white;
- width: 30px;
- height: 2px;
- 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: -7px;
- }
- &::after {
- bottom: -7px;
- }
- }
|