From 871fc1d20a9ab26bb07a18f54afb34531cf6cbee Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 22 Mar 2017 14:40:40 -0700 Subject: [PATCH 01/14] Add "number with currency" widget --- .../app/assets/javascripts/spree/backend.js | 1 + .../components/number_with_currency.js | 12 ++++++ .../javascripts/spree/backend/views/index.js | 1 + .../backend/views/number_with_currency.js | 20 ++++++++++ .../components/_currency_selector.scss | 39 +++++++++++++++++++ .../spree/backend/spree_admin.scss | 1 + .../views/spree/admin/products/_form.html.erb | 14 ++----- .../shared/_number_with_currency.html.erb | 17 ++++++++ 8 files changed, 95 insertions(+), 10 deletions(-) create mode 100644 backend/app/assets/javascripts/spree/backend/components/number_with_currency.js create mode 100644 backend/app/assets/javascripts/spree/backend/views/number_with_currency.js create mode 100644 backend/app/assets/stylesheets/spree/backend/components/_currency_selector.scss create mode 100644 backend/app/views/spree/admin/shared/_number_with_currency.html.erb diff --git a/backend/app/assets/javascripts/spree/backend.js b/backend/app/assets/javascripts/spree/backend.js index bf3289f86ad..d6ab31060fc 100644 --- a/backend/app/assets/javascripts/spree/backend.js +++ b/backend/app/assets/javascripts/spree/backend.js @@ -29,6 +29,7 @@ //= require spree/backend/admin //= require spree/backend/calculator //= require spree/backend/checkouts/edit +//= require spree/backend/components/number_with_currency //= require spree/backend/components/tabs //= require spree/backend/components/tooltips //= require spree/backend/flash diff --git a/backend/app/assets/javascripts/spree/backend/components/number_with_currency.js b/backend/app/assets/javascripts/spree/backend/components/number_with_currency.js new file mode 100644 index 00000000000..eec2f7b32c4 --- /dev/null +++ b/backend/app/assets/javascripts/spree/backend/components/number_with_currency.js @@ -0,0 +1,12 @@ +Spree.initNumberWithCurrency = function() { + $('.js-number-with-currency').each(function() { + var view = new Spree.Views.NumberWithCurrency({ + el: this, + }); + view.render(); + }); +} + +$(function() { + Spree.initNumberWithCurrency() +}) diff --git a/backend/app/assets/javascripts/spree/backend/views/index.js b/backend/app/assets/javascripts/spree/backend/views/index.js index 6aaabd485dc..7b4f7710de8 100644 --- a/backend/app/assets/javascripts/spree/backend/views/index.js +++ b/backend/app/assets/javascripts/spree/backend/views/index.js @@ -9,3 +9,4 @@ //= require 'spree/backend/views/order/summary' //= require 'spree/backend/views/state_select' //= require 'spree/backend/views/zones/form' +//= require 'spree/backend/views/number_with_currency' diff --git a/backend/app/assets/javascripts/spree/backend/views/number_with_currency.js b/backend/app/assets/javascripts/spree/backend/views/number_with_currency.js new file mode 100644 index 00000000000..060a2eeb541 --- /dev/null +++ b/backend/app/assets/javascripts/spree/backend/views/number_with_currency.js @@ -0,0 +1,20 @@ +Spree.Views.NumberWithCurrency = Backbone.View.extend({ + events: { + 'change input,select': "render" + }, + + render: function() { + var currency, symbol = ''; + if (this.$('.currency-selector option:selected').length) { + currency = this.$('.currency-selector option:selected').val(); + } else { + currency = this.$('[data-currency]').data("currency"); + } + if (currency) { + var currencyInfo = Spree.currencyInfo[currency]; + this.$('.currency-selector-symbol').text(currencyInfo[0]) + } else { + this.$('.currency-selector-symbol').text(""); + } + } +}); diff --git a/backend/app/assets/stylesheets/spree/backend/components/_currency_selector.scss b/backend/app/assets/stylesheets/spree/backend/components/_currency_selector.scss new file mode 100644 index 00000000000..d52f5057569 --- /dev/null +++ b/backend/app/assets/stylesheets/spree/backend/components/_currency_selector.scss @@ -0,0 +1,39 @@ +.currency-selector-symbol { + min-width: 2.5em; + text-align: center; +} + +.currency-selector { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding-left: .5rem; + border: 0; + background: transparent; + + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + + background: url("data:image/svg+xml;utf8,") 90%/12px 6px no-repeat; + + font-family: inherit; + color: inherit; + + &:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; + } +} + +.currency-selector-amount { + text-align: right; +} + +.currency-selector-addon { + width: 5em; + text-align: left; + position: relative; +} diff --git a/backend/app/assets/stylesheets/spree/backend/spree_admin.scss b/backend/app/assets/stylesheets/spree/backend/spree_admin.scss index 46dac66e398..eb4c037fda1 100644 --- a/backend/app/assets/stylesheets/spree/backend/spree_admin.scss +++ b/backend/app/assets/stylesheets/spree/backend/spree_admin.scss @@ -22,6 +22,7 @@ @import 'spree/backend/components/states'; @import 'spree/backend/components/actions'; @import 'spree/backend/components/breadcrumb'; +@import 'spree/backend/components/currency_selector'; @import 'spree/backend/components/date-picker'; @import 'spree/backend/components/hint'; @import 'spree/backend/components/image_placeholder'; diff --git a/backend/app/views/spree/admin/products/_form.html.erb b/backend/app/views/spree/admin/products/_form.html.erb index cc4121aafdb..ae00e8311b9 100644 --- a/backend/app/views/spree/admin/products/_form.html.erb +++ b/backend/app/views/spree/admin/products/_form.html.erb @@ -44,22 +44,16 @@
-
+
<%= f.field_container :cost_price do %> <%= f.label :cost_price %> - <%= f.text_field :cost_price, value: number_to_currency(@product.cost_price, unit: '') %> - <%= f.error_message_on :cost_price %> - <% end %> -
-
- <%= f.field_container :cost_currency do %> - <%= f.label :cost_currency %> - <%= f.text_field :cost_currency %> + <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :cost_price, currency_attr: :cost_currency %> + + <%= f.error_message_on :cost_price %> <%= f.error_message_on :cost_currency %> <% end %>
-
diff --git a/backend/app/views/spree/admin/shared/_number_with_currency.html.erb b/backend/app/views/spree/admin/shared/_number_with_currency.html.erb new file mode 100644 index 00000000000..c20b9aba5cf --- /dev/null +++ b/backend/app/views/spree/admin/shared/_number_with_currency.html.erb @@ -0,0 +1,17 @@ +<% amount_attr ||= :amount %> +<% currency_attr ||= :currency %> +<% currency ||= nil %> + +
+
+ <%= f.text_field amount_attr, value: number_to_currency(f.object.public_send(amount_attr), unit: ''), class: 'form-control currency-selector-amount' %> + <% if currency %> +
+ <%= ::Money::Currency.find(currency).iso_code %> +
+ <% else %> +
+ <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {class: 'currency-selector'} %> +
+ <% end %> +
From 9744088cd1792b0f942149dec9dc363c46a85ecf Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 22 Mar 2017 14:43:45 -0700 Subject: [PATCH 02/14] Start using number_with_currency --- .../views/spree/admin/prices/_form.html.erb | 19 ++++--------------- .../views/spree/admin/products/_form.html.erb | 2 +- .../calculators/flat_rate/_fields.html.erb | 4 ++++ .../promotions/rules/_item_total.html.erb | 13 +++++-------- core/config/locales/en.yml | 2 ++ 5 files changed, 16 insertions(+), 24 deletions(-) create mode 100644 backend/app/views/spree/admin/promotions/calculators/flat_rate/_fields.html.erb diff --git a/backend/app/views/spree/admin/prices/_form.html.erb b/backend/app/views/spree/admin/prices/_form.html.erb index 91901399417..5c2f730e084 100644 --- a/backend/app/views/spree/admin/prices/_form.html.erb +++ b/backend/app/views/spree/admin/prices/_form.html.erb @@ -1,8 +1,7 @@
-
-
+
<%= f.field_container :variant do %> <%= f.label :variant %> <%= f.select :variant_id, @@ -12,17 +11,7 @@ <% end %>
-
- <%= f.field_container :currency do %> - <%= f.label :currency %> - <%= f.select :currency, - Money::Currency.all.map { |c| ["#{c.iso_code} (#{c.name})", c.iso_code] }, - {}, - class: "select2 fullwidth", disabled: !f.object.new_record? %> - <% end %> -
- -
+
<%= f.field_container :country do %> <%= f.label :country %> <%= f.field_hint :country %> @@ -35,10 +24,10 @@ <% end %>
-
+
<%= f.field_container :price do %> <%= f.label :price %> - <%= f.text_field :price, value: f.object.money.format, class: 'fullwidth title' %> + <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :price, currency_attr: :currency %> <% end %>
diff --git a/backend/app/views/spree/admin/products/_form.html.erb b/backend/app/views/spree/admin/products/_form.html.erb index ae00e8311b9..eeeacee6df7 100644 --- a/backend/app/views/spree/admin/products/_form.html.erb +++ b/backend/app/views/spree/admin/products/_form.html.erb @@ -32,7 +32,7 @@
<%= f.field_container :price do %> <%= f.label :price, class: 'required' %> - <%= f.text_field :price, value: number_to_currency(@product.price, unit: ''), required: true %> + <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :price, currency: @product.find_or_build_master.default_price.currency %> <%= f.error_message_on :price %> <% end %>
diff --git a/backend/app/views/spree/admin/promotions/calculators/flat_rate/_fields.html.erb b/backend/app/views/spree/admin/promotions/calculators/flat_rate/_fields.html.erb new file mode 100644 index 00000000000..710e9e92b94 --- /dev/null +++ b/backend/app/views/spree/admin/promotions/calculators/flat_rate/_fields.html.erb @@ -0,0 +1,4 @@ +<%= fields_for "#{prefix}[calculator_attributes]", calculator do |f| %> + <%= f.label :preferred_amount %> + <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :preferred_amount, currency_attr: :preferred_currency %> +<% end %> diff --git a/backend/app/views/spree/admin/promotions/rules/_item_total.html.erb b/backend/app/views/spree/admin/promotions/rules/_item_total.html.erb index 1cad2931781..7ce55de26f0 100644 --- a/backend/app/views/spree/admin/promotions/rules/_item_total.html.erb +++ b/backend/app/views/spree/admin/promotions/rules/_item_total.html.erb @@ -1,18 +1,15 @@
-
+
<%= select_tag "#{param_prefix}[preferred_operator]", options_for_select(Spree::Promotion::Rules::ItemTotal::OPERATORS.map{|o| [Spree.t("item_total_rule.operators.#{o}"),o]}, promotion_rule.preferred_operator), {class: 'select2 select_item_total fullwidth'} %>
-
+
- <%= text_field_tag "#{param_prefix}[preferred_amount]", promotion_rule.preferred_amount, class: 'fullwidth' %> -
-
-
-
- <%= text_field_tag "#{param_prefix}[preferred_currency]", promotion_rule.preferred_currency, class: 'fullwidth' %> + <%= fields_for param_prefix, promotion_rule do |f| %> + <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :preferred_amount, currency_attr: :preferred_currency %> + <% end %>
diff --git a/core/config/locales/en.yml b/core/config/locales/en.yml index 3f1dafee6d4..74d76cd7cb4 100644 --- a/core/config/locales/en.yml +++ b/core/config/locales/en.yml @@ -29,6 +29,8 @@ en: code: Code name: Name state: State + spree/calculator/flat_rate: + preferred_amount: Amount spree/calculator/tiered_flat_rate: preferred_base_amount: Base Amount preferred_tiers: Tiers From 07e8b543156b5bfadad8142ab63a3ec52442dcd1 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Mon, 27 Mar 2017 16:47:51 -0700 Subject: [PATCH 03/14] Use number_with_currency for payments --- .../controllers/spree/admin/payments_controller.rb | 2 +- .../app/views/spree/admin/payments/_form.html.erb | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/backend/app/controllers/spree/admin/payments_controller.rb b/backend/app/controllers/spree/admin/payments_controller.rb index 99d17a6ead2..49de6cbf1ed 100644 --- a/backend/app/controllers/spree/admin/payments_controller.rb +++ b/backend/app/controllers/spree/admin/payments_controller.rb @@ -18,7 +18,7 @@ def index end def new - @payment = @order.payments.build + @payment = @order.payments.build(amount: @order.outstanding_balance) end def create diff --git a/backend/app/views/spree/admin/payments/_form.html.erb b/backend/app/views/spree/admin/payments/_form.html.erb index a2344d0e81c..3e8cc98f674 100644 --- a/backend/app/views/spree/admin/payments/_form.html.erb +++ b/backend/app/views/spree/admin/payments/_form.html.erb @@ -1,11 +1,13 @@ -
-
-
- <%= f.label :amount %> - <%= f.text_field :amount, value: @order.display_outstanding_balance.money, class: 'fullwidth' %> +
+
+
+
+ <%= f.label :amount %> + <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :amount, currency: @order.currency %> +
-
+
    From 54e9695844dda4657c41be11d3b6b91780d4ac43 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 22 Mar 2017 17:05:23 -0700 Subject: [PATCH 04/14] Fix warnings on store_credits.category_id --- backend/app/views/spree/admin/store_credits/_form.html.erb | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/backend/app/views/spree/admin/store_credits/_form.html.erb b/backend/app/views/spree/admin/store_credits/_form.html.erb index 112c6cfa256..602bf9ec2c0 100644 --- a/backend/app/views/spree/admin/store_credits/_form.html.erb +++ b/backend/app/views/spree/admin/store_credits/_form.html.erb @@ -4,14 +4,15 @@ <%= f.label :amount, class: 'required' %>
    <%= f.number_field :amount, min: 0.00, step: :any %> <%= f.error_message_on :amount %> + <%= f.error_message_on :currency %> <% end %>
