@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/datePicker/datePicker.scss

@@ -1,1034 +0,0 @@
-//@import '../theme/variables.scss';
-@import "./variables.scss";
-
-$module: #{$prefix}-datepicker;
-
-.#{$module} {
-    box-sizing: border-box;
-    display: inline-block;
-
-    // 双月网格
-
-    &-month-grid {
-        user-select: none;
-        display: flex;
-
-        &-left,
-        &-right {
-            position: relative;
-            padding: 0;
-            display: inline-flex;
-            flex-direction: column;
-            justify-content: flex-start;
-        }
-
-        &[x-type="date"],
-        &[x-type="dateRange"] {
-            .#{$module}-yam {
-                height: 100%;
-            }
-        }
-
-        &[x-type="dateTime"],
-        &[x-type="dateTimeRange"] {
-            .#{$module}-yam {
-                height: $height-datepicker_timeType_yam;
-            }
-        }
-
-        .#{$module}-yam-showing {
-            min-height: $height-datepicker_yamShowing_min;
-            min-width: $width-datepicker_yamShowing_min;
-        }
-
-        &[x-type='date'] .#{$module}-yam-showing {
-            min-height: $height-datepicker_dateType_yamShowing_min;
-        }
-
-        // 年月选择返回主面板
-        .#{$module}-yearmonth-header {
-            background: $color-datepicker_header-bg-default;
-            padding: $spacing-datepicker_yam_header-paddingY $spacing-datepicker_yam_header-paddingX;
-            border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
-            border-radius: $width-datepicker_yam_header-borderRadius $width-datepicker_yam_header-borderRadius 0 0;
-            display: flex;
-            align-items: center;
-        }
-
-        .#{$prefix}-scrolllist {
-            background: $color-datepicker_list-bg-default;
-            position: relative;
-            box-shadow: none;
-            height: auto;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            flex: 1;
-
-            &-header,
-            &-body {
-                box-sizing: border-box;
-                width: 100%;
-            }
-
-            &-header {
-                border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
-                padding: $spacing-datepicker_scrolllist_header-padding;
-            }
-
-            &-body {
-                height: 100%;
-                overflow: hidden;
-                padding: $spacing-datepicker_scrolllist_body-padding;
-                flex: 1;
-            }
-
-            &-line {
-                display: none;
-            }
-
-            &-header-title {
-                padding: 0;
-
-                @include font-size-regular;
-                min-height: $height-datepicker_timepicker_header_min;
-            }
-        }
-    }
-
-    // 年月选择器
-
-    &-panel-yam {
-        max-width: $width-datepicker_monthPanel_max;
-
-        .#{$prefix}-scrolllist {
-            box-shadow: none;
-            height: $height-datepicker_panel_yam_scrolllist;
-
-            &-list-outer {
-
-                & > ul > li {
-                    min-width: $width-datepicker_panel_yam_scrolllist_li_min;
-                }
-            }
-
-            &-body {
-                padding: 0;
-                overflow: hidden;
-
-                .#{$prefix}-scrolllist-item-wheel {
-                    border: none;
-                }
-            }
-        }
-    }
-
-    // needConfirm
-
-    &-footer {
-        padding-top: $spacing-datepicker_footer-paddingTop;
-        padding-right: $spacing-datepicker_footer-paddingRight;
-        padding-bottom: $spacing-datepicker_footer-paddingBottom;
-        text-align: right;
-        background-color: $color-datepicker_footer-bg-default;
-    }
-
-    // 年月选择
-
-    &-yam {
-        position: absolute;
-        top: 0;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-    }
-
-    // 时间选择
-
-    &-tpk {
-        position: absolute;
-        top: 0;
-        height: $height-datepicker_timeType_tpk;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-
-        .#{$module}-time {
-            height: 100%;
-        }
-    }
-
-    // 当前年月、切换年月按钮
-
-    &-navigation {
-        display: flex;
-        align-items: center;
-        box-sizing: content-box;
-        height: $width-datepicker_nav;
-        padding: $spacing-datepicker_navigation-paddingY $spacing-datepicker_navigation-paddingX;
-
-        &-left,
-        &-right {
-            width: $width-datepicker_nav;
-            height: $width-datepicker_nav;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .#{$prefix}-button {
-            color: $color-datepicker_navIcon-text-default;
-            min-width: $width-datepicker_navigation_button_min;
-        }
-
-        &-month {
-            @include font-size-header-6;
-            flex-grow: 1;
-            text-align: center;
-            font-weight: $font-weight-bold;
-            color: $color-datepicker_nav_monthIcon-text-default;
-
-            .#{$prefix}-button {
-                color: $color-datepicker_nav_monthIcon-text-default;
-            }
-        }
-    }
-
-    // 月面板
-
-    &-month {
-        width: $width-datepicker_month;
-        box-sizing: content-box;
-        padding: $spacing-datepicker_month-padding;
-        padding-top: 0;
-    }
-
-    // 月面板-星期
-
-    &-weekday {
-        @include font-size-small;
-        font-weight: $font-weight-bold;
-        color: $color-datepicker_day-text-default;
-
-        &-item {
-            width: $width-datepicker_day;
-            height: $width-datepicker_day;
-            line-height: $width-datepicker_day;
-            text-align: center;
-            display: inline-block;
-        }
-
-        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
-    }
-
-    // 月面板-月周
-
-    &-weeks {
-        color: $color-datepicker_date-text-default;
-    }
-
-    // 月面板-周
-
-    &-week {
-        display: flex;
-        align-items: center;
-    }
-
-    // 月面板-周天
-
-    &-day {
-        box-sizing: border-box;
-        display: inline-block;
-        width: $width-datepicker_day;
-        height: $width-datepicker_day;
-
-        @include all-center;
-        cursor: pointer;
-
-        // 周天-内部
-
-        &-main {
-            @include all-center;
-            width: $width-datepicker_day_main;
-            height: $width-datepicker_day_main;
-            margin: 0 auto;
-            box-sizing: border-box;
-            border-radius: $width-datepicker_day_main-borderRadius;
-
-            &:hover {
-                background-color: $color-datepicker_date-bg-hover;
-            }
-
-            &:active {
-                background-color: $color-datepicker_date-bg-active;
-            }
-        }
-
-        // 以下是天状态
-
-        &-today {
-            .#{$module}-day-main {
-                color: $color-datepicker_date_today-text-default;
-                background-color: $color-datepicker_date-bg-default;
-                font-weight: $font-weight-bold;
-            }
-
-            &.#{$module}-day-disabled {
-                .#{$module}-day-main {
-                    color: $color-datepicker_date_today_disabled-text-default;
-                }
-            }
-        }
-
-        &-inrange,
-        &-inhover,
-        &-inoffsetrange,
-        &-hoverday,
-        &-selectedrange-hover,
-        &-hoverday-around-singleselected {
-            .#{$module}-day-main {
-                border-radius: 0;
-                margin-left: 0;
-                margin-right: 0;
-                width: $width-datepicker_day;
-            }
-        }
-
-        &-selected {
-            .#{$module}-day-main {
-                border-radius: $width-datepicker_day_main-borderRadius;
-            }
-        }
-
-        // one date is both start and end
-        &-selected-start.#{$module}-day-selected-end,
-        &-offsetrange-start.#{$module}-day-offsetrange-end {
-            .#{$module}-day-main {
-                border-radius: $width-datepicker_day_main-borderRadius;
-            }
-        }
-
-        &-offsetrange-start {
-            .#{$module}-day-main {
-                border-radius: $width-datepicker_day_main-borderRadius 0 0 $width-datepicker_day_main-borderRadius;
-            }
-        }
-
-        &-offsetrange-end {
-            .#{$module}-day-main {
-                border-radius: 0 $width-datepicker_day_main-borderRadius $width-datepicker_day_main-borderRadius 0;
-            }
-        }
-
-        &-hoverday-beforerange {
-            .#{$module}-day-main {
-                border-radius: $width-datepicker_day_main-borderRadius 0 0 $width-datepicker_day_main-borderRadius;
-            }
-        }
-
-        &-hoverday-afterrange {
-            .#{$module}-day-main {
-                border-radius: 0 $width-datepicker_day_main-borderRadius $width-datepicker_day_main-borderRadius 0;
-            }
-        }
-
-        &-selected-start,
-        &-offsetrange-start {
-            .#{$module}-day-main {
-                width: $width-datepicker_day - $spacing-datepicker_day-marginX;
-                margin-left: $spacing-datepicker_day-marginX;
-                margin-right: 0;
-                border-radius: $width-datepicker_day_main-borderRadius 0 0 $width-datepicker_day_main-borderRadius;
-            }
-        }
-
-        &-selected-end,
-        &-offsetrange-end {
-            .#{$module}-day-main {
-                width: $width-datepicker_day - $spacing-datepicker_day-marginX;
-                margin-right: $spacing-datepicker_day-marginX;
-                margin-left: 0;
-                border-radius: 0 $width-datepicker_day_main-borderRadius $width-datepicker_day_main-borderRadius 0;
-            }
-        }
-
-        &-hoverday-inrange {
-            .#{$module}-day-main {
-                border-radius: 0;
-            }
-        }
-
-        &-inoffsetrange,
-        &-offsetrange-start,
-        &-offsetrange-end {
-            .#{$module}-day-main {
-                background-color: $color-datepicker_date_inRangeHover-bg-default;
-            }
-        }
-
-        &-hoverday,
-        &-hoverday-offset {
-            .#{$module}-day-main {
-                background-color: $color-datepicker_date_hoverDay-bg-default;
-            }
-        }
-
-        &-inrange,
-        &-inhover {
-            .#{$module}-day-main {
-                background-color: $color-datepicker_date_inHover-bg-default;
-            }
-        }
-
-        &-hoverday-inrange,
-        &-hoverday-beforerange,
-        &-hoverday-afterrange {
-            .#{$module}-day-main {
-                background-color: $color-datepicker_date_hoverday_range-bg-default;
-            }
-        }
-
-        &-hoverday-around-singleselected {
-            .#{$module}-day-main {
-                background-color: $color-datepicker_date_hoverday_around_single_selected-bg-default;
-            }
-        }
-
-        &-selected,
-        &-selected-start,
-        &-selected-end {
-            .#{$module}-day-main {
-                background-color: $color-datepicker_date_selected-bg-default;
-                color: $color-datepicker_date_selected-text-default;
-
-                &:hover {
-                    background-color: $color-datepicker_date_selected-bg-default;
-                }
-            }
-        }
-
-        &-selectedrange-hover {
-            .#{$module}-day-main {
-                background-color: $color-datepicker_date_selectedRange-bg-hover;
-            }
-        }
-
-        &-selected-start-afterhover,
-        &-selected-end-beforehover {
-            .#{$module}-day-main {
-                border: $width-datepicker_day_main-border solid $color-datepicker_day_main-border;
-            }
-        }
-
-        &-disabled {
-            cursor: not-allowed;
-            color: $color-datepicker_date_disabled-text-default;
-
-            .#{$module}-day-main {
-
-                &:hover {
-                    background-color: transparent;
-                }
-
-                &:active {
-                    background-color: transparent;
-                }
-            }
-
-            &.#{$module}-day {
-
-                &-selected,
-                &-selected-start,
-                &-selected-end,
-                &-inhover,
-                &-inrange,
-                &-inoffsetrange,
-                &-hoverday,
-                &-hoverday-offset,
-                &-offsetrange-start,
-                &-offsetrange-end,
-                &-selectedrange-hover {
-                    .#{$module}-day-main {
-                        background-color: $color-datepicker_date_disabled-bg-default;
-                        color: $color-datepicker_date_disabled-text-default;
-                    }
-                }
-            }
-        }
-        // 以上是天状态
-    }
-
-    // 切换日期和时间选择
-
-    &-switch {
-        text-align: center;
-        display: flex;
-        border-top: $width-datepicker-border solid $color-datepicker_border-bg-default;
-        margin-top: auto;
-
-        &-date,
-        &-time {
-            width: 50%;
-            // flex-grow: 1;
-            cursor: pointer;
-            padding-top: $spacing-datepicker_switch_datetime-paddingTop;
-            padding-bottom: $spacing-datepicker_switch_datetime-paddingBottom;
-
-            @include all-center;
-            color: $color-datepicker_day-text-default;
-
-            &:not(.#{$module}-switch-time-disabled):hover {
-                background-color: $color-datepicker_date-bg-hover;
-            }
-
-            &-active {
-                color: $color-datepicker_day-text-active;
-                font-weight: $font-weight-bold;
-                cursor: auto;
-
-                &:hover {
-                    background-color: inherit;
-                }
-            }
-
-            &-disabled {
-                cursor: not-allowed;
-            }
-        }
-
-        &-text {
-            padding-left: $spacing-datepicker_switch_text-paddingLeft;
-        }
-    }
-
-    &-time {
-        .#{$prefix}-jumperlist {
-            @include shadow-0;
-            border-radius: 0;
-        }
-    }
-
-    // 预设
-
-    &-quick-control {
-        box-sizing: border-box;
-        border-top: $width-datepicker-border solid $color-datepicker_border-bg-default;
-        display: flex;
-        align-items: center;
-        background-color: $color-datepicker_quick-bg-default;
-        padding: $spacing-datepicker_quick_control_padding;
-        border-radius: 0 0 $width-datepicker_quick_control-borderRadius $width-datepicker_quick_control-borderRadius;
-        flex-wrap: wrap;
-
-        &-item {
-            margin-right: $spacing-datepicker_quick_control_item-marginRight;
-        }
-
-        &-month,
-        &-date,
-        &-dateTime {
-            max-width: $width-datepicker_monthPanel_max;
-        }
-
-        &-dateRange,
-        &-dateTimeRange {
-            max-width: $width-datepicker_monthPanel_max * 2;
-        }
-    }
-
-    &-topSlot {
-        border-bottom: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;
-    }
-
-    &-bottomSlot {
-        border-top: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;
-    }
-
-    .#{$prefix}-popover-trigger {
-        width: 100%;
-
-        .#{$prefix}-input-wrapper {
-            font-size: 13px;
-        }
-
-        .#{$prefix}-input-suffix {
-            color: $color-datepicker_input_primary-text-default;
-        }
-    }
-
-    .#{$prefix}-datepicker-input-readonly {
-        cursor: pointer;
-    }
-
-    &-range {
-
-        &-input {
-            display: flex;
-            align-items: center;
-            box-sizing: border-box;
-            border-radius: $radius-datepicker_range_input;
-            height: $height-datepicker_range_input-default;
-            color: $color-datepicker_range_input-text-default;
-            background-color: $color-datepicker_range_input-bg-default;
-
-            &-wrapper {
-                box-sizing: border-box;
-                background-color: $color-datepicker_range_input_inputWrapper-bg-default;
-                padding: 0 $spacing-datepicker_range_input-paddingX;
-                height: 100%;
-                width: 100%;
-                border: $width-datepicker_range_input-border solid $color-datepicker_range_input-border-default;
-                border-radius: $radius-datepicker_range_input;
-                display: flex;
-                align-items: center;
-
-                .#{$prefix}-input-wrapper {
-                    background-color: transparent;
-                    border: none;
-                }
-
-                &-focus {
-                    border-color: $color-datepicker_range_input_inputWrapper-border-default;
-                    background-color: $color-datepicker_range_input_inputWrapper-bg-focus;
-                    border-radius: $radius-datepicker_range_input_inputWrapper;
-                    transition: $transition-datepicker_range_input;
-
-                    & ~ .#{$module}-range-input-clearbtn {
-                        display: flex;
-                    }
-    
-                    & ~ .#{$module}-range-input-clearbtn ~ .#{$module}-range-input-suffix {
-                        display: none;
-                    }
-                }
-
-                .#{$prefix}-input {
-                    padding: $spacing-datepicker_range_input_inputWrapper_input-paddingY $spacing-datepicker_range_input_inputWrapper_input-paddingX;
-                }
-
-                &-icon {
-                    flex-shrink: 0;
-                }
-
-                &:hover {
-                    background-color: $color-datepicker_range_input-bg-hover;
-                }
-
-                &-start {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                }
-
-                &-start-with-prefix {
-                    border-radius: 0;
-                }                
-
-                &-end {
-                    border-radius: 0;
-                }
-
-                &-active {
-                    border-color: $color-datepicker_range_input-border-active;
-                    background-color: $color-datepicker_range_input-bg-hover;
-                }
-            }
-
-            &-separator {
-                display: flex;
-                align-items: center;
-
-                &-active {
-                    color: $color-datepicker_range_input_separator-text-active;
-                }
-            }
-
-            &-small {
-                height: $height-datepicker_range_input-small;
-            }
-
-            &-large {
-                height: $height-datepicker_range_input-large;
-
-                .#{$prefix}-input-default {
-                    font-size: $font-datepicker_range_input_large-fontSize;
-                }
-            }
-
-            &:hover {
-                .#{$module}-range-input-clearbtn {
-                    display: flex;
-                    color: $color-datepicker_range_input_clearbtn-icon-hover;
-                    cursor: pointer;
-                }
-
-                .#{$module}-range-input-clearbtn ~ .#{$module}-range-input-suffix {
-                    display: none;
-                }
-            }
-
-            &-disabled {
-                cursor: not-allowed;
-                color: $color-datepicker_range_input_disabled-text-default;
-                background-color: $color-datepicker_range_input_disabled-bg-default;
-
-                .#{$module}-range-input-wrapper {
-                    &:hover {
-                        background-color: $color-datepicker_range_input_inputWrapper-bg-default;
-                    }
-                }
-                
-                &:hover {
-                    background-color: $color-datepicker_range_input_disabled-bg-hover;
-                }
-
-                .#{$module}-range-input-prefix,
-                .#{$module}-range-input-suffix,
-                .#{$module}-range-input-clearbtn {
-                    color: $color-datepicker_range_input_disabled-text-default;
-                }
-            }
-
-            &-warning {
-                background-color: $color-datepicker_range_input_warning-bg-default;
-
-                .#{$module}-range-input-wrapper {
-                    &:hover {
-                        background-color: $color-datepicker_range_input_warning-bg-hover;
-                    } 
-                    
-                    &-active {
-                        border-color: $color-datepicker_range_input_warning-border-active;
-                        background-color: $color-datepicker_range_input_warning-bg-active;
-                    }
-                }
-
-            }
-
-            &-error {
-                background-color: $color-datepicker_range_input_error-border-default;
-
-                .#{$module}-range-input-wrapper {
-                    &:hover {
-                        background-color: $color-datepicker_range_input_error-bg-hover;
-                    } 
-                    
-                    &-active {
-                        border-color: $color-datepicker_range_input_error-border-active;
-                        background-color: $color-datepicker_range_input_error-bg-active;
-                    }
-                }
-
-            }
-
-            .#{$module}-range-input-clearbtn {
-                display: none;
-            }
-
-            &-prefix,
-            &-suffix,
-            &-clearbtn {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-weight: $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight;
-                font-size: $font-datepicker_range_input_prefix_suffix_clearbtn-fontSize;
-                line-height: $font-datepicker_range_input_prefix_suffix_clearbtn-lineHeight;
-                white-space: nowrap;
-                color: $color-datepicker_range_input-text-default;
-            }
-
-            &-prefix {
-                padding-left: $spacing-datepicker_range_input_prefix-paddingLeft;
-                padding-right: $spacing-datepicker_range_input_prefix-paddingRight;
-            }
-
-            &-suffix {
-                padding-left: $spacing-datepicker_range_input_suffix-paddingLeft;
-                padding-right: $spacing-datepicker_range_input_suffix-paddingRight;
-                
-                &-hidden {
-                    display: none;
-                }
-            }
-
-            &-clearbtn {
-                padding-left: $spacing-datepicker_range_input_clearbtn-paddingLeft;
-                padding-right: $spacing-datepicker_range_input_clearbtn-paddingRight;
-            }
-        }
-    }
-}
-
-/*
-* 小尺寸 DatePicker
-*/
-.#{$module}-compact {
-    @include font-size-small;
-    line-height: $lineHeight-datepicker_compact;
-  
-    .#{$module}-month-grid {
-
-        &[x-type="dateTime"],
-        &[x-type="dateTimeRange"] {
-            .#{$module}-yam {
-                // 减去底部switch高度
-                height: calc(100% - #{$height-datepicker_switch_compact});
-            }
-        }
-    
-        &[x-type="dateRange"],
-        &[x-type="dateTimeRange"] {
-            .#{$module}-month-grid-left {
-                border-right: $width-datepicker-border solid $color-datepicker_border-bg-default;
-            }
-        }
-
-
-        .#{$module}-yam-showing {
-            min-height: $height-datepicker_tpk_compact + $height-datepicker_switch_compact;
-            min-width: $width-datepicker_panel_compact;
-        }
-
-        &[x-type='date'] .#{$module}-yam-showing {
-            min-height: $height-datepicker_yam_panel_compact;
-        }
-
-        .#{$module}-yearmonth-header {
-            box-sizing: border-box;
-            height: $height-datepicker_yam_panel_header_compact;
-            padding: $spacing-datepicker_yam_panel_header_compact-padding;
-        }
-
-        .#{$prefix}-scrolllist {
-            @include font-size-small;
-            line-height: $lineHeight-datepicker_compact;
-
-            &-header {
-                // 小尺寸空间较小，不显示scrolllist header
-                display: none;
-            }
-
-            &-list-outer {
-
-                & > ul > li {
-                    height: $height-datepicker_yam_li_compact;
-                }
-            }
-
-            &-item-wheel {
-                // 去除中间分割线
-                border-right: 0;
-
-                .#{$prefix}-scrolllist-selector {
-                    height: $height-datepicker_yam_li_compact;
-                }
-
-                .#{$prefix}-scrolllist-shade-pre {
-                    margin-top: $spacing-datepicker_scrolllist_shade_pre_compact-marginTop;
-                }
-
-                .#{$prefix}-scrolllist-shade-post {
-                    margin-top: $spacing-datepicker_scrolllist_shade_post_compact-marginTop;
-                }
-            }
-        }
-    }
-
-    // 年月选择器
-    &.#{$module}-panel-yam {
-        .#{$prefix}-scrolllist {
-            @include font-size-small;
-            line-height: $lineHeight-datepicker_compact;
-        }
-    }
-
-    .#{$module}-tpk {
-        height: calc(100% - #{$height-datepicker_switch_compact});
-    }
-
-    .#{$module}-navigation {
-        height: $width-datepicker_nav_compact;
-        padding: $spacing-datepicker_nav_compact-padding;
-        padding-bottom: 0;
-
-        &-left,
-        &-right {
-            width: $width-datepicker_nav_compact;
-            height: $width-datepicker_nav_compact;
-        }
-
-        .#{$prefix}-button {
-            min-width: $width-datepicker_nav_compact;
-            min-height: $width-datepicker_nav_compact;
-        }
-
-        &-month {
-            .#{$prefix}-button {
-                // 覆盖样式，否则会从button继承
-                @include font-size-small;
-                line-height: $lineHeight-datepicker_compact;
-            }
-        }
-    }
-
-    .#{$module}-month {
-        width: $width-datepicker_month_compact;
-        padding: 0;
-    }
-
-    .#{$module}-weeks {
-        padding: $spacing-datepicker_weeks_compact-padding;
-        padding-top: $spacing-datepicker_weeks_compact-paddingTop;
-    }
-
-    .#{$module}-weekday {
-        box-sizing: border-box;
-        height: $spacing-tight + $width-datepicker_day_compact;
-        padding-left: $spacing-datepicker_weekday_compact-paddingLeft;
-        padding-right: $spacing-datepicker_weekday_compact-paddingRight;
-        padding-bottom: $spacing-datepicker_weekday_compact-paddingBottom;
-        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
-
-        &-item {
-            width: $width-datepicker_day_compact;
-            height: $width-datepicker_day_compact;
-            // 保持垂直居中
-            line-height: $lineHeight-datepicker_weekday_item_compact;
-        }
-    }
-
-    .#{$module}-day {
-        width: $width-datepicker_day_compact;
-        height: $width-datepicker_day_compact;
-  
-        &-main {
-            width: $width-datepicker_day_main_compact;
-            height: $width-datepicker_day_main_compact;
-        }
-
-        &-inrange,
-        &-inhover,
-        &-inoffsetrange,
-        &-hoverday,
-        &-selectedrange-hover {
-            .#{$module}-day-main {
-                width: $width-datepicker_day_compact;
-            }
-        }
-
-        // one date is both start and end
-        &-selected-start.#{$module}-day-selected-end,
-        &-offsetrange-start.#{$module}-day-offsetrange-end {
-            .#{$module}-day-main {
-                border-radius: $width-datepicker_day_compact-borderRadius;
-            }
-        }
-
-        &-offsetrange-start {
-            .#{$module}-day-main {
-                border-radius: $width-datepicker_day_compact-borderRadius 0 0 $width-datepicker_day_compact-borderRadius;
-            }
-        }
-
-        &-offsetrange-end {
-            .#{$module}-day-main {
-                border-radius: 0 $width-datepicker_day_compact-borderRadius $width-datepicker_day_compact-borderRadius 0;
-            }
-        }
-
-        &-hoverday-beforerange {
-            .#{$module}-day-main {
-                border-radius: $width-datepicker_day_compact-borderRadius 0 0 $width-datepicker_day_compact-borderRadius;
-            }
-        }
-
-        &-hoverday-afterrange {
-            .#{$module}-day-main {
-                border-radius: 0 $width-datepicker_day_compact-borderRadius $width-datepicker_day_compact-borderRadius 0;
-            }
-        }
-
-        &-selected-start,
-        &-offsetrange-start {
-            .#{$module}-day-main {
-                width: $width-datepicker_day - $spacing-datepicker_day_compact-margin;
-                margin-left: $spacing-datepicker_day_compact-margin;
-                margin-right: 0;
-                border-radius: $width-datepicker_day_compact-borderRadius 0 0 $width-datepicker_day_compact-borderRadius;
-            }
-        }
-
-        &-selected-end,
-        &-offsetrange-end {
-            .#{$module}-day-main {
-                width: $width-datepicker_day - $spacing-datepicker_day_compact-margin;
-                margin-right: $spacing-datepicker_day_compact-margin;
-                margin-left: 0;
-                border-radius: 0 $width-datepicker_day_compact-borderRadius $width-datepicker_day_compact-borderRadius 0;
-            }
-        }
-    }
-
-    .#{$module}-switch {
-        box-sizing: border-box;
-        height: $height-datepicker_switch_compact;
-
-        &-date,
-        &-time {
-            padding-top: $spacing-datepicker_switch_compact-padding;
-            padding-bottom: $spacing-datepicker_switch_compact-padding;
-        }
-
-        &-date {
-            border-right: $width-datepicker-border solid $color-datepicker_border-bg-default;
-        }
-
-        &-text {
-            // 去掉icon后不需要pl
-            padding-left: 0;
-        }
-    }
-
-    .#{$module}-quick-control {
-        padding: $spacing-datepicker_compact-padding;
-
-        &-month,
-        &-date,
-        &-dateTime {
-            max-width: $width-datepicker_panel_compact;
-        }
-
-        &-dateRange,
-        &-dateTimeRange {
-            max-width: $width-datepicker_panel_compact * 2;
-        }
-    }
-
-    .#{$module}-footer {
-        padding-top: $spacing-datepicker_footer_compact-paddintTop;
-        padding-right: $spacing-datepicker_footer_compact-paddintRight;
-        padding-bottom: $spacing-datepicker_footer_compact-paddintBottom;
-    }
-}
-
-// 向上弹出时固定高度为6周 #1042
-.#{$prefix}-popover {
-
-    &-wrapper {
-
-        &[x-placement*="top"],
-        &[x-placement*="Top"] {
-            .#{$module} .#{$module}-weeks {
-                min-height: 6 * $width-datepicker_day;
-            }
-
-            .#{$module}-compact .#{$module}-weeks {
-                min-height: 6 * $width-datepicker_day_compact;
-            }
-        }
-        
-    }
-}
-
-@import "./rtl.scss";