Browse Source

measurement pipe created

master
JayPY Code 7 months ago
parent
commit
898d46f9c7
4 changed files with 185 additions and 2 deletions
  1. +24
    -0
      src/components/measurement.pipe/measurement.pipe.background.scss
  2. +111
    -0
      src/components/measurement.pipe/measurement.pipe.marker.scss
  3. +49
    -0
      src/components/measurement.pipe/measurement.pipe.marks.scss
  4. +1
    -2
      src/style.scss

+ 24
- 0
src/components/measurement.pipe/measurement.pipe.background.scss View File

@ -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;
}
}

+ 111
- 0
src/components/measurement.pipe/measurement.pipe.marker.scss View File

@ -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;
}
}
}
}
}

+ 49
- 0
src/components/measurement.pipe/measurement.pipe.marks.scss View File

@ -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;
}
}
}

+ 1
- 2
src/style.scss View File

@ -15,8 +15,7 @@ body {
justify-content: center;
overflow: hidden;
margin: 0;
}
@import "./components/measurement.circle.scss";
@import "./components/measurement.pipe.scss";

Loading…
Cancel
Save