@charset "utf-8";

// 定义datepicker的基础构造
@mixin _datepicker {
    @include fullscreen;
    @include flexbox;
    @include flex-direction(column);
    background-color: #fff;
    text-align: center;
    > .weeks {
        @include flex(1, column);
        position: relative;
    }
    > .week-bar,
    .week {
        @include flexbox;
        width: 100%;
        > li {
            @include flex;
        }
    }
    // 星期一，二...条（bar）
    > .week-bar {
        position: relative;
        z-index: 2;
        height: map-get($datepicker, week-bar-height);
        line-height: map-get($datepicker, week-bar-height);
        background-color: map-get($datepicker, week-bar-bgcolor);
        color: map-get($datepicker, week-bar-color);
        font-size: map-get($datepicker, week-bar-font-size);
    }
    // 底边线设置
    .month-bar,
    .sticky-bar,
    .week {
        @include border(
            $border-width: 0 0 1px
        );
    }
    // 月份bar
    .month-bar,
    .sticky-bar {
        height: map-get($datepicker, month-bar-height);
        line-height: map-get($datepicker, month-bar-height);
        background-color: map-get($datepicker, month-bar-bgcolor);
        color: map-get($datepicker, month-bar-color);
        font-size: map-get($datepicker, month-bar-font-size);
        font-weight: normal;
        &::after {
            border-color: map-get($datepicker, month-bar-border-color);
        }
    }
    // 吸顶月份bar
    .sticky-bar {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
    }
    // 日期每行
    .week {
        color: map-get($datepicker, week-color);
        &::after {
            border-color: map-get($datepicker, week-border-color);
        }
        > li {
            position: relative;
            height: map-get($datepicker, week-height);
        }
    }
    .day,
    .special {
        display: inline-block;
        margin: map-get($datepicker, day-margin);
        font-size: map-get($datepicker, day-font-size);
        line-height: map-get($datepicker, day-height);
        vertical-align: top;
    }
    // 每个单日定义
    .day {
        @include square(map-get($datepicker, day-height));
        @include border-radius(map-get($datepicker, day-radius));
    }
    // 特殊的日子
    .special {
        color: map-get($datepicker, special-color);
        // 今天是特殊日子的场景
        ~ .special {
            margin: -.05rem 0 0;
        }
    }
    .today,
    .holiday {
        > .day {
            display: none;
        }
    }
    // 周末
    .weekend {
        color: map-get($datepicker, weekend-color);
    }
    // 不可选的日子
    .disabled {
        &,
        > .special {
            color: map-get($datepicker, disabled-color) !important;
        }
    }
    // 起始和结束日定义
    .start,
    .end {
        > .day {
            display: inline-block;
            background-color: map-get($datepicker, on-bgcolor);
            color: map-get($datepicker, on-color);
        }
        > .special {
            display: none;
        }
        &::after {
            display: block;
            color: map-get($datepicker, on-tip-color);
            font-size: map-get($datepicker, on-tip-font-size);
        }
    }
    .start::after {
        content: map-get($datepicker, start-content);
    }
    .end::after {
        content: map-get($datepicker, end-content);
    }
    // 选中日期段背景
    .range {
        background-color: map-get($datepicker, range-bgcolor);
    }
}

