1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | h2.sg, h3.sg, ul.sg, p.sg { margin: 20px 0; }
|
13 | h2.sg { font-size: 2.2em; font-weight: 100; margin-top: 3em; }
|
14 | h3.sg { font-size: 1.1em; font-weight: bold; }
|
15 | h3.sg + .sg { margin-top: -20px; }
|
16 |
|
17 |
|
18 | p.sg, ul.sg { color: #777; }
|
19 | h2.sg { color: #aaa; }
|
20 | h3.sg { color: #404040; }
|
21 |
|
22 | code.sg {
|
23 | background: rgba(0, 100, 250, 0.1);
|
24 | color: #357;
|
25 |
|
26 | padding: 2px 5px;
|
27 | margin: 0 1px;
|
28 | border-radius: 2px;
|
29 | font-size: 0.8em;
|
30 | font-family: menlo, monospace;
|
31 | box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), inset -1px -1px rgba(0,0,0,0.05);
|
32 | }
|
33 |
|
34 | .sg-block, .sg-code, .sg-canvas, .sg-text {
|
35 | -webkit-box-sizing: border-box;
|
36 | -moz-box-sizing: border-box;
|
37 | box-sizing: border-box;
|
38 | }
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 | .sg-block {
|
56 | border-top: solid 1px rgba(0, 0, 0, 0.1);
|
57 | padding-top: 20px;
|
58 | margin: 20px 0;
|
59 | }
|
60 |
|
61 | .sg-block:last-of-type {
|
62 | padding-bottom: 20px;
|
63 | border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
64 | }
|
65 |
|
66 | .sg-block:after {
|
67 | content: '';
|
68 | display: table;
|
69 | clear: both;
|
70 | }
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | .sg-text {
|
77 | float: left;
|
78 | width: 26%;
|
79 | }
|
80 |
|
81 | .sg-text > :first-child {
|
82 | margin-top: 0;
|
83 | }
|
84 |
|
85 | .sg-text + .sg-example,
|
86 | .sg-text + .sg-code {
|
87 | float: right;
|
88 | width: 70%;
|
89 | }
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 | .sg-canvas {
|
96 | padding-bottom: 20px;
|
97 | }
|
98 |
|
99 | .sg-padded .sg-canvas {
|
100 | padding: 20px;
|
101 | border: solid 1px rgba(0, 0, 0, 0.1);
|
102 | border-bottom: 0;
|
103 | border-top-left-radius: 3px;
|
104 | border-top-right-radius: 3px;
|
105 | overflow-x: auto;
|
106 | }
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 | .sg-code {
|
113 | border: solid 1px rgba(0, 0, 0, 0.1);
|
114 | overflow-x: auto;
|
115 | border-bottom-left-radius: 3px;
|
116 | border-bottom-right-radius: 3px;
|
117 |
|
118 | margin: 0;
|
119 | padding: 10px 20px;
|
120 |
|
121 | font-size: 0.8em;
|
122 | font-family: menlo, monospace;
|
123 | line-height: 1.5;
|
124 | background: #f6f6ff;
|
125 | }
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 | .sg .hljs-tag,
|
132 | .sg .hljs-comment
|
133 | { color: #999; }
|
134 |
|
135 | .sg .hljs-keyword,
|
136 | .sg .hljs-title
|
137 | { color: #345; }
|
138 |
|
139 | .sg .hljs-attribute
|
140 | { color: #59a; }
|
141 |
|
142 | .sg .hljs-string,
|
143 | .sg .hljs-number,
|
144 | .sg .hljs-value
|
145 | { color: #7bc; }
|