Update to use bootstrap 4 styles

projectblacklight · Sep 12, 2016 · 93dc847 · 93dc847
1 parent 77dd08e
commit 93dc847
Show file tree

Hide file tree

Showing 51 changed files with 216 additions and 318 deletions.
diff --git a/app/assets/javascripts/blacklight/blacklight.js b/app/assets/javascripts/blacklight/blacklight.js
@@ -14,11 +14,7 @@
 //= require blacklight/autocomplete
 //
 //Bootstrap JS for providing collapsable tablet/mobile menu/alert boxes
-//= require bootstrap/transition
-//= require bootstrap/collapse
-//= require bootstrap/dropdown
-//= require bootstrap/alert
-//= require bootstrap/modal
+//= require bootstrap-sprockets
 
 // Twitter Typeahead for autocomplete
 //= require twitter/typeahead

diff --git a/app/assets/javascripts/blacklight/checkbox_submit.js b/app/assets/javascripts/blacklight/checkbox_submit.js
@@ -42,7 +42,6 @@
         //for both bookmarks/$doc_id.  But let's take out the irrelevant parts
         //of the form to avoid any future confusion. 
         form.find("input[type=submit]").remove();
-        form.addClass('form-horizontal');
 
         //View needs to set data-doc-id so we know a unique value
         //for making DOM id

