/* ========================================================================== Icon library. ========================================================================== */ .icon { --icon-size: 16px; width: var(--icon-size); height: var(--icon-size); &:before { content: ""; display: inline-block; width: inherit; height: inherit; mask-repeat: no-repeat; mask-position: center; mask-size: var(--icon-size); background: var(--color-fg); transition: var(--transition); } } /* Variables. ========================================================================== */ :root { --icon-default: url("data:image/svg+xml,"); --icon-default1: url("data:image/svg+xml,"); --icon-env: url("data:image/svg+xml,"); --icon-fbp: url("data:image/svg+xml,"); --icon-lab: url("data:image/svg+xml,"); --icon-line: url("data:image/svg+xml,"); --icon-overall: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A"); --icon-phone: url("data:image/svg+xml,"); --icon-sup: url("data:image/svg+xml,"); --icon-z_handle_e: url("data:image/svg+xml,"); --icon-z_handle_w: url("data:image/svg+xml,"); } /* Classes. ========================================================================== */ .icon--default:before { mask-image: var(--icon-default); } .icon--default1:before { mask-image: var(--icon-default1); } .icon--env:before { mask-image: var(--icon-env); } .icon--fbp:before { mask-image: var(--icon-fbp); } .icon--lab:before { mask-image: var(--icon-lab); } .icon--line:before { mask-image: var(--icon-line); } .icon--overall:before { mask-image: var(--icon-overall); } .icon--phone:before { mask-image: var(--icon-phone); } .icon--sup:before { mask-image: var(--icon-sup); } .icon--z_handle_e:before { mask-image: var(--icon-z_handle_e); } .icon--z_handle_w:before { mask-image: var(--icon-z_handle_w); }

Log in