@c8y/style/styles/_info-gauge.less

Styles for Cumulocity IoT applications

.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%;
  }
}