/* ========================================================================== 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-agrocarburants: url("data:image/svg+xml,"); --icon-ampoule: url("data:image/svg+xml,"); --icon-biogaz: url("data:image/svg+xml,"); --icon-bois_energie: 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 %0A %0A image/svg%2Bxml%0A %0A %0A %0A %0A %0A %0A %0A %0A"); --icon-cultures_energetiques: url("data:image/svg+xml,"); --icon-default-unchecked: url("data:image/svg+xml,"); --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-default3: 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-default4: 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-default5: 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-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-energie_aucune: url("data:image/svg+xml,"); --icon-energie_autres-non_enr: url("data:image/svg+xml,"); --icon-energie_autres_enr: url("data:image/svg+xml,"); --icon-energie_bois_buche: url("data:image/svg+xml,"); --icon-energie_bois_energie: url("data:image/svg+xml,"); --icon-energie_chaleur_froid: url("data:image/svg+xml,"); --icon-energie_chaleur_reseaux: url("data:image/svg+xml,"); --icon-energie_cms: url("data:image/svg+xml,"); --icon-energie_electricite: url("data:image/svg+xml,"); --icon-energie_froid: url("data:image/svg+xml,"); --icon-energie_gaz-naturel: url("data:image/svg+xml,"); --icon-energie_granules: url("data:image/svg+xml,"); --icon-energie_plaquette: url("data:image/svg+xml,"); --icon-energie_produits_petroliers: url("data:image/svg+xml,"); --icon-eolien: url("data:image/svg+xml,"); --icon-extraction_petrole: url("data:image/svg+xml,"); --icon-geothermie: url("data:image/svg+xml,"); --icon-geothermie_tres_haute_energie: url("data:image/svg+xml,"); --icon-help: 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-hydraulique: url("data:image/svg+xml,"); --icon-incineration_dechets: url("data:image/svg+xml,"); --icon-minus-circle: url("data:image/svg+xml,"); --icon-minus: 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-newletter: url("data:image/svg+xml,"); --icon-nucleaire: url("data:image/svg+xml,"); --icon-plus-circle: url("data:image/svg+xml,"); --icon-plus: 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-pompes_chaleur: url("data:image/svg+xml,"); --icon-reload: url("data:image/svg+xml,<%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F>%0Aimage/svg%2Bxml%0A%0A"); --icon-secteur_agriculture: url("data:image/svg+xml,"); --icon-secteur_autres_transports: url("data:image/svg+xml,"); --icon-secteur_branche_energie: url("data:image/svg+xml,"); --icon-secteur_industries: url("data:image/svg+xml,"); --icon-secteur_residentiel: url("data:image/svg+xml,"); --icon-secteur_tertiaire: url("data:image/svg+xml,"); --icon-secteur_transport_routier: url("data:image/svg+xml,"); --icon-secteurs_dechets: url("data:image/svg+xml,"); --icon-solaire_photovoltaique: url("data:image/svg+xml,"); --icon-solaire_thermique: url("data:image/svg+xml,"); --icon-stable: 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-telechargement: 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-test: 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-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-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-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,"); --icon-youtube: url("data:image/svg+xml,"); --icon-z_handle_e: url("data:image/svg+xml,"); --icon-z_handle_w: url("data:image/svg+xml,"); --icon-zoom: 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"); } /* Classes. ========================================================================== */ .icon--agrocarburants:before { mask-image: var(--icon-agrocarburants); } .icon--ampoule:before { mask-image: var(--icon-ampoule); } .icon--biogaz:before { mask-image: var(--icon-biogaz); } .icon--bois_energie:before { mask-image: var(--icon-bois_energie); } .icon--checked:before { mask-image: var(--icon-checked); } .icon--cultures_energetiques:before { mask-image: var(--icon-cultures_energetiques); } .icon--default-unchecked:before { mask-image: var(--icon-default-unchecked); } .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--default3:before { mask-image: var(--icon-default3); } .icon--default4:before { mask-image: var(--icon-default4); } .icon--default5:before { mask-image: var(--icon-default5); } .icon--down:before { mask-image: var(--icon-down); } .icon--energie_aucune:before { mask-image: var(--icon-energie_aucune); } .icon--energie_autres-non_enr:before { mask-image: var(--icon-energie_autres-non_enr); } .icon--energie_autres_enr:before { mask-image: var(--icon-energie_autres_enr); } .icon--energie_bois_buche:before { mask-image: var(--icon-energie_bois_buche); } .icon--energie_bois_energie:before { mask-image: var(--icon-energie_bois_energie); } .icon--energie_chaleur_froid:before { mask-image: var(--icon-energie_chaleur_froid); } .icon--energie_chaleur_reseaux:before { mask-image: var(--icon-energie_chaleur_reseaux); } .icon--energie_cms:before { mask-image: var(--icon-energie_cms); } .icon--energie_electricite:before { mask-image: var(--icon-energie_electricite); } .icon--energie_froid:before { mask-image: var(--icon-energie_froid); } .icon--energie_gaz-naturel:before { mask-image: var(--icon-energie_gaz-naturel); } .icon--energie_granules:before { mask-image: var(--icon-energie_granules); } .icon--energie_plaquette:before { mask-image: var(--icon-energie_plaquette); } .icon--energie_produits_petroliers:before { mask-image: var(--icon-energie_produits_petroliers); } .icon--eolien:before { mask-image: var(--icon-eolien); } .icon--extraction_petrole:before { mask-image: var(--icon-extraction_petrole); } .icon--geothermie:before { mask-image: var(--icon-geothermie); } .icon--geothermie_tres_haute_energie:before { mask-image: var(--icon-geothermie_tres_haute_energie); } .icon--help:before { mask-image: var(--icon-help); } .icon--hydraulique:before { mask-image: var(--icon-hydraulique); } .icon--incineration_dechets:before { mask-image: var(--icon-incineration_dechets); } .icon--minus-circle:before { mask-image: var(--icon-minus-circle); } .icon--minus:before { mask-image: var(--icon-minus); } .icon--newletter:before { mask-image: var(--icon-newletter); } .icon--nucleaire:before { mask-image: var(--icon-nucleaire); } .icon--plus-circle:before { mask-image: var(--icon-plus-circle); } .icon--plus:before { mask-image: var(--icon-plus); } .icon--pompes_chaleur:before { mask-image: var(--icon-pompes_chaleur); } .icon--reload:before { mask-image: var(--icon-reload); } .icon--secteur_agriculture:before { mask-image: var(--icon-secteur_agriculture); } .icon--secteur_autres_transports:before { mask-image: var(--icon-secteur_autres_transports); } .icon--secteur_branche_energie:before { mask-image: var(--icon-secteur_branche_energie); } .icon--secteur_industries:before { mask-image: var(--icon-secteur_industries); } .icon--secteur_residentiel:before { mask-image: var(--icon-secteur_residentiel); } .icon--secteur_tertiaire:before { mask-image: var(--icon-secteur_tertiaire); } .icon--secteur_transport_routier:before { mask-image: var(--icon-secteur_transport_routier); } .icon--secteurs_dechets:before { mask-image: var(--icon-secteurs_dechets); } .icon--solaire_photovoltaique:before { mask-image: var(--icon-solaire_photovoltaique); } .icon--solaire_thermique:before { mask-image: var(--icon-solaire_thermique); } .icon--stable:before { mask-image: var(--icon-stable); } .icon--telechargement:before { mask-image: var(--icon-telechargement); } .icon--test:before { mask-image: var(--icon-test); } .icon--unchecked:before { mask-image: var(--icon-unchecked); } .icon--up:before { mask-image: var(--icon-up); } .icon--warning:before { mask-image: var(--icon-warning); } .icon--window-close:before { mask-image: var(--icon-window-close); } .icon--youtube:before { mask-image: var(--icon-youtube); } .icon--z_handle_e:before { mask-image: var(--icon-z_handle_e); } .icon--z_handle_w:before { mask-image: var(--icon-z_handle_w); } .icon--zoom:before { mask-image: var(--icon-zoom); }

Outils & Ressources