iot-settings/src/components/measurement.pipe/measurement.pipe.marker.scss

112 lines
2.1 KiB
SCSS

@mixin marker {
$font-size: 30px;
div.marker {
position: absolute;
top: 0;
left: 418px;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
span {
position: absolute;
color: white;
font-size: $font-size;
text-align: right;
&::before {
content: "";
position: absolute;
background-color: white;
border-radius: 1em;
}
&.bottom::before,
&.top::before {
width: 50px;
height: 2px;
}
&.bottom-middle,
&.top-middle {
font-size: 1.5em;
color: transparent;
&::before {
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 5px;
}
}
}
&.top span {
&.top {
top: 0;
&::before {
top: 100%;
left: -2px;
}
}
&.top-middle {
top: 120px;
left: -50px;
}
&.bottom-middle {
top: 250px;
left: -120px;
}
&.bottom {
top: 388px;
left: -190px;
}
}
&.bottom span {
&.top {
bottom: 387px;
left: -190px;
&::before {
top: 100%;
}
}
&.bottom-middle {
bottom: 120px;
left: -50px;
}
&.top-middle {
bottom: 250px;
left: -120px;
}
&.bottom {
bottom: 0px;
&::before {
left: 1px;
}
}
}
}
}