corrade-nucleus-nucleons – Blame information for rev 20
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
20 | office | 1 | // |
2 | // Typography |
||
3 | // -------------------------------------------------- |
||
4 | |||
5 | |||
6 | // Headings |
||
7 | // ------------------------- |
||
8 | |||
9 | h1, h2, h3, h4, h5, h6, |
||
10 | .h1, .h2, .h3, .h4, .h5, .h6 { |
||
11 | font-family: @headings-font-family; |
||
12 | font-weight: @headings-font-weight; |
||
13 | line-height: @headings-line-height; |
||
14 | color: @headings-color; |
||
15 | |||
16 | small, |
||
17 | .small { |
||
18 | font-weight: normal; |
||
19 | line-height: 1; |
||
20 | color: @headings-small-color; |
||
21 | } |
||
22 | } |
||
23 | |||
24 | h1, .h1, |
||
25 | h2, .h2, |
||
26 | h3, .h3 { |
||
27 | margin-top: @line-height-computed; |
||
28 | margin-bottom: (@line-height-computed / 2); |
||
29 | |||
30 | small, |
||
31 | .small { |
||
32 | font-size: 65%; |
||
33 | } |
||
34 | } |
||
35 | h4, .h4, |
||
36 | h5, .h5, |
||
37 | h6, .h6 { |
||
38 | margin-top: (@line-height-computed / 2); |
||
39 | margin-bottom: (@line-height-computed / 2); |
||
40 | |||
41 | small, |
||
42 | .small { |
||
43 | font-size: 75%; |
||
44 | } |
||
45 | } |
||
46 | |||
47 | h1, .h1 { font-size: @font-size-h1; } |
||
48 | h2, .h2 { font-size: @font-size-h2; } |
||
49 | h3, .h3 { font-size: @font-size-h3; } |
||
50 | h4, .h4 { font-size: @font-size-h4; } |
||
51 | h5, .h5 { font-size: @font-size-h5; } |
||
52 | h6, .h6 { font-size: @font-size-h6; } |
||
53 | |||
54 | |||
55 | // Body text |
||
56 | // ------------------------- |
||
57 | |||
58 | p { |
||
59 | margin: 0 0 (@line-height-computed / 2); |
||
60 | } |
||
61 | |||
62 | .lead { |
||
63 | margin-bottom: @line-height-computed; |
||
64 | font-size: floor((@font-size-base * 1.15)); |
||
65 | font-weight: 300; |
||
66 | line-height: 1.4; |
||
67 | |||
68 | @media (min-width: @screen-sm-min) { |
||
69 | font-size: (@font-size-base * 1.5); |
||
70 | } |
||
71 | } |
||
72 | |||
73 | |||
74 | // Emphasis & misc |
||
75 | // ------------------------- |
||
76 | |||
77 | // Ex: (12px small font / 14px base font) * 100% = about 85% |
||
78 | small, |
||
79 | .small { |
||
80 | font-size: floor((100% * @font-size-small / @font-size-base)); |
||
81 | } |
||
82 | |||
83 | mark, |
||
84 | .mark { |
||
85 | background-color: @state-warning-bg; |
||
86 | padding: .2em; |
||
87 | } |
||
88 | |||
89 | // Alignment |
||
90 | .text-left { text-align: left; } |
||
91 | .text-right { text-align: right; } |
||
92 | .text-center { text-align: center; } |
||
93 | .text-justify { text-align: justify; } |
||
94 | .text-nowrap { white-space: nowrap; } |
||
95 | |||
96 | // Transformation |
||
97 | .text-lowercase { text-transform: lowercase; } |
||
98 | .text-uppercase { text-transform: uppercase; } |
||
99 | .text-capitalize { text-transform: capitalize; } |
||
100 | |||
101 | // Contextual colors |
||
102 | .text-muted { |
||
103 | color: @text-muted; |
||
104 | } |
||
105 | .text-primary { |
||
106 | .text-emphasis-variant(@brand-primary); |
||
107 | } |
||
108 | .text-success { |
||
109 | .text-emphasis-variant(@state-success-text); |
||
110 | } |
||
111 | .text-info { |
||
112 | .text-emphasis-variant(@state-info-text); |
||
113 | } |
||
114 | .text-warning { |
||
115 | .text-emphasis-variant(@state-warning-text); |
||
116 | } |
||
117 | .text-danger { |
||
118 | .text-emphasis-variant(@state-danger-text); |
||
119 | } |
||
120 | |||
121 | // Contextual backgrounds |
||
122 | // For now we'll leave these alongside the text classes until v4 when we can |
||
123 | // safely shift things around (per SemVer rules). |
||
124 | .bg-primary { |
||
125 | // Given the contrast here, this is the only class to have its color inverted |
||
126 | // automatically. |
||
127 | color: #fff; |
||
128 | .bg-variant(@brand-primary); |
||
129 | } |
||
130 | .bg-success { |
||
131 | .bg-variant(@state-success-bg); |
||
132 | } |
||
133 | .bg-info { |
||
134 | .bg-variant(@state-info-bg); |
||
135 | } |
||
136 | .bg-warning { |
||
137 | .bg-variant(@state-warning-bg); |
||
138 | } |
||
139 | .bg-danger { |
||
140 | .bg-variant(@state-danger-bg); |
||
141 | } |
||
142 | |||
143 | |||
144 | // Page header |
||
145 | // ------------------------- |
||
146 | |||
147 | .page-header { |
||
148 | padding-bottom: ((@line-height-computed / 2) - 1); |
||
149 | margin: (@line-height-computed * 2) 0 @line-height-computed; |
||
150 | border-bottom: 1px solid @page-header-border-color; |
||
151 | } |
||
152 | |||
153 | |||
154 | // Lists |
||
155 | // ------------------------- |
||
156 | |||
157 | // Unordered and Ordered lists |
||
158 | ul, |
||
159 | ol { |
||
160 | margin-top: 0; |
||
161 | margin-bottom: (@line-height-computed / 2); |
||
162 | ul, |
||
163 | ol { |
||
164 | margin-bottom: 0; |
||
165 | } |
||
166 | } |
||
167 | |||
168 | // List options |
||
169 | |||
170 | // Unstyled keeps list items block level, just removes default browser padding and list-style |
||
171 | .list-unstyled { |
||
172 | padding-left: 0; |
||
173 | list-style: none; |
||
174 | } |
||
175 | |||
176 | // Inline turns list items into inline-block |
||
177 | .list-inline { |
||
178 | .list-unstyled(); |
||
179 | margin-left: -5px; |
||
180 | |||
181 | > li { |
||
182 | display: inline-block; |
||
183 | padding-left: 5px; |
||
184 | padding-right: 5px; |
||
185 | } |
||
186 | } |
||
187 | |||
188 | // Description Lists |
||
189 | dl { |
||
190 | margin-top: 0; // Remove browser default |
||
191 | margin-bottom: @line-height-computed; |
||
192 | } |
||
193 | dt, |
||
194 | dd { |
||
195 | line-height: @line-height-base; |
||
196 | } |
||
197 | dt { |
||
198 | font-weight: bold; |
||
199 | } |
||
200 | dd { |
||
201 | margin-left: 0; // Undo browser default |
||
202 | } |
||
203 | |||
204 | // Horizontal description lists |
||
205 | // |
||
206 | // Defaults to being stacked without any of the below styles applied, until the |
||
207 | // grid breakpoint is reached (default of ~768px). |
||
208 | |||
209 | .dl-horizontal { |
||
210 | dd { |
||
211 | &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present |
||
212 | } |
||
213 | |||
214 | @media (min-width: @dl-horizontal-breakpoint) { |
||
215 | dt { |
||
216 | float: left; |
||
217 | width: (@dl-horizontal-offset - 20); |
||
218 | clear: left; |
||
219 | text-align: right; |
||
220 | .text-overflow(); |
||
221 | } |
||
222 | dd { |
||
223 | margin-left: @dl-horizontal-offset; |
||
224 | } |
||
225 | } |
||
226 | } |
||
227 | |||
228 | |||
229 | // Misc |
||
230 | // ------------------------- |
||
231 | |||
232 | // Abbreviations and acronyms |
||
233 | abbr[title], |
||
234 | // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 |
||
235 | abbr[data-original-title] { |
||
236 | cursor: help; |
||
237 | border-bottom: 1px dotted @abbr-border-color; |
||
238 | } |
||
239 | .initialism { |
||
240 | font-size: 90%; |
||
241 | .text-uppercase(); |
||
242 | } |
||
243 | |||
244 | // Blockquotes |
||
245 | blockquote { |
||
246 | padding: (@line-height-computed / 2) @line-height-computed; |
||
247 | margin: 0 0 @line-height-computed; |
||
248 | font-size: @blockquote-font-size; |
||
249 | border-left: 5px solid @blockquote-border-color; |
||
250 | |||
251 | p, |
||
252 | ul, |
||
253 | ol { |
||
254 | &:last-child { |
||
255 | margin-bottom: 0; |
||
256 | } |
||
257 | } |
||
258 | |||
259 | // Note: Deprecated small and .small as of v3.1.0 |
||
260 | // Context: https://github.com/twbs/bootstrap/issues/11660 |
||
261 | footer, |
||
262 | small, |
||
263 | .small { |
||
264 | display: block; |
||
265 | font-size: 80%; // back to default font-size |
||
266 | line-height: @line-height-base; |
||
267 | color: @blockquote-small-color; |
||
268 | |||
269 | &:before { |
||
270 | content: '\2014 \00A0'; // em dash, nbsp |
||
271 | } |
||
272 | } |
||
273 | } |
||
274 | |||
275 | // Opposite alignment of blockquote |
||
276 | // |
||
277 | // Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0. |
||
278 | .blockquote-reverse, |
||
279 | blockquote.pull-right { |
||
280 | padding-right: 15px; |
||
281 | padding-left: 0; |
||
282 | border-right: 5px solid @blockquote-border-color; |
||
283 | border-left: 0; |
||
284 | text-align: right; |
||
285 | |||
286 | // Account for citation |
||
287 | footer, |
||
288 | small, |
||
289 | .small { |
||
290 | &:before { content: ''; } |
||
291 | &:after { |
||
292 | content: '\00A0 \2014'; // nbsp, em dash |
||
293 | } |
||
294 | } |
||
295 | } |
||
296 | |||
297 | // Addresses |
||
298 | address { |
||
299 | margin-bottom: @line-height-computed; |
||
300 | font-style: normal; |
||
301 | line-height: @line-height-base; |
||
302 | } |