@dialpad/dialtone-css
Version:
Dialpad's design system
69 lines (58 loc) • 1.52 kB
text/less
//
// DIALTONE
// UTILITIES: ICONS
//
// These are icon component classes for Dialpad's design system Dialtone.
// For further documentation of these and other classes,
// visit https://dialtone.dialpad.com/components/icon.html
//
// TABLE OF CONTENTS
// • SIZE
//
// ============================================================================
// $ SIZE
// ----------------------------------------------------------------------------
.d-icon {
--icon-size-100: var(--dt-icon-size-100);
--icon-size-200: var(--dt-icon-size-200);
--icon-size-300: var(--dt-icon-size-300);
--icon-size-400: var(--dt-icon-size-400);
--icon-size-500: var(--dt-icon-size-500);
--icon-size-600: var(--dt-icon-size-600);
--icon-size-700: var(--dt-icon-size-700);
--icon-size-800: var(--dt-icon-size-800);
--icon-size: var(--icon-size-500);
flex: none;
width: var(--icon-size);
height: var(--icon-size);
fill: currentColor;
&--size-800 {
--icon-size: var(--icon-size-800);
}
&--size-700 {
--icon-size: var(--icon-size-700);
}
&--size-600 {
--icon-size: var(--icon-size-600);
}
&--size-500 {
--icon-size: var(--icon-size-500);
}
&--size-400 {
--icon-size: var(--icon-size-400);
}
&--size-300 {
--icon-size: var(--icon-size-300);
}
&--size-200 {
--icon-size: var(--icon-size-200);
}
&--size-100 {
--icon-size: var(--icon-size-100);
}
&__wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
}
}