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