trestle 0.8.13 → 0.9.4

data/{app/assets/stylesheets/trestle → frontend/css}/components/_dropdown.scss

@@ -1,9 +1,4 @@
 .dropdown-menu {
-  margin-top: 8px;
-  font-size: 13px;
-
-  box-shadow: $dropdown-shadow;
-
   &:before, &:after {
     content: '';
     display: inline-block;
@@ -14,19 +9,18 @@
     top: -$dropdown-arrow-outer-width;
     left: 12px;
 
-    border-right: $dropdown-arrow-width solid transparent;
-    border-bottom: $dropdown-arrow-width solid $dropdown-fallback-border;
     border-left: $dropdown-arrow-width solid transparent;
-    border-bottom-color: $dropdown-border;
+    border-right: $dropdown-arrow-width solid transparent;
+    border-bottom: $dropdown-arrow-width solid $dropdown-border-color;
   }
 
   &:after {
     top: -$dropdown-arrow-width;
     left: 11px;
 
+    border-left: $dropdown-arrow-outer-width solid transparent;
     border-right: $dropdown-arrow-outer-width solid transparent;
     border-bottom: $dropdown-arrow-outer-width solid white;
-    border-left: $dropdown-arrow-outer-width solid transparent;
   }
 
   &.dropdown-menu-right {
@@ -42,16 +36,12 @@
   }
 
   .dropup & {
-    margin-top: 0;
-    margin-bottom: 8px;
-
     &:before {
       top: auto;
       bottom: -$dropdown-arrow-outer-width;
 
       border-bottom: 0;
-      border-top: $dropdown-arrow-width solid $dropdown-fallback-border;
-      border-top-color: $dropdown-border;
+      border-top: $dropdown-arrow-width solid $dropdown-border-color;
     }
 
     &:after {
@@ -63,9 +53,3 @@
     }
   }
 }
-
-.dropdown-header {
-  text-transform: uppercase;
-  font-size: 10px;
-  font-weight: bold;
-}

data/frontend/css/components/_fields.scss

@@ -0,0 +1,32 @@
+.form-group {
+  position: relative;
+
+  &.has-error {
+    > .control-label {
+      color: $form-feedback-invalid-color;
+    }
+
+    > .invalid-feedback {
+      display: block;
+    }
+  }
+}
+
+.form-text {
+  color: $form-text-color;
+  font-size: 0.9rem;
+
+  @include media-breakpoint-up(sm) {
+    &.floating {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 2px 0;
+    }
+  }
+}
+
+.control-label {
+  font-weight: bold;
+  display: block;
+}

data/frontend/css/components/_magnific-popup.scss

@@ -0,0 +1,36 @@
+// Fix z-index of Magnific Popup lightboxes so that they appear above Bootstrap modals
+
+$mfp-z-index-base: 1140;
+
+.mfp-bg { z-index: $mfp-z-index-base + 2; }
+.mfp-wrap { z-index: $mfp-z-index-base + 3; }
+.mfp-content { z-index: $mfp-z-index-base + 5; }
+.mfp-preloader { z-index: $mfp-z-index-base + 4; }
+
+button.mfp-close,
+button.mfp-arrow {
+  z-index: $mfp-z-index-base + 6;
+}
+
+
+// Smooth transition of lightbox background
+
+.mfp-with-zoom .mfp-container,
+.mfp-with-zoom.mfp-bg {
+	opacity: 0;
+
+  backface-visibility: hidden;
+	transition: all 150ms ease-out;
+}
+
+.mfp-with-zoom.mfp-ready .mfp-container {
+	opacity: 1;
+}
+.mfp-with-zoom.mfp-ready.mfp-bg {
+	opacity: 0.8;
+}
+
+.mfp-with-zoom.mfp-removing .mfp-container,
+.mfp-with-zoom.mfp-removing.mfp-bg {
+	opacity: 0;
+}

data/frontend/css/components/_media-grid.scss

