blacklight-spotlight 2.13.0 → 3.0.0.alpha.1

data/app/assets/stylesheets/spotlight/_featured_browse_categories_block.scss

@@ -1,6 +1,8 @@
-$featured-browse-category-border-color: $legend-border-color;
-$featured-browse-category-caption-color: $gray-lighter;
-
+$featured-browse-category-border-color: $border-color;
+$featured-browse-category-caption-color: $white;
+$container-tablet: 720px;
+$container-desktop: 960px;
+$container-large-desktop: 1140px;
 // Large desktop
 $featured-browse-category-margin-large-desktop: 15px;
 $no-sidebar-large-desktop-large-image-width: floor(($container-large-desktop)/ 3) - $featured-browse-category-margin-large-desktop;
@@ -35,23 +37,23 @@ $aspect-ratio-factor-medium-image: 1; // 1:1 width: height
   background-size: cover;
   background-position: center;
   border: 2px solid $featured-browse-category-border-color;
-  border-radius: $border-radius-large;
+  border-radius: $border-radius-lg;
   position: relative;
   float: left;
   background-repeat: no-repeat;
   .category-caption {
     color: $featured-browse-category-caption-color;
     position: absolute;
-    bottom: $line-height-computed;
+    bottom: 16px; // assumes default font-size of 16px, using browser default of 1 rem == 16px
     text-align: center;
     text-shadow: 0 1px 0 #000000;
     width: 100%;
   }
   .category-title {
-    font-size: $font-size-large;
+    font-size: $font-size-lg;
     line-height: 1.2;
     margin: 0;
-    padding: $table-condensed-cell-padding;
+    padding: $spacer / 4;
   }
   .item-count {
     font-size: $font-size-base;
@@ -64,15 +66,15 @@ $aspect-ratio-factor-medium-image: 1; // 1:1 width: height
     .browse-category {
       width: $no-sidebar-xs-image-width;
       height: $no-sidebar-xs-image-width * $aspect-ratio-factor-large-image;
-      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+      @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
         width: $no-sidebar-tablet-large-image-width;
         height: $no-sidebar-tablet-large-image-width * $aspect-ratio-factor-large-image;
       }
-      @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+      @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
         width: $no-sidebar-desktop-large-image-width;
         height: $no-sidebar-desktop-large-image-width * $aspect-ratio-factor-large-image;
       }
-      @media (min-width: $screen-lg-min) {
+      @media (min-width: breakpoint-min("lg")) {
         width: $no-sidebar-large-desktop-large-image-width;
         height: $no-sidebar-large-desktop-large-image-width * $aspect-ratio-factor-large-image;
       }
@@ -82,17 +84,17 @@ $aspect-ratio-factor-medium-image: 1; // 1:1 width: height
     .browse-category {
       width: $no-sidebar-large-desktop-medium-image-width;
       height: $no-sidebar-large-desktop-medium-image-width * $aspect-ratio-factor-medium-image;
-      @media (max-width: $screen-xs-max) {
+      @media (max-width: breakpoint-max("sm")) {
         width: $no-sidebar-xs-image-width;
         height: $no-sidebar-xs-image-width * $aspect-ratio-factor-medium-image;
       }
     }
     .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;
     }
   }
 }
@@ -102,15 +104,15 @@ $aspect-ratio-factor-medium-image: 1; // 1:1 width: height
     .browse-category {
       width: $with-sidebar-xs-image-width;
       height: $with-sidebar-xs-image-width * $aspect-ratio-factor-large-image;
-      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+      @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
         width: $with-sidebar-tablet-large-image-width;
         height: $with-sidebar-tablet-large-image-width * $aspect-ratio-factor-large-image;
       }
-      @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+      @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
         width: $with-sidebar-desktop-large-image-width;
         height: $with-sidebar-desktop-large-image-width * $aspect-ratio-factor-large-image;
       }
