gulp-starter

1
@mixin burger {
2
  --burger-width: 30px;
3
  --burger-height: 30px;
4
  --burger-line-height: 2px;
5

6
  position: relative;
7
  border: none;
8
  padding: 0;
9
  width: var(--burger-width);
10
  height: var(--burger-height);
11
  color: #000;
12
  background-color: transparent;
13
  cursor: pointer;
14

15
  &::before,
16
  &::after {
17
    content: '';
18
    position: absolute;
19
    left: 0;
20
    width: 100%;
21
    height: var(--burger-line-height);
22
    background-color: currentColor;
23
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
24
  }
25

26
  &::before {
27
    top: 0;
28
  }
29

30
  &::after {
31
    top: calc(100% - var(--burger-line-height));
32
  }
33

34
  &__line {
35
    position: absolute;
36
    left: 0;
37
    top: 50%;
38
    width: 100%;
39
    height: var(--burger-line-height);
40
    background-color: currentColor;
41
    transform: translateY(-50%);
42
    transition: transform 0.3s ease-in-out;
43
  }
44

45
  &--active {
46
    &::before {
47
      top: 50%;
48
      transform: rotate(45deg);
49
      transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
50
    }
51

52
    &::after {
53
      top: 50%;
54
      transform: rotate(-45deg);
55
      transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
56
    }
57

58
    .burger__line {
59
      transform: scale(0);
60
      transition: transform 0.3s ease-in-out;
61
    }
62
  }
63
}
64