blob: 6088a41c21730129299ed16e544558ac96d1bd02 (
plain)
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
|
@import compass/css3
$scrollableArea: 2000px
$exampleWidth: 400px
$exampleHeight: 180px
*, *:after, *:before
+box-sizing(border-box)
body
position: relative
.yellow-box
width: 100px
height: 100px
background-color: #fe8
pointer-events: none
.green-box
margin-top: ($exampleHeight - 50px) / 2
margin-left: ($exampleWidth - 200px) / 2
width: 200px
height: 50px
background-color: #4e9
.no-green &
display: none
.scroll-box
height: 150px
border: 10px solid #eee
background: #fbfbfb
overflow: auto
position: relative
.scroll-content
height: $scrollableArea
width: $scrollableArea
padding: ($scrollableArea - $exampleHeight)/2 ($scrollableArea - $exampleWidth)/2 + 9
pre.pre-with-output
margin: 0
width: 50%
float: left
code mark
background: #b8daff
color: #000
p, h2, h3
clear: both
output
display: block
position: relative
width: 50%
float: right
margin-bottom: 15px
&.scroll-page
.scroll-box
overflow: hidden
&:after
content: "↕ scroll the page ↕"
&:after
content: "↕ scroll this area ↕"
position: absolute
bottom: 25px
width: 100%
text-align: center
font-size: 16px
font-variant: small-caps
color: #777
opacity: 1
transition: opacity 0.2s
&.scrolled:after
opacity: 0
&[deactivated], &[activated]
.scroll-box
pointer-events: none
cursor: pointer
&:after
position: absolute
top: 0
left: 0
right: 0
bottom: 0
opacity: 1
content: "Click To Show"
background-color: #AAA
border-left: 10px solid #EEE
color: white
font-size: 24px
font-variant: normal
padding-top: 80px
&[activated]
&:after
content: "Click To Hide"
&.visible-enabled
&:after
height: 35px
padding-top: 5px
.attachment-mark
position: relative
&:after
content: "A"
width: 10px
height: 10px
background-color: red
display: inline-block
line-height: 10px
font-size: 9px
color: white
text-align: center
position: absolute
span.attachment-mark
&:after
position: relative
top: -1px
margin-right: 1px
.tether-marker-dot
@extend .attachment-mark
position: absolute
&:after
top: -5px
left: -5px
@each $type in target, element
.tether-#{ $type }-marker
position: absolute
@each $side in left, top, bottom, right
div.tether-#{ $type }-attached-#{ $side } &
#{ $side }: 0
div.tether-#{ $type }-attached-center &
left: 50%
.tether-element-attached-middle .tether-element-marker
top: 50px
.tether-target-attached-middle .tether-target-marker
top: 25px
.tether-element
position: relative
&.tether-pinned-left
box-shadow: inset 2px 0 0 0 red
&.tether-pinned-right
box-shadow: inset -2px 0 0 0 red
&.tether-pinned-top
box-shadow: inset 0 2px 0 0 red
&.tether-pinned-bottom
box-shadow: inset 0 -2px 0 0 red
.tether-target
position: relative
.tether-element.tether-out-of-bounds[data-example="hide"]
display: none
[data-example^="optimizer"]
&.lang-javascript
/* This should just be a `code` selector, but sass doesn't allow that with & */
min-height: 220px
&.tether-element
&:before
margin-top: 26px
display: block
text-align: center
content: "I'm in the body"
line-height: 1.2
font-size: 15px
padding: 4px
color: #666
.scroll-box .tether-element:before
content: "I'm in my scroll parent!"
.tether-element[data-example="scroll-visible"]
height: 30px
.tether-marker-dot
display: none
.hs-doc-content h2.projects-header
text-align: center
font-weight: 300
.projects-paragraph
text-align: center
a
+inline-block
text-align: center
margin-right: 30px
color: inherit
span
+inline-block
margin-bottom: 20px
font-size: 20px
color: inherit
font-weight: 300
img
display: block
max-width: 100%
width: 100px
|
