acud/es/tooltip/style/index.less

acg react 组件库

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

@tooltip-prefix-cls: ~'@{acud-prefix}-tooltip';

@tooltip-arrow-shadow-width: 3px;
// Tooltip max width
@tooltip-max-width: 220px;
// Tooltip text color
@tooltip-color: @G2;
// Tooltip font size
@tooltip-font-size: @T2;
// Tooltip background color
@tooltip-bg: @G11;
// Tooltip arrow width
@tooltip-arrow-width: 2 * @P;
// Tooltip distance with trigger
@tooltip-distance: 2 * @P;
// Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;

@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) + @tooltip-arrow-shadow-width * 2;

@tooltip-arrow-offset-vertical: 5px;
@tooltip-arrow-offset-horizontal: 13px;

@zindex-tooltip: 1070;

@tooltip-border-radius-base: @R3;

// Base class
.@{tooltip-prefix-cls} {
    .reset-component();

    position: absolute;
    z-index: @zindex-tooltip;
    display: block;
    width: max-content;
    max-width: @tooltip-max-width;
    visibility: visible;

    &-hidden {
        display: none;
    }

    &-placement-top,
    &-placement-topLeft,
    &-placement-topRight {
        padding-bottom: @tooltip-distance;
    }

    &-placement-right,
    &-placement-rightTop,
    &-placement-rightBottom {
        padding-left: @tooltip-distance;
    }

    &-placement-bottom,
    &-placement-bottomLeft,
    &-placement-bottomRight {
        padding-top: @tooltip-distance;
    }

    &-placement-left,
    &-placement-leftTop,
    &-placement-leftBottom {
        padding-right: @tooltip-distance;
    }

    // Wrapper for the tooltip content
    &-inner {
        min-width: 9 * @P;
        min-height: 9 * @P;
        line-height: 5 * @P;
        padding: 2 * @P;
        color: @tooltip-color;
        text-align: left;
        text-decoration: none;
        word-wrap: break-word;
        font-size: @tooltip-font-size;
        background-color: @tooltip-bg;
        border-radius: @tooltip-border-radius-base;
        box-shadow: @shadow-1;

        .title {
            color: @G2;
            font-size: @tooltip-font-size;
            font-weight: @font-weight-500;
            margin: @P 0 @P;
        }
        .description {
            color: @G4;
            font-size: @tooltip-font-size;
            margin-bottom: @P;
        }
    }

    // Arrows
    &-arrow {
        position: absolute;
        display: block;
        width: @tooltip-arrow-rotate-width;
        height: @tooltip-arrow-rotate-width;
        overflow: hidden;
        background: transparent;
        pointer-events: none;

        &-content {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            width: @tooltip-arrow-width;
            height: @tooltip-arrow-width;
            margin: auto;
            background-color: @tooltip-bg;
            content: '';
            pointer-events: auto;
        }
    }

    &-placement-top &-arrow,
    &-placement-topLeft &-arrow,
    &-placement-topRight &-arrow {
        bottom: @tooltip-distance - @tooltip-arrow-rotate-width;

        &-content {
            box-shadow: @shadow-1;
            transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
        }
    }

    &-placement-top &-arrow {
        left: 50%;
        transform: translateX(-50%);
    }

    &-placement-topLeft &-arrow {
        left: @tooltip-arrow-offset-horizontal;
    }

    &-placement-topRight &-arrow {
        right: @tooltip-arrow-offset-horizontal;
    }

    &-placement-right &-arrow,
    &-placement-rightTop &-arrow,
    &-placement-rightBottom &-arrow {
        left: @tooltip-distance - @tooltip-arrow-rotate-width;

        &-content {
            box-shadow: @shadow-1;
            transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
        }
    }

    &-placement-right &-arrow {
        top: 50%;
        transform: translateY(-50%);
    }

    &-placement-rightTop &-arrow {
        top: @tooltip-arrow-offset-vertical;
    }

    &-placement-rightBottom &-arrow {
        bottom: @tooltip-arrow-offset-vertical;
    }

    &-placement-left &-arrow,
    &-placement-leftTop &-arrow,
    &-placement-leftBottom &-arrow {
        right: @tooltip-distance - @tooltip-arrow-rotate-width;

        &-content {
            box-shadow: @shadow-1;
            transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
        }
    }

    &-placement-left &-arrow {
        top: 50%;
        transform: translateY(-50%);
    }

    &-placement-leftTop &-arrow {
        top: @tooltip-arrow-offset-vertical;
    }

    &-placement-leftBottom &-arrow {
        bottom: @tooltip-arrow-offset-vertical;
    }

    &-placement-bottom &-arrow,
    &-placement-bottomLeft &-arrow,
    &-placement-bottomRight &-arrow {
        top: @tooltip-distance - @tooltip-arrow-rotate-width;

        &-content {
            box-shadow: @shadow-1;
            transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
        }
    }

    &-placement-bottom &-arrow {
        left: 50%;
        transform: translateX(-50%);
    }

    &-placement-bottomLeft &-arrow {
        left: @tooltip-arrow-offset-horizontal;
    }

    &-placement-bottomRight &-arrow {
        right: @tooltip-arrow-offset-horizontal;
    }

    &-black {
        .@{tooltip-prefix-cls}-inner {
            color: @G11;
            background-color: @G2;
        }
        .@{tooltip-prefix-cls}-arrow {
            &-content {
                background-color: @G2;
            }
        }
    }
}

@import './rtl';