type.less 4.99 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 {
Mark Otto's avatar
Mark Otto committed
10
  margin: 0 0 (@line-height-computed / 2);
Jacob Thornton's avatar
Jacob Thornton committed
11
}
12
.lead {
Mark Otto's avatar
Mark Otto committed
13
  margin-bottom: @line-height-computed;
14
  font-size: (@font-size-base * 1.5);
15
  font-weight: 200;
16
  line-height: 1.4;
17
}
Jacob Thornton's avatar
Jacob Thornton committed
18

Mark Otto's avatar
Mark Otto committed
19

20
21
22
// Emphasis & misc
// -------------------------

23
24
25
26
27
28
// Ex: 14px base font * 85% = about 12px
small   { font-size: 85%; }

strong  { font-weight: bold; }
em      { font-style: italic; }
cite    { font-style: normal; }
29
30

// Utility classes
31
.text-muted          { color: @gray-light; }
Mark Otto's avatar
Mark Otto committed
32
a.text-muted:hover,
33
a.text-muted:focus   { color: darken(@gray-light, 10%); }
34

Mark Otto's avatar
Mark Otto committed
35
.text-warning        { color: @state-warning-text; }
36
a.text-warning:hover,
37
a.text-warning:focus { color: darken(@state-warning-text, 10%); }
38

39
40
41
.text-danger         { color: @state-danger-text; }
a.text-danger:hover,
a.text-danger:focus  { color: darken(@state-danger-text, 10%); }
42

Mark Otto's avatar
Mark Otto committed
43
.text-success        { color: @state-success-text; }
44
a.text-success:hover,
45
a.text-success:focus { color: darken(@state-success-text, 10%); }
Mark Otto's avatar
Mark Otto committed
46

47
48
49
50
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }

51

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

55
56
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
Mark Otto's avatar
Mark Otto committed
57
  font-weight: @headings-font-weight;
58
  line-height: @headings-line-height;
Jacob Thornton's avatar
Jacob Thornton committed
59
  small {
60
    font-weight: normal;
61
    line-height: 1;
62
    color: @gray-light;
Jacob Thornton's avatar
Jacob Thornton committed
63
64
  }
}
65
66

h1,
67
68
h2,
h3 {
Mark Otto's avatar
Mark Otto committed
69
70
  margin-top: @line-height-computed;
  margin-bottom: (@line-height-computed / 2);
71
}
Mark Otto's avatar
Mark Otto committed
72
73
74
h4,
h5,
h6 {
Mark Otto's avatar
Mark Otto committed
75
76
  margin-top: (@line-height-computed / 2);
  margin-bottom: (@line-height-computed / 2);
Mark Otto's avatar
Mark Otto committed
77
}
78

Mark Otto's avatar
Mark Otto committed
79
80
81
82
h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
Mark Otto's avatar
Mark Otto committed
83
h5, .h5 { font-size:  @font-size-base; }
Mark Otto's avatar
Mark Otto committed
84
h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
85

Mark Otto's avatar
Mark Otto committed
86
87
88
h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
h3 small, .h3 small,
89
h4 small, .h4 small { font-size: @font-size-base; }
Mark Otto's avatar
Mark Otto committed
90

Jacob Thornton's avatar
Jacob Thornton committed
91

92
// Page header
Mark Otto's avatar
Mark Otto committed
93
94
// -------------------------

95
.page-header {
Mark Otto's avatar
Mark Otto committed
96
97
  padding-bottom: ((@line-height-computed / 2) - 1);
  margin: (@line-height-computed * 2) 0 @line-height-computed;
98
  border-bottom: 1px solid @gray-lighter;
99
100
101
}


Jacob Thornton's avatar
Jacob Thornton committed
102

Mark Otto's avatar
Mark Otto committed
103
104
// Lists
// --------------------------------------------------
Jacob Thornton's avatar
Jacob Thornton committed
105
106

// Unordered and Ordered lists
107
108
ul,
ol {
Mark Otto's avatar
Mark Otto committed
109
110
  margin-top: 0;
  margin-bottom: (@line-height-computed / 2);
Jacob Thornton's avatar
Jacob Thornton committed
111
112
113
114
115
116
117
118
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
li {
119
  line-height: @line-height-base;
Jacob Thornton's avatar
Jacob Thornton committed
120
}
Mark Otto's avatar
Mark Otto committed
121

122
// List options
123

124
// Unstyled keeps list items block level, just removes list-style
125
.list-unstyled {
Jacob Thornton's avatar
Jacob Thornton committed
126
  margin-left: 0;
127
  list-style: none;
Jacob Thornton's avatar
Jacob Thornton committed
128
}
129
130
131
132
133
134
135
136
// Inline turns list items into inline-block
.list-inline {
  .list-unstyled();
  > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
  }
137
}
Jacob Thornton's avatar
Jacob Thornton committed
138
139
140

