Bootstrap 4

Gemfile

@@ -8,7 +8,7 @@ gem 'sqlite3'
 gem 'puma', '~> 6.0'
 gem 'bootsnap'
 # Use bootstrap_form for easy form building
-gem 'bootstrap_form', '< 4' # pin to < 4 since we are not on bootstrap 4
+gem 'bootstrap_form', '~> 4.5'
 # A gem for simple rails environment specific config
 gem 'config'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder

Gemfile.lock

@@ -75,7 +75,9 @@ GEM
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
-    bootstrap_form (2.7.0)
+    bootstrap_form (4.5.0)
+      actionpack (>= 5.2)
+      activemodel (>= 5.2)
     borrow_direct (1.2.0)
       httpclient (~> 2.4)
     builder (3.2.4)
@@ -465,7 +467,7 @@ PLATFORMS
 
 DEPENDENCIES
   bootsnap
-  bootstrap_form (< 4)
+  bootstrap_form (~> 4.5)
   borrow_direct
   cancancan
   capistrano (~> 3.0)

app/assets/stylesheets/application.sass.scss

@@ -1,7 +1,7 @@
 @import 'palette';
 @import 'variables';
 @import "bootstrap-icons/font/bootstrap-icons";
-@import 'bootstrap-sass/assets/stylesheets/bootstrap';
+@import 'bootstrap/scss/bootstrap';
 @import 'sul-requests-mixins';
 @import 'sul-requests';
 

app/assets/stylesheets/base.scss

@@ -37,11 +37,106 @@ dt {
   font-weight: normal;
 }
 
-button:focus,
-embed:focus,
-input:focus,
-object:focus,
-select:focus,
-textarea:focus {
-  @include tab-focus;
+
+h1 {
+  color: $sul-h1-font-color;
+  letter-spacing: -0.05em;
+  padding-bottom: 0;
+}
+
+h2 {
+  color: $sul-h2-font-color;
+}
+
+dt {
+  color: $gray-41-percent;
+  font-size: 0.9em;
+  padding-top: 0.15em;
+  text-transform: uppercase !important;
+}
+
+dd {
+  margin-bottom: 0.5em;
+  max-width: 45em;
+}
+
+.col-form-label {
+  text-align: right;
+}
+
+@media (min-width: 768px) {
+  .dl-horizontal dt {
+    float: left;
+    width: 160px;
+    clear: left;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dl-horizontal dd {
+    margin-left: 180px;
+  }
+}
+
+.dl-horizontal dd:before,
+.dl-horizontal dd:after, {
+  display: table;
+  content: " ";
+}
+
+.dl-horizontal dd:after {
+  clear: both;
+}
+
+.table th {
+  border-top: 0 !important;
+}
+
+.well {
+  @extend .card;
+  background-color: $gray-100;
+  padding: $spacer;
+}
+
+.help-block {
+  @extend .form-text;
+  @extend .text-muted;
+}
+
+p.form-control-static {
+  margin-bottom: 0;
+  padding-top: 7px;
+  padding-bottom: 7px;
 }
+
+.input-like-text {
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+.alert p:last-child {
+  @extend .mb-0;
+}
+
+.alert .form-group {
+  margin-bottom: 0;
+}
+
+#copyright-restrictions {
+  .card-title {
+    margin-bottom: 0;
+  }
+  .card-body {
+    padding-top: 0;
+  }
+}
+
+#header-navbar {
+  .navbar-brand {
+    display: none;
+  }
+
+  padding-bottom: 5px;
+  padding-top: 5px;
+}

app/assets/stylesheets/layout.scss

@@ -39,23 +39,25 @@
   #topnav,
   #main-container,
   #sul-footer {
-    width: 750px;
+    max-width: 750px;
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 
 @media (min-width: 980px) {
   #topnav,
   #main-container,
   #sul-footer {
-    width: 970px;
+    max-width: 970px;
   }
 }
 
 @media (min-width: 1200px) {
   #topnav,
   #main-container,
   #sul-footer {
-    width: 1170px;
+    max-width: 1170px;
   }
 }
 

app/assets/stylesheets/modules/aeon-overlay.scss

@@ -13,9 +13,9 @@
   }
 }
 
