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   @include rwd(tablet) {
  19     margin-right: 0;
  20   }
  21
  22   border: 0;
  23   margin: 0; padding: 0;
  24   background-color: transparent;
  25   appearance: none;
  26
  27   &:after {
  28     content: attr(data-label);
  29     transform: translateX(50%);
  30     @include font-size(18px);
  31     top: -3px; left: -7px;
  32     font-weight: $medium;
  33     padding-left: 17px;
  34     position: absolute;
  35     transition: color 300ms $ease-out;
  36   }
  37
  38   &.is-clicked {
  39     z-index: $master-layer + 2;
  40
  41     @include rwd(tablet) {
  42       position: fixed;
  43       top: 2rem; right: 1rem;
  44     }
  45
  46     &:after {
  47       color: $color-black;
  48     }
  49   }
  50
  51   .bar,
  52   .bar:after,
  53   .bar:before {
  54     width: $bar-width;
  55     height: $bar-height;
  56     border-radius: 10px;
  57   }
  58
  59   .bar {
  60     position: relative;
  61     transform: translateY($bar-spacing);
  62     background-color: rgba($bar-color, 1);
  63     transition: all 0ms 300ms;
  64
  65     &:before,
  66     &:after {
  67       left: 0;
  68       content: "";
  69       position: absolute;
  70       bottom: $bar-spacing;
  71       background-color: rgba($bar-color, 1);
  72     }
  73
  74     &:before {
  75       bottom: $bar-spacing;
  76       transition: bottom 300ms 300ms $ease-out,
  77       transform 300ms $ease-out,
  78       background-color 300ms $ease-out;
  79     }
  80
  81     &:after {
  82       top: $bar-spacing;
  83       transition: top 300ms 300ms $ease-out,
  84       transform 300ms $ease-out,
  85       background-color 300ms $ease-out;
  86     }
  87
  88     &.animate {
  89       background-color: rgba(255, 255, 255, 0);
  90
  91       &:before {
  92         bottom: 0;
  93         transform: rotate(-45deg);
  94         transition: bottom 300ms $ease-out,
  95         transform 300ms 300ms $ease-out;
  96       }
  97
  98       &:after {
  99         top: 0;
 100         transform: rotate(45deg);
 101         transition: top 300ms $ease-out,
 102         transform 300ms 300ms $ease-out;
 103       }
 104     }
 105   }
 106 }