147 lines
3.7 KiB
CSS
147 lines
3.7 KiB
CSS
.gauge {
|
|
position: relative;
|
|
}
|
|
|
|
.gaugeWrapper {
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gauge__container {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
-webkit-transform: translateX(-50%);
|
|
-moz-transform: translateX(-50%);
|
|
-ms-transform: translateX(-50%);
|
|
-o-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.gauge__background {
|
|
z-index: 0;
|
|
position: absolute;
|
|
background-color: #cae0d0;
|
|
top: 0;
|
|
border-radius: 300px 300px 0 0;
|
|
}
|
|
|
|
.gauge__data {
|
|
z-index: 1;
|
|
position: absolute;
|
|
background-color: #04AA6D;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-radius: 300px 300px 0 0;
|
|
-webkit-transform-origin: center bottom;
|
|
-moz-transform-origin: center bottom;
|
|
-ms-transform-origin: center bottom;
|
|
-o-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
.gauge__center {
|
|
z-index: 2;
|
|
position: absolute;
|
|
background-color: #1d211e;
|
|
margin-right: auto;
|
|
border-radius: 300px 300px 0 0;
|
|
}
|
|
|
|
.gauge__marker {
|
|
z-index: 3;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
|
|
.gauge__needle {
|
|
z-index: 4;
|
|
background-color: #E91E63;
|
|
height: 3px;
|
|
position: absolute;
|
|
-webkit-transform-origin: left center;
|
|
-moz-transform-origin: left center;
|
|
-ms-transform-origin: left center;
|
|
-o-transform-origin: left center;
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.gauge__labels {
|
|
display: table;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.gauge__label--low {
|
|
display: table-cell;
|
|
text-align: center;
|
|
}
|
|
|
|
.gauge__label--spacer {
|
|
display: table-cell;
|
|
}
|
|
|
|
.gauge__label--high {
|
|
display: table-cell;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.gauge { height: calc(60px + 3em); }
|
|
.gauge__container { width: 120px; height: 60px; }
|
|
.gauge__marker { height: 60px; left: 59.5px; }
|
|
.gauge__background { width: 120px; height: 60px; }
|
|
.gauge__center { width: 72px; height: 36px; top: 24px; margin-left: 24px; }
|
|
.gauge__data { width: 120px; height: 60px; }
|
|
.gauge__needle { left: 60px; top: 58px; width: 60px; }
|
|
.gauge__labels { top: 60px; width: 120px; }
|
|
.gauge__label--low { width: 24px; }
|
|
.gauge__label--spacer { width: 72px; text-align: center;}
|
|
.gauge__label--high { width: 24px; }
|
|
|
|
@media only screen and (min-width: 720px) {
|
|
.gauge { height: calc(120px + 4.2em); }
|
|
.gauge__container { width: 240px; height: 120px; }
|
|
.gauge__marker { height: 120px; left: 119.5px; }
|
|
.gauge__background { width: 240px; height: 120px; }
|
|
.gauge__center { width: 144px; height: 72px; top: 48px; margin-left: 48px; }
|
|
.gauge__data { width: 240px; height: 120px; }
|
|
.gauge__needle { left: 120px; top: 117px; width: 120px; }
|
|
.gauge__labels { top: 120px; width: 240px; }
|
|
.gauge__label--low { width: 48px; }
|
|
.gauge__label--spacer { width: 144px; text-align: center;}
|
|
.gauge__label--high { width: 48px; }
|
|
.gaugeLabel { font-size: 1.3em; }
|
|
.gauge__labels { font-size: 2em; }
|
|
}
|
|
|
|
.gauge--liveupdate .gauge__data,
|
|
.gauge--liveupdate .gauge__needle {
|
|
-webkit-transition: all 1s ease-in-out;
|
|
-moz-transition: all 1s ease-in-out;
|
|
-ms-transition: all 1s ease-in-out;
|
|
-o-transition: all 1s ease-in-out;
|
|
transition: all 1s ease-in-out;
|
|
}
|
|
|
|
|
|
.gauge__data {
|
|
-webkit-transform: rotate(-.50turn);
|
|
-moz-transform: rotate(-.50turn);
|
|
-ms-transform: rotate(-.50turn);
|
|
-o-transform: rotate(-.50turn);
|
|
transform: rotate(-.50turn);
|
|
}
|
|
.gauge__needle {
|
|
-webkit-transform: rotate(-.50turn);
|
|
-moz-transform: rotate(-.50turn);
|
|
-ms-transform: rotate(-.50turn);
|
|
-o-transform: rotate(-.50turn);
|
|
transform: rotate(-.50turn);
|
|
}
|