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