-// above $screen-md-min, .aeon-overlay's parent div switches to a float-based stacked grid layout per Bootstrap 3
+// above md .aeon-overlay's parent div switches to a float-based stacked grid layout per Bootstrap 3
 // this top spacing fixes a resulting overlap with the header's box shadow
-@media (min-width: $screen-md-min) {
+@media (min-width: breakpoint-min(md)) {
   .aeon-overlay {
     top: 10px;
   }

app/assets/stylesheets/modules/breadcrumb-pills.scss

@@ -8,9 +8,9 @@
   padding: 4px;
 
   .pill-addon {
-    @extend .pull-right;
+    @extend .float-right;
     border-left: 2px solid $breadcrumb-pill-border-color;
     margin-left: 10px;
     padding: 0 5px;
   }
-}
+}

app/assets/stylesheets/modules/forms.scss

@@ -1,11 +1,12 @@
 .form-group {
+  @extend .row;
   h3 {
     margin-top: 0;
   }
 }
 
 .destination-note-callout {
-  color: $text-color;
+  color: $body-color;
 }
 
 // This ensures that the login options toggle is viewed
@@ -24,7 +25,7 @@ hr {
 }
 
 .input-like-text {
-  padding-top: 7px;
+  // padding-top: 7px;
 }
 
 .or-divider {
@@ -37,9 +38,9 @@ hr {
 }
 
 .required:not([for='request_destination']) {
-  &::after {
-    @extend .label;
-    @extend .label-warning;
+  &:after {
+    @extend .badge;
+    @extend .badge-warning;
     content: 'Required';
     display: inline-block;
     margin-left: 5px;
@@ -48,7 +49,7 @@ hr {
 
 .hold-recall {
   label {
-    &[for="request_needed_date"]::after {
+    &[for="request_needed_date"]:after {
       display: none;
     }
   }
@@ -101,6 +102,13 @@ hr {
   }
 }
 
+// This is done because the html5 shim uses an element with the .help-block class
+// to display error messages. When a successful date is chosen the shim will remove
+// elements with a .help-block class which removes our note.
+.needed-date-help-block {
+  @extend .help-block;
+}
+
 .no-js .go-back-link {
   display: none;
 }
@@ -112,4 +120,4 @@ hr {
 .suid-prefix {
   font-weight: bold;
   letter-spacing: 0.1em;
-}
+}

app/assets/stylesheets/modules/item-selector.scss

@@ -8,19 +8,16 @@
   }
 
   .sort {
-    line-height: $line-height-computed;
+    line-height: $line-height-base;
 
     i {
       font-size: $font-size-tiny;
-      line-height: $line-height-computed;      
+      line-height: $line-height-base;
       margin-left: 15px;
     }
 
     &.asc,
     &.desc {
-      background-color: darken($btn-default-bg, 10%);
-      border-color: darken($btn-default-border, 12%);
-      color: $btn-default-color;
     }
   }
 
@@ -61,17 +58,13 @@
   }
 
   .barcode-checkbox {
-    background-color: $btn-default-bg;
-    border-color: $btn-default-border;
     border-radius: 0;
     border-top: 0;
-    color: $btn-default-color;
     vertical-align: top;
   }
 
   .list .input-group:first-child {
     .barcode-checkbox {
-      border-top: 1px solid $btn-default-border;
     }
   }
 

app/assets/stylesheets/modules/messages.scss

@@ -12,13 +12,13 @@
     display: inline-block;
   }
 
-  @media screen and (max-width: $screen-xs-max) {
+  @media screen and (max-width: breakpoint-min(sm)) {
     .start-at,
     .end-at {
       display: block;
     }
 
-    .control-label {
+    .col-form-label {
       width: 14ch;
     }
   }

app/assets/stylesheets/modules/scan-or-deliver.scss

@@ -18,16 +18,16 @@
 }
 
 .panel-danger {
-  .panel-heading {
+  .card-header {
     border-bottom: 0;
     font-size: 1.3em;
   }
 
-  .panel-body {
-    background: $panel-danger-bg;
+  .card-header, .card-body {
+    background: lighten($panel-danger-bg, 60);
   }
 
-  .panel-title {
+  .card-title {
     font-weight: 500;
   }
 }

app/assets/stylesheets/modules/success.scss

@@ -1,7 +1,7 @@
 .success-page {
 
   .request-info {
-    color: $gray-base;
+    color: $body-color;
 
     h2 {
       color: inherit;