API Docs for: 1.3.1
Show:

File: lib/element/classes.scss

@charset "utf-8";
@import "../core/variables";
@import "../core/classes";

/**
 * Yo框架element基础构造
 -----------------------
 * Yo内置了包括按钮,输入框,单选,多选,区间,分值等基础元素
 *
 * @class element
 * @module Yo
 */

// 定义按钮的基础构造
// 使用方法请查看 yo-btn.scss
@mixin _btn {
    display: inline-block;
    overflow: hidden;
    padding: map-get($btn, padding);
    // 当边框厚度大于0时,才定义边框相关属性
    @if map-get($btn, border-width) != null and
        map-get($btn, border-width) != 0 {
        border-width: map-get($btn, border-width);
        border-style: solid;
        border-color: map-get($btn, bordercolor);
    } @else {
        // 当使用input和button时,默认有巨丑边框,需清除
        border-style: none;
    }
    // 内阴影,用来描内部的1px白边
    box-shadow: inset .01rem .01rem rgba(255, 255, 255, .1);
    border-radius: map-get($btn, radius);
    background-color: map-get($btn, bgcolor);
    color: map-get($btn, color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    &:active {
        // 当边框厚度大于0时,才定义边框相关属性
        @if map-get($btn, border-width) != null and
            map-get($btn, border-width) != 0 {
            border-color: map-get($btn, active-bordercolor);
        }
        background-color: map-get($btn, active-bgcolor);
        color: map-get($btn, active-color);
    }
}

// 定义输入框的基础构造
// 使用方法请查看 yo-input.scss
@mixin _input {
    &,
    &::-webkit-inner-spin-button {
        @include appearance;
    }
    width: map-get($input, width);
    height: map-get($input, height);
    padding: map-get($input, padding);
    border: .01rem solid map-get($input, bordercolor);
    border-radius: map-get($input, radius);
    background-color: map-get($input, bgcolor);
    // 如果input颜色值与base相同,则不设置
    @if map-get($input, color) != map-get($base, color) {
        color: map-get($input, color);
    }
    &::-webkit-input-placeholder {
        color: map-get($input, placeholder-color);
    }
}

// 定义loading的基础构造
// 使用方法请查看 yo-loading.scss
@mixin _loading {
    display: block;
    position: absolute;
    z-index: map-get($z-index, loading);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    min-width: map-get($loading, size) + .2rem;
    min-height: map-get($loading, size) + .2rem;
    background-color: map-get($loading, mask-bgcolor);
    text-align: center;
    &:before,
    &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
        content: "\0020";
    }
    &:after {
        @include square(.04em);
        margin-top: -.1rem;
        background: transparent;
        border-radius: 50%;
        @include animation(loading 1s infinite linear);
        @include transform-origin(center);
        box-shadow:
            .35em -.29em,
            .47em -.03em 0 .01em,
            .4em .20em 0 .02em,
            .25em .38em 0 .03em,
            0 .44em 0 .04em,
            -.22em .38em 0 .05em,
            -.38em .24em 0 .05em,
            -.42em 0 0 .06em,
            -.36em -.21em 0 .06em,
            -.2em -.36em 0 .06em,
            0 -.41em 0 .07em;
        font-size: map-get($loading, size);
        color: map-get($loading, color);
    }
    &:before {
        @include square(map-get($loading, size) * 2);
        border-radius: .1rem;
        background-color: map-get($loading, bgcolor);
    }
    > .inner {
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
        margin-top: map-get($loading, size) - .18rem;
        font-size: .12rem;
        color: map-get($loading, color);
    }
}

// 定义区间选择的基础构造
// 使用方法请查看 yo-range.scss
@mixin _range {
    @include flexbox;
    line-height: 1;
    > input[type="range"] {
        @include appearance(none);
        @include flex;
        overflow: hidden;
        height: .28rem;
        background-image: -webkit-linear-gradient(right, map-get($range, outer-bgcolor) 0%, map-get($range, outer-bgcolor) 100%);
        background-image: linear-gradient(to right, map-get($range, outer-bgcolor) 0%, map-get($range, outer-bgcolor) 100%);
        background-size: 100% .04rem;
        background-repeat: no-repeat;
        background-position: center;
        &::-webkit-slider-thumb {
            @include appearance(none);
            @include square(.2rem);
            position: relative;
            border: 0;
            border-radius: 50%;
            box-shadow: 0 0 2px rgba(0, 0, 0, .5), 1px 1px 5px rgba(0, 0, 0, .25);
            background-color: map-get($range, ball-color);
            &::before {
                position: absolute;
                top: 8px;
                left: -2001px;
                width: 2000px;
                height: 4px;
                background-color: map-get($range, inner-bgcolor);
                content: "\0020";
            }
        }
        &:disabled {
            opacity: .4;
            &::-webkit-slider-thumb::before {
                background-color: #444;
            }
        }
    }
    > .yo-ico {
        font-size: .2rem;
        &:first-child {
            margin-right: .1rem;
        }
        &:last-child {
            margin-left: .1rem;
        }
    }
}

