UNPKG

2.62 kBCSSView Raw
1*,
2:after,
3:before {
4 -webkit-box-sizing: border-box;
5 box-sizing: border-box;
6}
7
8body,
9p,
10ul {
11 margin: 0;
12 padding: 0;
13}
14
15ul,
16li {
17 list-style: none;
18}
19
20a {
21 text-decoration: none;
22}
23
24body {
25 position: relative;
26 line-height: 1.5;
27 font-size: 14px;
28 word-wrap: break-word;
29 background: #fafbfc;
30}
31
32.item {
33 position: relative;
34 border-bottom: 1px solid #eaebec;
35 background: #fcfcfd;
36 font-size: 0;
37 height: 80px;
38 overflow: hidden;
39}
40
41.item-body {
42 display: block;
43 position: relative;
44 padding: 10px;
45 overflow: hidden;
46 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
47 -webkit-backface-visibility: hidden;
48 -webkit-transform: translateZ(0);
49 -webkit-animation-duration: .4s;
50 -webkit-animation-timing-function: ease-out;
51 -webkit-animation-fill-mode: forwards;
52}
53
54.item-body:after {
55 content: '';
56 display: block;
57 position: absolute;
58 top: 35px;
59 right: 12px;
60 width: 10px;
61 height: 10px;
62 border-right: 1px solid #c5c7ca;
63 border-top: 1px solid #c5c7ca;
64 -webkit-transform: rotate(45deg);
65}
66
67.item-body-edit {
68 -webkit-animation-name: bounce;
69}
70
71.item-body-edit + .item-del{
72 -webkit-transform: translateX(0);
73}
74
75.item-body-edit:after {
76 display: none;
77}
78
79@-webkit-keyframes bounce {
80 50% {
81 -webkit-transform: translateX(-80px);
82 }
83 100% {
84 -webkit-transform: translateX(-70px);
85 }
86}
87
88.item-body-pic {
89 /*position: relative;*/
90 width: 60px;
91 height: 60px;
92 border-radius: 3px;
93 overflow: hidden;
94 float: left;
95}
96
97/*.item-body-pic:after{
98 content: '';
99 position: absolute;
100 top: 0;
101 bottom: 0;
102 left: 0;
103 right: 0;
104 box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2),inset -1px -1px 0 rgba(0,0,0,0.2);
105 z-index: 10;
106}*/
107
108.item-body-pic img {
109 width: 60px;
110 height: 60px;
111}
112
113.item-body-info {
114 /*position: relative;*/
115 margin-left: 70px;
116}
117
118.item-body-name, .item-body-detail {
119 display: -webkit-box;
120 height: 20px;
121 overflow: hidden;
122 text-overflow: ellipsis;
123 -webkit-line-clamp: 1;
124 -webkit-box-orient: vertical;
125 white-space: pre;
126}
127
128.item-body-name {
129 font-size: 16px;
130 line-height: 20px;
131 color: #333;
132}
133
134.item-body-detail{
135 font-size: 11px;
136 color: #a2a2a2;
137}
138
139.item-body-date {
140 font-size: 11px;
141 color: #f15a23;
142}
143
144.item-del {
145 position: absolute;
146 top: 0;
147 right: 0;
148 height: 80px;
149 width: 70px;
150 background-color: red;
151 color: #fff;
152 font-size: 20px;
153 text-align: center;
154 line-height: 80px;
155 -webkit-transform: translateX(70px);
156}
157