@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.
119 lines (95 loc) • 3 kB
CSS
/**
* Material Design Icons CSS
*
* Diese Datei enthält die CSS-Klassen für die Material Design Icons.
* Die Styles sind in @layer components organisiert.
*/
/* Base Icon */
/* MDI als CSS Icon */
.mdi,
.mdi-icon {
background-color: currentcolor;
display: var(--display-inline-block);
height: var(--spacing-6);
mask-position: var(--position-center);
mask-repeat: var(--bg-no-repeat);
mask-size: var(--position-100);
vertical-align: var(--position-middle);
width: var(--spacing-6);
}
/* MDI Icons */
.mdi-home {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}
.mdi-menu {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
}
.mdi-close {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}
.mdi-search {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}
/* MDI Varianten */
.mdi-outline {
fill: none;
stroke-width: 2%;
}
.mdi-filled {
fill: currentcolor;
stroke-width: 0%;
}
.mdi-round {
fill: none;
stroke-width: 1.5;
}
.mdi-sharp {
fill: none;
stroke-width: 2%;
}
/* Icon Sizes */
.mdi-xs {
height: var(--spacing-4);
width: var(--spacing-4);
}
.mdi-sm {
height: var(--spacing-5);
width: var(--spacing-5);
}
.mdi-lg {
height: var(--spacing-7);
width: var(--spacing-7);
}
.mdi-xl {
height: var(--spacing-8);
width: var(--spacing-8);
}
.mdi-2xl {
height: var(--spacing-10);
width: var(--spacing-10);
}
/* Icon Alignment */
.mdi-baseline {
vertical-align: var(--position-baseline);
}
.mdi-top {
vertical-align: var(--position-top);
}
.mdi-middle {
vertical-align: var(--position-middle);
}
.mdi-bottom {
vertical-align: var(--position-bottom);
}
/* Icon Animation */
.mdi-spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}