@c8y/style/styles/components/data-display-and-visualization/_status.less

Styles for Cumulocity IoT applications

/**
 * status - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
.statusOk {
  color: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
}

.statusNok {
  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
}

.statusAlert {
  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
}

.statusUnknown {
  color: @gray-40;
}

.sendStatus,
.pushStatus {
  fill: url(#smallGradient);
}

.status.warning {
  color: var(--palette-status-info, var(--c8y-palette-status-info));
}
.color.warning {
  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
}
.color.minor {
  color: var(--palette-status-warning-high, var(--c8y-palette-status-warning-high));
}
.status.minor {
  --c8y-icon-stroke-color: var(--c8y-palette-orange-10);
  color: var(--palette-status-warning-high, var(--c8y-palette-status-warning-high));
}

.status.major {
  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
}
.color.major {
  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
}

.status.critical {
  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
}

.color.critical {
  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
}

// for svg
path.statusUnknown {
  fill: @gray-50;
  &.pushStatus {
    fill: @gray-40;
  }
}

path.statusOk {
  fill: @status-success;
  &.pushStatus {
    fill: @status-success-dark;
  }
}

path.statusNok {
  fill: @status-danger;
  &.pushStatus {
    fill: @status-danger-dark;
  }
}

.fill-warning {
  fill: @status-warning;
}

.alarm-icons {
  position: relative;
  font-size: @size-20;
  width: 28px;
  .btn-clean.severity {
    position: absolute !important;
    top: 0;
    left: 50%;
    z-index: 10;
  }
  .btn-clean.status {
    margin-top: 8px;
    font-size: @size-24;
  }
}