Pinafore-Web-Client-Frontend/routes/settings/_components/SettingsListItem.html

47 lines
904 B
HTML

<li>
<a :href>
{{#if icon}}
<svg>
<use xlink:href="{{icon}}" />
</svg>
{{/if}}
<span class="{{offsetForIcon ? 'offset-for-icon' : ''}}">
{{label}}
</span>
</a>
</li>
<style>
li {
border: 1px solid var(--settings-list-item-border);
font-size: 1.3em;
display: flex;
flex-direction: column;
}
a {
display: flex;
padding: 20px;
background: var(--settings-list-item-bg);
}
a, a:visited {
color: var(--settings-list-item-text);
}
a:hover {
text-decoration: none;
background: var(--settings-list-item-bg-hover);
color: var(--settings-list-item-text-hover);
}
a:active {
background: var(--settings-list-item-bg-active);
}
svg {
width: 24px;
height: 24px;
display: inline-block;
margin-right: 20px;
fill: var(--svg-fill);
}
.offset-for-icon {
margin-left: 44px;
}
</style>