Commit | Line | Data |
---|---|---|
f2b50825 AE |
1 | input[type="date"], |
2 | input[type="datetime"], | |
3 | input[type="email"], | |
4 | input[type="number"], | |
5 | input[type="password"], | |
6 | input[type="search"], | |
7 | input[type="text"], | |
8 | input[type="url"], | |
9 | select, | |
10 | textarea { | |
f80126a6 | 11 | margin: 0; /* safari fix */ |
d40daae6 | 12 | @include input; |
f2b50825 AE |
13 | } |
14 | ||
a5968043 MW |
15 | /* set placeholder color */ |
16 | input[type="date"], | |
17 | input[type="datetime"], | |
18 | input[type="email"], | |
19 | input[type="number"], | |
20 | input[type="password"], | |
21 | input[type="search"], | |
22 | input[type="text"], | |
23 | input[type="url"] { | |
24 | &::-webkit-input-placeholder { /* WebKit browsers */ | |
852e099f | 25 | color: $wcfInputPlaceholder; |
a5968043 MW |
26 | } |
27 | &::-moz-placeholder { /* Mozilla Firefox 19+ */ | |
852e099f | 28 | color: $wcfInputPlaceholder; |
a5968043 MW |
29 | } |
30 | &:-ms-input-placeholder { /* Internet Explorer 10+ */ | |
852e099f | 31 | color: $wcfInputPlaceholder; |
a5968043 | 32 | } |
5d0e8b3f AE |
33 | |
34 | &:focus, | |
35 | &:hover { | |
36 | &::-webkit-input-placeholder { /* WebKit browsers */ | |
37 | color: $wcfInputPlaceholderActive; | |
38 | } | |
39 | &::-moz-placeholder { /* Mozilla Firefox 19+ */ | |
40 | color: $wcfInputPlaceholderActive; | |
41 | } | |
42 | &:-ms-input-placeholder { /* Internet Explorer 10+ */ | |
43 | color: $wcfInputPlaceholderActive; | |
44 | } | |
45 | } | |
5dd18761 AE |
46 | |
47 | &[disabled], | |
48 | &[readonly] { | |
49 | background-color: $wcfInputDisabledBackground !important; | |
50 | border-color: $wcfInputDisabledBorder !important; | |
51 | color: $wcfInputDisabledText !important; | |
52 | } | |
a5968043 MW |
53 | } |
54 | ||
0d720e55 MW |
55 | input[type="search"], |
56 | input[type="text"] { | |
393c6d8f MS |
57 | -webkit-appearance: none; |
58 | } | |
59 | ||
231008a5 AE |
60 | .iOS { |
61 | input[type="date"], | |
62 | input[type="datetime"], | |
63 | input[type="email"], | |
64 | input[type="number"], | |
65 | input[type="password"], | |
66 | input[type="search"], | |
67 | input[type="text"], | |
68 | input[type="url"], | |
69 | textarea { | |
70 | font-size: 16px; | |
71 | } | |
72 | } | |
73 | ||
f2b50825 AE |
74 | textarea { |
75 | border-width: 1px; | |
bec1bb2e | 76 | font-weight: 400; |
392811ed | 77 | vertical-align: top; |
f2b50825 AE |
78 | width: 100%; |
79 | ||
5908f54f | 80 | @include wcfFontDefault; |
a1e91e22 MW |
81 | |
82 | &[disabled], | |
83 | &[readonly] { | |
84 | background-color: $wcfInputDisabledBackground !important; | |
85 | border-color: $wcfInputDisabledBorder !important; | |
86 | color: $wcfInputDisabledText !important; | |
87 | } | |
f2b50825 AE |
88 | } |
89 | ||
12f80644 AE |
90 | select { |
91 | // The width is determined by the browser based upon the longest <option> contained, | |
92 | // but this can cause the <select> to overflow the parent container. This is acceptable | |
93 | // to some extent, but on mobile it can cause the entire site to have a horizontal | |
94 | // scrollbar instead. Setting a `max-width` will cause the browser to respect the page | |
95 | // boundaries and nicely wrap the displayed value instead. | |
96 | max-width: 100%; | |
97 | } | |
98 | ||
f2b50825 AE |
99 | .formSubmit { |
100 | text-align: center; | |
101 | ||
102 | &:not(:first-child) { | |
487db634 | 103 | margin-top: 30px; |
f2b50825 AE |
104 | } |
105 | ||
f216765b | 106 | @include screen-xs { |
0923f8db AE |
107 | > .button, |
108 | > button, | |
109 | > input { | |
110 | display: block; | |
111 | padding: 7px 10px; | |
112 | width: 100%; | |
113 | ||
114 | &:not(:first-child) { | |
115 | margin-top: 10px; | |
116 | } | |
117 | } | |
f2b50825 | 118 | } |
f216765b AE |
119 | |
120 | @include screen-sm-up { | |
121 | > :not(:first-child) { | |
122 | margin-left: 10px; | |
123 | } | |
124 | } | |
f2b50825 AE |
125 | } |
126 | ||
f027ba61 | 127 | .inputAddon { |
f2b50825 AE |
128 | display: flex; |
129 | ||
130 | &:not(:last-child) { | |
131 | margin-bottom: 5px; | |
132 | } | |
133 | ||
dfef03a8 | 134 | > .inputPrefix, |
f2b50825 | 135 | > .inputSuffix { |
0de1d7fb AE |
136 | align-items: center; |
137 | display: flex; | |
f2b50825 AE |
138 | flex: 0 0 auto; |
139 | ||
140 | &.button { | |
141 | border-radius: 0; | |
f2b50825 | 142 | } |
f027ba61 AE |
143 | |
144 | &:not(.button) { | |
145 | background-color: $wcfButtonBackground; | |
640a8bea | 146 | border: 1px solid $wcfInputBorder; |
f027ba61 AE |
147 | color: $wcfButtonText; |
148 | cursor: default; | |
f027ba61 AE |
149 | padding: 3px 5px; |
150 | } | |
f2b50825 AE |
151 | } |
152 | ||
dfef03a8 | 153 | > .inputPrefix { |
640a8bea | 154 | border-right-width: 0 !important; |
dfef03a8 AE |
155 | } |
156 | ||
157 | > .inputSuffix { | |
9faa5247 AE |
158 | &.button { |
159 | margin-left: 5px; | |
160 | } | |
161 | ||
162 | &:not(.button) { | |
163 | border-left-width: 0 !important; | |
164 | } | |
dfef03a8 AE |
165 | } |
166 | ||
f027ba61 | 167 | input { |
f2b50825 | 168 | flex: 1 auto; |
dfef03a8 AE |
169 | |
170 | & + .inputPrefix { | |
171 | margin-left: 5px; | |
172 | } | |
f2b50825 AE |
173 | } |
174 | } | |
175 | ||
f027ba61 AE |
176 | .inputAddonTextarea { |
177 | flex-wrap: wrap; | |
178 | ||
179 | > .inputPrefix.button { | |
180 | border-bottom-width: 0; | |
181 | border-radius: 0; | |
182 | } | |
183 | ||
184 | > textarea { | |
185 | flex: 0 0 100%; | |
186 | } | |
187 | } | |
188 | ||
189 | .inputAddon input, | |
190 | input { | |
f027ba61 AE |
191 | &.tiny { |
192 | flex-grow: 0; | |
193 | width: 80px; | |
194 | } | |
195 | ||
87275aa7 | 196 | &.long { |
87275aa7 | 197 | width: 100%; |
f027ba61 AE |
198 | } |
199 | ||
87275aa7 MW |
200 | @include screen-xs { |
201 | &.short { | |
202 | flex-grow: 0; | |
203 | width: 150px; | |
204 | } | |
205 | ||
206 | &.medium { | |
87275aa7 MW |
207 | width: 100%; |
208 | } | |
f027ba61 AE |
209 | } |
210 | ||
87275aa7 MW |
211 | @include screen-sm-up { |
212 | &.short { | |
213 | flex-grow: 0; | |
214 | min-width: 80px; | |
215 | width: 10%; | |
216 | } | |
217 | ||
218 | &.medium { | |
219 | flex-grow: 0; | |
220 | min-width: 150px; | |
221 | width: 30%; | |
222 | } | |
f027ba61 | 223 | } |
f2b50825 | 224 | } |
a44dd9c3 | 225 | |
771df927 AE |
226 | .formError { |
227 | dt { | |
228 | color: rgba(204, 0, 1, 1) !important; | |
229 | } | |
230 | ||
231 | input, | |
232 | select, | |
233 | textarea { | |
234 | border-color: rgba(204, 0, 1, 1) !important; | |
235 | } | |
236 | } | |
237 | ||
a44dd9c3 AE |
238 | /* grid-based form controls */ |
239 | .formGrid { | |
240 | dt { | |
241 | display: none; | |
242 | } | |
243 | ||
a44dd9c3 AE |
244 | select { |
245 | width: 100%; | |
246 | } | |
247 | } |