Skip to content

Commit

Permalink
added background for os links
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexchorman
alexchorman committed May 24, 2018
1 parent 27d7ace commit ec8efb3
Show file tree
Hide file tree
Showing 7 changed files with 73 additions and 66 deletions.
8 changes: 4 additions & 4 deletions _includes/layout/base/wallets-filter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,13 @@
{% for platform in wallet.platform %}
{% for os in platform.os%}
{% if platform.name == os.name %}
<a class="wallet-list-os-link {{os.name}}-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">

<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">
<span class="wallet-os-ico {{os.name}}-ico"></span>
<p class="wallet-ico-tooltip">{{os.name}}</p>
</a>
{% else %}
<a class="wallet-list-os-link {{os.name}}-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">

<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">
<span class="wallet-os-ico {{os.name}}-ico"></span>
<p class="wallet-ico-tooltip">{{os.name}}</p>
</a>
{% endif %}
Expand Down
16 changes: 8 additions & 8 deletions _includes/layout/base/wallets-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@
{% for platform in wallet.platform %}
{% for os in platform.os%}
{% if platform.name == os.name %}
<a class="wallet-list-os-link {{os.name}}-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{ wallet.id }}/" data-link-platform={{platform.name}}>

<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{ wallet.id }}/" data-link-platform={{platform.name}}>
<span class="wallet-os-ico {{os.name}}-ico"></span>
<p class="wallet-ico-tooltip">{{os.name}}</p>
</a>
{% else %}
<a class="wallet-list-os-link {{os.name}}-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{ wallet.id }}/" data-link-platform={{platform.name}}>

<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{ wallet.id }}/" data-link-platform={{platform.name}}>
<span class="wallet-os-ico {{os.name}}-ico"></span>
<p class="wallet-ico-tooltip">{{os.name}}</p>
</a>
{% endif %}
Expand All @@ -65,13 +65,13 @@
<p class="wallet-hint">Select an Operating System</p>
<div class="wallet-list-os">
{% for platform in wallet.platform %} {% for os in platform.os%} {% if platform.name == os.name %}
<a class="wallet-list-os-link {{os.name}}-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">

<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">
<span class="wallet-os-ico {{os.name}}-ico"></span>
<p class="wallet-ico-tooltip">{{os.name}}</p>
</a>
{% else %}
<a class="wallet-list-os-link {{os.name}}-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">

<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">
<span class="wallet-os-ico {{os.name}}-ico"></span>
<p class="wallet-ico-tooltip">{{os.name}}</p>
</a>
{% endif %} {% endfor %} {% endfor %}
Expand Down
59 changes: 27 additions & 32 deletions _sass/_wallets.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@ $black: #13161F;
padding: 40px 0 40px;
text-align: left;


.allwallets-list-item:hover {
.wallet-list-item-link img {
margin: 20px auto -12px;
}
}
.wallet-list-item {
display: inline-block;
width: 14.2%;
Expand Down Expand Up @@ -72,52 +76,40 @@ $black: #13161F;
.wallet-list-os {
margin-top: 17px;
}
.wallet-list-item-link img {
margin: 20px auto -12px;
}
.windows-link {
.windows-ico {
background: url(../img/os/wallet_menu_windows_dark.svg) center no-repeat;
background-size: contain;
}
.linux-link {
.linux-ico {
background: url(../img/os/wallet_menu_linux_dark.svg) center no-repeat;
background-size: contain;
}
.mac-link {
.mac-ico {
background: url(../img/os/wallet_menu_mac_dark.svg) center no-repeat;
background-size: contain;
}
.windowsphone-link {
.windowsphone-ico {
background: url(../img/os/wallet_menu_windowsphone_dark.svg) center no-repeat;
background-size: contain;
}
.hardware-link {
.hardware-ico {
background: url(../img/os/wallet_menu_hardware_dark.svg) center no-repeat;
background-size: contain;
}
.web-link {
.web-ico {
background: url(../img/os/wallet_menu_web_dark.svg) center no-repeat;
background-size: contain;
}
.android-link {
.android-ico {
background: url(../img/os/wallet_menu_android_dark.svg) center no-repeat;
background-size: contain;
}
.ios-link {
.ios-ico {
background: url(../img/os/wallet_menu_ios_dark.svg) center no-repeat;
background-size: contain;
}
// .wallet-os-ico {
// fill: #192A39;
// }
// .wallet-os-ico-stroke {
// stroke: #192A39;
// }
}
// .wallet-list-os-link:hover .wallet-os-ico-stroke {
// stroke: #F7931A;
// }
.windows-link {
.windows-ico {
background: url(../img/os/wallet_menu_windows.svg) center no-repeat;
background-size: contain;

Expand All @@ -126,7 +118,7 @@ $black: #13161F;
background-size: contain;
}
}
.mac-link {
.mac-ico {
background: url(../img/os/wallet_menu_mac.svg) center no-repeat;
background-size: contain;

Expand All @@ -135,7 +127,7 @@ $black: #13161F;
background-size: contain;
}
}
.linux-link {
.linux-ico {
background: url(../img/os/wallet_menu_linux.svg) center no-repeat;
background-size: contain;

Expand All @@ -144,7 +136,7 @@ $black: #13161F;
background-size: contain;
}
}
.windowsphone-link {
.windowsphone-ico {
background: url(../img/os/wallet_menu_windowsphone.svg) center no-repeat;
background-size: contain;

Expand All @@ -153,7 +145,7 @@ $black: #13161F;
background-size: contain;
}
}
.web-link {
.web-ico {
background: url(../img/os/wallet_menu_web.svg) center no-repeat;
background-size: contain;

Expand All @@ -162,7 +154,7 @@ $black: #13161F;
background-size: contain;
}
}
.android-link {
.android-ico {
background: url(../img/os/wallet_menu_android.svg) center no-repeat;
background-size: contain;

Expand All @@ -171,7 +163,7 @@ $black: #13161F;
background-size: contain;
}
}
.ios-link {
.ios-ico {
background: url(../img/os/wallet_menu_ios.svg) center no-repeat;
background-size: contain;

Expand All @@ -180,7 +172,7 @@ $black: #13161F;
background-size: contain;
}
}
.hardware-link {
.hardware-ico {
background: url(../img/os/wallet_menu_hardware.svg) center no-repeat;
background-size: contain;

Expand Down Expand Up @@ -452,16 +444,19 @@ $scores:
}
.wallet-list-os-link {
position: relative;
width: 18px;
height: 18px;
margin: 4px 5px;
padding: 4px 5px;
}
.wallet-list-os-link:hover {
background: #f8f8f8;
}
.wallet-list-os-link.is-hidden {
display: none;
}
.wallet-os-ico {
display: block;
width: 18px;
height: 18px;
}
.wallet-list-os-link:hover .wallet-ico-tooltip {
display: block;
}
Expand Down
18 changes: 11 additions & 7 deletions img/os/wallet_menu_mac.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 6 additions & 4 deletions img/os/wallet_menu_mac_dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit ec8efb3

Please sign in to comment.