132 lines
3.0 KiB
Sass
132 lines
3.0 KiB
Sass
@import 'variables'
|
|
@import 'position'
|
|
@import 'animation'
|
|
|
|
=tooltip-arrow
|
|
&::after
|
|
box-sizing: border-box
|
|
color: $tooltip-color
|
|
display: inline-block
|
|
font-family: $tooltip-font-family
|
|
font-size: $tooltip-font-size
|
|
hyphens: auto
|
|
opacity: 0
|
|
overflow: hidden
|
|
pointer-events: none
|
|
position: absolute
|
|
visibility: hidden
|
|
z-index: $tooltip-z-index
|
|
content: ''
|
|
border-style: solid
|
|
border-width: $tooltip-arrow-size
|
|
border-color: rgba($tooltip-background-color, $tooltip-background-opacity) transparent transparent transparent
|
|
margin-bottom: $tooltip-arrow-size * -1 + 1
|
|
+tooltip-arrow-top
|
|
|
|
=tooltip-box
|
|
&::before
|
|
box-sizing: border-box
|
|
color: $tooltip-color
|
|
display: inline-block
|
|
font-family: $tooltip-font-family
|
|
font-size: $tooltip-font-size
|
|
hyphens: auto
|
|
opacity: 0
|
|
overflow: hidden
|
|
pointer-events: none
|
|
position: absolute
|
|
visibility: hidden
|
|
z-index: $tooltip-z-index
|
|
background: rgba($tooltip-background-color, $tooltip-background-opacity)
|
|
border-radius: $tooltip-radius
|
|
content: attr(data-tooltip)
|
|
padding: $tooltip-padding
|
|
text-overflow: ellipsis
|
|
white-space: pre
|
|
+tooltip-box-top
|
|
|
|
=tooltip-multiline
|
|
&::before
|
|
height: auto
|
|
width: $tooltip-max-width
|
|
max-width: $tooltip-max-width
|
|
text-overflow: clip
|
|
white-space: normal
|
|
word-break: keep-all
|
|
|
|
[data-tooltip]
|
|
&:not(.is-loading),
|
|
&:not(.is-disabled),
|
|
&:not([disabled])
|
|
cursor: pointer
|
|
overflow: visible
|
|
position: relative
|
|
|
|
+tooltip-box
|
|
&.has-tooltip-arrow
|
|
+tooltip-arrow
|
|
|
|
&.has-tooltip-bottom
|
|
+tooltip-direction('bottom')
|
|
|
|
&.has-tooltip-left
|
|
+tooltip-direction('left')
|
|
|
|
&.has-tooltip-right
|
|
+tooltip-direction('right')
|
|
|
|
&.has-tooltip-multiline
|
|
+tooltip-multiline
|
|
|
|
&.has-tooltip-text-left
|
|
&::before
|
|
text-align: left
|
|
&.has-tooltip-text-centered
|
|
&::before
|
|
text-align: center
|
|
&.has-tooltip-text-right
|
|
&::before
|
|
text-align: right
|
|
|
|
@each $name, $pair in $colors
|
|
$color: nth($pair, 1)
|
|
$color-invert: nth($pair, 2)
|
|
&.has-tooltip-#{$name}
|
|
&::after
|
|
border-color: rgba($color, $tooltip-background-opacity) transparent transparent transparent !important
|
|
&.has-tooltip-bottom
|
|
&::after
|
|
border-color: transparent transparent rgba($color, $tooltip-background-opacity) transparent !important
|
|
&.has-tooltip-left
|
|
&::after
|
|
border-color: transparent transparent transparent rgba($color, $tooltip-background-opacity) !important
|
|
&.has-tooltip-right
|
|
&::after
|
|
border-color: transparent rgba($color, $tooltip-background-opacity) transparent transparent !important
|
|
&:before
|
|
background-color: rgba($color, $tooltip-background-opacity)
|
|
color: $color-invert
|
|
|
|
+tooltip-hover
|
|
opacity: 1
|
|
visibility: visible
|
|
|
|
&.has-tooltip-fade
|
|
+tooltip-fade
|
|
|
|
@import 'responsiveness'
|
|
|
|
span
|
|
&[data-tooltip]
|
|
border-bottom: 1px dashed $grey-lighter
|
|
@each $name, $pair in $colors
|
|
$color: nth($pair, 1)
|
|
$color-invert: nth($pair, 2)
|
|
&.has-tooltip-#{$name}
|
|
border-bottom-color: lighten($color, 5%)
|
|
|
|
.control
|
|
span
|
|
&[data-tooltip]
|
|
border-bottom: none
|