@casoon/dragonfly/icons/tabler.css

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.

/**
 * Tabler Icons CSS
 * 
 * Diese Datei enthält die CSS-Klassen für die Tabler Icons.
 * Die Styles sind in @layer components organisiert.
 */


    /* Base Icon */
    .ti,
    .ti-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);
    }

    /* Tabler Icons */
    .ti-home {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
    }

    .ti-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 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
    }

    .ti-x {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
    }

    .ti-search {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    }

    /* Icon Sizes */
    .ti-xs {
        height: var(--spacing-4);
        width: var(--spacing-4);
    }

    .ti-sm {
        height: var(--spacing-5);
        width: var(--spacing-5);
    }

    .ti-lg {
        height: var(--spacing-7);
        width: var(--spacing-7);
    }

    .ti-xl {
        height: var(--spacing-8);
        width: var(--spacing-8);
    }

    .ti-2xl {
        height: var(--spacing-10);
        width: var(--spacing-10);
    }

    /* Icon Alignment */
    .ti-baseline {
        vertical-align: var(--position-baseline);
    }

    .ti-top {
        vertical-align: var(--position-top);
    }

    .ti-middle {
        vertical-align: var(--position-middle);
    }

    .ti-bottom {
        vertical-align: var(--position-bottom);
    }

    /* Icon Animation */
    .ti-spin {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }