Mercurial > wikked

comparison static/bootstrap/less/type.less @ 61:130eccd396d8

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