Dotclear

source: admin/style/scss/partials/_forms.scss @ 3602:8a1b100e0a84

Revision 3602:8a1b100e0a84, 3.3 KB checked in by franck <carnet.franck.paul@…>, 8 years ago (diff)

Do not use border and background on select to use the system aspect of them in Firefox (else FF will use the oldest Netscape ugly look).
Target Safari to cope wit font-size select/option problem.
The font-size of option element cannot be changed in Firefox (very old bug)

Line 
1input[type=text],
2input[type=password],
3input[type=submit],
4input[type=button],
5input[type=reset],
6a.button,
7button,
8textarea,
9select,
10legend {
11     max-width: 100%;
12}
13
14input[type=text],
15input[type=password],
16input[type=submit],
17input[type=button],
18input[type=reset],
19a.button,
20button,
21textarea,
22legend {
23     border-radius: 3px;
24}
25
26form {
27     display: block;
28     margin: 0;
29     padding: 0;
30}
31
32fieldset {
33     display: block;
34     margin: 1em 0;
35     padding: 1em 0.5em;
36     border-width: 1px 0;
37     border-style: solid;
38     border-color: #ccc;
39     background: #f7f7f7;
40}
41
42input[type=text],
43textarea {
44     font-family: $sans-serif-input;
45     font-size: 100%;
46}
47
48legend {
49     padding: 0.2em 0.6em;
50     border-width: 1px;
51     border-style: solid;
52     border-color: #676e78;
53     background: #fff;
54     margin-bottom: 0.5em;
55}
56
57label .maximal,
58textarea.maximal,
59input.maximal,
60select.maximal {
61     width: 99%;
62}
63
64input[type=text],
65input[type=password],
66textarea,
67select {
68     color: #000;
69     box-shadow: 1px 1px 2px #f3f3f3 inset;
70     padding: 3px;
71     vertical-align: top;
72}
73input[type=text],
74input[type=password],
75textarea {
76     background: #fcfcfc;
77     border-width: 1px;
78     border-style: solid;
79     border-color: #dfdfdf;
80}
81
82input:focus,
83textarea:focus {
84     border-color: #9bca1c;
85}
86
87textarea {
88     padding: 2px 0;
89     &.maximal {
90          resize: vertical;
91     }
92     .area & {
93          display: block;
94          width: 100%;
95          resize: vertical;
96     }
97}
98
99select {
100     padding: 2px 0;
101     vertical-align: middle;
102}
103@media not all and (min-resolution:.001dpcm)
104{ @supports (-webkit-appearance:none) {
105     /* Safari 10.1+ only (https://browserstrangeness.bitbucket.io/css_hacks.html#webkit) */
106     select {
107          font-size: initial;
108    }
109}}
110
111select.l10n option {
112     padding-left: 16px;
113}
114
115option.avail10n {
116     background: transparent url(../images/check-on.png) no-repeat 0 50%;
117}
118
119input.invalid,
120textarea.invalid,
121select.invalid {
122     color: #900;
123     box-shadow: 0 0 0 3px rgba(218, 62, 90, 0.3);
124}
125input.invalid,
126textarea.invalid {
127     border: 1px solid red;
128     background: #FFBABA;
129}
130
131input[type=text],
132input[type=password],
133textarea {
134     margin-right: .3em;
135}
136
137input[type=checkbox],
138input[type=radio],
139input[type=file] {
140     border: none;
141     margin: 0 .33em 0 0;
142     padding: 0;
143     background: transparent;
144}
145input + input[type=checkbox] {
146     // Used for js expand/hide (lists, options, ...)
147     margin-left: .33em;
148}
149a input {
150     // Used for js expand/hide (lists, options, ...)
151     margin-right: .33em;
152}
153
154input[type=file] {
155     margin-top: .3em;
156     margin-bottom: .3em;
157}
158
159optgroup {
160     font-weight: bold;
161     font-style: normal;
162}
163
164option {
165     font-weight: normal;
166}
167
168label,
169label span {
170     display: block;
171}
172
173label.ib,
174input.ib {
175     display: inline-block;
176}
177
178label.classic {
179     display: inline;
180}
181
182label.classic input,
183label span input,
184label.classic select,
185label span select {
186     display: inline;
187}
188
189label.required {
190     font-weight: bold;
191}
192
193label.required abbr {
194     color: #900;
195     font-size: 1.3em;
196}
197
198label.bold {
199     text-transform: uppercase;
200     font-weight: bold;
201     margin-top: 2em;
202}
203
204label.area,
205p.area {
206     width: inherit !important;
207}
208
209p.field {
210     position: relative;
211     label {
212          display: inline-block;
213          width: 14em;
214     }
215     &.wide label {
216          width: 21em;
217     }
218     input,
219     select {
220          display: inline-block;
221     }
222}
223
224.form-note {
225     font-style: italic;
226     font-weight: normal;
227     color: #676e78;
228}
229
230p.form-note {
231     margin-top: -.7em;
232}
233
234span.form-note {
235     text-transform: none;
236}
237
238// .more-info Additional information on fieldset, field, … (may be hide from user-prefs)
239.more-info {}
240
241.no-more-info {
242     display: none;
243}
Note: See TracBrowser for help on using the repository browser.

Sites map