Browse Source

responsived

master
JayPY Code 4 months ago
parent
commit
a5780264d2
7 changed files with 26 additions and 24 deletions
  1. +2
    -2
      src/components/icons.scss
  2. +4
    -4
      src/components/measurement.circle.scss
  3. +3
    -3
      src/components/measurement.circle/measurement.circle.content.scss
  4. +1
    -1
      src/components/measurement.circle/measurement.circle.marks.scss
  5. +1
    -1
      src/components/measurement.line.scss
  6. +13
    -11
      src/components/measurement.line/measurement.line.item.scss
  7. +2
    -2
      src/style.scss

+ 2
- 2
src/components/icons.scss View File

@ -7,8 +7,8 @@ div.icons {
z-index: 999;
div.icon {
width: 64px;
height: 64px;
width: 5vw;
height: 5vw;
background-size: 50%;
background-repeat: no-repeat;

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

@ -5,10 +5,10 @@
@import "./measurement.circle/measurement.circle.warn.scss";
div.measurement-circle {
$size: 650px;
$size: 40vw;
position: relative;
left: 5%;
position: absolute;
left: 50vw;
width: $size;
height: $size;
@ -20,5 +20,5 @@ div.measurement-circle {
@include marks();
@include arrow();
@include content();
@include warn();
// @include warn();
}

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

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

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

@ -1,7 +1,7 @@
@use "sass:math";
@mixin marks {
$text-size: 50px;
$text-size: 2.5vw;
$text-color: white;
$background-color: rgba(white, 0.7);

+ 1
- 1
src/components/measurement.line.scss View File

@ -4,7 +4,7 @@ div.measurement-line {
position: absolute;
left: 0;
width: 400px;
width: 30vw;
@include item();
}

+ 13
- 11
src/components/measurement.line/measurement.line.item.scss View File

@ -1,9 +1,11 @@
@mixin item {
$height: 3vw;
div.item {
position: relative;
width: 100%;
height: 56px;
height: $height;
margin: 20px 30px;
@ -11,7 +13,7 @@
background-color: transparent;
border-radius: 2em;
border-radius: 10em;
transition: all 1s;
@ -46,18 +48,18 @@
div.background {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
top: 0.5vw;
left: 0.5vw;
right: 0.5vw;
height: 46px;
height: calc(#{$height} - 1vw);
background: linear-gradient(90deg, #a0d4ff 0%, #1292ee 50%, #a0d4ff 100%);
transition: all 1s;
clip-path: inset(0 100% 0 0);
border-radius: 2em;
border-radius: 10em;
}
div.percent {
@ -66,13 +68,13 @@
left: 0;
width: 0%;
height: 56px;
height: $height;
background-color: transparent;
box-shadow: 0 0 100px rgba($color: #a0d4ff, $alpha: 0.5);
border-radius: 2em;
border-radius: 10em;
}
span {
@ -84,13 +86,13 @@
&.value {
right: 10px;
font-size: 20px;
font-size: 1vw;
transform: translateY(-50%) rotate(-90deg);
}
&.title {
font-size: 22px;
font-size: 1.2vw;
left: calc(100% + 20px);

+ 2
- 2
src/style.scss View File

@ -57,8 +57,8 @@ footer {
z-index: 2;
a.back-to {
width: 32px;
height: 32px;
width: 2vw;
height: 2vw;
cursor: pointer;

Loading…
Cancel
Save