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

Styles for Cumulocity IoT applications

/**
 * Boxed Label - Component styles for creating dashed border containers with optional floating labels
 *
 * Usage:
 * - Single location: dashboard-details-advanced-tab/assign-widget-assets/assign-widget-asset-modal.component.html
 * - 6 instances in the assign widget assets modal
 * - Used for: widget titles, source sections, device displays, empty states, and action containers
 *
 * Features:
 * - Creates a dashed border box with padding
 * - Supports [data-label] attribute to show a floating label (like fieldset legend)
 * - Label appears as italic text at the top-left of the box
 *
 * 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 (-6px top, 8px left for label)
 * - Border widths (1px): Standard dashed border
 * - Font-sizes: Typography (xs for label)
 * - Border-radius (2px): Subtle rounding
 */
.boxed-label {
  border: dashed 1px transparent;
  padding: @size-8 @size-8 @size-4;
  border-radius: 2px;
  position: relative;
  &[data-label] {
    border-color: var(--c8y-palette-gray-60);
    &:before{
      content: attr(data-label);
      position: absolute;
      top: -6px;
      left: 8px;
      font-size: var(--c8y-font-size-xs);
      background-color: var(--c8y-root-component-background-default);
      color: var(--c8y-root-component-color-text-muted);
      padding: 0 4px;
      font-style: italic;
      border-radius: 2px;
    }
  }
}