Supply obsolete bootstrap 3 variables so that scss will compile.

app/assets/stylesheets/spotlight/_catalog.scss

@@ -31,7 +31,6 @@
     text-align: center;
     li {
       @extend .label;
-      @extend .label-default;
       a {
         color: #fff;
       }
@@ -115,6 +114,5 @@ form.edit_solr_document {
 
   .blacklight-exhibit_tags a {
     @extend .label;
-    @extend .label-default;
   }
 }

app/assets/stylesheets/spotlight/_curation.scss

@@ -10,7 +10,7 @@
   display: inline-block;
   .input-field {
     input[type='text'] {
-      @extend .input-sm;
+      @extend .form-control-sm;
       height: auto;
       padding: 0 5px;
       width: 195px;
@@ -19,8 +19,8 @@
     }
     input[type='submit'] {
       @extend .btn;
-      @extend .btn-default;
-      @extend .btn-xs;
+      @extend .btn-secondary;
+      @extend .btn-sm;
     }
     display: none;
   }
@@ -217,4 +217,4 @@ table.tags {
   td:nth-child(3), th:nth-child(3) {
     text-align: center;
   }
-}
+}

app/assets/stylesheets/spotlight/_exhibits_index.scss

@@ -61,7 +61,7 @@
   }
 
   .unpublished {
-    @extend .center-block;
+    @extend .mx-auto;
 
     font-size: $font-size-base;
     margin-top: -1em;

app/assets/stylesheets/spotlight/_featured_browse_categories_block.scss

@@ -88,11 +88,11 @@ $aspect-ratio-factor-medium-image: 1; // 1:1 width: height
       }
     }
     .category-4 {
-      @extend .hidden-sm;
+      @extend .d-sm-none;
     }
     .category-5 {
-      @extend .hidden-md;
-      @extend .hidden-sm;
+      @extend .d-md-none;
+      @extend .d-sm-none;
     }
   }
 }

app/assets/stylesheets/spotlight/_header.scss

