mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 14:34:05 +02:00
39 lines
1.4 KiB
HTML
39 lines
1.4 KiB
HTML
|
<div class="figure-wrapper">
|
||
|
|
<figure
|
||
|
|
class="styled-example icon"
|
||
|
|
aria-label="Image of a list and icon list items of food names with a different theme applied"
|
||
|
|
style="padding-block: 16px;">
|
||
|
|
<style>
|
||
|
|
.styled-example.icon md-list {
|
||
|
|
--md-list-container-color: #f4fbfa;
|
||
|
|
--md-list-item-label-text-color: #161d1d;
|
||
|
|
--md-list-item-supporting-text-color: #3f4948;
|
||
|
|
--md-list-item-trailing-supporting-text-color: #3f4948;
|
||
|
|
--md-list-item-leading-icon-color: #006a6a;
|
||
|
|
--md-list-item-trailing-icon-color: #006a6a;
|
||
|
|
--md-list-item-leading-icon-size: 20px;
|
||
|
|
--md-list-item-trailing-icon-size: 20px;
|
||
|
|
}
|
||
|
|
.styled-example.icon md-list .unhealthy {
|
||
|
|
--md-list-item-trailing-icon-color: #ba1a1a;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<md-list>
|
||
|
|
<md-list-item>
|
||
|
|
<div slot="headline">Eggs</div>
|
||
|
|
<md-icon slot="start">egg</md-icon>
|
||
|
|
<md-icon slot="end">recommend</md-icon>
|
||
|
|
</md-list-item>
|
||
|
|
<md-list-item class="unhealthy">
|
||
|
|
<div slot="headline">Ice Cream</div>
|
||
|
|
<md-icon slot="start">icecream</md-icon>
|
||
|
|
<md-icon slot="end">dangerous</md-icon>
|
||
|
|
</md-list-item>
|
||
|
|
<md-list-item>
|
||
|
|
<div slot="headline">Orange</div>
|
||
|
|
<md-icon slot="start">nutrition</md-icon>
|
||
|
|
<md-icon slot="end">recommend</md-icon>
|
||
|
|
</md-list-item>
|
||
|
|
</md-list>
|
||
|
|
</figure>
|
||
|
|
</div>
|