forked from jgthms/css-reference
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmenu.sass
290 lines (273 loc) · 5.18 KB
/
menu.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
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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
.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
&:first-child
height: 24px
position: relative
width: 21px
&:last-child
height: 18.5px
margin-bottom: 6px
margin-left: 9px
width: 160px
.menu-title
color: $text-light
margin-top: 1rem
padding-right: 1rem
.menu-share
align-items: center
display: flex
position: relative
.menu-share-label
margin-right: 0.5rem
.menu-share-button
align-items: center
display: flex
height: 2.5rem
justify-content: center
position: relative
width: 2.5rem
&:before
+overlay
background: $background
border-radius: 5px
content: ""
display: block
height: 100%
opacity: 0
transform: scale(1.2)
transform-origin: center center
transition-duration: $speed
transition-property: opacity, transform
width: 100%
svg
height: 1rem
position: relative
width: auto
&:hover:before
opacity: 1
transform: scale(1)
.menu-share-nav
font-weight: $weight-bold
position: absolute
right: 1rem
top: 1rem
.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
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 + p
margin-top: 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
padding: 2rem
padding-bottom: 0
.menu-share
background: #fff
bottom: 0
box-shadow: 0 0 1rem rgba(#000, 0.2)
left: 0
padding: 0.5rem 1rem
position: fixed
right: 0
.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
padding-bottom: 1.5rem
.menu-share
margin-top: 0.5rem
.menu-share-nav
display: none
.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