Commit | Line | Data |
---|---|---|
7b869721 S |
1 | // |
2 | // Typography | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // Body text | |
7 | // ------------------------- | |
8 | ||
9 | p { | |
10 | margin: 0 0 (@line-height-computed / 2); | |
11 | } | |
12 | .lead { | |
13 | margin-bottom: @line-height-computed; | |
14 | font-size: floor(@font-size-base * 1.15); | |
15 | font-weight: 200; | |
16 | line-height: 1.4; | |
17 | ||
18 | @media (min-width: @screen-sm-min) { | |
19 | font-size: (@font-size-base * 1.5); | |
20 | } | |
21 | } | |
22 | ||
23 | ||
24 | // Emphasis & misc | |
25 | // ------------------------- | |
26 | ||
27 | // Ex: 14px base font * 85% = about 12px | |
28 | small, | |
29 | .small { font-size: 85%; } | |
30 | ||
31 | // Undo browser default styling | |
32 | cite { font-style: normal; } | |
33 | ||
34 | // Contextual emphasis | |
35 | .text-muted { | |
36 | color: @text-muted; | |
37 | } | |
38 | .text-primary { | |
39 | color: @brand-primary; | |
40 | &:hover { | |
41 | color: darken(@brand-primary, 10%); | |
42 | } | |
43 | } | |
44 | .text-warning { | |
45 | color: @state-warning-text; | |
46 | &:hover { | |
47 | color: darken(@state-warning-text, 10%); | |
48 | } | |
49 | } | |
50 | .text-danger { | |
51 | color: @state-danger-text; | |
52 | &:hover { | |
53 | color: darken(@state-danger-text, 10%); | |
54 | } | |
55 | } | |
56 | .text-success { | |
57 | color: @state-success-text; | |
58 | &:hover { | |
59 | color: darken(@state-success-text, 10%); | |
60 | } | |
61 | } | |
62 | .text-info { | |
63 | color: @state-info-text; | |
64 | &:hover { | |
65 | color: darken(@state-info-text, 10%); | |
66 | } | |
67 | } | |
68 | ||
69 | // Alignment | |
70 | .text-left { text-align: left; } | |
71 | .text-right { text-align: right; } | |
72 | .text-center { text-align: center; } | |
73 | ||
74 | ||
75 | // Headings | |
76 | // ------------------------- | |
77 | ||
78 | h1, h2, h3, h4, h5, h6, | |
79 | .h1, .h2, .h3, .h4, .h5, .h6 { | |
80 | font-family: @headings-font-family; | |
81 | font-weight: @headings-font-weight; | |
82 | line-height: @headings-line-height; | |
83 | color: @headings-color; | |
84 | ||
85 | small, | |
86 | .small { | |
87 | font-weight: normal; | |
88 | line-height: 1; | |
89 | color: @headings-small-color; | |
90 | } | |
91 | } | |
92 | ||
93 | h1, | |
94 | h2, | |
95 | h3 { | |
96 | margin-top: @line-height-computed; | |
97 | margin-bottom: (@line-height-computed / 2); | |
98 | ||
99 | small, | |
100 | .small { | |
101 | font-size: 65%; | |
102 | } | |
103 | } | |
104 | h4, | |
105 | h5, | |
106 | h6 { | |
107 | margin-top: (@line-height-computed / 2); | |
108 | margin-bottom: (@line-height-computed / 2); | |
109 | ||
110 | small, | |
111 | .small { | |
112 | font-size: 75%; | |
113 | } | |
114 | } | |
115 | ||
116 | h1, .h1 { font-size: @font-size-h1; } | |
117 | h2, .h2 { font-size: @font-size-h2; } | |
118 | h3, .h3 { font-size: @font-size-h3; } | |
119 | h4, .h4 { font-size: @font-size-h4; } | |
120 | h5, .h5 { font-size: @font-size-h5; } | |
121 | h6, .h6 { font-size: @font-size-h6; } | |
122 | ||
123 | ||
124 | // Page header | |
125 | // ------------------------- | |
126 | ||
127 | .page-header { | |
128 | padding-bottom: ((@line-height-computed / 2) - 1); | |
129 | margin: (@line-height-computed * 2) 0 @line-height-computed; | |
130 | border-bottom: 1px solid @page-header-border-color; | |
131 | } | |
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-bottom: @line-height-computed; | |
175 | } | |
176 | dt, | |
177 | dd { | |
178 | line-height: @line-height-base; | |
179 | } | |
180 | dt { | |
181 | font-weight: bold; | |
182 | } | |
183 | dd { | |
184 | margin-left: 0; // Undo browser default | |
185 | } | |
186 | ||
187 | // Horizontal description lists | |
188 | // | |
189 | // Defaults to being stacked without any of the below styles applied, until the | |
190 | // grid breakpoint is reached (default of ~768px). | |
191 | ||
192 | @media (min-width: @grid-float-breakpoint) { | |
193 | .dl-horizontal { | |
194 | dt { | |
195 | float: left; | |
196 | width: (@component-offset-horizontal - 20); | |
197 | clear: left; | |
198 | text-align: right; | |
199 | .text-overflow(); | |
200 | } | |
201 | dd { | |
202 | margin-left: @component-offset-horizontal; | |
203 | .clearfix(); // Clear the floated `dt` if an empty `dd` is present | |
204 | } | |
205 | } | |
206 | } | |
207 | ||
208 | // MISC | |
209 | // ---- | |
210 | ||
211 | // Abbreviations and acronyms | |
212 | abbr[title], | |
213 | // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 | |
214 | abbr[data-original-title] { | |
215 | cursor: help; | |
216 | border-bottom: 1px dotted @abbr-border-color; | |
217 | } | |
218 | abbr.initialism { | |
219 | font-size: 90%; | |
220 | text-transform: uppercase; | |
221 | } | |
222 | ||
223 | // Blockquotes | |
224 | blockquote { | |
225 | padding: (@line-height-computed / 2) @line-height-computed; | |
226 | margin: 0 0 @line-height-computed; | |
227 | border-left: 5px solid @blockquote-border-color; | |
228 | p { | |
229 | font-size: (@font-size-base * 1.25); | |
230 | font-weight: 300; | |
231 | line-height: 1.25; | |
232 | } | |
233 | p:last-child { | |
234 | margin-bottom: 0; | |
235 | } | |
236 | small { | |
237 | display: block; | |
238 | line-height: @line-height-base; | |
239 | color: @blockquote-small-color; | |
240 | &:before { | |
241 | content: '\2014 \00A0'; // EM DASH, NBSP | |
242 | } | |
243 | } | |
244 | ||
245 | // Float right with text-align: right | |
246 | &.pull-right { | |
247 | padding-right: 15px; | |
248 | padding-left: 0; | |
249 | border-right: 5px solid @blockquote-border-color; | |
250 | border-left: 0; | |
251 | p, | |
252 | small, | |
253 | .small { | |
254 | text-align: right; | |
255 | } | |
256 | small, | |
257 | .small { | |
258 | &:before { | |
259 | content: ''; | |
260 | } | |
261 | &:after { | |
262 | content: '\00A0 \2014'; // NBSP, EM DASH | |
263 | } | |
264 | } | |
265 | } | |
266 | } | |
267 | ||
268 | // Quotes | |
269 | blockquote:before, | |
270 | blockquote:after { | |
271 | content: ""; | |
272 | } | |
273 | ||
274 | // Addresses | |
275 | address { | |
276 | margin-bottom: @line-height-computed; | |
277 | font-style: normal; | |
278 | line-height: @line-height-base; | |
279 | } |