acud/es/time-picker/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@picker-prefix-cls: ~'@{acud-prefix}-picker';
@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';
@picker-time-panel-wrap: ~'@{acud-prefix}-time-panel-wrap';
@picker-input-wrap-wrap: ~'@{acud-prefix}-time-input-wrap';

.@{picker-time-panel-wrap} {
    .@{picker-prefix-cls} {
        &-panel {
            display: inline-flex;
            flex-direction: column;
            text-align: center;
            border-radius: @border-radius-base;
            outline: none;

            &-header {
                height: @picker-time-panel-header-height;
                padding: @picker-time-panel-default-padding;
                background-color: @G10;
                font-size: @T2;
                line-height: @picker-time-panel-header-height;
                color: @G2;

                > li {
                    margin-right: @margin-lg;
                    display: inline-block;
                    cursor: pointer;
                }
            }
        }

        &-time-panel {
            display: flex;
            flex-direction: column;
            width: @date-picker-panel-width;
        }
        // ======================= Header =======================
        &-header {
            display: flex;
            padding: 0 3 * @P;
            .basic-tp-config(@date-picker-date-tp);
            border-bottom: 1px solid @G8;

            >* {
                flex: none;
            }

            button {
                padding: 0;
                color: @G6;
                background: transparent;
                border: 0;
                cursor: pointer;
                transition: color @animation-duration-slow;
            }

            >button {
                min-width: @P*2;
                font-size: @date-picker-base-font-size;
            }

            &-super-prev-btn,
            &-next-btn {
                margin-right: @margin-xs;
            }

            &-view {
                flex: auto;
                font-size: 12px;
                line-height: @P*10;
                .basic-tp-config(@date-picker-date-tp);

                button {
                    color: inherit;
                    font-weight: inherit;

                    &:not(:first-child) {
                        margin-left: @margin-xs;
                    }
                }
            }
        }
        // ======================== Body ========================
        &-content {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            padding-bottom: @picker-time-content-padding;

            >div {
                width: @P*8;
                margin-right: @P*4;
                height: @P*6 + 2;
                overflow: visible;

                &::after {
                    content: ':';
                    display: block;
                    position: relative;
                    top: -@P*7;
                    left: @P*6;
                }

                input {
                    width: 100%;
                    outline-style: none;
                    line-height: @P*6;
                    text-align: center;
                    height: @P*6;
                    box-sizing: border-box;
                    border: 1px solid;
                    .basic-p-config(@time-picker-default-p);
                }

                &:last-child {
                    &::after {
                        display: none;
                    }
                }
            }

            th,
            td {
                position: relative;
                font-weight: 400;
                font-size: @picker-time-font-sise;
            }

            td {
                .basic-p-config(@date-picker-date-p);
            }
        }

        &-cell {
            cursor: pointer;
            .property-setting(@date-picker-date-tp, 'disabled', color);

            // In view
            &-in-view {
                .property-setting(@date-picker-date-tp, 'default', color);
            }

            // Disabled
            &-disabled {
                cursor: not-allowed;
            }
        }

        &-quarter-panel {
            .@{picker-prefix-cls}-content {
                height: 56px;
            }
        }

        // ======================== Footer ========================
        &-footer {
            width: min-content;
            min-width: 100%;
            text-align: center;
            border-top: 1px solid @picker-time-border-color;
            border-bottom: @border-width-base @border-style-base transparent;

            .@{picker-prefix-cls}-panel & {
                border-top: @border-width-base @border-style-base @picker-time-border-color;
            }

            &-extra {
                padding: 0 @padding-sm;
                line-height: @picker-text-height - 2 * @border-width-base;
                text-align: left;

                &:not(:last-child) {
                    border-bottom: @border-width-base @border-style-base @picker-time-border-color;
                }
            }
        }

        &-now {
            margin-top: 0;
            line-height: 14*@P;
            text-align: left;
            color: @picker-time-active-color;
            cursor: pointer;
        }
        // ===================== Decade Panel =====================
        &-decade-panel {
            .@{picker-cell-inner-cls} {
                padding: 0 (@padding-xs / 2);
            }

            .@{picker-prefix-cls}-cell::before {
                display: none;
            }
        }
        // ====================== Time Panel ======================
        &-time-panel {
            width: auto;
            min-width: auto;

            .@{picker-prefix-cls}-content {
                display: flex;
                flex: auto;
                height: @picker-time-panel-content-height;
            }

            &-column {
                flex: 1 0 auto;
                width: @picker-time-panel-column-width;
                margin: 0;
                padding: 0;
                overflow-y: hidden;
                text-align: left;
                list-style: none;
                transition: background @animation-duration-slow;

                &::after {
                    display: block;
                    height: @picker-time-panel-content-height - @picker-time-panel-cell-height;
                    content: '';
                    .@{picker-prefix-cls}-datetime-panel & {
                        height:
                            @picker-time-panel-content-height - @picker-time-panel-cell-height + 2 *
                            @border-width-base;
                    }
                }

                &:not(:first-child) {
                    box-sizing: content-box;
                    border-left: @border-width-base solid @picker-time-border-color;
                }

                // &-active {
                //     background: fade(@calendar-item-active-bg, 20%);
                // }

                &:hover {
                    overflow-y: auto;
                    overflow-y: overlay;
                }

                > li {
                    margin: 0;
                    padding: 0;

                    &.@{picker-prefix-cls}-time-panel-cell {
                        .@{picker-prefix-cls}-time-panel-cell-inner {
                            display: block;
                            width: 100%;
                            height: @picker-time-panel-cell-height;
                            margin: 0;
                            color: @text-color;
                            font-size: @picker-time-font-sise;
                            line-height: @picker-time-panel-cell-height;
                            text-align: center;
                            border-radius: 0;
                            cursor: pointer;
                            transition: background @animation-duration-slow;

                            &:hover {
                                .property-setting(@time-panel-default-p, 'hover', background-color);
                            }
                        }

                        &-selected {
                            .@{picker-prefix-cls}-time-panel-cell-inner {
                                .property-setting(@time-panel-default-p, 'click', background-color);
                            }
                        }

                        &-disabled {
                            .@{picker-prefix-cls}-time-panel-cell-inner {
                                color: @disabled-color;
                                background: transparent;
                                cursor: not-allowed;

                                &:hover {
                                    background: transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
        // 底部按钮
        &-ranges{
            padding-bottom: 0;
            .@{picker-prefix-cls}-ok{
                margin-top: 3*@P;
                margin-bottom: 3*@P;
                .@{acud-prefix}-btn{
                    height: 8*@P;
                    padding: 0 3*@P;
                    border-radius: @R3;
                }
            }
        }

        // 圆角
        &-panel-container {
            border-radius: @R4;
        }

        // Active bar
        .@{picker-prefix-cls}-active-bar {
            bottom: -@border-width-base;
            height: 2px;
            margin-left: @margin-xs;
            background: @picker-time-active-color;
            opacity: 0;
            transition: all @animation-duration-slow ease-out;
            pointer-events: none;
        }

        &.@{picker-prefix-cls}-focused {
            .property-setting(@time-picker-default-p, 'click', border-color);

            .@{picker-prefix-cls}-active-bar {
                opacity: 1;
            }
        }

        // ======================== Input =========================
        &-input {
            >input {
                .basic-tp-config(@time-picker-default-tp);

                &::-webkit-input-placeholder {
                    .basic-tp-config(@time-picker-placeholder-tp);
                }
            
                &:-moz-placeholder {
                    .basic-tp-config(@time-picker-placeholder-tp);
                }
            
                &::-moz-placeholder {
                    .basic-tp-config(@time-picker-placeholder-tp);
                }
            
                &:-ms-input-placeholder {
                    .basic-tp-config(@time-picker-placeholder-tp);
                }
            }
        }

        // 分隔符
        &-separator,
        &-range-separator  {
            .basic-tp-config(@time-picker-placeholder-tp);

            .@{picker-prefix-cls}-range-has-value &, 
            .@{picker-prefix-cls}-focused &,
            .@{picker-prefix-cls}-disabled &{
                .basic-tp-config(@time-picker-placeholder-tp);
            }
        }

        // 图标
        .@{picker-prefix-cls}-suffix{
            .basic-tp-config(@time-picker-suffix-tp);
        }
        &.@{picker-prefix-cls}-disabled {
            .@{picker-prefix-cls}-suffix{
                .property-setting(@time-picker-suffix-tp, 'disabled', color);
            }
        }

        .@{picker-prefix-cls}-input-has-value,
        .@{picker-prefix-cls}-range-has-value,
        .@{picker-prefix-cls}-focused,
        &.@{picker-prefix-cls}-input-has-value,
        &.@{picker-prefix-cls}-range-has-value,
        &.@{picker-prefix-cls}-focused{
            .@{picker-prefix-cls}-clear{
                path {
                    fill: @time-picker-clear-color;
                }
            }

            &,
            .@{picker-prefix-cls}-input{
                 & > input[disabled] {
                    color: @G4;
                }
            }
        }
    }
}

.@{picker-input-wrap-wrap}{
    display: inline-block;
}