1 | @charset "UTF-8";
|
2 | *, *:after, *:before {
|
3 | box-sizing: border-box; }
|
4 |
|
5 | body {
|
6 | position: relative; }
|
7 |
|
8 | .yellow-box {
|
9 | width: 100px;
|
10 | height: 100px;
|
11 | background-color: #fe8;
|
12 | pointer-events: none; }
|
13 |
|
14 | .green-box {
|
15 | margin-top: 65px;
|
16 | margin-left: 100px;
|
17 | width: 200px;
|
18 | height: 50px;
|
19 | background-color: #4e9; }
|
20 | .no-green .green-box {
|
21 | display: none; }
|
22 |
|
23 | .scroll-box {
|
24 | height: 150px;
|
25 | border: 10px solid #eee;
|
26 | background: #fbfbfb;
|
27 | overflow: auto;
|
28 | position: relative; }
|
29 |
|
30 | .scroll-content {
|
31 | height: 2000px;
|
32 | width: 2000px;
|
33 | padding: 910px 809px; }
|
34 |
|
35 | pre.pre-with-output {
|
36 | margin: 0;
|
37 | width: 50%;
|
38 | float: left; }
|
39 | pre.pre-with-output code mark {
|
40 | background: #b8daff;
|
41 | color: #000; }
|
42 |
|
43 | p, h2, h3 {
|
44 | clear: both; }
|
45 |
|
46 | output {
|
47 | display: block;
|
48 | position: relative;
|
49 | width: 50%;
|
50 | float: right;
|
51 | margin-bottom: 15px; }
|
52 | output.scroll-page .scroll-box {
|
53 | overflow: hidden; }
|
54 | output.scroll-page:after {
|
55 | content: "↕ scroll the page ↕"; }
|
56 | output:after {
|
57 | content: "↕ scroll this area ↕";
|
58 | position: absolute;
|
59 | bottom: 25px;
|
60 | width: 100%;
|
61 | text-align: center;
|
62 | font-size: 16px;
|
63 | font-variant: small-caps;
|
64 | color: #777;
|
65 | opacity: 1;
|
66 | -webkit-transition: opacity 0.2s;
|
67 | transition: opacity 0.2s; }
|
68 | output.scrolled:after {
|
69 | opacity: 0; }
|
70 | output[deactivated], output[activated] {
|
71 | cursor: pointer; }
|
72 | output[deactivated] .scroll-box, output[activated] .scroll-box {
|
73 | pointer-events: none; }
|
74 | output[deactivated]:after, output[activated]:after {
|
75 | position: absolute;
|
76 | top: 0;
|
77 | left: 0;
|
78 | right: 0;
|
79 | bottom: 0;
|
80 | opacity: 1;
|
81 | content: "Click To Show";
|
82 | background-color: #AAA;
|
83 | border-left: 10px solid #EEE;
|
84 | color: white;
|
85 | font-size: 24px;
|
86 | font-variant: normal;
|
87 | padding-top: 80px; }
|
88 | output[activated]:after {
|
89 | content: "Click To Hide"; }
|
90 | output[activated].visible-enabled:after {
|
91 | height: 35px;
|
92 | padding-top: 5px; }
|
93 |
|
94 | .attachment-mark, .tether-marker-dot {
|
95 | position: relative; }
|
96 | .attachment-mark:after, .tether-marker-dot:after {
|
97 | content: "A";
|
98 | width: 10px;
|
99 | height: 10px;
|
100 | background-color: red;
|
101 | display: inline-block;
|
102 | line-height: 10px;
|
103 | font-size: 9px;
|
104 | color: white;
|
105 | text-align: center;
|
106 | position: absolute; }
|
107 |
|
108 | span.attachment-mark:after, span.tether-marker-dot:after {
|
109 | position: relative;
|
110 | top: -1px;
|
111 | margin-right: 1px; }
|
112 |
|
113 | .tether-marker-dot {
|
114 | position: absolute; }
|
115 | .tether-marker-dot:after {
|
116 | top: -5px;
|
117 | left: -5px; }
|
118 |
|
119 | .tether-target-marker {
|
120 | position: absolute; }
|
121 | div.tether-target-attached-left .tether-target-marker {
|
122 | left: 0; }
|
123 | div.tether-target-attached-top .tether-target-marker {
|
124 | top: 0; }
|
125 | div.tether-target-attached-bottom .tether-target-marker {
|
126 | bottom: 0; }
|
127 | div.tether-target-attached-right .tether-target-marker {
|
128 | right: 0; }
|
129 | div.tether-target-attached-center .tether-target-marker {
|
130 | left: 50%; }
|
131 |
|
132 | .tether-element-marker {
|
133 | position: absolute; }
|
134 | div.tether-element-attached-left .tether-element-marker {
|
135 | left: 0; }
|
136 | div.tether-element-attached-top .tether-element-marker {
|
137 | top: 0; }
|
138 | div.tether-element-attached-bottom .tether-element-marker {
|
139 | bottom: 0; }
|
140 | div.tether-element-attached-right .tether-element-marker {
|
141 | right: 0; }
|
142 | div.tether-element-attached-center .tether-element-marker {
|
143 | left: 50%; }
|
144 |
|
145 | .tether-element-attached-middle .tether-element-marker {
|
146 | top: 50px; }
|
147 |
|
148 | .tether-target-attached-middle .tether-target-marker {
|
149 | top: 25px; }
|
150 |
|
151 | .tether-element {
|
152 | position: relative; }
|
153 | .tether-element.tether-pinned-left {
|
154 | box-shadow: inset 2px 0 0 0 red; }
|
155 | .tether-element.tether-pinned-right {
|
156 | box-shadow: inset -2px 0 0 0 red; }
|
157 | .tether-element.tether-pinned-top {
|
158 | box-shadow: inset 0 2px 0 0 red; }
|
159 | .tether-element.tether-pinned-bottom {
|
160 | box-shadow: inset 0 -2px 0 0 red; }
|
161 |
|
162 | .tether-target {
|
163 | position: relative; }
|
164 |
|
165 | .tether-element.tether-out-of-bounds[data-example="hide"] {
|
166 | display: none; }
|
167 |
|
168 | [data-example^="optimizer"].lang-javascript {
|
169 |
|
170 | min-height: 220px; }
|
171 |
|
172 | [data-example^="optimizer"].tether-element:before {
|
173 | margin-top: 26px;
|
174 | display: block;
|
175 | text-align: center;
|
176 | content: "I'm in the body";
|
177 | line-height: 1.2;
|
178 | font-size: 15px;
|
179 | padding: 4px;
|
180 | color: #666; }
|
181 |
|
182 | [data-example^="optimizer"] .scroll-box .tether-element:before {
|
183 | content: "I'm in my scroll parent!"; }
|
184 |
|
185 | .tether-element[data-example="scroll-visible"] {
|
186 | height: 30px; }
|
187 | .tether-element[data-example="scroll-visible"] .tether-marker-dot {
|
188 | display: none; }
|
189 |
|
190 | .hs-doc-content h2.projects-header {
|
191 | text-align: center;
|
192 | font-weight: 300; }
|
193 |
|
194 | .projects-paragraph {
|
195 | text-align: center; }
|
196 | .projects-paragraph a {
|
197 | display: inline-block;
|
198 | vertical-align: middle;
|
199 | *vertical-align: auto;
|
200 | *zoom: 1;
|
201 | *display: inline;
|
202 | text-align: center;
|
203 | margin-right: 30px;
|
204 | color: inherit; }
|
205 | .projects-paragraph a span {
|
206 | display: inline-block;
|
207 | vertical-align: middle;
|
208 | *vertical-align: auto;
|
209 | *zoom: 1;
|
210 | *display: inline;
|
211 | margin-bottom: 20px;
|
212 | font-size: 20px;
|
213 | color: inherit;
|
214 | font-weight: 300; }
|
215 | .projects-paragraph a img {
|
216 | display: block;
|
217 | max-width: 100%;
|
218 | width: 100px; }
|