type.less 4.55 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
34
.muted               { color: @grayLight; }
a.muted:hover        { color: darken(@grayLight, 10%); }

.text-warning        { color: @warningText; }
35
36
a.text-warning:hover { color: darken(@warningText, 10%); }

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

40
41
.text-info           { color: @infoText; }
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


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

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

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

67
68
69
70
71
72
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
73

74
75
76
77
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
78

Jacob Thornton's avatar
Jacob Thornton committed
79

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

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


Jacob Thornton's avatar
Jacob Thornton committed
90

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

// Unordered and Ordered lists
ul, ol {
96
  padding: 0;
97
  margin: 0 0 @line-height-base / 2 25px;
Jacob Thornton's avatar
Jacob Thornton committed
98
99
100
101
102
103
104
105
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
li {
106
  line-height: @line-height-base;
Jacob Thornton's avatar
Jacob Thornton committed
107
}
Mark Otto's avatar
Mark Otto committed
108

109
110
111
112
113
// 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
114
  margin-left: 0;
115
  list-style: none;
Jacob Thornton's avatar
Jacob Thornton committed
116
}
Mark Otto's avatar
Mark Otto committed
117
// Single-line list items
118
119
120
121
.list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
122
}
Jacob Thornton's avatar
Jacob Thornton committed
123
124
125

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

153
// MISC
154
// ----
Jacob Thornton's avatar
Jacob Thornton committed
155
156
157

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

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

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

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

216
// Quotes
217
218
q:before,
q:after,
219
blockquote:before,
220
221
222
223
blockquote:after {
  content: "";
}

Jacob Thornton's avatar
Jacob Thornton committed
224
225
226
// Addresses
address {
  display: block;
227
  margin-bottom: @line-height-base;
228
  font-style: normal;
229
  line-height: @line-height-base;
Jacob Thornton's avatar
Jacob Thornton committed
230
}