1
|
.search-page {
|
1
|
.search-page {
|
2
|
.search-input {
|
2
|
.search-input {
|
3
|
position: relative;
|
3
|
position: relative;
|
4
|
- padding: 7px 98px 7px 15px;
|
4
|
+ padding: 14rem / $pxConvertRem 196rem / $pxConvertRem 14rem / $pxConvertRem 30rem / $pxConvertRem;
|
5
|
background: #f8f8f8;
|
5
|
background: #f8f8f8;
|
6
|
-
|
6
|
+ form {
|
|
|
7
|
+ width: 100%;
|
|
|
8
|
+ }
|
7
|
.search-icon {
|
9
|
.search-icon {
|
8
|
position: absolute;
|
10
|
position: absolute;
|
9
|
- font-size: 12px;
|
|
|
10
|
- top: 16px;
|
|
|
11
|
- left: 24px;
|
11
|
+ font-size: 24rem / $pxConvertRem;
|
|
|
12
|
+ top: 32rem / $pxConvertRem;
|
|
|
13
|
+ left: 48rem / $pxConvertRem;
|
12
|
color: #b2b2b2;
|
14
|
color: #b2b2b2;
|
13
|
}
|
15
|
}
|
14
|
|
16
|
|
15
|
input {
|
17
|
input {
|
16
|
- height: 30px;
|
|
|
17
|
- width: 100%;
|
|
|
18
|
- border-radius: 15px;
|
|
|
19
|
- padding: 0 26px;
|
18
|
+ height: 60rem / $pxConvertRem;
|
|
|
19
|
+ width: 468rem / $pxConvertRem;
|
|
|
20
|
+ border-radius: 30rem / $pxConvertRem;
|
|
|
21
|
+ padding-left: 52rem / $pxConvertRem;
|
|
|
22
|
+ font-size: 24rem / $pxConvertRem;
|
20
|
background: #fff;
|
23
|
background: #fff;
|
21
|
border: none;
|
24
|
border: none;
|
22
|
}
|
25
|
}
|
23
|
|
26
|
|
24
|
.clear-input {
|
27
|
.clear-input {
|
25
|
position: absolute;
|
28
|
position: absolute;
|
26
|
- top: 12px;
|
|
|
27
|
- right: 50px;
|
29
|
+ top: 24rem / $pxConvertRem;
|
|
|
30
|
+ right: 110rem / $pxConvertRem;
|
|
|
31
|
+ font-size: 32rem / $pxConvertRem;
|
28
|
color: #b2b2b2;
|
32
|
color: #b2b2b2;
|
29
|
}
|
33
|
}
|
30
|
|
34
|
|
31
|
.search {
|
35
|
.search {
|
32
|
position: absolute;
|
36
|
position: absolute;
|
33
|
- top: 12px;
|
37
|
+ top: 20rem / $pxConvertRem;
|
34
|
right: 0;
|
38
|
right: 0;
|
35
|
border: none;
|
39
|
border: none;
|
36
|
background: transparent;
|
40
|
background: transparent;
|
37
|
- font-size: 16px;
|
41
|
+ font-size: 32rem / $pxConvertRem;
|
38
|
}
|
42
|
}
|
39
|
}
|
43
|
}
|
40
|
|
44
|
|
41
|
.search-items {
|
45
|
.search-items {
|
42
|
- padding: 20px 10px;
|
46
|
+ padding: 40rem / $pxConvertRem 20rem / $pxConvertRem;
|
43
|
|
47
|
|
44
|
h3 {
|
48
|
h3 {
|
45
|
- font-size: 12px;
|
|
|
46
|
- margin-bottom: 10px;
|
49
|
+ font-size: 24rem / $pxConvertRem;
|
|
|
50
|
+ margin-bottom: 20rem / $pxConvertRem;
|
47
|
}
|
51
|
}
|
48
|
|
52
|
|
49
|
li {
|
53
|
li {
|
50
|
float: left;
|
54
|
float: left;
|
51
|
- height: 34px;
|
|
|
52
|
- line-height: 34px;
|
|
|
53
|
- font-size: 14px;
|
|
|
54
|
- height: 34px;
|
|
|
55
|
- line-height: 34px;
|
|
|
56
|
- margin-right: 10px;
|
|
|
57
|
- margin-bottom: 10px;
|
|
|
58
|
- padding: 0 10px;
|
55
|
+ height: 68rem / $pxConvertRem;
|
|
|
56
|
+ line-height: 68rem / $pxConvertRem;
|
|
|
57
|
+ font-size: 28rem / $pxConvertRem;
|
|
|
58
|
+ height: 68rem / $pxConvertRem;
|
|
|
59
|
+ line-height: 38rem / $pxConvertRem;
|
|
|
60
|
+ margin-right: 20rem / $pxConvertRem;
|
|
|
61
|
+ margin-bottom: 20rem / $pxConvertRem;
|
|
|
62
|
+ padding: 0 20rem / $pxConvertRem;
|
59
|
background: #f8f8f8;
|
63
|
background: #f8f8f8;
|
60
|
color: #000;
|
64
|
color: #000;
|
61
|
}
|
65
|
}
|
62
|
|
66
|
|
63
|
.clear-history {
|
67
|
.clear-history {
|
64
|
- height: 32px;
|
|
|
65
|
- line-height: 32px;
|
68
|
+ height: 64rem / $pxConvertRem;
|
|
|
69
|
+ line-height: 64rem / $pxConvertRem;
|
66
|
border: 1px solid #e6e6e6;
|
70
|
border: 1px solid #e6e6e6;
|
67
|
background: #fff;
|
71
|
background: #fff;
|
68
|
- font-size: 14px;
|
72
|
+ font-size: 28rem / $pxConvertRem;
|
69
|
}
|
73
|
}
|
70
|
}
|
74
|
}
|
71
|
} |
75
|
} |