jdvue/src/components/cell/index.less

A Vue.js 2.0 Mobile UI components at JinDanLiCai

.v-cell {
    width: 100%;
    display: table;
    padding: 15px 20px;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    color: @master;
    font-size: 16px;
    overflow: hidden;
    
    &:not(:last-child)::after {
        left: 20px;
        right: 0;
        width: auto;
        transform: scale(1, .5);
        border-bottom-width: 1px;
    }

    &-link{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 5;
        width: 100%;
        height: 100%;
    }

    &-title {
        display: table-cell;
        .v-icon {
            margin-right: 10px;
            vertical-align: middle;
        }
    }

    &-right{
        font-size: 14px;
        .v-cell-title{
            color: @gray;
        }
    }
    &-transfer{
        font-size: 16px;
        .v-cell-title{
            color: @master;
        }
    }


    &-text {
        display: inline-block;
        max-width: 310px;
        overflow: hidden;
        vertical-align: middle;
    }
    
    &-label{
        max-width: 310px;
        overflow: hidden;
        display: block;
        font-size: 14px;
        line-height: 1.2;
        color: @gray;
        margin-top: 5px;
    }

    &-value {
        display: table-cell;
        text-align: right;
        vertical-align: middle;
        overflow: hidden;

        &-alone {
            text-align: left;
        }

        &-link {
            padding-right: 20px;
        }
    }
    &-transfer{
        .v-cell-value{
            font-size: 14px;
            color: @gray;
        }
    }

    &-left {
        text-align: left;
    }
    &-center {
        text-align: center;
    }

   /* &-clickable {
        &:active {
            background-color: @gray-min;
        }
    }*/

    &-right-icon {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }
    &-transfer{
        .v-cell-right-icon {
            color: @gray;
        }
    }

    &-my{
        position: absolute;
        color: @red;
        font-size: 12px;
        margin-top: 28px;
        margin-right: 20px;
    }
    &-extra{
        padding: 15px 20px 40px 20px;

        .v-cell-right-icon {
            top: 33%;
        }
    }
    
}