/* ========================================================================== 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-ampoule: url("data:image/svg+xml,"); --icon-autre: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0Aimage/svg%2Bxml%0A%0A%09.st0%7Bfill:%23BEC33A%3B%7D%0A%0A%0A"); --icon-bus: 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-caret-square-left: url("data:image/svg+xml,"); --icon-caret-square-right: url("data:image/svg+xml,"); --icon-checked: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-chrono: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-co2: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-day_time: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-default: url("data:image/svg+xml,"); --icon-default1: url("data:image/svg+xml,"); --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-deplacement: 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 %0A"); --icon-deplacement_domicile_travail: 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 %0A %0A %0A %0A %0A %0A"); --icon-deplacement_interne: url("data:image/svg+xml,"); --icon-deplacement_one_pers: 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 %0A"); --icon-deplacement_primaire: 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 %0A %0A"); --icon-diesel: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-distance: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-driver: 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-en_savoir_plus: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0Aimage/svg%2Bxml%0A%0A%09.st0%7Bfill:%23DCEAAF%3B%7D%0A%09.st1%7Bfill:%23FFFFFF%3B%7D%0A%0A%0A%09%0A%0A%0A%09%0A%09%09%0A%09%09%0A%09%09%0A%09%09%0A%09%09%0A%09%09%0A%09%09%0A%09%0A%0A"); --icon-equipement_2rm: 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-equipement_velo: 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-fleche_down: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-fleche_up: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-home: url("data:image/svg+xml,"); --icon-information: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A"); --icon-line: url("data:image/svg+xml,"); --icon-livre: url("data:image/svg+xml,"); --icon-map-signs: url("data:image/svg+xml,"); --icon-menage: 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 %0A %0A"); --icon-menage_one_pers: 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 %0A %0A"); --icon-modes-motorise: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A"); --icon-modes_actifs: 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 %0A %0A"); --icon-modes_marche: url("data:image/svg+xml,"); --icon-no_car: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-no_velo: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-permis_de_conduire: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-population: 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 %0A %0A %0A"); --icon-rythme: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-taux_motorisation: 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-tramway: 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-unchecked: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-velo: 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-vertical_dotted: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A%0A"); --icon-voiture-conducteur: 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 %0A %0A"); --icon-voiture: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-voiture_conducteur: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0A%0A %0A %0A %0A %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-voiture_passager: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%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-window-close: url("data:image/svg+xml,"); } /* Classes. ========================================================================== */ .icon--ampoule:before { mask-image: var(--icon-ampoule); } .icon--autre:before { mask-image: var(--icon-autre); } .icon--bus:before { mask-image: var(--icon-bus); } .icon--caret-square-left:before { mask-image: var(--icon-caret-square-left); } .icon--caret-square-right:before { mask-image: var(--icon-caret-square-right); } .icon--checked:before { mask-image: var(--icon-checked); } .icon--chrono:before { mask-image: var(--icon-chrono); } .icon--co2:before { mask-image: var(--icon-co2); } .icon--day_time:before { mask-image: var(--icon-day_time); } .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--deplacement:before { mask-image: var(--icon-deplacement); } .icon--deplacement_domicile_travail:before { mask-image: var(--icon-deplacement_domicile_travail); } .icon--deplacement_interne:before { mask-image: var(--icon-deplacement_interne); } .icon--deplacement_one_pers:before { mask-image: var(--icon-deplacement_one_pers); } .icon--deplacement_primaire:before { mask-image: var(--icon-deplacement_primaire); } .icon--diesel:before { mask-image: var(--icon-diesel); } .icon--distance:before { mask-image: var(--icon-distance); } .icon--driver:before { mask-image: var(--icon-driver); } .icon--en_savoir_plus:before { mask-image: var(--icon-en_savoir_plus); } .icon--equipement_2rm:before { mask-image: var(--icon-equipement_2rm); } .icon--equipement_velo:before { mask-image: var(--icon-equipement_velo); } .icon--fleche_down:before { mask-image: var(--icon-fleche_down); } .icon--fleche_up:before { mask-image: var(--icon-fleche_up); } .icon--home:before { mask-image: var(--icon-home); } .icon--information:before { mask-image: var(--icon-information); } .icon--line:before { mask-image: var(--icon-line); } .icon--livre:before { mask-image: var(--icon-livre); } .icon--map-signs:before { mask-image: var(--icon-map-signs); } .icon--menage:before { mask-image: var(--icon-menage); } .icon--menage_one_pers:before { mask-image: var(--icon-menage_one_pers); } .icon--modes-motorise:before { mask-image: var(--icon-modes-motorise); } .icon--modes_actifs:before { mask-image: var(--icon-modes_actifs); } .icon--modes_marche:before { mask-image: var(--icon-modes_marche); } .icon--no_car:before { mask-image: var(--icon-no_car); } .icon--no_velo:before { mask-image: var(--icon-no_velo); } .icon--permis_de_conduire:before { mask-image: var(--icon-permis_de_conduire); } .icon--population:before { mask-image: var(--icon-population); } .icon--rythme:before { mask-image: var(--icon-rythme); } .icon--taux_motorisation:before { mask-image: var(--icon-taux_motorisation); } .icon--tramway:before { mask-image: var(--icon-tramway); } .icon--unchecked:before { mask-image: var(--icon-unchecked); } .icon--velo:before { mask-image: var(--icon-velo); } .icon--vertical_dotted:before { mask-image: var(--icon-vertical_dotted); } .icon--voiture-conducteur:before { mask-image: var(--icon-voiture-conducteur); } .icon--voiture:before { mask-image: var(--icon-voiture); } .icon--voiture_conducteur:before { mask-image: var(--icon-voiture_conducteur); } .icon--voiture_passager:before { mask-image: var(--icon-voiture_passager); } .icon--warning:before { mask-image: var(--icon-warning); } .icon--window-close:before { mask-image: var(--icon-window-close); }

Edito - Mode : Comparaison de la part modale selon le découpage