yyzone/src/assets/styles/components/tip.less

yyzone vue components and utils

@prefixTipCls: ~'yy-tip';

.top-placement() {

}
.@{prefixTipCls} {
    position: relative;
    display: inline-block;
    &-rel {
        display: inline-block;
        .cursor();
    }
    &-popper {
        position: absolute;
        border-radius: 3px;
        font-size: @yy-font-size-xs;
        white-space: nowrap;
        padding: 7px 12px;
        z-index: 999;
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
        left: 50%;
        transform: translateX(-50%);
        &:after {
            position: absolute;
            content: '';
            border-style: solid;
            color: transparent;
            left: 50%;
            margin-left: -4px;
        }
        &[placement^="top"] {
            &:after {
                bottom: -4px;
                border-width: 4px 4px 0px;
                border-top-color: shade(@yy-bg-opacity, 25%);
            }
        }
        &[placement^="bottom"] {
            &:after {
                top: -4px;
                border-width: 0px 4px 4px;
                border-bottom-color: shade(@yy-bg-opacity, 25%);
            }
        }

        &-dark {
            background-color: shade(@yy-bg-opacity, 25%);
            color: @yy-bg-info;
        }
        &-light {
            .opacity-light(1);
            color: @yy-text-default;
            &[placement^="top"] {
                &:after {
                    border-top-color: @yy-bg-info;
                }
            }
            &[placement^="bottom"] {
                &:after {
                    border-bottom-color: @yy-bg-info;
                }
            }
        }
    }
}