css-reference/sass/menu.sass at master · Calinou/css-reference · GitHub

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
.menu
  background: #fff
  position: relative

.menu-logo
  align-items: center
  display: flex
  justify-content: flex-start
  figure
    align-items: center
    display: flex
    justify-content: center
    width: $logo-width
  img
    display: block

.menu-logo-icon
  height: 24px
  position: relative
  width: 21px

.menu-logo-type
  height: 18.5px
  margin-bottom: 6px
  margin-left: 9px
  width: 160px

.menu-nav
  align-items: stretch
  flex-direction: column
  justify-content: flex-start
  overflow: hidden

.menu-search
  flex-grow: 0
  flex-shrink: 0
  position: relative
  input
    -moz-appearance: none
    -webkit-appearance: none
    border: none
    display: block
    font-family: inherit
    font-size: 0.8rem
    padding: 1.5em
    padding-left: 3.5rem
    width: 100%
    &:focus + .icon
      opacity: 1
  .icon
    left: 2rem
    opacity: 0.3
    pointer-events: none
    position: absolute
    top: 50%

.menu-list
  align-items: stretch
  display: flex
  flex-direction: column
  flex-grow: 1
  flex-shrink: 1
  font-family: $family-monospace
  font-size: 0.7rem
  justify-content: flex-start
  overflow: hidden
  position: relative
  ul
    -webkit-overflow-scrolling: touch
    flex-grow: 1
    overflow: auto
  a
    display: block
    padding: 0.75rem 2rem
    transition: none
    .highlight
      background: $yellow
      color: $yellow-invert
    &:hover,
    &.is-selected
      background: $alpha
      color: $alpha-invert
  &.is-searching
    a
      display: none
      &.is-highlighted,
      &.is-selected,
        display: block

.menu-list-shadow
  display: block
  left: 0
  opacity: 0
  pointer-events: none
  position: absolute
  right: 0
  &.is-top
    background: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
    height: 1rem
    top: 0
    transform-origin: center top
  &.is-bottom
    background: linear-gradient(rgba(#000, 0), rgba(#000, 0.1))
    bottom: 0
    height: 1rem
    opacity: 1
    transform: scaleY(1)
    transform-origin: center bottom

.menu-close
  align-items: center
  background: $link
  color: $link-invert
  display: flex
  flex-grow: 0
  flex-shrink: 0
  font-weight: $weight-bold
  justify-content: center
  padding: 1rem
  text-align: center
  strong
    color: $link-invert
  .icon
    margin-right: 0.25rem
    margin-top: 1px

.menu-hello
  background: #fff
  min-height: 218px

#huggingFace
  background: #fff
  color: $text-strong
  display: none
  font-size: 16px
  line-height: 1.4
  padding: 1.5rem
  padding-bottom: 1rem
  img
    height: 24px
    margin-top: -4px
    vertical-align: middle
    width: 24px
  strong
    position: relative
    &:before
      background: hsl(171, 100%, 81%)
      bottom: 0
      content: ""
      height: 2px
      left: 0
      position: absolute
      right: 0
  p
    margin-bottom: 0.5em

#carbon
  display: block
  font-size: 14px
  line-height: 1.2
  min-height: 218px

#carbonads
  a,
  img,
  span
    display: block
    max-width: 240px
  .carbon-wrap
    a:first-child
      height: calc(100px + 1rem)
      padding: 1rem 1rem 0
    a:last-child
      padding: 0.5rem 1rem 0
  .carbon-poweredby
    color: $text-light
    padding: 0.5rem 1rem 1rem
  &:hover
    .carbon-wrap a:last-child
      text-decoration: underline

+mobile
  .menu-header
    display: none
  .menu-nav
    +overlay
    background: #fff
    display: none
    position: fixed
    &.is-active
      display: flex
  #huggingFace
    padding: 2rem
  #carbonads
    .carbon-wrap a:first-child,
    .carbon-wrap a:last-child,
    .carbon-poweredby
      padding-left: 2rem
      padding-right: 2rem

+desktop
  .menu
    align-items: stretch
    background: #fff
    bottom: 0
    box-shadow: $shadow
    display: flex
    flex-direction: column
    justify-content: flex-start
    left: 0
    min-height: 100vh
    position: fixed
    top: 0
    width: $menu-width
  .menu-header
    flex-grow: 0
    flex-shrink: 0
    padding: 2rem
  .menu-nav
    border-top: 1px solid $border
    display: flex
    flex-grow: 1
    flex-shrink: 1
  .menu-list
    a
      padding: 0.5rem 2rem
  .menu-hello
    background: #fff
    flex-grow: 0
    flex-shrink: 0
  .menu-close
    display: none