src/wolnelektury/static/2022/styles/components/_hamburger.scss

   1 /* ------------------------------
   2     Component: Hamburger
   3 ------------------------------ */
   4
   5 $bar-width:   35px;
   6 $bar-height:  3px;
   7 $bar-spacing: 8px;
   8 $bar-color:   #85C7CC;
   9
  10 .c-hamburger {
  11   display: flex;
  12   height: $bar-height + $bar-spacing*2;
  13   transition: transform $ease-out 400ms;
  14   backface-visibility: hidden;
  15   position: relative;
  16   cursor: pointer;
  17
  18   border: 0;
  19   margin: 0;
  20   padding: 0;
  21   background-color: transparent;
  22   appearance: none;
  23
  24   &:after {
  25     content: attr(data-label);
  26     transform: translateX(50%);
  27     @include font-size(18px);
  28     top: -3px; left: -7px;
  29     font-weight: $medium;
  30     padding-left: 17px;
  31     position: absolute;
  32     transition: color 300ms $ease-out;
  33   }
  34
  35   .bar,
  36   .bar:after,
  37   .bar:before {
  38     width: $bar-width;
  39     height: $bar-height;
  40     border-radius: 10px;
  41   }
  42
  43   .bar {
  44     position: relative;
  45     transform: translateY($bar-spacing);
  46     background-color: rgba($bar-color, 1);
  47     transition: all 0ms 300ms;
  48
  49     &:before,
  50     &:after {
  51       left: 0;
  52       content: "";
  53       position: absolute;
  54       bottom: $bar-spacing;
  55       background-color: rgba($bar-color, 1);
  56     }
  57
  58     &:before {
  59       bottom: $bar-spacing;
  60       transition: bottom 300ms 300ms $ease-out,
  61       transform 300ms $ease-out,
  62       background-color 300ms $ease-out;
  63     }
  64
  65     &:after {
  66       top: $bar-spacing;
  67       transition: top 300ms 300ms $ease-out,
  68       transform 300ms $ease-out,
  69       background-color 300ms $ease-out;
  70     }
  71
  72     &.animate {
  73       background-color: rgba(255, 255, 255, 0);
  74
  75       &:before {
  76         bottom: 0;
  77         transform: rotate(-45deg);
  78         transition: bottom 300ms $ease-out,
  79         transform 300ms 300ms $ease-out;
  80       }
  81
  82       &:after {
  83         top: 0;
  84         transform: rotate(45deg);
  85         transition: top 300ms $ease-out,
  86         transform 300ms 300ms $ease-out;
  87       }
  88     }
  89   }
  90 }