- <%= f.field_container :category do %> + <%= f.field_container :category_id do %> <%= f.label :category_id, class: 'required' %>
<%= f.select :category_id, options_from_collection_for_select(@credit_categories, :id, :name, f.object.category.try(:id)), { include_blank: true }, { class: 'select2 fullwidth', placeholder: Spree.t("admin.store_credits.select_reason") } %> - <%= f.error_message_on :category %> + <%= f.error_message_on :category_id %> <% end %>
From 6274cf39368668bfb91d70372900059bc1714fd4 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 22 Mar 2017 17:12:49 -0700 Subject: [PATCH 05/14] Allow specifying required on number_with_currency --- .../views/spree/admin/shared/_number_with_currency.html.erb | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/backend/app/views/spree/admin/shared/_number_with_currency.html.erb b/backend/app/views/spree/admin/shared/_number_with_currency.html.erb index c20b9aba5cf..04bc8c4fb73 100644 --- a/backend/app/views/spree/admin/shared/_number_with_currency.html.erb +++ b/backend/app/views/spree/admin/shared/_number_with_currency.html.erb @@ -1,17 +1,18 @@ <% amount_attr ||= :amount %> <% currency_attr ||= :currency %> <% currency ||= nil %> +<% required ||= nil %>
- <%= f.text_field amount_attr, value: number_to_currency(f.object.public_send(amount_attr), unit: ''), class: 'form-control currency-selector-amount' %> + <%= f.text_field amount_attr, value: number_to_currency(f.object.public_send(amount_attr), unit: ''), class: 'form-control currency-selector-amount', required: required %> <% if currency %>
<%= ::Money::Currency.find(currency).iso_code %>
<% else %>
- <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {class: 'currency-selector'} %> + <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {class: 'currency-selector', required: required} %>
<% end %>
From 38386136b9a42a9a996fc7b263d01736557e5667 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 22 Mar 2017 17:13:23 -0700 Subject: [PATCH 06/14] Use number_with_currency in store credits Also allows store credits to be created with a currency other than the default. --- .../spree/admin/store_credits_controller.rb | 10 ++++++++-- .../app/views/spree/admin/store_credits/_form.html.erb | 2 +- .../spree/admin/store_credits_controller_spec.rb | 1 + 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/backend/app/controllers/spree/admin/store_credits_controller.rb b/backend/app/controllers/spree/admin/store_credits_controller.rb index 53fcbd7965e..9dfff0b35a5 100644 --- a/backend/app/controllers/spree/admin/store_credits_controller.rb +++ b/backend/app/controllers/spree/admin/store_credits_controller.rb @@ -68,8 +68,8 @@ def invalidate private def permitted_resource_params - params.require(:store_credit).permit([:amount, :category_id, :memo]). - merge(currency: Spree::Config[:currency], created_by: try_spree_current_user) + params.require(:store_credit).permit([:amount, :currency, :category_id, :memo]). + merge(created_by: try_spree_current_user) end def collection @@ -105,6 +105,12 @@ def render_edit_page flash[:error] = "#{Spree.t("admin.store_credits.unable_to_#{translation_key}")}: #{@store_credit.errors.full_messages.join(', ')}" render(template) && return end + + def build_resource + parent.store_credits.build( + currency: Spree::Config[:currency] + ) + end end end end diff --git a/backend/app/views/spree/admin/store_credits/_form.html.erb b/backend/app/views/spree/admin/store_credits/_form.html.erb index 602bf9ec2c0..1b0e3f94a2a 100644 --- a/backend/app/views/spree/admin/store_credits/_form.html.erb +++ b/backend/app/views/spree/admin/store_credits/_form.html.erb @@ -2,7 +2,7 @@
<%= f.field_container :amount do %> <%= f.label :amount, class: 'required' %>
- <%= f.number_field :amount, min: 0.00, step: :any %> + <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :amount, currency_attr: :currency, required: true %> <%= f.error_message_on :amount %> <%= f.error_message_on :currency %> <% end %> diff --git a/backend/spec/controllers/spree/admin/store_credits_controller_spec.rb b/backend/spec/controllers/spree/admin/store_credits_controller_spec.rb index 6970cd27190..addc7944a8b 100644 --- a/backend/spec/controllers/spree/admin/store_credits_controller_spec.rb +++ b/backend/spec/controllers/spree/admin/store_credits_controller_spec.rb @@ -51,6 +51,7 @@ user_id: user.id, store_credit: { amount: 1.00, + currency: "USD", category_id: a_credit_category.id } } From bba4698c6fe7ab3a067fad20e1d20041a6ae0d05 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Thu, 23 Mar 2017 15:56:00 -0700 Subject: [PATCH 07/14] Simplify styling of currency selector Instead of entirely styling from scratch, we try to bend the browser's internal styles to match. This avoids needing an SVG background for the select's dropdown, and matchces bootstrap's styling of select boxes. --- .../components/_currency_selector.scss | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/components/_currency_selector.scss b/backend/app/assets/stylesheets/spree/backend/components/_currency_selector.scss index d52f5057569..a018c2da355 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_currency_selector.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_currency_selector.scss @@ -5,19 +5,16 @@ .currency-selector { position: absolute; + display: block; left: 0; top: 0; width: 100%; - height: 100%; - padding-left: .5rem; + height: 2rem; + padding: 0 .75rem; border: 0; - background: transparent; - -webkit-appearance:none; - -moz-appearance:none; - appearance:none; - - background: url("data:image/svg+xml;utf8,") 90%/12px 6px no-repeat; + background-color: #fff; + background-image: none; font-family: inherit; color: inherit; @@ -26,6 +23,17 @@ color: transparent; text-shadow: 0 0 0 #000; } + + // Unstyle the caret on ``s in IE10+. - &::-ms-expand { - background-color: transparent; - border: 0; - } - - - &:hover:not(:active) { - cursor: pointer; - } -} - -.currency-selector-amount { - text-align: right; -} - -.currency-selector-addon { - width: 5rem; - text-align: left; - position: relative; -} diff --git a/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss b/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss new file mode 100644 index 00000000000..bc287902f39 --- /dev/null +++ b/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss @@ -0,0 +1,49 @@ +.number-with-currency { + &-symbol { + min-width: 2.5em; + text-align: center; + } + + &-amount { + text-align: right; + } + + &-addon { + width: 5rem; + text-align: left; + position: relative; + } + + .currency-selector { + position: absolute; + display: block; + left: 0; + top: 0; + width: 100%; + height: 2rem; + padding: 0 .75rem; + border: 0; + + background-color: #fff; + background-image: none; + + font-family: inherit; + color: inherit; + + &:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; + } + + // Unstyle the caret on ``s in IE10+. - &::-ms-expand { - background-color: transparent; + display: inline-block; + width: 100%; + height: 31px; border: 0; - } - - &:hover:not(:active) { - cursor: pointer; + &::-ms-expand { + // Required to see full text of selected value on IE11 + display: none; + } } } } diff --git a/backend/app/views/spree/admin/shared/_number_with_currency.html.erb b/backend/app/views/spree/admin/shared/_number_with_currency.html.erb index 282e3adb386..941297f7976 100644 --- a/backend/app/views/spree/admin/shared/_number_with_currency.html.erb +++ b/backend/app/views/spree/admin/shared/_number_with_currency.html.erb @@ -11,8 +11,8 @@ <%= ::Money::Currency.find(currency).iso_code %>
<% else %> -
- <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {class: 'currency-selector', required: required} %> +
+ <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {required: required} %>
<% end %>
From 3e9825e5017ab2d308790329c61514bbd718640e Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 29 Mar 2017 14:10:03 -0700 Subject: [PATCH 14/14] Use bootstrap variables in number_with_currency --- .../spree/backend/components/_number_with_currency.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss b/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss index a6cebf71474..96e3f23db6a 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss @@ -1,7 +1,6 @@ .number-with-currency { &-symbol { min-width: 2.5em; - text-align: center; } &-amount { @@ -15,14 +14,13 @@ & &-select { padding: 0; - background: #fff; + background: $input-bg; select { @extend .c-select; - display: inline-block; width: 100%; - height: 31px; + height: $input-height; border: 0; &::-ms-expand {