lu2/theme/edge/css/common/ui/Tips.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 *
 * @Tips.css
 * @author xinxuzhang
 * @create 15-06-25
 *
**/

:root {
    --ui-tips-triangle-size: 6px; /* 底为 6*2，高为 6 */
    --ui-tips-bg: #373c42;
    --ui-tips-error-bg: linear-gradient(90deg, #ff8da2, #ec5b60);
    --ui-tips-offset: 6px;
}

.ui-tips[data-title],
[is-tips="css"][data-title] {
    text-indent: 0;
    position: relative;
    overflow: visible;
}

.ui-tips[data-title]::before,
.ui-tips[data-title]::after,
[is-tips="css"][data-title]::before,
[is-tips="css"][data-title]::after {
    position: absolute;
    left: 50%;
    -ms-pointer-events: none;
    pointer-events: none;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
    content: attr(data-title);
    bottom: calc(100% + var(--ui-tips-offset));
    max-width: 250px;
    /* 四边都预留出三角形的位置 */
    padding: calc(6px + var(--ui-tips-triangle-size)) calc(10px + var(--ui-tips-triangle-size));

    line-height: 18px;
    background: var(--ui-tips-bg);
    text-align: left;
    color: var(--ui-white, #ffffff);
    font-size: calc(var(--ui-font, 14px) - 2px);
    font-style: normal;
    white-space: nowrap;
}

.ui-tips[data-title]::before,
[is-tips="css"][data-title]::before {
    /* 切割出框体，带 border-radius */
    clip-path: inset(
        var(--ui-tips-triangle-size)
        var(--ui-tips-triangle-size)
        var(--ui-tips-triangle-size)
        var(--ui-tips-triangle-size)
        round calc(var(--ui-radius, 4px) - 1px));
}

.ui-tips[data-title]::after,
[is-tips="css"][data-title]::after {
    /* 默认是在框体下方居中位置，多 1 像素避免缝隙 */
    clip-path: polygon(
        calc(50% - var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
        calc(50% + var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
        50% 100%
    );
}

.ui-tips[data-title]:hover::before,
.ui-tips[data-title]:hover::after,
.ui-tips[data-title]:focus::before,
.ui-tips[data-title]:focus::after,
[is-tips="css"][data-title]:hover::before,
[is-tips="css"][data-title]:hover::after,
[is-tips="css"][data-title]:focus::before,
[is-tips="css"][data-title]:focus::after {
    transition: visibility var(--ui-animate-time, .2s) var(--ui-animate-time, .2s);
    visibility: visible;
}

.ui-tips[data-title]:hover,
[is-tips="css"][data-title]:hover {
    outline: none;
}

/* 朝下的情况 */
.reverse.ui-tips[data-title]::before,
.reverse.ui-tips[data-title]::after,
.reverse[is-tips="css"][data-title]::before,
.reverse[is-tips="css"][data-title]::after {
    bottom: auto;
    top: calc(100% + var(--ui-tips-offset));
}

.reverse.ui-tips[data-title]::after,
.reverse[is-tips="css"][data-title]::after {
    clip-path: polygon(
        calc(50% - var(--ui-tips-triangle-size)) calc(0% + var(--ui-tips-triangle-size) + 1px),
        calc(50% + var(--ui-tips-triangle-size)) calc(0% + var(--ui-tips-triangle-size) + 1px),
        50% 0%
    );
}

/* JS生成的，和CSS定位样式不合并，保持独立 */
.ui-tips-x {
    position: absolute;
    width: fit-content;
    z-index: 99;
    margin-top: calc(var(--ui-tips-offset) * -1);
    max-width: 20em;
    padding: calc(6px + var(--ui-tips-triangle-size)) calc(10px + var(--ui-tips-triangle-size));
    line-height: 18px;
    color: var(--ui-white, #fff);
    font-size: calc(var(--ui-font, 14px) - 2px);
    font-style: normal;
    text-align: left;
    /* 12px是整体偏移，6px是预留剪裁的间距 */
    --ui-tips-triangle-offset-x: calc(calc(var(--ui-width, 20) * .5px) + 12px - 6px);
}
.ui-tips-x::before,
.ui-tips-x::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--ui-tips-bg);
}
.ui-tips-x::before {
    z-index:-1;
    clip-path: inset(
        var(--ui-tips-triangle-size)
        var(--ui-tips-triangle-size)
        var(--ui-tips-triangle-size)
        var(--ui-tips-triangle-size)
        round calc(var(--ui-radius, 4px) - 1px));
}
.ui-tips-x::after {
    clip-path: polygon(
        calc(50% - var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
        calc(50% + var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
        50% 100%
    );}



@media (any-hover: none) {
    html {
        --hoverNone: 'true';
    }
}

/* 悬浮在左右侧的，限定最大宽度 */
.ui-tips-x[data-align="8-6"],
.ui-tips-x[data-align="6-8"] {
    max-width: 600px;
}

/* 悬浮在目标正下方，箭头在框体 50% 0 位置 */
.ui-tips-x[data-align="7-5"] {
    margin-top: var(--ui-tips-offset);
}

.ui-tips-x[data-align="7-5"]::after {
    clip-path: polygon(
            calc(50% - var(--ui-tips-triangle-size)) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
            calc(50% + var(--ui-tips-triangle-size)) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
            50% 0%
    );
}

/* 悬浮在目标左上，箭头在框体 100% - 16px, 100% 位置 */
.ui-tips-x[data-align="2-3"] {
    margin-left: 12px;
    margin-top: calc(var(--ui-tips-offset) * -1);
}

/* 三角的位置 */
.ui-tips-x[data-align="2-3"]::after {
    clip-path: polygon(
            calc(100% - var(--ui-tips-triangle-offset-x)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            calc(100% - (var(--ui-tips-triangle-offset-x) + var(--ui-tips-triangle-size)*2)) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
            calc(100% - (var(--ui-tips-triangle-offset-x) + var(--ui-tips-triangle-size))) 100%
    );
}

/* 悬浮在目标右上，箭头在框体 16px, 100% 位置 */
.ui-tips-x[data-align="1-4"] {
    margin-left: -12px;
    margin-top: calc(var(--ui-tips-offset) * -1);
}
.ui-tips-x[data-align="1-4"]::after {
    clip-path: polygon(
        var(--ui-tips-triangle-offset-x) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
        calc(var(--ui-tips-triangle-offset-x) + var(--ui-tips-triangle-size)*2) calc(100% - (var(--ui-tips-triangle-size) + 1px)),
        calc(var(--ui-tips-triangle-offset-x) + var(--ui-tips-triangle-size)) 100%
    );
}

/* 悬浮在目标左侧，箭头在框体 100%, 50% 位置 */
.ui-tips-x[data-align="8-6"] {
    margin-left: calc(var(--ui-tips-offset) * -1);
    margin-top: 0;
}

.ui-tips-x[data-align="8-6"]::after {
    clip-path: polygon(
        calc(100% - (var(--ui-tips-triangle-size) + 1px)) calc(50% - var(--ui-tips-triangle-size)),
        calc(100% - (var(--ui-tips-triangle-size) + 1px)) calc(50% + var(--ui-tips-triangle-size)),
        100% 50%
    );
}
/* 悬浮在目标右侧，箭头在框体 0%, 50% 位置 */
.ui-tips-x[data-align="6-8"] {
    margin-left: var(--ui-tips-offset);
    margin-top: 0;
}

.ui-tips-x[data-align="6-8"]::after {
    clip-path: polygon(
        calc(0% + (var(--ui-tips-triangle-size) + 1px)) calc(50% - var(--ui-tips-triangle-size)),
        calc(0% + (var(--ui-tips-triangle-size) + 1px)) calc(50% + var(--ui-tips-triangle-size)),
        0% 50%
    );
}

/* 悬浮在目标左下侧，箭头在框体 100% - 16px, 0% 位置 */
.ui-tips-x[data-align="3-2"] {
    margin-left: 12px;
    margin-top: var(--ui-tips-offset);
}

.ui-tips-x[data-align="3-2"]::after {
    clip-path: polygon(
        calc(100% - var(--ui-tips-triangle-offset-x)) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
        calc(100% - (var(--ui-tips-triangle-offset-x) + var(--ui-tips-triangle-size)*2)) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
        calc(100% - (var(--ui-tips-triangle-offset-x) + var(--ui-tips-triangle-size))) 0%
    );
}

/* 悬浮在目标右下侧，箭头在框体 16px, 0% 位置*/
.ui-tips-x[data-align="4-1"] {
    margin-left: -12px;
    margin-top: var(--ui-tips-offset);
}

.ui-tips-x[data-align="4-1"]::after {
    clip-path: polygon(
        16px calc(0% + (var(--ui-tips-triangle-size) + 1px)),
        calc(16px + var(--ui-tips-triangle-size)*2) calc(0% + (var(--ui-tips-triangle-size) + 1px)),
        calc(16px + var(--ui-tips-triangle-size)) 0%
    );
}


/* 错误提示的tips效果 */
.ui-tips-error:not(.none) {
    animation: fadeIn var(--ui-animate-time, .2s), fallDown var(--ui-animate-time, .2s);
}

.ui-tips-error.ui-tips-x::before,
.ui-tips-error.ui-tips-x::after {
    background: var(--ui-tips-error-bg);
}