-      @media (min-width: $screen-lg-min) {
+      @media (min-width: breakpoint-min("lg")) {
         width: $with-sidebar-large-desktop-large-image-width;
         height: $with-sidebar-large-desktop-large-image-width * $aspect-ratio-factor-large-image;
       }
@@ -120,11 +122,11 @@ $aspect-ratio-factor-medium-image: 1; // 1:1 width: height
    .browse-category {
     width: $with-sidebar-desktop-medium-image-width;
     height: $with-sidebar-desktop-medium-image-width * $aspect-ratio-factor-medium-image;
-      @media (max-width: $screen-xs-max) {
+      @media (max-width: breakpoint-max("sm")) {
         width: $with-sidebar-xs-image-width;
         height: $with-sidebar-xs-image-width * $aspect-ratio-factor-medium-image;
       }
-      @media (min-width: $screen-lg-min) {
+      @media (min-width: breakpoint-min("lg")) {
         width: $with-sidebar-large-desktop-medium-image-width;
         height: $with-sidebar-large-desktop-medium-image-width * $aspect-ratio-factor-medium-image;
       }
@@ -133,4 +135,4 @@ $aspect-ratio-factor-medium-image: 1; // 1:1 width: height
   .category-4, .category-5 {
     display: none;
   }
-}
+}

data/app/assets/stylesheets/spotlight/_footer.scss

@@ -1,6 +1,6 @@
 .site-footer {
-  background-color: $gray-lighter;
-  color: $gray-light;
+  background-color: $gray-700;
+  color: $gray-600;
   margin-top: $footer-top-margin;
   padding: 10px;
 

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

@@ -7,53 +7,31 @@
   height: inherit;
 }
 
-@mixin transparent-masthead-navigation-menu() {
-  @extend .navbar-transparent;
-
-  border: 0;
-  border-radius: 0;
-
-  ul.nav.navbar-nav {
-    > li {
-      text-transform: uppercase;
-
-      a {
-        letter-spacing: 1.2px;
-      }
-    }
-
-    .dropdown-menu {
-      text-transform: none;
-    }
-  }
-}
-
 .navbar-static-top {
   margin-bottom: 0;
 }
 
 .masthead {
   background-color: $masthead-bg;
-  border-bottom: 1px solid $navbar-default-border;
+  border-bottom: 1px solid $border-color;
   margin-bottom: $padding-large-vertical * 2.5;
   padding: 0;
   position: relative;
-  // allow dropdowns in the top nav to stack above the masthead
-  z-index: $zindex-navbar - 1;
 
 
   .site-title {
-    padding-bottom: $padding-base-vertical;
+    margin-top: $padding-large-vertical;
+    padding-bottom: $padding-base-vertical / 2;
     position: relative;
     white-space: nowrap;
   }
 
   small {
-    @extend .hidden-xs;
+    @extend .d-none;
+    @extend .d-md-block;
+    @extend .py-2;
 
-    display: block;
-    padding-bottom: $padding-base-vertical;
-    padding-top: $padding-base-vertical;
+    font-size: $h4-font-size;
   }
 
   .navbar {
@@ -88,20 +66,25 @@
 }
 
 .site-title-container {
-  max-height: $masthead-height - $navbar-height;
-  padding-bottom: $padding-large-vertical;
-  padding-top: $padding-large-vertical;
+  @extend .px-4;
+  @extend .py-2;
+
+  max-height: $masthead-height - $navbar-brand-height;
 }
 
 .image-masthead {
   .navbar {
-    @include transparent-masthead-navigation-menu();
+    @extend .navbar-dark;
     background-color: $navbar-transparent-page-bg;
+    text-transform: uppercase;
+    .dropdown-menu {
+      text-transform: none;
+    }
   }
 
-  .h1 {
+  .h2 {
     color: $white;
-    text-shadow: 1px 1px 0 $black;
+    text-shadow: 1px 1px 0 $gray-900;
   }
 
   small {
@@ -159,8 +142,4 @@
     position: absolute;
     width: 1px;
   }
-
-  .glyphicon-search {
-    line-height: $line-height-computed;
-  }
 }

data/app/assets/stylesheets/spotlight/_item_text_block.scss

@@ -3,29 +3,6 @@
   border: 0.1em solid #d4d4d4;
   padding: 0 .6em;
 }
-.item-text {
-  .image-block {
-    max-width: 30%;
-
-    .thumbnail {
-      margin-bottom: 5;
-    }
-    &.pull-left {
-      .thumbnail {
-        margin-right: 15px;
-      }
-    }
-    &.pull-right {
-      .thumbnail {
-        margin-left: 15px;
-      }
-    }
-    .primary-caption, .secondary-caption {
-      text-align: center;
-      font-style: italic;
-    }
-  }
-}
 
 .st-block input[type="text"] {
     @extend .form-control;
@@ -49,7 +26,7 @@
     margin-top: 15px;
   }
   .dd3-content {
-    &.panel-default {
+    &.card {
       padding-left: 0;
     }
   }

data/app/assets/stylesheets/spotlight/_mixins.scss

@@ -1,21 +1,16 @@
-@mixin link-highlighting() {
-  background-color: $nav-link-hover-bg;
-  text-decoration: none;
-}
-
 @mixin edit-in-place-highlighting() {
   background: #F7F7D0;
   cursor: text;
 }
 
 @mixin panel-hover-highlighting() {
-  background-color: $gray-lighter;
+  background: $gray-300;
 }
 
 @mixin private-label() {
   &:after {
-    @extend .label;
-    @extend .label-warning;
+    @extend .badge;
+    @extend .badge-warning;
     content: 'Private';
     margin-left: 3px;
   }

data/app/assets/stylesheets/spotlight/_multi_up_item_grid.scss

@@ -41,7 +41,7 @@
     padding: 1em;
     min-width: 125px;
 
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: breakpoint-max("sm")) {
       min-width: 200px;
       -webkit-flex: 1 1 200px;
     }

data/app/assets/stylesheets/spotlight/_nestable.scss

@@ -49,7 +49,7 @@ tr.dd-item {
 .dd-placeholder,
 .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; border: 1px dashed #b6bcbf; box-sizing: border-box; }
 .dd-empty { border: 1px dashed #bbb; min-height: 100px;
-    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
+    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                       linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
     background-size: 60px 60px;
     background-position: 0 0, 30px 30px;
@@ -83,7 +83,6 @@ tr.dd-item {
 .dd3-content.page-admin {
   position: relative;
 }
-.dd3-content .panel-body {background: white;}
 .dd-dragel > .dd3-item > .dd3-content { margin: 0; }
 
 .dd3-item > button { margin-left: 30px; }

data/app/assets/stylesheets/spotlight/_pages.scss

@@ -12,7 +12,7 @@
 }
 
 .primary-actions {
-  @extend .pull-right;
+  @extend .float-right;
 }
 
 #nested-pages {
@@ -23,9 +23,9 @@
   position: absolute;
   top: 0;
   left: 0;
-  background-color: $panel-info-heading-bg;
+  background-color: theme-colors("secondary");
   padding: 3px 8px;
-  color: $panel-info-text;
+  color: $body-color;
   font-weight: bold;
 }
 
@@ -36,7 +36,7 @@
 
   .field-select {
     margin-bottom: $padding-large-vertical;
-    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
       margin-bottom: 2 * $padding-large-vertical;
 
       > select {
@@ -51,7 +51,7 @@
     margin-top: $padding-small-vertical;
   }
   h4 {
-    line-height: $line-height-large;
+    line-height: $line-height-lg;
   }
   .contacts-header {
     margin-top: 4 * $padding-large-vertical;
@@ -68,30 +68,16 @@
 
   ol.sidenav {
     li {
-      color: $gray-darker;
-      a {
-        &:hover, &:focus {
-          @include link-highlighting();
-        }
-      }
-      > h4 {
-        font-size: ceil(($font-size-base * 1.05));
-        margin-top: 3 * $padding-large-vertical;
-        > a {
-          color: $text-color;
-          display: block;
-          font-weight: 400;
-        }
-      }
+      color: $gray-900;
+      margin-top: $padding-large-vertical;
     }
+
     ol.subsection {
       padding-left: 0;
       li {
         list-style: square;
         margin-left: 18px;
-        > a {
-          display: block;
-        }
+        margin-top: $padding-small-vertical;
       }
     }
   }
@@ -104,7 +90,7 @@
 
 .contact-photo {
   border: 1px solid #ccc;
-  border-radius: $border-radius-base;
+  border-radius: $border-radius;
   float: left;
   margin-right: 15px;
   margin-top: 3px;
@@ -113,7 +99,7 @@
 
 // Indent contact fields so they align evenly, only when there is a contact photo
 .sidenav.contacts .contact-photo + div[itemprop] ~ div[itemprop] {
-  margin-left: 87px;
+  margin-left: 85px;
 }
 
 .item-grid-block {
@@ -132,8 +118,8 @@
     justify-content: space-between;
     align-content: stretch;
 
-    @media (max-width: $screen-sm-max) {
-      margin-bottom: $line-height-computed;
+    @media (max-width: breakpoint-max("md")) {
+      margin-bottom: $line-height-lg;
     }
   }
 
@@ -145,30 +131,23 @@
     order: 1;
     padding: 5px;
 
-    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
       min-width: 128px;
     }
   }
 
-  .thumbnail {
-    border: 1px solid $gray-lighter;
-    border-radius: 0;
-    margin: 0;
-    padding: 0;
-
-    img {
-      border: 1px solid $gray-light;
-      width: 100%;
-      height: 110px;
-      object-fit: cover;
-      overflow: hidden;
-
-      @media (min-width: $screen-lg-min) {
-        height: 160px; // default: no sidebar, no text column
-        // reduce height if on a page with a sidebar or text column, because will be less wide
-        .col-md-9 & {
-          height: 125px;
-        }
+  .img-thumbnail {
+    border: 1px solid $gray-600;
+    width: 100%;
+    height: 110px;
+    object-fit: cover;
+    overflow: hidden;
+
+    @media (min-width: breakpoint-min("lg")) {
+      height: 160px; // default: no sidebar, no text column
+      // reduce height if on a page with a sidebar or text column, because will be less wide
+      .col-md-9 & {
+        height: 125px;
       }
     }
   }
@@ -188,7 +167,7 @@
 
     .thumbnail img {
       height: 210px;
-      @media (min-width: $screen-lg-min) {
+      @media (min-width: breakpoint-min("lg")) {
         height: 270px; // default: no sidebar, no text column
         // reduce height if on a page with a sidebar or text column, because will be less wide
         .col-md-9 & {
@@ -228,12 +207,12 @@
 }
 
 .oembed-block {
-  @media (max-width: $screen-sm-max) {
+  @media (max-width: breakpoint-max("md")) {
     margin-bottom: $padding-base-horizontal;
   }
 
   iframe {
-    @media (min-width: $screen-md-min) {
+    @media (min-width: breakpoint-min("md")) {
       max-width: 100%;
     }
   }
@@ -248,7 +227,7 @@
   .items-col {
     z-index: 1;
 
-    @media (max-width: $screen-sm-max) {
+    @media (max-width: breakpoint-max("md")) {
       margin-bottom: 0;
     }
 
@@ -271,12 +250,12 @@
         img {
           max-height: 250px;
           object-fit: cover;
-          @media (max-width: $screen-sm-max) {
+          @media (max-width: breakpoint-max("md")) {
             max-height: 175px;
           }
         }
 
-        @media (max-width: $screen-sm-max) {
+        @media (max-width: breakpoint-max("md")) {
           -webkit-flex: 1 1 175px;
         }
       }
@@ -285,7 +264,7 @@
 }
 
 .item-features .carousel-indicators {
-  @media (max-width: $screen-xs-max) {
+  @media (max-width: breakpoint-max("sm")) {
     width: 100%;
     margin-top: 2 * $padding-large-vertical;
   }