Browse Source

measurement circle updated

master
JayPY Code 7 months ago
parent
commit
685f439b6f
5 changed files with 23 additions and 7 deletions
  1. +18
    -6
      src/components/measurement.circle.scss
  2. +0
    -0
      src/components/measurement.circle/measurement.circle.arrow.scss
  3. +2
    -0
      src/components/measurement.circle/measurement.circle.content.scss
  4. +3
    -1
      src/components/measurement.circle/measurement.circle.marks.scss
  5. +0
    -0
      src/components/measurement.circle/measurement.circle.warn.scss

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

@ -1,7 +1,7 @@
@import "./measurement.circle.marks.scss";
@import "./measurement.circle.arrow.scss";
@import "./measurement.circle.content.scss";
@import "./measurement.circle.warn.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 {
position: relative;
@ -10,9 +10,21 @@ div.measurement-circle {
height: 40vw;
border-radius: 50%;
z-index: 3;
background: rgb(0, 38, 81);
background: radial-gradient(circle, rgba(0, 38, 81, 1) 60%, rgba(0, 119, 204, 1) 70%);
&::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 marks();
@include arrow();

src/components/measurement.circle.arrow.scss → src/components/measurement.circle/measurement.circle.arrow.scss View File


src/components/measurement.circle.content.scss → src/components/measurement.circle/measurement.circle.content.scss View File

@ -35,6 +35,8 @@
transform: translateX(-50%);
z-index: 2;
font-size: 2vw;
color: $type-color;
}

src/components/measurement.circle.marks.scss → src/components/measurement.circle/measurement.circle.marks.scss View File

@ -1,5 +1,5 @@
@mixin marks {
$text-size: 200%;
$text-size: 2.5vw;
$text-color: white;
$background-color: rgba(white, 0.7);
@ -12,6 +12,8 @@
margin: 0;
padding: 0;
z-index: 1;
li {
position: absolute;

src/components/measurement.circle.warn.scss → src/components/measurement.circle/measurement.circle.warn.scss View File


Loading…
Cancel
Save