UNPKG

@animated-burgers/burger-rotate

Version:
71 lines (68 loc) • 2.11 kB
.burger { height: 3em; width: 3em; position: relative; font-size: 12px; cursor: pointer; -webkit-transition: .2s all; -o-transition: .2s all; transition: .2s all; -webkit-tap-highlight-color: transparent; } .burger .burger-lines:after { left: 0; top: -1em; } .burger .burger-lines:before { left: 1em; top: 1em; } .burger:after { content: ''; display: block; position: absolute; height: 150%; width: 150%; top: -25%; left: -25%; } .burger .burger-lines { top: 50%; margin-top: -0.125em; } .burger .burger-lines, .burger .burger-lines:after, .burger .burger-lines:before { pointer-events: none; display: block; content: ''; width: 100%; border-radius: 0.25em; background-color: white; height: 0.25em; position: absolute; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .burger .burger-lines:after { left: 0; top: -1em; } .burger .burger-lines:before { left: 1em; top: 1em; } .burger.burger-rotate .burger-lines:after, .burger.burger-rotate .burger-lines:before { width: 2em; } .burger.burger-rotate .burger-lines, .burger.burger-rotate .burger-lines:after, .burger.burger-rotate .burger-lines:before { -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .burger.burger-rotate.open { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .burger.burger-rotate.open .burger-lines { background-color: transparent; } .burger.burger-rotate.open .burger-lines:before, .burger.burger-rotate.open .burger-lines:after { left: 0.5em; top: 0px; } .burger.burger-rotate.open .burger-lines:before { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .burger.burger-rotate.open .burger-lines:after { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }