measurement pipe created
parent
bdb6b88e8c
commit
898d46f9c7
|
@ -0,0 +1,24 @@
|
||||||
|
@mixin background {
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -180px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
width: 50vw;
|
||||||
|
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at calc(1920px / 2.5),
|
||||||
|
#131313,
|
||||||
|
#131313 55%,
|
||||||
|
rgb(9, 9, 121) 63%,
|
||||||
|
#1292ee 65%,
|
||||||
|
transparent 65.1%
|
||||||
|
);
|
||||||
|
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,111 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,49 @@
|
||||||
|
@mixin marks {
|
||||||
|
$gap-top: 390px;
|
||||||
|
$gap-bottom: 550px;
|
||||||
|
|
||||||
|
div.marks {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -170px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
width: 50vw;
|
||||||
|
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at calc(1920px / 2.6),
|
||||||
|
transparent,
|
||||||
|
transparent 64.6%,
|
||||||
|
white 64.7%,
|
||||||
|
white 65%,
|
||||||
|
transparent 65.1%
|
||||||
|
);
|
||||||
|
|
||||||
|
// cut from the center l-t r-t r-b l-b
|
||||||
|
clip-path: polygon(
|
||||||
|
0% 65px,
|
||||||
|
0% 100%,
|
||||||
|
0 100%,
|
||||||
|
0 $gap-top,
|
||||||
|
100% $gap-top,
|
||||||
|
100% $gap-bottom,
|
||||||
|
0 $gap-bottom,
|
||||||
|
0 100%,
|
||||||
|
100% calc(100% - 96px),
|
||||||
|
100% 0%
|
||||||
|
);
|
||||||
|
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -15,8 +15,7 @@ body {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "./components/measurement.circle.scss";
|
@import "./components/measurement.circle.scss";
|
||||||
|
@import "./components/measurement.pipe.scss";
|
||||||
|
|
Loading…
Reference in New Issue