@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.
72 lines (59 loc) • 1.86 kB
CSS
/**
* Outline-Effekte
*
* Diese Datei enthält verschiedene Outline-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer utilities {
.outline-none {
outline: none;
}
.outline {
outline: var(--border-width-thick) solid var(--outline-color, currentColor);
outline-offset: var(--border-width-thick);
}
.outline-dashed {
outline: var(--border-width-thick) dashed var(--outline-color, currentColor);
outline-offset: var(--border-width-thick);
}
.outline-dotted {
outline: var(--border-width-thick) dotted var(--outline-color, currentColor);
outline-offset: var(--border-width-thick);
}
.outline-double {
outline: var(--spacing-1) double var(--outline-color, currentColor);
outline-offset: var(--border-width-thick);
}
.outline-thin {
outline: var(--border-width) solid var(--outline-color, currentColor);
outline-offset: var(--border-width);
}
.outline-thick {
outline: var(--spacing-1) solid var(--outline-color, currentColor);
outline-offset: var(--spacing-1);
}
.outline-offset-none {
outline-offset: 0;
}
.outline-offset-sm {
outline-offset: var(--border-width-thick);
}
.outline-offset-md {
outline-offset: var(--spacing-1);
}
.outline-offset-lg {
outline-offset: var(--spacing-2);
}
.outline-focus:focus {
outline: var(--border-width-thick) solid var(--outline-focus-color, var(--color-primary));
outline-offset: var(--border-width-thick);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.outline-focus:focus {
transition: var(--transition-none);
}
}
}