unique-interface/theme/function.less

无UI组件库

/*
 * common functions
 */

@import "variable.less";

// clearfix
.clearfix() {
    &:before, &:after{
        content: "\200B";
        display: block;
        height: 0;
        clear: both;
    }
}

// shapes
.shape-section() {
    background-color: @shape-section-bg-color;
    box-shadow: @shape-section-box-shadow;
}
// ui-text
.shape-text(@height, @reset) {
    max-height: @height;
    margin-top: @reset;
    margin-bottom: @reset;
    .ui-text-left-bar, .ui-text-right-bar {
        height: @height;
    }
    .ui-text-content-movement {
        margin-top: -@height;
    }
}
// dropdown
.shape-dropdown-menu(){
    position: absolute;
    z-index: 1;
    &.is-have-arrow {
        &::before, &::after {
            content: '';
            border-style: solid;
            border-color: transparent;
            position: absolute;
        }
    }
    // bottom top right left
    .shape-dropdown-menu-direction(bottom, top, @shape-dropdown-arrow-height, @shape-dropdown-arrow-width);
    .shape-dropdown-menu-direction(top, bottom, @shape-dropdown-arrow-height, @shape-dropdown-arrow-width);
    .shape-dropdown-menu-direction(right, left, @shape-dropdown-arrow-width, @shape-dropdown-arrow-height);
    .shape-dropdown-menu-direction(left, right, @shape-dropdown-arrow-width, @shape-dropdown-arrow-height);
    // justify center start end
    &.is-direction-bottom, &.is-direction-top {
        &.is-justify-justify {
            left: 0;
            width: 100%;
        }
        &.is-justify-center {
            left: 50%;
            transform: translateX(-50%);
            margin-right: -50%;
        }
        &.is-justify-justify, &.is-justify-center {
            .shape-dropdown-arrow-center(left);
        }
        &.is-justify-start {
            left: 0;
            .shape-dropdown-arrow-edge(left);
        }
        &.is-justify-end {
            right: 0;
            .shape-dropdown-arrow-edge(right);
        }
    }
    &.is-direction-right, &.is-direction-left {
        &.is-justify-justify {
            top: 0;
            height: 100%;
        }
        &.is-justify-center {
            top: 50%;
            transform: translateY(-50%);
        }
        &.is-justify-justify, &.is-justify-center {
            .shape-dropdown-arrow-center(top);
        }
        &.is-justify-start {
            top: 0;
            .shape-dropdown-arrow-edge(top);
        }
        &.is-justify-end {
            bottom: 0;
            .shape-dropdown-arrow-edge(bottom);
        }
    }
}
.shape-dropdown-menu-direction(@direction, @anti-direction, @arrow-height, @arrow-width) {
    &.is-direction-@{direction} {
        @{anti-direction}: 100%;
        &.is-have-arrow {
            padding-@{anti-direction}: @shape-dropdown-arrow-height * 2;
            &::before, &::after {
                border-width: @arrow-height @arrow-width;
            }
            &::before {
                border-@{direction}-color: @color-border-regular;
                @{anti-direction}: 0;
            }
            &::after {
                border-@{direction}-color: @shape-section-bg-color;
                @{anti-direction}: @border-width-base;
            }
        }
    }
}
.shape-dropdown-arrow-center(@direction) {
    &.is-have-arrow {
        &::before, &::after {
            @{direction}: calc(~"50% - "@shape-dropdown-arrow-width);
        }
    }
}
.shape-dropdown-arrow-edge(@direction) {
    &.is-have-arrow {
        &::before, &::after {
            @{direction}: @shape-dropdown-item-inner-horizontal;
        }
    }
}
.shape-dropdown-menu-panel(){
    .shape-section();
    border: @border-base;
    border-radius: @border-radius-base;
    max-height: @shape-dropdown-menu-height;
    // TODO scroll 兼容
    overflow: auto;
}