90 lines
2.1 KiB
SCSS
90 lines
2.1 KiB
SCSS
|
@use "sass:color";
|
||
|
|
|
||
|
|
@mixin tooltip() {
|
||
|
|
$item-cap-padding: $cap-spacing--eighth;
|
||
|
|
|
||
|
|
.esri-tooltip {
|
||
|
|
position: absolute;
|
||
|
|
overflow: visible;
|
||
|
|
width: fit-content;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1;
|
||
|
|
|
||
|
|
&-content {
|
||
|
|
position: relative;
|
||
|
|
padding: $cap-spacing--half $side-spacing--half;
|
||
|
|
background: color.change($background-color, $alpha: 0.8);
|
||
|
|
backdrop-filter: blur(3px);
|
||
|
|
box-shadow: 0 1px 2px rgb(0, 0, 0, 0.1);
|
||
|
|
font-family: $font-family;
|
||
|
|
font-size: $font-size--small;
|
||
|
|
line-height: 1.1em;
|
||
|
|
color: $font-color;
|
||
|
|
|
||
|
|
// Hide the content altogether when there is nothing inside. Otherwise we'd
|
||
|
|
// see a small empty square due to the tooltip padding.
|
||
|
|
&:empty {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-table {
|
||
|
|
display: table;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-field {
|
||
|
|
display: table-row;
|
||
|
|
|
||
|
|
&__title,
|
||
|
|
&__value {
|
||
|
|
display: table-cell;
|
||
|
|
padding: $item-cap-padding 0;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__title {
|
||
|
|
padding-inline-end: $side-spacing;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__value {
|
||
|
|
// Make numbers look nice as they change. See https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
|
||
|
|
font-variant-numeric: tabular-nums;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-value-by-value {
|
||
|
|
// Add some space between the left/right (e.g. width/height) values.
|
||
|
|
span:nth-child(2) {
|
||
|
|
margin-inline: $side-spacing--half;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-help-message {
|
||
|
|
$help-message-border-spacing: $cap-spacing--half;
|
||
|
|
|
||
|
|
width: min-content;
|
||
|
|
min-width: 200px;
|
||
|
|
margin-top: $help-message-border-spacing;
|
||
|
|
padding-top: $help-message-border-spacing + $item-cap-padding;
|
||
|
|
padding-bottom: $item-cap-padding;
|
||
|
|
border-top: solid 1px $border-color;
|
||
|
|
font-family: $font-family;
|
||
|
|
font-size: $font-size--small;
|
||
|
|
text-align: center;
|
||
|
|
white-space: break-spaces;
|
||
|
|
|
||
|
|
&:only-child {
|
||
|
|
margin-top: 0;
|
||
|
|
padding-top: $item-cap-padding;
|
||
|
|
border-top: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $include_Tooltip==true {
|
||
|
|
@include tooltip();
|
||
|
|
}
|