Show focused border on currency selector

Previously we were embedding the currency selector inside of a bootstrap
input-group-addon and hiding its border. This required a little extra
magic because we had to hide the select's border and change its height
to fit within.

Having no border meant that there was no indication when the currency
input was focused.

Bootstrap doesn't fully support having multiple inputs within a
input-group, but we can make it work by hiding the right border on the
left input.

A slight hack is needed to make focus look correct: we show the focused
colour on the right input's left border when the left border is focused.
This achieves the desired effect.

backend/app/assets/javascripts/spree/backend/views/number_with_currency.js

@@ -4,7 +4,7 @@ Spree.Views.NumberWithCurrency = Backbone.View.extend({
   },
 
   initialize: function() {
-    this.$currencySelector = this.$('.number-with-currency-select select');
+    this.$currencySelector = this.$('.number-with-currency-select');
   },
 
   getCurrency: function() {

backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss

@@ -515,7 +515,7 @@ $custom-select-border-width:  $input-btn-border-width !default;
 $custom-select-border-color:  $input-border-color !default;
 $custom-select-border-radius: $border-radius !default;
 
-$custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
+$custom-select-focus-border-color: $input-border-focus !default;
 $custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
 
 $custom-select-sm-padding-y:  .2rem !default;

backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss

@@ -12,16 +12,23 @@
     text-align: left;
   }
 
-  & &-select {
-    padding: 0;
-    background: $input-bg;
+  &-with-select {
+    .number-with-currency-amount {
+      border-right: 0;
 
-    select {
+      &:focus + .number-with-currency-select {
+        border-left-color: $input-border-focus;
+      }
+    }
+
+    .number-with-currency-select {
       @extend .custom-select;
 
-      width: 100%;
-      height: $input-height;
-      border: 0;
+      cursor: pointer;
+      width: 5.5rem;
+
+      @include border-radius($border-radius);
+      @include border-left-radius(0);
 
       &::-ms-expand {
         // Required to see full text of selected value on IE11

backend/app/views/spree/admin/shared/_number_with_currency.html.erb

@@ -3,16 +3,14 @@
 <% currency ||= nil %>
 <% required ||= nil %>
 
-<div class="input-group number-with-currency js-number-with-currency">
+<div class="input-group number-with-currency <%= "number-with-currency-with-select" unless currency %> js-number-with-currency">
   <div class="input-group-addon number-with-currency-symbol"></div>
   <%= f.text_field amount_attr, value: number_to_currency(f.object.public_send(amount_attr), unit: ''), class: 'form-control number-with-currency-amount', required: required %>
   <% if currency %>
     <div class="input-group-addon number-with-currency-addon" data-currency="<%= currency %>">
       <%= ::Money::Currency.find(currency).iso_code %>
     </div>
   <% else %>
-    <div class="input-group-addon number-with-currency-addon number-with-currency-select">
-      <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {required: required} %>
-    </div>
+    <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {required: required, class: 'number-with-currency-select'} %>
   <% end %>
 </div>