Browse Source

textures

master
JayPY Code 6 months ago
parent
commit
969ae1fc79
7 changed files with 68 additions and 34 deletions
  1. +1
    -1
      public/style.min.css
  2. +4
    -2
      public/style.min.css.map
  3. +6
    -16
      src/components/measurement.circle.scss
  4. +35
    -0
      src/components/measurement.circle/measurement.circle.background.scss
  5. +3
    -3
      src/components/measurement.circle/measurement.circle.content.scss
  6. +16
    -8
      src/components/measurement.circle/measurement.circle.marks.scss
  7. +3
    -4
      src/components/measurement.circle/measurement.circle.warn.scss

+ 1
- 1
public/style.min.css
File diff suppressed because it is too large
View File


+ 4
- 2
public/style.min.css.map
File diff suppressed because it is too large
View File


+ 6
- 16
src/components/measurement.circle.scss View File

@ -1,31 +1,21 @@
@import "./measurement.circle/measurement.circle.background.scss";
@import "./measurement.circle/measurement.circle.marks.scss";
@import "./measurement.circle/measurement.circle.arrow.scss";
@import "./measurement.circle/measurement.circle.content.scss";
@import "./measurement.circle/measurement.circle.warn.scss";
div.measurement-circle {
$size: 650px;
position: relative;
width: 40vw;
height: 40vw;
width: $size;
height: $size;
border-radius: 50%;
z-index: 3;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 38, 81, 1) 55%, #005ca4 63%, #1292ee 68%);
}
@include background();
@include marks();
@include arrow();
@include content();

+ 35
- 0
src/components/measurement.circle/measurement.circle.background.scss View File

@ -0,0 +1,35 @@
@mixin background {
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 38, 81, 1) 55%, #005ca4 63%, #1292ee 68%);
}
&::before {
$size: 30px;
content: "";
position: absolute;
top: -#{$size};
left: -#{$size};
width: calc(100% + #{$size * 2});
height: calc(100% + #{$size * 2});
border-radius: 50%;
z-index: -1;
background: radial-gradient(circle, #005ca4 64%, #a0d4ff 66%, #131313 70%);
}
}

+ 3
- 3
src/components/measurement.circle/measurement.circle.content.scss View File

@ -18,12 +18,12 @@
z-index: 2;
span.value {
font-size: 3.5vw;
font-size: 60px;
color: $value-color;
}
span.type {
font-size: 1vw;
font-size: 20px;
color: $type-color;
}
}
@ -37,7 +37,7 @@
z-index: 2;
font-size: 2vw;
font-size: 35px;
color: $type-color;
}
}

+ 16
- 8
src/components/measurement.circle/measurement.circle.marks.scss View File

@ -1,15 +1,15 @@
@mixin marks {
$text-size: 2.5vw;
$text-size: 50px;
$text-color: white;
$background-color: rgba(white, 0.7);
ul {
position: relative;
width: 100%;
height: 100%;
width: 104%;
height: 104%;
margin: 0;
margin: -2%;
padding: 0;
z-index: 1;
@ -30,13 +30,14 @@
position: absolute;
top: calc(5px / 2);
width: 14px;
width: 8px;
height: 3px;
background-color: $background-color;
}
&.half::before {
width: 20px;
height: 5px;
background-color: white;
}
&.label {
@ -44,8 +45,15 @@
align-items: center;
&::before {
background-color: white;
width: 24px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 52%,
rgba(19, 19, 19, 1) 53%,
rgba(19, 19, 19, 1) 100%
);
height: 5px;
width: 25px;
border-radius: 0 50% 50% 0;
}
span {

+ 3
- 4
src/components/measurement.circle/measurement.circle.warn.scss View File

@ -1,6 +1,5 @@
@mixin warn {
$color: #ee0e0e;
$size: 20px;
$size: 30px;
div.warn {
position: absolute;
@ -15,9 +14,9 @@
z-index: -1;
background-color: $color;
background: radial-gradient(circle, transparent 65%, #fd1d1d 70%);
clip: rect(0, calc(20vw + #{$size}), calc(20vw + #{$size}), 0);
clip: rect(0, 352.5px, 357.5px, 0);
transform: rotate(90deg);
}

Loading…
Cancel
Save