sheral——一个方便定制及扩展的UI组件库

@charset "UTF-8";

//-----------------------------------------------------
// card list
//-----------------------------------------------------

$cardFlexSwitch:       false !default; // 默认使用float布局
$cardGap:              10px !default; // 默认间距10px
$cardImgRation:        1 !default; // 图片比例
$carLineNum:           2 !default; // 目前只支持2 或 3 等分

$cardBorderSwitch:     true !default; // 启用border分割

$cardGapSwitch:        true !default; // 启用背景分割

.card-list {
    @if $cardFlexSwitch {
        display: flex;
        flex-wrap: wrap;
    } @else {
        overflow: hidden;
    }

    .card-item {
        position: relative;
        width: 100% / $carLineNum;

        @if not $cardFlexSwitch {
            float: left;
        }

        .item-img-wrap{ // 设置图片默认占位高度
            @include object-wrap(percentage($cardImgRation), '.item-img'); // 调用sandal中定义的基础mixin
        }
        .item-img{
            width: 100%;
        }
        .item-tt {
            line-height: 30px;
        }
    }
}
@if $cardBorderSwitch{ // border 分割样式
    .card-list--border{
        background: #fff;
        position: relative;
        &::before{
            content: "";
            @include retina-one-px-border(top); // 调用sandal中定义的基础mixin
        }
        .card-item{
            padding: $cardGap !important;
            &::after{
                content: "";
                @include retina-one-px-border(bottom); // 调用sandal中定义的基础mixin
            }

            &::before{
                content: "";
                @include retina-one-px-border(right);
            }

            $type: if($carLineNum == 2, '2n', '3n'); // 2栏 3栏判断

            &:nth-of-type(#{$type}){
                &::before{
                    display: none;
                }
            }
        }
    }
}
@if $cardGapSwitch{ // 背景分割样式
    .card-list--gap{
        padding-left: $cardGap / 2;
        padding-right: $cardGap / 2;
        .card-item{
            margin-bottom: $cardGap;
            padding-left: $cardGap / 2;
            padding-right: $cardGap / 2;
        }
    }
}

<ul class="line-list line-list--indent line-list--flex list--setting">
    <li class="line-item">
        <i class="item-icon icon-plane"></i>
        <p class="item-tt">飞行模式</p>
        <i class="icon-switch"></i>
    </li>
    <li class="line-item">
        <i class="item-icon icon-wifi"></i>
        <p class="item-tt">Wi-Fi</p>
        <span class="item-append">Tencent-StaffWiFi</span>
        <i class="icon-v-right"></i>
    </li>
    <li class="line-item">
        <i class="item-icon icon-bluetooth"></i>
        <p class="item-tt">蓝牙</p>
        <span class="item-append">关闭</span>
        <i class="icon-v-right"></i>
    </li>
    <li class="line-item">
        <i class="item-icon icon-cellular"></i>
        <p class="item-tt">蜂窝移动网络</p>
        <i class="icon-v-right"></i>
    </li>
    <li class="line-item">
        <i class="item-icon icon-hotspot"></i>
        <p class="item-tt">个人热点</p>
        <i class="icon-v-right"></i>
    </li>
    <li class="line-item">
        <i class="item-icon icon-carrier"></i>
        <p class="item-tt">运营商</p>
        <span class="item-append">中国移动</span>
        <i class="icon-v-right"></i>
    </li>
</ul>

@import "sheral/sandal/core";
@import "sheral/sandal/ext/icons"; // 引入所有的自定义icon 或者 把右箭头拷贝过来（如下注释的右箭头样式）
@import "sheral/components/line-list";

// 拷贝右箭头样式
// .icon-v-right {
//     position: relative;
//     &::after {
//         content: "";
//         @include v-arrow;
//         position: absolute;
//         left: 50%;
//         top: 50%;
//         margin-left: -2px;
//         transform: translate(-50%, -50%) rotate(45deg);
//         box-sizing: border-box;
//     }
// }

// 特殊化class
.list--setting{
    .item-icon{
        width: 30px;
        height: 30px;
    }
    // 特殊化左右为15px，默认为10px
    .line-item{
        padding-left: 15px;
        padding-right: 15px;
        &::before{
            left: 60px;
        }
        .icon-v-right{
            width: 40px;
        }
    }
}