104 lines
1.8 KiB
SCSS
104 lines
1.8 KiB
SCSS
.tooltip {
|
|
display: block;
|
|
z-index: 10000;
|
|
max-width: $text-max-width;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
|
|
|
.tooltip-inner {
|
|
background-color: $color-aqua-lightest;
|
|
padding: $gap * 3;
|
|
border-left: ($gap / 2) solid $color-blue;
|
|
}
|
|
|
|
.tooltip-arrow {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
position: absolute;
|
|
background-color: $color-aqua-lightest;
|
|
z-index: 1;
|
|
box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
&[x-placement^="top"] {
|
|
margin-bottom: 5px;
|
|
|
|
.tooltip-arrow {
|
|
bottom: -5px;
|
|
left: calc(50% - 5px);
|
|
transform: rotate(-45deg);
|
|
box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
|
|
&[x-placement^="bottom"] {
|
|
margin-top: 5px;
|
|
|
|
.tooltip-arrow {
|
|
top: -5px;
|
|
left: calc(50% - 5px);
|
|
transform: rotate(135deg);
|
|
box-shadow: -2px 2px 2px -2px rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
|
|
&[x-placement^="right"] {
|
|
margin-left: 5px;
|
|
|
|
.tooltip-arrow {
|
|
left: -5px;
|
|
top: calc(50% - 5px);
|
|
transform: rotate(-135deg);
|
|
}
|
|
}
|
|
|
|
&[x-placement^="left"] {
|
|
margin-right: 5px;
|
|
|
|
.tooltip-arrow {
|
|
right: -5px;
|
|
top: calc(50% - 5px);
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
&.popover {
|
|
$color: #f9f9f9;
|
|
|
|
.popover-inner {
|
|
background: $color;
|
|
color: black;
|
|
padding: 24px;
|
|
box-shadow: 0 5px 30px rgba(black, 0.1);
|
|
}
|
|
|
|
.popover-arrow {
|
|
border-color: $color;
|
|
}
|
|
}
|
|
|
|
&[aria-hidden="true"] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.15s, visibility 0.15s;
|
|
}
|
|
|
|
&[aria-hidden="false"] {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity 0.15s;
|
|
}
|
|
}
|
|
|
|
.icon-tooltip {
|
|
@include icon-link;
|
|
|
|
.icon {
|
|
@include icon-size(16);
|
|
}
|
|
|
|
&--tight {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|