type.less 4.65 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 @line-height-base / 2;
Jacob Thornton's avatar
Jacob Thornton committed
11
}
12
.lead {
13
14
  margin-bottom: @line-height-base;
  font-size: @font-size-base * 1.5;
15
  font-weight: 200;
16
  line-height: @line-height-base * 1.5;
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
32
33
.muted               { color: @grayLight; }
a.muted:hover        { color: darken(@grayLight, 10%); }

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

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

Mark Otto's avatar
Mark Otto committed
40
41
.text-success        { color: @state-success-text; }
a.text-success:hover { color: darken(@state-success-text, 10%); }
42

Mark Otto's avatar
Mark Otto committed
43
44
45
46
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }

47

Mark Otto's avatar
Mark Otto committed
48
49
// Headings
// -------------------------
Jacob Thornton's avatar
Jacob Thornton committed
50
51

h1, h2, h3, h4, h5, h6 {
52
  margin: (@line-height-base / 2) 0;
Mark Otto's avatar
Mark Otto committed
53
54
  font-family: @headings-font-family;
  font-weight: @headings-font-weight;
55
  line-height: @line-height-base;
56
  text-rendering: optimizelegibility; // Fix the character spacing for headings
Jacob Thornton's avatar
Jacob Thornton committed
57
  small {
58
    font-weight: normal;
59
    line-height: 1;
60
    color: @grayLight;
Jacob Thornton's avatar
Jacob Thornton committed
61
62
  }
}
63
64
65

h1,
h2,
66
h3 { line-height: @line-height-base * 2; }
67

68
69
70
71
72
73
h1 { font-size: @font-size-base * 2.75; } // ~38px
h2 { font-size: @font-size-base * 2.25; } // ~32px
h3 { font-size: @font-size-base * 1.75; } // ~24px
h4 { font-size: @font-size-base * 1.25; } // ~18px
h5 { font-size: @font-size-base; }
h6 { font-size: @font-size-base * 0.85; } // ~12px
74

75
76
77
78
h1 small { font-size: @font-size-base * 1.75; } // ~24px
h2 small { font-size: @font-size-base * 1.25; } // ~18px
h3 small { font-size: @font-size-base; }
h4 small { font-size: @font-size-base; }
Mark Otto's avatar
Mark Otto committed
79

Jacob Thornton's avatar
Jacob Thornton committed
80

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

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


Jacob Thornton's avatar
Jacob Thornton committed
91

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

// Unordered and Ordered lists
96
97
ul,
ol {
98
  padding: 0;
99
  margin: 0 0 (@line-height-base / 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: @line-height-base;
Jacob Thornton's avatar
Jacob Thornton committed
109
}
Mark Otto's avatar
Mark Otto committed
110

111
112
113
114
115
// List options
// Unstyled keeps list items block level, just removes list-style
.list-unstyled,
// Inline turns list items into inline-block
.list-inline {
Jacob Thornton's avatar
Jacob Thornton committed
116
  margin-left: 0;
117
  list-style: none;
Jacob Thornton's avatar
Jacob Thornton committed
118
}
Mark Otto's avatar
Mark Otto committed
119
// Single-line list items
120
121
122
123
.list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
124
}
Jacob Thornton's avatar
Jacob Thornton committed
125
126
127

// Description Lists
dl {
128
  margin-bottom: @line-height-base;
129
130
131
}
dt,
dd {
132
  line-height: @line-height-base;
133
134
135
136
137
}
dt {
  font-weight: bold;
}
dd {
138
  margin-left: @line-height-base / 2;
Jacob Thornton's avatar
Jacob Thornton committed
139
}
140
// Horizontal layout (like forms)
141
.dl-horizontal {
142
  .clear_float(); // Ensure dl clears floats if empty dd elements present
143
144
  dt {
    float: left;
Mark Otto's avatar
Mark Otto committed
145
    width: @component-offset-horizontal - 20;
Jacob Thornton's avatar
Jacob Thornton committed
146
    clear: left;
147
    text-align: right;
Jacob Thornton's avatar
Jacob Thornton committed
148
    .text-overflow();
149
150
  }
  dd {
Mark Otto's avatar
Mark Otto committed
151
    margin-left: @component-offset-horizontal;
152
153
  }
}
Jacob Thornton's avatar
Jacob Thornton committed
154

155
// MISC
156
// ----
Jacob Thornton's avatar
Jacob Thornton committed
157
158
159

// Horizontal rules
hr {
160
  margin: @line-height-base 0;
Jacob Thornton's avatar
Jacob Thornton committed
161
  border: 0;
Mark Otto's avatar
Mark Otto committed
162
  border-top: 1px solid @hr-border;
163
  border-bottom: 1px solid #fff;
Jacob Thornton's avatar
Jacob Thornton committed
164
165
}

166
// Abbreviations and acronyms
167
168
169
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
170
  cursor: help;
171
  border-bottom: 1px dotted @grayLight;
172
}
173
174
175
176
abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
177

Jacob Thornton's avatar
Jacob Thornton committed
178
179
// Blockquotes
blockquote {
180
  padding: 0 0 0 15px;
181
  margin: 0 0 @line-height-base;
182
  border-left: 5px solid @grayLighter;
Jacob Thornton's avatar
Jacob Thornton committed
183
184
  p {
    margin-bottom: 0;
185
    font-size: @font-size-base * 1.25;
186
187
    font-weight: 300;
    line-height: 1.25;
Jacob Thornton's avatar
Jacob Thornton committed
188
  }
189
  small {
Jacob Thornton's avatar
Jacob Thornton committed
190
    display: block;
191
    line-height: @line-height-base;
192
    color: @grayLight;
Jacob Thornton's avatar
Jacob Thornton committed
193
194
195
196
    &:before {
      content: '\2014 \00A0';
    }
  }
197
198
199
200

  // Float right with text-align: right
  &.pull-right {
    float: right;
201
    padding-right: 15px;
Jacob Thornton's avatar
Jacob Thornton committed
202
    padding-left: 0;
203
    border-right: 5px solid @grayLighter;
Jacob Thornton's avatar
Jacob Thornton committed
204
    border-left: 0;
205
206
207
208
    p,
    small {
      text-align: right;
    }
209
210
211
212
213
214
215
216
    small {
      &:before {
        content: '';
      }
      &:after {
        content: '\00A0 \2014';
      }
    }
217
  }
Jacob Thornton's avatar
Jacob Thornton committed
218
219
}

220
// Quotes
221
222
q:before,
q:after,
223
blockquote:before,
224
225
226
227
blockquote:after {
  content: "";
}

Jacob Thornton's avatar
Jacob Thornton committed
228
229
230
// Addresses
address {
  display: block;
231
  margin-bottom: @line-height-base;
232
  font-style: normal;
233
  line-height: @line-height-base;
Jacob Thornton's avatar
Jacob Thornton committed
234
}