/* ========================================================================== 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-adapter: url("data:image/svg+xml,"); --icon-alert: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-book: url("data:image/svg+xml,"); --icon-cadenas_ouvert: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='iso-8859-1'%3F>%0D%0A%0D%0A"); --icon-checked: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-contact: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-creer: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='iso-8859-1'%3F>%0D%0A%0D%0A"); --icon-default: url("data:image/svg+xml,"); --icon-default1: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-default2: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-engrenage: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-hand-point-left: url("data:image/svg+xml,"); --icon-indice1: url("data:image/svg+xml,"); --icon-indice2-bis: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-indice2: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-indice3: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-indice4: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-indice5: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-indice6: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-information: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-key: url("data:image/svg+xml,"); --icon-law: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-line: url("data:image/svg+xml,"); --icon-minus-circle: url("data:image/svg+xml,"); --icon-plus-circle: url("data:image/svg+xml,"); --icon-question: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-reload: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0Aimage/svg%2Bxml%0A%0A"); --icon-seuil-low: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-seuil-medium: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-seuil-up: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-station_industriel: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-station_periurbaine: url("data:image/svg+xml,"); --icon-station_rurale: url("data:image/svg+xml,"); --icon-station_trafic: url("data:image/svg+xml,"); --icon-station_urbaine: url("data:image/svg+xml,"); --icon-telechargement: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-unchecked: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-warning: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-webatlas: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-window-close: url("data:image/svg+xml,"); } /* Classes. ========================================================================== */ .icon--adapter:before { mask-image: var(--icon-adapter); } .icon--alert:before { mask-image: var(--icon-alert); } .icon--book:before { mask-image: var(--icon-book); } .icon--cadenas_ouvert:before { mask-image: var(--icon-cadenas_ouvert); } .icon--checked:before { mask-image: var(--icon-checked); } .icon--contact:before { mask-image: var(--icon-contact); } .icon--creer:before { mask-image: var(--icon-creer); } .icon--default:before { mask-image: var(--icon-default); } .icon--default1:before { mask-image: var(--icon-default1); } .icon--default2:before { mask-image: var(--icon-default2); } .icon--engrenage:before { mask-image: var(--icon-engrenage); } .icon--hand-point-left:before { mask-image: var(--icon-hand-point-left); } .icon--indice1:before { mask-image: var(--icon-indice1); } .icon--indice2-bis:before { mask-image: var(--icon-indice2-bis); } .icon--indice2:before { mask-image: var(--icon-indice2); } .icon--indice3:before { mask-image: var(--icon-indice3); } .icon--indice4:before { mask-image: var(--icon-indice4); } .icon--indice5:before { mask-image: var(--icon-indice5); } .icon--indice6:before { mask-image: var(--icon-indice6); } .icon--information:before { mask-image: var(--icon-information); } .icon--key:before { mask-image: var(--icon-key); } .icon--law:before { mask-image: var(--icon-law); } .icon--line:before { mask-image: var(--icon-line); } .icon--minus-circle:before { mask-image: var(--icon-minus-circle); } .icon--plus-circle:before { mask-image: var(--icon-plus-circle); } .icon--question:before { mask-image: var(--icon-question); } .icon--reload:before { mask-image: var(--icon-reload); } .icon--seuil-low:before { mask-image: var(--icon-seuil-low); } .icon--seuil-medium:before { mask-image: var(--icon-seuil-medium); } .icon--seuil-up:before { mask-image: var(--icon-seuil-up); } .icon--station_industriel:before { mask-image: var(--icon-station_industriel); } .icon--station_periurbaine:before { mask-image: var(--icon-station_periurbaine); } .icon--station_rurale:before { mask-image: var(--icon-station_rurale); } .icon--station_trafic:before { mask-image: var(--icon-station_trafic); } .icon--station_urbaine:before { mask-image: var(--icon-station_urbaine); } .icon--telechargement:before { mask-image: var(--icon-telechargement); } .icon--unchecked:before { mask-image: var(--icon-unchecked); } .icon--warning:before { mask-image: var(--icon-warning); } .icon--webatlas:before { mask-image: var(--icon-webatlas); } .icon--window-close:before { mask-image: var(--icon-window-close); }