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

yyzone vue components and utils

@prefixTipCls: ~'@{yy-css-prefix}tip';
@prefixTipArrowCls: ~'@{yy-css-prefix}tip-arrow';

.@{prefixTipCls} {
    position: relative;
    display: inline-block;

    &-rel {
        display: inline-block;
        .cursor();
    }

    @arrow-width: 4px;

    &-popper {
        z-index: 999;
        &-content {
            position: relative;
            border-radius: 3px;
            font-size: @yy-font-size-small;
            white-space: nowrap;
            padding: 7px 12px;
            z-index: 999;
            box-shadow: 0px 2px @arrow-width 0px rgba(0, 0, 0, 0.15);
        }
        .@{prefixTipArrowCls} {
            position: absolute;
            border-style: solid;
            color: transparent;
        }

        &[placement^="top"] {
            padding-bottom: @arrow-width + 2;

            .@{prefixTipArrowCls} {
                bottom: -@arrow-width;
                border-width: @arrow-width @arrow-width 0px @arrow-width;
                border-top-color: shade(@yy-background-color-opacity, 25%);
            }
        }

        &[placement="top"] .@{prefixTipArrowCls} {
            left: 50%;
            margin-left: -@arrow-width;
        }

        &[x-placement="top-start"] .@{prefixTipArrowCls} {
            left: 16px;
        }

        &[x-placement="top-end"] .@{prefixTipArrowCls} {
            right: 16px;
        }

        &[placement^="right"] {
            padding-left: @arrow-width + 2;

            .@{prefixTipArrowCls} {
                left: -@arrow-width;
                border-width: @arrow-width @arrow-width @arrow-width 0px;
                border-right-color: shade(@yy-background-color-opacity, 25%);
            }
        }

        &[placement="right"] .@{prefixTipArrowCls} {
            top: 50%;
            margin-top: -@arrow-width;
        }

        &[x-placement="right-start"] .@{prefixTipArrowCls} {
            top: 8px;
        }

        &[x-placement="right-end"] .@{prefixTipArrowCls} {
            bottom: 8px;
        }

        &[placement^="bottom"] {
            padding-top: @arrow-width + 2;

            .@{prefixTipArrowCls} {
                top: -@arrow-width;
                border-width: 0px @arrow-width @arrow-width @arrow-width;
                border-bottom-color: shade(@yy-background-color-opacity, 25%);
            }
        }

        &[placement="bottom"] .@{prefixTipArrowCls} {
            left: 50%;
            margin-left: -@arrow-width;
        }

        &[x-placement="bottom-start"] .@{prefixTipArrowCls} {
            left: 16px;
        }

        &[x-placement="bottom-end"] .@{prefixTipArrowCls} {
            right: 16px;
        }

        &[placement^="left"] {
            margin-right: @arrow-width + 2;

            .@{prefixTipArrowCls} {
                right: -@arrow-width;
                border-width: @arrow-width 0px @arrow-width @arrow-width;
                border-left-color: shade(@yy-background-color-opacity, 25%);
            }
        }

        &[placement="left"] .@{prefixTipArrowCls} {
            top: 50%;
            margin-top: -@arrow-width;
        }

        &[x-placement="left-start"] .@{prefixTipArrowCls} {
            top: 8px;
        }

        &[x-placement="left-end"] .@{prefixTipArrowCls} {
            bottom: 8px;
        }

        &-dark &-content {
            background-color: shade(@yy-background-color-opacity, 25%);
            color: @yy-background-component;
        }

        &-light &-content {
            .opacity-light(1);
            color: @yy-text-primary-color;
        }   

        &-light {
            &[placement^="top"] .@{prefixTipArrowCls} {
                border-top-color: @yy-background-component;
            }

            &[placement^="right"] .@{prefixTipArrowCls} {
                border-right-color: @yy-background-component;
            }

            &[placement^="bottom"] .@{prefixTipArrowCls} {
                border-bottom-color: @yy-background-component;
            }

            &[placement^="left"] .@{prefixTipArrowCls} {
                border-left-color: @yy-background-component;
            }
        }
    }
}