Practice/_src/admin/scss/plugins/ax5ui/_ax5calendar.scss

$ax5calendar-control-bg: #f5f5f5 !default;
$ax5calendar-control-border: 1px solid #ddd !default;
$ax5calendar-control-border-radius: 5px !default;
$ax5calendar-control-font-size: ceil(($font-size-base * 1.25)) !default;
$ax5calendar-control-text-color: #222 !default;
$ax5calendar-control-hover-text-color: $brand-primary !default;
$ax5calendar-control-padding: 0 !default;

$ax5calendar-header-bg: (#FFFFFF, #FFFFFF) !default;
$ax5calendar-header-border: 0px none !default;
$ax5calendar-header-padding: 0px 2px !default;
$ax5calendar-header-font-size: ceil(($font-size-base * 0.8)) !default;

$ax5calendar-body-bg: (#FFFFFF, #FFFFFF) !default;
$ax5calendar-body-border: 0px none !default;
$ax5calendar-body-font-size: ceil(($font-size-base * 1)) !default;
$ax5calendar-body-animation-in: ax5-ui-calendar-fadein !default;
$ax5calendar-body-animation-out: ax5-ui-calendar-fadeout !default;

$ax5calendar-sun-text-color: #C78B81 !default;
$ax5calendar-sat-text-color: #32B4DC !default;

$ax5calendar-date-bg: (#FFFFFF, #FFFFFF) !default;
$ax5calendar-date-text-color: #C3C4C6 !default;
$ax5calendar-live-bg: (#F0F0F0, #F0F0F0) !default;
$ax5calendar-live-text-color: #6D6E70 !default;
$ax5calendar-hover-bg: (#32B4DC, #32B4DC) !default;
$ax5calendar-hover-text-color: #fff !default;
$ax5calendar-focus-bg: (#E67241, #E67241) !default;
$ax5calendar-focus-text-color: #fff !default;
$ax5calendar-period-bg: (#82d3fa, #82d3fa) !default;
$ax5calendar-period-text-color: #fff !default;


$ax5calendar-item-day-radius: 5px !default;
$ax5calendar-item-month-radius: 5px !default;
$ax5calendar-item-year-radius: 5px !default;

@mixin extend-item-theme() {
    &.holiday {
        color: $ax5calendar-sun-text-color;
    }
}

// mixins --------------------------------------------- end

@include keyframes(ax5-ui-calendar-fadeout) {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.5;
    }
}

@include keyframes(ax5-ui-calendar-fadein) {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}

.ax5-ui-calendar {
    box-sizing: border-box;
    * {
        box-sizing: border-box;
    }
    position: relative;
    .calendar-control {
        position: relative;
        box-sizing: content-box;
        @include ax-background($ax5calendar-control-bg);
        border: $ax5calendar-control-border;
        border-radius: $ax5calendar-control-border-radius;
        font-size: $ax5calendar-control-font-size;
        margin-bottom: 5px;
        padding: $ax5calendar-control-padding;

        .date-move-left, .date-move-right {
            display: block;
            position: absolute;
            overflow: hidden;

            text-align: center;
            font-size: ceil($ax5calendar-control-font-size * 1.2);
            cursor: pointer;
            text-decoration: none;
            padding: $ax5calendar-control-padding;
            i, span {
                line-height: inherit;
            }
        }

        .date-move-left {
            left: 0px;
            top: 0px;
        }
        .date-move-right {
            right: 0px;
            top: 0px;
        }
        .date-display {
            text-align: center;
            [data-calendar-display] {
                margin: 0px 10px;
                cursor: pointer;
                text-decoration: underline;
            }
        }

        color: $ax5calendar-control-text-color;
        a {
            color: $ax5calendar-control-text-color;
        }
        a:hover {
            color: $ax5calendar-control-hover-text-color;
        }
    }
    .calendar-body {
        &.fadein {
            @include animation($ax5calendar-body-animation-in 0.1s ease-in-out);
            opacity: 1.0;
        }
        &.fadeout {
            @include animation($ax5calendar-body-animation-out 0.1s ease-in-out);
            opacity: 0.0;
        }

        table {
            box-sizing: border-box;
            table-layout: fixed;
            border-collapse: collapse;
            border-spacing: 0px;
            border: 0px none;
            thead {
                td, th {
                    box-sizing: border-box;
                    vertical-align: middle;
                    line-height: 1em;
                    cursor: pointer;
                    text-align: center;
                    font-size: $ax5calendar-header-font-size;
                    padding: $ax5calendar-header-padding;
                    border: $ax5calendar-header-border;
                    overflow: hidden;
                    @include ax-background($ax5calendar-header-bg);

                    color: $ax5calendar-live-text-color;
                    &.calendar-col-0 {
                        color: $ax5calendar-sun-text-color;
                    }
                    &.calendar-col-6 {
                        color: $ax5calendar-sat-text-color;
                    }
                }
            }
            tbody {
                td, th {
                    box-sizing: border-box;
                    vertical-align: middle;
                    line-height: 1em;
                    cursor: pointer;
                    text-align: center;
                    font-size: $ax5calendar-body-font-size;

                    border: $ax5calendar-body-border;
                    @include ax-background($ax5calendar-body-bg);

                    overflow: hidden;
                    .calendar-item-day {
                        position: relative;
                        display: block;
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                        border-radius: $ax5calendar-item-day-radius;
                        overflow: hidden;
                        line-height: inherit;
                        @include ax-background($ax5calendar-date-bg);
                        color: $ax5calendar-date-text-color;
                        font-size: $ax5calendar-body-font-size;

                        span.addon {
                            position: absolute;
                            width: 100%;
                            text-align: center;
                            line-height: $ax5calendar-body-font-size * 0.8;
                            font-size: $ax5calendar-body-font-size * 0.8;

                            &.addon-header {
                                left: 0px;
                                top: 1px;
                            }
                            &.addon-footer {
                                left: 0px;
                                bottom: 1px;
                            }
                        }

                        &.live {
                            @include ax-background($ax5calendar-live-bg);
                            color: $ax5calendar-live-text-color;
                            span.addon {
                                color: #A1A1A1;
                            }
                            &.sunday {
                                color: $ax5calendar-sun-text-color;
                            }
                            &.saturday {
                                color: $ax5calendar-sat-text-color;
                            }
                        }
                        &.focus {
                            @include ax-background($ax5calendar-focus-bg);
                            color: $ax5calendar-focus-text-color;
                            span.addon {
                                color: $ax5calendar-focus-text-color;
                            }
                            &.hover {
                                @include ax-background($ax5calendar-hover-bg);
                                color: $ax5calendar-hover-text-color !important;
                                span.addon {
                                    color: $ax5calendar-hover-text-color;
                                }
                            }
                        }
                        &.period {
                            @include ax-background($ax5calendar-period-bg);
                            color: $ax5calendar-period-text-color !important;
                            span.addon {
                                color: $ax5calendar-period-text-color;
                            }
                        }
                        &.selected-day {
                            @include ax-background($ax5calendar-hover-bg);
                            color: $ax5calendar-hover-text-color !important;
                            span.addon {
                                color: $ax5calendar-hover-text-color;
                            }
                        }
                        &.disable {
                            @include ax-background($ax5calendar-date-bg);
                            color: lighten($ax5calendar-date-text-color, 10%);
                        }

                        @include extend-item-theme();
                    }
                    .calendar-item-month {
                        display: block;
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                        border-radius: $ax5calendar-item-month-radius;
                        overflow: hidden;
                        line-height: inherit;
                        @include ax-background($ax5calendar-date-bg);
                        color: $ax5calendar-date-text-color;
                        font-size: $ax5calendar-body-font-size;

                        &.live {
                            @include ax-background($ax5calendar-live-bg);
                            color: $ax5calendar-live-text-color;
                        }
                        &.hover {
                            @include ax-background($ax5calendar-hover-bg);
                            color: $ax5calendar-hover-text-color;
                        }
                        &.focus {
                            @include ax-background($ax5calendar-focus-bg);
                            color: $ax5calendar-focus-text-color;
                        }
                        &.selected-month {
                            @include ax-background($ax5calendar-hover-bg);
                            color: $ax5calendar-hover-text-color !important;
                            span.addon {
                                color: $ax5calendar-hover-text-color;
                            }
                            span.lunar {
                                color: $ax5calendar-hover-text-color;
                            }
                        }
                        &.disable {
                            @include ax-background($ax5calendar-date-bg);
                            color: lighten($ax5calendar-date-text-color, 10%);
                        }
                        @include extend-item-theme();
                    }
                    .calendar-item-year {
                        display: block;
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                        border-radius: $ax5calendar-item-year-radius;
                        overflow: hidden;
                        line-height: inherit;
                        @include ax-background($ax5calendar-date-bg);
                        color: $ax5calendar-date-text-color;
                        font-size: $ax5calendar-body-font-size;

                        &.live {
                            @include ax-background($ax5calendar-live-bg);
                            color: $ax5calendar-live-text-color;
                        }
                        &.hover {
                            @include ax-background($ax5calendar-hover-bg);
                            color: $ax5calendar-hover-text-color;
                        }
                        &.focus {
                            @include ax-background($ax5calendar-focus-bg);
                            color: $ax5calendar-focus-text-color;
                        }
                        &.selected-year {
                            @include ax-background($ax5calendar-hover-bg);
                            color: $ax5calendar-hover-text-color !important;
                            span.addon {
                                color: $ax5calendar-hover-text-color;
                            }
                            span.lunar {
                                color: $ax5calendar-hover-text-color;
                            }
                        }
                        &.disable {
                            @include ax-background($ax5calendar-date-bg);
                            color: lighten($ax5calendar-date-text-color, 10%);
                        }
                        @include extend-item-theme();
                    }

                    /*
                    &.calendar-col-0 {
                        .calendar-item-day.live {
                            color: $ax5calendar-sun-text-color;
                            @include extend-item-theme();
                        }
                    }
                    &.calendar-col-6 {
                        .calendar-item-day.live {
                            color: $ax5calendar-sat-text-color;
                            @include extend-item-theme();
                        }
                    }
                    */

                }
            }
        }
    }

}