-
-
Save Alimjanov-Ibragim/e2f952fb339fd965b0b2ea49d3ba70d9 to your computer and use it in GitHub Desktop.
Sandwich
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .sandwich | |
| .sandwich__line.sandwich__line--top | |
| .sandwich__line.sandwich__line--middle | |
| .sandwich__line.sandwich__line--bottom | |
| .sandwich { | |
| cursor: pointer; | |
| display: none; | |
| height: 20px; | |
| position: relative; | |
| width: 32px; | |
| @media screen and (max-width: $tablet-wide) { display: block; } | |
| &--active { | |
| .sandwich__line { | |
| &--top { | |
| top: 10px; | |
| transform: rotate(45deg); | |
| } | |
| &--middle { opacity: 0; } | |
| &--bottom { | |
| top: 10px; | |
| transform: rotate(-45deg); | |
| } | |
| } | |
| } | |
| &__line { | |
| background-color: $white; | |
| display: block; | |
| height: 2px; | |
| left: 0; | |
| position: absolute; | |
| transition: all linear .4s; | |
| width: 100%; | |
| &--top { top: 0; } | |
| &--middle { top: 9px; } | |
| &--bottom { top: 18px; } | |
| } | |
| } | |
| var sandwich = function () { | |
| $(document).on('click', '.sandwich', function () { | |
| $(this).toggleClass('sandwich--active'); | |
| }); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
.sandwich
cursor pointer
display none
height 20px
position relative
width 32px
@media screen and (max-width 600px)
display flex
order 1
&--active
.sandwich__line
&--top
top 10px
transform rotate(45deg)
&--middle
opacity 0
&--bottom
top 10px
transform rotate(-45deg)
&__line
background-color #179cde
display block
height 3px
left 0
position absolute
transition all linear .4s
width 100%
&--top
top 0
&--middle
top 9px
&--bottom
top 18px