API Docs for: 1.3.1
Show:

File: lib/fragment/classes.scss

@charset "utf-8";
@import "../core/variables";
@import "../core/classes";
/**
 * Yo框架fragment基础构造
 -----------------------
 * Yo内置了包括:dialog, popup, tip, tab, switch, rating等基础组件
 *
 * @class fragment
 * @module Yo
 */

// 定义list的基础构造
// 使用方法请查看 yo-list.scss
@mixin _list {
    margin: map-get($list, margin);
    border-radius: map-get($list, radius);
    // 当边框厚度大于0时,才定义边框相关属性
    @if map-get($list, border-width) != null and
        map-get($list, border-width) != 0 {
        border-width: map-get($list, border-width);
        border-style: solid;
        border-color: map-get($list, bordercolor);
    }
    > .label,
    > .item,
    .front {
        @include flexbox;
        @include align-items;
        > .mark:not(:last-child),
        > .yo-ico:not(:last-child) {
            margin-right: .1rem;
        }
        // 定义需要自适应宽度的列
        > .flex {
            @include flex;
        }
        > .mark,
        > .yo-ico,
        > .col,
        > .flex {
            display: block;
        }
        &.tr {
            // 当模式为table时,padding将设置到col上
            padding: 0;
        }
    }
    > .label {
        margin-top: -1px;
        padding: map-get($list, label-padding);
        border: 1px solid map-get($list, label-bordercolor);
        border-width: 1px 0;
        background-color: map-get($list, label-bgcolor);
        color: map-get($base, sub-color);
        font-size: map-get($list, label-font-size);
        font-weight: normal;
        // 定义单元格的padding
        > .col {
            padding: map-get($list, label-padding);
        }
    }
    > .item,
    .front {
        padding: map-get($list, item-padding);
    }
    > .item {
        border-bottom: .01rem solid map-get($list, item-bordercolor);
        background-color: #fff;
        color: map-get($base, color);
        font-size: map-get($list, item-font-size);
        &:last-child {
            margin-bottom: -.01rem;
            // 最后一根线的颜色与外边框颜色相同
            border-color: map-get($list, bordercolor);
        }
        &-stacked {
            display: block;
            > .mark {
                padding-bottom: .05rem;
            }
        }
        &-input {
            // 让输入框占满整个父容器
            > .yo-input {
                height: auto;
                padding: 0;
                border: 0;
            }
        }
        &-input,
        &-active,
        &-on,
        &-light {
            cursor: pointer;
        }
        // 常规需要active的项目,没有使用到第3方组件的
        &.item-active:active,
        // 为第3方组件提供active状态
        &.item-light {
            background-color: map-get($list, active-bgcolor);
        }
        // 选中时背景和文本色
        &.item-on {
            background-color: map-get($list, on-bgcolor);
            color: map-get($list, on-color);
        }
        // 定义单元格的padding
        > .col {
            padding: map-get($list, item-padding);
        }
    }
    > .yo-slidermenu {
        display: block;
        padding: 0 !important;
    }
}

// 定义table的基础构造
// 使用方法请查看 yo-table.scss
@mixin _table {
    width: map-get($table, width);
    background-color: #fff;
    thead {
        background-color: map-get($table, thead-bgcolor);
        th {
            padding: map-get($table, thead-padding);
        }
    }
    td {
        padding: map-get($table, tbody-padding);
    }
    th,
    td {
        // 判断是够需要垂直边框
        @if map-get($table, has-vertical-border) == false {
            border-width: 0 0 1px 0;
        } @else {
            border-width: 1px;
        }
        border-style: solid;
        border-color: map-get($table, bordercolor);
    }
    tbody {
        tr:nth-child(odd) {
            background-color: map-get($table, odd-bgcolor);
        }
        tr:nth-child(even) {
            background-color: map-get($table, even-bgcolor);
        }
        tr:active,
        tr.active {
            background-color: map-get($table, active-bgcolor);
        }
        tr.on{
            background-color: map-get($table, on-bgcolor);
        }
    }
}

// 定义btnbar的基础构造
// 使用方法请查看 yo-btnbar.scss
@mixin _btnbar {
    display: inline-block;
    vertical-align: middle;
    > .yo-btn {
        float: left;
        &:not(:first-child) {
            margin-left: -.01rem !important;
        }
        &:first-child {
            // 如果按钮有圆角,那么去掉第一个按钮的右侧圆角
            @if map-get($btn, radius) != 0 {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            // 如果工具栏定义了圆角,那么不管按钮有没有左侧圆角,都重绘
            @if map-get($btnbar, radius) != auto and map-get($btnbar, radius) != map-get($btn, radius) {
                border-top-left-radius: map-get($btnbar, radius);
                border-bottom-left-radius: map-get($btnbar, radius);
            }
        }
        &:last-child {
            // 如果按钮有圆角,那么去掉最后一个按钮的左侧圆角
            @if map-get($btn, radius) != 0 {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
            // 如果工具栏定义了圆角,那么不管按钮有没有右侧圆角,都重绘
            @if map-get($btnbar, radius) != auto and map-get($btnbar, radius) != map-get($btn, radius) {
                border-top-right-radius: map-get($btnbar, radius);
                border-bottom-right-radius: map-get($btnbar, radius);
            }
        }
        &:not(:first-child):not(:last-child){
            // 如果按钮有圆角,那么清除中间所有按钮的圆角
            @if map-get($btn, radius) != 0 {
                border-radius: 0;
            }
        }
    }
}

// 定义header的基础构造
// 使用方法请查看 yo-header.scss
@mixin _header {
    position: relative;
    overflow: hidden;
    height: map-get($header, height);
    line-height: map-get($header, height);
    border-bottom: 1px solid map-get($header, bordercolor);
    background-color: map-get($header, bgcolor);
    // 如果config预设值不等于base color,则重绘color
    @if map-get($header, color) != map-get($base, color) {
        color: map-get($header, color);
    }
    // 如果config预设值不等于base font-size,则重绘font-size
    @if map-get($header, font-size) != map-get($base, font-size) {
        font-size: map-get($header, font-size);
    }
    @include ellipsis;
    text-align: center;
    > .title {
        @include ellipsis;
        margin: 0 map-get($header, item-width);
    }
    > .regret,
    > .affirm {
        position: absolute;
        top: 0;
        width: map-get($header, item-width);
        // 如果config预设值不等于parent font-size,则重绘子项的font-size
        @if map-get($header, item-font-size) != map-get($header, font-size) {
            font-size: map-get($header, item-font-size);
        }
        @include link;
        &.yo-ico,
        > .yo-ico {
            font-size: map-get($header, item-ico-size);
        }
    }
    > .regret {
        left: 0;
        padding-left: map-get($header, item-space);
        text-align: left;
    }
    > .affirm {
        right: 0;
        padding-right: map-get($header, item-space);
        text-align: right;
    }
}