@@ -0,0 +1,103 @@
+.media-grid {
+  @include list-unstyled;
+  @include make-row;
+
+  li {
+    position: relative;
+    width: 100%;
+
+    padding-right: $grid-gutter-width / 2;
+    padding-left: $grid-gutter-width / 2;
+
+    @include make-col(6);
+
+    @include media-breakpoint-up(md) {
+      @include make-col(4);
+    }
+
+    @include media-breakpoint-up(xl) {
+      @include make-col(3);
+    }
+
+    margin-bottom: 20px;
+  }
+
+  figure {
+    margin: 0;
+
+    @include aspect-ratio(4 / 3);
+
+    background: #eee;
+    overflow: hidden;
+
+    display: flex;
+    align-items: center;
+
+    img {
+      @include fill-area;
+      object-fit: contain;
+    }
+  }
+
+  figure.fill {
+    img {
+      object-fit: cover;
+    }
+  }
+
+  figure.zoom {
+    img {
+      transition: transform 250ms;
+    }
+
+    &:hover img {
+      transform: scale(1.05);
+    }
+  }
+
+  a {
+    cursor: zoom-in;
+  }
+}
+
+.media-grid-sm {
+  li {
+    @include make-col(4);
+
+    @include media-breakpoint-up(md) {
+      @include make-col(3);
+    }
+
+    @include media-breakpoint-up(lg) {
+      @include make-col(2);
+    }
+  }
+}
+
+.media-grid-lg {
+  li {
+    @include make-col(12);
+
+    @include media-breakpoint-up(sm) {
+      @include make-col(6);
+    }
+
+    @include media-breakpoint-up(lg) {
+      @include make-col(4);
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .media-grid {
+    margin-left: -5px;
+    margin-right: -5px;
+
+    li {
+      padding-left: 5px;
+      padding-right: 5px;
+
+      margin-bottom: 10px;
+    }
+  }
+}

data/frontend/css/components/_modal.scss

@@ -0,0 +1,113 @@
+.modal {
+  &.loading {
+    .modal-content {
+      min-height: 100px;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:after {
+        @include icon-fa($fa-var-spinner);
+        @extend .fa-spin;
+
+        font-size: 2rem;
+        opacity: 0.25;
+      }
+    }
+  }
+
+  &.error {
+    .modal-header {
+      background-color: $error-bg;
+    }
+  }
+
+  &.background {
+    .modal-dialog {
+      transform: scale(0.9);
+      opacity: 0.75;
+    }
+  }
+}
+
+.modal-header {
+  @extend .theme-bg;
+
+  border-bottom: none;
+
+  .close {
+    opacity: 0.75;
+
+    &, &:hover, &:focus {
+      color: white;
+    }
+
+    &:not(.disabled):not(:disabled) {
+      &:hover, &:focus {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.modal-title {
+  font-size: 1.3rem;
+  font-weight: 500;
+  text-shadow: rgba(black, 0.5) 0 1px 1px;
+  color: white;
+}
+
+.modal-tabs {
+  .nav-tabs {
+    background: $body-bg;
+    padding: 10px 15px 0 15px;
+  }
+}
+
+.modal-body {
+  // Allow nesting of tab panes directly within
+  @extend .tab-content;
+
+  pre.exception {
+    max-height: 75vh;
+  }
+}
+
+.modal-footer {
+  background: $modal-footer-bg;
+
+  align-items: flex-start;
+
+  .primary-toolbar {
+    margin-left: auto !important;
+  }
+
+  .secondary-toolbar {
+    margin-right: auto !important;
+  }
+}
+
+.modal-flash {
+  .alert {
+    margin-bottom: 0;
+    border-radius: 0;
+    border-width: 0 0 1px 0;
+
+    padding-top: $alert-padding-y / 2;
+    padding-bottom: $alert-padding-y / 2;
+
+    .alert-icon {
+      font-size: 36px;
+      margin-right: $alert-padding-x * 0.75;
+    }
+
+    h3 {
+      font-size: 1.25rem;
+    }
+
+    p {
+      font-size: 0.9rem;
+    }
+  }
+}

data/{app/assets/stylesheets/trestle → frontend/css}/components/_pagination.scss

@@ -1,11 +1,11 @@
 .pagination-container {
   margin-left: auto;
-  text-align: right;
+
+  display: inline-flex;
+  align-items: center;
 
   p {
-    font-size: 12px;
-    display: inline-block;
-    vertical-align: middle;
+    font-size: 0.85rem;
     margin: 0 10px 0 0;
   }
 
@@ -14,7 +14,7 @@
   }
 
   .pagination {
-    vertical-align: middle;
+    display: inline-flex;
     margin: 0;
 
     a {
@@ -23,7 +23,7 @@
   }
 }
 
-@include mobile {
+@include media-breakpoint-down(sm) {
   .pagination-container {
     margin-right: auto;
 

data/frontend/css/components/_popover.scss

@@ -0,0 +1,4 @@
+.popover-header {
+  font-weight: 500;
+  font-size: 0.85rem;
+}

data/frontend/css/components/_scopes.scss

@@ -0,0 +1,57 @@
+.scopes {
+  list-style: none;
+
+  margin-top: -0.25rem;
+  margin-bottom: 0;
+
+  padding: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  li {
+    margin-top: 0.25rem;
+    margin-right: 0.35rem;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  a {
+    display: inline-block;
+
+    background-color: $scope-bg;
+
+    font-size: 0.8rem;
+    font-weight: normal;
+    white-space: nowrap;
+
+    border-radius: 50rem;
+    padding: $scope-padding;
+
+    &, &:hover, &:focus {
+      color: $scope-color;
+    }
+
+    &:hover, &:focus {
+      background-color: $scope-hover-bg;
+      text-decoration: none;
+    }
+  }
+
+  li.active a {
+    &, &:hover, &:focus, strong {
+      color: $scope-active-color;
+    }
+
+    &, &:hover, &:focus {
+      background-color: $scope-active-bg;
+    }
+  }
+
+  strong {
+    font-weight: 500;
+    color: $scope-label-color;
+  }
+}

data/frontend/css/components/_select.scss

@@ -0,0 +1,66 @@
+.select2-container--bootstrap {
+  // This is required to ensure the select field is rendered at full width
+  // within Bootstrap tabs that are hidden when the page is first loaded.
+  // See: https://github.com/select2/select2/issues/4220
+  width: 100% !important;
+}
+
+.tag-select {
+  &.select2-selection--multiple {
+    .select2-selection__choice {
+      display: flex;
+      align-items: center;
+
+      padding: 2px 6px;
+
+      font-size: 0.9rem;
+
+      border: 0;
+      border-left: 4px solid $tag-border;
+      border-radius: 4px;
+
+      background: $tag-bg;
+      color: $tag-color;
+    }
+
+    .select2-selection__choice__remove {
+      order: 99;
+
+      color: $tag-color;
+
+      margin-right: 0;
+      margin-left: 4px;
+      line-height: 1.2;
+    }
+
+    .select2-search--inline {
+      position: relative;
+      left: -4px;
+    }
+  }
+
+  // Hide the results dropdown
+
+  &.select2-dropdown {
+    display: none;
+  }
+
+  .select2-container--open &.select2-selection {
+    border-radius: $s2bs-border-radius-base !important;
+    border-color: $s2bs-input-border-focus !important;
+  }
+}
+
+.date-select,
+.datetime-select,
+.time-select {
+  select {
+    display: inline-block;
+    width: auto;
+  }
+
+  .select2-container--bootstrap {
+    display: inline-block;
+    width: auto !important;
+  }
+}