@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.
118 lines (95 loc) • 3.39 kB
CSS
/**
* Phosphor Icons CSS
*
* Diese Datei enthält die CSS-Klassen für die Phosphor Icons.
* Die Styles sind in @layer components organisiert.
*/
/* Base Icon */
.ph,
.ph-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);
}
/* Phosphor Icons */
.ph-house {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M218.83 103.77l-80-75.48a1.14 1.14 0 0 1-.11-.11 16 16 0 0 0-21.53 0l-.11.11-79.91 75.48A16 16 0 0 0 32 115.55V208a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-48h32v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-92.45a16 16 0 0 0-5.17-11.78zM208 208h-48v-48a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v48H48v-92.45l.11-.1L128 40l79.9 75.43.11.1z'/%3E%3C/svg%3E");
}
.ph-list {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8zM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16z'/%3E%3C/svg%3E");
}
.ph-x {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128z'/%3E%3C/svg%3E");
}
.ph-magnifying-glass {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.32 11.32l50.06 50.07a8 8 0 0 0 11.32-11.32zM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72z'/%3E%3C/svg%3E");
}
/* Phosphor Varianten */
.ph-regular {
fill: none;
stroke-width: 2%;
}
.ph-bold {
fill: none;
stroke-width: 3%;
}
.ph-fill {
fill: currentcolor;
stroke-width: 0%;
}
.ph-duotone {
fill: currentcolor;
opacity: 5000%;
stroke-width: 2%;
}
/* Icon Sizes */
.ph-xs {
height: var(--spacing-4);
width: var(--spacing-4);
}
.ph-sm {
height: var(--spacing-5);
width: var(--spacing-5);
}
.ph-lg {
height: var(--spacing-7);
width: var(--spacing-7);
}
.ph-xl {
height: var(--spacing-8);
width: var(--spacing-8);
}
.ph-2xl {
height: var(--spacing-10);
width: var(--spacing-10);
}
/* Icon Alignment */
.ph-baseline {
vertical-align: var(--position-baseline);
}
.ph-top {
vertical-align: var(--position-top);
}
.ph-middle {
vertical-align: var(--position-middle);
}
.ph-bottom {
vertical-align: var(--position-bottom);
}
/* Icon Animation */
.ph-spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}