-
Notifications
You must be signed in to change notification settings - Fork 497
/
_documentation.sass
346 lines (328 loc) · 6.79 KB
/
_documentation.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
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
// Layout
// Navigation
.widget-nav
padding: 0
padding-left: 15px
font-weight: lighter
background-color: $gray-light
.documentation-menu
height: 100%
overflow-y: auto
padding: 0
font-size: 1.2em
font-weight: bold
> ul
line-height: 2em
list-style: none
margin: 0
padding: 15px 0
ul ul li:before
content: ""
width: 8px
height: 8px
background-color: $brand-primary
border-radius: 1px
margin-right: 4px
display: inline-block
a
color: #242424
&:hover
color: $brand-primary
text-decoration: none
ul
font-size: .85em
padding: 0 0 5px 10px
line-height: 1.7em
list-style: none
// Left panel
.widget-description
padding-right: 0
.main-documentation
height: 100%
padding-top: 52px
.description
min-height: 84px
.shameless-marketing
float: right
width: 43%
color: rgba(white,.75)
.sticker
width: 60px
height: 60px
line-height: 58px
margin: 0 auto
border-radius: 50%
opacity: 0
animation: arrow 1s ease-in-out
animation-fill-mode: forwards
border: solid 2px rgba(white,.5)
img
position: relative
top: -2px
.sticker-algolia
animation-delay: .5s
img
top: -4px
.sticker-open-source
animation-delay: 1s
.sticker-ux
animation-delay: 1.5s
.documentation-content
position: absolute
top: 0
left: 0
right: 0
bottom: 0
padding: 30px
overflow-y: scroll
font-size: 13px
line-height: 1.8em
color: rgba(0,0,0,0.75)
h1[id], h2[id], h3[id]
clear: both
h1[id], h2[id], h3[id], h4[id], h5[id] // anchorable titles
&:before
content: ""
display: block
height: $anchor-offset
margin: -$anchor-offset 0 0
a.anchor
display: inline-block
font-size: 0.7em
visibility: hidden
padding-right: 0.2em
margin-top: -0.5em
color: inherit
&:hover, &:active, &:focus
color: inherit
text-decoration: none
&:hover
a.anchor
visibility: visible
> p, > div[id], > h1, > h2, > h3, > h4, > h5, > .h1, > .h2, > .h3, > .h4, > .h5, > pre, > .highlight, > ul, > .row
margin-right: 50%
max-width: 50%
> p
font-size: 1.15em
> ul
font-size: 1.1em
li
padding-bottom: 6px
> .highlight, > .row .highlight
pre
border: 1px solid #A3B6CB
.o
color: inherit
h2, .h2
margin-top: 3em
font-size: 2em
font-weight: normal
text-transform: uppercase
clear: both
&:first-child
margin-top: 0
h3, .h3
margin: 2em 0 .8em
font-size: 1.7em
font-weight: bold
clear: both
h4, .h4
border-bottom: dashed 1px #ccc
padding: 0 0 8px
margin: 2em 0 1em 0
font-size: 1.3em
font-weight: bold
clear: both
> p, > ul
code
background-color: #F3F3F3
border: 1px solid darken(#F3F3F3,7%)
color: $text-color
font-weight: bold
.widget-icon
margin: 4px 20px 20px 0
.html-container
border: none
color: #A3B6CB
padding: 9.5px
margin: 0 0 10px
background-color: #0A1724
word-wrap: normal
white-space: pre
overflow-x: scroll
.widget-container
padding: 50px 40px 40px
border: solid 1px #E4E4E4
border-radius: 5px
position: relative
overflow-x: hidden
&:after
font-size: 11px
content: "Widget display"
top: 0
left: 0
color: #999
padding: 4px 6px
line-height: 1em
position: absolute
background-color: $gray-light
border: solid 1px #E4E4E4
border-width: 0 1px 1px 0
border-radius: 5px 0 3px 0
// Code box
.code-samples
background-color: #172C4F
background: linear-gradient(to bottom, #0a1724 0%,#172c4f 100%)
position: absolute
width: 46%
top: 0
right: 0
bottom: 0
.code-box
position: relative
width: 43%
float: right
clear: right
.btn-group
position: absolute
right: 0
top: -3em
.toggle-doc-button
text-align: right
color: $brand-primary
background-color: #0A1724
border: none
transition: all .2s
&:hover
color: #fff
&:active, &:focus
outline: 0px
&.active
font-weight: bolder
background: #163350
.copy-btn
display: block
position: absolute
right: 5px
top: 5px
opacity: 0
font-size: .9em
background-color: rgba($brand-primary,.1)
border: none
text-transform: uppercase
color: rgba(white,.4)
transition: opacity .2s
&:active, &:focus
outline: 0
&:active
color: white !important
background-color: rgba($brand-primary,.4)
color: #0A1724
&:hover
.copy-btn
display: block
opacity: 1
.jsdoc
border: none
color: #A3B6CB
padding: 9.5px
margin: 0 0 10px
background-color: #0A1724
code
background-color: #0A1724
.attr-optional code
color: #46AEDA
.attr-required code
color: $success-color
h5
text-decoration: underline
color: #ddd
pre
background: transparent
border: none
padding: 0
margin-bottom: 1.5em
table
table-layout: fixed
margin-top: 1em
width: 100%
th
font-size: 11px
font-weight: bold
text-transform: uppercase
border-bottom: solid 1px #758393
td
padding: 0.5em
border-bottom: solid 1px #162B50
code
color: white
.attr-legend
padding: 10px
margin: 0
text-align: right
span
font-size: 10px
color: #58D158
// Widgets
#q input
width: 100%
padding: 2px 3px
// debug
.debug-widget
position: relative
&.widget-container:after
z-index: 11
border: none
> [class^=ais-]
padding: 4px
outline: 1px solid #660000
&:before
content: "." attr(class)
text-align: right
white-space: nowrap
font-size: 12px
font-weight: bold
z-index: 10
position: absolute
top: 0
right: 0
left: 0
padding: 4px 6px
line-height: 1em
background-color: $gray-light
color: #660000
[class^=ais-]
cursor: pointer
padding: 4px
&:hover
outline: 1px solid #660000
&:before
content: "." attr(class)
text-align: right
white-space: nowrap
font-size: 12px
font-weight: bold
z-index: 10
position: absolute
top: 0
right: 0
left: 0
padding: 4px 6px
line-height: 1em
background-color: $gray-light
color: #660000
[class^=ais-]
&:hover
outline: 1px solid #990000
&:before
color: #990000
[class^=ais-]
&:hover
outline: 1px solid #CC3300
&:before
color: #CC3300
[class^=ais-]
&:hover
outline: 1px solid #FF6600
&:before
color: #FF6600