Sombras
Las sombras son valores de sombreado compatibles con la capacidad de respuesta a un elemento o un subconjunto de sus lados con clases abreviadas. Incluye soporte para propiedades individuales. Se definieron nuevas sombras dobles para distintos casos, habiendo 4 tipos en particular, para sombras oscuras, y 3 para sombras de colores.
Playground
box-shadow: $box-shadow-1-blueberry;
Lista de variables
| Variable | Sombra | Colores disponibles |
|---|---|---|
| $box-shadows-0 | 0 | - |
| $box-shadows-1 | 0 1px 2px rgba($basic-900, 0.24), 0 2px 6px rgba($basic-900, 0.16); | Base $box-shadows-blueberry $box-shadows-peach $box-shadows-kiwi $box-shadows-watermelon |
| $box-shadows-2 | 0 2px 4px rgba($basic-900, 0.24), 0 4px 8px rgba($basic-900, 0.16); | Base $box-shadows-blueberry $box-shadows-peach $box-shadows-kiwi $box-shadows-watermelon |
| $box-shadows-3 | 0 4px 8px rgba($basic-900, 0.16), 0 8px 16px rgba($basic-900, 0.1); | Base $box-shadows-blueberry $box-shadows-peach $box-shadows-kiwi $box-shadows-watermelon |
| $box-shadows-4 | 0 6px 12px rgba($basic-900, 0.14), 0 16px 24px rgba($basic-900, 0.08); | Base |