/* ============================================================================ * Bootstrap Icons CSS-mask icon set * ---------------------------------------------------------------------------- * Minimal stylesheet exposing only the icons used by viewIcons.php, using the * Bootstrap Icons (.bi / .bi-) naming convention. * * Markup: * * Rendering: each icon is a Bootstrap Icons SVG embedded as a data-URI CSS * mask. The element's `background-color` (which inherits `currentColor`) is * what you actually see, so text-color classes (text-white, text-secondary, * etc.) continue to control the icon color. * * Sizing: icons are 1em x 1em, so font-size-based sizing flows through. The * size classes (bi-lg / bi-15x / bi-2x / bi-3x) set explicit rem dimensions * so they work even inside elements that lock font-size (.btn, .badge). * ========================================================================= */ /* --- Base & utility classes ----------------------------------------------- */ .bi { display: inline-block; width: 1em; height: 1em; font-size: inherit; line-height: 1; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Sizing. The selector is doubled (.bi.bi-lg) to raise specificity above the * base .bi rule. */ .bi.bi-xs { width: 0.75rem; height: 0.75rem; vertical-align: -0.1rem; } .bi.bi-sm { width: 0.875rem; height: 0.875rem; vertical-align: -0.15rem; } .bi.bi-lg { width: 1.25rem; height: 1.25rem; vertical-align: -0.3rem; } .bi.bi-1-5x { width: 1.5rem; height: 1.5rem; vertical-align: -0.35rem; } .bi.bi-xl { width: 1.625rem; height: 1.625rem; vertical-align: -0.35rem; } .bi.bi-2x { width: 2rem; height: 2rem; vertical-align: -0.4rem; } .bi.bi-2-5x { width: 2.5rem; height: 2.5rem; vertical-align: -0.5rem; } .bi.bi-3x { width: 3rem; height: 3rem; vertical-align: -0.6rem; } .bi-spin { -webkit-animation: bi-spin 2s infinite linear; animation: bi-spin 2s infinite linear; } @-webkit-keyframes bi-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes bi-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /* --- Icon definitions (Bootstrap Icons) ----------------------------------- */ /* Each rule sets both -webkit-mask-image and mask-image to the same SVG. */ .bi-arrow-down { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-arrow-left { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-arrow-right { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-arrow-up { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-at { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-book { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-building { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-calendar-heart { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-chat-dots { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-chat-quote { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-check-circle-fill { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-clock { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-download { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-envelope { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-geo-alt { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-globe-europe-africa { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-graph-up-arrow { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-headphones { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-heart { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-hourglass-split { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-megaphone { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-house-heart { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-house-heart-fill { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-pencil { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-people { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-person-hearts { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-piggy-bank { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-star-fill { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-telephone-inbound { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .bi-x { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }