@chief-editor/ui/css/components/Popover/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";
@import "./wrapper.less";

@arrowBoxShadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.08);

.@{prefixCls}-popper-trigger {
    display: inline-block;
    flex: auto;
}

.@{prefixCls}-popover {
    border-radius: @border-radius;
    box-shadow: @box-shadow-md;
    box-sizing: border-box;
    background-color: @color-neutral1;
    font-size: 0;

    &-inner {
        z-index: 2;
        border-radius: @border-radius-base;
        overflow: hidden;
        font-size: 12px;
        color: @color-text-grey1;
    }

    &-arrow {
        display: block;
        z-index: 1;
        .transition();

        .@{prefixCls}-popover-arrow-inner {
            .size(0);
            font-size: 0;
            border-width: 4px;
            line-height: 0;
            border-style: solid;
            display: block;
        }

        &-dir-top {
            transform: translateY(50%);

            .@{prefixCls}-popover-arrow-inner {
                border-color: transparent @color-neutral1 @color-neutral1 transparent;
                box-shadow: @arrowBoxShadow;
                transform: rotate(45deg) scale(-1);
            }
        }

        &-dir-bottom {
            transform: translateY(-50%);

            .@{prefixCls}-popover-arrow-inner {
                border-color: transparent @color-neutral1 @color-neutral1 transparent;
                box-shadow: @arrowBoxShadow;
                transform: rotate(45deg);
            }
        }

        &-dir-left {
            transform: translateX(50%);

            .@{prefixCls}-popover-arrow-inner {
                border-color: transparent @color-neutral1 @color-neutral1 transparent;
                box-shadow: @arrowBoxShadow;
                transform: rotate(-45deg) scale(-1);
            }
        }

        &-dir-right {
            transform: translateX(-50%);

            .@{prefixCls}-popover-arrow-inner {
                border-color: transparent @color-neutral1 @color-neutral1 transparent;
                box-shadow: @arrowBoxShadow;
                transform: rotate(-45deg);
            }
        }
    }
}