yyzone/src/assets/styles/components/time-picker.less

yyzone vue components and utils

@prefixTimePickerCls: ~"@{yy-css-prefix}time-picker";
@yy-time-picker-cells-width-base: 56px;
@yy-time-picker-cells-width-with-date-base: 72px;
@yy-time-picker-cells-width: @yy-time-picker-cells-width-base * 2;
@yy-time-picker-cells-width-with-seconds: @yy-time-picker-cells-width-base *3;
@yy-time-picker-cells-width-with-date: @yy-time-picker-cells-width-with-date-base * 2;
@yy-time-picker-cells-width-with-date-with-seconds: @yy-time-picker-cells-width-with-date-base * 3;

.@{prefixTimePickerCls} {
    &-cells {
        min-width: @yy-time-picker-cells-width;

        &-with-seconds {
            min-width: @yy-time-picker-cells-width-with-seconds;
        }

        &-list {
            width: @yy-time-picker-cells-width-base;
            height: 240px;
            float: left;
            overflow: hidden;
            border-left: 1px solid @yy-border-color-base;
            position: relative;

            &:hover {
                overflow-y: auto;
            }

            &:first-child {
                border-left: none;
                border-radius: @yy-btn-border-radius 0 0 @yy-btn-border-radius;
            }

            &:last-child {
                border-radius: 0 @yy-btn-border-radius @yy-btn-border-radius 0;
            }

            ul {
                width: 100%;
                margin: 0;
                padding: 0 0 120px 0;
                list-style: none;

                li {
                    width: 100%;
                    height: 24px;
                    line-height: 24px;
                    margin: 0;
                    box-sizing: content-box;
                    text-align: center;
                    user-select: none;
                    cursor: pointer;
                    list-style: none;
                    transition: background @yy-transition-time @yy-ease-in-out;

                }
            }
        }

        &-cell {
            &:hover {
                background: @yy-background-color-hover;
            }

            &-disabled {
                color: @yy-btn-disable-color;
                .cursor(not-allowed);

                &:hover {
                    color: @yy-btn-disable-color;
                    background-color: @yy-background-component;
                    .cursor(not-allowed);
                }
            }

            &-selected,
            &-selected:hover {
                color: @yy-primary-color;
                background: fade(@yy-primary-color, 10%);
            }

            &-focused {
                background-color: tint(@yy-primary-color, 80%);
            }
        }
    }

    &-header {
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-bottom: 1px solid @yy-border-color-base;
    }

    &-with-range {
        .@{prefixPickerCls}-panel {
            &-body {
                min-width: @yy-time-picker-cells-width * 2 + 4px;
            }

            &-content {
                float: left;
                position: relative;

                &:after {
                    content: '';
                    display: block;
                    width: 2px;
                    position: absolute;
                    top: 32px;
                    bottom: 0;
                    right: -2px;
                    background: @yy-border-color-base;
                    z-index: 1;
                }

                &-right {
                    float: right;

                    &:after {
                        right: auto;
                        left: -2px;
                    }
                }
            }
        }

        .@{prefixTimePickerCls}-cells {
            &-list {
                &:first-child {
                    border-radius: 0;
                }

                &:last-child {
                    border-radius: 0;
                }
            }
        }
    }

    &-with-range&-with-seconds {
        .@{prefixPickerCls}-panel {
            &-body {
                min-width: @yy-time-picker-cells-width-with-seconds * 2 + 4px;
            }
        }
    }
}

.@{prefixPickerCls}-panel-content {
    .@{prefixPickerCls}-panel-content {
        .@{prefixTimePickerCls} {
            &-cells {
                min-width: @yy-time-picker-cells-width-with-date-with-seconds;

                &-with-seconds {
                    min-width: @yy-time-picker-cells-width-with-date-with-seconds;

                    .@{prefixTimePickerCls}-cells-list {
                        width: @yy-time-picker-cells-width-with-date-with-seconds / 3;
                    }
                }

                &-list {
                    width: @yy-time-picker-cells-width-with-date-with-seconds / 2;
                    height: 240px;

                    &:first-child {
                        border-radius: 0;
                    }

                    &:last-child {
                        border-radius: 0;
                    }

                    ul {
                        padding: 0 0 192px 0;
                    }
                }
            }
        }
    }
}