UNPKG

@c8y/style

Version:

Styles for Cumulocity IoT applications

94 lines (87 loc) 1.63 kB
/** * 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; }