|
@@ -1,90 +1,123 @@
|
|
-=top($important: null)
|
|
|
|
- &::before
|
|
|
|
-
|
|
|
|
- top: auto $important
|
|
|
|
- bottom: 100% $important
|
|
|
|
- left: 50% $important
|
|
|
|
- right: auto $important
|
|
|
|
- &:focus,
|
|
|
|
- &:hover,
|
|
|
|
- &.is-tooltip-active
|
|
|
|
- &:not(.is-loading)
|
|
|
|
- &::after
|
|
|
|
- top: 0 $important
|
|
|
|
- bottom: auto $important
|
|
|
|
- left: 50% $important
|
|
|
|
- right: auto $important
|
|
|
|
- border-color: rgba($tooltip-background-color, 0.9) transparent transparent transparent $important
|
|
|
|
- &::before
|
|
|
|
- transform: translate(-50%, -.5rem) $important
|
|
|
|
-
|
|
|
|
-=right($important: null)
|
|
|
|
- &::before
|
|
|
|
- top: auto $important
|
|
|
|
- bottom: 50% $important
|
|
|
|
- left: 100% $important
|
|
|
|
- right: auto $important
|
|
|
|
- transform: translate(-1rem, 50%) $important
|
|
|
|
- &:focus,
|
|
|
|
- &:hover,
|
|
|
|
- &.is-tooltip-active
|
|
|
|
- &:not(.is-loading)
|
|
|
|
- &::after
|
|
|
|
- top: 50% $important
|
|
|
|
- left: 100% $important
|
|
|
|
- right: auto $important
|
|
|
|
- border-color: transparent rgba($tooltip-background-color, 0.9) transparent transparent $important
|
|
|
|
- &::before
|
|
|
|
- transform: translate(0.5rem, 50%) $important
|
|
|
|
-
|
|
|
|
-=bottom($important: null)
|
|
|
|
- &::before
|
|
|
|
- top: 100% $important
|
|
|
|
- bottom: auto $important
|
|
|
|
- left: 50% $important
|
|
|
|
- right: auto $important
|
|
|
|
- transform: translate(-50%, -1rem) $important
|
|
|
|
-
|
|
|
|
- &:focus,
|
|
|
|
- &:hover,
|
|
|
|
- &.is-tooltip-active
|
|
|
|
- &:not(.is-loading)
|
|
|
|
- &::after
|
|
|
|
- top: 100% $important
|
|
|
|
- bottom: auto $important
|
|
|
|
- left: 50% $important
|
|
|
|
- right: auto $important
|
|
|
|
- border-color: transparent transparent rgba($tooltip-background-color, 0.9) transparent $important
|
|
|
|
- &::before
|
|
|
|
- transform: translate(-50%, 0.5rem) $important
|
|
|
|
-
|
|
|
|
-=left($important: null)
|
|
|
|
- &::before
|
|
|
|
- top: auto $important
|
|
|
|
- bottom: 50% $important
|
|
|
|
- left: auto $important
|
|
|
|
- right: 100% $important
|
|
|
|
- transform: translate(1rem, 50%) $important
|
|
|
|
-
|
|
|
|
- &:focus,
|
|
|
|
- &:hover,
|
|
|
|
- &.is-tooltip-active
|
|
|
|
- &:not(.is-loading)
|
|
|
|
- &::after
|
|
|
|
- top: 50% $important
|
|
|
|
- bottom: auto $important
|
|
|
|
- left: auto $important
|
|
|
|
- right: calc(100% - .5rem) $important
|
|
|
|
- border-color: transparent transparent transparent rgba($tooltip-background-color, 0.9) $important
|
|
|
|
- &::before
|
|
|
|
- transform: translate(-0.5rem, 50%) $important
|
|
|
|
-
|
|
|
|
-=direction($direction)
|
|
|
|
- @if $direction == 'top'
|
|
|
|
- @include top(!important)
|
|
|
|
- @else if $direction == 'right'
|
|
|
|
- @include right(!important)
|
|
|
|
- @else if $direction == 'bottom'
|
|
|
|
- @include bottom(!important)
|
|
|
|
- @else if $direction == 'left'
|
|
|
|
- @include left(!important)
|
|
|
|
|
|
+=tooltip-hover
|
|
|
|
+ &:focus::before,
|
|
|
|
+ &:focus::after,
|
|
|
|
+ &:hover::before,
|
|
|
|
+ &:hover::after,
|
|
|
|
+ &.has-tooltip-active::before,
|
|
|
|
+ &.has-tooltip-active::after
|
|
|
|
+ @content
|
|
|
|
+
|
|
|
|
+=tooltip-arrow-top
|
|
|
|
+ &::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
|
|
|
|
+ &::after
|
|
|
|
+ top: auto
|
|
|
|
+ right: auto
|
|
|
|
+ bottom: 0
|
|
|
|
+ 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
|
|
|
|
+ &::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 * -2 + 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 * -2 + 1
|
|
|
|
+ transform: translate(-100%, 50%)
|
|
|
|
+
|
|
|
|
+=tooltip-left
|
|
|
|
+ +tooltip-arrow-left
|
|
|
|
+ +tooltip-box-left
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+=tooltip-arrow-right
|
|
|
|
+ &::after
|
|
|
|
+ top: auto
|
|
|
|
+ right: 0
|
|
|
|
+ bottom: 50%
|
|
|
|
+ left: auto
|
|
|
|
+ margin-top: auto
|
|
|
|
+ margin-right: $tooltip-arrow-size * -2 + 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 * -2 + 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
|