@c8y/style/styles/dashboard/_dashboard-widgets.less

Styles for Cumulocity IoT applications

/**
 * Dashboard Widgets - Widget-specific styles for dashboards
 *
 * Note: Uses @component-padding and @size-16 for spacing. Uses @text-muted for colors.
 *
 * Intentionally hardcoded values:
 * - Clamp font-size (14px, 75%, 54px): Responsive font constraints
 * - Transition duration (0.25s): Animation timing
 * - Bottom positioning (12px): Off-grid fine-tuning
 * - Aspect-ratio (281/148): Specific thumbnail ratio
 * - Min-height (240px): Chart container height
 */

.kpi-widget__container {
  padding: 0 @component-padding @component-padding;
  .panel-title-hidden & {
    padding-top: @component-padding;
  }
  small {
    color: @text-muted;
    font-size: clamp(14px, 75%, 54px);
  }
  .dot-info {
    transition: all 0.25s ease;
  }
}

.pie-chart-warning {
  position: absolute;
  bottom: 12px;
  margin-left: @size-16;
}

.widget-thumbnail {
  width: 100%;
  aspect-ratio: 281/148;
  object-fit: cover;
  object-position: top left;
}

.widget-preview {
  .chart-container {
    min-height: 240px;
  }
}