source: spip-zone/_plugins_/bootstrap/trunk/bootstrap2spip/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: 10.1 KB
Line 
1/*@ import "bootstrap/css/type.less";*/
2/* --------------------------------------------------------------
3
4   typo.css
5   Base typographique inspiree de squelettes-dist/css/typo.css
6   Merge avec les specificites Bootstrap
7   Annule et remplace la typo native de Bootstrap
8
9   Cf aussi css/scaffolding.less
10   Cf aussi css/code.less
11-------------------------------------------------------------- */
12
13/* Titraille / Intertitres */
14h1,.h1,.h1-like,
15h2,.h2,.h2-like,
16h3,.h3,.h3-like,
17h4,.h4,.h4-like,
18h5,.h5,.h5-like,
19h6,.h6,.h6-like {
20  font-family: @headings-font-family;
21  color:@headings-color;
22  display: block; margin: 0; padding: 0; font-size: 100%; font-weight: @headings-font-weight;
23  text-rendering: optimizelegibility; // Fix the character spacing for headings
24  small {
25    font-weight: normal;
26    line-height: 1;
27    color: @headings-small-color;
28    display:inline;
29    display:inline-block; /* evite de le couper si ne tient pas sur la fin de la ligne */
30  }
31}
32hr { height: 1px;margin: @emLineHeight 0;border: 0;background: @hr-border; color: @hr-border;}
33
34h1,.h1,.h1-like { font-size: @font-size-h1-em; line-height: @headings-line-height; margin-bottom: @emVertMargin / @font-size-h1-em; small { font-size: 0.65em; }}
35h2,.h2,.h2-like { font-size: @font-size-h2-em; line-height: @emLineHeight / @font-size-h2-em; margin-bottom: @emVertMargin / @font-size-h2-em; small { font-size: 0.70em; }}
36h3,.h3,.h3-like { font-size: @font-size-h3-em; line-height: @emLineHeight / @font-size-h3-em; margin-bottom: @emVertMargin / @font-size-h3-em; small { font-size: 0.80em; }}
37h4,.h4,.h4-like { font-size: @font-size-h4-em; line-height: @emLineHeight / @font-size-h4-em; margin-bottom: @emVertMargin / @font-size-h4-em; }
38h5,.h5,.h5-like { font-size: @font-size-h5-em; line-height: @emLineHeight / @font-size-h5-em; font-weight: bold; margin-bottom: @emVertMargin; }
39h6,.h6,.h6-like { font-size: @font-size-h6-em; line-height: @emLineHeight / @font-size-h6-em; font-weight: bold; }
40
41// Alignment
42.text-left           { text-align: left; }
43.text-right          { text-align: right; }
44.text-center         { text-align: center; }
45.text-justify        { text-align: justify; }
46.text-nowrap         { white-space: nowrap; }
47
48// Transformation
49.text-lowercase      { text-transform: lowercase; }
50.text-uppercase      { text-transform: uppercase; }
51.text-capitalize     { text-transform: capitalize; }
52
53// Contextual colors
54.muted,.text-muted   {
55        .text-emphasis-variant(@text-muted);
56}
57.text-primary {
58  .text-emphasis-variant(@brand-primary);
59}
60.text-success {
61  .text-emphasis-variant(@state-success-text);
62}
63.text-info {
64  .text-emphasis-variant(@state-info-text);
65}
66.text-warning {
67  .text-emphasis-variant(@state-warning-text);
68}
69.text-danger {
70  .text-emphasis-variant(@state-danger-text);
71}
72
73
74// Contextual backgrounds
75// For now we'll leave these alongside the text classes until v4 when we can
76// safely shift things around (per SemVer rules).
77.bg-primary {
78  // Given the contrast here, this is the only class to have its color inverted
79  // automatically.
80  color: #fff;
81  .bg-variant(@brand-primary);
82}
83.bg-success {
84  .bg-variant(@state-success-bg);
85}
86.bg-info {
87  .bg-variant(@state-info-bg);
88}
89.bg-warning {
90  .bg-variant(@state-warning-bg);
91}
92.bg-danger {
93  .bg-variant(@state-danger-bg);
94}
95
96/* Enrichissements typographiques */
97strong, b { font-weight: bold; }
98em, i { font-style: italic; }
99small, .small { font-size: floor((100% * @font-size-small / @font-size-base)); }
100big, .big { font-size: floor((100% * @font-size-large / @font-size-base)); }
101mark,.mark { background-color: @state-warning-bg;}
102
103// Abbreviations and acronyms
104// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
105abbr[title], acronym[title], abbr[data-original-title] { border-bottom: .1em dotted @gray-light; cursor: help; }
106abbr.initialism {
107  font-size: 90%;
108  text-transform: uppercase;
109}
110@media print { abbr[title]:after { content: " (" attr(title) ")"; } }
111dfn { font-weight: bold; font-style: italic; }
112del, .del { background-color: #FFDDDD; border-color: #CC0000; color: #CC0000; text-decoration: line-through; }
113ins, .ins { background-color: #DDFFDD; border-color: #00AA00; color: #00AA00; text-decoration: none; }
114sup, sub { font-size: .8em; font-variant: normal; line-height: 0; }
115sup { vertical-align: super; top:-0.25em;}
116.ie sup { vertical-align: text-top; }
117sub { vertical-align: sub; }
118.ie sub { vertical-align: text-bottom; }
119.caps { font-variant: small-caps; }
120img.puce {vertical-align: baseline}
121
122/* Listes */
123ul, ol, li, dl, dt, dd {margin:0;padding:0;}
124ul,ol {margin-left: @indentStep;margin-bottom: @emVertMargin;}
125@media (min-width: @screen-lg-min) {ul,ol { margin-left: @indentStep1200; }}
126@media (max-width: @screen-sm-max) {ul,ol{ margin-left: @indentStep768; }}
127ul ul, ol ol, ul ol, ol ul { margin-top: 0; margin-bottom: 0; }
128
129// Remove default list styles
130.list-unstyled,
131ul.list-unstyled,
132ol.list-unstyled {
133  margin-left: 0;
134  list-style: none;
135}
136
137// Single-line list items
138.list-inline,
139ul.list-inline,
140ol.list-inline {
141        .list-unstyled();
142        margin-left: -5px;
143  & > li {
144    display: inline-block;
145    padding-left: 5px;
146    padding-right: 5px;
147  }
148}
149
150
151dl dt { font-weight: bold; }
152dl dd {}
153dl dt, dl dd { padding-left: @indentStep; }
154@media (min-width: @screen-lg-min) { dl dt, dl dd { padding-left: @indentStep1200; } }
155@media (max-width: @screen-sm-max) { dl dt, dl dd { padding-left: @indentStep768; } }
156
157// Horizontal layout (like forms)
158.dl-horizontal {
159  dd {
160    &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
161  }
162
163  @media (min-width: @dl-horizontal-breakpoint) {
164    dt {
165      float: left;
166      width: (@dl-horizontal-offset - 20);
167      clear: left;
168      text-align: right;
169      .text-overflow();
170    }
171    dd {
172      margin-left: @dl-horizontal-offset;
173    }
174  }
175}
176
177/* Tableaux */
178/*
179table {}
180caption { background: #EEE; }
181th { font-weight: bold; }
182thead th { background: #DDD; }
183th,td,caption { padding: 0.75em; }
184tbody tr:nth-child(even) th,
185tbody tr:nth-child(even) td,
186tbody tr.even th,
187tbody tr.even td { background: #EEE; }
188tfoot { font-style: italic; }
189*/
190
191/* Citations et poesie */
192q { font-style: italic; }
193blockquote { margin:0;padding: 0 @indentStep; }
194@media (min-width: @screen-lg-min) {
195  blockquote { padding: 0 @indentStep1200; }
196}
197@media (max-width: @screen-sm-max) {
198  blockquote { padding: 0 @indentStep768; }
199}
200
201cite { font-style: italic; }
202// Blockquotes
203blockquote {
204        font-size: @blockquote-font-size;
205        border-left: 1px solid @blockquote-border-color;
206
207        p,
208        ul,
209        ol {
210                &:last-child {
211                        margin-bottom: 0;
212                }
213        }
214
215 // Note: Deprecated small and .small as of v3.1.0
216 // Context: https://github.com/twbs/bootstrap/issues/11660
217 footer,
218 small,
219 .small {
220   display: block;
221         line-height: inherit;
222   color: @blockquote-small-color;
223
224   &:before {
225     content: '\2014 \00A0'; // em dash, nbsp
226   }
227 }
228}
229
230
231// Opposite alignment of blockquote
232//
233// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
234.blockquote-reverse,
235blockquote.pull-right {
236  border-right: 1px solid @blockquote-border-color;
237  border-left: 0;
238  text-align: right;
239
240  // Account for citation
241  footer,
242  small,
243  .small {
244    &:before { content: ''; }
245    &:after {
246      content: '\00A0 \2014'; // nbsp, em dash
247    }
248  }
249}
250
251// Addresses
252address { font-style: italic; }
253
254
255/* Paragraphes */
256p, .p, dl, dd, blockquote, address, pre, table, fieldset { margin:0;margin-bottom: @emVertMargin; }
257dd+dd {margin-top:-1 * @emVertMargin;}
258
259.lead {
260  margin-bottom: @line-height-computed;
261  font-size: 1.5em;
262  font-weight: 200;
263  line-height: @emLineHeight;
264}
265
266/**
267* Print styles from HTML5 Boilerplate
268* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
269*/
270
271@media print {
272  blockquote { page-break-inside: avoid; }
273  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
274  tr, img { page-break-inside: avoid; }
275  @page { margin: 0.5cm; }
276  p, h2, h3 { orphans: 3; widows: 3; }
277  h2, h3 { page-break-after: avoid; }
278}
279
280/**
281* Base typo sur petits ecrans
282* Cf.: http://www.alsacreations.com/astuce/lire/1177
283*/
284
285@media (max-width: 640px) {
286  /* gestion des mots longs */
287  textarea, table, td, th { word-wrap: break-word; /* cesure forcee */ }
288}
289
290@media screen and (max-width:640px) and (orientation: landscape) {
291  body { -webkit-text-size-adjust: 70%; }
292}
293
294/* end */
295
296
297/* Complements */
298// Page header
299// -------------------------
300
301.page-header {
302  padding-bottom: (@line-height-computed / 2) - 1;
303  margin: @line-height-computed 0 (@line-height-computed * 1.5);
304  border-bottom: 1px solid @page-header-border-color;
305}
306
307
308.secondary { h1,.h1,.h1-like {&:extend(h2); small {display: block;}}}
309.secondary { h2,.h2,.h2-like {&:extend(h3); small {display: block;}}}
310.secondary { h3,.h3,.h3-like {&:extend(h4); small {display: block;}}}
311.secondary { h4,.h4,.h4-like {&:extend(h5); small {display: block;}}}
312.secondary { h5,.h5,.h5-like {&:extend(h6); small {display: block;}}}
313
314.jumbotron h1 {word-wrap: break-word;}
315
316.chapo {font-weight: bold;color:lighten(@text-color,7%);}
317.spip_surligne { background-color: @state-info-bg; color: @state-info-text;}
318#descriptif_site_spip {.lead}
319
320/* Listes SPIP : indentation est par defaut sur ul,ol */
321ul.spip, ol.spip { }
322ul.spip { list-style-type: square; }
323li ul.spip { list-style-type: disc; }
324li li ul.spip { list-style-type: circle; }
325ol.spip { list-style-type: decimal; }
326
327dl.spip dt { clear: both; }
328dl.spip dd {}
329
330/* Paragraphes spip */
331div.spip, ul.spip, ol.spip, .spip_poesie, .spip_documents.spip_documents_center { margin-bottom: @emVertMargin; }
332
333/* Citations, poesie */
334blockquote.spip { min-height: 40px; }
335.spip_poesie { border-left: 1px solid @blockquote-border-color; }
336.spip_poesie div { margin-left: @indentStep; text-indent: -1 * @indentStep; }
337@media (min-width: @screen-lg-min) {
338  .spip_poesie div { margin-left: @indentStep1200; text-indent: -1 * @indentStep1200; }
339}
340@media (max-width: @screen-sm-max) {
341  .spip_poesie div { margin-left: @indentStep768; text-indent: -1 * @indentStep768; }
342}
343
344/* Enluminures typo V3 / Cf.: http://www.spip-contrib.net/3118 */
345sc,.sc { font-variant: small-caps; }
346.caractencadre-spip {}
347.caractencadre2-spip {}
348.texteencadre-spip {}
Note: See TracBrowser for help on using the repository browser.