@insaic/neon
Version:
A Mobile UI Components built on Vue
84 lines (82 loc) • 1.97 kB
CSS
.sq-cell {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 48px;
line-height: 24px;
background-color: #fff;
padding: 12px 16px;
font-size: 14px;
}
.sq-cell ~ .sq-cell {
position: relative;
}
.sq-cell ~ .sq-cell::before {
content: " ";
position: absolute;
left: 0;
right: 0;
height: 1px;
border: 0 solid #e5e5e5;
color: #e5e5e5;
background-color: #e5e5e5;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 0;
top: 0;
border-top: 1px;
}
.sq-cell-head {
margin-right: 4px;
}
.sq-cell-bd {
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-flow: row-reverse;
-ms-flex-flow: row-reverse;
flex-flow: row-reverse;
}
.sq-cell-ft {
padding-left: 16px;
display: inline-block;
vertical-align: middle;
height: 100%;
position: relative;
}
.sq-cell-arrow {
font-size: 16px;
color: #ccc;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}