-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinput2.css
68 lines (45 loc) · 2.54 KB
/
input2.css
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
.inputWrapper {width:25%}
.inputWrapper > div:nth-child(1) {border:1px solid #d8d8d8; border-radius:4px; background:#f7f7f7;padding: 0.4rem 0.4rem 0 0.4rem}
.inputWrapper > div:nth-child(1) input {
width:135px;
border:none;
min-height:28px;
flex-grow:1;
background:#fff;
border-radius:4px;
margin: 0 0 0.4rem 0;
padding: 0 0.4rem
}
.inputWrapper > div:nth-child(1) input:focus{outline:none}
.inputWrapper > div:nth-child(1) {
display:flex;
flex-wrap:wrap
}
.inputWrapper > div:nth-child(1) div {
display:flex;
align-items:center;
font-size:1rem;
background-color:#e8e8e8;
padding:5px 10px;
margin: 0 0.4rem 0.4rem 0;
border-radius:50px
}
.inputWrapper > div:nth-child(1) .srcError {
background-color:#ffcccc
}
.inputWrapper > div:nth-child(1) div i {
display:inline-block;
margin-left:5px;
opacity: 0.6;
cursor: pointer;
height:14px;
width:14px;
background-size: cover;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIyIDIgMjAgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMiAxMmMwIDUuNTIzLTQuNDc3IDEwLTEwIDEwUzIgMTcuNTIzIDIgMTIgNi40NzcgMiAxMiAyczEwIDQuNDc3IDEwIDEwWm0tNS4wNS00Ljk1YTEgMSAwIDAgMSAwIDEuNDE0TDEzLjQxNCAxMmwzLjUzNiAzLjUzNmExIDEgMCAwIDEtMS40MTQgMS40MTRMMTIgMTMuNDE0IDguNDY0IDE2Ljk1YTEgMSAwIDEgMS0xLjQxNC0xLjQxNEwxMC41ODYgMTIgNy4wNSA4LjQ2NEExIDEgMCAxIDEgOC40NjQgNy4wNUwxMiAxMC41ODZsMy41MzYtMy41MzZhMSAxIDAgMCAxIDEuNDE0IDBaIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
}
.inputWrapper > div:nth-child(1) .srcError i {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMiAyIDIwIDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMTJjMCA1LjUyMy00LjQ3NyAxMC0xMCAxMFMyIDE3LjUyMyAyIDEyIDYuNDc3IDIgMTIgMnMxMCA0LjQ3NyAxMCAxMFptLTUuMDUtNC45NWExIDEgMCAwIDEgMCAxLjQxNEwxMy40MTQgMTJsMy41MzYgMy41MzZhMSAxIDAgMCAxLTEuNDE0IDEuNDE0TDEyIDEzLjQxNCA4LjQ2NCAxNi45NWExIDEgMCAxIDEtMS40MTQtMS40MTRMMTAuNTg2IDEyIDcuMDUgOC40NjRBMSAxIDAgMSAxIDguNDY0IDcuMDVMMTIgMTAuNTg2bDMuNTM2LTMuNTM2YTEgMSAwIDAgMSAxLjQxNCAwWiIgZmlsbD0iI2MwMzkyYiIvPjwvc3ZnPg==);
}
.inputWrapper > div:nth-child(1) div i:hover { opacity: 1}
.inputWrapper .action {display:flex; flex-direction:row-reverse; padding:0.1rem 0.4rem}
.inputWrapper .action div {cursor:pointer}