1// 2// Typography 3// -------------------------------------------------- 4 5 6// Body text 7// ------------------------- 8 9p { 10 margin: 0 0 @baseLineHeight / 2; 11} 12.lead { 13 margin-bottom: @baseLineHeight; 14 font-size: @baseFontSize * 1.5; 15 font-weight: 200; 16 line-height: @baseLineHeight * 1.5; 17} 18 19 20// Emphasis & misc 21// ------------------------- 22 23// Ex: 14px base font * 85% = about 12px 24small { font-size: 85%; } 25 26strong { font-weight: bold; } 27em { font-style: italic; } 28cite { font-style: normal; } 29 30// Utility classes 31.muted { color: @grayLight; } 32a.muted:hover, 33a.muted:focus { color: darken(@grayLight, 10%); } 34 35.text-warning { color: @warningText; } 36a.text-warning:hover, 37a.text-warning:focus { color: darken(@warningText, 10%); } 38 39.text-error { color: @errorText; } 40a.text-error:hover, 41a.text-error:focus { color: darken(@errorText, 10%); } 42 43.text-info { color: @infoText; } 44a.text-info:hover, 45a.text-info:focus { color: darken(@infoText, 10%); } 46 47.text-success { color: @successText; } 48a.text-success:hover, 49a.text-success:focus { color: darken(@successText, 10%); } 50 51.text-left { text-align: left; } 52.text-right { text-align: right; } 53.text-center { text-align: center; } 54 55 56// Headings 57// ------------------------- 58 59h1, h2, h3, h4, h5, h6 { 60 margin: (@baseLineHeight / 2) 0; 61 font-family: @headingsFontFamily; 62 font-weight: @headingsFontWeight; 63 line-height: @baseLineHeight; 64 color: @headingsColor; 65 text-rendering: optimizelegibility; // Fix the character spacing for headings 66 small { 67 font-weight: normal; 68 line-height: 1; 69 color: @grayLight; 70 } 71} 72 73h1, 74h2, 75h3 { line-height: @baseLineHeight * 2; } 76 77h1 { font-size: @baseFontSize * 2.75; } // ~38px 78h2 { font-size: @baseFontSize * 2.25; } // ~32px 79h3 { font-size: @baseFontSize * 1.75; } // ~24px 80h4 { font-size: @baseFontSize * 1.25; } // ~18px 81h5 { font-size: @baseFontSize; } 82h6 { font-size: @baseFontSize * 0.85; } // ~12px 83 84h1 small { font-size: @baseFontSize * 1.75; } // ~24px 85h2 small { font-size: @baseFontSize * 1.25; } // ~18px 86h3 small { font-size: @baseFontSize; } 87h4 small { font-size: @baseFontSize; } 88 89 90// Page header 91// ------------------------- 92 93.page-header { 94 padding-bottom: (@baseLineHeight / 2) - 1; 95 margin: @baseLineHeight 0 (@baseLineHeight * 1.5); 96 border-bottom: 1px solid @grayLighter; 97} 98 99 100 101// Lists 102// -------------------------------------------------- 103 104// Unordered and Ordered lists 105ul, ol { 106 padding: 0; 107 margin: 0 0 @baseLineHeight / 2 25px; 108} 109ul ul, 110ul ol, 111ol ol, 112ol ul { 113 margin-bottom: 0; 114} 115li { 116 line-height: @baseLineHeight; 117} 118 119// Remove default list styles 120ul.unstyled, 121ol.unstyled { 122 margin-left: 0; 123 list-style: none; 124} 125 126// Single-line list items 127ul.inline, 128ol.inline { 129 margin-left: 0; 130 list-style: none; 131 > li { 132 display: inline-block; 133 .ie7-inline-block(); 134 padding-left: 5px; 135 padding-right: 5px; 136 } 137} 138 139// Description Lists 140dl { 141 margin-bottom: @baseLineHeight; 142} 143dt, 144dd { 145 line-height: @baseLineHeight; 146} 147dt { 148 font-weight: bold; 149} 150dd { 151 margin-left: @baseLineHeight / 2; 152} 153// Horizontal layout (like forms) 154.dl-horizontal { 155 .clearfix(); // Ensure dl clears floats if empty dd elements present 156 dt { 157 float: left; 158 width: @horizontalComponentOffset - 20; 159 clear: left; 160 text-align: right; 161 .text-overflow(); 162 } 163 dd { 164 margin-left: @horizontalComponentOffset; 165 } 166} 167 168// MISC 169// ---- 170 171// Horizontal rules 172hr { 173 margin: @baseLineHeight 0; 174 border: 0; 175 border-top: 1px solid @hrBorder; 176 border-bottom: 1px solid @white; 177} 178 179// Abbreviations and acronyms 180abbr[title], 181// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 182abbr[data-original-title] { 183 cursor: help; 184 border-bottom: 1px dotted @grayLight; 185} 186abbr.initialism { 187 font-size: 90%; 188 text-transform: uppercase; 189} 190 191// Blockquotes 192blockquote { 193 padding: 0 0 0 15px; 194 margin: 0 0 @baseLineHeight; 195 border-left: 5px solid @grayLighter; 196 p { 197 margin-bottom: 0; 198 font-size: @baseFontSize * 1.25; 199 font-weight: 300; 200 line-height: 1.25; 201 } 202 small { 203 display: block; 204 line-height: @baseLineHeight; 205 color: @grayLight; 206 &:before { 207 content: '\2014 \00A0'; 208 } 209 } 210 211 // Float right with text-align: right 212 &.pull-right { 213 float: right; 214 padding-right: 15px; 215 padding-left: 0; 216 border-right: 5px solid @grayLighter; 217 border-left: 0; 218 p, 219 small { 220 text-align: right; 221 } 222 small { 223 &:before { 224 content: ''; 225 } 226 &:after { 227 content: '\00A0 \2014'; 228 } 229 } 230 } 231} 232 233// Quotes 234q:before, 235q:after, 236blockquote:before, 237blockquote:after { 238 content: ""; 239} 240 241// Addresses 242address { 243 display: block; 244 margin-bottom: @baseLineHeight; 245 font-style: normal; 246 line-height: @baseLineHeight; 247} 248