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, |
|
25 h2, |
|
26 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, |
|
36 h5, |
|
37 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: 200; |
|
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: 14px base font * 85% = about 12px |
|
78 small, |
|
79 .small { font-size: 85%; } |
|
80 |
|
81 // Undo browser default styling |
|
82 cite { font-style: normal; } |
|
83 |
|
84 // Contextual emphasis |
|
85 .text-muted { |
|
86 color: @text-muted; |
|
87 } |
|
88 .text-primary { |
|
89 color: @brand-primary; |
|
90 &:hover { |
|
91 color: darken(@brand-primary, 10%); |
|
92 } |
|
93 } |
|
94 .text-warning { |
|
95 color: @state-warning-text; |
|
96 &:hover { |
|
97 color: darken(@state-warning-text, 10%); |
|
98 } |
|
99 } |
|
100 .text-danger { |
|
101 color: @state-danger-text; |
|
102 &:hover { |
|
103 color: darken(@state-danger-text, 10%); |
|
104 } |
|
105 } |
|
106 .text-success { |
|
107 color: @state-success-text; |
|
108 &:hover { |
|
109 color: darken(@state-success-text, 10%); |
|
110 } |
|
111 } |
|
112 .text-info { |
|
113 color: @state-info-text; |
|
114 &:hover { |
|
115 color: darken(@state-info-text, 10%); |
|
116 } |
|
117 } |
|
118 |
|
119 // Alignment |
|
120 .text-left { text-align: left; } |
|
121 .text-right { text-align: right; } |
|
122 .text-center { text-align: center; } |
|
123 |
|
124 |
|
125 // Page header |
|
126 // ------------------------- |
|
127 |
|
128 .page-header { |
|
129 padding-bottom: ((@line-height-computed / 2) - 1); |
|
130 margin: (@line-height-computed * 2) 0 @line-height-computed; |
|
131 border-bottom: 1px solid @page-header-border-color; |
|
132 } |
|
133 |
|
134 |
|
135 // Lists |
|
136 // -------------------------------------------------- |
|
137 |
|
138 // Unordered and Ordered lists |
|
139 ul, |
|
140 ol { |
|
141 margin-top: 0; |
|
142 margin-bottom: (@line-height-computed / 2); |
|
143 ul, |
|
144 ol { |
|
145 margin-bottom: 0; |
|
146 } |
|
147 } |
|
148 |
|
149 // List options |
|
150 |
|
151 // Unstyled keeps list items block level, just removes default browser padding and list-style |
|
152 .list-unstyled { |
|
153 padding-left: 0; |
|
154 list-style: none; |
|
155 } |
|
156 |
|
157 // Inline turns list items into inline-block |
|
158 .list-inline { |
|
159 .list-unstyled(); |
|
160 |
|
161 > li { |
|
162 display: inline-block; |
|
163 padding-left: 5px; |
|
164 padding-right: 5px; |
|
165 |
|
166 &:first-child { |
|
167 padding-left: 0; |
|
168 } |
|
169 } |
|
170 } |
|
171 |
|
172 // Description Lists |
|
173 dl { |
|
174 margin-top: 0; // Remove browser default |
|
175 margin-bottom: @line-height-computed; |
|
176 } |
|
177 dt, |
|
178 dd { |
|
179 line-height: @line-height-base; |
|
180 } |
|
181 dt { |
|
182 font-weight: bold; |
|
183 } |
|
184 dd { |
|
185 margin-left: 0; // Undo browser default |
|
186 } |
|
187 |
|
188 // Horizontal description lists |
|
189 // |
|
190 // Defaults to being stacked without any of the below styles applied, until the |
|
191 // grid breakpoint is reached (default of ~768px). |
|
192 |
|
193 @media (min-width: @grid-float-breakpoint) { |
|
194 .dl-horizontal { |
|
195 dt { |
|
196 float: left; |
|
197 width: (@component-offset-horizontal - 20); |
|
198 clear: left; |
|
199 text-align: right; |
|
200 .text-overflow(); |
|
201 } |
|
202 dd { |
|
203 margin-left: @component-offset-horizontal; |
|
204 .clearfix(); // Clear the floated `dt` if an empty `dd` is present |
|
205 } |
|
206 } |
|
207 } |
|
208 |
|
209 // MISC |
|
210 // ---- |
|
211 |
|
212 // Abbreviations and acronyms |
|
213 abbr[title], |
|
214 // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 |
|
215 abbr[data-original-title] { |
|
216 cursor: help; |
|
217 border-bottom: 1px dotted @abbr-border-color; |
|
218 } |
|
219 .initialism { |
|
220 font-size: 90%; |
|
221 text-transform: uppercase; |
|
222 } |
|
223 |
|
224 // Blockquotes |
|
225 blockquote { |
|
226 padding: (@line-height-computed / 2) @line-height-computed; |
|
227 margin: 0 0 @line-height-computed; |
|
228 border-left: 5px solid @blockquote-border-color; |
|
229 p { |
|
230 font-size: (@font-size-base * 1.25); |
|
231 font-weight: 300; |
|
232 line-height: 1.25; |
|
233 } |
|
234 p:last-child { |
|
235 margin-bottom: 0; |
|
236 } |
|
237 small, |
|
238 .small { |
|
239 display: block; |
|
240 line-height: @line-height-base; |
|
241 color: @blockquote-small-color; |
|
242 &:before { |
|
243 content: '\2014 \00A0'; // EM DASH, NBSP |
|
244 } |
|
245 } |
|
246 |
|
247 // Float right with text-align: right |
|
248 &.pull-right { |
|
249 padding-right: 15px; |
|
250 padding-left: 0; |
|
251 border-right: 5px solid @blockquote-border-color; |
|
252 border-left: 0; |
|
253 p, |
|
254 small, |
|
255 .small { |
|
256 text-align: right; |
|
257 } |
|
258 small, |
|
259 .small { |
|
260 &:before { |
|
261 content: ''; |
|
262 } |
|
263 &:after { |
|
264 content: '\00A0 \2014'; // NBSP, EM DASH |
|
265 } |
|
266 } |
|
267 } |
|
268 } |
|
269 |
|
270 // Quotes |
|
271 blockquote:before, |
|
272 blockquote:after { |
|
273 content: ""; |
|
274 } |
|
275 |
|
276 // Addresses |
|
277 address { |
|
278 margin-bottom: @line-height-computed; |
|
279 font-style: normal; |
|
280 line-height: @line-height-base; |
|
281 } |
|