|
1 | 1 | .has-float-label { |
2 | 2 | display: block; |
3 | | - position: relative; } |
4 | | - .has-float-label label, .has-float-label > span { |
5 | | - position: absolute; |
6 | | - left: 0; |
7 | | - top: 0; |
8 | | - cursor: text; |
9 | | - font-size: 75%; |
10 | | - opacity: 1; |
11 | | - -webkit-transition: all .2s; |
12 | | - transition: all .2s; } |
13 | | - .has-float-label select { |
14 | | - -webkit-appearance: none; |
15 | | - -moz-appearance: none; |
16 | | - appearance: none; } |
17 | | - .has-float-label input, .has-float-label select { |
18 | | - font-size: inherit; |
19 | | - padding-top: 1em; |
20 | | - margin-bottom: 2px; |
21 | | - border: 0; |
22 | | - border-radius: 0; |
23 | | - border-bottom: 2px solid rgba(0, 0, 0, 0.1); } |
24 | | - .has-float-label input::-webkit-input-placeholder, .has-float-label select::-webkit-input-placeholder { |
25 | | - opacity: 1; |
26 | | - -webkit-transition: all .2s; |
27 | | - transition: all .2s; } |
28 | | - .has-float-label input:placeholder-shown:not(:focus)::-webkit-input-placeholder, .has-float-label select:placeholder-shown:not(:focus)::-webkit-input-placeholder { |
29 | | - opacity: 0; } |
30 | | - .has-float-label input:placeholder-shown:not(:focus) + *, .has-float-label select:placeholder-shown:not(:focus) + * { |
31 | | - font-size: 150%; |
32 | | - opacity: .5; |
33 | | - top: .25em; } |
34 | | - .has-float-label input:focus, .has-float-label select:focus { |
35 | | - outline: none; |
36 | | - border-color: rgba(0, 0, 0, 0.5); } |
37 | | - .has-float-label select { |
38 | | - padding-right: 1em; |
39 | | - background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.5em bottom 0.25em; |
40 | | - background-size: 8px 10px; } |
| 3 | + position: relative; |
| 4 | +} |
| 5 | +.has-float-label label, .has-float-label > span { |
| 6 | + position: absolute; |
| 7 | + left: 0; |
| 8 | + top: 0; |
| 9 | + cursor: text; |
| 10 | + font-size: 75%; |
| 11 | + opacity: 1; |
| 12 | + -webkit-transition: all .2s; |
| 13 | + transition: all .2s; |
| 14 | +} |
| 15 | +.has-float-label select { |
| 16 | + -webkit-appearance: none; |
| 17 | + -moz-appearance: none; |
| 18 | + appearance: none; |
| 19 | +} |
| 20 | +.has-float-label input, .has-float-label select { |
| 21 | + font-size: inherit; |
| 22 | + padding-top: 1em; |
| 23 | + margin-bottom: 2px; |
| 24 | + border: 0; |
| 25 | + border-radius: 0; |
| 26 | + border-bottom: 2px solid rgba(0, 0, 0, 0.1); |
| 27 | +} |
| 28 | +.has-float-label input::-webkit-input-placeholder, .has-float-label select::-webkit-input-placeholder { |
| 29 | + opacity: 1; |
| 30 | + -webkit-transition: all .2s; |
| 31 | + transition: all .2s; |
| 32 | +} |
| 33 | +.has-float-label input:placeholder-shown:not(:focus)::-webkit-input-placeholder, .has-float-label select:placeholder-shown:not(:focus)::-webkit-input-placeholder { |
| 34 | + opacity: 0; |
| 35 | +} |
| 36 | +.has-float-label input:placeholder-shown:not(:focus) + *, .has-float-label select:placeholder-shown:not(:focus) + * { |
| 37 | + font-size: 150%; |
| 38 | + opacity: .5; |
| 39 | + top: .25em; |
| 40 | +} |
| 41 | +.has-float-label input:focus, .has-float-label select:focus { |
| 42 | + outline: none; |
| 43 | + border-color: rgba(0, 0, 0, 0.5); |
| 44 | +} |
| 45 | +.has-float-label select { |
| 46 | + padding-right: 1em; |
| 47 | + background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.5em bottom 0.25em; |
| 48 | + background-size: 8px 10px; |
| 49 | +} |
0 commit comments