source: spip-zone/_squelettes_/html5up_solid_state/css/components/_form.scss @ 115831

Last change on this file since 115831 was 115831, checked in by jeanmarie.listes@…, 23 months ago

V2.0.4: les formulaires SPIP ont une classe, on l'utilise pour être sûr de les toucher tous (ce n'était pas le cas pour al prévisu du form de contact par ex)

File size: 4.2 KB
Line 
1///
2/// Solid State by HTML5 UP
3/// html5up.net | @ajlkn
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5///
6
7/* Form */
8
9.formulaire_spip {
10        margin: 0 0 _size(element-margin) 0;
11
12        ul {
13                list-style-type:none;
14                padding:0;
15        }
16        .editer {
17                padding:0;
18        }
19
20        legend {
21                font-size:1.2em;
22                border-bottom: 1px solid rgba(255, 255, 255, .5);
23                margin-bottom:1.5em;
24        }
25
26        .field, .editer {
27                margin: 0 0 _size(element-margin) 0;
28
29                label {
30                        margin-top: _size(element-margin) * -0.75;
31                }
32
33                &:first-child {
34                        label {
35                                margin-top: 0;
36                        }
37                }
38        }
39
40        > :last-child {
41                margin-bottom: 0;
42        }
43}
44
45label {
46        color:          _palette(fg-bold);
47        display:        block;
48        font-family:    _font(family-heading);
49        font-size:      0.8em;
50        font-weight:    _font(weight-heading-bold);
51        letter-spacing: _font(kern-heading);
52        margin:         0 0 (_size(element-margin) * 0.35) 0;
53        text-transform: uppercase;
54}
55
56input[type="text"],
57input[type="password"],
58input[type="email"],
59input[type="tel"],
60select,
61textarea {
62        @include vendor('appearance', 'none');
63        background:      _palette(border-bg);
64        border-radius:   _size(border-radius);
65        border:          none;
66        border:          solid 2px _palette(border);
67        color:           inherit;
68        display:         block;
69        outline:         0;
70        padding:         0 1em;
71        text-decoration: none;
72        width:           100%;
73
74        &:invalid {
75                box-shadow: none;
76        }
77
78        &:focus {
79                border-color: desaturate(lighten(_palette(accent), 6), 3);
80        }
81}
82
83.select-wrapper {
84        @include icon;
85        display:  block;
86        position: relative;
87
88        &:before {
89                color:          _palette(border);
90                content:        '\f078';
91                display:        block;
92                height:         _size(element-height);
93                line-height:    _size(element-height);
94                pointer-events: none;
95                position:       absolute;
96                right:          0;
97                text-align:     center;
98                top:            0;
99                width:          _size(element-height);
100        }
101
102        select::-ms-expand {
103                display: none;
104        }
105}
106
107select {
108        option {
109                color:      _palette(fg-bold);
110                background: _palette(bg);
111        }
112}
113
114input[type="text"],
115input[type="password"],
116input[type="email"],
117select {
118        height: _size(element-height);
119}
120
121textarea {
122        padding: 0.75em 1em;
123}
124
125input[type="checkbox"],
126input[type="radio"], {
127        @include vendor('appearance', 'none');
128        display:      block;
129        float:        left;
130        margin-right: -2em;
131        opacity:      0;
132        width:        1em;
133        z-index:      -1;
134
135        & + label {
136                @include icon;
137                color:          _palette(fg);
138                cursor:         pointer;
139                display:        inline-block;
140                font-size:      1em;
141                font-family:    _font(family);
142                text-transform: none;
143                letter-spacing: 0;
144                font-weight:    _font(weight);
145                padding-left:   (_size(element-height) * 0.6) + 0.75em;
146                padding-right:  0.75em;
147                position:       relative;
148
149                &:before {
150                        background:    _palette(border-bg);
151                        border-radius: _size(border-radius);
152                        border:        solid 2px _palette(border);
153                        content:       '';
154                        display:       inline-block;
155                        height:        (_size(element-height) * 0.6);
156                        left:          0;
157                        line-height:   (_size(element-height) * 0.575);
158                        position:      absolute;
159                        text-align:    center;
160                        top:           0;
161                        width:         (_size(element-height) * 0.6);
162                }
163        }
164
165        &:checked + label {
166                &:before {
167                        background:   _palette(fg-bold);
168                        border-color: _palette(fg-bold);
169                        content:      '\f00c';
170                        color:        _palette(bg);
171                }
172        }
173
174        &:focus + label {
175                &:before {
176                        border-color: _palette(accent);
177                }
178        }
179}
180
181input[type="checkbox"] {
182        & + label {
183                &:before {
184                        border-radius: _size(border-radius);
185                }
186        }
187}
188
189input[type="radio"] {
190        & + label {
191                &:before {
192                        border-radius: 100%;
193                }
194        }
195}
196
197::-webkit-input-placeholder {
198        color:   _palette(fg-light) !important;
199        opacity: 1.0;
200}
201
202:-moz-placeholder {
203        color:   _palette(fg-light) !important;
204        opacity: 1.0;
205}
206
207::-moz-placeholder {
208        color:   _palette(fg-light) !important;
209        opacity: 1.0;
210}
211
212:-ms-input-placeholder {
213        color:   _palette(fg-light) !important;
214        opacity: 1.0;
215}
216
217.polyfill-placeholder {
218        color:   _palette(fg-light) !important;
219        opacity: 1.0;
220}
Note: See TracBrowser for help on using the repository browser.