Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: scss/_content.scss

Issue 29361647: Issue 4607 - Default content styles (Closed)
Left Patch Set: Changed heading and space sizes. Created Nov. 3, 2016, 5:48 p.m.
Right Patch Set: See comments for details Created Dec. 1, 2016, 2:05 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « scss/_base.scss ('k') | scss/_variables.scss » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 /*! 1 /*!
2 * This file is part of universal-design-language 2 * This file is part of website-defaults
3 * Copyright (C) 2016 Eyeo GmbH 3 * Copyright (C) 2016 Eyeo GmbH
4 * 4 *
5 * universal-design-language is free software: you can redistribute it and/or 5 * website-defaults is free software: you can redistribute it and/or
6 * modify it under the terms of the GNU General Public License as published by 6 * modify it under the terms of the GNU General Public License as published by
7 * the Free Software Foundation, either version 3 of the License, or 7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version. 8 * (at your option) any later version.
9 * 9 *
10 * universal-design-language is distributed in the hope that it will be useful, 10 * website-defaults is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of 11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details. 13 * GNU General Public License for more details.
14 * 14 *
15 * You should have received a copy of the GNU General Public License 15 * You should have received a copy of the GNU General Public License
16 * along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>. 16 * along with website-defaults. If not, see <http://www.gnu.org/licenses/>.
17 */ 17 */
18 18
19 /* HTML Content 19 /*******************************************************************************
20 * Content styles
20 ******************************************************************************* 21 *******************************************************************************
21 * 1. Headings 22 * 1. Document
22 * 2. Blockquotes 23 * 2. Headings
23 * 3. Links 24 * 3. Body content
24 * 4. Code Blocks
25 * 5. Unstyled Lists
26 * 6. Image Alignment
27 * 7. Tables
28 * 8. Embeds
29 ******************************************************************************/ 25 ******************************************************************************/
26
27 /* Document
28 ******************************************************************************/
29
30 p,
31 ol,
32 ul,
33 dl,
34 pre,
35 blockquote
36 {
37 /* Set consistent margins (opinionated) */
38 margin: 1em 0em;
39 }
30 40
31 /* Headings 41 /* Headings
32 ******************************************************************************/ 42 ******************************************************************************/
33 43
44 h1,
45 h2,
46 h3,
47 h4,
48 h5,
49 h6
50 {
51 /* Margin on top **only** (opinionated) */
52 margin: 2em 0em 0em 0em;
53 }
54
34 h1 55 h1
35 { 56 {
36 font-size: 42px; 57 font-size: 2em;
37 margin-top: $large-space;
38 } 58 }
39 59
40 h2 60 h2
41 { 61 {
42 font-size: 36px; 62 font-size: 1.5em;
43 margin-top: $large-space;
44 } 63 }
45 64
46 h3 65 h3
47 { 66 {
48 font-size: 24px; 67 font-size: 1.25em;
49 margin-top: $medium-space;
50 } 68 }
51 69
52 h4 70 h4
53 { 71 {
54 font-size: 20px; 72 font-size: 1em;
55 margin-top: $medium-space;
56 } 73 }
57 74
58 h5 75 h5
59 { 76 {
60 font-size: 16px; 77 font-size: 0.8em;
61 margin-top: $small-space;
62 } 78 }
63 79
64 h6 80 h6
65 { 81 {
66 font-size: 14px; 82 font-size: 0.7em;
67 margin-top: $small-space;
68 } 83 }
69 84
70 /* Blockquotes 85 /* Body content
71 ******************************************************************************/ 86 ******************************************************************************/
72 87
73 [dir="ltr"] blockquote 88 abbr
74 { 89 {
75 padding-left: $small-space; 90 text-decoration: underline;
76 border-left: 5px solid $gray; 91 cursor: help;
77 } 92 }
78 93
79 [dir="rtl"] blockquote 94 b,
95 strong
80 { 96 {
81 padding-right: $small-space; 97 font-weight: $bold-weight;
82 border-right: 5px solid $gray;
83 } 98 }
84 99
85 /* Links 100 small
86 ******************************************************************************/ 101 {
102 font-size: $small-font;
103 }
104
105 sup
106 {
107 position: relative;
108 font-size: 75%;
109 vertical-align: super;
110 }
87 111
88 a, 112 a,
89 a:visited 113 a:visited
90 { 114 {
91 color: $blue-dark; 115 color: $accent;
116 /* Remove the gray background on active links in IE 10. */
117 background-color: transparent;
92 text-decoration: none; 118 text-decoration: none;
119 /* Set default pointer regardless of href (opinionated) */
120 cursor: pointer;
93 } 121 }
94 122
95 a:hover, 123 a:hover,
96 a:active, 124 a:active,
97 a:focus 125 a:focus
98 { 126 {
99 text-decoration: underline; 127 text-decoration: underline;
100 } 128 }
101 129
102 /* Code Blocks 130 img
103 ******************************************************************************/
104
105 pre,
106 code
107 { 131 {
108 padding: $small-space / 4; 132 /* Make fixed width images responsive */
109 background-color: $gray-light; 133 max-width: 100%;
134 /* Remove the border on images inside links in IE 10-. */
135 border-style: none;
110 } 136 }
111 137
112 pre 138 hr
113 { 139 {
114 display: block; 140 border: 1px solid $secondary-light;
115 padding: 0 $small-space;
116 } 141 }
117 142
118 pre > code 143 blockquote
119 { 144 {
120 padding: 0; 145 padding-left: 1em;
121 background-color: transparent; 146 border-left: 5px solid $secondary;
122 } 147 }
123 148
124 /* Unstyled Lists 149 [dir="rtl"] blockquote
125 ******************************************************************************/
126
127 .unstyled-list,
128 .unstyled-list ul
129 { 150 {
130 list-style-type: none; 151 padding-right: 1em;
152 padding-left: 0em;
153 border-right: 5px solid $secondary-light;
154 border-left: 0px;
131 } 155 }
132 156
133 [dir="ltr"] .unstyled-list 157 ol,
158 ul
134 { 159 {
135 padding-left: 0; 160 padding-left: 1.5em;
136 } 161 }
137 162
138 [dir="rtl"] .unstyled-list 163 [dir="rtl"] ol,
164 [dir="rtl"] ul
139 { 165 {
140 padding-right: 0; 166 padding-right: 2em;
167 padding-left: 0em;
141 } 168 }
142 169
143 [dir="ltr"] .unstyled-list ul 170 li
144 { 171 {
145 padding-left: $medium-space; 172 margin: 0.5em 0em;
146 } 173 }
147 174
148 [dir="rtl"] .unstyled-list ul 175 ol ol,
176 ul ul,
177 ol ul,
178 ul ol
149 { 179 {
150 padding-right: $small-space; 180 /* prevent double spacing lists */
181 margin: 0em;
151 } 182 }
152 183
153 /* Image Alignment 184 ol ol
154 ******************************************************************************/
155
156 img
157 { 185 {
158 margin: 0 $small-space / 2; 186 list-style-type: lower-alpha;
159 } 187 }
160 188
161 .block, 189 dt
162 .sol,
163 .eol
164 { 190 {
165 display: block; 191 /* undo browser default (opinionated)*/
166 margin: 0; 192 font-weight: $bold-weight;
167 } 193 }
168 194
169 .block 195 dd
170 { 196 {
171 display: block; 197 margin: 0.5em 0em 1em 0em;
172 width: 100%;
173 height: auto;
174 clear: both;
175 overflow: auto;
176 margin: $small-space 0;
177 } 198 }
178
179 [dir="ltr"] .sol
180 {
181 margin-right: $small-space;
182 float: left;
183 }
184
185 [dir="rtl"] .sol
186 {
187 margin-left: $small-space;
188 float: right;
189 }
190
191 [dir="ltr"] .eol
192 {
193 margin-left: $small-space;
194 float: right;
195 }
196
197 [dir="rtl"] .eol
198 {
199 margin-right: $small-space;
200 float: left;
201 }
202
203 /* Tables
204 ******************************************************************************/
205
206 table
207 {
208 border-collapse: collapse;
209 width: 100%;
210 }
211
212 td,
213 th
214 {
215 padding: $small-space / 4 $small-space / 2;
216 }
217
218 th
219 {
220 background-color: $white;
221 }
222
223 tr:nth-child(even)
224 {
225 background-color: $white;
226 }
227
228 tr:nth-child(odd)
229 {
230 background-color: $gray-light;
231 }
232
233 /* Embeds
234 ******************************************************************************/
235
236 .embed
237 {
238 position: relative;
239 display: block;
240 height: 0;
241 padding: 0 0 56.25% 0;
242 overflow: hidden;
243 }
244
245 .embed iframe
246 {
247 position: absolute;
248 top: 0;
249 bottom: 0;
250 left: 0;
251 width: 100%;
252 height: 100%;
253 border: 0;
254 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld