1// 2// Typography 3// -------------------------------------------------- 4 5 6// Headings 7// ------------------------- 8 9h1, 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 24h1, .h1, 25h2, .h2, 26h3, .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} 35h4, .h4, 36h5, .h5, 37h6, .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 47h1, .h1 { font-size: @font-size-h1; } 48h2, .h2 { font-size: @font-size-h2; } 49h3, .h3 { font-size: @font-size-h3; } 50h4, .h4 { font-size: @font-size-h4; } 51h5, .h5 { font-size: @font-size-h5; } 52h6, .h6 { font-size: @font-size-h6; } 53 54 55// Body text 56// ------------------------- 57 58p { 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% 78small, 79.small { 80 font-size: floor((100% * @font-size-small / @font-size-base)); 81} 82 83mark, 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 158ul, 159ol { 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 189dl { 190 margin-top: 0; // Remove browser default 191 margin-bottom: @line-height-computed; 192} 193dt, 194dd { 195 line-height: @line-height-base; 196} 197dt { 198 font-weight: bold; 199} 200dd { 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: @grid-float-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 233abbr[title], 234// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 235abbr[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 245blockquote { 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, 279blockquote.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 298address { 299 margin-bottom: @line-height-computed; 300 font-style: normal; 301 line-height: @line-height-base; 302} 303