@casoon/dragonfly/icons/bootstrap.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.

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


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

    /* Bootstrap Icons */
    .bi-house {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z'/%3E%3C/svg%3E");
    }

    .bi-list {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    }

    .bi-x {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    }

    .bi-search {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    }

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

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

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

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

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

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

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

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

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

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

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

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