/**
 * @module widget
 * @method yo-datepicker
 * @version 1.8.1
 * @description 构造yo-datepicker的自定义使用方法
 * @demo http://doyoe.github.io/Yo/demo/widget/yo-datepicker.html
 * @param {String} $name 定义扩展名称 <1.8.1>
 * @param {Length} $week-bar-height 定义星期bar高度 <1.8.1>
 * @param {Color} $week-bar-bgcolor 定义星期bar背景色 <1.8.1>
 * @param {Color} $week-bar-color 定义星期bar文本色 <1.8.1>
 * @param {Length} $week-bar-font-size 定义星期bar字号 <1.8.1>
 * @param {Length} $month-bar-height 定义月份bar高度 <1.8.1>
 * @param {Color} $month-bar-bordercolor 定义月份bar边线色  <1.8.1, 2.0.0>
 * @param {Color} $month-bar-border-color 定义月份bar边线色 <2.0.0>
 * @param {Color} $month-bar-bgcolor 定义月份bar背景色 <1.8.1>
 * @param {Color} $month-bar-color 定义月份bar文本色 <1.8.1>
 * @param {Length} $month-bar-font-size 定义月份bar字号 <1.8.1>
 * @param {Length} $week-height 定义每行高度 <1.8.1>
 * @param {Color} $week-bordercolor 定义每行边线色  <1.8.1, 2.0.0>
 * @param {Color} $week-border-color 定义每行边线色 <2.0.0>
 * @param {Color} $week-color 定义每行文本色 <1.8.1>
 * @param {Length} $day-height 定义每日高度 <1.8.1>
 * @param {Length} $day-margin 定义每日间距 <1.8.1>
 * @param {Length} $day-radius 定义每日圆角 <1.8.1>
 * @param {Length} $day-font-size 定义每日字号 <1.8.1>
 * @param {Color} $special-color 定义特殊日文本色 <1.8.1>
 * @param {Color} $weekend-color 定义周末文本色 <1.8.1>
 * @param {Color} $disabled-color 定义禁用日子文本色 <1.8.1>
 * @param {Color} $on-bgcolor 定义选中日期背景色 <1.8.1>
 * @param {Color} $on-color 定义选中日期文本色 <1.8.1>
 * @param {Color} $on-tip-color 定义选中日期提示语文本色 <1.8.1>
 * @param {Length} $on-tip-font-size 定义选中日期提示语字号 <1.8.1>
 * @param {String} $start-content 定义开始日期提示语 <1.8.1>
 * @param {String} $end-content 定义结束日期提示语 <1.8.1>
 * @param {Color} $range-bgcolor 选中日期段背景 <2.1.1>
 */

