@charset "utf-8";

// 定义浮层search的基础构造
@mixin _search {
    @include flexbox;
    position: relative;
    padding: map-get($search, padding);
    background-color: map-get($search, bgcolor);
    line-height: map-get($search, input-height);
    > .operation {
        @include flexbox;
        @include flex;
        > .yo-ico {
            position: absolute;
            z-index: 2;
            width: .28rem;
            text-align: center;
        }
        > .input {
            display: block;
            @include appearance;
            @include flex;
            position: relative;
            z-index: 1;
            margin: -1px 0;
            padding-left: .1rem;
            border: 1px solid map-get($search, input-border-color);
            border-radius: map-get($search, radius);
            background-color: map-get($search, input-bgcolor);
            &-shrink {
                @include transition(margin .2s ease-out);
                &:focus {
                    margin-right: .6rem;
                }
            }
        }
        > .yo-ico + .input {
            padding-left: .28rem;
        }
    }
    > .cancel {
        position: absolute;
        right: .1rem;
        width: .5rem;
        color: map-get($search, cancel-color);
        text-align: center;
    }
    > .button {
        display: block;
        min-width: .4rem;
        margin-left: .1rem;
        padding: 0 .1rem;
        background-color: map-get($search, button-bgcolor);
        color: map-get($search, button-color);
        text-align: center;
        border-radius: map-get($search, radius);
    }
}

/**
 * @module fragment
 * @method yo-search
 * @version 2.1.2
 * @description 构造搜索框的自定义使用方法
 * @demo http://doyoe.github.io/Yo/demo/fragment/yo-search.html
 * @param {String} $name 定义扩展名称 <2.1.2>
 * @param {Length} $padding 搜索框区域内边距 <2.1.2>
 * @param {Color} $bgcolor 搜索框区域底色 <2.1.2>
 * @param {Length} $radius 搜索框及搜索按钮圆角 <2.1.2>
 * @param {Length} $input-height 搜索框高度 <2.1.2>
 * @param {Color} $input-border-color 搜索框边框色 <2.1.2>
 * @param {Color} $input-bgcolor 搜索框底色 <2.1.2>
 * @param {Color} $button-bgcolor 搜索按钮底色 <2.1.2>
 * @param {Color} $button-color 搜索按钮文本色 <2.1.2>
 * @param {Color} $cancel-color 取消操作区文本色 <2.1.2>
 */

@mixin yo-search(
    $name: default,
    $padding: default,
    $bgcolor: default,
    $radius: default,
    $input-height: default,
    $input-border-color : default,
    $input-bgcolor: default,
    $button-bgcolor: default,
    $button-color: default,
    $cancel-color: default) {
    // 区别是否新增实例还是修改本身
    $name: if($name == default, "", "-#{$name}");
    // 如果值为default，则取config的定义
    @if $padding == default {
        $padding: map-get($search, padding);
    }
    @if $bgcolor == default {
        $bgcolor: map-get($search, bgcolor);
    }
    @if $radius == default {
        $radius: map-get($search, radius);
    }
    @if $input-height == default {
        $input-height: map-get($search, input-height);
    }
    @if $input-border-color == default {
        $input-border-color: map-get($search, input-border-color);
    }
    @if $input-bgcolor == default {
        $input-bgcolor: map-get($search, input-bgcolor);
    }
    @if $button-bgcolor == default {
        $button-bgcolor: map-get($search, button-bgcolor);
    }
    @if $button-color == default {
        $button-color: map-get($search, button-color);
    }
    @if $cancel-color == default {
        $cancel-color: map-get($search, cancel-color);
    }
    .yo-search#{$name} {
        @if $padding != map-get($search, padding) {
            padding: $padding;
        }
        @if $bgcolor != map-get($search, bgcolor) {
            background-color: $bgcolor;
        }
        @if $input-height != map-get($search, input-height) {
            line-height: $input-height;
        }
        > .operation {
            > .input {
                @if $input-border-color != map-get($search, input-border-color) {
                    border-color: $input-border-color;
                }
                @if $radius != map-get($search, radius) {
                    border-radius: $radius;
                }
                @if $input-bgcolor != map-get($search, input-bgcolor) {
                    background-color: $input-bgcolor;
                }
            }
        }
        > .cancel {
            @if $cancel-color != map-get($search, cancel-color) {
                color: $cancel-color;
            }
        }
        > .button {
            @if $button-bgcolor != map-get($search, button-bgcolor) {
                background-color: $button-bgcolor;
            }
            @if $button-color != map-get($search, button-color) {
                color: $button-color;
            }
            @if $radius != map-get($search, radius) {
                border-radius: $radius;
            }
        }
        // 增量扩展
        @content;
    }
}

// 调用本文件时载入search基础构造
.yo-search {
    @include _search;
}