@charset "UTF-8"; // balloon mixins // -------------------------------------------------- @mixin balloon-bounding($border-style) { position: absolute; top: 0; max-width: $balloon-size-max-width; border-style: $border-style; border-radius: $balloon-corner; } @mixin balloon-state( $contentColor, $colorBorder, $colorBg, $shadow, $widthBorder ) { color: $contentColor; border-color: $colorBorder; background-color: $colorBg; box-shadow: $shadow; border-width: $widthBorder; } @mixin balloon-size( $padding-top, $padding-right, $padding-bottom, $padding-left ) { padding: $padding-top $padding-right $padding-bottom $padding-left; } @mixin balloon-arrow( $width, $height, $colorBorder, $colorBg, $shadow, $widthBorder, $arrorExpose ) { // 小三角不需要阴影 $shadow-top: null; $shadow-right: null; $shadow-bottom: null; $shadow-left: null; &:after { position: absolute; width: $height; height: $height; content: ''; transform: rotate(45deg); box-sizing: content-box !important; border: $widthBorder $balloon-border-style $colorBorder; background-color: $colorBg; z-index: -1; } &.#{$css-prefix}balloon-top:after { top: $arrorExpose; left: calc(50% + #{$arrorExpose}); border-right: none; border-bottom: none; box-shadow: $shadow-top; } &.#{$css-prefix}balloon-right:after { top: calc(50% + #{$arrorExpose}); right: $arrorExpose; border-left: none; border-bottom: none; box-shadow: $shadow-right; } &.#{$css-prefix}balloon-bottom:after { bottom: $arrorExpose; left: calc(50% + #{$arrorExpose}); border-top: none; border-left: none; box-shadow: $shadow-bottom; } &.#{$css-prefix}balloon-left:after { top: calc(50% + #{$arrorExpose}); left: $arrorExpose; border-top: none; border-right: none; box-shadow: $shadow-left; } &.#{$css-prefix}balloon-left-top:after { top: $balloon-size-arrow-margin; left: $arrorExpose; border-top: none; border-right: none; box-shadow: $shadow-left; } &.#{$css-prefix}balloon-left-bottom:after { bottom: $balloon-size-arrow-margin; left: $arrorExpose; border-top: none; border-right: none; box-shadow: $shadow-left; } &.#{$css-prefix}balloon-right-top:after { top: $balloon-size-arrow-margin; right: $arrorExpose; border-bottom: none; border-left: none; box-shadow: $shadow-right; } &.#{$css-prefix}balloon-right-bottom:after { right: $arrorExpose; bottom: $balloon-size-arrow-margin; border-bottom: none; border-left: none; box-shadow: $shadow-right; } &.#{$css-prefix}balloon-top-left:after { top: $arrorExpose; left: $balloon-size-arrow-margin; border-right: none; border-bottom: none; box-shadow: $shadow-top; } &.#{$css-prefix}balloon-top-right:after { top: $arrorExpose; right: $balloon-size-arrow-margin; border-right: none; border-bottom: none; box-shadow: $shadow-top; } &.#{$css-prefix}balloon-bottom-left:after { bottom: $arrorExpose; left: $balloon-size-arrow-margin; border-top: none; border-left: none; box-shadow: $shadow-bottom; } &.#{$css-prefix}balloon-bottom-right:after { right: $balloon-size-arrow-margin; bottom: $arrorExpose; border-top: none; border-left: none; box-shadow: $shadow-bottom; } } @mixin balloon-close( $top, $right, $iconSize, $colorClose, $colorCloseHover ) { .#{$css-prefix}balloon-close { position: absolute; top: -1px; transform: translateY(calc(#{$balloon-size-padding-top} + (#{$balloon-content-font-size} - #{$balloon-size-close}) / 2)); right: $right; font-size: $iconSize; cursor: pointer; .#{$css-prefix}icon { @include icon-square-size($iconSize); } color: $colorClose; :hover { color: $colorCloseHover; } } } @mixin show-hidden() { &.visible { display: block; } &.hidden { display: none; } } @mixin tooltip-state( $contentColor, $colorBorder, $colorBg, $shadow, $widthBorder ) { color: $contentColor; border-color: $colorBorder; background-color: $colorBg; box-shadow: $shadow; border-width: $widthBorder; } @mixin tooltip-arrow( $width, $height, $colorBorder, $colorBg ) { & .#{$css-prefix}balloon-arrow { position: absolute; display: block; width: calc(#{$width} * 2); height: calc(#{$height} * 2); overflow: hidden; background: 0 0; pointer-events: none; .#{$css-prefix}balloon-arrow-content { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: $width; height: $height; margin: auto; background-color: $colorBg; border: $balloon-tooltip-border-width $balloon-tooltip-border-style $colorBorder; pointer-events: auto; } } &-top .#{$css-prefix}balloon-arrow { top: calc(0px - (#{$width} * 2)); left: calc(50% - #{$width}); .#{$css-prefix}balloon-arrow-content { transform: translateY($width) rotate(45deg); } } &-right .#{$css-prefix}balloon-arrow { top: calc(50% - #{$width}); right: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateX(calc(0px - #{$width})) rotate(45deg); } } &-bottom .#{$css-prefix}balloon-arrow { left: calc(50% - #{$width}); bottom: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateY(calc(0px - #{$width})) rotate(45deg); } } &-left .#{$css-prefix}balloon-arrow { top: calc(50% - #{$width}); left: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateX($width) rotate(45deg); } } &-left-top .#{$css-prefix}balloon-arrow { top: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2)); left: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateX($width) rotate(45deg); } } &-left-bottom .#{$css-prefix}balloon-arrow { bottom: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2)); left: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateX($width) rotate(45deg); } } &-right-top .#{$css-prefix}balloon-arrow { top: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2)); right: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateX(calc(0px - #{$width})) rotate(45deg); } } &-right-bottom .#{$css-prefix}balloon-arrow { bottom: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2)); right: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateX(calc(0px - #{$width})) rotate(45deg); } } &-top-left .#{$css-prefix}balloon-arrow { left: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2)); top: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateY($width) rotate(45deg); } } &-top-right .#{$css-prefix}balloon-arrow { right: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2)); top: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateY($width) rotate(45deg); } } &-bottom-left .#{$css-prefix}balloon-arrow { left: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2)); bottom: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateY(calc(0px - #{$width})) rotate(45deg); } } &-bottom-right .#{$css-prefix}balloon-arrow { right: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2)); bottom: calc(0px - (#{$width} * 2)); .#{$css-prefix}balloon-arrow-content { transform: translateY(calc(0px - #{$width})) rotate(45deg); } } }