@@ -49,8 +49,7 @@
   }
 
   small {
-    @extend .hidden-xs;
-
+    @extend .d-xs-none;
     display: block;
     padding-bottom: $padding-base-vertical;
     padding-top: $padding-base-vertical;

app/assets/stylesheets/spotlight/_mixins.scss

@@ -15,7 +15,6 @@
 @mixin private-label() {
   &:after {
     @extend .label;
-    @extend .label-warning;
     content: 'Private';
     margin-left: 3px;
   }

app/assets/stylesheets/spotlight/_sir-trevor_overrides.scss

@@ -75,7 +75,7 @@
 
 .st-block-controls__button {
   @extend .btn;
-  @extend .btn-default;
+  @extend .btn-secondary;
 
   background-color: $btn-default-bg;
   border: 1px solid $gray-lighter;

app/assets/stylesheets/spotlight/_slideshow_block.scss

@@ -1,5 +1,5 @@
 .carousel-block {
-  
+
   .carousel-inner > .item > a > img {
     // center the image
     margin-left: auto;
@@ -15,9 +15,9 @@
     // fill left + right
     left: 0;
     right: 0;
-    
+
     // and add a nice background gradient to the captions
-    @include gradient-vertical($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
+    @include gradient-y($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
   }
 
   // Scale up controls for tablets and up
@@ -61,7 +61,7 @@
     }
 
     li {
-      display: relative; 
+      display: relative;
       width: 100%;
       height: auto;
       text-indent: 0;
@@ -81,4 +81,4 @@
       a { color: #fff; }
     }
   }
-}
+}

app/assets/stylesheets/spotlight/_variables_bootstrap.scss

@@ -1,6 +1,106 @@
+
+// These variables exist in bootstrap 3, but not bootstrap 4.  However, the
+// spotlight styles use them throuought, so defining them here temporarily:
+$gray-base: #000 !default;
+$gray-darker:  lighten($gray-base, 13.5%) !default; // #222
+$gray-dark:    lighten($gray-base, 20%) !default;   // #333
+$gray:         lighten($gray-base, 33.5%) !default; // #555
+$gray-light:   lighten($gray-base, 46.7%) !default; // #777
+$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
+
+$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
+$brand-danger: #d9534f !default;
+
+$text-color: $gray-dark !default;
+
+$font-size-base: 1rem !default;
+$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
+
+// These could become $h*-font-size
 $font-size-h1:            floor(($font-size-base * 2.15)) !default; // ~30px
 $font-size-h2:            floor(($font-size-base * 1.7)) !default; // ~24px
 $font-size-h3:            ceil(($font-size-base * 1.53)) !default; // ~201px
 $font-size-h4:            ceil(($font-size-base * 1.21)) !default; // ~17px
 $font-size-h5:            $font-size-base !default;
 $font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$line-height-base: 1.428571429 !default; // 20/14
+$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
+
+$padding-base-vertical: 6px !default;
+$padding-base-horizontal: 12px !default;
+
+$padding-large-vertical: 10px !default;
+$padding-large-horizontal: 16px !default;
+
+$padding-small-vertical: 5px !default;
+$padding-small-horizontal: 10px !default;
+
+$padding-xs-horizontal: 5px !default;
+
+$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
+
+$border-radius-base: 4px !default;
+$border-radius-large: 6px !default;
+$border-radius-small: 3px !default;
+
+$table-condensed-cell-padding: 5px !default;
+
+$btn-default-color: #333 !default;
+$btn-default-bg: #fff !default;
+
+$btn-primary-bg: $brand-primary !default;
+
+$btn-danger-color: #fff !default;
+$btn-danger-bg: $brand-danger !default;
+$btn-danger-border: darken($btn-danger-bg, 5%) !default;
+
+$legend-border-color: #e5e5e5 !default;
+
+$zindex-navbar: 1000 !default;
+
+$screen-sm:                  768px !default;
+$screen-sm-min: $screen-sm !default;
+$screen-md:                  992px !default;
+$screen-md-min: $screen-md !default;
+$screen-lg:                  1200px !default;
+$screen-lg-min: $screen-lg !default;
+
+$screen-xs-max: ($screen-sm-min - 1) !default;
+$screen-sm-max: ($screen-md-min - 1) !default;
+$screen-md-max: ($screen-lg-min - 1) !default;
+
+$grid-gutter-width: 30px !default;
+
+$container-tablet: (720px + $grid-gutter-width) !default;
+$container-sm: $container-tablet !default;
+
+$container-desktop: (940px + $grid-gutter-width) !default;
+$container-md: $container-desktop !default;
+
+$container-large-desktop: (1140px + $grid-gutter-width) !default;
+
+$navbar-height: 50px !default;
+
+$navbar-default-bg: #f8f8f8 !default;
+$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
+
+$navbar-default-toggle-hover-bg: #ddd !default;
+$navbar-default-toggle-icon-bar-bg: #888 !default;
+$navbar-default-toggle-border-color: #ddd !default;
+
+$nav-link-padding: 10px 15px !default;
+$nav-link-hover-bg: $gray-lighter !default;
+
+$state-info-text: #31708f !default;
+$state-info-bg: #d9edf7 !default;
+
+$panel-default-border: #ddd !default;
+$panel-default-heading-bg: #f5f5f5 !default;
+
+$panel-info-text: $state-info-text !default;
+$panel-info-heading-bg: $state-info-bg !default;
+
+$well-bg: #f5f5f5 !default;
+$well-border: darken($well-bg, 7%) !default;

app/assets/stylesheets/spotlight/application.scss

@@ -1,5 +1,4 @@
 @import 'spotlight/variables_bootstrap';
-@import "bootstrap-sprockets";
 @import 'bootstrap';
 @import 'sir-trevor/main';
-@import 'spotlight/spotlight';
+@import 'spotlight/spotlight';

app/helpers/spotlight/application_helper.rb

@@ -114,7 +114,7 @@ def selected_search_block_views(block)
     def select_deselect_button
       button_tag(
         t(:".deselect_all"),
-        class: 'btn btn-default btn-xs metadata-select',
+        class: 'btn btn-default btn-sm metadata-select',
         data: {
           behavior: 'metadata-select',
           'deselect-text' => t(:".deselect_all"),

app/views/spotlight/admin_users/index.html.erb

@@ -51,7 +51,7 @@
   <p class="instructions"><%= t :'.all_users' %></p>
   <div id="all_users" class="well well-sm">
       <div class='btn-toolbar pull-right'>
-          <button class="btn btn-xs btn-default copy-email-addresses" data-clipboard-target="#all_users">
+          <button class="btn btn-sm btn-default copy-email-addresses" data-clipboard-target="#all_users">
               Copy
           </button>
       </div>

app/views/spotlight/exhibits/_exhibit_card_back.html.erb

@@ -11,7 +11,7 @@
     <%= exhibit.description.truncate(168, omission: "") %>
     <% if exhibit.description.length > 168 %>
       <%= content_tag(:span,"&hellip;".html_safe, class: "visible-sm visible-md") %>
-      <span class="hidden-sm hidden-md">
+      <span class="d-sm-none d-md-none">
         <%= exhibit.description.slice(168, exhibit.description.length) %>
       </span>
     <% end %>

app/views/spotlight/feature_pages/_header.html.erb

@@ -6,10 +6,10 @@
       <div class="panel-heading page">
         <div class="main row">
           <div class="col-sm-8">
-            <%= p.hidden_field :id, value: page.id , class: 'form-control input-sm' %>
+            <%= p.hidden_field :id, value: page.id , class: 'form-control form-control-sm' %>
             <h3 class="panel-title" data-in-place-edit-target=".edit-in-place" data-in-place-edit-field-target="[data-edit-field-target='true']">
               <a href="#edit-in-place" class="field-label edit-in-place"><%= page.title %></a>
-              <%= p.hidden_field :title, value: page.title , class: 'form-control input-sm', data: {:"edit-field-target" => 'true'} %>
+              <%= p.hidden_field :title, value: page.title , class: 'form-control form-control-sm', data: {:"edit-field-target" => 'true'} %>
             </h3>
           </div>
           <div class="col-sm-4 page-links">

app/views/spotlight/metadata_configurations/_metadata_field.html.erb

@@ -5,7 +5,7 @@
       <div class="handle-wrap" data-in-place-edit-target=".edit-in-place" data-in-place-edit-field-target="[data-edit-field-target='true']">
         <div class="dd-handle dd3-handle"><%= t :drag %></div>
         <a href="#edit-in-place" class="field-label edit-in-place"><%= index_field_label(nil, key) %></a>
-        <%= field.hidden_field :label, value: index_field_label(nil, key), class: 'form-control input-sm', data: {:"edit-field-target" => 'true'} %>
+        <%= field.hidden_field :label, value: index_field_label(nil, key), class: 'form-control form-control-sm', data: {:"edit-field-target" => 'true'} %>
        </div>
     </td>
     <td class="checkbox-cell text-center"><%= field.check_box :show, inline: true, checked: config.show, disabled: !config.immutable.show.nil?, label: "" %></td>

app/views/spotlight/pages/_page.html.erb

@@ -12,7 +12,7 @@
           <%= f.hidden_field :weight, data: {property: "weight"} %>
           <h3 class="panel-title" data-in-place-edit-target=".edit-in-place" data-in-place-edit-field-target="[data-edit-field-target='true']">
             <a href="#edit-in-place" class="field-label edit-in-place"><%= page.title %></a>
-            <%= f.hidden_field :title, value: page.title , class: 'form-control input-sm', data: {:"edit-field-target" => 'true'} %>
+            <%= f.hidden_field :title, value: page.title , class: 'form-control form-control-sm', data: {:"edit-field-target" => 'true'} %>
           </h3>
         </div>
 

app/views/spotlight/search_configurations/_facets.html.erb

@@ -16,7 +16,7 @@
                   <div class="col-sm-5">
                     <h3 class="panel-title" data-in-place-edit-target=".edit-in-place" data-in-place-edit-field-target="[data-edit-field-target='true']">
                       <a href="#edit-in-place" class="field-label edit-in-place"><%= facet_field_label(key) %></a>
-                      <%= facet.hidden_field :label, value: facet_field_label(key), class: 'form-control input-sm', data: {:"edit-field-target" => 'true'} %>
+                      <%= facet.hidden_field :label, value: facet_field_label(key), class: 'form-control form-control-sm', data: {:"edit-field-target" => 'true'} %>
                     </h3>
                   </div>
                   <div class="facet-metadata col-sm-5">

app/views/spotlight/tags/index.html.erb

@@ -17,7 +17,7 @@
       <tr>
         <td><%= link_to tag.name, url_to_tag_facet(tag.name) %></td>
         <td><%= tag.taggings.count %></td>
-        <td><%= delete_link(tag, exhibit_tag_path(current_exhibit, tag), class: 'btn btn-danger btn-xs') %></td>
+        <td><%= delete_link(tag, exhibit_tag_path(current_exhibit, tag), class: 'btn btn-danger btn-sm') %></td>
       </tr>
     <% end %>
     </tbody>