Standaard is het icoon in de cardlist aan de grote kant. Dat ziet er uit zoals hieronder. Vaak is dat niet nodig en zonde van de ruimte, zeker als de applicatie wordt gebruikt op apparaten met een kleiner scherm.
Voeg onderstaande text toe aan custom.css om de icoontjes in cardlijst beter weer te geven. Let op, om dit te laten werken zijn 3 verschillende screentypes nodig, waarin de cardlist het hoofd component is. Voor avatars moet er een screen type worden aangemaakt met het woord “avatar” erin verwerkt. Voor afbeeldingen een screen type met het woord “document” erin verwerkt. Dus bijvoorbeeld drie screen types met deze namen: cardlist, cardlist-avatar en cardlist-document
/* — CARD LIST — */
.cardlist-icon {
width: 30px !important;
height: 30px !important;
min-width: 25px !important;
min-height: 25px !important;
margin-right: 4px !important;
}
.cardlist-icon svg {
width: 70% !important;
height: 70% !important;
margin-left: 4px;
margin-top: 4px;
}
/* AVATARS */
[data-testid*="avatar"] .cardlist-icon, [data-testid*="avatar"] .image-placeholder {
width: 32px !important;
height: 32px !important;
margin-right: 12px !important;
visibility: visible !important;
background-color: #EEEEEE;
border: 1px solid #EEEEEE;
border-radius: 50%;
align-self: self-start;
overflow: hidden;
}
/* IMAGES / DOCUMENTS */
[data-testid*="document"] .cardlist-icon {
width: 75px !important;
max-height: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
margin: auto !important;
margin-right: 12px !important;
visibility: visible !important;
background-color: white;
padding: 1px !important;
border: 1px solid #ddd;
}
[data-testid*="document"] .image-placeholder {
width: 75px !important;
height: 50px !important;
margin: auto !important;
margin-right: 12px!important;
border: 1px solid #ddd;
background-color: white;
}