fes.js/packages/fes-template-h5/src/styles/mixins/hairline.less

@import "../theme";

.scale-hairline-common(@color, @top, @right, @bottom, @left) {
    content: '';
    position: absolute;
    background-color: @color;
    display: block;
    z-index: 1;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}

.hairline(@direction, @color: @border-color-base) when (@direction ='top') {
    border-top: 1PX solid @color;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            border-top: none;
            position: relative;

            &::before {
                .scale-hairline-common(@color, 0, auto, auto, 0);
                width: 100%;
                height: 1PX;
                transform-origin: 50% 50%;
                transform: scaleY(0.5);

                @media (min-resolution: 3dppx) {
                    transform: scaleY(0.33);
                }
            }
        }
    }
}

.hairline(@direction, @color: @border-color-base) when (@direction ='right') {
    border-right: 1PX solid @color;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            border-right: none;
            position: relative;

            &::after {
                .scale-hairline-common(@color, 0, 0, auto, auto);
                width: 1PX;
                height: 100%;
                background: @color;
                transform-origin: 100% 50%;
                transform: scaleX(0.5);

                @media (min-resolution: 3dppx) {
                    transform: scaleX(0.33);
                }
            }
        }
    }
}

.hairline(@direction, @color: @border-color-base) when (@direction ='bottom') {
    border-bottom: 1PX solid @color;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            border-bottom: none;
            position: relative;

            &::after {
                .scale-hairline-common(@color, auto, auto, 0, 0);
                width: 100%;
                height: 1PX;
                transform-origin: 50% 100%;
                transform: scaleY(0.5);

                @media (min-resolution: 3dppx) {
                    transform: scaleY(0.33);
                }
            }
        }
    }
}

.hairline(@direction, @color: @border-color-base) when (@direction ='left') {
    border-left: 1PX solid @color;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            border-left: none;
            position: relative;

            &::before {
                .scale-hairline-common(@color, 0, auto, auto, 0);
                width: 1PX;
                height: 100%;
                transform-origin: 100% 50%;
                transform: scaleX(0.5);

                @media (min-resolution: 3dppx) {
                    transform: scaleX(0.33);
                }
            }
        }
    }
}

.hairline(@direction, @color: @border-color-base, @radius: 0) when (@direction ='all') {
    border: 1PX solid @color;
    border-radius: @radius;

    html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
            position: relative;
            border: none;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 200%;
                height: 200%;
                border: 1PX solid @color;
                border-radius: @radius * 2;
                transform-origin: 0 0;
                transform: scale(0.5);
                box-sizing: border-box;
                pointer-events: none;
            }
        }
    }
}

.hairline-remove(@position) when (@position ='left') {
    border-left: 0;

    &:before {
        display: none !important;
    }
}

.hairline-remove(@position) when (@position ='right') {
    border-right: 0;

    &:after {
        display: none !important;
    }
}

.hairline-remove(@position) when (@position ='top') {
    border-top: 0;

    &:before {
        display: none !important;
    }
}

.hairline-remove(@position) when (@position ='bottom') {
    border-bottom: 0;

    &:after {
        display: none !important;
    }
}

.hairline-remove(@position) when (@position ='all') {
    border: 0;

    &:before {
        display: none !important;
    }
}