acud/lib/popover/style/index.less

acg react 组件库

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

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

.@{popover-prefix-cls} {
    .reset-component();

    position: absolute;
    top: 0;
    left: 0;
    z-index: @zindex-popover;
    font-weight: normal;
    white-space: normal;
    text-align: left;
    cursor: auto;
    user-select: text;

    &::after {
        position: absolute;
        background: fade(@popover-bg, 1%);
        content: '';
    }

    &-hidden {
        display: none;
    }

    // Offset the popover to account for the popover arrow
    &-placement-top,
    &-placement-topLeft,
    &-placement-topRight {
        padding-bottom: @popover-distance;
    }

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

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

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

    &-inner {
        padding: @padding-m @popover-padding-horizontal;
        background-color: @popover-bg;
        background-clip: padding-box;
        border-radius: @popover-border-radius;
        box-shadow: @popover-box-shadow-base;
        box-shadow: ~'0 0 8px @{popover-shadow-color-inverse} \9';
        border-radius: @popover-border-radius-base;
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      /* IE10+ */
        &-inner {
            box-shadow: @popover-box-shadow-base;
        }
    }

    &-title {
        margin: 0; // reset heading margin
        padding-bottom: @padding-xsm;
        color: @popover-color;
        font-size: @popover-font-size-base;
        font-weight: @font-weight-500;
    }

    &-inner-content {
        color: @popover-content-color;
        font-size: @popover-font-size-base;
        .@{iconfont-css-prefix}-outlined-close {
            padding-left: @popover-close-padding;
            font-size: @popover-close-size;
            color: @popover-close-color;
        }
    }

    &-message {
        position: relative;
        padding: 4px 0 12px;
        color: @popover-color;
        font-size: @popover-font-size-base;
        > .@{iconfont-css-prefix} {
            position: absolute;
            top: (
              4px + ((@line-height-base * @font-size-base - @font-size-base) / 2)
            );
            color: @popover-warning-color;
            font-size: @popover-font-size-base;
        }
        &-title {
            padding-left: @popover-font-size-base + 8px;
        }
    }

    &-buttons {
        margin-bottom: @P;
        text-align: right;

        button {
            margin-left: 2 * @P;
        }
    }

    // Arrows

    &-arrow {
        position: absolute;
        display: block;
        width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
        height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
        background: transparent;
        border-style: solid;
        border-width: (sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2);
        transform: rotate(45deg);
    }

    &-placement-top > &-content > &-arrow,
    &-placement-topLeft > &-content > &-arrow,
    &-placement-topRight > &-content > &-arrow {
        bottom: @popover-distance - @popover-arrow-width + 2.2px;
        border-top-color: transparent;
        border-right-color: @popover-bg;
        border-bottom-color: @popover-bg;
        border-left-color: transparent;
        box-shadow: 3px 3px 7px fade(#000, 7%);
    }
    &-placement-top > &-content > &-arrow {
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
    &-placement-topLeft > &-content > &-arrow {
        left: 4 * @P;
    }
    &-placement-topRight > &-content > &-arrow {
        right: 4 * @P;
    }

    &-placement-right > &-content > &-arrow,
    &-placement-rightTop > &-content > &-arrow,
    &-placement-rightBottom > &-content > &-arrow {
        left: @popover-distance - @popover-arrow-width + 2px;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: @popover-bg;
        border-left-color: @popover-bg;
        box-shadow: -3px 3px 7px fade(#000, 7%);
    }
    &-placement-right > &-content > &-arrow {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    &-placement-rightTop > &-content > &-arrow {
        top: 3 * @P;
    }
    &-placement-rightBottom > &-content > &-arrow {
        bottom: 3 * @P;
    }


    &-placement-bottom > &-content > &-arrow,
    &-placement-bottomLeft > &-content > &-arrow,
    &-placement-bottomRight > &-content > &-arrow {
        top: @popover-distance - @popover-arrow-width + 2px;
        border-top-color: @popover-bg;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: @popover-bg;
        box-shadow: -2px -2px 5px fade(#000, 6%);
    }
    &-placement-bottom > &-content > &-arrow {
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
    &-placement-bottomLeft > &-content > &-arrow {
        left: 4 * @P;
    }
    &-placement-bottomRight > &-content > &-arrow {
        right: 4 * @P;
    }

    &-placement-left > &-content > &-arrow,
    &-placement-leftTop > &-content > &-arrow,
    &-placement-leftBottom > &-content > &-arrow {
        right: @popover-distance - @popover-arrow-width + 2px;
        border-top-color: @popover-bg;
        border-right-color: @popover-bg;
        border-bottom-color: transparent;
        border-left-color: transparent;
        box-shadow: 3px -3px 7px fade(#000, 7%);
    }
    &-placement-left > &-content > &-arrow {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    &-placement-leftTop > &-content > &-arrow {
        top: 3 * @P;
    }
    &-placement-leftBottom > &-content > &-arrow {
        bottom: 3 * @P;
    }
}

@import './rtl';