fix: back button icon rendering inconsistently (#2306)
Depending on the operating system and therefore the system font the back icon being a unicode arrow means it'll render inconsistently, sometimes I've seen it looking really odd. Instead make use of the font awesome arrow so that'll it render consistently no matter ths system font.
This commit is contained in:
parent
97e3b04f1f
commit
3fb152ac7c
|
@ -1,5 +1,6 @@
|
|||
export default [
|
||||
{ id: 'pinafore-logo', src: 'src/static/sailboat.svg', inline: true },
|
||||
{ id: 'fa-arrow-left', src: 'src/thirdparty/font-awesome-svg-png/white/svg/arrow-left.svg' },
|
||||
{ id: 'fa-bell', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell.svg', inline: true },
|
||||
{ id: 'fa-bell-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell-o.svg' },
|
||||
{ id: 'fa-users', src: 'src/thirdparty/font-awesome-svg-png/white/svg/users.svg', inline: true },
|
||||
|
|
|
@ -8,7 +8,10 @@
|
|||
<button type="button"
|
||||
class="dynamic-page-go-back"
|
||||
aria-label="{intl.goBack}"
|
||||
on:click|preventDefault="onGoBack()">{intl.back}</button>
|
||||
on:click|preventDefault="onGoBack()">
|
||||
<SvgIcon className="dynamic-page-go-back-icon" href="#fa-arrow-left" />
|
||||
{intl.back}
|
||||
</button>
|
||||
</div>
|
||||
<Shortcut key="Backspace" on:pressed="onGoBack()"/>
|
||||
<style>
|
||||
|
@ -34,19 +37,25 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
.dynamic-page-go-back {
|
||||
font-size: 1.3em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-self: flex-end;
|
||||
font-size: 1.2857142857142858em;
|
||||
color: var(--anchor-text);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.dynamic-page-go-back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.dynamic-page-go-back::before {
|
||||
content: '←';
|
||||
margin-right: 5px;
|
||||
:global(.dynamic-page-go-back-icon) {
|
||||
position: relative;
|
||||
bottom: 0.06em;
|
||||
margin-right: 0.2em;
|
||||
height: 0.66666666em;
|
||||
width: 0.66666666em;
|
||||
fill: currentColor;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.dynamic-page-banner {
|
||||
|
|
Loading…
Reference in New Issue