sadiesaurus
4/26/2017 - 4:00 PM

Currency picker button, to toggle between two currencies

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>