@c8y/style/styles/utilities/_icon-utils.less

Styles for Cumulocity IoT applications

/**
 * Icon Utility Classes
 *
 * Note: Uses @size-4 for spacing and var(--c8y-line-height-base) for line-height.
 *
 * Intentionally hardcoded values:
 * - Font sizes (12px-64px): Icon sizing scale for utility classes
 * - Transform values (-6px, 3px): Fine-tuning icon positioning
 * - Negative margins (-6px): Alignment adjustments
 */

//Icon badge
.c8y-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  > [class^='dlt-c8y-icon-'],
  > [class*=' dlt-c8y-icon-'],
  > .c8y-icon {
    align-self: baseline;
    font-size: 20px;
  }

  .badge {
    align-self: flex-start;
    transform: translateX(-6px);
  }
  .c8y-list__item & {
    margin: -6px 0;
  }
}

// Icon alignment
.icon-flex {
  display: inline-flex;
  align-items: flex-start;
  line-height: var(--c8y-line-height-base);
  > [class^='dlt-c8y-icon-'],
  > [class*=' dlt-c8y-icon-'],
  > .c8y-icon {
    margin-right: @size-4;
    transform: translateY(3px);
  }
}

// Icon sizing

.icon-12 {
  font-size: 12px !important;
}
.icon-14 {
  font-size: 14px !important;
}
.icon-16 {
  font-size: 16px !important;
}
.icon-20 {
  font-size: 20px !important;
}
.icon-24 {
  font-size: 24px !important;
}
.icon-28 {
  font-size: 28px !important;
}
.icon-32 {
  font-size: 32px !important;
}
.icon-36 {
  font-size: 36px !important;
}
.icon-40 {
  font-size: 40px !important;
}
.icon-44 {
  font-size: 44px !important;
}
.icon-48 {
  font-size: 48px !important;
}
.icon-52 {
  font-size: 52px !important;
}
.icon-56 {
  font-size: 56px !important;
}
.icon-60 {
  font-size: 60px !important;
}
.icon-64 {
  font-size: 64px !important;
}