pinafore/routes/_components/settings/SettingsListItem.html
Nolan Lawson b2f5f36207
fix(svg): re-inline svg into html (#772)
* Revert "fix(icons): fix icons.svg url (#769)"

This reverts commit 1d34d45da7.

* Revert "perf: use prefetch instead of preload for svgs (#765)"

This reverts commit b73dd548ae.

* Revert "perf: build separate icons.svg file (#762)"

This reverts commit ee45c07314.

* move svg to end of 2xx.html
2018-12-10 00:13:54 -08:00

73 lines
1.6 KiB
HTML

<li class="settings-list-item">
<a {href}>
{#if icon}
<svg class="settings-list-item-svg">
<use xlink:href={icon} />
</svg>
{/if}
<span aria-label={ariaLabel || label} class={offsetForIcon ? 'offset-for-icon' : ''}>
{label}
</span>
</a>
</li>
<style>
.settings-list-item {
border: 1px solid var(--settings-list-item-border);
font-size: 1.3em;
display: flex;
flex-direction: column;
}
.settings-list-item a {
display: flex;
padding: 20px 40px;
background: var(--settings-list-item-bg);
}
.settings-list-item a, .settings-list-item a:visited {
color: var(--settings-list-item-text);
}
.settings-list-item a:hover {
text-decoration: none;
background: var(--settings-list-item-bg-hover);
color: var(--settings-list-item-text-hover);
}
.settings-list-item a:active {
background: var(--settings-list-item-bg-active);
}
.settings-list-item-svg {
width: 24px;
height: 24px;
display: inline-block;
margin-right: 20px;
fill: var(--svg-fill);
}
.settings-list-item .offset-for-icon {
margin-left: 44px;
}
.settings-list-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 767px) {
.settings-list-item a {
padding: 20px 10px;
}
.settings-list-item-svg {
margin-right: 10px;
}
.settings-list-item .offset-for-icon {
margin-left: 34px;
}
}
</style>
<script>
export default {
data: () => ({
icon: void 0,
ariaLabel: void 0,
offsetForIcon: void 0
})
}
</script>