.mobile-menu-toggle { | |
display: block; | |
position: relative; | |
width: 22px; | |
height: 16px; | |
float: right; | |
} | |
.mobile-menu-toggle > span { | |
width: 22px; | |
height: 2px; | |
background: #fff; | |
position: absolute; | |
left: 0; | |
-webkit-transition: top .15s .15s ease-in-out,-webkit-transform .15s .3s ease-in-out; | |
-moz-transition: top .15s .15s ease-in-out,-moz-transform .15s .3s ease-in-out; | |
-ms-transition: top .15s .15s ease-in-out,-ms-transform .15s .3s ease-in-out; | |
-o-transition: top .15s .15s ease-in-out,-o-transform .15s .3 ease-in-out; | |
transition: top .15s .15s ease-in-out,transform .15s .3s ease-in-out; | |
} | |
.mobile-menu-toggle .top-bar { | |
top: 0; | |
} | |
.mobile-menu-toggle .middle-bar { | |
top: 7px; | |
} | |
.mobile-menu-toggle .bottom-bar { | |
top: 14px; | |
} | |
.sidr-open .mobile-menu-toggle { | |
} | |
.sidr-open .mobile-menu-toggle .top-bar { | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
transform: rotate(45deg); | |
top: 7px; | |
} | |
.sidr-open .mobile-menu-toggle .middle-bar { | |
opacity: 0; | |
} | |
.sidr-open .mobile-menu-toggle .bottom-bar { | |
-webkit-transform: rotate(-45deg); | |
-moz-transform: rotate(-45deg); | |
-ms-transform: rotate(-45deg); | |
-o-transform: rotate(-45deg); | |
transform: rotate(-45deg); | |
top: 7px; | |
} |