124 lines
2.6 KiB
Sass
124 lines
2.6 KiB
Sass
=tooltip-hover
|
|
&:hover::before,
|
|
&:hover::after,
|
|
&.has-tooltip-active::before,
|
|
&.has-tooltip-active::after
|
|
@content
|
|
|
|
=tooltip-arrow-top
|
|
&.has-tooltip-arrow
|
|
&::after
|
|
top: 0
|
|
right: auto
|
|
bottom: auto
|
|
left: 50%
|
|
margin-top: $tooltip-arrow-size * -1 + 1
|
|
margin-right: auto
|
|
margin-bottom: auto
|
|
margin-left: $tooltip-arrow-size * -1 + 1
|
|
border-color: rgba($tooltip-background-color, $tooltip-background-opacity) transparent transparent transparent
|
|
|
|
=tooltip-box-top
|
|
&::before
|
|
top: 0
|
|
right: auto
|
|
bottom: auto
|
|
left: 50%
|
|
top: 0
|
|
margin-top: $tooltip-arrow-size * -1 + 1
|
|
margin-bottom: auto
|
|
transform: translate(-50%, -100%)
|
|
|
|
=tooltip-top
|
|
+tooltip-arrow-top
|
|
+tooltip-box-top
|
|
|
|
=tooltip-arrow-bottom
|
|
&.has-tooltip-arrow
|
|
&::after
|
|
top: auto
|
|
right: auto
|
|
bottom: -1px
|
|
left: 50%
|
|
margin-top: auto
|
|
margin-right: auto
|
|
margin-bottom: $tooltip-arrow-size * -1 + 1
|
|
margin-left: $tooltip-arrow-size * -1 + 1
|
|
border-color: transparent transparent rgba($tooltip-background-color, $tooltip-background-opacity) transparent
|
|
|
|
=tooltip-box-bottom
|
|
&::before
|
|
top: auto
|
|
right: auto
|
|
bottom: 0
|
|
left: 50%
|
|
margin-top: auto
|
|
margin-bottom: $tooltip-arrow-size * -1 + 1
|
|
transform: translate(-50%, 100%)
|
|
|
|
=tooltip-bottom
|
|
+tooltip-arrow-bottom
|
|
+tooltip-box-bottom
|
|
|
|
|
|
=tooltip-arrow-left
|
|
&.has-tooltip-arrow
|
|
&::after
|
|
top: auto
|
|
right: auto
|
|
bottom: 50%
|
|
left: 0
|
|
margin-top: auto
|
|
margin-right: auto
|
|
margin-bottom: $tooltip-arrow-size * -1
|
|
margin-left: $tooltip-arrow-size * -1 + 1
|
|
border-color: transparent transparent transparent rgba($tooltip-background-color, $tooltip-background-opacity)
|
|
|
|
=tooltip-box-left
|
|
&::before
|
|
top: auto
|
|
right: auto
|
|
bottom: 50%
|
|
left: $tooltip-arrow-size * -1 + 1
|
|
transform: translate(-100%, 50%)
|
|
|
|
=tooltip-left
|
|
+tooltip-arrow-left
|
|
+tooltip-box-left
|
|
|
|
|
|
=tooltip-arrow-right
|
|
&.has-tooltip-arrow
|
|
&::after
|
|
top: auto
|
|
right: 0
|
|
bottom: 50%
|
|
left: auto
|
|
margin-top: auto
|
|
margin-right: $tooltip-arrow-size * -1
|
|
margin-bottom: $tooltip-arrow-size * -1
|
|
margin-left: auto
|
|
border-color: transparent rgba($tooltip-background-color, $tooltip-background-opacity) transparent transparent
|
|
|
|
=tooltip-box-right
|
|
&::before
|
|
top: auto
|
|
right: $tooltip-arrow-size * -1 + 1
|
|
bottom: 50%
|
|
left: auto
|
|
margin-top: auto
|
|
transform: translate(100%, 50%)
|
|
|
|
=tooltip-right
|
|
+tooltip-arrow-right
|
|
+tooltip-box-right
|
|
|
|
=tooltip-direction($direction)
|
|
@if $direction == 'top'
|
|
@include tooltip-top
|
|
@else if $direction == 'right'
|
|
@include tooltip-right
|
|
@else if $direction == 'bottom'
|
|
@include tooltip-bottom
|
|
@else if $direction == 'left'
|
|
@include tooltip-left |