app/assets/stylesheets/spotlight/_pages.scss in blacklight-spotlight-0.3.1 vs app/assets/stylesheets/spotlight/_pages.scss in blacklight-spotlight-0.4.1

@@ -10,33 +10,44 @@
 .form-actions {
   @extend .clearfix;
 }
 
 .primary-actions {
-  @extend .pull-right; 
+  @extend .pull-right;
 }
 
 #nested-pages {
-  margin-bottom: 1em;  
+  margin-bottom: 1em;
 }
 
 .st-title {
   position: absolute;
   top: 0;
   left: 0;
-  display: none;
   background-color: $panel-info-heading-bg;
   padding: 3px 8px;
   color: $panel-info-text;
   font-weight: bold;
 }
 
-.st-block__inner:hover {
-  .st-title {
-    display: block;
+.st-block__inner {
+  div.field + div.field {
+    margin-top: 2 * $padding-large-vertical;
   }
+
+  .field-select {
+    margin-bottom: $padding-large-vertical;
+    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+      margin-bottom: 2 * $padding-large-vertical;
+
+      > select {
+        margin-left: 2 * $padding-small-horizontal;
+      }
+    }
+  }
 }
+
 #sidebar {
   li {
     margin-top: $padding-small-vertical;
   }
   h4 {
@@ -95,154 +106,12 @@
     border: 1px solid #CCC;
     float: left;
     margin-right: 15px;
 }
 
-.st-block-controls {
-  border-radius: 12px;
-  border: 3px dotted #999;
-}
-
-.st-block-control {
-  @extend .btn;
-
-  max-width: 100px;
-  word-wrap: break-word;
-  white-space: normal;
-  color: #666;
-  vertical-align: top;
-
-  .icon {
-
-    border: 3px solid #ccc;
-    border-radius: 6px;
-    width: 70px;
-    height: 40px;
-    background-size: cover;
-    @extend .text-hide;
-  }
-
-  .st-icon-multi-up-item-grid {
-    @extend .icon;
-    background-image: image-url('spotlight/blocks/multi-up-item-grid.png');
-  }
-
-  .st-icon-text {
-    @extend .icon;
-    background-image: image-url('spotlight/blocks/text.png');
-  }
-
-  .st-icon-item-text {
-    @extend .icon;
-    background-image: image-url('spotlight/blocks/item-text.png');
-  }
-
-  .st-icon-item-carousel {
-    @extend .icon;
-    background-image: image-url('spotlight/blocks/item-carousel.png');
-  }
-
-  .st-icon-item-features {
-    @extend .icon;
-    background-image: image-url('spotlight/blocks/item-features.png');
-  }
-}
-
-.st-block__inner {
-  @extend .panel;
-  @extend .panel-default;
-  &:hover {
-    @extend .panel-info;
-  }
-}
-
-.st-block-ui-btn, .st-block-control-ui-btn {
-  
-  color: $panel-info-text;
-  border-color: $panel-info-heading-bg;
-  
-  &:hover {
-    color: $panel-info-text;
-    border-color: $panel-info-heading-bg;
-    background-color: $panel-info-heading-bg;
-    text-decoration: none;
-  }
-}
-
-.st-block {
-  margin-top: 1.5em;
-}
-
-.st-block-controls__top, .st-block--with-plus {
-
-    &:hover {
-      &:before, &:after {
-      color: #666;
-    }
-  }
-}
-
-.form-group .st-text-block {
-  @extend .form-control;
-  height: auto;
-  min-height: 6em;
-}
-
-
-.item-carousel {
-  .carousel {
-    background-color: #111;
-    text-align: center;
-  }
-
-  img {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.item-features {
-  text-align: center;
-  .carousel {
-    display: inline-block;
-    .carousel-inner {
-      padding-right: 30px;
-      .item {
-        float: right;
-      }
-    }
-
-    .slideshow-indicators {
-      text-align: left;
-      li {
-        border-left: 0;
-        border-right: 0;
-        color: $text-color;
-
-        &:nth-child(odd) {
-          background-color: $table-bg-accent;
-        }
-
-        &:hover {
-          background-color: $table-bg-hover;
-        }
-
-        &.active {
-          background-color: $panel-info-heading-bg;
-        }
-
-        a {
-          text-decoration: none;
-          color: inherit;
-
-        }
-      }
-    }
-  }
-}
-
 .item-grid-block {
+  h3 {margin-top: 0;}
   .items-col {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
     align-content: stretch;
@@ -259,10 +128,11 @@
         margin: 0;
         border-radius: 0;
 
         a {
           & > img {
+            border: 1px solid $gray-light;
             width: 100%;
             height: 100%;
             object-fit: cover;
             overflow: hidden;
           }
@@ -294,15 +164,61 @@
         height: 240px;
       }
     }
 
   }
+  @media (max-width: $screen-sm-max) {
+    .items-col {margin-bottom: $line-height-computed;}
+  }
 }
 
 .preview-btn, .preview-exit-btn {
   float: left;
   width: 100px;
 }
 
 .missing-croppable {
   display: none;
+}
+
+.item-input-field[disabled="disabled"] {
+  visibility: hidden;
+}
+
+.empty-page-block {
+  @extend .alert;
+  @extend .alert-info;
+  margin-top: $padding-large-vertical;
+  h2 {
+    margin-top: 0;
+  }
+  p, ol > li {
+    padding: $padding-small-vertical;
+  }
+  ol > li:last-child {
+    padding-bottom: 0;
+  }
+}
+
+.oembed-block {
+  @media (max-width: $screen-sm-max) {
+    margin-bottom: $padding-base-horizontal;
+  }
+}
+
+.items-block .content-block {
+  @media (max-width: $screen-sm-max) {
+    margin-bottom: 0;
+  }
+}
+
+.item-features .carousel-indicators {
+  @media (max-width: $screen-xs-max) {
+    width: 100%;
+    margin-top: 2 * $padding-large-vertical;
+  }
+}
+
+.carousel-block .carousel-caption h3 {
+  padding-left: 2 * $padding-large-horizontal;
+  padding-right: 2 * $padding-large-horizontal;
 }