random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed the method of adding main navigation icons.

Browse Source 
Created a png sprite sized @2x based on largest usage (for retina).
This will fix some rendering issues caused by using svg images.
It will allow adding depth and more color / shading if we choose later.
This commit is contained in:
Dank Gabs 2019-07-16 00:07:51 -04:00
parent 6226cc1dfd
commit eed65d2d04
17 changed files with 83 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/gabsocial/features/ui/components/tabs_bar.js
View File

@ -24,9 +24,9 @@ export const privateLinks = [
<NotificationsCounterIcon />
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
</NavLink>,
// <NavLink className='tabs-bar__link home' to='/groups' data-preview-title-id='column.groups' >
// <FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
// </NavLink>,
<NavLink className='tabs-bar__link groups' to='/groups' data-preview-title-id='column.groups' >
<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
</NavLink>,
<NavLink className='tabs-bar__link optional' to='/search' data-preview-title-id='tabs_bar.search' >
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
</NavLink>,

1
app/javascript/images/gab-icons/icon-explore-00d177.svg
View File

@ -1 +0,0 @@
<svg id="icon-explore" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><defs><style>.cls-1{fill:#00d177;}</style></defs><title>icon-explore-00d177</title><path id="_00d177" data-name="00d177" class="cls-1" d="M10,0a7,7,0,1,0,7,7A7,7,0,0,0,10,0Zm2.32,10.09-.32.32a.75.75,0,0,0-.17.3,3.79,3.79,0,0,1-.14.48l-.49,1.32a5.26,5.26,0,0,1-1.2.14v-.78a2.11,2.11,0,0,0-.64-1.44.9.9,0,0,1-.26-.64V8.88a.9.9,0,0,0-.47-.79c-.4-.22-1-.53-1.38-.73a4.18,4.18,0,0,1-.89-.62l0,0a3.12,3.12,0,0,1-.51-.58l-1-1.45A5.68,5.68,0,0,1,7.77,1.82l.67.34a.46.46,0,0,0,.66-.41V1.43a5.06,5.06,0,0,1,.69-.06l.79.79a.45.45,0,0,1,0,.64l-.13.14-.29.29a.22.22,0,0,0,0,.32l.13.13a.22.22,0,0,1,0,.32l-.22.22a.21.21,0,0,1-.16.07H9.65a.2.2,0,0,0-.15.06l-.28.28a.21.21,0,0,0-.05.26l.44.88a.22.22,0,0,1-.2.33H9.25A.22.22,0,0,1,9.1,6l-.26-.23a.46.46,0,0,0-.44-.08L7.52,6a.33.33,0,0,0-.23.32.33.33,0,0,0,.19.3l.31.16a2,2,0,0,0,.86.2c.29,0,.63.77.9.9h1.88a.91.91,0,0,1,.64.27l.39.38a.88.88,0,0,1,.25.61A1.29,1.29,0,0,1,12.32,10.09Zm2.45-2.57a.74.74,0,0,1-.4-.29l-.51-.76a.68.68,0,0,1,0-.75l.56-.83a.58.58,0,0,1,.26-.23L15,4.48A5.48,5.48,0,0,1,15.65,7a5.83,5.83,0,0,1-.06.72Z" transform="translate(-3)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

1
app/javascript/images/gab-icons/icon-explore-d8d8d8.svg
View File

@ -1 +0,0 @@
<svg id="icon-explore" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><defs><style>.cls-1{fill:#d8d8d8;}</style></defs><title>icon-explore-d8d8d8</title><path id="d8d8d8" class="cls-1" d="M10,0a7,7,0,1,0,7,7A7,7,0,0,0,10,0Zm2.32,10.09-.32.32a.75.75,0,0,0-.17.3,3.79,3.79,0,0,1-.14.48l-.49,1.32a5.26,5.26,0,0,1-1.2.14v-.78a2.11,2.11,0,0,0-.64-1.44.9.9,0,0,1-.26-.64V8.88a.9.9,0,0,0-.47-.79c-.4-.22-1-.53-1.38-.73a4.18,4.18,0,0,1-.89-.62l0,0a3.12,3.12,0,0,1-.51-.58l-1-1.45A5.68,5.68,0,0,1,7.77,1.82l.67.34a.46.46,0,0,0,.66-.41V1.43a5.06,5.06,0,0,1,.69-.06l.79.79a.45.45,0,0,1,0,.64l-.13.14-.29.29a.22.22,0,0,0,0,.32l.13.13a.22.22,0,0,1,0,.32l-.22.22a.21.21,0,0,1-.16.07H9.65a.2.2,0,0,0-.15.06l-.28.28a.21.21,0,0,0-.05.26l.44.88a.22.22,0,0,1-.2.33H9.25A.22.22,0,0,1,9.1,6l-.26-.23a.46.46,0,0,0-.44-.08L7.52,6a.33.33,0,0,0-.23.32.33.33,0,0,0,.19.3l.31.16a2,2,0,0,0,.86.2c.29,0,.63.77.9.9h1.88a.91.91,0,0,1,.64.27l.39.38a.88.88,0,0,1,.25.61A1.29,1.29,0,0,1,12.32,10.09Zm2.45-2.57a.74.74,0,0,1-.4-.29l-.51-.76a.68.68,0,0,1,0-.75l.56-.83a.58.58,0,0,1,.26-.23L15,4.48A5.48,5.48,0,0,1,15.65,7a5.83,5.83,0,0,1-.06.72Z" transform="translate(-3)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

1
app/javascript/images/gab-icons/icon-explore-sprite.svg
View File

@ -1 +0,0 @@
<svg id="icon-explore" xmlns="http://www.w3.org/2000/svg" width="14" height="114" viewBox="0 0 14 114"><defs><style>.cls-1{fill:#d8d8d8;}.cls-2{fill:#00d177;}</style></defs><title>icon-explore-sprite</title><path id="d8d8d8" class="cls-1" d="M10,100a7,7,0,1,0,7,7A7,7,0,0,0,10,100Zm2.32,10.09-.32.32a.75.75,0,0,0-.17.3,3.79,3.79,0,0,1-.14.48l-.49,1.32a5.26,5.26,0,0,1-1.2.14v-.78a2.11,2.11,0,0,0-.64-1.44.9.9,0,0,1-.26-.64v-.91a.9.9,0,0,0-.47-.79c-.4-.22-1-.53-1.38-.73a4.18,4.18,0,0,1-.89-.62l0,0a3.12,3.12,0,0,1-.51-.58l-1-1.45a5.68,5.68,0,0,1,2.92-2.87l.67.34a.46.46,0,0,0,.66-.41v-.32a5.06,5.06,0,0,1,.69-.06l.79.79a.45.45,0,0,1,0,.64l-.13.14-.29.29a.22.22,0,0,0,0,.32l.13.13a.22.22,0,0,1,0,.32l-.22.22a.21.21,0,0,1-.16.07H9.65a.2.2,0,0,0-.15.06l-.28.28a.21.21,0,0,0-.05.26l.44.88a.22.22,0,0,1-.2.33H9.25A.22.22,0,0,1,9.1,106l-.26-.23a.46.46,0,0,0-.44-.08l-.88.29a.33.33,0,0,0-.23.32.33.33,0,0,0,.19.3l.31.16a2,2,0,0,0,.86.2c.29,0,.63.77.9.9h1.88a.91.91,0,0,1,.64.27l.39.38a.88.88,0,0,1,.25.61A1.29,1.29,0,0,1,12.32,110.09Zm2.45-2.57a.74.74,0,0,1-.4-.29l-.51-.76a.68.68,0,0,1,0-.75l.56-.83a.58.58,0,0,1,.26-.23l.36-.18a5.48,5.48,0,0,1,.61,2.52,5.83,5.83,0,0,1-.06.72Z" transform="translate(-3)"/><path id="_00d177" data-name="00d177" class="cls-2" d="M10,0a7,7,0,1,0,7,7A7,7,0,0,0,10,0Zm2.32,10.09-.32.32a.75.75,0,0,0-.17.3,3.79,3.79,0,0,1-.14.48l-.49,1.32a5.26,5.26,0,0,1-1.2.14v-.78a2.11,2.11,0,0,0-.64-1.44.9.9,0,0,1-.26-.64V8.88a.9.9,0,0,0-.47-.79c-.4-.22-1-.53-1.38-.73a4.18,4.18,0,0,1-.89-.62l0,0a3.12,3.12,0,0,1-.51-.58l-1-1.45A5.68,5.68,0,0,1,7.77,1.82l.67.34a.46.46,0,0,0,.66-.41V1.43a5.06,5.06,0,0,1,.69-.06l.79.79a.45.45,0,0,1,0,.64l-.13.14-.29.29a.22.22,0,0,0,0,.32l.13.13a.22.22,0,0,1,0,.32l-.22.22a.21.21,0,0,1-.16.07H9.65a.2.2,0,0,0-.15.06l-.28.28a.21.21,0,0,0-.05.26l.44.88a.22.22,0,0,1-.2.33H9.25A.22.22,0,0,1,9.1,6l-.26-.23a.46.46,0,0,0-.44-.08L7.52,6a.33.33,0,0,0-.23.32.33.33,0,0,0,.19.3l.31.16a2,2,0,0,0,.86.2c.29,0,.63.77.9.9h1.88a.91.91,0,0,1,.64.27l.39.38a.88.88,0,0,1,.25.61A1.29,1.29,0,0,1,12.32,10.09Zm2.45-2.57a.74.74,0,0,1-.4-.29l-.51-.76a.68.68,0,0,1,0-.75l.56-.83a.58.58,0,0,1,.26-.23L15,4.48A5.48,5.48,0,0,1,15.65,7a5.83,5.83,0,0,1-.06.72Z" transform="translate(-3)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

1
app/javascript/images/gab-icons/icon-home-00d177.svg
View File

@ -1 +0,0 @@
<svg id="icon-home" xmlns="http://www.w3.org/2000/svg" width="16.11" height="14" viewBox="0 0 16.11 14"><defs><style>.cls-1{fill:#00d177;}</style></defs><title>navigation-icon-master</title><path id="_00d177" data-name="00d177" class="cls-1" d="M17.69,6.34,15.94,4.81V1.59A.79.79,0,0,0,15.15.8H14.09a.79.79,0,0,0-.79.79v.93L10.7.26A1,1,0,0,0,10.27,0h0l-.16,0H9.91L9.75,0h0A1,1,0,0,0,9.3.26l-7,6.08A1.06,1.06,0,0,0,2.2,7.83,1.12,1.12,0,0,0,3,8.19H4.06v4.75A1.06,1.06,0,0,0,5.11,14h3.6V9.51h2.74V14h3.44a1.06,1.06,0,0,0,1-1.06V8.19H17a1.12,1.12,0,0,0,.78-.36A1.06,1.06,0,0,0,17.69,6.34Z" transform="translate(-1.95)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 622 B

1
app/javascript/images/gab-icons/icon-home-d8d8d8.svg
View File

@ -1 +0,0 @@
<svg id="icon-home" xmlns="http://www.w3.org/2000/svg" width="16.11" height="14" viewBox="0 0 16.11 14"><defs><style>.cls-1{fill:#d8d8d8;}</style></defs><title>navigation-icon-master</title><path id="d8d8d8" class="cls-1" d="M17.69,6.34,15.94,4.81V1.59A.79.79,0,0,0,15.15.8H14.09a.79.79,0,0,0-.79.79v.93L10.7.26A1,1,0,0,0,10.27,0h0l-.16,0H9.91L9.75,0h0A1,1,0,0,0,9.3.26l-7,6.08A1.06,1.06,0,0,0,2.2,7.83,1.12,1.12,0,0,0,3,8.19H4.06v4.75A1.06,1.06,0,0,0,5.11,14h3.6V9.51h2.74V14h3.44a1.06,1.06,0,0,0,1-1.06V8.19H17a1.12,1.12,0,0,0,.78-.36A1.06,1.06,0,0,0,17.69,6.34Z" transform="translate(-1.95)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 602 B

1
app/javascript/images/gab-icons/icon-home-sprite.svg
View File

@ -1 +0,0 @@
<svg id="icon-home" xmlns="http://www.w3.org/2000/svg" width="16.11" height="114" viewBox="0 0 16.11 114"><defs><style>.cls-1{fill:#d8d8d8;}.cls-2{fill:#00d177;}</style></defs><title>icon-home-sprite</title><path id="d8d8d8" class="cls-1" d="M17.69,106.34l-1.75-1.53v-3.22a.79.79,0,0,0-.79-.79H14.09a.79.79,0,0,0-.79.79v.93l-2.6-2.26a1,1,0,0,0-.43-.23h0l-.16,0H9.91l-.16,0h0a1,1,0,0,0-.43.23l-7,6.08a1.06,1.06,0,0,0-.11,1.49,1.12,1.12,0,0,0,.78.36H4.06v4.75A1.06,1.06,0,0,0,5.11,114h3.6v-4.49h2.74V114h3.44a1.06,1.06,0,0,0,1-1.06v-4.75H17a1.12,1.12,0,0,0,.78-.36A1.06,1.06,0,0,0,17.69,106.34Z" transform="translate(-1.95)"/><path id="_00d177" data-name="00d177" class="cls-2" d="M17.69,6.34,15.94,4.81V1.59A.79.79,0,0,0,15.15.8H14.09a.79.79,0,0,0-.79.79v.93L10.7.26A1,1,0,0,0,10.27,0h0l-.16,0H9.91L9.75,0h0A1,1,0,0,0,9.3.26l-7,6.08A1.06,1.06,0,0,0,2.2,7.83,1.12,1.12,0,0,0,3,8.19H4.06v4.75A1.06,1.06,0,0,0,5.11,14h3.6V9.51h2.74V14h3.44a1.06,1.06,0,0,0,1-1.06V8.19H17a1.12,1.12,0,0,0,.78-.36A1.06,1.06,0,0,0,17.69,6.34Z" transform="translate(-1.95)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

1
app/javascript/images/gab-icons/icon-messages-00d177.svg
View File

@ -1 +0,0 @@
<svg id="icon-messages" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><defs><style>.cls-1{fill:#00d177;}</style></defs><title>icon-messages-00d177</title><path id="_00d177" data-name="00d177" class="cls-1" d="M17,14,15.4,9.21a6.52,6.52,0,1,0-3.19,3.19Z" transform="translate(-3)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 319 B

1
app/javascript/images/gab-icons/icon-messages-d8d8d8.svg
View File

@ -1 +0,0 @@
<svg id="icon-messages" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><defs><style>.cls-1{fill:#d8d8d8;}</style></defs><title>icon-messages-d8d8d8</title><path id="d8d8d8" class="cls-1" d="M17,14,15.4,9.21a6.52,6.52,0,1,0-3.19,3.19Z" transform="translate(-3)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 299 B

1
app/javascript/images/gab-icons/icon-messages-sprite.svg
View File

@ -1 +0,0 @@
<svg id="icon-messages" xmlns="http://www.w3.org/2000/svg" width="14" height="114" viewBox="0 0 14 114"><defs><style>.cls-1{fill:#d8d8d8;}.cls-2{fill:#00d177;}</style></defs><title>icon-messages-sprite</title><path id="d8d8d8" class="cls-1" d="M17,114l-1.6-4.79a6.52,6.52,0,1,0-3.19,3.19Z" transform="translate(-3)"/><path id="_00d177" data-name="00d177" class="cls-2" d="M17,14,15.4,9.21a6.52,6.52,0,1,0-3.19,3.19Z" transform="translate(-3)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 450 B

1
app/javascript/images/gab-icons/icon-new-gab.svg
View File

@ -1 +0,0 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14"><defs><style>.cls-1{fill:#b2f1d5;}.cls-2{fill:#333;}</style></defs><title>icon-new-gab</title><path class="cls-1" d="M8,11.5a8.14,8.14,0,0,1-2.45-.38l-.71-.22-.61.43a6.62,6.62,0,0,1-1.79.9A8.09,8.09,0,0,0,3.06,11l.33-.88-.64-.68A4.28,4.28,0,0,1,1.5,6.5c0-2.76,2.92-5,6.5-5s6.5,2.24,6.5,5S11.59,11.5,8,11.5Z"/><path class="cls-2" d="M4.5,5.5a1,1,0,1,0,1,1A1,1,0,0,0,4.5,5.5ZM8,5.5a1,1,0,1,0,1,1A1,1,0,0,0,8,5.5Zm3.5,0a1,1,0,1,0,1,1A1,1,0,0,0,11.5,5.5ZM8,0C3.58,0,0,2.91,0,6.5a5.72,5.72,0,0,0,1.66,3.95A8,8,0,0,1,.21,12.73.75.75,0,0,0,.75,14,7.55,7.55,0,0,0,5.1,12.55,9.47,9.47,0,0,0,8,13c4.42,0,8-2.91,8-6.5S12.42,0,8,0ZM8,11.5a8.14,8.14,0,0,1-2.45-.38l-.71-.22-.61.43a6.62,6.62,0,0,1-1.79.9A8.09,8.09,0,0,0,3.06,11l.33-.88-.64-.68A4.28,4.28,0,0,1,1.5,6.5c0-2.76,2.92-5,6.5-5s6.5,2.24,6.5,5S11.59,11.5,8,11.5Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 933 B

1
app/javascript/images/gab-icons/icon-notifications-00d177.svg
View File

@ -1 +0,0 @@
<svg id="icon-notifications" xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14"><defs><style>.cls-1{fill:#00d177;}</style></defs><title>icon-notifications-00d177</title><g id="_00d177" data-name="00d177"><path class="cls-1" d="M10,14a2,2,0,0,0,2-2H8A2,2,0,0,0,10,14Z" transform="translate(-3.5)"/><path class="cls-1" d="M16.29,10.73,15.1,9.4a3.14,3.14,0,0,1-.68-1.79V5.7a4.41,4.41,0,0,0-3.58-4.34V.84a.84.84,0,0,0-1.68,0v.52A4.41,4.41,0,0,0,5.58,5.7V7.61A3.14,3.14,0,0,1,4.9,9.4L3.71,10.73c-.38.42-.22.77.34.77H16C16.51,11.5,16.67,11.15,16.29,10.73Z" transform="translate(-3.5)"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 617 B

1
app/javascript/images/gab-icons/icon-notifications-d8d8d8.svg
View File

@ -1 +0,0 @@
<svg id="icon-notifications" xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14"><defs><style>.cls-1{fill:#d8d8d8;}</style></defs><title>icon-notifications-d8d8d8</title><g id="d8d8d8"><path class="cls-1" d="M10,14a2,2,0,0,0,2-2H8A2,2,0,0,0,10,14Z" transform="translate(-3.5)"/><path class="cls-1" d="M16.29,10.73,15.1,9.4a3.14,3.14,0,0,1-.68-1.79V5.7a4.41,4.41,0,0,0-3.58-4.34V.84a.84.84,0,0,0-1.68,0v.52A4.41,4.41,0,0,0,5.58,5.7V7.61A3.14,3.14,0,0,1,4.9,9.4L3.71,10.73c-.38.42-.22.77.34.77H16C16.51,11.5,16.67,11.15,16.29,10.73Z" transform="translate(-3.5)"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 597 B

1
app/javascript/images/gab-icons/icon-notifications-sprite.svg
View File

@ -1 +0,0 @@
<svg id="icon-notifications" xmlns="http://www.w3.org/2000/svg" width="13" height="114" viewBox="0 0 13 114"><defs><style>.cls-1{fill:#d8d8d8;}.cls-2{fill:#00d177;}</style></defs><title>icon-notifications-sprite</title><g id="d8d8d8"><path class="cls-1" d="M10,114a2,2,0,0,0,2-2H8A2,2,0,0,0,10,114Z" transform="translate(-3.5)"/><path class="cls-1" d="M16.29,110.73,15.1,109.4a3.14,3.14,0,0,1-.68-1.79V105.7a4.41,4.41,0,0,0-3.58-4.34v-.52a.84.84,0,0,0-1.68,0v.52a4.41,4.41,0,0,0-3.58,4.34v1.91a3.14,3.14,0,0,1-.68,1.79l-1.19,1.33c-.38.42-.22.77.34.77H16C16.51,111.5,16.67,111.15,16.29,110.73Z" transform="translate(-3.5)"/></g><g id="_00d177" data-name="00d177"><path class="cls-2" d="M10,14a2,2,0,0,0,2-2H8A2,2,0,0,0,10,14Z" transform="translate(-3.5)"/><path class="cls-2" d="M16.29,10.73,15.1,9.4a3.14,3.14,0,0,1-.68-1.79V5.7a4.41,4.41,0,0,0-3.58-4.34V.84a.84.84,0,0,0-1.68,0v.52A4.41,4.41,0,0,0,5.58,5.7V7.61A3.14,3.14,0,0,1,4.9,9.4L3.71,10.73c-.38.42-.22.77.34.77H16C16.51,11.5,16.67,11.15,16.29,10.73Z" transform="translate(-3.5)"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

1
app/javascript/images/gab-icons/icon-search-sprite.svg
View File

@ -1 +0,0 @@
<svg id="icon-search" xmlns="http://www.w3.org/2000/svg" width="14" height="114" viewBox="0 0 14 114"><defs><style>.cls-1{fill:#d8d8d8;}.cls-2{fill:#00d177;}</style></defs><title>icon-search-sprite</title><g id="d8d8d8"><path class="cls-1" d="M15.92,114a1.05,1.05,0,0,1-.75-.32l-2.89-2.88a5.94,5.94,0,1,1,1.52-1.52l2.89,2.89a1.07,1.07,0,0,1-.77,1.83Zm-7-11.85a3.77,3.77,0,1,0,3.77,3.77A3.78,3.78,0,0,0,8.92,102.15Z" transform="translate(-3)"/></g><g id="_00d177" data-name="00d177"><path class="cls-2" d="M15.92,14a1.05,1.05,0,0,1-.75-.32L12.28,10.8A5.94,5.94,0,1,1,13.8,9.28l2.89,2.89A1.07,1.07,0,0,1,15.92,14Zm-7-11.85a3.77,3.77,0,1,0,3.77,3.77A3.78,3.78,0,0,0,8.92,2.15Z" transform="translate(-3)"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 712 B

BIN
app/javascript/images/sprite-main-navigation-links.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

129
app/javascript/styles/gabsocial/components/tabs-bar.scss
View File

@ -116,7 +116,7 @@
}
}
//////////////////////////////////////////////////////////////////////////////////////////
.tabs-bar__link {
display: flex;
@ -126,70 +126,101 @@
text-decoration: none;
text-align: center;
background-repeat: no-repeat;
// NOTE - Explore not using SVG for the navigation icons.
// The icon pixels shift around too much on crappy screens in certain situations
// If switched to an @2x png sprite, subtle shading and color can be introduced
background-image: url('../images/sprite-main-navigation-links.png');
background-size: auto 84px;
@media screen and (max-width: $nav-breakpoint-1) {
background-size: auto 120px;
width: 46px;
height: 42px;
margin: 4px 0 0 0;
padding: 0 !important;
&.active {
height: 38px;
border-bottom: 4px solid $gab-default-text-light;
}
& span {display: none;}
}
&.home {
padding: 16px 0 0 25px;
background-image: url('../images/gab-icons/icon-home-sprite.svg');
background-size: 17px 114px;
background-position: 0 -82px;
&.active{background-position: 0 18px;}
background-position: 0 18px;
&.active {background-position: 0 -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-size: 24px 160.94px;
@-moz-document url-prefix() {
&.active{background-position: center 10px !important;}
}
background-position: 11px 11px;
&.active {background-position: 11px -89px;}
}
}
&.explore,
&.notifications,
&.messages,
&.optional {
&.notifications {
padding: 16px 0 0 23px;
background-size: 14px 114px;
background-position: -140px 18px;
&.active {background-position: -140px -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-size: 20px 160.94px;
background-position: -186px 11px;
&.active {background-position: -186px -89px;}
}
}
&.groups {
padding: 16px 0 0 28px;
background-position: -280px 18px;
&.active {background-position: -280px -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-position: -390px 11px;
&.active {background-position: -390px -89px;}
}
background-position: 0 -82px;
&.active{background-position: 0 18px;}
}
&.explore {background-image: url('../images/gab-icons/icon-explore-sprite.svg');}
&.notifications {background-image: url('../images/gab-icons/icon-notifications-sprite.svg');}
&.messages {background-image: url('../images/gab-icons/icon-messages-sprite.svg');}
&.optional {background-image: url('../images/gab-icons/icon-search-sprite.svg');}
&.optional {
display: none;
@media screen and (max-width: $nav-breakpoint-2) {display: flex;}
@media screen and (max-width: $nav-breakpoint-2) {
display: flex;
background-position: -987px 11px;
&.active {background-position: -987px -89px;}
}
}
// &.notifications,
// &.explore,
// &.messages,
// &.optional {
// padding: 16px 0 0 23px;
// background-size: 14px 114px;
// @media screen and (max-width: $nav-breakpoint-1) {background-size: 20px 160.94px;}
// background-position: 0 -82px;
// &.active{background-position: 0 18px;}
// }
// &.explore {background-image: url('../images/gab-icons/icon-explore-sprite.svg');}
// &.notifications {background-image: url('../images/gab-icons/icon-notifications-sprite.svg');}
// &.messages {background-image: url('../images/gab-icons/icon-messages-sprite.svg');}
// &.groups {background-image: url('../images/gab-icons/icon-groups-sprite.svg');}
// &.optional {background-image: url('../images/gab-icons/icon-search-sprite.svg');}
// &.optional {
// display: none;
// @media screen and (max-width: $nav-breakpoint-2) {display: flex;}
// }
// REWORK THIS BECAUSE OF FIREFOX BUGS
@media screen and (max-width: $nav-breakpoint-1) {
&.home,
&.explore,
&.notifications,
&.messages,
&.optional {
width: 46px;
height: 42px;
margin: 4px 0 0 0;
padding: 0;
background-position: center -130px;
&.active {
height: 38px;
border-bottom: 4px solid $gab-default-text-light;
background-position: center 11px;
}
}
& span {display: none;}
}
// @media screen and (max-width: $nav-breakpoint-1) {
// &.home,
// &.notifications,
// &.groups,
// &.explore,
// &.messages,
// &.optional {
// width: 46px;
// height: 42px;
// margin: 4px 0 0 0;
// padding: 0;
// background-position: center -130px;
// &.active {
// height: 38px;
// border-bottom: 4px solid $gab-default-text-light;
// background-position: center 11px;
// }
// }
// & span {display: none;}
// }
// END REWORK