type.less 3.87 KB
Newer Older
1
2
3
//
// Typography
// --------------------------------------------------
Jacob Thornton's avatar
Jacob Thornton committed
4
5


Mark Otto's avatar
Mark Otto committed
6
7
// Body text
// -------------------------
Jacob Thornton's avatar
Jacob Thornton committed
8
9

p {
10
  margin: 0 0 @baseLineHeight / 2;
Jacob Thornton's avatar
Jacob Thornton committed
11
}
12
13
.lead {
  margin-bottom: @baseLineHeight;
14
  font-size: @baseFontSize * 1.5;
15
16
17
  font-weight: 200;
  line-height: @baseLineHeight * 1.5;
}
Jacob Thornton's avatar
Jacob Thornton committed
18

Mark Otto's avatar
Mark Otto committed
19

20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Emphasis & misc
// -------------------------

small {
  font-size: 85%; // Ex: 14px base font * 85% = about 12px
}
strong {
  font-weight: bold;
}
em {
  font-style: italic;
}
cite {
  font-style: normal;
}
35
36

// Utility classes
37
38
39
.muted {
  color: @grayLight;
}
40
41
42
43
44
45
46
47
48
49
50
.text-warning { color: @warningText; }
a.text-warning:hover { color: darken(@warningText, 10%); }

.text-error { color: @errorText; }
a.text-error:hover { color: darken(@errorText, 10%); }

.text-info { color: @infoText; }
a.text-info:hover { color: darken(@infoText, 10%); }

.text-success { color: @successText; }
a.text-success:hover { color: darken(@successText, 10%); }
51
52


Mark Otto's avatar
Mark Otto committed
53
54
// Headings
// -------------------------
Jacob Thornton's avatar
Jacob Thornton committed
55
56

h1, h2, h3, h4, h5, h6 {
Mark Otto's avatar
Mark Otto committed
57
  margin: (@baseLineHeight / 2) 0;
58
59
  font-family: @headingsFontFamily;
  font-weight: @headingsFontWeight;
Mark Otto's avatar
Mark Otto committed
60
  line-height: 1;
61
  color: @headingsColor;
62
  text-rendering: optimizelegibility; // Fix the character spacing for headings
Jacob Thornton's avatar
Jacob Thornton committed
63
  small {
64
    font-weight: normal;
65
    line-height: 1;
66
    color: @grayLight;
Jacob Thornton's avatar
Jacob Thornton committed
67
68
  }
}
Mark Otto's avatar
Mark Otto committed
69
70
71
72
73
74
75
76
77
78
79
80
h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 30px; line-height: 40px; }
h3 { font-size: 24px; line-height: 40px; }
h4 { font-size: 18px; line-height: 20px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 20px; }

h1 small { font-size: 24px; }
h2 small { font-size: 18px; }
h3 small { font-size: 14px; }
h4 small { font-size: 14px; }

Jacob Thornton's avatar
Jacob Thornton committed
81

82
// Page header
Mark Otto's avatar
Mark Otto committed
83
84
// -------------------------

85
.page-header {
86
87
  padding-bottom: (@baseLineHeight / 2) - 1;
  margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
88
89
90
91
  border-bottom: 1px solid @grayLighter;
}


Jacob Thornton's avatar
Jacob Thornton committed
92

Mark Otto's avatar
Mark Otto committed
93
94
// Lists
// --------------------------------------------------
Jacob Thornton's avatar
Jacob Thornton committed
95
96
97

