Mercurial > wikked

comparison static/bootstrap/less/type.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Typography 2 // Typography
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 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
6 // Body text 55 // Body text
7 // ------------------------- 56 // -------------------------
8 57
9 p { 58 p {
10 margin: 0 0 @baseLineHeight / 2; 59 margin: 0 0 (@line-height-computed / 2);
11 } 60 }
61
12 .lead { 62 .lead {
13 margin-bottom: @baseLineHeight; 63 margin-bottom: @line-height-computed;
14 font-size: @baseFontSize * 1.5; 64 font-size: floor(@font-size-base * 1.15);
15 font-weight: 200; 65 font-weight: 200;
16 line-height: @baseLineHeight * 1.5; 66 line-height: 1.4;
67
68 @media (min-width: @screen-sm-min) {
69 font-size: (@font-size-base * 1.5);
70 }
17 } 71 }
18 72
19 73
20 // Emphasis & misc 74 // Emphasis & misc
21 // ------------------------- 75 // -------------------------
22 76
23 // Ex: 14px base font * 85% = about 12px 77 // Ex: 14px base font * 85% = about 12px
24 small { font-size: 85%; } 78 small,
25 79 .small { font-size: 85%; }
26 strong { font-weight: bold; } 80
27 em { font-style: italic; } 81 // Undo browser default styling
28 cite { font-style: normal; } 82 cite { font-style: normal; }
29 83
30 // Utility classes 84 // Contextual emphasis
31 .muted { color: @grayLight; } 85 .text-muted {
32 a.muted:hover, 86 color: @text-muted;
33 a.muted:focus { color: darken(@grayLight, 10%); } 87 }
34 88 .text-primary {
35 .text-warning { color: @warningText; } 89 color: @brand-primary;
36 a.text-warning:hover, 90 &:hover {
37 a.text-warning:focus { color: darken(@warningText, 10%); } 91 color: darken(@brand-primary, 10%);
38 92 }
39 .text-error { color: @errorText; } 93 }
40 a.text-error:hover, 94 .text-warning {
41 a.text-error:focus { color: darken(@errorText, 10%); } 95 color: @state-warning-text;
42 96 &:hover {
43 .text-info { color: @infoText; } 97 color: darken(@state-warning-text, 10%);
44 a.text-info:hover, 98 }
45 a.text-info:focus { color: darken(@infoText, 10%); } 99 }
46 100 .text-danger {
47 .text-success { color: @successText; } 101 color: @state-danger-text;
48 a.text-success:hover, 102 &:hover {
49 a.text-success:focus { color: darken(@successText, 10%); } 103 color: darken(@state-danger-text, 10%);
50 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
51 .text-left { text-align: left; } 120 .text-left { text-align: left; }
52 .text-right { text-align: right; } 121 .text-right { text-align: right; }
53 .text-center { text-align: center; } 122 .text-center { text-align: center; }
54 123
55 124
56 // Headings
57 // -------------------------
58
59 h1, 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
73 h1,
74 h2,
75 h3 { line-height: @baseLineHeight * 2; }
76
77 h1 { font-size: @baseFontSize * 2.75; } // ~38px
78 h2 { font-size: @baseFontSize * 2.25; } // ~32px
79 h3 { font-size: @baseFontSize * 1.75; } // ~24px
80 h4 { font-size: @baseFontSize * 1.25; } // ~18px
81 h5 { font-size: @baseFontSize; }
82 h6 { font-size: @baseFontSize * 0.85; } // ~12px
83
84 h1 small { font-size: @baseFontSize * 1.75; } // ~24px
85 h2 small { font-size: @baseFontSize * 1.25; } // ~18px
86 h3 small { font-size: @baseFontSize; }
87 h4 small { font-size: @baseFontSize; }
88
89
90 // Page header 125 // Page header
91 // ------------------------- 126 // -------------------------
92 127
93 .page-header { 128 .page-header {
94 padding-bottom: (@baseLineHeight / 2) - 1; 129 padding-bottom: ((@line-height-computed / 2) - 1);
95 margin: @baseLineHeight 0 (@baseLineHeight * 1.5); 130 margin: (@line-height-computed * 2) 0 @line-height-computed;
96 border-bottom: 1px solid @grayLighter; 131 border-bottom: 1px solid @page-header-border-color;
97 } 132 }
98
99 133
100 134
101 // Lists 135 // Lists
102 // -------------------------------------------------- 136 // --------------------------------------------------
103 137
104 // Unordered and Ordered lists 138 // Unordered and Ordered lists
105 ul, ol { 139 ul,
106 padding: 0; 140 ol {
107 margin: 0 0 @baseLineHeight / 2 25px; 141 margin-top: 0;
108 } 142 margin-bottom: (@line-height-computed / 2);
109 ul ul, 143 ul,
110 ul ol, 144 ol {
111 ol ol, 145 margin-bottom: 0;
112 ol ul { 146 }
113 margin-bottom: 0; 147 }
114 } 148
115 li { 149 // List options
116 line-height: @baseLineHeight; 150
117 } 151 // Unstyled keeps list items block level, just removes default browser padding and list-style
118 152 .list-unstyled {
119 // Remove default list styles 153 padding-left: 0;
120 ul.unstyled,
121 ol.unstyled {
122 margin-left: 0;
123 list-style: none; 154 list-style: none;
124 } 155 }
125 156
126 // Single-line list items 157 // Inline turns list items into inline-block
127 ul.inline, 158 .list-inline {
128 ol.inline { 159 .list-unstyled();
129 margin-left: 0; 160
130 list-style: none;
131 > li { 161 > li {
132 display: inline-block; 162 display: inline-block;
133 .ie7-inline-block();
134 padding-left: 5px; 163 padding-left: 5px;
135 padding-right: 5px; 164 padding-right: 5px;
165
166 &:first-child {
167 padding-left: 0;
168 }
136 } 169 }
137 } 170 }
138 171
139 // Description Lists 172 // Description Lists
140 dl { 173 dl {
141 margin-bottom: @baseLineHeight; 174 margin-top: 0; // Remove browser default
175 margin-bottom: @line-height-computed;
142 } 176 }
143 dt, 177 dt,
144 dd { 178 dd {
145 line-height: @baseLineHeight; 179 line-height: @line-height-base;
146 } 180 }
147 dt { 181 dt {
148 font-weight: bold; 182 font-weight: bold;
149 } 183 }
150 dd { 184 dd {
151 margin-left: @baseLineHeight / 2; 185 margin-left: 0; // Undo browser default
152 } 186 }
153 // Horizontal layout (like forms) 187
154 .dl-horizontal { 188 // Horizontal description lists
155 .clearfix(); // Ensure dl clears floats if empty dd elements present 189 //
156 dt { 190 // Defaults to being stacked without any of the below styles applied, until the
157 float: left; 191 // grid breakpoint is reached (default of ~768px).
158 width: @horizontalComponentOffset - 20; 192
159 clear: left; 193 @media (min-width: @grid-float-breakpoint) {
160 text-align: right; 194 .dl-horizontal {
161 .text-overflow(); 195 dt {
162 } 196 float: left;
163 dd { 197 width: (@component-offset-horizontal - 20);
164 margin-left: @horizontalComponentOffset; 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 }
165 } 206 }
166 } 207 }
167 208
168 // MISC 209 // MISC
169 // ---- 210 // ----
170 211
171 // Horizontal rules
172 hr {
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 212 // Abbreviations and acronyms
180 abbr[title], 213 abbr[title],
181 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 214 // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
182 abbr[data-original-title] { 215 abbr[data-original-title] {
183 cursor: help; 216 cursor: help;
184 border-bottom: 1px dotted @grayLight; 217 border-bottom: 1px dotted @abbr-border-color;
185 } 218 }
186 abbr.initialism { 219 .initialism {
187 font-size: 90%; 220 font-size: 90%;
188 text-transform: uppercase; 221 text-transform: uppercase;
189 } 222 }
190 223
191 // Blockquotes 224 // Blockquotes
192 blockquote { 225 blockquote {
193 padding: 0 0 0 15px; 226 padding: (@line-height-computed / 2) @line-height-computed;
194 margin: 0 0 @baseLineHeight; 227 margin: 0 0 @line-height-computed;
195 border-left: 5px solid @grayLighter; 228 border-left: 5px solid @blockquote-border-color;
196 p { 229 p {
197 margin-bottom: 0; 230 font-size: (@font-size-base * 1.25);
198 font-size: @baseFontSize * 1.25;
199 font-weight: 300; 231 font-weight: 300;
200 line-height: 1.25; 232 line-height: 1.25;
201 } 233 }
202 small { 234 p:last-child {
235 margin-bottom: 0;
236 }
237 small,
238 .small {
203 display: block; 239 display: block;
204 line-height: @baseLineHeight; 240 line-height: @line-height-base;
205 color: @grayLight; 241 color: @blockquote-small-color;
206 &:before { 242 &:before {
207 content: '\2014 \00A0'; 243 content: '\2014 \00A0'; // EM DASH, NBSP
208 } 244 }
209 } 245 }
210 246
211 // Float right with text-align: right 247 // Float right with text-align: right
212 &.pull-right { 248 &.pull-right {
213 float: right;
214 padding-right: 15px; 249 padding-right: 15px;
215 padding-left: 0; 250 padding-left: 0;
216 border-right: 5px solid @grayLighter; 251 border-right: 5px solid @blockquote-border-color;
217 border-left: 0; 252 border-left: 0;
218 p, 253 p,
219 small { 254 small,
255 .small {
220 text-align: right; 256 text-align: right;
221 } 257 }
222 small { 258 small,
259 .small {
223 &:before { 260 &:before {
224 content: ''; 261 content: '';
225 } 262 }
226 &:after { 263 &:after {
227 content: '\00A0 \2014'; 264 content: '\00A0 \2014'; // NBSP, EM DASH
228 } 265 }
229 } 266 }
230 } 267 }
231 } 268 }
232 269
233 // Quotes 270 // Quotes
234 q:before,
235 q:after,
236 blockquote:before, 271 blockquote:before,
237 blockquote:after { 272 blockquote:after {
238 content: ""; 273 content: "";
239 } 274 }
240 275
241 // Addresses 276 // Addresses
242 address { 277 address {
243 display: block; 278 margin-bottom: @line-height-computed;
244 margin-bottom: @baseLineHeight;
245 font-style: normal; 279 font-style: normal;
246 line-height: @baseLineHeight; 280 line-height: @line-height-base;
247 } 281 }