antd-mobile
Version:
基于 React 的移动设计规范实现
89 lines (88 loc) • 2.84 kB
CSS
.hairline-remove-right-bottom {
border-bottom: 0;
}
.hairline-remove-right-bottom:after {
display: none;
}
.hairline-remove-right-bottom-bak:after {
display: none;
}
.hairline-remove-left-top:before {
display: none;
}
.am-accordion {
position: relative;
border-top: 1PX solid #ddd;
}
.am-accordion-anim-active {
transition: all 0.2s ease-out;
}
.am-accordion .am-accordion-item .am-accordion-header {
position: relative;
color: #000;
font-size: 34px;
height: 88px;
line-height: 88px;
background-color: #fff;
box-sizing: content-box;
padding-left: 30px;
padding-right: 60px;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.am-accordion .am-accordion-item .am-accordion-header:after {
display: block;
position: absolute;
content: '';
left: 0;
bottom: 0;
right: auto;
top: auto;
width: 100%;
border-bottom: 1PX solid #ddd;
}
.am-accordion .am-accordion-item .am-accordion-header i {
position: absolute;
display: block;
top: 30px;
right: 30px;
width: 30px;
height: 30px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate(-5809.000000%2C%20-8482.000000)%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.am-accordion .am-accordion-item .am-accordion-header[aria-expanded~="true"] i {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.am-accordion .am-accordion-item .am-accordion-content {
overflow: hidden;
background: #fff;
}
.am-accordion .am-accordion-item .am-accordion-content .am-accordion-content-box {
font-size: 30px;
color: #333;
position: relative;
}
.am-accordion .am-accordion-item .am-accordion-content .am-accordion-content-box:after {
display: block;
position: absolute;
content: '';
left: 0;
bottom: 0;
right: auto;
top: auto;
width: 100%;
border-bottom: 1PX solid #ddd;
}
.am-accordion .am-accordion-item .am-accordion-content.am-accordion-content-inactive {
display: none;
}