@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
84 lines (69 loc) • 1.99 kB
CSS
/**
* Icon Basis-Styles
*
* Diese Datei enthält die grundlegenden Styles für alle Icons.
* Die Styles sind in @layer icons organisiert.
*
* Verwendete Icon-Sets und deren Lizenzen:
* - Heroicons (MIT) - https://heroicons.com
* - Feather Icons (MIT) - https://feathericons.com
* - Phosphor Icons (MIT) - https://phosphoricons.com
* - Remix Icons (MIT) - https://remixicon.com
* - Bootstrap Icons (MIT) - https://icons.getbootstrap.com
*/
/* Basis Icon Styles */
.icon {
display: var(--display-inline-block);
fill: currentcolor;
height: var(--icon-size-relative-md);
stroke: currentcolor;
stroke-width: 0%;
vertical-align: var(--position-middle);
width: var(--icon-size-relative-md);
}
/* Größenvarianten */
.icon-xs {
height: var(--icon-size-relative-xs);
width: var(--icon-size-relative-xs);
}
.icon-sm {
height: var(--icon-size-relative-sm);
width: var(--icon-size-relative-sm);
}
.icon-lg {
height: var(--icon-size-relative-lg);
width: var(--icon-size-relative-lg);
}
.icon-xl {
height: var(--icon-size-relative-xl);
width: var(--icon-size-relative-xl);
}
.icon-2xl {
height: var(--icon-size-relative-2xl);
width: var(--icon-size-relative-2xl);
}
/* Ausrichtung */
.icon-baseline {
vertical-align: var(--position-baseline);
}
.icon-top {
vertical-align: var(--position-top);
}
.icon-middle {
vertical-align: var(--position-middle);
}
.icon-bottom {
vertical-align: var(--position-bottom);
}
/* Animation */
.icon-spin {
animation: icon-spin var(--icon-animation-duration-slow) infinite var(--icon-animation-timing);
}
@keyframes icon-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}