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