SHARE
TWEET

Untitled

a guest Sep 24th, 2019 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .burger {
  2.   display: none;
  3.   width: 30px;
  4.   padding: 0;
  5.   line-height: 30px;
  6.  
  7.   border: 0;
  8.   cursor: pointer;
  9.   background-color: transparent;
  10.  
  11.   order: 0;
  12.   margin-left: auto;
  13.  
  14.   @include for-tablet-landscape-down() {
  15.     display: inline-block;
  16.     margin-right: 5%;
  17.   }
  18.  
  19.   > span {
  20.     position: relative;
  21.     display: inline-block;
  22.     width: 100%;
  23.     height: 3px;
  24.  
  25.     font-size: 0;
  26.     vertical-align: middle;
  27.     background-color: $black;
  28.     transition: background .3s;
  29.  
  30.     &:before,
  31.     &:after {
  32.       content: '';
  33.       position: absolute;
  34.       left: 0;
  35.       width: 100%;
  36.  
  37.       height: 100%;
  38.       background-color: $black;
  39.       transition: top .3s .3s, transform .3s;
  40.     }
  41.  
  42.     &:before {
  43.       top: -10px;
  44.     }
  45.  
  46.     &:after {
  47.       top: 10px;
  48.     }
  49.   }
  50.  
  51.   &_close {
  52.  
  53.     > span {
  54.       background-color: transparent;
  55.  
  56.       &::before,
  57.       &::after {
  58.         top: 0;
  59.         transition: transform .3s .3s, top .3s;
  60.       }
  61.  
  62.       &::before {
  63.         transform: rotate(45deg);
  64.       }
  65.  
  66.       &::after {
  67.         transform: rotate(-45deg);
  68.       }
  69.     }
  70.   }
  71. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top