pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

font-awesome icons for show/hide chevrons in sidenav toggle

Browse Source
This commit is contained in:
dandds 2019-02-11 17:41:08 -05:00
parent fca898ffa0
commit cdd7836292
5 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/icons/angle-double-left-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-left" class="svg-inline--fa fa-angle-double-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 630 B

1
static/icons/angle-double-right-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-right" class="svg-inline--fa fa-angle-double-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 634 B

4
styles/elements/_icons.scss
View File

@ -67,6 +67,10 @@
@include icon-color($color-gray);
}
&.icon--blue {
@include icon-color($color-blue-darker);
}
&.icon--medium {
@include icon-size(12);
}

4
styles/elements/_sidenav.scss
View File

@ -31,6 +31,10 @@
@include sidenav__header;
float: right;
color: $color-blue-darker;
.toggle-arrows {
vertical-align: middle;
}
}
ul {

6
templates/navigation/global_sidenav.html
View File

@ -7,10 +7,12 @@
<div v-bind:class="{'global-navigation': true, 'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
<a href="#" v-on:click="props.toggle" class="sidenav__toggle">
<template v-if="props.isVisible">
<< Hide
{{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }}
Hide
</template>
<template v-else>
Show >>
Show
{{ Icon('angle-double-right-solid', classes="toggle-arrows icon--blue") }}
</template>
</a>
<div v-if="props.isVisible">