pinafore/routes/_components/settings/SettingsListItem.html

70 lines
1.6 KiB
HTML
Raw Normal View History

<li class="settings-list-item">
2018-01-14 05:07:11 +01:00
<a :href>
{{#if icon}}
<svg class="settings-list-item-svg">
<use xlink:href={{icon}} />
2018-01-14 05:07:11 +01:00
</svg>
{{/if}}
2018-01-21 10:19:28 +01:00
{{#if ariaLabel}}
<span aria-label={{ariaLabel}} class={{offsetForIcon ? 'offset-for-icon' : ''}}>
2018-01-21 10:19:28 +01:00
{{label}}
</span>
{{else}}
<span class={{offsetForIcon ? 'offset-for-icon' : ''}}>
2018-01-14 05:07:11 +01:00
{{label}}
</span>
2018-01-21 10:19:28 +01:00
{{/if}}
2018-01-14 05:07:11 +01:00
</a>
</li>
2018-01-13 21:12:17 +01:00
<style>
2018-02-02 03:33:40 +01:00
.settings-list-item {
2018-01-13 21:12:17 +01:00
border: 1px solid var(--settings-list-item-border);
font-size: 1.3em;
display: flex;
flex-direction: column;
}
.settings-list-item a {
2018-01-14 05:07:11 +01:00
display: flex;
2018-02-04 01:15:46 +01:00
padding: 20px 40px;
2018-01-14 05:07:11 +01:00
background: var(--settings-list-item-bg);
}
.settings-list-item a, .settings-list-item a:visited {
2018-01-13 21:12:17 +01:00
color: var(--settings-list-item-text);
}
.settings-list-item a:hover {
2018-01-13 21:12:17 +01:00
text-decoration: none;
background: var(--settings-list-item-bg-hover);
color: var(--settings-list-item-text-hover);
}
.settings-list-item a:active {
2018-01-13 21:12:17 +01:00
background: var(--settings-list-item-bg-active);
}
.settings-list-item-svg {
2018-01-14 05:07:11 +01:00
width: 24px;
height: 24px;
display: inline-block;
margin-right: 20px;
fill: var(--svg-fill);
}
.settings-list-item .offset-for-icon {
2018-01-14 05:07:11 +01:00
margin-left: 44px;
}
2018-01-21 00:37:40 +01:00
.settings-list-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2018-01-14 05:07:11 +01:00
2018-01-31 18:06:06 +01:00
@media (max-width: 767px) {
.settings-list-item a {
padding: 20px 10px;
}
.settings-list-item-svg {
2018-01-31 18:06:06 +01:00
margin-right: 10px;
}
.settings-list-item .offset-for-icon {
margin-left: 34px;
}
}
2018-01-13 21:12:17 +01:00
</style>