source: spip-zone/_galaxie_/galactic/galactic/scss/utils/_helpers.scss @ 105541

Last change on this file since 105541 was 105541, checked in by nicolas.dorigny@…, 3 years ago

Un squelette basé sur le design créé par Jordan
cf la capture écran sur l'article https://contrib.spip.net/Refonte-de-l-identite-graphique

Ce squelette Z et SCSS est conçu pour être surchargé par des thèmes spécialisé, sous la forme d'autres plugins à installer.

Ce ne sont pas des thèmes au sens de ceux qui existent pour la dist ou pour Spipr, ces thèmes là peuvent déclarer des dépendances, des configurations, des options etc.
Ils s'installent donc comme des plugins et pas avec Zen-Garden.

Deux thèmes pour l'instant : programmer.spip.net, et spip.net

C'est un travail en cours, j'uploade tout ça sur la zone pour le partager et en discuter.

TODO : une documentation du squelette et de la façon de créer un thème (surcharges).

File size: 2.4 KB
Line 
1/*
2 * Hide visually and from screen readers:
3 */
4.hidden {
5  display: none !important;
6}
7
8/*
9 * Hide only visually, but have it available for screen readers:
10 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
11 */
12.visuallyhidden {
13  border:   0;
14  clip:     rect(0 0 0 0);
15  height:   1px;
16  margin:   -1px;
17  overflow: hidden;
18  padding:  0;
19  position: absolute;
20  width:    1px;
21}
22
23/*
24 * Extends the .visuallyhidden class to allow the element
25 * to be focusable when navigated to via the keyboard:
26 * https://www.drupal.org/node/897638
27 */
28.visuallyhidden.focusable:active,
29.visuallyhidden.focusable:focus {
30  clip:     auto;
31  height:   auto;
32  margin:   0;
33  overflow: visible;
34  position: static;
35  width:    auto;
36}
37
38/*
39 * Hide visually and from screen readers, but maintain layout
40 */
41.invisible {
42  visibility: hidden;
43}
44
45/*     
46  masqué dans un navigateur mais lisible par un lecteur d'ecran
47  uniquement si javascript actif
48*/
49.js {
50  .js-visuallyhidden {
51        border:   0;
52        clip:     rect(0 0 0 0);
53        height:   1px;
54        margin:   -1px;
55        overflow: hidden;
56        padding:  0;
57        position: absolute;
58        width:    1px;
59  }
60  .js-hidden {
61        display: none;
62  }
63}
64
65/*     
66  tout le temps affiche sauf si javascript actif
67*/
68.no-js .nojs-visuallyhidden {
69  display:    none;
70  visibility: hidden;
71  border:     0;
72  clip:       rect(0 0 0 0);
73  height:     1px;
74  margin:     -1px;
75  overflow:   hidden;
76  padding:    0;
77  position:   absolute;
78  width:      1px;
79}
80
81/*
82 * Clearfix: contain floats
83 *
84 * For modern browsers
85 * 1. The space content is one way to avoid an Opera bug when the
86 *    `contenteditable` attribute is included anywhere else in the document.
87 *    Otherwise it causes space to appear at the top and bottom of elements
88 *    that receive the `clearfix` class.
89 * 2. The use of `table` rather than `block` is only necessary if using
90 *    `:before` to contain the top-margins of child elements.
91 */
92.clearfix:before,
93.clearfix:after {
94  content: " "; /* 1 */
95  display: table; /* 2 */
96}
97
98.clearfix:after {
99  clear: both;
100}
101
102.nettoyeur {
103  @extend .clearfix;
104}
105
106/*
107 * Faire un lien sur un bloc entier
108 */
109.block-link-parent {
110  position: relative;
111  a, .block-link {
112        //position: inherit;
113        &:before {
114          content:  "";
115          position: absolute;
116          bottom:   0;
117          left:     0;
118          right:    0;
119          top:      0;
120        }
121  }
122}
123
124.list-reset {
125  list-style: none;
126  margin:     0;
127  padding:    0;
128  li {
129        margin:  0;
130        padding: 0;
131  }
132}
133
134.center {
135  text-align: center;
136}
137
138
139
Note: See TracBrowser for help on using the repository browser.