source: spip-zone/_plugins_/bootstrap/trunk/bootstrap2spip/css/_type.scss @ 114918

Last change on this file since 114918 was 114918, checked in by cedric@…, 4 months ago

moderniser la puce comme dans SPIP 3.3+ si besoin et la styler en consequence

  • Property svn:executable set to *
File size: 8.2 KB
Line 
1// stylelint-disable declaration-no-important, selector-list-comma-newline-after
2/*@ import "bootstrap/css/_type";*/
3
4/* --------------------------------------------------------------
5
6   typo.css
7   Base typographique inspiree de squelettes-dist/css/typo.css
8   Merge avec les specificites Bootstrap
9   Annule et remplace la typo native de Bootstrap
10
11   Cf aussi css/scaffolding.less
12   Cf aussi css/code.less
13-------------------------------------------------------------- */
14
15
16/* Titraille / Intertitres */
17h1,.h1,.h1-like,
18h2,.h2,.h2-like,
19h3,.h3,.h3-like,
20h4,.h4,.h4-like,
21h5,.h5,.h5-like,
22h6,.h6,.h6-like {
23  font-family: $headings-font-family;
24  color:$headings-color;
25  display: block;
26  margin: 0;
27  padding: 0;
28  font-size: 100%;
29  font-weight: $headings-font-weight;
30  text-rendering: optimizelegibility; // Fix the character spacing for headings
31  margin-bottom:$rem-vert-margin;
32  small {
33    font-weight: normal;
34    line-height: 1;
35    color: $headings-small-color;
36    display:inline-block; /* evite de le couper si ne tient pas sur la fin de la ligne */
37  }
38}
39hr { height: $hr-border-width;margin: $rem-vert-margin 0;border: 0;background: $hr-border-color; color: $hr-border-color;}
40
41h1,.h1,.h1-like { font-size: $h1-font-size; line-height: $headings-line-height; small { font-size: 0.65em; }}
42.secondary h1,.secondary .h1,.secondary .h1-like,
43h2,.h2,.h2-like { font-size: $h2-font-size; line-height: $line-height-base / ($h2-font-size / $font-size-base); small { font-size: 0.70em; }}
44.secondary h2,.secondary .h2,.secondary .h2-like,
45h3,.h3,.h3-like { font-size: $h3-font-size; line-height: $line-height-base / ($h3-font-size / $font-size-base); small { font-size: 0.80em; }}
46.secondary h3,.secondary .h3,.secondary .h3-like,
47h4,.h4,.h4-like { font-size: $h4-font-size; line-height: $line-height-base / ($h4-font-size / $font-size-base); }
48.secondary h4,.secondary .h4,.secondary .h4-like,
49h5,.h5,.h5-like { font-size: $h5-font-size; line-height: $line-height-base / ($h5-font-size / $font-size-base); font-weight: bold; }
50.secondary h5,.secondary .h5,.secondary .h5-like,
51h6,.h6,.h6-like { font-size: $h6-font-size; line-height: $line-height-base / ($h6-font-size / $font-size-base); font-weight: bold; }
52
53.lead {
54  @include font-size($lead-font-size);
55  font-weight: $lead-font-weight;
56}
57
58// Type display classes
59.display-1 {
60  @include font-size($display1-size);
61  font-weight: $display1-weight;
62  line-height: $display-line-height;
63}
64.display-2 {
65  @include font-size($display2-size);
66  font-weight: $display2-weight;
67  line-height: $display-line-height;
68}
69.display-3 {
70  @include font-size($display3-size);
71  font-weight: $display3-weight;
72  line-height: $display-line-height;
73}
74.display-4 {
75  @include font-size($display4-size);
76  font-weight: $display4-weight;
77  line-height: $display-line-height;
78}
79
80
81
82
83//
84// Emphasis
85//
86
87small,
88.small {
89  @include font-size($small-font-size);
90}
91
92mark,
93.mark {
94  padding: $mark-padding;
95  background-color: $mark-bg;
96}
97
98
99/* Enrichissements typographiques */
100strong, b { font-weight: bold; }
101em, i { font-style: italic; }
102big, .big { font-size: $font-size-lg; }
103
104// Abbreviations and acronyms
105// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
106abbr[title], acronym[title], abbr[data-original-title] { border-bottom: .1em dotted $gray-500; cursor: help; }
107abbr.initialism {
108  font-size: 90%;
109  text-transform: uppercase;
110}
111@media print { abbr[title]:after { content: " (" attr(title) ")"; } }
112dfn { font-weight: bold; font-style: italic; }
113del, .del { background-color: #FFDDDD; border-color: #CC0000; color: #CC0000; text-decoration: line-through; }
114ins, .ins { background-color: #DDFFDD; border-color: #00AA00; color: #00AA00; text-decoration: none; }
115sup, sub { font-size: .8em; font-variant: normal; line-height: 0; }
116sup { vertical-align: super; top:-0.25em;}
117.ie sup { vertical-align: text-top; }
118sub { vertical-align: sub; }
119.ie sub { vertical-align: text-bottom; }
120.caps { font-variant: small-caps; }
121
122.spip-puce {
123  position: relative;
124  top: 1px;
125  display: inline-block;
126  font-style: normal;
127  font-weight: bold;
128  font-size: 1.4em;
129  line-height: 0.7;
130  &:before { content: "\203A";}
131  b { display: none;}
132}
133
134/* Listes */
135ul, ol, li, dl, dt, dd {margin:0;padding:0;}
136ul,ol {margin-left: $indent-x-sm;margin-bottom: $rem-vert-margin;}
137@include media-breakpoint-up(md) {
138  ul,ol { margin-left: $indent-x; }
139}
140@include media-breakpoint-up(lg) {
141  ul,ol { margin-left: $indent-x-lg; }
142}
143ul ul, ol ol, ul ol, ol ul { margin-top: 0; margin-bottom: 0; }
144
145//
146// Lists
147//
148
149.list-unstyled,
150ul.list-unstyled,
151ol.list-unstyled {
152  @include list-unstyled;
153}
154
155// Inline turns list items into inline-block
156.list-inline,
157ul.list-inline,
158ol.list-inline {
159  @include list-unstyled;
160}
161.list-inline-item {
162  display: inline-block;
163
164  &:not(:last-child) {
165    margin-right: $list-inline-padding;
166  }
167}
168
169
170//
171// Misc
172//
173dl dt { font-weight: bold; }
174dl dd {}
175dl dt, dl dd { padding-left: $indent-x-sm; }
176@include media-breakpoint-up(md) {
177  dl dt, dl dd { padding-left: $indent-x; }
178}
179@include media-breakpoint-up(lg) {
180  dl dt, dl dd { padding-left: $indent-x-lg; }
181}
182
183// Builds on `abbr`
184.initialism {
185  @include font-size(90%);
186  text-transform: uppercase;
187}
188
189/* Citations et poesie */
190q { font-style: italic; }
191blockquote { margin:0;padding: 0 $indent-x-sm; }
192@include media-breakpoint-up(md) {
193  blockquote { padding: 0 $indent-x; }
194}
195@include media-breakpoint-up(lg) {
196  blockquote { padding: 0 $indent-x-lg; }
197}
198
199cite { font-style: italic; }
200
201
202// Blockquotes
203blockquote, .blockquote {
204  @include font-size($blockquote-font-size);
205  border-left: 1px solid $border-color;
206  p,
207  ul,
208  ol {
209      &:last-child {
210          margin-bottom: 0;
211      }
212  }
213}
214
215.blockquote-footer {
216  display: block;
217  @include font-size($blockquote-small-font-size);
218  color: $blockquote-small-color;
219
220  &::before {
221    content: "\2014\00A0"; // em dash, nbsp
222  }
223}
224
225// Addresses
226address { font-style: italic; }
227
228
229/* Paragraphes */
230p, .p, dl, dd, blockquote, address, pre, table, fieldset { margin:0;margin-bottom: $rem-vert-margin; }
231dd+dd {margin-top:-1 * $rem-vert-margin;}
232
233
234/**
235* Print styles from HTML5 Boilerplate
236* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
237*/
238
239@media print {
240  blockquote { page-break-inside: avoid; }
241  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
242  tr, img { page-break-inside: avoid; }
243  @page { margin: 0.5cm; }
244  p, h2, h3 { orphans: 3; widows: 3; }
245  h2, h3 { page-break-after: avoid; }
246}
247
248/**
249* Base typo sur petits ecrans
250* Cf.: http://www.alsacreations.com/astuce/lire/1177
251*/
252
253@include media-breakpoint-down(xs) {
254  /* gestion des mots longs */
255  textarea, table, td, th { word-wrap: break-word; /* cesure forcee */ }
256}
257
258//@media screen and (max-width:640px) and (orientation: landscape) {
259//  body { -webkit-text-size-adjust: 70%; }
260//}
261
262/* end */
263
264/* Complements */
265
266.secondary {
267  h1,.h1,.h1-like,
268  h2,.h2,.h2-like,
269  h3,.h3,.h3-like,
270  h4,.h4,.h4-like,
271  h5,.h5,.h5-like {
272    small {display: block;}
273  }
274}
275
276.jumbotron h1 {word-wrap: break-word;}
277
278.chapo {font-weight: bold;color:lighten($body-color,7%);}
279.spip_surligne { background-color: theme-color-level("info", $alert-bg-level); color: theme-color-level("info", $alert-color-level);}
280#descriptif_site_spip {
281  @extend .lead;
282}
283
284/* Listes SPIP : indentation est par defaut sur ul,ol */
285ul.spip, ol.spip { }
286ul.spip { list-style-type: square; }
287li ul.spip { list-style-type: disc; }
288li li ul.spip { list-style-type: circle; }
289ol.spip { list-style-type: decimal; }
290
291dl.spip dt { clear: both; }
292dl.spip dd {}
293
294/* Paragraphes spip */
295div.spip, ul.spip, ol.spip, .spip_poesie, .spip_documents.spip_documents_center { margin-bottom: $rem-vert-margin; }
296
297/* Citations, poesie */
298blockquote.spip { min-height: 40px; }
299.spip_poesie { border-left: 1px solid $border-color; }
300.spip_poesie div { margin-left: $indent-x-sm; text-indent: -1 * $indent-x-sm; }
301@include media-breakpoint-up(md) {
302  .spip_poesie div { margin-left: $indent-x; text-indent: -1 * $indent-x; }
303}
304@include media-breakpoint-up(lg) {
305  .spip_poesie div { margin-left: $indent-x-lg; text-indent: -1 * $indent-x-lg; }
306}
307
308
309/* Enluminures typo V3 / Cf.: https://contrib.spip.net/3118 */
310sc,.sc { font-variant: small-caps; }
311.caractencadre-spip {}
312.caractencadre2-spip {}
313.texteencadre-spip {}
Note: See TracBrowser for help on using the repository browser.