blacklight 6.24.0 → 7.0.0.rc1

data/app/assets/stylesheets/blacklight/_balanced_list.scss

@@ -1,18 +1,13 @@
-.dl-horizontal {
-  dd {
-    margin-bottom: $padding-base-vertical;
-
-    &:after {
-      clear: none;
-    }
-  }
-}
-
 .dl-invert {
   dt {
     font-weight: normal;
     color: $field_name_color;
+    @media (max-width: breakpoint-max(sm)) {
+      text-align: left;
+    }
+
+    @media (min-width: breakpoint-max(sm)) {
+      text-align: right;
+    }
   }
 }
-
-

data/app/assets/stylesheets/blacklight/_blacklight_base.scss

@@ -6,8 +6,9 @@
    which over-rides things in this file. Or of course you can choose
    not to use the Blacklight CSS file at all in your local app. */
 
+@import "mixins";
 @import 'blacklight/blacklight_defaults';
-
+@import "blacklight/bootstrap_overrides";
 @import "blacklight/layout";
 @import "blacklight/header";
 @import "blacklight/constraints";
@@ -21,3 +22,4 @@
 @import "blacklight/search_history";
 @import "blacklight/modal";
 @import "blacklight/twitter_typeahead";
+@import "blacklight/icons";

data/app/assets/stylesheets/blacklight/_bookmark.scss

@@ -1,16 +1,4 @@
-.clear-bookmarks {
-  margin-left: $border-radius-base;
-}
-
-label.toggle_bookmark {
+label.toggle-bookmark {
 	font-weight: inherit;
 	min-width: 8.5em;
 }
-
-// Tools link on document show page
-.show-tools {
-  .bookmark_toggle {
-    padding: $nav-link-padding;
-  }
-}
-

data/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss

@@ -0,0 +1,27 @@
+.navbar + .container {
+  @extend .py-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;
+    }
+  }
+}
+
+
+.page-link {
+  white-space: nowrap;
+}

data/app/assets/stylesheets/blacklight/_constraints.scss

@@ -1,49 +1,41 @@
 .constraints-container {
-  @extend .well;
-  line-height: 2.5;
-  padding: 16px 19px;
+  @extend .mb-2;
 }
 