diff --git a/app/assets/stylesheets/blacklight/_balanced_list.scss b/app/assets/stylesheets/blacklight/_balanced_list.scss
@@ -1,6 +1,6 @@
 .dl-horizontal {
   dd {
-    margin-bottom: $padding-base-vertical;
+    margin-bottom: $spacer-y;
 
     &:after {
       clear: none;
@@ -12,6 +12,16 @@
   dt {
     font-weight: normal;
     color: $field_name_color;
+    text-align: right;
+
+    @media (max-width: breakpoint-max(sm)) {
+      text-align: left;
+    }
+
+    @media (min-width: breakpoint-max(sm)) {
+      text-align: right;
+    }
+
   }
 }
 

diff --git a/app/assets/stylesheets/blacklight/_blacklight_base.scss b/app/assets/stylesheets/blacklight/_blacklight_base.scss
@@ -7,7 +7,7 @@
    not to use the Blacklight CSS file at all in your local app. */
 
 @import 'blacklight/blacklight_defaults';
-
+@import "blacklight/bootstrap_overrides";
 @import "blacklight/layout";
 @import "blacklight/header";
 @import "blacklight/constraints";

diff --git a/app/assets/stylesheets/blacklight/_bookmark.scss b/app/assets/stylesheets/blacklight/_bookmark.scss
@@ -1,7 +1,3 @@
-.clear-bookmarks {
-  margin-left: $border-radius-base;
-}
-
 label.toggle_bookmark {
 	font-weight: inherit;
 	min-width: 8.5em;

diff --git a/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss b/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss
@@ -0,0 +1,22 @@
+.navbar + .container {
+  @extend .p-y-2;
+}
+
+.card-header.collapse-toggle {
+  margin-bottom: 0;
+
+  &::after {
+    content: "❯";
+    float: right;
+    transform: rotate(90deg);
+  }
+
+  &.collapsed {
+    border-bottom: 0;
+
+    &::after {
+      transform: rotate(0deg);
+      transition: transform 0.1s ease;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/blacklight/_constraints.scss b/app/assets/stylesheets/blacklight/_constraints.scss
@@ -1,5 +1,6 @@
 .constraints-container {
-  @extend .well;
+  @extend .card;
+  background-color: $gray-lightest;
   line-height: 2.5;
   padding: 16px 19px;
 }
@@ -14,36 +15,34 @@ span.constraints-label {
     text-overflow: ellipsis;
     overflow: hidden;
 
-    @media (max-width: $screen-xs-max) {
-      max-width: $screen-xs-min / 2;
+    @media (max-width: breakpoint-max(xs)) {
+      max-width: breakpoint-max(xs) / 2;
     }
 
-    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-      max-width: $screen-sm-min / 2;
+    @media (min-width: breakpoint-min(sm)) and (max-width: breakpoint-max(sm)) {
+      max-width: breakpoint-min(sm) / 2;
     }
 
-    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
-      max-width: $screen-md-min / 2;
+    @media (min-width: breakpoint-min(md)) and (max-width: breakpoint-max(md)) {
+      max-width: breakpoint-min(md) / 2;
     }
 
-    @media (min-width: $screen-lg-min) {
-      max-width: $screen-lg-min / 2;
+    @media (min-width: breakpoint-min(lg)) {
+      max-width: breakpoint-min(lg) / 2;
     }
 
     &:hover, &:active {
-      background-color: $btn-default-bg;
-      border-color: $btn-default-border;
+      background-color: $btn-secondary-bg;
+      border-color: $btn-secondary-border;
       box-shadow: none;
     }
   }
 
   .filterName:after {
     @extend .text-muted;
-    font-family: 'Glyphicons Halflings';
-    /* glyphicon-chevron-right */
-    content: "\e080";
-    font-size: 70%;
-    padding-left: $caret-width-base;
+    content: "❯";
+    font-size: 90%;
+    padding-left: $caret-width;
   }
 
   .remove:hover, .remove:active {

diff --git a/app/assets/stylesheets/blacklight/_controls.scss b/app/assets/stylesheets/blacklight/_controls.scss
@@ -1,14 +1,14 @@
 .sort-pagination,
 .pagination-search-widgets {
-  border-bottom: 1px solid $pagination-border;
+  border-bottom: $pagination-border-width solid $pagination-border-color;
   margin-bottom: 1em;
   padding-bottom: 1em;
 }
 
 .pagination-search-widgets {
   @extend .clearfix;
   padding-top: 1px;
-  padding-bottom: $padding-base-vertical;
+  padding-bottom: $spacer-y;
 }
 
 .sort-pagination .dropdown-toggle {
@@ -43,15 +43,15 @@
   color: $link-color;
 
   .caret {
-    color: $text-color;
+    color: $body-color;
   }
 }
 
 .search-input-group {
   width: 80%;
 }
 
-@media (max-width: $screen-sm-min) {
+@media (max-width: breakpoint-max(xs)) {
   .search-input-group {
     width: auto;
   }

diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -1,48 +1,20 @@
-.page-sidebar,
-.facets {
-  @extend .clearfix;
-  padding-bottom: $padding-large-vertical;
-}
-
 .facets .facets-heading {
   @extend h4;
 }
 
-.no-js {
-  .page-sidebar .collapse {
-    @extend .in;
-  }  
-}
-
 .facet_limit-active {
-  @extend .panel-success;
-}
-
-.facets > .collapse {
-  @extend .navbar-collapse;
-  padding-left: 0;
-  padding-right: 0;
-  border-top: none;
-  box-shadow: none;
-  max-height: none;
-}
-
-.facets-toggle {
-  @extend .navbar-toggle;
-  @extend .btn;
-  @extend .btn-default;
+  @extend .card-outline-success;
 
-  border-color: $navbar-default-toggle-border-color;
-
-  .icon-bar {
-    background-color: $navbar-default-toggle-icon-bar-bg;
+  .card-header {
+    background-color: $brand-success;
   }
 }
 
 .facet-values {
   display: table;
   table-layout: fixed;
   width: 100%;
+  margin-bottom: 0;
 
   li {
 
@@ -54,18 +26,14 @@
   }
 
   .remove {
-    @extend .text-muted;
-    text-indent: $padding-base-horizontal;
-
-    .glyphicon {
-      top: 0.1em;
-      vertical-align: text-top;
-    }
+    color: $text-muted;
+    font-weight: bold;
+    padding-left: $spacer-x / 2;
 
     &:hover {
       color: $brand-danger;
+      text-decoration: none;
     }
-
   }
 
   @mixin hyphens-auto {
@@ -80,7 +48,7 @@
     padding-right: 1em;
     text-indent: -15px;
     padding-left: 15px;
-    padding-bottom: $padding-base-vertical;
+    padding-bottom: $spacer-y;
     @include hyphens-auto;
   }
 
@@ -107,22 +75,8 @@
 
 }
 
-.collapse-toggle {
-  cursor: pointer;
-}
-
-.panel-heading.collapse-toggle .panel-title:after {
-    /* symbol for "opening" panels */
-    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
-    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
-    float: right;        /* adjust as needed */
-    color: grey;         /* adjust as needed */
-    font-size: 0.8em;
-    line-height: normal;
-}
-.panel-heading.collapse-toggle.collapsed .panel-title:after {
-    /* symbol for "collapsed" panels */
-    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
+.facet-field-heading {
+  @extend .h6;
 }
 
 /* Sidenav
@@ -137,29 +91,6 @@
 }
 
 
-// Facet modal alphabetical filter
-.alpha-filter {
-  .btn {
-    vertical-align: top;
-  }
-
-  .pagination {
-    margin: 0;
-  }
-}
-
-@media (max-width: $grid-float-breakpoint) {
-
-  .facets-toggle {
-    margin-top: 3px;
-  }
-
-  .facets .top-panel-heading {
-    border: 1px solid $breadcrumb-color;
-    margin-bottom: 1em;
-    @include border-bottom-radius($panel-border-radius - 1);
-  }
-}
 
 /* style for pivot facet's nested list */
 
@@ -168,7 +99,7 @@
 
   ul, .pivot-facet {
     @extend .list-unstyled;
-    padding-bottom: $padding-base-vertical;
-    padding-left: $padding-large-horizontal;
+    @extend .p-y-1;
+    @extend .p-x-3;
   }
 }
diff --git a/app/assets/stylesheets/blacklight/_header.scss b/app/assets/stylesheets/blacklight/_header.scss
@@ -3,56 +3,40 @@
 */
 
 .navbar-brand {  /* The main logo image for the Blacklight instance */
-  width: 150px;
-  height: 50px;
   background:transparent image_url($logo_image) no-repeat top left;
   display: inline-block;
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-right:0;
+  height: 50px;
   margin-right:20px;
+  margin-top: -0.4rem;
+  overflow: hidden;
   padding-left: 0;
+  padding-right: 0;
+  text-indent: 100%;
+  white-space: nowrap;
+  width: 150px;
 }
 
 .navbar-search {
   z-index: 1;
 
-  .input-group {
-    width: 100%;
-  }
-
-  .input-group-addon {
-    &.for-search-field {
-      background-color: $input-bg;
-      border-radius: $border-radius-base 0 0 $border-radius-base;
-      width: 15ch;
-    }
-  }
-
   .search_field {
     background: transparent;
     border: none;
   }
 
   .search-query-form {
     @extend .col-md-8;
-    border: 0;
     padding-left: 0;
   }
+
+  .input-group-addon.for-search-field {
+    padding-bottom: calc(0.5rem - 1px);
+  }
+
   .submit-search-text {
     // hide 'search' label at very small screens
-    @media screen and (max-width: $screen-xs-min ) {      
-      // copied from .sr-only, sadly can't seem to use @extend in a media
-      // query like this, have to copy. 
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      margin: -1px;
-      padding: 0;
-      overflow: hidden;
-      clip: rect(0,0,0,0);
-      border: 0;    
+    @media screen and (max-width: breakpoint-max(xs)) {
+      @include sr-only();
     }    
   }
 }