@mixin _checked {
    display: inline-block;
    position: relative;
    @include square(map-get($checked, size));
    font-size: map-get($checked, font-size);
    font-family: map-get($ico, font-name);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    > input,
    > .type {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        @include square(100%);
    }
    > input {
        z-index: 2;
        opacity: 0;
    }
    > .type {
        border-radius: map-get($checked, radius);
        background-color: transparent;
        // 当边框厚度大于0时,才定义边框相关属性
        @if map-get($checked, border-width) != null and
            map-get($checked, border-width) != 0 {
            border-width: map-get($checked, border-width);
            border-style: solid;
            border-color: map-get($checked, bordercolor);
            line-height: map-get($checked, size) - nth(map-get($checked, border-width), 1) * 2;
        } @else {
            line-height: map-get($checked, size);
        }
        &::after {
            content: map-get($checked, content);
            color: map-get($checked, color);
        }
    }
    > input:checked ~ .type {
        @if map-get($checked, border-width) != null and
            map-get($checked, border-width) != 0 {
            border-color: map-get($checked, on-bordercolor);
        }
        background-color: map-get($checked, on-bgcolor);
        &::after {
            color: map-get($checked, on-color);
        }
    }
    > input:disabled ~ .type {
        opacity: .4;
        @if map-get($checked, border-width) != null and
            map-get($checked, border-width) != 0 {
            border-color: map-get($base, disabled-bordercolor) !important;
        }
        background-color: map-get($base, disabled-bgcolor) !important;
        &::after {
            color: map-get($base, disabled-color) !important;
        }
    }
}

// 定义radio的基础构造
// 使用方法请查看 yo-radio.scss
@mixin _radio {
    @include appearance(none);
    position: relative;
    @include square(map-get($radio, size));
    border-radius: map-get($radio, radius);
    background-color: map-get($radio, bgcolor);
    // 将 color 设置为 transparent,这时如果不需要边框,就可以将 $bordercolor 设置为 null 了,边框色为 color 设置
    border: .01rem solid;
    border-color: map-get($radio, bordercolor);
    color: transparent;
    font-size: map-get($radio, size);
    cursor: pointer;
    vertical-align: middle;
    &::after {
        position:absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
        @if map-get($radio, type) == tick {
            content: "✓";
        } @else {
            content: "●";
        }
        font-size: 68%;
        opacity: 0;
    }
    &:checked {
        border-color: map-get($radio, on-bordercolor);
        background-color: map-get($radio, on-bgcolor);
        &::after {
            color: map-get($radio, on-color);
            opacity: 1;
        }
    }
    &:disabled {
        opacity: .4;
        border-color: map-get($base, disabled-bordercolor) !important;
        background-color: map-get($base, disabled-bgcolor) !important;
        &::after {
            color: map-get($base, disabled-color) !important;
        }
    }
}

// 定义checkbox的基础构造
// 使用方法请查看 yo-checkbox.scss
@mixin _checkbox {
    @include appearance(none);
    position: relative;
    @include square(map-get($checkbox, size));
    border-radius: map-get($checkbox, radius);
    background-color: map-get($checkbox, bgcolor);
    // 将 color 设置为 transparent,这时如果不需要边框,就可以将 $bordercolor 设置为 null 了,边框色为 color 设置
    border: .01rem solid;
    border-color: map-get($checkbox, bordercolor);
    color: transparent;
    font-size: map-get($checkbox, size);
    cursor: pointer;
    vertical-align: middle;
    &::after {
        position:absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
        @if map-get($checkbox, type) == tick {
            content: "✓";
        } @else {
            content: "●";
        }
        font-size: 68%;
        opacity: 0;
    }
    &:checked {
        border-color: map-get($checkbox, on-bordercolor);
        background-color: map-get($checkbox, on-bgcolor);
        &::after {
            color: map-get($checkbox, on-color);
            opacity: 1;
        }
    }
    &:disabled {
        opacity: .4;
        border-color: map-get($base, disabled-bordercolor) !important;
        background-color: map-get($base, disabled-bgcolor) !important;
        &::after {
            color: map-get($base, disabled-color) !important;
        }
    }
}

// 定义badge的基础构造
// 使用方法请查看 yo-badge.scss
@mixin _badge {
    display: inline-block;
    min-width: .16rem;
    min-height: .16rem;
    padding: map-get($badge, padding);
    // 当边框厚度大于0时,才定义边框相关属性
    @if map-get($badge, border-width) != null and
        map-get($badge, border-width) != 0 {
        border-width: map-get($badge, border-width);
        border-style: solid;
        border-color: map-get($badge, bordercolor);
    }
    border-radius: map-get($badge, radius);
    background-color: map-get($badge, bgcolor);
    color: map-get($badge, color);
    font-size: map-get($badge, font-size);
    @if map-get($badge, font-size) == null or
        map-get($badge, font-size) <= .14rem {
        line-height: .14rem;
    } @else {
        line-height: map-get($badge, font-size);
    }
    text-align: center;
}

// 定义loadtip的基础构造
// 使用方法请查看 yo-loadtip.scss
@mixin _loadtip {
    @include flexbox(inline);
    @include align-items;
    color: map-get($loadtip, color);
    font-size: map-get($loadtip, font-size);
    > .yo-ico {
        display: block;
        @include transform-origin(center);
        color: map-get($loadtip, ico-color);
        -webkit-transition: -webkit-transform .3s;
        transition: transform .3s;
        @include transform(rotatez(0deg));
        &-flip {
            @include transform(rotatez(180deg));
        }
    }
    > .yo-ico-loading {
        @include animation(loadtip 1s infinite linear);
    }
    > .text {
        @include flex;
        margin-left: .1rem;
        > .time {
            display: block;
            font-size: .12rem;
        }
    }
}

// 定义score的基础构造
// 使用方法请查看 yo-score.scss
@mixin _score {
    position: relative;
    width: map-get($score, item-width) * 5;
    height: map-get($score, item-height);
    overflow: hidden;
    &,
    > .index {
        display: inline-block;
        background: url(#{map-get($setting, bgimg-domain)}#{map-get($score, url)}) repeat-x;
        @if map-get($score, item-height) != null {
            background-size: auto map-get($score, item-height) * 2;
        }
    }
    > .index {
        height: 100%;
        background-position: 0 -#{map-get($score, item-height)};
        line-height: 10;
        vertical-align: top;
    }
}