1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | h2.sg, h3.sg, ul.sg, p.sg {
|
13 | margin: 20px 0;
|
14 | line-height: 1.55;
|
15 | }
|
16 | h2.sg {
|
17 | font-size: 2.2em;
|
18 | font-weight: 100;
|
19 | margin-top: 3em;
|
20 | }
|
21 | h3.sg {
|
22 | font-size: 1.1em;
|
23 | font-weight: bold;
|
24 | }
|
25 | h3.sg + .sg {
|
26 | margin-top: -20px;
|
27 | }
|
28 |
|
29 |
|
30 | p.sg, ul.sg {
|
31 | color: #555;
|
32 | }
|
33 | h2.sg {
|
34 | color: #111;
|
35 | }
|
36 | h3.sg {
|
37 | color: #333;
|
38 | }
|
39 |
|
40 | code.sg {
|
41 | background: rgba(250, 250, 250, 0.5);
|
42 | color: #579;
|
43 |
|
44 | padding: 2px 5px;
|
45 | margin: 0 1px;
|
46 | border-radius: 2px;
|
47 | font-size: 0.8em;
|
48 | font-family: menlo, monospace;
|
49 | box-shadow: inset 0 0 0 1px rgba(0,0,0,0.01), inset -1px -1px rgba(0,0,0,0.01);
|
50 | }
|
51 |
|
52 | code.sg:first-child {
|
53 | background: rgba(0, 100, 250, 0.1);
|
54 | box-shadow: none;
|
55 | color: #357;
|
56 | }
|
57 |
|
58 | .sg-block, .sg-code, .sg-canvas, .sg-text {
|
59 | -webkit-box-sizing: border-box;
|
60 | -moz-box-sizing: border-box;
|
61 | box-sizing: border-box;
|
62 | }
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 | .sg-block {
|
80 | border-top: solid 1px rgba(0, 0, 0, 0.1);
|
81 | padding-top: 20px;
|
82 | margin: 20px 0;
|
83 | }
|
84 |
|
85 | .sg-block:last-of-type {
|
86 | padding-bottom: 20px;
|
87 | border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
88 | }
|
89 |
|
90 | .sg-block:after {
|
91 | content: '';
|
92 | display: table;
|
93 | clear: both;
|
94 | }
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 | @media (min-width: 768px) {
|
101 | .sg-text {
|
102 | float: left;
|
103 | width: 26%;
|
104 | }
|
105 |
|
106 | .sg-text + .sg-example,
|
107 | .sg-text + .sg-code {
|
108 | float: right;
|
109 | width: 70%;
|
110 | }
|
111 | }
|
112 |
|
113 | .sg-text > :first-child {
|
114 | margin-top: 0;
|
115 | }
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 | .sg-canvas {
|
123 | margin-bottom: 20px;
|
124 | }
|
125 |
|
126 | .sg-padded .sg-canvas {
|
127 | padding: 20px;
|
128 | border: solid 1px rgba(0, 0, 0, 0.1);
|
129 | border-radius: 3px;
|
130 | overflow-x: auto;
|
131 | }
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 | .sg-code {
|
138 | border: solid 1px transparent;
|
139 | overflow-x: auto;
|
140 | border-bottom-left-radius: 3px;
|
141 | border-bottom-right-radius: 3px;
|
142 |
|
143 | margin: 0;
|
144 | padding: 20px;
|
145 |
|
146 | font-size: 0.85em;
|
147 | font-family: menlo, monospace;
|
148 | line-height: 1.5;
|
149 | background: #fafaff;
|
150 | color: #333;
|
151 | }
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 | .sg .hljs-tag,
|
158 | .sg .hljs-comment {
|
159 | color: #999;
|
160 | }
|
161 |
|
162 | .sg .hljs-keyword,
|
163 | .sg .hljs-title {
|
164 | color: #345;
|
165 | }
|
166 |
|
167 | .sg .hljs-attribute {
|
168 | color: #59a;
|
169 | }
|
170 |
|
171 | .sg .hljs-string,
|
172 | .sg .hljs-number,
|
173 | .sg .hljs-value {
|
174 | color: #3ac;
|
175 | }
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 | .sg-code.sg-hidden {
|
187 | display: none;
|
188 | }
|
189 |
|
190 | .sg-expando {
|
191 | display: inline-block;
|
192 | margin: 0;
|
193 | padding: 0;
|
194 | outline: 0;
|
195 | border: 0;
|
196 | background: transparent;
|
197 |
|
198 | position: relative;
|
199 | top: -10px;
|
200 | left: -10px;
|
201 | padding: 5px 10px;
|
202 | margin-bottom: -20px;
|
203 | }
|
204 |
|
205 | .sg-expando-contract {
|
206 | top: 0;
|
207 | margin-bottom: 0;
|
208 | }
|
209 |
|
210 | .sg-expando:before {
|
211 | content: '•••';
|
212 | display: inline-block;
|
213 |
|
214 | height: 16px;
|
215 | width: 36px;
|
216 | line-height: 16px;
|
217 | text-align: center;
|
218 |
|
219 | font-size: 10px;
|
220 | background: #fafafa;
|
221 | border-radius: 3px;
|
222 | color: #888;
|
223 |
|
224 | }
|
225 |
|
226 | .sg-expando:hover:before,
|
227 | .sg-expando:focus:before {
|
228 | color: #222;
|
229 | background: #ddd;
|
230 | }
|
231 |
|
232 | .sg-expando:active:before {
|
233 | color: #fff;
|
234 | background: #111;
|
235 | }
|
236 |
|
237 | .sg-expando-contract:before {
|
238 | content: '\2715';
|
239 | }
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|