/
_html5-input-types.scss
44 lines (38 loc) · 1.48 KB
/
_html5-input-types.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="url"]',
// Webkit & Gecko may change the display of these in the future
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="time"]',
'input[type="week"]';
$list-count: 0;
$unquoted-inputs-list: false;
@each $input-type in $inputs-list {
@if $list-count == 0 {
$unquoted-inputs-list: unquote($input-type);
$list-count: $list-count + 1;
}
@else if $list-count > 0 {
$unquoted-inputs-list: join($unquoted-inputs-list, unquote($input-type), comma);
}
}
$all-text-inputs: $unquoted-inputs-list;
// You must use interpolation on the variable:
// #{$all-text-inputs}
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid green;
// }