source: spip-zone/_galaxie_/galactic/galactic/scss/components/_forms.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: 6.0 KB
Line 
1/**
2 * 1. Correct color not being inherited.
3 *    Known issue: affects color of disabled elements.
4 * 2. Correct font properties not being inherited.
5 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
6 */
7
8button,
9input,
10optgroup,
11select,
12textarea {
13  // color: inherit; /* 1 */
14  font:   inherit; /* 2 */
15  margin: 0; /* 3 */
16}
17
18//----------------------------------------
19//  Formulaires SPIP
20//----------------------------------------
21
22.formulaire_spip {
23
24  @include text-block();
25
26  .boutons,
27  .titrem,
28  .legend {
29        margin: 0;
30  }
31
32  > p,
33  fieldset > p {
34        margin:  0 !important;
35        padding: 0.2em 1em;
36  }
37
38  ul { list-style: none; margin: 0;}
39 
40  .editer {
41        list-style: none;
42        margin:     0 0 1em 0;
43        clear:      both;
44        overflow:   hidden;
45  }
46
47  .fieldset,
48  .saisie_explication {
49        padding:    0;
50        border:     none;
51        background: none;
52  }
53
54  .editer.afficher {
55        overflow:      hidden;
56        margin-bottom: 0.8em;
57  }
58
59  /* elements du formulaire */
60  input.text,
61  input.password,
62  input.date,
63  input[type=text],
64  input[type=password],
65  input[type=search],
66  textarea,
67  select {
68        font-size:    1em;
69        font-family:  inherit;
70        padding-left: 0.3em;
71        width:        100%;
72        border:       1px solid $couleur_bordure_formulaire;
73        background:   white;
74        // bug with em heights in chrome
75        min-height:       em(30px);
76        line-height:  em(30px);
77  }
78
79  select {
80        -webkit-appearance: none;
81        -moz-appearance:    none;
82        appearance:         none;
83        background:         white url(../images/icone-dropdown.png) right center no-repeat;
84        padding-right:      28px;
85        border-radius:      0;
86        &:hover,
87        &:focus {
88          background-image: url(../images/icone-dropdown-over.png);
89        }
90  }
91  select[multiple] {
92        background-image: none;
93        &:hover,
94        &:focus {
95          background-image: none;
96        }
97  }
98 
99  select::-ms-expand {
100        display: none;
101  }
102
103  .saisie_date input,
104  input.date {
105        //background: white url(../images/icone-calendrier.png) right center no-repeat;
106  }
107
108  textarea {
109        height:      em(250px);
110        overflow:    auto;
111        font-size:   inherit;
112        font-family: inherit;
113        line-height: inherit;
114  }
115
116  input.placeholder,
117  textarea.placeholder {
118        color: lighten($couleur-texte, 15%);
119  }
120
121  input::-webkit-input-placeholder {
122        color: $couleur-gris2;
123  }
124  input:-moz-placeholder { /* Firefox 18- */
125        color: $couleur-gris2;
126  }
127  input::-moz-placeholder { /* Firefox 19+ */
128        color: $couleur-gris2;
129  }
130  input:-ms-input-placeholder {
131        color: $couleur-gris2;
132  }
133
134  .erreur {
135        background-color: #FBE3E4;
136  }
137
138  .erreur_message {
139        display:     block;
140        color:       #8A1F11;
141        font-weight: bold;
142  }
143
144  .erreur input.text,
145  .erreur input.password,
146  .erreur textarea {
147        border: 2px solid #FBC2C4;
148  }
149
150  .obligatoire .label {
151        font-weight: bold;
152  }
153
154  /* sous choix */
155  .choix {
156        overflow: hidden;
157        margin:   0.3em 0;
158  }
159
160  .choix label {
161        font-weight:    normal;
162        text-transform: none;
163        display:        inline-block;
164        float:          right;
165        width:          96%;
166        padding-left:   0.5em;
167  }
168
169  .choix label.on {
170        font-weight: bold !important;
171  }
172
173  .choix .radio,
174  .choix .checkbox {
175        float:       left;
176        margin-top:  0.25em;
177        margin-left: 0.2em;
178  }
179
180  /* reponses succes/erreur */
181
182  .reponse_formulaire,
183  .error, .success, .notice {
184        border:        1px solid;
185        font-weight:   normal;
186        padding:       0.5em;
187        min-height:    em(24px);
188        margin-bottom: 1em;
189        margin-top:    1em;
190  }
191
192  .reponse_formulaire_ok {
193        color:            #264409;
194        border-color:     #C6D880;
195        background-color: #E6EFC2;
196  }
197
198  .reponse_formulaire_erreur {
199        color:            #8A1F11;
200        border-color:     #FBC2C4;
201        background-color: #FBE3E4;
202  }
203
204  /* Explications */
205  .saisie_explication .explication {
206        background: #F0F0F0;
207        font-size:  100%;
208        color:      $couleur-texte;
209        padding:    0.6em;
210  }
211
212  p.explication {
213        display:       block;
214        font-weight:   normal;
215        //color:         lighten($couleur-texte, 25%);
216        //font-size:     95%;
217        //background:    #ECECEC;
218        //padding:       0.2em 0.4em;
219        font-style:    italic;
220        margin-bottom: 0.5em;
221  }
222
223  .explication * {
224        margin: 0 !important;
225  }
226
227  /* Remarques importantes */
228  .attention {
229        display:       block;
230        margin-bottom: 1em;
231        font-weight:   normal;
232  }
233
234  input.submit,
235  input.reset,
236  input.button {
237        width: auto;
238  }
239
240  /* Fieldset */
241
242  fieldset {
243        border:  0;
244        width:   auto;
245        padding: 0;
246        margin:  1.5em 0;
247  }
248
249  h2.legend,
250  h3.legend,
251  legend {
252        font-weight:    bold;
253        text-transform: uppercase;
254        font-size:      125%;
255        display:        block;
256        border-bottom:  1px solid lighten($couleur_bordure_formulaire, 20%);
257        width:          100%;
258        margin:         0 0 0.75em 0;
259        padding-bottom: 0.25em;
260  }
261
262  fieldset input.text,
263  fieldset textarea.textarea {
264        border: 1px solid $couleur_bordure_formulaire;
265  }
266
267  .saisie_date label {
268        display: inline-block;
269        width:   40%;
270  }
271
272  /* boutons */
273  .boutons {
274        margin:     1em 0 0 0;
275        clear:      both;
276        padding:    1em 0;
277        text-align: right;
278  }
279
280  .boutons-left {
281        text-align: left;
282  }
283
284  .boutons-center {
285        text-align: center;
286  }
287
288  .boutons.noborder {
289        margin-top: 0;
290  }
291
292}
293
294//----------------------------------------
295//  Boutons
296//----------------------------------------
297
298a.button,
299.formulaire_spip button,
300.formulaire_spip input[type=submit] {
301  display:          inline-block;
302  height:           em(30px);
303  line-height:      em(30px);
304  margin-right:     1em;
305  padding:          0 1em;
306  background-color: $couleur-bouton;
307  border:           none;
308  box-shadow:       none;
309  text-transform:   uppercase;
310  text-align:       center;
311  text-decoration:  none;
312  color:            white !important;
313  transition:       background 0.3s;
314  cursor:           pointer;
315  &:last-child {
316        margin-right: 0;
317  }
318  &:hover {
319        background-color: darken($couleur-bouton, 20%);
320  }
321}
322
323//----------------------------------------
324//  Focus
325//----------------------------------------
326
327
328input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, textarea:focus, select:focus {
329  box-shadow: 0 0 5px $couleur-nav;
330  border-color: darken($couleur-nav, 20%);
331}
332
333
334/* Bouton de validation */
335/* Pour IE, qui grossit le bouton submit */
336input[type="submit"], input[type="reset"] {
337  font-size: inherit;
338}
Note: See TracBrowser for help on using the repository browser.