card 1.92.2 → 1.93.0

data/mod/account/spec/set/right/email_spec.rb

@@ -34,7 +34,7 @@ describe Card::Set::Right::Email do
       it "downcases email" do
         Card::Auth.as_bot do
           @email_card.update_attributes! content: "QuIrE@example.com"
-          expect(@email_card.content).to eq("quire@example.com")
+          expect(@email_card.db_content).to eq("quire@example.com")
         end
       end
 

data/mod/account/spec/set/right/password_spec.rb

@@ -27,7 +27,7 @@ describe Card::Set::Right::Password do
         pw_card = acct.password_card
         pw_card.content = ""
         pw_card.save
-        expect(original_pw).to eq(pw_card.refresh(_force = true).content)
+        expect(original_pw).to eq(pw_card.refresh(_force = true).db_content)
       end
 
       it "does not break email editing" do

data/mod/account/spec/set/right/salt_spec.rb

@@ -2,5 +2,5 @@
 
 describe Card::Set::Right::Salt do
   # not used yet.
-  # when used this should confirm that raw_content and raw view are different.
+  # when used this should confirm that content and raw view are different.
 end

data/mod/account/spec/set/type/signup_spec.rb

@@ -7,7 +7,7 @@ describe Card::Set::Type::Signup do
 
   context "signup form form" do
     subject do
-      Card.new(type_id: Card::SignupID).format.render :new
+      Card.new(type_id: Card::SignupID).format.render! :new
     end
 
     it "prompts to signup" do

data/mod/basic_formats/format/css_format.rb

@@ -9,10 +9,9 @@ class Card
         "text/css"
       end
 
-      def view_caching?
+      def self.view_caching?
         false
       end
-
     end
   end
 end

data/mod/basic_formats/format/csv_format.rb

@@ -9,7 +9,7 @@ class Card
         "text/comma-separated-values"
       end
 
-      def view_caching?
+      def self.view_caching?
         # TODO: make view caching handle non-strings
         # (specifically stub_render)
         false

data/mod/basic_formats/format/js_format.rb

@@ -5,6 +5,10 @@ class Card
     class JsFormat < Format
       register :js
 
+      def self.view_caching?
+        false
+      end
+
       def mime_type
         "text/javascript"
       end

data/mod/basic_formats/set/all/all_css.rb

@@ -6,11 +6,11 @@ format :css do
 
   def show view, args
     view ||= :content
-    render view, args
+    render! view, args
   end
 
   view :titled do |args|
-    major_comment(%( Style Card: "#{card.name}" )) + _render_core(args)
+    major_comment(%( Style Card: \\"#{card.name}\\" )) + _render_core(args)
   end
 
   view :content do |args|
@@ -26,7 +26,7 @@ format :css do
   end
 
   view :url, perms: :none do
-    page_path card.cardname, format: :css
+    page_path card.name, format: :css
   end
 
   def major_comment comment, char="-"

data/mod/basic_formats/set/all/all_js.rb

@@ -5,6 +5,6 @@ format :js do
   end
 
   view :include_tag do |_args|
