1/**
  2 * Forms
  3 * --------------------------------------------------
  4 */
  5
  6// Make all forms have space below them
  7form {
  8  margin: 0 0 $line-height-base;
  9}
 10
 11// Groups of fields with labels on top (legends)
 12legend {
 13  display: block;
 14  margin-bottom: $line-height-base;
 15  padding: 0;
 16  width: 100%;
 17  border: $input-border-width solid $input-border;
 18  color: $dark;
 19  font-size: $font-size-base * 1.5;
 20  line-height: $line-height-base * 2;
 21
 22  small {
 23    color: $stable;
 24    font-size: $line-height-base * .75;
 25  }
 26}
 27
 28// Set font for forms
 29label,
 30input,
 31button,
 32select,
 33textarea {
 34  @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
 35}
 36input,
 37button,
 38select,
 39textarea {
 40  font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
 41}
 42
 43
 44// Input List
 45// -------------------------------
 46
 47.item-input {
 48  @include display-flex();
 49  @include align-items(center);
 50  position: relative;
 51  overflow: hidden;
 52  padding: 6px 0 5px 16px;
 53
 54  input {
 55    @include border-radius(0);
 56    @include flex(1, 220px);
 57    @include appearance(none);
 58    margin: 0;
 59    padding-right: 24px;
 60    background-color: transparent;
 61  }
 62
 63  .button .icon {
 64    @include flex(0, 0, 24px);
 65    position: static;
 66    display: inline-block;
 67    height: auto;
 68    text-align: center;
 69    font-size: 16px;
 70  }
 71
 72  .button-bar {
 73    @include border-radius(0);
 74    @include flex(1, 0, 220px);
 75    @include appearance(none);
 76  }
 77
 78  .icon {
 79    min-width: 14px;
 80  }
 81}
 82// prevent flex-shrink on WP
 83.platform-windowsphone .item-input input{
 84  flex-shrink: 1;
 85}
 86
 87.item-input-inset {
 88  @include display-flex();
 89  @include align-items(center);
 90  position: relative;
 91  overflow: hidden;
 92  padding: ($item-padding / 3) * 2;
 93}
 94
 95.item-input-wrapper {
 96  @include display-flex();
 97  @include flex(1, 0);
 98  @include align-items(center);
 99  @include border-radius(4px);
100  padding-right: 8px;
101  padding-left: 8px;
102  background: #eee;
103}
104
105.item-input-inset .item-input-wrapper input {
106  padding-left: 4px;
107  height: 29px;
108  background: transparent;
109  line-height: 18px;
110}
111
112.item-input-wrapper ~ .button {
113  margin-left: ($item-padding / 3) * 2;
114}
115
116.input-label {
117  display: table;
118  padding: 7px 10px 7px 0px;
119  max-width: 200px;
120  width: 35%;
121  color: $input-label-color;
122  font-size: 16px;
123}
124
125.placeholder-icon {
126  color: #aaa;
127  &:first-child {
128    padding-right: 6px;
129  }
130  &:last-child {
131    padding-left: 6px;
132  }
133}
134
135.item-stacked-label {
136  display: block;
137  background-color: transparent;
138  box-shadow: none;
139
140  .input-label, .icon {
141    display: inline-block;
142    padding: 4px 0 0 0px;
143    vertical-align: middle;
144  }
145}
146
147.item-stacked-label input,
148.item-stacked-label textarea {
149  @include border-radius(2px);
150  padding: 4px 8px 3px 0;
151  border: none;
152  background-color: $input-bg;
153}
154.item-stacked-label input {
155  overflow: hidden;
156  height: $line-height-computed + $font-size-base + 12px;
157}
158
159.item-select.item-stacked-label select {
160  position: relative;
161  padding: 0px;
162  max-width: 90%;
163  direction:ltr;
164  white-space: pre-wrap;
165  margin: -3px;
166}
167
168.item-floating-label {
169  display: block;
170  background-color: transparent;
171  box-shadow: none;
172
173  .input-label {
174    position: relative;
175    padding: 5px 0 0 0;
176    opacity: 0;
177    top: 10px;
178    @include transition(opacity .15s ease-in, top .2s linear);
179
180    &.has-input {
181      opacity: 1;
182      top: 0;
183      @include transition(opacity .15s ease-in, top .2s linear);
184    }
185  }
186}
187
188
189// Form Controls
190// -------------------------------
191
192// Shared size and type resets
193textarea,
194input[type="text"],
195input[type="password"],
196input[type="datetime"],
197input[type="datetime-local"],
198input[type="date"],
199input[type="month"],
200input[type="time"],
201input[type="week"],
202input[type="number"],
203input[type="email"],
204input[type="url"],
205input[type="search"],
206input[type="tel"],
207input[type="color"] {
208  display: block;
209  padding-top: 2px;
210  padding-left: 0;
211  height: $line-height-computed + $font-size-base;
212  color: $input-color;
213  vertical-align: middle;
214  font-size: $font-size-base;
215  line-height: $font-size-base + 2;
216}
217
218.platform-ios,
219.platform-android {
220  input[type="datetime-local"],
221  input[type="date"],
222  input[type="month"],
223  input[type="time"],
224  input[type="week"] {
225    padding-top: 8px;
226  }
227}
228
229.item-input {
230  input,
231  textarea {
232    width: 100%;
233  }
234}
235
236textarea {
237  padding-left: 0;
238  @include placeholder($input-color-placeholder, -3px);
239}
240
241// Reset height since textareas have rows
242textarea {
243  height: auto;
244}
245
246// Everything else
247textarea,
248input[type="text"],
249input[type="password"],
250input[type="datetime"],
251input[type="datetime-local"],
252input[type="date"],
253input[type="month"],
254input[type="time"],
255input[type="week"],
256input[type="number"],
257input[type="email"],
258input[type="url"],
259input[type="search"],
260input[type="tel"],
261input[type="color"] {
262  border: 0;
263}
264
265// Position radios and checkboxes better
266input[type="radio"],
267input[type="checkbox"] {
268  margin: 0;
269  line-height: normal;
270}
271
272// Reset width of input images, buttons, radios, checkboxes
273.item-input {
274  input[type="file"],
275  input[type="image"],
276  input[type="submit"],
277  input[type="reset"],
278  input[type="button"],
279  input[type="radio"],
280  input[type="checkbox"] {
281    width: auto; // Override of generic input selector
282  }
283}
284
285// Set the height of file to match text inputs
286input[type="file"] {
287  line-height: $input-height-base;
288}
289
290// Text input classes to hide text caret during scroll
291.previous-input-focus,
292.cloned-text-input + input,
293.cloned-text-input + textarea {
294  position: absolute !important;
295  left: -9999px;
296  width: 200px;
297}
298
299
300// Placeholder
301// -------------------------------
302input,
303textarea {
304  @include placeholder();
305}
306
307
308// DISABLED STATE
309// -------------------------------
310
311// Disabled and read-only inputs
312input[disabled],
313select[disabled],
314textarea[disabled],
315input[readonly]:not(.cloned-text-input),
316textarea[readonly]:not(.cloned-text-input),
317select[readonly] {
318  background-color: $input-bg-disabled;
319  cursor: not-allowed;
320}
321// Explicitly reset the colors here
322input[type="radio"][disabled],
323input[type="checkbox"][disabled],
324input[type="radio"][readonly],
325input[type="checkbox"][readonly] {
326  background-color: transparent;
327}