@c8y/style
Version:
Styles for Cumulocity IoT applications
95 lines (89 loc) • 1.7 kB
text/less
.label-value-unit-gauge {
display: block;
padding: 0 @margin-24;
min-height: 100%;
.gauge-legend {
width: 100%;
}
.gauge-legend {
h3 {
margin: 0;
}
}
circle.empty {
stroke: transparent;
stroke-width: 24px;
fill: none;
}
.center-value,
.center-label,
.center-unit,
.center-date-time {
text-anchor: middle;
fill: @component-color-default;
color: @component-color-default;
}
.center-value {
letter-spacing: -1px;
font-size: 26px;
font-weight: bold;
}
.center-label {
font-size: 14px;
}
.center-unit,
.center-date-time {
font-size: 10px;
fill: @text-muted;
color: @text-muted;
}
.gauge-svg svg {
path.track,
path.track-value {
display: block;
stroke-linejoin: miter;
stroke-linecap: miter;
fill: none;
stroke-width: 22px;
stroke-dasharray: 503;
stroke-dashoffset: -503px;
}
path.track {
stroke-dashoffset: -125.75px;
stroke: @component-background-active;
}
path.track-value {
transition: stroke-dashoffset 0.25s ease;
}
path.track-scale {
stroke: @component-background-active;
stroke-width: 7;
fill: none;
stroke-dasharray: 0.03em, 5;
}
}
#mask {
fill: @component-background-default;
}
}
.chart-container {
min-height: 280px;
}
.card-dashboard .chart-container {
max-height: calc(100% - 95px);
max-width: 99.5%;
}
@container (min-width: 150px) {
.label-value-unit-gauge {
display: flex;
flex-flow: row nowrap;
align-items: center;
.gauge-legend {
width: 40cqw;
}
}
.gauge-svg {
height: 100cqh;
width: 100%;
}
}