Backgrounds
Backgrounds tokens definitions
| Shadow name | Value | |
|---|---|---|
| gradient-1-vertical | linear-gradient(0deg, rgba(31,31,31,0) 0%, rgba(31,31,31,1) 100%) | |
| gradient-1-vertical-reverse | linear-gradient(0deg, rgba(31,31,31,1) 0%, rgba(31,31,31,0) 100%) | |
| gradient-2-vertical | linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%) | |
| gradient-2-vertical-reverse | linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%) | |
| select-dark | right my-spacing(sm) top 50% / my-font-size(xxs) no-repeat my-color(translucid-dark-1) url(data:image/svg+xml;base64 | PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjEzMyAwTDE2IDEuODY3bC04IDgtOC04TDEuODY3IDAgOCA2LjEzM3oiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) |
| select-light | right my-spacing(sm) top 50% / my-font-size(sm2) no-repeat my-color(neutral-light-max) url(../img/icons/chevron-down.svg) | |
| select-light-borderless | right 0% top 50% / my-font-size(sm2) no-repeat my-color(neutral-light-max) url(../img/icons/chevron-down.svg) | |
| omnisearch | right my-spacing(sm) top 50% / my-font-size(md) no-repeat my-color(neutral-light-max) url(../img/icons/mic.svg) | |
| search | left my-spacing(sm) top 50% / my-font-size(md) no-repeat my-color(neutral-light-max) url(../img/icons/search.svg) | |
| horaires | right my-spacing(sm) top 50% / my-font-size(md) no-repeat my-color(neutral-light-max) url(../img/icons/horaires.svg) | |
| map | right my-spacing(sm) top 50% / my-font-size(md) no-repeat my-color(neutral-light-max) url(../img/icons/map.svg) |
<div class="u-bg-gradient-1-vertical"></div>
<div class="u-bg-gradient-1-vertical-reverse"></div>
<div class="u-bg-gradient-2-vertical"></div>
<div class="u-bg-gradient-2-vertical-reverse"></div>
<div class="u-bg-select-dark"></div>
<div class="u-bg-select-light"></div>
<div class="u-bg-select-light-borderless"></div>
<div class="u-bg-omnisearch"></div>
<div class="u-bg-search"></div>
<div class="u-bg-horaires"></div>
<div class="u-bg-map"></div>
<!-- DEMO ONLY -->
<style>
body{padding:2em}
div{padding:2em;margin-bottom:1em;}
</style>