UNPKG

@insaic/neon

Version:

A Mobile UI Components built on Vue

84 lines (82 loc) 1.97 kB
.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%); }