blacklight 6.19.1 → 7.1.0

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,18 +6,21 @@
    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 'blacklight/blacklight_defaults';
-
-@import "blacklight/layout";
-@import "blacklight/header";
-@import "blacklight/constraints";
-@import "blacklight/controls";
-@import "blacklight/search_results";
-@import "blacklight/pagination";
-@import "blacklight/group";
-@import "blacklight/bookmark";
-@import "blacklight/balanced_list";
-@import "blacklight/facets";
-@import "blacklight/search_history";
-@import "blacklight/modal";
-@import "blacklight/twitter_typeahead";
+@import "mixins";
+@import 'blacklight_defaults';
+@import "bootstrap_overrides";
+@import "layout";
+@import "header";
+@import "constraints";
+@import "controls";
+@import "search_form";
+@import "search_results";
+@import "pagination";
+@import "group";
+@import "bookmark";
+@import "balanced_list";
+@import "facets";
+@import "search_history";
+@import "modal";
+@import "twitter_typeahead";
+@import "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-500;
+    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,59 @@
-#sidebar, #facets {
-  @extend .clearfix;
-  padding-bottom: $padding-large-vertical;
-}
+.sidenav {
+  .navbar-toggler {
+    border-color: $navbar-light-toggler-border-color;
+    color: $navbar-light-active-color;
 
-.facets .facets-heading {
-  @extend h4;
-}
+    @include hover-focus {
+      color: $navbar-light-active-color;
+    }
+  }
 
-.no-js {
-  #sidebar .collapse {
-    @extend .in;
-  }  
+  .navbar-toggler-icon {
+    background-image: $navbar-light-toggler-icon-bg;
+  }
 }
 
-.facet_limit-active {
-  @extend .panel-success;
+.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-up($next) {
+
+        // scss-lint:disable ImportantRule
+        .facets-collapse {
+          display: block !important;
+          width: 100%;
+        }
+        // scss-lint:enable ImportantRule
+
+        .navbar-toggler {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
-#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-body {
+    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 +61,7 @@
   display: table;
   table-layout: fixed;
   width: 100%;
+  margin-bottom: 0;
 
   li {
 
@@ -53,18 +73,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 +95,7 @@
     padding-right: 1em;
     text-indent: -15px;
     padding-left: 15px;
-    padding-bottom: $padding-base-vertical;
+    padding-bottom: $spacer / 2;
     @include hyphens-auto;
   }
 
@@ -91,50 +107,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;
+.facet-field-heading {
+  @extend .h6;
 
-}
-
-.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 */
+  a {
+    color: inherit;
+  }
 }
 
 /* Sidenav
 -------------------------------------------------- */
 
-.facet_pagination {
+.facet-pagination {
   @extend .clearfix;
 
   &.top {
@@ -142,30 +136,7 @@ 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 +145,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;
   }
 }