// Unordered and Ordered lists
ul, ol {
98
  padding: 0;
99
  margin: 0 0 @baseLineHeight / 2 25px;
Jacob Thornton's avatar
Jacob Thornton committed
100
101
102
103
104
105
106
107
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
li {
108
  line-height: @baseLineHeight;
Jacob Thornton's avatar
Jacob Thornton committed
109
}
Henrik N's avatar
Henrik N committed
110
111
ul.unstyled,
ol.unstyled {
Jacob Thornton's avatar
Jacob Thornton committed
112
  margin-left: 0;
113
  list-style: none;
Jacob Thornton's avatar
Jacob Thornton committed
114
115
116
117
}

// Description Lists
dl {
118
  margin-bottom: @baseLineHeight;
119
120
121
122
123
124
125
126
127
128
}
dt,
dd {
  line-height: @baseLineHeight;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: @baseLineHeight / 2;
Jacob Thornton's avatar
Jacob Thornton committed
129
}
130
// Horizontal layout (like forms)
131
.dl-horizontal {
132
  .clearfix(); // Ensure dl clears floats if empty dd elements present
133
134
  dt {
    float: left;
135
    width: @horizontalComponentOffset - 20;
Jacob Thornton's avatar
Jacob Thornton committed
136
    clear: left;
137
    text-align: right;
Jacob Thornton's avatar
Jacob Thornton committed
138
    .text-overflow();
139
140
  }
  dd {
141
    margin-left: @horizontalComponentOffset;
142
143
  }
}
Jacob Thornton's avatar
Jacob Thornton committed
144

145
// MISC
146
// ----
Jacob Thornton's avatar
Jacob Thornton committed
147
148
149

// Horizontal rules
hr {
150
  margin: @baseLineHeight 0;
Jacob Thornton's avatar
Jacob Thornton committed
151
  border: 0;
Mark Otto's avatar
Mark Otto committed
152
  border-top: 1px solid @hrBorder;
153
  border-bottom: 1px solid @white;
Jacob Thornton's avatar
Jacob Thornton committed
154
155
}

156
// Abbreviations and acronyms
157
abbr[title] {
158
  cursor: help;
159
  border-bottom: 1px dotted @grayLight;
160
}
161
162
163
164
abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
165

Jacob Thornton's avatar
Jacob Thornton committed
166
167
// Blockquotes
blockquote {
168
169
  padding: 0 0 0 15px;
  margin: 0 0 @baseLineHeight;
170
  border-left: 5px solid @grayLighter;
Jacob Thornton's avatar
Jacob Thornton committed
171
172
  p {
    margin-bottom: 0;
Mark Otto's avatar
Mark Otto committed
173
    #font > .shorthand(16px,300,@baseLineHeight * 1.25);
Jacob Thornton's avatar
Jacob Thornton committed
174
  }
175
  small {
Jacob Thornton's avatar
Jacob Thornton committed
176
    display: block;
177
    line-height: @baseLineHeight;
178
    color: @grayLight;
Jacob Thornton's avatar
Jacob Thornton committed
179
180
181
182
    &:before {
      content: '\2014 \00A0';
    }
  }
183
184
185
186

  // Float right with text-align: right
  &.pull-right {
    float: right;
187
    padding-right: 15px;
Jacob Thornton's avatar
Jacob Thornton committed
188
    padding-left: 0;
189
    border-right: 5px solid @grayLighter;
Jacob Thornton's avatar
Jacob Thornton committed
190
    border-left: 0;
191
192
193
194
    p,
    small {
      text-align: right;
    }
195
196
197
198
199
200
201
202
    small {
      &:before {
        content: '';
      }
      &:after {
        content: '\00A0 \2014';
      }
    }
203
  }
Jacob Thornton's avatar
Jacob Thornton committed
204
205
}

206
// Quotes
207
208
q:before,
q:after,
209
blockquote:before,
210
211
212
213
blockquote:after {
  content: "";
}

Jacob Thornton's avatar
Jacob Thornton committed
214
215
216
// Addresses
address {
  display: block;
217
  margin-bottom: @baseLineHeight;
218
  font-style: normal;
Jacob Thornton's avatar
Jacob Thornton committed
219
  line-height: @baseLineHeight;
Jacob Thornton's avatar
Jacob Thornton committed
220
}