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

Last change on this file since 105859 was 105859, checked in by marcimat@…, 4 years ago

Quelques modifications en vrac

  • Pouvoir choisir la couleur de fond sombre du thème
  • Pouvoir choisir la couleur vive principale du thème
  • Pouvoir mettre un formulaire de contact (avec le plugin Contact avancé)
  • Pouvoir mettre des liens sociaux (avec le plugin Sociaux).
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
9form {
10        margin: 0 0 _size(element-margin) 0;
11
12        .editer-groupe {
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.