source: spip-zone/_plugins_/bootstrap/trunk/bootstrap/css/type.less @ 93586

Last change on this file since 93586 was 93586, checked in by cedric@…, 5 years ago

Mise a jour de BS v3.3.6 : attention le fichier variables.less comprend une variable supplementaire qu'il faut ajouter dans son fichier personalise le cas echeant

File size: 5.8 KB
Line 
1//
2// Typography
3// --------------------------------------------------
4
5
6// Headings
7// -------------------------
8
9h1, h2, h3, h4, h5, h6,
10.h1, .h2, .h3, .h4, .h5, .h6 {
11  font-family: @headings-font-family;
12  font-weight: @headings-font-weight;
13  line-height: @headings-line-height;
14  color: @headings-color;
15
16  small,
17  .small {
18    font-weight: normal;
19    line-height: 1;
20    color: @headings-small-color;
21  }
22}
23
24h1, .h1,
25h2, .h2,
26h3, .h3 {
27  margin-top: @line-height-computed;
28  margin-bottom: (@line-height-computed / 2);
29
30  small,
31  .small {
32    font-size: 65%;
33  }
34}
35h4, .h4,
36h5, .h5,
37h6, .h6 {
38  margin-top: (@line-height-computed / 2);
39  margin-bottom: (@line-height-computed / 2);
40
41  small,
42  .small {
43    font-size: 75%;
44  }
45}
46
47h1, .h1 { font-size: @font-size-h1; }
48h2, .h2 { font-size: @font-size-h2; }
49h3, .h3 { font-size: @font-size-h3; }
50h4, .h4 { font-size: @font-size-h4; }
51h5, .h5 { font-size: @font-size-h5; }
52h6, .h6 { font-size: @font-size-h6; }
53
54
55// Body text
56// -------------------------
57
58p {
59  margin: 0 0 (@line-height-computed / 2);
60}
61
62.lead {
63  margin-bottom: @line-height-computed;
64  font-size: floor((@font-size-base * 1.15));
65  font-weight: 300;
66  line-height: 1.4;
67
68  @media (min-width: @screen-sm-min) {
69    font-size: (@font-size-base * 1.5);
70  }
71}
72
73
74// Emphasis & misc
75// -------------------------
76
77// Ex: (12px small font / 14px base font) * 100% = about 85%
78small,
79.small {
80  font-size: floor((100% * @font-size-small / @font-size-base));
81}
82
83mark,
84.mark {
85  background-color: @state-warning-bg;
86  padding: .2em;
87}
88
89// Alignment
90.text-left           { text-align: left; }
91.text-right          { text-align: right; }
92.text-center         { text-align: center; }
93.text-justify        { text-align: justify; }
94.text-nowrap         { white-space: nowrap; }
95
96// Transformation
97.text-lowercase      { text-transform: lowercase; }
98.text-uppercase      { text-transform: uppercase; }
99.text-capitalize     { text-transform: capitalize; }
100
101// Contextual colors
102.text-muted {
103  color: @text-muted;
104}
105.text-primary {
106  .text-emphasis-variant(@brand-primary);
107}
108.text-success {
109  .text-emphasis-variant(@state-success-text);
110}
111.text-info {
112  .text-emphasis-variant(@state-info-text);
113}
114.text-warning {
115  .text-emphasis-variant(@state-warning-text);
116}
117.text-danger {
118  .text-emphasis-variant(@state-danger-text);
119}
120
121// Contextual backgrounds
122// For now we'll leave these alongside the text classes until v4 when we can
123// safely shift things around (per SemVer rules).
124.bg-primary {
125  // Given the contrast here, this is the only class to have its color inverted
126  // automatically.
127  color: #fff;
128  .bg-variant(@brand-primary);
129}
130.bg-success {
131  .bg-variant(@state-success-bg);
132}
133.bg-info {
134  .bg-variant(@state-info-bg);
135}
136.bg-warning {
137  .bg-variant(@state-warning-bg);
138}
139.bg-danger {
140  .bg-variant(@state-danger-bg);
141}
142
143
144// Page header
145// -------------------------
146
147.page-header {
148  padding-bottom: ((@line-height-computed / 2) - 1);
149  margin: (@line-height-computed * 2) 0 @line-height-computed;
150  border-bottom: 1px solid @page-header-border-color;
151}
152
153
154// Lists
155// -------------------------
156
157// Unordered and Ordered lists
158ul,
159ol {
160  margin-top: 0;
161  margin-bottom: (@line-height-computed / 2);
162  ul,
163  ol {
164    margin-bottom: 0;
165  }
166}
167
168// List options
169
170// Unstyled keeps list items block level, just removes default browser padding and list-style
171.list-unstyled {
172  padding-left: 0;
173  list-style: none;
174}
175
176// Inline turns list items into inline-block
177.list-inline {
178  .list-unstyled();
179  margin-left: -5px;
180
181  > li {
182    display: inline-block;
183    padding-left: 5px;
184    padding-right: 5px;
185  }
186}
187
188// Description Lists
189dl {
190  margin-top: 0; // Remove browser default
191  margin-bottom: @line-height-computed;
192}
193dt,
194dd {
195  line-height: @line-height-base;
196}
197dt {
198  font-weight: bold;
199}
200dd {
201  margin-left: 0; // Undo browser default
202}
203
204// Horizontal description lists
205//
206// Defaults to being stacked without any of the below styles applied, until the
207// grid breakpoint is reached (default of ~768px).
208
209.dl-horizontal {
210  dd {
211    &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
212  }
213
214  @media (min-width: @dl-horizontal-breakpoint) {
215    dt {
216      float: left;
217      width: (@dl-horizontal-offset - 20);
218      clear: left;
219      text-align: right;
220      .text-overflow();
221    }
222    dd {
223      margin-left: @dl-horizontal-offset;
224    }
225  }
226}
227
228
229// Misc
230// -------------------------
231
232// Abbreviations and acronyms
233abbr[title],
234// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
235abbr[data-original-title] {
236  cursor: help;
237  border-bottom: 1px dotted @abbr-border-color;
238}
239.initialism {
240  font-size: 90%;
241  .text-uppercase();
242}
243
244// Blockquotes
245blockquote {
246  padding: (@line-height-computed / 2) @line-height-computed;
247  margin: 0 0 @line-height-computed;
248  font-size: @blockquote-font-size;
249  border-left: 5px solid @blockquote-border-color;
250
251  p,
252  ul,
253  ol {
254    &:last-child {
255      margin-bottom: 0;
256    }
257  }
258
259  // Note: Deprecated small and .small as of v3.1.0
260  // Context: https://github.com/twbs/bootstrap/issues/11660
261  footer,
262  small,
263  .small {
264    display: block;
265    font-size: 80%; // back to default font-size
266    line-height: @line-height-base;
267    color: @blockquote-small-color;
268
269    &:before {
270      content: '\2014 \00A0'; // em dash, nbsp
271    }
272  }
273}
274
275// Opposite alignment of blockquote
276//
277// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
278.blockquote-reverse,
279blockquote.pull-right {
280  padding-right: 15px;
281  padding-left: 0;
282  border-right: 5px solid @blockquote-border-color;
283  border-left: 0;
284  text-align: right;
285
286  // Account for citation
287  footer,
288  small,
289  .small {
290    &:before { content: ''; }
291    &:after {
292      content: '\00A0 \2014'; // nbsp, em dash
293    }
294  }
295}
296
297// Addresses
298address {
299  margin-bottom: @line-height-computed;
300  font-style: normal;
301  line-height: @line-height-base;
302}
Note: See TracBrowser for help on using the repository browser.