1/* Form Styles */
2
3@import "../functions/forms";
4
5
6form {
7  margin: 0 0 18px;
8  label {
9    display: block;
10    @include font-size($norm);
11    @include adjust-leading-to(1);
12    cursor: pointer;
13    margin-bottom: 9px;
14    &.inline {
15      display: inline-block;
16      padding-right: 20px;
17    }
18  }
19  dt {
20    margin: 0;
21  }
22  textarea {
23    height: 150px;
24  }
25  ul, ul li {
26    margin-left: 0;
27    list-style-type: none;
28  }
29  fieldset {
30    @include rhythm-borders(1px,1,$norm,solid);
31    border-color: darken($default-color, 10%);
32    margin: 18px 0;
33    legend {
34      padding: 5px 10px;
35    }
36  }
37}
38
39.field {
40  position: relative;
41  max-width: 100%;
42  margin-bottom: 10px;
43  vertical-align: middle;
44  // Font-size 16px for weird form style error
45  font-size: 16px;
46  overflow: hidden;
47  &.metro, .metro {
48    @include border-radius(0);
49  }
50  input, input[type="*"], textarea {
51    max-width: 100%;
52    width: 100%;
53    padding: 0;
54    margin: 0;
55    border: none;
56    outline: none;
57    resize: none;
58    -webkit-appearance: none;
59    font-family: $font-family;
60    font-weight: $font-weight-light;
61    @include font-size($norm);
62    @include box-shadow(none);
63  }
64  .input {
65    position: relative;
66    padding: 0 10px;
67    background: #fff;
68    border: 1px solid darken($default-color, 10%);
69    @include line-and-height(height-calc($norm));
70    @include font-size($norm);
71    @include border-radius(4px);
72    &.search {
73      @include line-and-height(height-calc($norm));
74      @include shape(oval);
75      padding-right: 0;
76    }
77  }
78  .input.textarea {
79    height: auto;
80  }
81}
82
83input, .input {
84  @each $width in $field-sizes {
85    &.#{nth($width, 1)} {
86      @include input-size(#{nth($width, 1)});
87      margin:0;
88      &:last-child {
89        margin-left: -4px;
90      }
91      &:first-child {
92        margin-right: 3.94%;
93        margin-left: 0;
94      }
95      &:first-child:last-child {
96        margin: 0;
97      }
98    }
99  }
100}
101
102label + {
103  @include input-sizes-list() {
104    &:last-child {
105      margin-left: 0;
106    }
107  }
108}
109
110@include respond(document-width) {
111  .xxwide:first-child, .xxwide:last-child {
112    margin-right: 0%;
113  }
114}
115
116/* remove inline-block white-space — A 0px font-size = 0px of white space */
117.prepend, .append {
118  font-size: 0;
119  white-space: nowrap;
120  padding-bottom: 3.5px;
121}
122
123.prepend input,
124.prepend .input,
125.append input,
126.append .input {
127  display: inline-block;
128  max-width: 100%;
129  margin-right: 0;
130  margin-left: 0;
131}
132
133.prepend input,
134.prepend .input,
135.prepend.append input:last-child,
136.append *:last-child {
137  @include border-radius(0px $button-radius $button-radius 0);
138}
139
140.append input,
141.append .input,
142.prepend.append input:first-child,
143.prepend *:first-child {
144  @include border-radius($button-radius 0 0 $button-radius);
145}
146
147.prepend.append input {
148  @include border-radius(0);
149}
150
151.prepend.append input:last-child {
152  margin-left: -1px;
153}
154
155.prepend .adjoined, .append .adjoined, .prepend .btn, .append .btn {
156  position: relative;
157  display: inline-block;
158  margin-bottom:0;
159  z-index: 99;
160}
161.prepend .btn, .append .btn {
162  a, input, button {
163    padding: 0 12px;
164  }
165}
166
167.prepend .adjoined, .append .adjoined  {
168  padding: 0 10px 0 10px;
169  background: $default-color;
170  border: 1px solid darken($default-color, 10%);
171  font-family: $font-family;
172  font-weight: $font-weight-semibold;
173  color: $body-font-color;
174  @include font-size($norm);
175  @include line-and-height(height-calc($norm));
176}
177
178.prepend .adjoined, .prepend .btn {
179  margin-right: -1px;
180}
181
182.adjoined:first-child {
183  margin-left: 0 !important;
184}
185
186.append .adjoined, .append .btn {
187  margin-left: -1px;
188}
189
190.append button, .prepend button {
191  display: inline-block;
192}
193
194.prepend input:first-child,
195.append input:first-child,
196.prepend .input:first-child,
197.append .input:first-child {
198  margin-right: 0;
199}
200
201.double input, .double .input {
202  width: 50% !important;
203  &:last-child {
204    margin-left: -1px;
205  }
206}
207
208.field {
209  input, .input, textarea, .textarea, .radio span, .checkbox span, .picker {
210    @include transition-duration(.2s);
211  }
212  @each $error in danger $danger-color, warning $warning-color, success $success-color {
213    &.#{nth($error, 1)} {
214      &:after {
215        @if($icons != ""){
216          font-family: "#{$icons}";
217          @if nth($error, 1) == danger {
218            content: "#{$entypo-icon-cancel-circled}";
219          }
220          @if nth($error, 1) == warning {
221            content: "#{$entypo-icon-attention}";
222          }
223          @if nth($error, 1) == success {
224            content: "#{$entypo-icon-check}";
225          }
226        font-size: $norm;
227        position: absolute;
228        top: percentage((strip-units($base-font-size)) / 100) - 2;
229        right: 15px;
230        z-index: 999;
231        color: nth($error, 2);
232        }
233      }
234
235      &.no-icon:after {
236        display: none;
237      }
238
239      // <input> does not allow :before & :after
240      // pseudo elements. Removing validation
241      // icons from those elements to avoid
242      // edge-case styling issues
243      &.append:after, &.prepend:after {
244        content: "";
245      }
246      input, .input, textarea, .textarea, .radio span, .checkbox span, .picker {
247        border-color: nth($error, 2);
248        background: lighten(nth($error, 2), 35%);
249      }
250
251      input, .input, textarea, .textarea,
252      .radio span, .checkbox span, .picker,
253      input::-webkit-input-placeholder,
254      textarea::-webkit-input-placeholder,
255      input:-moz-placeholder,
256      textarea:-moz-placeholder
257      textarea { color: nth($error, 2); }
258
259    }
260  }
261
262  .picker {
263    @each $error in danger $danger-color, warning $warning-color, success $success-color {
264      &.#{nth($error, 1)} {
265        border-color: nth($error, 2);
266        color: nth($error, 2);
267        background: lighten(nth($error, 2), 35%);
268        @include transition-duration(.2s);
269        select, &:after { color: nth($error, 2); }
270      }
271    }
272  }
273}
274
275
276.field .text input[type="search"] {
277  -webkit-appearance: textfield;
278}
279
280// checkboxes/radio buttons only styled where JS supported
281.no-js {
282  .radio input {
283    -webkit-appearance: radio;
284    margin-left: 1px;
285  }
286  .checkbox input {
287    -webkit-appearance: checkbox;
288  }
289  .radio input, .checkbox input {
290    display: inline-block;
291    width: 16px;
292  }
293}
294
295.js .field {
296  .radio, .checkbox {
297    @each $error in danger $danger-color, warning $warning-color, success $success-color {
298      &.#{nth($error, 1)} {
299        color: nth($error, 2);
300        @if nth($error, 1) == success {
301          color: $body-font-color;
302          i { color: nth($error, 2); }
303        }
304        span {
305          border-color: nth($error, 2);
306          color: nth($error, 2);
307          background: lighten(nth($error, 2), 35%);
308          @include transition-duration(.2s);
309        }
310      }
311    }
312    position: relative;
313    &.checked i {
314      position: absolute;
315      top: -1px;
316      left: -8px;
317      line-height: 16px;
318    }
319    span {
320      display: inline-block;
321      width: 16px;
322      height: 16px;
323      position: relative;
324      top: 2px;
325      border: solid 1px #ccc;
326      background: #fefefe;
327    }
328    input[type="radio"], input[type="checkbox"] {
329      display: none;
330    }
331  }
332  .radio span {
333    @include border-radius(8px);
334  }
335  .checkbox span {
336    @include border-radius(3px);
337  }
338}
339
340.field .text input[type="search"] {
341  -webkit-appearance: textfield;
342}
343
344
345/* Form Picker Element (<select>) */
346
347.picker {
348  position: relative;
349  width: auto;
350  display: inline-block;
351  margin: 0 0 2px 1.2%;
352  overflow: hidden;
353  border: 1px solid darken($default-color, 5%);
354  @include border-radius(4px);
355  font-family: $font-family;
356  font-weight: $font-weight-semibold;
357  height: auto;
358  @include background-image(linear-gradient(lighten($default-color, 20%), $default-color));
359  &:after {
360    content: "\25BE";
361    font-family: $icons;
362    z-index: 0;
363    position:absolute;
364    right: 8%;
365    top: 50%;
366    margin-top: -12px;
367    color: $body-font-color;
368  }
369  &:first-child {
370    margin-left: 0;
371  }
372  select {
373    position: relative;
374    display: block;
375    min-width: 100%;
376    width: 135%;
377    height: 34px;
378    padding: 6px 45px 6px 15px;
379    color: $body-font-color;
380    border: none;
381    background: transparent;
382    outline: none;
383    -webkit-appearance: none;
384    z-index: 99;
385        cursor: pointer;
386    @include font-size($norm);
387  }
388  select::-ms-expand {
389    display: none;
390  }
391}
392
393