/** * A small set of brand-neutral UI icons, built as CSS mask-image rather than * inline SVG or an icon font: a mask takes its color from `currentColor`, so * an icon always matches whatever text color surrounds it, with no client * color baked into this plugin (see Support\Icons for why this stylesheet is * loaded unconditionally rather than lazily like carousel.css/video.css). * * Two classes together render an icon: the shared `.wordpress-corpo-mask` * base (sizing — 1em square, so it scales with whatever font-size surrounds * it — plus the mask-repeat/position/size plumbing and the currentColor * background) and one `.wordpress-corpo-icon-*` modifier per icon, which * only supplies that icon's mask-image. Neither works alone: `.wordpress- * corpo-mask` with no icon modifier is an invisible zero-image box, and an * icon modifier with no `.wordpress-corpo-mask` sets a mask-image on a * zero-size box, which also renders nothing. A caller always needs both, e.g. * `class="wordpress-corpo-mask wordpress-corpo-icon-search"` (mirroring the * carousel zone's 'options' config, which documents an option's 'icon' as * exactly that pair of classes — see views/zones/carousel/card.php). The * base class lives here rather than per-icon so adding a new icon is a * single mask-image rule, not another copy of the shared declarations. * * Most icons reference their source file directly under * assets/images/icons/ (a relative url() here resolves against this * stylesheet's own location, not the current page, so it works regardless * of where the plugin is installed — no PHP/WORDPRESS_CORPO_URL involved). * A few (power, mileage, arrow-left) have no source file and stay inlined * as data URIs instead — see the dedicated section below. * * A client theme adding its own icons should use its own prefix (e.g. * `icon-*`) rather than `wordpress-corpo-icon-*`, which this * plugin owns. */ .wordpress-corpo-mask { display: inline-block; width: 1em; height: 1em; 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; } /* Sourced from assets/images/icons/ — one rule per file, referenced by URL. */ .wordpress-corpo-icon-accident { -webkit-mask-image: url("images/icons/accident.svg"); mask-image: url("images/icons/accident.svg"); } .wordpress-corpo-icon-arrow { -webkit-mask-image: url("images/icons/arrow.svg"); mask-image: url("images/icons/arrow.svg"); } .wordpress-corpo-icon-arrow-down { -webkit-mask-image: url("images/icons/arrow_down.svg"); mask-image: url("images/icons/arrow_down.svg"); } .wordpress-corpo-icon-arrow-right { -webkit-mask-image: url("images/icons/arrow_right.svg"); mask-image: url("images/icons/arrow_right.svg"); } .wordpress-corpo-icon-arrow-up-right { -webkit-mask-image: url("images/icons/arrow_up_right.svg"); mask-image: url("images/icons/arrow_up_right.svg"); } .wordpress-corpo-icon-axles { -webkit-mask-image: url("images/icons/axles.svg"); mask-image: url("images/icons/axles.svg"); } .wordpress-corpo-icon-calendar { -webkit-mask-image: url("images/icons/calendar.svg"); mask-image: url("images/icons/calendar.svg"); } .wordpress-corpo-icon-check { -webkit-mask-image: url("images/icons/check.svg"); mask-image: url("images/icons/check.svg"); } .wordpress-corpo-icon-clock { -webkit-mask-image: url("images/icons/clock.svg"); mask-image: url("images/icons/clock.svg"); } .wordpress-corpo-icon-electric { -webkit-mask-image: url("images/icons/electric.svg"); mask-image: url("images/icons/electric.svg"); } .wordpress-corpo-icon-email-open { -webkit-mask-image: url("images/icons/email_open.svg"); mask-image: url("images/icons/email_open.svg"); } .wordpress-corpo-icon-facebook { -webkit-mask-image: url("images/icons/facebook.svg"); mask-image: url("images/icons/facebook.svg"); } .wordpress-corpo-icon-facebook-cercle { -webkit-mask-image: url("images/icons/facebook_cercle.svg"); mask-image: url("images/icons/facebook_cercle.svg"); } .wordpress-corpo-icon-fax { -webkit-mask-image: url("images/icons/fax.svg"); mask-image: url("images/icons/fax.svg"); } .wordpress-corpo-icon-filter { -webkit-mask-image: url("images/icons/filter.svg"); mask-image: url("images/icons/filter.svg"); } .wordpress-corpo-icon-gas { -webkit-mask-image: url("images/icons/gas.svg"); mask-image: url("images/icons/gas.svg"); } .wordpress-corpo-icon-height { -webkit-mask-image: url("images/icons/height.svg"); mask-image: url("images/icons/height.svg"); } .wordpress-corpo-icon-kilometer { -webkit-mask-image: url("images/icons/kilometer.svg"); mask-image: url("images/icons/kilometer.svg"); } .wordpress-corpo-icon-link { -webkit-mask-image: url("images/icons/link.svg"); mask-image: url("images/icons/link.svg"); } .wordpress-corpo-icon-mail { -webkit-mask-image: url("images/icons/mail.svg"); mask-image: url("images/icons/mail.svg"); } .wordpress-corpo-icon-map { -webkit-mask-image: url("images/icons/map.svg"); mask-image: url("images/icons/map.svg"); } .wordpress-corpo-icon-more { -webkit-mask-image: url("images/icons/more.svg"); mask-image: url("images/icons/more.svg"); } .wordpress-corpo-icon-motor { -webkit-mask-image: url("images/icons/motor.svg"); mask-image: url("images/icons/motor.svg"); } .wordpress-corpo-icon-occasion { -webkit-mask-image: url("images/icons/occasion.svg"); mask-image: url("images/icons/occasion.svg"); } .wordpress-corpo-icon-phone { -webkit-mask-image: url("images/icons/phone.svg"); mask-image: url("images/icons/phone.svg"); } .wordpress-corpo-icon-phone-ring { -webkit-mask-image: url("images/icons/phone_ring.svg"); mask-image: url("images/icons/phone_ring.svg"); } .wordpress-corpo-icon-picto-peinture { -webkit-mask-image: url("images/icons/picto_peinture.svg"); mask-image: url("images/icons/picto_peinture.svg"); } .wordpress-corpo-icon-search { -webkit-mask-image: url("images/icons/search.svg"); mask-image: url("images/icons/search.svg"); } .wordpress-corpo-icon-share { -webkit-mask-image: url("images/icons/share.svg"); mask-image: url("images/icons/share.svg"); } .wordpress-corpo-icon-speed { -webkit-mask-image: url("images/icons/speed.svg"); mask-image: url("images/icons/speed.svg"); } .wordpress-corpo-icon-star { -webkit-mask-image: url("images/icons/star.svg"); mask-image: url("images/icons/star.svg"); } .wordpress-corpo-icon-weight { -webkit-mask-image: url("images/icons/weight.svg"); mask-image: url("images/icons/weight.svg"); } .wordpress-corpo-icon-weight-regular { -webkit-mask-image: url("images/icons/weight_regular.svg"); mask-image: url("images/icons/weight_regular.svg"); } .wordpress-corpo-icon-whatsapp { -webkit-mask-image: url("images/icons/whatsapp.svg"); mask-image: url("images/icons/whatsapp.svg"); } .wordpress-corpo-icon-x { -webkit-mask-image: url("images/icons/x.svg"); mask-image: url("images/icons/x.svg"); } .wordpress-corpo-icon-youtube-cercle { -webkit-mask-image: url("images/icons/youtube_cercle.svg"); mask-image: url("images/icons/youtube_cercle.svg"); } /* * No source file for these three — inlined as data URIs instead, per this * file's own rule (url() to a real file whenever one exists). 'motor', * 'kilometer' and 'speed' above now cover similar ground to 'power' and * 'mileage' with a properly designed asset; the two hand-drawn ones are * kept only because nothing referenced them yet and removing them would be * a silent breaking change for whoever starts using them meanwhile — worth * revisiting once that's confirmed. 'arrow-left' has no equivalent among * the sourced files at all (only 'arrow', 'arrow-right', 'arrow-down' and * 'arrow-up-right' were provided). */ .wordpress-corpo-icon-power { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E"); } .wordpress-corpo-icon-mileage { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18a9 9 0 1 1 18 0'/%3E%3Cline x1='12' y1='18' x2='16' y2='12'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3Cline x1='18' y1='18' x2='18.01' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18a9 9 0 1 1 18 0'/%3E%3Cline x1='12' y1='18' x2='16' y2='12'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3Cline x1='18' y1='18' x2='18.01' y2='18'/%3E%3C/svg%3E"); } .wordpress-corpo-icon-arrow-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E"); }