Varjot
Varjostusominaisuudet lisäävät varjotehosteita elementin kehän ympärille. Varjostukset merkitsevät käyttöliittymässä päällekkäin olevia kohteita.
Varjostukset sopeutuvat automaattisesti sekä vaaleisiin että tummiin teemoihin, ja ne näyttävät voimakkaammilta tummassa tilassa paremman näkyvyyden saavuttamiseksi.
Esimerkki
.element {
box-shadow: var(--dwc-shadow-xl);
}
Muuttujat
| Muuttuja | Kuvaus |
|---|---|
--dwc-shadow-xs | Erittäin pieni varjo (1 kerros) |
--dwc-shadow-s | Pieni varjo (2 kerrosta) |
--dwc-shadow-m | Keskikokoinen varjo (3 kerrosta, oletus) |
--dwc-shadow-l | Suuri varjo (4 kerrosta) |
--dwc-shadow-xl | Erittäin suuri varjo (5 kerrosta) |
--dwc-shadow-2xl | Kaksois-erittäin suuri varjo (6 kerrosta) |
--dwc-shadow | var(--dwc-shadow-m) |
