sass/header.sass


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

@import settings

header
  position: fixed
  top: 0
  left: 0
  z-index: 11
  width: 100%
  right: 0
  z-index: 11
  display: flex 
  align-items: center
  flex-direction: column

  .logo
    display: flex
    align-items: center

    p
      +resolution(992)
        font-size: 16px
        font-weight: 600
        letter-spacing: $em
        color: $grey-normal
      +resolution(0, 991)
        display: none

    a
      +resolution(992)
        margin-right: 20px

  .header
    display: flex
    justify-content: space-between
    align-items: center
    height: 74px
    width: 100%
    +resolution(0, 575)
      border-bottom: 1px solid $grey-light

  .links
    display: flex
    align-items: center
    +resolution(0, 575)
      display: none

    a
      font-weight: 700
      font-family: $a
      color: $black
      letter-spacing: $em
      text-decoration: none
      display: flex
      align-items: center
      height: 24px
      transition: color 250ms linear
      +resolution(576, 991)
        font-size: 13px
        margin-right: 10px
      +resolution(992)
        font-size: 14px
        margin-right: 20px
      +resolution(0, 575)
        font-size: 18px

      &:hover
        color: $primary

      &:last-child
        &:hover
          span
            color: $primary

        img
          +resolution(576)
            margin-right: 5px

        span
          color: $grey-dark
          font-size: 14px
          font-family: $a
          font-weight: 700
          letter-spacing: $em
          transition: color 250ms linear

        &::before
          content: ''
          display: block
          width: 1px
          height: 100%
          background-color: $grey-light3
          +resolution(576)
            margin-right: 20px

.mobile-menu
  +resolution(576)
    display: none

  .upper-part
    width: 100%
    height: 74px
    display: flex
    align-items: center

    img
      width: 32px
      height: 32px

    > img
      margin-left: 20px

  .bottom-part
    width: 100%
    position: absolute
    top: 100%
    left: 0
    z-index: 11
    display: flex
    flex-direction: column
    justify-content: center
    background: rgb(24 25 28 / 40%)
    height: 100vh
    justify-content: flex-start

    .bottom-menu
      width: 100%
      padding: 0 15px 32px
      background: $white

    a
      padding: 24px 0
      max-height: 64px
      display: flex
      align-items: center
      font-weight: 700
      font-family: $a
      color: $black
      letter-spacing: $em
      text-decoration: none
      font-size: 18px
      border-bottom: 1px solid $grey-light

  .not__visible
    display: none

  .visible
    display: flex