-span.constraints-label {
-  @extend .h5;
-}
-
-.appliedFilter {
+.applied-filter {
   .constraint-value {
     cursor: default;
     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: theme-color("secondary");
+      border-color: theme-color("secondary");
       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;
+  .filter-name:after {
+    color: $gray-100;
+    content: "❯";
+    font-size: 90%;
+    padding-left: $caret-width;
   }
 
   .remove:hover, .remove:active {

data/app/assets/stylesheets/blacklight/_controls.scss

@@ -1,5 +1,6 @@
-#sortAndPerPage, .pagination-search-widgets {
-  border-bottom: 1px solid $pagination-border;
+.sort-pagination,
+.pagination-search-widgets {
+  border-bottom: $pagination-border-width solid $pagination-border-color;
   margin-bottom: 1em;
   padding-bottom: 1em;
 }
@@ -7,14 +8,14 @@
 .pagination-search-widgets {
   @extend .clearfix;
   padding-top: 1px;
-  padding-bottom: $padding-base-vertical;
+  padding-bottom: $spacer;
 }
 
-#sortAndPerPage .dropdown-toggle {
+.sort-pagination .dropdown-toggle {
   cursor: pointer;
 }
 
-.no-js #sortAndPerPage {
+.no-js .sort-pagination {
   & {
     @extend .clearfix;
   }
@@ -37,25 +38,16 @@
   }
 }
 
-#sort-dropdown .dropdown-toggle, #per_page-dropdown .dropdown-toggle {
-  color: $link-color;
-
-  .caret {
-    color: $text-color;
-  }
-}
-
 .search-input-group {
   width: 80%;
 }
 
-@media (max-width: $screen-sm-min) {
+@media (max-width: breakpoint-max(xs)) {
   .search-input-group {
     width: auto;
   }
 }
 
-.ajax_form {
+.modal_form {
   margin-bottom: 0;
 }
-

data/app/assets/stylesheets/blacklight/_facets.scss

@@ -1,40 +1,70 @@
-#sidebar, #facets {
-  @extend .clearfix;
-  padding-bottom: $padding-large-vertical;
-}
+.sidenav {
+  .navbar-toggler {
+    border-color: $navbar-light-toggler-border-color;
+    color: $navbar-light-active-color;
+
+    @include hover-focus {
+      color: $navbar-light-active-color;
+    }
+  }
 
-.facets .facets-heading {
-  @extend h4;
+  .navbar-toggler-icon {
+    background-image: $navbar-light-toggler-icon-bg;
+  }
 }
 
-.no-js {
-  #sidebar .collapse {
-    @extend .in;
-  }  
+.facets-toggleable {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        .top-panel-heading {
+          margin-right: 3em;
+        }
+      }
+
+      @include media-breakpoint-up($next) {
+
+        // scss-lint:disable ImportantRule
+        .facets-collapse {
+          display: block !important;
+          width: 100%;
+        }
+        // scss-lint:enable ImportantRule
+
+        .navbar-toggler {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
-.facet_limit-active {
-  @extend .panel-success;
+.top-panel-heading {
+  @extend .navbar-light;
+  @extend .clearfix;
 }
 
-#facet-panel-collapse {
-  @extend .navbar-collapse;
-  padding-left: 0;
-  padding-right: 0;
-  border-top: none;
-  box-shadow: none;
-  max-height: none;
+.facets-heading {
+  @extend .h4;
+  line-height: inherit;
 }
 
-.facets-toggle {
-  @extend .navbar-toggle;
-  @extend .btn;
-  @extend .btn-default;
+.facet-limit {
+  margin-bottom: $spacer;
+
+  .card-block {
+    padding: $spacer;
+  }
+}
 
-  border-color: $navbar-default-toggle-border-color;
+.facet-limit-active {
+  @extend .border-success;
 
-  .icon-bar {
-    background-color: $navbar-default-toggle-icon-bar-bg;
+  .card-header {
+    @extend .bg-success;
   }
 }
 
@@ -42,6 +72,7 @@
   display: table;
   table-layout: fixed;
   width: 100%;
+  margin-bottom: 0;
 
   li {
 
@@ -53,18 +84,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 / 2;
 
     &:hover {
-      color: $brand-danger;
+      color: theme-color("danger");
+      text-decoration: none;
     }
-
   }
 
   @mixin hyphens-auto {
@@ -79,7 +106,7 @@
     padding-right: 1em;
     text-indent: -15px;
     padding-left: 15px;
-    padding-bottom: $padding-base-vertical;
+    padding-bottom: $spacer / 2;
     @include hyphens-auto;
   }
 
@@ -91,50 +118,28 @@
   }
 }
 
-.facet_extended_list
-{
-  .sort_options
-  {
+.facet-extended-list {
+  .sort-options {
     text-align:right;
   }
 
-
-  .prev_next_links
-  {
+  .prev-next-links {
     float:left;
   }
-
-}
-
-/* deprecated in Blacklight 5.x */
-ul.facet_extended_list, .facet_extended_list ul
-{
-  @extend .list-unstyled;
-
 }
 
-.collapse-toggle {
-  cursor: pointer;
-}
+.facet-field-heading {
+  @extend .h6;
 
-.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 */
+  a {
+    color: inherit;
+  }
 }
 
 /* Sidenav
 -------------------------------------------------- */
 
-.facet_pagination {
+.facet-pagination {
   @extend .clearfix;
 
   &.top {
@@ -143,29 +148,6 @@ ul.facet_extended_list, .facet_extended_list ul
 }
 
  
-// 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 */
 
@@ -174,7 +156,7 @@ ul.facet_extended_list, .facet_extended_list ul
 
   ul, .pivot-facet {
     @extend .list-unstyled;
-    padding-bottom: $padding-base-vertical;
-    padding-left: $padding-large-horizontal;
+    @extend .py-1;
+    @extend .px-3;
   }
 }

data/app/assets/stylesheets/blacklight/_header.scss

@@ -2,67 +2,54 @@
   Header bar at top (Bootstrap nav-bar)
 */
 
-#header-navbar {
-  .navbar-brand {  /* The main logo image for the Blacklight instance */
-  	width: 150px;
-    height: 50px;
-    @if $logo-image {
-      background: transparent $logo-image no-repeat top left;
-    }
-
-    @if $logo_image {
-      // deprecated
-      background: transparent image_url($logo_image) no-repeat top left;
-    }
-
-	  display: inline-block;
-	  text-indent: 100%;
-	  white-space: nowrap;
-	  overflow: hidden;
-	  padding-right:0;
-	  margin-right:20px;
-	  padding-left: 0;
+.topbar > .container {
+  @media (max-width: breakpoint-max(xs)) {
+    margin-left: 0;
+    margin-right: 0;
   }
 }
 
-#search-navbar {
-  z-index: 1;
-
-  .input-group {
-    width: 100%;
+.navbar-brand {  /* The main logo image for the Blacklight instance */
+  @if $logo-image {
+    background: transparent $logo-image no-repeat top left;
   }
 
-  .input-group-addon {
-    &.for-search-field {
-      background-color: $input-bg;
-      border-radius: $border-radius-base 0 0 $border-radius-base;
-      width: 15ch;
-    }
+  @if $logo_image {
+    // deprecated
+    background: transparent image_url($logo_image) no-repeat top left;
   }
 
-  .search_field {
-    background: transparent;
-    border: none;
+  display: inline-block;
+  flex: 0 0 150px;
+  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;
+
+  .search-field {
+    // This prevents the widget from being squished so the text overflows
+    min-width: 7em;
   }
 
   .search-query-form {
-    @extend .col-md-8;
-    border: 0;
+    @extend .col-md-12;
+    @extend .col-lg-8;
     padding-left: 0;
   }
+
   .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();
+    }
   }
 }