-    %(\n#{javascript_include_tag page_path(card.cardname)}\n )
+    %(\n#{javascript_include_tag page_path(card.name)}\n )
   end
 end

data/mod/basic_formats/set/all/base.rb

@@ -1,12 +1,12 @@
 format do
   def show view, args
     view ||= :core
-    render view, args
+    render! view, args.merge(main_nest_options)
   end
 
   # NAME VIEWS
   view :name, closed: true, perms: :none do
-    name_variant card.cardname
+    name_variant card.name
   end
 
   def name_variant name
@@ -14,7 +14,7 @@ format do
   end
 
   view(:key,      closed: true, perms: :none) { card.key }
-  view(:linkname, closed: true, perms: :none) { card.cardname.url_key }
+  view(:linkname, closed: true, perms: :none) { card.name.url_key }
   view(:url,      closed: true, perms: :none) { card_url _render_linkname }
 
   view :title, closed: true, perms: :none do
@@ -67,7 +67,7 @@ format do
 
   view :raw do
     scard = voo.structure ? Card[voo.structure] : card
-    scard ? scard.raw_content : _render_blank
+    scard ? scard.content : _render_blank
   end
 
   view :core, closed: true do
@@ -142,7 +142,7 @@ format do
 
   def on_type_set
     return unless
-      (tmpl_set_name = parent.card.cardname.trunk_name) &&
+      (tmpl_set_name = parent.card.name.trunk_name) &&
       (tmpl_set_class_name = tmpl_set_name.tag_name) &&
       (tmpl_set_class_card = Card[tmpl_set_class_name]) &&
       (tmpl_set_class_card.codename == :type)

data/mod/basic_formats/set/all/json.rb

@@ -15,7 +15,7 @@ format :json do
 
   def show view, args
     view ||= :content
-    raw = render view, args
+    raw = render! view, args
     return raw if raw.is_a? String
     method = params[:compress] ? :generate : :pretty_generate
     JSON.send method, raw
@@ -48,7 +48,7 @@ format :json do
   view :status, tags: :unknown_ok, perms: :none, cache: :never do
     status = card.state
     hash = { key: card.key,
-             url_key: card.cardname.url_key,
+             url_key: card.name.url_key,
              status: status }
     hash[:id] = card.id if status == :real
     hash
@@ -62,7 +62,7 @@ format :json do
 
   view :atom, cache: :never do
     h = { name: card.name, type: card.type_name }
-    h[:content] = card.content unless card.structure
+    h[:content] = card.db_content unless card.structure
     h[:codename] = card.codename if card.codename
     h[:value] = _render_core if depth < max_depth
     h
@@ -91,7 +91,7 @@ format :json do
 
   def essentials
     return {} if card.structure
-    { content: card.content }
+    { content: card.db_content }
   end
 
   def request_url

data/mod/basic_formats/set/all/rss.rb

@@ -8,7 +8,7 @@ format :rss do
 
   def show view, args
     view ||= :feed
-    render view, args
+    render! view, args
   end
 
   # FIXME: integrate this with common XML features when it is added
@@ -40,7 +40,7 @@ format :rss do
   view :feed_item_list, cache: :never do
     raw_feed_items.each do |item|
       @xml.item do
-        subformat(item).render(:feed_item,
+        subformat(item).render!(:feed_item,
                                description_view: feed_item_description_view)
       end
     end
@@ -66,7 +66,7 @@ format :rss do
   end
 
   def description args
-    render(args[:description_view] || :open_content)
+    render!(args[:description_view] || :open_content)
   end
 
   def feed_item_description_view

data/mod/basic_formats/set/self/head.rb

@@ -43,7 +43,7 @@ format :html do
     style_card ||= root.card.rule_card :style
     @css_path =
       if params[:debug] == "style"
-        page_path(style_card.cardname, item: :import, format: :css)
+        page_path(style_card.name, item: :import, format: :css)
       elsif style_card
         style_card.machine_output_url
       end
@@ -64,14 +64,19 @@ format :html do
   end
 
   def favicon
-    %i[favicon logo].each do |name|
-      if (c = Card[name]) && c.type_id == ImageID && !c.db_content.blank?
-        href = subformat(c)._render_source size: :small
-        return %(<link rel="shortcut icon" href="#{href}" />)
+    return "" unless favicon_code
+    %(<link rel="shortcut icon" href="#{nest favicon_code, view: :source, size: :small}" />)
+  end
+
+  def favicon_code
+    @favicon_code ||=
+      %i[favicon logo].find do |name|
+        icon_card = Card[name]
+        icon_card.type_id == ImageID && !icon_card.db_content.blank?
       end
-    end
   end
 
+
   def universal_edit_button
     return if root.card.new_record? || !root.card.ok?(:update)
     href = root.path view: :edit
@@ -84,7 +89,7 @@ format :html do
     if root.search_params[:vars]
       root.search_params[:vars].each { |key, val| opts["_#{key}"] = val }
     end
-    href = page_path root.card.cardname, opts
+    href = page_path root.card.name, opts
     tag "link", rel: "alternate", type: "application/rss+xml",
                 title: "RSS", href: href
   end

data/mod/bootstrap/db/migrate_cards/20170719163710_update_bootswatch_themes_to_4_beta.rb

@@ -0,0 +1,115 @@
+# -*- encoding : utf-8 -*-
+
+class UpdateBootswatchThemesTo4Beta < Card::Migration::Core
+  def up
+    puts "Updating bootstrap themes ..."
+    Skin.themes.each do |theme_name|
+      puts theme_name
+      Skin.new(theme_name).create_or_update
+    end
+    update_default_bootstrap
+  end
+
+  def update_default_bootstrap
+    paths = [Skin.bootstrap_scss_path("functions"),
+             Skin.bootstrap_scss_path("variables")]
+    puts "Update bootstrap default"
+    Skin.new("Bootstrap default")
+        .update_scss field_name: "variables", file_name: paths
+    puts "Finished"
+  end
+
+  class Skin
+    include ::Card::Model::SaveHelper
+
+    class << self
+      def vendor_path
+        File.expand_path "../../../vendor", __FILE__
+      end
+
+      def bootstrap_scss_path filename
+        File.join vendor_path, "bootstrap", "scss", "_#{filename}.scss"
+      end
+
+      def themes
+        json = File.read File.join(vendor_path, "bootswatch", "api", "4.json")
+        JSON.parse(json)["themes"].map { |theme| theme["name"] }
+      end
+    end
+
+    def initialize theme_name
+      @theme_name = theme_name.downcase
+      @skin_name = "#{theme_name} skin"
+      @skin_codename = @skin_name.downcase.tr(" ", "_")
+    end
+
+    def create_or_update
+      Card.exists?(@skin_name) ? update_skin : create_skin
+    end
+
+
+    def create_skin
+      Card.create! name: @skin_name,
+                   codename: @skin_codename,
+                   type_id: Card::SkinID,
+                   content: "[[themeless bootstrap skin]]\n[[+bootswatch theme]]",
+                   subcards: {
+                     "+variables" => scss_args([Skin.bootstrap_scss_path("functions"),
+                                                   Skin.bootstrap_scss_path("variables"),
+                                                   "variables"]),
+                     "+style" => scss_args("bootswatch"),
+                     "+Image" => thumbnail_args
+                   }
+    end
+
+    def update_skin
+      update_scss file_name: [Skin.bootstrap_scss_path("functions"),
+                              Skin.bootstrap_scss_path("variables"),
+                              "variables"],
+                  field_name: "variables"
+      update_scss file_name: "bootswatch", field_name: "style"
+      update_tumbnail
+    end
+
+    def update_scss file_name:, field_name: file_name
+      update_card "#{@skin_name}+#{field_name}", scss_args(file_name)
+    end
+
+    def update_tumbnail
+      update_card "#{@skin_name}+Image", thumbnail_args
+    end
+
+    private
+
+    def scss_args file_name
+      paths = Array.wrap(file_name).map { |fn| resource_path(fn) }
+      content = paths.map { |p| File.read(p) }.join "\n"
+      { type_id: Card::ScssID, content: content }
+    end
+
+    def thumbnail_args
+      {
+        codename: "#{@skin_codename}_image",
+        type_id: Card::ImageID,
+        mod: :bootstrap, storage_type: :coded,
+        image: File.open(resource_path("thumbnail.png"))
+      }
+    end
+
+    def resource_path resource
+      resource = "_#{resource}.scss" unless resource.include? "."
+      if resource.include? File::SEPARATOR
+        resource
+      else
+        File.join base_resource_dir, resource
+      end
+    end
+
+    def base_resource_dir
+      File.join Skin.vendor_path, "bootswatch", @theme_name
+      # Card::Migration::Core.data_path "b4_beta_themes/#{@theme_name.downcase.tr(" ","_")}"
+    end
+  end
+end
+
+

data/mod/bootstrap/db/migrate_cards/20170726145012_select2.rb

@@ -6,13 +6,13 @@ class Select2 < Card::Migration
                 type_id: Card::JavaScriptID,
                 to: "*all+*script"
 
-    add_style"select2",
-             type_id: Card::CssID,
-                  to: "*all+*style"
-
-    add_style"select2 bootstrap",
-                 type_id: Card::ScssID,
-                      to: "*all+*style"
+    # add_style "select2",
+    #           type_id: Card::CssID,
+    #               to: "*all+*style"
+    #
+    # add_style "select2 bootstrap",
+    #              type_id: Card::ScssID,
+    #                   to: "*all+*style"
 
     add_script "load select2",
                type_id: Card::CoffeeScriptID,

data/mod/bootstrap/lib/bootstrap/component/panel.rb

@@ -3,7 +3,7 @@ class Bootstrap
     class Panel < OldComponent
       def_div_method :panel, "card"
       def_div_method :heading, "card-header"
-      def_div_method :body, "card-block"
+      def_div_method :body, "card-body"
     end
   end
 end

data/mod/bootstrap/lib/javascript/script_load_select2.js.coffee

@@ -2,6 +2,8 @@ decko.slotReady (slot) ->
   slot.find('select:not(._no-select2)').each (i) ->
     $(this).select2()
 
+$.fn.select2.defaults.set( "theme", "bootstrap" )
+
 #  slot.find('.pointer-multiselect').each (i) ->
 #    load_select2($(this))
 #

data/mod/bootstrap/lib/stylesheets/bootstrap_cards.scss

@@ -15,6 +15,7 @@ $label_color: #666666;
 $border_color: #999999;
 $header_color: #eeeeee;
 $credit_color: #186886; /* wagn blue */
+$gray-light: #e7e7e7;
 
 header {
   a {
@@ -63,7 +64,7 @@ form {
 
 
 .link-muted {
-  color: $gray-light;
+  color: $gray-light; // FIXME: this should depend on the theme
   &:hover {
     color: inherit;
   }
@@ -130,13 +131,6 @@ body.mceContentBody {
   padding: 5px !important;
   margin-bottom: 15px !important;
 }
-.offcanvas-toggle-right {
-  float: right;
-}
-.offcanvas-toggle-left {
-  float: left;
-}
-
 
 /*---------- Card menu ------------*/
 

data/mod/bootstrap/lib/stylesheets/style_select2_bootstrap.scss

@@ -1,19 +1,21 @@
+// The original select2 bootstrap is overriden here using this gist
+// https://gist.github.com/DaleMckeown/82995dcc482650f130a708f11a66a2a6
+// to make it work with bootstrap 4 beta
+
 //
 // Variables
 // --------------------------------------------------
 
+
 // Variables directly translating Bootstrap variables
 // -------------------------
 
-$s2bs-border-radius-base: $border-radius !default;
-$s2bs-border-radius-large: $border-radius-lg !default;
-$s2bs-border-radius-small: $border-radius-sm !default;
-$s2bs-btn-default-bg: $btn-secondary-bg !default;
-$s2bs-btn-default-border: $btn-secondary-border !default;
-$s2bs-btn-default-color: $btn-secondary-color !default;
-$s2bs-caret-width-base: $caret-width !default;
-$s2bs-caret-width-large: $caret-width !default;
-$s2bs-cursor-disabled: $cursor-disabled !default;
+$s2bs-border-radius: $border-radius !default;
+$s2bs-border-radius-lg: $border-radius-lg !default;
+$s2bs-border-radius-sm: $border-radius-sm !default;
+$s2bs-btn-bg: theme-color("info") !default;
+$s2bs-btn-border-color: theme-color("info") !default;
+$s2bs-btn-color: $white !default;
 $s2bs-dropdown-header-color: $dropdown-header-color !default;
 $s2bs-dropdown-link-active-bg: $dropdown-link-active-bg !default;
 $s2bs-dropdown-link-active-color: $dropdown-link-active-color !default;
@@ -21,43 +23,46 @@ $s2bs-dropdown-link-disabled-color: $dropdown-link-disabled-color !default;
 $s2bs-dropdown-link-hover-bg: $dropdown-link-hover-bg !default;
 $s2bs-dropdown-link-hover-color: $dropdown-link-hover-color !default;
 $s2bs-font-size-base: $font-size-base !default;
-$s2bs-font-size-large: $font-size-lg !default;
-$s2bs-font-size-small: $font-size-sm !default;
-$s2bs-padding-base-horizontal: $input-padding-x !default;
-$s2bs-padding-large-horizontal: $input-padding-x-lg !default;
-$s2bs-padding-small-horizontal: $input-padding-x-sm !default;
-$s2bs-padding-base-vertical: $input-padding-y !default;
-$s2bs-padding-large-vertical: $input-padding-y-lg !default;
-$s2bs-padding-small-vertical: $input-padding-y-sm !default;
-$s2bs-line-height-base: $input-line-height !default;
-$s2bs-line-height-large: $line-height-lg !default;
-$s2bs-line-height-small: $line-height-sm !default;
-$s2bs-input-bg: $input-bg !default;
-$s2bs-input-bg-disabled: $input-bg-disabled !default;
+$s2bs-font-size-lg: $font-size-lg !default;
+$s2bs-font-size-sm: $font-size-sm !default;
 $s2bs-input-color: $input-color !default;
-$s2bs-input-color-placeholder: $input-color-placeholder !default;
+$s2bs-input-bg: $input-bg !default;
 $s2bs-input-border: $input-border-color !default;
-$s2bs-input-border-focus: $input-border-focus !default;
-$s2bs-input-border-radius: $border-radius  !default;
-$s2bs-input-height-base: $input-height !default;
-$s2bs-input-height-large: $input-height-lg !default;
-$s2bs-input-height-small: $input-height-sm !default;
-$s2bs-screen-size-sm: 540px !default;
-
+$s2bs-input-border-radius: $input-border-radius !default;
+$s2bs-input-btn-padding-x: $input-btn-padding-x !default;
+$s2bs-input-btn-padding-y: $input-btn-padding-y !default;
+$s2bs-input-btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$s2bs-input-btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$s2bs-input-btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$s2bs-input-btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$s2bs-input-disabled-bg: $input-disabled-bg !default;
+$s2bs-input-focus-border-color: $input-focus-border-color !default;
+$s2bs-input-focus-color: $input-focus-color !default;
+$s2bs-input-height-inner: $input-height-inner !default;
+$s2bs-input-height: $input-height !default;
+$s2bs-input-height-inner-sm: $input-height-inner-sm !default;
+$s2bs-input-height-sm: $input-height-sm !default;
+$s2bs-input-height-inner-lg: $input-height-inner-lg !default;
+$s2bs-input-height-lg: $input-height-lg !default;
+$s2bs-input-placeholder-color: $input-placeholder-color !default;
+$s2bs-line-height-base: $input-btn-line-height !default;
+$s2bs-line-height-lg: $input-btn-line-height-lg !default;
+$s2bs-line-height-sm: $input-btn-line-height-sm !default;
 
 // Theme-specific variables
 // -------------------------
-
-$s2bs-dropdown-arrow-color: $s2bs-input-color-placeholder !default;
+$s2bs-caret-width: .3rem !default;
+$s2bs-clear-selection-color: $s2bs-input-placeholder-color !default;
+$s2bs-clear-selection-hover-color: $s2bs-btn-color !default;
+$s2bs-dropdown-arrow-color: $s2bs-input-placeholder-color !default;
 $s2bs-dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default;
 $s2bs-dropdown-box-shadow-above: 0px -6px 12px rgba(0,0,0,.175) !default;
-$s2bs-clear-selection-color: $s2bs-dropdown-arrow-color !default;
-$s2bs-clear-selection-hover-color: $s2bs-btn-default-color !default;
-$s2bs-remove-choice-color: $s2bs-input-color-placeholder !default;
-$s2bs-remove-choice-hover-color: $s2bs-btn-default-color !default;
-$s2bs-selection-choice-border-radius: $s2bs-border-radius-base !default;
-$s2bs-dropdown-header-padding-vertical: $s2bs-padding-base-vertical !default;
-$s2bs-dropdown-header-font-size: $s2bs-font-size-small !default;
+$s2bs-dropdown-header-font-size: $s2bs-font-size-sm !default;
+$s2bs-dropdown-header-padding-vertical: $s2bs-input-btn-padding-y !default;
+$s2bs-remove-choice-color: $s2bs-btn-color !default;
+$s2bs-remove-choice-hover-color: $s2bs-btn-color !default;
+$s2bs-screen-size-sm: map-get($container-max-widths, "sm") !default;
+$s2bs-selection-choice-border-radius: $s2bs-border-radius !default;
 
 
 // Bootstrap defaults not available as pre-defined variables
@@ -68,65 +73,64 @@ $s2bs-dropdown-header-font-size: $s2bs-font-size-small !default;
 $s2bs-form-control-default-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
 
 // @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_forms.scss#L60
-$s2bs-form-control-focus-box-shadow: $s2bs-form-control-default-box-shadow, 0 0 8px rgba($s2bs-input-border-focus, 0.6) !default;
+$s2bs-form-control-focus-box-shadow: $s2bs-form-control-default-box-shadow, 0 0 8px rgba($s2bs-input-focus-color, 0.6) !default;
 
 // @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L127
 $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
 
 
-
-
 //
 // Mixins
 // --------------------------------------------------
 
 // @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L115
 @mixin bootstrap-input-defaults {
-  @include box-shadow($s2bs-form-control-default-box-shadow);
-  background-color: $s2bs-input-bg;
-  border: 1px solid $s2bs-input-border;
-  border-radius: $s2bs-input-border-radius;
-  color: $s2bs-input-color;
-  font-size: $s2bs-font-size-base;
+    @include box-shadow($s2bs-form-control-default-box-shadow);
+    background-color: $s2bs-input-bg;
+    border: 1px solid $s2bs-input-border;
+    color: $s2bs-input-color;
+    font-size: $s2bs-font-size-base;
+
+    @include border-radius($s2bs-input-border-radius);
 }
 
 // @see http://getbootstrap.com/css/#forms-control-validation
 // @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L388
 @mixin validation-state-focus($color) {
-  $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($color, 20%);
 
-  .select2-dropdown,
-  .select2-selection {
-    border-color: $color;
-  }
+    $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($color, 20%);
 
-  .select2-container--focus .select2-selection,
-  .select2-container--open .select2-selection {
-    @include box-shadow($shadow);
-    border-color: darken($color, 10%);
-  }
+    .select2-dropdown,
+    .select2-selection {
+        border-color: $color;
+    }
 
-  &.select2-drop-active {
-    border-color: darken($color, 10%);
+    .select2-container--focus .select2-selection,
+    .select2-container--open .select2-selection {
+        @include box-shadow($shadow);
+        border-color: darken($color, 10%);
+    }
+
+    &.select2-drop-active {
+        border-color: darken($color, 10%);
 
-    &.select2-drop.select2-drop-above {
-      border-top-color: darken($color, 10%);
+        &.select2-drop.select2-drop-above {
+            border-top-color: darken($color, 10%);
+        }
     }
-  }
 }
 
 // dropdown arrow when dropdown is open
 @mixin dropdown-arrow {
-  .select2-selection--single {
-    /**
-     * Make the dropdown arrow point up while the dropdown is visible.
-     */
-
-    .select2-selection__arrow b {
-      border-color: transparent transparent $s2bs-dropdown-arrow-color transparent;
-      border-width: 0 $s2bs-caret-width-large $s2bs-caret-width-large $s2bs-caret-width-large;
+    .select2-selection--single {
+        /**
+         * Make the dropdown arrow point up while the dropdown is visible.
+         */
+        .select2-selection__arrow b {
+            border-color: transparent transparent $s2bs-dropdown-arrow-color transparent;
+            border-width: 0 $s2bs-caret-width $s2bs-caret-width $s2bs-caret-width;
+        }
     }
-  }
 }
 
 
@@ -134,576 +138,493 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in
 
 
 .select2-container--bootstrap {
-  display: block;
-
-
-
-
-  /*------------------------------------*\
+    display: block;
+    /*------------------------------------*\
       #COMMON STYLES
   \*------------------------------------*/
+    .select2-selection {
+        @include bootstrap-input-defaults;
+        outline: 0;
 
-  .select2-selection {
-    @include bootstrap-input-defaults;
-    outline: 0;
-
-    &.form-control {
-      border-radius: $s2bs-border-radius-base;
-    }
-  }
-
-
-
-  /**
-   * Search field in the Select2 dropdown.
-   */
-
-  .select2-search--dropdown {
-    .select2-search__field {
-      @include bootstrap-input-defaults;
-    }
-  }
-
-  /**
-   * No outline for all search fields - in the dropdown
-   * and inline in multi Select2s.
-   */
-
-  .select2-search__field {
-    outline: 0;
-
-    &::-webkit-input-placeholder {
-      color: $s2bs-input-color-placeholder;
-    }
-
-    /* Firefox 18- */
-    &:-moz-placeholder {
-      color: $s2bs-input-color-placeholder;
+        &.form-control {
+            @include border-radius($s2bs-input-border-radius);
+        }
     }
-
     /**
-     * Firefox 19+
-     *
-     * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox
-     */
-    &::-moz-placeholder {
-      color: $s2bs-input-color-placeholder;
-      opacity: 1;
-    }
-
-    &:-ms-input-placeholder {
-      color: $s2bs-input-color-placeholder;
-    }
-  }
-
-  /**
-   * Adjust Select2's choices hover and selected styles to match
-   * Bootstrap 3's default dropdown styles.
-   *
-   * @see http://getbootstrap.com/components/#dropdowns
-   */
-
-  .select2-results__option {
-    padding: $s2bs-padding-base-vertical $s2bs-padding-base-horizontal;
-
-    &[role=group] {
-      padding: 0;
+    * Search field in the Select2 dropdown.
+    */
+    .select2-search--dropdown {
+        .select2-search__field {
+            @include bootstrap-input-defaults;
+        }
     }
-
     /**
-     * Disabled results.
-     *
-     * @see https://select2.github.io/examples.html#disabled-results
-     */
-
-    &[aria-disabled=true] {
-      color: $s2bs-dropdown-link-disabled-color;
-      cursor: $s2bs-cursor-disabled;
-    }
+    * No outline for all search fields - in the dropdown
+    * and inline in multi Select2s.
+    */
+    .select2-search__field {
+        outline: 0;
 
-    /**
-     * Hover state.
-     */
+        &::-webkit-input-placeholder {
+            color: $s2bs-input-placeholder-color;
+        }
+        /* Firefox 18- */
+        &:-moz-placeholder {
+            color: $s2bs-input-placeholder-color;
+        }
+        /**
+        * Firefox 19+
+        *
+        * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox
+        */
+        &::-moz-placeholder {
+            color: $s2bs-input-placeholder-color;
+            opacity: 1;
+        }
 
-    &[aria-selected=true] {
-      background-color: $s2bs-dropdown-link-hover-bg;
-      color: $s2bs-dropdown-link-hover-color;
+        &:-ms-input-placeholder {
+            color: $s2bs-input-placeholder-color;
+        }
     }
-
     /**
-     * Selected state.
-     */
-
-    &--highlighted[aria-selected] {
-      background-color: $s2bs-dropdown-link-active-bg;
-      color: $s2bs-dropdown-link-active-color;
-    }
-
+    * Adjust Select2's choices hover and selected styles to match
+    * Bootstrap 4's default dropdown styles.
+    *
+    * @see http://getbootstrap.com/components/#dropdowns
+    */
     .select2-results__option {
-      padding: $s2bs-padding-base-vertical $s2bs-padding-base-horizontal;
-
-      .select2-results__group {
-        padding-left: 0;
-      }
+        padding: $s2bs-input-btn-padding-y $s2bs-input-btn-padding-x;
 
-      .select2-results__option {
-        margin-left: -$s2bs-padding-base-horizontal;
-        padding-left: $s2bs-padding-base-horizontal*2;
+        &[role=group] {
+            padding: 0;
+        }
+        /**
+        * Disabled results.
+        *
+        * @see https://select2.github.io/examples.html#disabled-results
+        */
+        &[aria-disabled=true] {
+            color: $s2bs-dropdown-link-disabled-color;
+        }
+        /**
+        * Hover state.
+        */
+        &[aria-selected=true] {
+            background-color: $s2bs-dropdown-link-hover-bg;
+            color: $s2bs-dropdown-link-hover-color;
+        }
+        /**
+        * Selected state.
+        */
+        &--highlighted[aria-selected] {
+            background-color: $s2bs-dropdown-link-active-bg;
+            color: $s2bs-dropdown-link-active-color;
+        }
 
         .select2-results__option {
-          margin-left: -$s2bs-padding-base-horizontal*2;
-          padding-left: $s2bs-padding-base-horizontal*3;
+            padding: $s2bs-input-btn-padding-y $s2bs-input-btn-padding-x;
 
-          .select2-results__option {
-            margin-left: -$s2bs-padding-base-horizontal*3;
-            padding-left: $s2bs-padding-base-horizontal*4;
+            .select2-results__group {
+                padding-left: 0;
+            }
 
             .select2-results__option {
-              margin-left: -$s2bs-padding-base-horizontal*4;
-              padding-left: $s2bs-padding-base-horizontal*5;
-
-              .select2-results__option {
-                margin-left: -$s2bs-padding-base-horizontal*5;
-                padding-left: $s2bs-padding-base-horizontal*6;
-              }
+                margin-left: -$s2bs-input-btn-padding-x;
+                padding-left: $s2bs-input-btn-padding-x*2;
+
+                .select2-results__option {
+                    margin-left: -$s2bs-input-btn-padding-x*2;
+                    padding-left: $s2bs-input-btn-padding-x*3;
+
+                    .select2-results__option {
+                        margin-left: -$s2bs-input-btn-padding-x*3;
+                        padding-left: $s2bs-input-btn-padding-x*4;
+
+                        .select2-results__option {
+                            margin-left: -$s2bs-input-btn-padding-x*4;
+                            padding-left: $s2bs-input-btn-padding-x*5;
+
+                            .select2-results__option {
+                                margin-left: -$s2bs-input-btn-padding-x*5;
+                                padding-left: $s2bs-input-btn-padding-x*6;
+                            }
+                        }
+                    }
+                }
             }
-          }
         }
-      }
-    }
-  }
-
-  .select2-results__group {
-    color: $s2bs-dropdown-header-color;
-    display: block;
-    padding: $s2bs-dropdown-header-padding-vertical $s2bs-padding-base-horizontal;
-    font-size: $s2bs-dropdown-header-font-size;
-    line-height: $s2bs-line-height-base;
-    white-space: nowrap;
-  }
-
-  &.select2-container--focus,
-  &.select2-container--open {
-    .select2-selection {
-      @include box-shadow($s2bs-form-control-focus-box-shadow);
-      @include transition($s2bs-form-control-transition);
-      border-color: $s2bs-input-border-focus;
     }
-  }
 
-  &.select2-container--open {
-    /**
-     * Make the dropdown arrow point up while the dropdown is visible.
-     */
-
-    .select2-selection .select2-selection__arrow b {
-      border-color: transparent transparent $s2bs-dropdown-arrow-color transparent;
-      border-width: 0 $s2bs-caret-width-base $s2bs-caret-width-base $s2bs-caret-width-base;
-    }
-
-    /**
-     * Handle border radii of the container when the dropdown is showing.
-     */
-
-    &.select2-container--below {
-      .select2-selection {
-        @include border-bottom-radius(0);
-        border-bottom-color: transparent;
-      }
-    }
-
-    &.select2-container--above {
-      .select2-selection {
-        @include border-top-radius(0);
-        border-top-color: transparent;
-      }
+    .select2-results__group {
+        color: $s2bs-dropdown-header-color;
+        display: block;
+        padding: $s2bs-dropdown-header-padding-vertical $s2bs-input-btn-padding-x;
+        font-size: $s2bs-dropdown-header-font-size;
+        line-height: $s2bs-line-height-base;
+        white-space: nowrap;
     }
-  }
-
-  /**
-   * Clear the selection.
-   */
-
-  .select2-selection__clear {
-    color: $s2bs-clear-selection-color;
-    cursor: pointer;
-    float: right;
-    font-weight: bold;
-    margin-right: 10px;
 
-    &:hover {
-      color: $s2bs-clear-selection-hover-color;
+    &.select2-container--focus,
+    &.select2-container--open {
+        .select2-selection {
+            @include box-shadow($s2bs-form-control-focus-box-shadow);
+            @include transition($s2bs-form-control-transition);
+            border-color: $s2bs-input-focus-border-color;
+        }
     }
-  }
 
-  /**
-   * Address disabled Select2 styles.
-   *
-   * @see https://select2.github.io/examples.html#disabled
-   * @see http://getbootstrap.com/css/#forms-control-disabled
-   */
+    &.select2-container--open {
+        /**
+         * Make the dropdown arrow point up while the dropdown is visible.
+         */
+        .select2-selection .select2-selection__arrow b {
+            border-color: transparent transparent $s2bs-dropdown-arrow-color transparent;
+            border-width: 0 $s2bs-caret-width $s2bs-caret-width $s2bs-caret-width;
+        }
+        /**
+         * Handle border radii of the container when the dropdown is showing.
+         */
+        &.select2-container--below {
+            .select2-selection {
+                @include border-bottom-radius(0);
+                border-bottom-color: transparent;
+            }
+        }
 
-  &.select2-container--disabled {
-    .select2-selection {
-      border-color: $s2bs-input-border;
-      @include box-shadow(none);
+        &.select2-container--above {
+            .select2-selection {
+                @include border-top-radius(0);
+                border-top-color: transparent;
+            }
+        }
     }
+    /**
+    * Clear the selection.
+    */
+    .select2-selection__clear {
+        color: $s2bs-clear-selection-color;
+        //cursor: pointer;
+        float: right;
+        font-weight: bold;
+        margin-right: 10px;
 
-    .select2-selection,
-    .select2-search__field {
-      cursor: $s2bs-cursor-disabled;
+        &:hover {
+            color: $s2bs-clear-selection-hover-color;
+        }
     }
+    /**
+    * Address disabled Select2 styles.
+    *
+    * @see https://select2.github.io/examples.html#disabled
+    * @see http://getbootstrap.com/css/#forms-control-disabled
+    */
+    &.select2-container--disabled {
+        .select2-selection {
+            border-color: $s2bs-input-border;
+            @include box-shadow(none);
+        }
 
-    .select2-selection,
-    .select2-selection--multiple .select2-selection__choice {
-      background-color: $s2bs-input-bg-disabled;
-    }
+        .select2-selection,
+        .select2-selection--multiple .select2-selection__choice {
+            background-color: $s2bs-input-disabled-bg;
+        }
 
-    .select2-selection__clear,
-    .select2-selection--multiple .select2-selection__choice__remove {
-      display: none;
+        .select2-selection__clear,
+        .select2-selection--multiple .select2-selection__choice__remove {
+            display: none;
+        }
     }
-  }
-
-
-
-
-
-  /*------------------------------------*\
+    /*------------------------------------*\
       #DROPDOWN
-  \*------------------------------------*/
-
-  /**
-   * Dropdown border color and box-shadow.
-   */
-
-  .select2-dropdown {
-    @include box-shadow($s2bs-dropdown-box-shadow);
-    border-color: $s2bs-input-border-focus;
-    overflow-x: hidden;
-    margin-top: -1px;
-
-    &--above {
-      @include box-shadow($s2bs-dropdown-box-shadow-above);
-      margin-top: 1px;
+    \*------------------------------------*/
+    /**
+    * Dropdown border color and box-shadow.
+    */
+    .select2-dropdown {
+        @include box-shadow($s2bs-dropdown-box-shadow);
+        border-color: $s2bs-input-focus-border-color;
+        overflow-x: hidden;
+        margin-top: -1px;
+        @include border-radius($s2bs-input-border-radius);
+
+        &--above {
+            @include box-shadow($s2bs-dropdown-box-shadow-above);
+            margin-top: 1px;
+        }
     }
-  }
-
-  /**
-   * Limit the dropdown height.
-   */
-
-  .select2-results > .select2-results__options {
-    max-height: 200px;
-    overflow-y: auto;
-  }
-
-
-
-
-
-  /*------------------------------------*\
-      #SINGLE SELECT2
-  \*------------------------------------*/
-
-  .select2-selection--single {
-    height: $s2bs-input-height-base;
-    line-height: $s2bs-line-height-base;
-    padding: $s2bs-padding-base-vertical ($s2bs-padding-base-horizontal + $s2bs-caret-width-base*3) $s2bs-padding-base-vertical $s2bs-padding-base-horizontal;
-
     /**
-     * Adjust the single Select2's dropdown arrow button appearance.
-     */
-
-    .select2-selection__arrow {
-      position: absolute;
-      bottom: 0;
-      right: $s2bs-padding-base-horizontal;
-      top: 0;
-      width: $s2bs-caret-width-base;
-
-      b {
-        border-color: $s2bs-dropdown-arrow-color transparent transparent transparent;
-        border-style: solid;
-        border-width: $s2bs-caret-width-base $s2bs-caret-width-base 0 $s2bs-caret-width-base;
-        height: 0;
-        left: 0;
-        margin-left: -$s2bs-caret-width-base;
-        margin-top: -$s2bs-caret-width-base/2;
-        position: absolute;
-        top: 50%;
-        width: 0;
-      }
+    * Limit the dropdown height.
+    */
+    .select2-results > .select2-results__options {
+        max-height: 200px;
+        overflow-y: auto;
     }
+    /*------------------------------------*\
+      #SINGLE SELECT2
+    \*------------------------------------*/
+    .select2-selection--single {
+        height: $s2bs-input-height;
+        line-height: $s2bs-line-height-base;
+        padding: $s2bs-input-btn-padding-y ($s2bs-input-btn-padding-x + $s2bs-caret-width*3) $s2bs-input-btn-padding-y $s2bs-input-btn-padding-x;
+        /**
+        * Adjust the single Select2's dropdown arrow button appearance.
+        */
+        .select2-selection__arrow {
+            position: absolute;
+            bottom: 0;
+            right: $s2bs-input-btn-padding-x;
+            top: 0;
+            width: $s2bs-caret-width;
+
+            b {
+                border-color: $s2bs-dropdown-arrow-color transparent transparent transparent;
+                border-style: solid;
+                border-width: $s2bs-caret-width $s2bs-caret-width 0 $s2bs-caret-width;
+                height: 0;
+                left: 0;
+                margin-left: -$s2bs-caret-width;
+                margin-top: -$s2bs-caret-width/2;
+                position: absolute;
+                top: 50%;
+                width: 0;
+            }
+        }
 
-    .select2-selection__rendered {
-      color: $s2bs-input-color;
-      padding: 0;
-    }
+        .select2-selection__rendered {
+            color: $s2bs-input-color;
+            padding: 0;
+        }
 
-    .select2-selection__placeholder {
-      color: $s2bs-input-color-placeholder;
+        .select2-selection__placeholder {
+            color: $s2bs-input-placeholder-color;
+        }
     }
-  }
-
-
-
-
-
-  /*------------------------------------*\
+    /*------------------------------------*\
     #MULTIPLE SELECT2
-  \*------------------------------------*/
-
-  .select2-selection--multiple {
-    min-height: $s2bs-input-height-base;
-    padding: 0;
-    height: auto;
-
-    .select2-selection__rendered {
-      box-sizing: border-box;
-      display: block;
-      line-height: $s2bs-line-height-base;
-      list-style: none;
-      margin: 0;
-      overflow: hidden;
-      padding: 0;
-      width: 100%;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .select2-selection__placeholder {
-      color: $s2bs-input-color-placeholder;
-      float: left;
-      margin-top: 5px;
-    }
-
-    /**
-     * Make Multi Select2's choices match Bootstrap 3's default button styles.
-     */
-
-    .select2-selection__choice {
-      color: $s2bs-input-color;
-      background: $s2bs-btn-default-bg;
-      border: 1px solid $s2bs-btn-default-border;
-      border-radius: $s2bs-selection-choice-border-radius;
-      cursor: default;
-      float: left;
-      margin: -($s2bs-padding-base-vertical - 1) 0 0 $s2bs-padding-base-horizontal/2;
-      padding: 0 $s2bs-padding-base-vertical;
-    }
+    \*------------------------------------*/
+    .select2-selection--multiple {
+        min-height: $s2bs-input-height;
+        padding: 0;
+        height: auto;
+
+        .select2-selection__rendered {
+            box-sizing: border-box;
+            display: block;
+            line-height: $s2bs-line-height-base;
+            list-style: none;
+            margin: 0;
+            overflow: hidden;
+            padding: 0;
+            width: 100%;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
-    /**
-     * Minus 2px borders.
-     */
-
-    .select2-search--inline {
-      .select2-search__field {
-        background: transparent;
-        padding: 0 $s2bs-padding-base-horizontal;
-        height: $s2bs-input-height-base;
-        line-height: $s2bs-line-height-base;
-        margin-top: 0;
-        min-width: 5em;
-      }
-    }
+        .select2-selection__placeholder {
+            color: $s2bs-input-placeholder-color;
+            float: left;
+            margin-top: 5px;
+        }
+        /**
+         * Make Multi Select2's choices match Bootstrap 4's default button styles.
+         */
+        .select2-selection__choice {
+            color: $s2bs-btn-color;
+            background: $s2bs-btn-bg;
+            border: 1px solid $s2bs-btn-border-color;
+            //cursor: default;
+            float: left;
+            margin: -($s2bs-input-btn-padding-y - 1) 0 0 $s2bs-input-btn-padding-x/2;
+            padding: 0 $s2bs-input-btn-padding-y;
+            @include border-radius($s2bs-selection-choice-border-radius);
+        }
+        .select2-search--inline {
+            .select2-search__field {
+                background: transparent;
+                padding: 0 $s2bs-input-btn-padding-x;
+                height: $s2bs-input-height-inner;
+                line-height: $s2bs-line-height-base;
+                margin-top: 0;
+                min-width: 5em;
+            }
+        }
 
-    .select2-selection__choice__remove {
-      color: $s2bs-remove-choice-color;
-      cursor: pointer;
-      display: inline-block;
-      font-weight: bold;
-      margin-right: $s2bs-padding-base-vertical / 2;
+        .select2-selection__choice__remove {
+            color: $s2bs-remove-choice-color;
+            cursor: pointer;
+            display: inline-block;
+            font-weight: bold;
+            margin-right: $s2bs-input-btn-padding-y / 2;
 
-      &:hover {
-        color: $s2bs-remove-choice-hover-color;
-      }
+            &:hover {
+                color: $s2bs-remove-choice-hover-color;
+            }
+        }
+        /**
+         * Clear the selection.
+         */
+        .select2-selection__clear {
+            margin-top: $s2bs-input-btn-padding-y;
+        }
     }
-
     /**
-     * Clear the selection.
-     */
-
-    .select2-selection__clear {
-      margin-top: $s2bs-padding-base-vertical;
+    * Address Bootstrap control sizing classes
+    *
+    * 1. Reset Bootstrap defaults.
+    * 2. Adjust the dropdown arrow button icon position.
+    *
+    * @see http://getbootstrap.com/css/#forms-control-sizes
+    */
+    /* 1 */
+    .select2-selection--single.input-sm,
+    .input-group-sm & .select2-selection--single,
+    .form-group-sm & .select2-selection--single {
+        @include border-radius($s2bs-border-radius-sm);
+        font-size: $s2bs-font-size-sm;
+        height: $s2bs-input-height-sm;
+        line-height: $s2bs-line-height-sm;
+        padding: $s2bs-input-btn-padding-y-sm $s2bs-input-btn-padding-x-sm + $s2bs-caret-width*3 $s2bs-input-btn-padding-y-sm $s2bs-input-btn-padding-x-sm;
+        /* 2 */
+        .select2-selection__arrow b {
+            margin-left: -$s2bs-input-btn-padding-y-sm;
+        }
     }
-  }
-
-
 
+    .select2-selection--multiple.input-sm,
+    .input-group-sm & .select2-selection--multiple,
+    .form-group-sm & .select2-selection--multiple {
+        min-height: $s2bs-input-height-sm;
+        @include border-radius($s2bs-border-radius-sm);
 
+        .select2-selection__choice {
+            font-size: $s2bs-font-size-sm;
+            line-height: $s2bs-line-height-sm;
+            margin: ($s2bs-input-btn-padding-y-sm) 0 0 $s2bs-input-btn-padding-x-sm/2;
+            padding: 0 $s2bs-input-btn-padding-y-sm;
+        }
 
-  /**
-   * Address Bootstrap control sizing classes
-   *
-   * 1. Reset Bootstrap defaults.
-   * 2. Adjust the dropdown arrow button icon position.
-   *
-   * @see http://getbootstrap.com/css/#forms-control-sizes
-   */
-
-  /* 1 */
-  .select2-selection--single.input-sm,
-  .input-group-sm & .select2-selection--single,
-  .form-group-sm & .select2-selection--single {
-    border-radius: $s2bs-border-radius-small;
-    font-size: $s2bs-font-size-small;
-    height: $s2bs-input-height-small;
-    line-height: $s2bs-line-height-small;
-    padding: $s2bs-padding-small-vertical $s2bs-padding-small-horizontal + $s2bs-caret-width-base*3 $s2bs-padding-small-vertical $s2bs-padding-small-horizontal;
+        .select2-search--inline .select2-search__field {
+            padding: 0 $s2bs-input-btn-padding-x-sm;
+            font-size: $s2bs-font-size-sm;
+            height: $s2bs-input-height-inner-sm;
+            line-height: $s2bs-line-height-sm;
+        }
 
-    /* 2 */
-    .select2-selection__arrow b {
-      margin-left: -$s2bs-padding-small-vertical;
-    }
-  }
-
-  .select2-selection--multiple.input-sm,
-  .input-group-sm & .select2-selection--multiple,
-  .form-group-sm & .select2-selection--multiple {
-    min-height: $s2bs-input-height-small;
-    border-radius: $s2bs-border-radius-small;
-
-    .select2-selection__choice {
-      font-size: $s2bs-font-size-small;
-      line-height: $s2bs-line-height-small;
-      margin: ($s2bs-padding-small-vertical) 0 0 $s2bs-padding-small-horizontal/2;
-      padding: 0 $s2bs-padding-small-vertical;
+        .select2-selection__clear {
+            margin-top: $s2bs-input-btn-padding-y-sm;
+        }
     }
 
-    .select2-search--inline .select2-search__field {
-      padding: 0 $s2bs-padding-small-horizontal;
-      font-size: $s2bs-font-size-small;
-      height: $s2bs-input-height-small - 2;
-      line-height: $s2bs-line-height-small;
+    .select2-selection--single.input-lg,
+    .input-group-lg & .select2-selection--single,
+    .form-group-lg & .select2-selection--single {
+        @include border-radius($s2bs-border-radius-lg);
+        font-size: $s2bs-font-size-lg;
+        height: $s2bs-input-height-lg;
+        line-height: $s2bs-line-height-lg;
+        padding: $s2bs-input-btn-padding-y-lg $s2bs-input-btn-padding-x-lg + $s2bs-caret-width*3 $s2bs-input-btn-padding-y-lg $s2bs-input-btn-padding-x-lg;
+        /* 1 */
+        .select2-selection__arrow {
+            width: $s2bs-caret-width;
+
+            b {
+                border-width: $s2bs-caret-width $s2bs-caret-width 0 $s2bs-caret-width;
+                margin-left: -$s2bs-caret-width;
+                margin-left: -$s2bs-input-btn-padding-y-lg;
+                margin-top: -$s2bs-caret-width/2;
+            }
+        }
     }
 
-    .select2-selection__clear {
-      margin-top: $s2bs-padding-small-vertical;
-    }
-  }
+    .select2-selection--multiple.input-lg,
+    .input-group-lg & .select2-selection--multiple,
+    .form-group-lg & .select2-selection--multiple {
+        min-height: $s2bs-input-height-lg;
+        @include border-radius($s2bs-border-radius-lg);
 
-  .select2-selection--single.input-lg,
-  .input-group-lg & .select2-selection--single,
-  .form-group-lg & .select2-selection--single {
-    border-radius: $s2bs-border-radius-large;
-    font-size: $s2bs-font-size-large;
-    height: $s2bs-input-height-large;
-    line-height: $s2bs-line-height-large;
-    padding: $s2bs-padding-large-vertical $s2bs-padding-large-horizontal + $s2bs-caret-width-large*3 $s2bs-padding-large-vertical $s2bs-padding-large-horizontal;
+        .select2-selection__choice {
+            font-size: $s2bs-font-size-lg;
+            line-height: $s2bs-line-height-lg;
+            @include border-radius($s2bs-selection-choice-border-radius);
+            margin: ($s2bs-input-btn-padding-y-lg - 1) 0 0 $s2bs-input-btn-padding-x-lg/2;
+            padding: 0 $s2bs-input-btn-padding-y-lg;
+        }
 
-    /* 1 */
-    .select2-selection__arrow {
-      width: $s2bs-caret-width-large;
-
-      b {
-        border-width: $s2bs-caret-width-large $s2bs-caret-width-large 0 $s2bs-caret-width-large;
-        margin-left: -$s2bs-caret-width-large;
-        margin-left: -$s2bs-padding-large-vertical;
-        margin-top: -$s2bs-caret-width-large/2;
-      }
-    }
-  }
-
-  .select2-selection--multiple.input-lg,
-  .input-group-lg & .select2-selection--multiple,
-  .form-group-lg & .select2-selection--multiple {
-    min-height: $s2bs-input-height-large;
-    border-radius: $s2bs-border-radius-large;
-
-    .select2-selection__choice {
-      font-size: $s2bs-font-size-large;
-      line-height: $s2bs-line-height-large;
-      border-radius: $s2bs-selection-choice-border-radius;
-      margin: ($s2bs-padding-large-vertical - 1) 0 0 $s2bs-padding-large-horizontal/2;
-      padding: 0 $s2bs-padding-large-vertical;
-    }
+        .select2-search--inline .select2-search__field {
+            padding: 0 $s2bs-input-btn-padding-x-lg;
+            font-size: $s2bs-font-size-lg;
+            height: $s2bs-input-height-inner-lg;
+            line-height: $s2bs-line-height-lg;
+        }
 
-    .select2-search--inline .select2-search__field {
-      padding: 0 $s2bs-padding-large-horizontal;
-      font-size: $s2bs-font-size-large;
-      height: $s2bs-input-height-large - 2;
-      line-height: $s2bs-line-height-large;
+        .select2-selection__clear {
+            margin-top: $s2bs-input-btn-padding-y-lg;
+        }
     }
 
-    .select2-selection__clear {
-      margin-top: $s2bs-padding-large-vertical;
+    .select2-selection.input-lg.select2-container--open {
+        @include dropdown-arrow;
     }
-  }
-
-  .select2-selection.input-lg.select2-container--open {
-    @include dropdown-arrow;
-  }
 
-  .input-group-lg & .select2-selection {
-    &.select2-container--open {
-      @include dropdown-arrow;
+    .input-group-lg & .select2-selection {
+        &.select2-container--open {
+            @include dropdown-arrow;
+        }
     }
-  }
-
-
-
-
-
-  /*------------------------------------*\
+    /*------------------------------------*\
     #RTL SUPPORT
-  \*------------------------------------*/
-
-  &[dir="rtl"] {
-
-    /**
-     * Single Select2
-     *
-     * 1. Makes sure that .select2-selection__placeholder is positioned
-     *    correctly.
-     */
-
-    .select2-selection--single {
-      padding-left: $s2bs-padding-base-horizontal + $s2bs-caret-width-base*3;
-      padding-right: $s2bs-padding-base-horizontal;
-
-      .select2-selection__rendered {
-        padding-right: 0;
-        padding-left: 0;
-        text-align: right; /* 1 */
-      }
+    \*------------------------------------*/
+    &[dir="rtl"] {
+        /**
+        * Single Select2
+        *
+        * 1. Makes sure that .select2-selection__placeholder is positioned
+        *    correctly.
+        */
+        .select2-selection--single {
+            padding-left: $s2bs-input-btn-padding-x + $s2bs-caret-width*3;
+            padding-right: $s2bs-input-btn-padding-x;
+
+            .select2-selection__rendered {
+                padding-right: 0;
+                padding-left: 0;
+                text-align: right; /* 1 */
+            }
 
-      .select2-selection__clear {
-        float: left;
-      }
+            .select2-selection__clear {
+                float: left;
+            }
 
-      .select2-selection__arrow {
-        left: $s2bs-padding-base-horizontal;
-        right: auto;
+            .select2-selection__arrow {
+                left: $s2bs-input-btn-padding-x;
+                right: auto;
 
-        b {
-          margin-left: 0;
+                b {
+                    margin-left: 0;
+                }
+            }
         }
-      }
-    }
-
-    /**
-     * Multiple Select2
-     */
-
-    .select2-selection--multiple {
-      .select2-selection__choice,
-      .select2-selection__placeholder,
-      .select2-search--inline {
-        float: right;
-      }
+        /**
+         * Multiple Select2
+         */
+        .select2-selection--multiple {
+            .select2-selection__choice,
+            .select2-selection__placeholder,
+            .select2-search--inline {
+                float: right;
+            }
 
-      .select2-selection__choice {
-        margin-left: 0;
-        margin-right: $s2bs-padding-base-horizontal/2;
-      }
+            .select2-selection__choice {
+                margin-left: 0;
+                margin-right: $s2bs-input-btn-padding-x/2;
+            }
 
-      .select2-selection__choice__remove {
-        margin-left: 2px;
-        margin-right: auto;
-      }
+            .select2-selection__choice__remove {
+                margin-left: 2px;
+                margin-right: auto;
+            }
+        }
     }
-  }
 }
 
 
@@ -714,6 +635,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in
   #ADDITIONAL GOODIES
 \*------------------------------------*/
 
+
 /**
  * Address Bootstrap's validation states
  *
@@ -726,15 +648,15 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in
  */
 
 .has-warning {
-  @include validation-state-focus($state-warning-text);
+    @include validation-state-focus(theme-color("warning"));
 }
 
-.has-error {
-  @include validation-state-focus($state-danger-text);
+.has-danger {
+    @include validation-state-focus(theme-color("danger"));
 }
 
 .has-success {
-  @include validation-state-focus($state-success-text);
+    @include validation-state-focus(theme-color("success"));
 }
 
 /**
@@ -749,57 +671,53 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in
  */
 
 .input-group > .select2-hidden-accessible {
-  &:first-child + .select2-container--bootstrap > .selection > .select2-selection,
-  &:first-child + .select2-container--bootstrap > .selection > .select2-selection.form-control {
-    @include border-right-radius(0);
-  }
-
-  &:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection,
-  &:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
-    border-radius: 0;
-  }
-
-  &:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection,
-  &:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection.form-control {
-    @include border-left-radius(0);
-  }
+    &:first-child + .select2-container--bootstrap > .selection > .select2-selection,
+    &:first-child + .select2-container--bootstrap > .selection > .select2-selection.form-control {
+        @include border-right-radius(0);
+    }
+
+    &:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection,
+    &:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
+        @include border-radius(0);
+    }
+
+    &:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection,
+    &:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection.form-control {
+        @include border-left-radius(0);
+    }
 }
 
 .input-group > .select2-container--bootstrap {
-  display: table;
-  table-layout: fixed;
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  margin-bottom: 0;
-
-  > .selection > .select2-selection.form-control {
-    float: none;
-  }
-
-  /**
-   * Adjust z-index like Bootstrap does to show the focus-box-shadow
-   * above appended buttons in .input-group and .form-group.
-   */
-
-  &.select2-container--open, /* .form-group */
-  &.select2-container--focus /* .input-group */ {
-    z-index: 3;
-  }
-
-  /**
-   * Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address
-   * Multi Select2's height which - depending on how many elements have been selected -
-   * may grow taller than its initial size.
-   *
-   * @see http://getbootstrap.com/components/#input-groups
-   */
-
-  &,
-  .input-group-btn,
-  .input-group-btn .btn {
-    vertical-align: top;
-  }
+    display: table;
+    table-layout: fixed;
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    margin-bottom: 0;
+
+    > .selection > .select2-selection.form-control {
+        float: none;
+    }
+    /**
+    * Adjust z-index like Bootstrap does to show the focus-box-shadow
+    * above appended buttons in .input-group and .form-group.
+    */
+    &.select2-container--open, /* .form-group */
+    &.select2-container--focus /* .input-group */ {
+        z-index: 3;
+    }
+    /**
+    * Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address
+    * Multi Select2's height which - depending on how many elements have been selected -
+    * may grow taller than its initial size.
+    *
+    * @see http://getbootstrap.com/components/#input-groups
+    */
+    &,
+    .input-group-btn,
+    .input-group-btn .btn {
+        vertical-align: top;
+    }
 }
 
 /**
@@ -813,8 +731,8 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in
  */
 
 .form-control.select2-hidden-accessible {
-  position: absolute !important;
-  width: 1px !important;
+    position: absolute !important;
+    width: 1px !important;
 }
 
 /**
@@ -822,7 +740,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in
  */
 
 .form-inline .select2-container--bootstrap {
-  @media (min-width: $s2bs-screen-size-sm) {
-    display: inline-block;
-  }
+    @media (min-width: $s2bs-screen-size-sm) {
+        display: inline-block;
+    }
 }