Pinafore-Web-Client-Frontend/routes/_components/NavItem.html

70 lines
1.5 KiB
HTML
Raw Normal View History

2018-01-22 05:02:32 +01:00
<a class='main-nav-link {{forceCurrent || page === name ? "selected" : ""}}'
aria-label='{{forceCurrent || page === name ? `${label} (current page)` : label}}'
aria-current="{{forceCurrent || page === name}}"
2018-01-18 08:00:33 +01:00
href='{{href}}'>
2018-01-13 08:24:05 +01:00
<svg>
<use xlink:href="{{svg}}" />
</svg>
<span>{{label}}</span>
</a>
<style>
.main-nav-link {
2018-01-13 08:24:05 +01:00
border-bottom: 1px solid var(--nav-a-border);
text-decoration: none;
padding: 25px 20px;
display: flex;
justify-content: center;
align-items: center;
}
.main-nav-link.selected {
2018-01-13 08:24:05 +01:00
border-bottom: 1px solid var(--nav-a-selected-border);
background: var(--nav-a-selected-bg);
}
.main-nav-link.selected:hover {
2018-01-13 08:24:05 +01:00
border-bottom: 1px solid var(--nav-a-selected-border-hover);
background: var(--nav-a-selected-bg-hover);
}
.main-nav-link:hover {
2018-01-13 08:24:05 +01:00
background-color: var(--nav-a-bg-hover);
border-bottom: 1px solid var(--nav-a-border-hover);
}
.main-nav-link:hover span {
2018-01-13 08:24:05 +01:00
color: var(--nav-text-color-hover);
}
.main-nav-link:hover svg {
2018-01-13 08:24:05 +01:00
fill: var(--nav-svg-fill-hover);
}
.main-nav-link svg {
2018-01-13 08:24:05 +01:00
width: 20px;
height: 20px;
display: inline-block;
fill: var(--nav-svg-fill);
}
.main-nav-link span {
2018-01-13 08:24:05 +01:00
font-size: 16px;
color: var(--nav-text-color);
padding-left: 10px;
2018-01-23 06:16:27 +01:00
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2018-01-13 08:24:05 +01:00
}
@media (max-width: 767px) {
.main-nav-link span {
2018-01-13 08:24:05 +01:00
display: none;
}
.main-nav-link svg {
2018-01-13 08:24:05 +01:00
width: 25px;
height: 25px;
}
}
</style>
<script>
</script>