84 lines
1.3 KiB
SCSS
84 lines
1.3 KiB
SCSS
.chart-vertical-annotation {
|
|
position: absolute;
|
|
height: 100%;
|
|
|
|
&.is-staggered {
|
|
height: calc(100% + 15px);
|
|
}
|
|
|
|
.indicator {
|
|
color: $grey;
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 100%;
|
|
background: transparent;
|
|
margin-left: -10px;
|
|
margin-top: -10px;
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
|
|
&.is-active {
|
|
box-shadow: inset 0 0 0 2px $blue;
|
|
}
|
|
|
|
.icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
|
|
&.is-#{$name} .indicator {
|
|
color: $color;
|
|
|
|
&:hover,
|
|
&.is-hovered {
|
|
color: darken($color, 2.5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8px;
|
|
width: 1px;
|
|
height: calc(100% - 8px);
|
|
background: $grey;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.chart-horizontal-annotation {
|
|
position: absolute;
|
|
width: 100%;
|
|
|
|
.indicator {
|
|
transform: translateY(-50%);
|
|
display: block;
|
|
border: none;
|
|
border-radius: 100px;
|
|
background: $red;
|
|
color: $white;
|
|
font-weight: $weight-semibold;
|
|
font-size: $size-7;
|
|
margin-left: 10px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
background: $red;
|
|
z-index: -1;
|
|
}
|
|
}
|