// Description Lists
dl {
Mark Otto's avatar
Mark Otto committed
141
  margin-bottom: @line-height-computed;
142
143
144
}
dt,
dd {
145
  line-height: @line-height-base;
146
147
148
149
150
}
dt {
  font-weight: bold;
}
dd {
Mark Otto's avatar
Mark Otto committed
151
  margin-left: (@line-height-computed / 2);
Jacob Thornton's avatar
Jacob Thornton committed
152
}
153
// Horizontal layout (like forms)
154
.dl-horizontal {
155
  .clearfix(); // Ensure dl clears floats if empty dd elements present
156
157
  dt {
    float: left;
158
    width: (@component-offset-horizontal - 20);
Jacob Thornton's avatar
Jacob Thornton committed
159
    clear: left;
160
    text-align: right;
Jacob Thornton's avatar
Jacob Thornton committed
161
    .text-overflow();
162
163
  }
  dd {
Mark Otto's avatar
Mark Otto committed
164
    margin-left: @component-offset-horizontal;
165
166
  }
}
Jacob Thornton's avatar
Jacob Thornton committed
167

168
// MISC
169
// ----
Jacob Thornton's avatar
Jacob Thornton committed
170
171
172

// Horizontal rules
hr {
Mark Otto's avatar
Mark Otto committed
173
  margin: @line-height-computed 0;
Jacob Thornton's avatar
Jacob Thornton committed
174
  border: 0;
Mark Otto's avatar
Mark Otto committed
175
  border-top: 1px solid @hr-border;
176
  border-bottom: 1px solid #fff;
177
  border-bottom: 1px solid rgba(255,255,255,.5);
Jacob Thornton's avatar
Jacob Thornton committed
178
179
}

180
// Abbreviations and acronyms
181
182
183
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
184
  cursor: help;
185
  border-bottom: 1px dotted @gray-light;
186
}
187
188
189
190
abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
191

Jacob Thornton's avatar
Jacob Thornton committed
192
193
// Blockquotes
blockquote {
Mark Otto's avatar
Mark Otto committed
194
195
  padding: (@line-height-computed / 2) @line-height-computed;
  margin: 0 0 @line-height-computed;
196
  border-left: 5px solid @gray-lighter;
Jacob Thornton's avatar
Jacob Thornton committed
197
  p {
198
    font-size: (@font-size-base * 1.25);
199
200
    font-weight: 300;
    line-height: 1.25;
Jacob Thornton's avatar
Jacob Thornton committed
201
  }
202
203
204
  p:last-child {
    margin-bottom: 0;
  }
205
  small {
Jacob Thornton's avatar
Jacob Thornton committed
206
    display: block;
207
    line-height: @line-height-base;
208
    color: @gray-light;
Jacob Thornton's avatar
Jacob Thornton committed
209
210
211
212
    &:before {
      content: '\2014 \00A0';
    }
  }
213
214
215
216

  // Float right with text-align: right
  &.pull-right {
    float: right;
217
    padding-right: 15px;
Jacob Thornton's avatar
Jacob Thornton committed
218
    padding-left: 0;
219
    border-right: 5px solid @gray-lighter;
Jacob Thornton's avatar
Jacob Thornton committed
220
    border-left: 0;
221
222
223
224
    p,
    small {
      text-align: right;
    }
225
226
227
228
229
230
231
232
    small {
      &:before {
        content: '';
      }
      &:after {
        content: '\00A0 \2014';
      }
    }
233
  }
Jacob Thornton's avatar
Jacob Thornton committed
234
235
}

236
// Quotes
237
238
q:before,
q:after,
239
blockquote:before,
240
241
242
243
blockquote:after {
  content: "";
}

Jacob Thornton's avatar
Jacob Thornton committed
244
245
246
// Addresses
address {
  display: block;
Mark Otto's avatar
Mark Otto committed
247
  margin-bottom: @line-height-computed;
248
  font-style: normal;
249
  line-height: @line-height-base;
Jacob Thornton's avatar
Jacob Thornton committed
250
}