trestle 0.8.13 → 0.9.0

data/frontend/css/components/_color-vars.scss

@@ -0,0 +1,10 @@
+:root {
+  $color: "primary";
+  $value: theme-color($color);
+
+  --#{$color}-rgb: #{red($value), green($value), blue($value)};
+
+  --#{$color}-hue: #{hue($value)};
+  --#{$color}-saturation: #{saturation($value)};
+  --#{$color}-lightness: #{lightness($value)};
+}

data/frontend/css/components/_custom-forms.scss

@@ -0,0 +1,35 @@
+// Convert custom controls to use em rather than rem sizing, so that they scale nicely.
+// This is planned for Bootstrap 5 (https://github.com/twbs/bootstrap/issues/27803)
+.custom-control-label {
+  &::before {
+    top: em(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+    left: em(-($custom-control-gutter + $custom-control-indicator-size));
+    width: em($custom-control-indicator-size);
+    height: em($custom-control-indicator-size);
+  }
+
+  &::after {
+    top: em(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+    left: em(-($custom-control-gutter + $custom-control-indicator-size));
+    width: em($custom-control-indicator-size);
+    height: em($custom-control-indicator-size);
+  }
+}
+
+.custom-switch {
+  padding-left: em($custom-switch-width + $custom-control-gutter);
+
+  .custom-control-label {
+    &::before {
+      left: em(-($custom-switch-width + $custom-control-gutter));
+      width: em($custom-switch-width);
+    }
+
+    &::after {
+      top: calc(#{em((($font-size-base * $line-height-base - $custom-control-indicator-size) / 2))} + #{$custom-control-indicator-border-width * 2});
+      left: calc(#{em(-($custom-switch-width + $custom-control-gutter))} + #{$custom-control-indicator-border-width * 2});
+      width: $custom-switch-indicator-size;
+      height: $custom-switch-indicator-size;
+    }
+  }
+}

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

@@ -16,8 +16,7 @@
   }
 
   &::before {
-    @extend .fa;
-    content: $fa-var-times;
+    @include icon-fa($fa-var-times);
   }
 
   input[value=""] ~ &,
@@ -29,14 +28,32 @@
 }
 
 .flatpickr-calendar {
-  background: $theme-bg;
+  @extend .theme-bg;
+
+  box-shadow: $dropdown-box-shadow;
+
+  &::before {
+    border-width: $dropdown-arrow-outer-width;
+    margin: 0 -#{$dropdown-arrow-outer-width};
+  }
+
+  &::after {
+    border-width: $dropdown-arrow-width;
+    margin: 0 -#{$dropdown-arrow-width};
+  }
 
   &.arrowTop {
+    margin-top: $dropdown-spacer;
+
     &::after {
-      border-bottom-color: lighten($theme-bg-color, percentage($theme-bg-gradient-strength));
+      border-bottom-color: mix($theme-bg, white, 95%);
     }
   }
 
+  &.arrowBottom {
+    margin-top: -$dropdown-spacer;
+  }
+
   &.showTimeInput.hasTime {
     .flatpickr-time {
       border-radius: 0 0 5px 5px;
@@ -57,9 +74,20 @@
   }
 }
 
-.flatpickr-month {
-  color: rgba(white, 0.9);
-  fill: rgba(white, 0.9);
+.flatpickr-months {
+  .flatpickr-month,
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    color: rgba(white, 0.9);
+    fill: rgba(white, 0.9);
+  }
+
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    &:hover svg {
+      fill: lighten(theme-color("primary"), 15%);
+    }
+  }
 }
 
 span.flatpickr-weekday {
@@ -83,11 +111,6 @@ span.flatpickr-weekday {
   }
 }
 
-.flatpickr-prev-month:hover svg,
-.flatpickr-next-month:hover svg {
-  fill: lighten($brand-primary, 15%);
-}
-
 .flatpickr-day.selected,
 .flatpickr-day.startRange,
 .flatpickr-day.endRange,
@@ -106,16 +129,16 @@ span.flatpickr-weekday {
 .flatpickr-day.selected.nextMonthDay,
 .flatpickr-day.startRange.nextMonthDay,
 .flatpickr-day.endRange.nextMonthDay {
-  background: $brand-primary;
-  border-color: $brand-primary;
+  background: theme-color("primary");
+  border-color: theme-color("primary");
 }
 
-.flatpickr-day.selected.startRange + .endRange,
-.flatpickr-day.startRange.startRange + .endRange,
-.flatpickr-day.endRange.startRange + .endRange {
-  box-shadow: -10px 0 0 $brand-primary;
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  box-shadow: -10px 0 0 theme-color("primary");
 }
 
 .flatpickr-day.week.selected {
-  box-shadow: -5px 0 0 $brand-primary, 5px 0 0 $brand-primary;
+  box-shadow: -5px 0 0 theme-color("primary"), 5px 0 0 theme-color("primary");
 }

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;
+    }
+  }
+}