@mixin yo-datepicker(
    $name: default,
    $week-bar-height: default,
    $week-bar-bgcolor: default,
    $week-bar-color: default,
    $week-bar-font-size: default,
    $month-bar-height: default,
    $month-bar-border-color: default,
    $month-bar-bgcolor: default,
    $month-bar-color: default,
    $month-bar-font-size: default,
    $week-height: default,
    $week-border-color: default,
    $week-color: default,
    $day-height: default,
    $day-margin: default,
    $day-radius: default,
    $day-font-size: default,
    $special-color: default,
    $weekend-color: default,
    $disabled-color: default,
    $on-bgcolor: default,
    $on-color: default,
    $on-tip-color: default,
    $on-tip-font-size: default,
    $start-content: default,
    $end-content: default,
    $range-bgcolor: default) {
    // 区别是否新增实例还是修改本身
    $name: if($name == default, "", "-#{$name}");
    // 如果值为default，则取config的定义
    @if $week-bar-height == default {
        $week-bar-height: map-get($datepicker, week-bar-height);
    }
    @if $week-bar-bgcolor == default {
        $week-bar-bgcolor: map-get($datepicker, week-bar-bgcolor);
    }
    @if $week-bar-color == default {
        $week-bar-color: map-get($datepicker, week-bar-color);
    }
    @if $week-bar-font-size == default {
        $week-bar-font-size: map-get($datepicker, week-bar-font-size);
    }
    @if $month-bar-height == default {
        $month-bar-height: map-get($datepicker, month-bar-height);
    }
    @if $month-bar-border-color == default {
        $month-bar-border-color: map-get($datepicker, month-bar-border-color);
    }
    @if $month-bar-bgcolor == default {
        $month-bar-bgcolor: map-get($datepicker, month-bar-bgcolor);
    }
    @if $month-bar-color == default {
        $month-bar-color: map-get($datepicker, month-bar-color);
    }
    @if $month-bar-font-size == default {
        $month-bar-font-size: map-get($datepicker, month-bar-font-size);
    }
    @if $week-height == default {
        $week-height: map-get($datepicker, week-height);
    }
    @if $week-border-color == default {
        $week-border-color: map-get($datepicker, week-border-color);
    }
    @if $week-color == default {
        $week-color: map-get($datepicker, week-color);
    }
    @if $day-height == default {
        $day-height: map-get($datepicker, day-height);
    }
    @if $day-margin == default {
        $day-margin: map-get($datepicker, day-margin);
    }
    @if $day-radius == default {
        $day-radius: map-get($datepicker, day-radius);
    }
    @if $day-font-size == default {
        $day-font-size: map-get($datepicker, day-font-size);
    }
    @if $special-color == default {
        $special-color: map-get($datepicker, special-color);
    }
    @if $weekend-color == default {
        $weekend-color: map-get($datepicker, weekend-color);
    }
    @if $disabled-color == default {
        $disabled-color: map-get($datepicker, disabled-color);
    }
    @if $on-bgcolor == default {
        $on-bgcolor: map-get($datepicker, on-bgcolor);
    }
    @if $on-color == default {
        $on-color: map-get($datepicker, on-color);
    }
    @if $on-tip-color == default {
        $on-tip-color: map-get($datepicker, on-tip-color);
    }
    @if $on-tip-font-size == default {
        $on-tip-font-size: map-get($datepicker, on-tip-font-size);
    }
    @if $start-content == default {
        $start-content: map-get($datepicker, start-content);
    }
    @if $end-content == default {
        $end-content: map-get($datepicker, end-content);
    }
    @if $range-bgcolor == default {
        $range-bgcolor: map-get($datepicker, range-bgcolor);
    }
    .yo-datepicker#{$name} {
        // 星期一，二...条（bar）
        > .week-bar {
            @if $week-bar-height != map-get($datepicker, week-bar-height) {
                height: $week-bar-height;
                line-height: $week-bar-height;
            }
            @if $week-bar-bgcolor != map-get($datepicker, week-bar-bgcolor) {
                background-color: $week-bar-bgcolor;
            }
            @if $week-bar-color != map-get($datepicker, week-bar-color) {
                color: $week-bar-color;
            }
            @if $week-bar-font-size != map-get($datepicker, week-bar-font-size) {
                font-size: $week-bar-font-size;
            }
        }
        .month-bar,
        .sticky-bar {
            &::after {
                @if $month-bar-border-color != map-get($datepicker, month-bar-border-color) {
                    border-color: $month-bar-border-color;
                }
            }
        }
        // 月份bar
        .month-bar {
            @if $month-bar-height != map-get($datepicker, month-bar-height) {
                height: $month-bar-height;
                line-height: $month-bar-height;
            }
            @if $month-bar-bgcolor != map-get($datepicker, month-bar-bgcolor) {
                background-color: $month-bar-bgcolor;
            }
            @if $month-bar-color != map-get($datepicker, month-bar-color) {
                color: $month-bar-color;
            }
            @if $month-bar-font-size != map-get($datepicker, month-bar-font-size) {
                font-size: $month-bar-font-size;
            }
        }
        // 吸顶月份bar
        > .sticky-bar {
            @if $month-bar-height != map-get($datepicker, month-bar-height) {
                top: $month-bar-height;
            }
        }
        // 日期每行
        .week {
            &::after {
                @if $week-border-color != map-get($datepicker, week-border-color) {
                    border-color: $week-border-color;
                }
            }
            @if $week-color != map-get($datepicker, week-color) {
                color: $week-color;
            }
            > li {
                @if $week-height != map-get($datepicker, week-height) {
                    height: $week-height;
                }
            }
        }
        .day,
        .special {
            @if $day-margin != map-get($datepicker, day-margin) {
                margin: $day-margin;
            }
            @if $day-font-size != map-get($datepicker, day-font-size) {
                font-size: $font-size;
            }
            @if $day-height != map-get($datepicker, day-height) {
                line-height: $height;
            }
        }
        // 每个单日定义
        .day {
            @if $day-height != map-get($datepicker, day-height) {
                @include square($day-height);
            }
            @if $day-radius != map-get($datepicker, day-radius) {
                border-radius: $day-radius;
            }
        }
        // 特殊的日子
        .special {
            @if $special-color != map-get($datepicker, special-color) {
                color: $special-color;
            }
        }
        // 周末
        .weekend {
            @if $weekend-color != map-get($datepicker, weekend-color) {
                color: $weekend-color;
            }
        }
        // 不可选的日子
        .disabled {
            &,
            > .special {
                @if $disabled-color != map-get($datepicker, disabled-color) {
                    color: $disabled-color !important;
                }
            }
        }
        // 起始和结束日定义
        .start,
        .end {
            > .day {
                @if $on-bgcolor != map-get($datepicker, on-bgcolor) {
                    background-color: $on-bgcolor;
                }
                @if $on-color != map-get($datepicker, on-color) {
                    color: $on-color;
                }
            }
            &::after {
                @if $on-tip-color != map-get($datepicker, on-tip-color) {
                    color: $on-tip-color;
                }
                @if $on-tip-font-size != map-get($datepicker, on-tip-font-size) {
                    font-size: $on-tip-font-size;
                }
            }
        }
        .start::after {
            @if $start-content != map-get($datepicker, start-content) {
                content: $start-content;
            }
        }
        .end::after {
            @if $end-content != map-get($datepicker, end-content) {
                content: $end-content;
            }
        }
        .range {
            @if $range-bgcolor != map-get($datepicker, range-bgcolor) {
                background-color: $range-bgcolor;
            }
        }

        // 增量扩展
        @content;
    }
}

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