Skip to content

Instantly share code, notes, and snippets.

@sadiesaurus
Last active April 26, 2017 18:44
Show Gist options
  • Save sadiesaurus/0543cc1075ecff10f3f2a65a7cd9a823 to your computer and use it in GitHub Desktop.
Save sadiesaurus/0543cc1075ecff10f3f2a65a7cd9a823 to your computer and use it in GitHub Desktop.
Currency picker button, to toggle between two currencies
<span id="currencies">
<span data-currency="{{ settings.default_currency }}" class="left">{{ settings.default_currency }}</span>
<span data-currency="{{ settings.second_currency }}" class="right">{{ settings.second_currency }}</span>
</span>
<style>
#currencies {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
color: #bbbbbb;
font-size: 0; /* to eliminate space between buttons */
line-height: 1.5;
cursor: pointer;
}
#currencies span {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding: 5px 10px;
border: 1px solid #D6D6D6;
background: none #F6F6F6;
font-size: 13px;
}
#currencies .left {
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomleft: 7px;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
#currencies .right {
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 7px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-left: none;
}
#currencies .selected {
font-weight: normal;
color: #666666;
background: none #eeeeee;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment