trestle 0.9.9 → 0.10.0.pre2

data/frontend/css/components/_dropdown.scss

@@ -7,31 +7,37 @@
 
   &:before {
     top: -$dropdown-arrow-outer-width;
-    left: 12px;
+    left: 0.75rem;
 
     border-left: $dropdown-arrow-width solid transparent;
     border-right: $dropdown-arrow-width solid transparent;
-    border-bottom: $dropdown-arrow-width solid $dropdown-border-color;
+    border-bottom: $dropdown-arrow-width solid var(--#{$prefix}dropdown-border-color);
   }
 
   &:after {
     top: -$dropdown-arrow-width;
-    left: 11px;
+    left: 0.75rem;
+
+    margin-left: -1px;
+    margin-right: 0;
 
     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-bottom: $dropdown-arrow-outer-width solid var(--#{$prefix}dropdown-bg);
   }
 
-  &.dropdown-menu-right {
+  &.dropdown-menu-end {
     &:before {
       left: auto;
-      right: 12px;
+      right: 0.75rem;
     }
 
     &:after {
       left: auto;
-      right: 11px;
+      right: 0.75rem;
+
+      margin-left: 0;
+      margin-right: -1px;
     }
   }
 
@@ -41,7 +47,7 @@
       bottom: -$dropdown-arrow-outer-width;
 
       border-bottom: 0;
-      border-top: $dropdown-arrow-width solid $dropdown-border-color;
+      border-top: $dropdown-arrow-width solid var(--#{$prefix}dropdown-border-color);
     }
 
     &:after {
@@ -49,7 +55,13 @@
       bottom: -$dropdown-arrow-width;
 
       border-bottom: 0;
-      border-top: $dropdown-arrow-outer-width solid white;
+      border-top: $dropdown-arrow-outer-width solid var(--bs-dropdown-bg);
     }
   }
+
+  @include media-breakpoint-down(md) {
+    --#{$prefix}dropdown-font-size: 0.75rem;
+    --#{$prefix}dropdown-padding-y: 0.375rem;
+    --#{$prefix}dropdown-item-padding-x: 0.75rem;
+  }
 }

data/frontend/css/components/{_fields.scss → _forms.scss}

@@ -1,8 +1,9 @@
 .form-group {
   position: relative;
+  margin-bottom: 0.875rem;
 
   &.has-error {
-    > .control-label {
+    > .form-label {
       color: $form-feedback-invalid-color;
     }
 
@@ -20,19 +21,31 @@ ul.invalid-feedback {
 
 .form-text {
   color: $form-text-color;
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
 
   @include media-breakpoint-up(sm) {
     &.floating {
       position: absolute;
       top: 0;
       right: 0;
-      margin: 2px 0;
+      margin: 0.125rem 0;
     }
   }
 }
 
-.control-label {
-  font-weight: bold;
+.form-label {
   display: block;
 }
+
+.control-label {
+  @extend .form-label;
+}
+
+// Prevent input zooming on mobile devices
+@include media-breakpoint-down(sm) {
+  .form-control,
+  .form-select,
+  .input-group-text {
+    font-size: 1rem;
+  }
+}

data/frontend/css/components/_grid.scss

@@ -0,0 +1,29 @@
+.grid {
+  --grid-gap: var(--content-area-margin, 0);
+  --grid-column-count: 1;
+  --grid-column-min-width: 0;
+
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), minmax(var(--grid-column-min-width), 1fr));
+  gap: var(--grid-gap);
+
+  > .grid-col-full {
+    grid-column: 1 / -1;
+  }
+}
+
+@for $cols from 2 through 12 {
+  .grid-cols-#{$cols} {
+    --grid-column-count: #{$cols};
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    @for $cols from 2 through 12 {
+      .grid-cols-#{$breakpoint}-#{$cols} {
+        --grid-column-count: #{$cols};
+      }
+    }
+  }
+}

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

@@ -1,31 +1,33 @@
+@use "sass:math";
+
 .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;
+  --media-grid-aspect-ratio: 4 / 3;
+  --media-grid-gap: #{$grid-gutter-width};
+  --media-grid-columns: 2;
 
-    @include make-col(6);
+  display: grid;
+  grid-template-columns: repeat(var(--media-grid-columns), 1fr);
+  gap: var(--media-grid-gap);
 
-    @include media-breakpoint-up(md) {
-      @include make-col(4);
-    }
+  @include media-breakpoint-up(md) {
+    --media-grid-columns: 3;
+  }
 
-    @include media-breakpoint-up(xl) {
-      @include make-col(3);
-    }
+  @include media-breakpoint-up(xl) {
+    --media-grid-columns: 4;
+  }
 
-    margin-bottom: 20px;
+  @include media-breakpoint-down(md) {
+    --media-grid-gap: #{math.div($grid-gutter-width, 2)};
   }
 
   figure {
     margin: 0;
+    position: relative;
 
-    @include aspect-ratio(4 / 3);
+    aspect-ratio: var(--media-grid-aspect-ratio);
 
     background: #eee;
     overflow: hidden;
@@ -34,7 +36,8 @@
     align-items: center;
 
     img {
-      @include fill-area;
+      width: 100%;
+      height: 100%;
       object-fit: contain;
     }
   }
@@ -55,49 +58,54 @@
     }
   }
 
+  figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    background: rgba(black, 0.25);
+    color: white;
+
+    padding: 0.25rem 0.5rem;
+
+    display: flex;
+
+    font-size: 85%;
+    font-weight: normal;
+  }
+
   a {
     cursor: zoom-in;
   }
 }
 
 .media-grid-sm {
-  li {
-    @include make-col(4);
+  --media-grid-columns: 3;
 
-    @include media-breakpoint-up(md) {
-      @include make-col(3);
-    }
+  @include media-breakpoint-up(md) {
+    --media-grid-columns: 4;
+  }
 
-    @include media-breakpoint-up(lg) {
-      @include make-col(2);
-    }
+  @include media-breakpoint-up(lg) {
+    --media-grid-columns: 6;
   }
 }
 
 .media-grid-lg {
-  li {
-    @include make-col(12);
+  --media-grid-columns: 1;
 
-    @include media-breakpoint-up(sm) {
-      @include make-col(6);
-    }
+  @include media-breakpoint-up(sm) {
+    --media-grid-columns: 2;
+  }
 
-    @include media-breakpoint-up(lg) {
-      @include make-col(4);
-    }
+  @include media-breakpoint-up(lg) {
+    --media-grid-columns: 3;
   }
 }
 
-@include media-breakpoint-down(sm) {
-  .media-grid {
-    margin-left: -5px;
-    margin-right: -5px;
+.media-grid-auto {
+  --media-grid-item-size: 15rem;
 
-    li {
-      padding-left: 5px;
-      padding-right: 5px;
-
-      margin-bottom: 10px;
-    }
-  }
+  grid-template-columns: repeat(auto-fill, minmax(var(--media-grid-item-size), 1fr));
 }

data/frontend/css/components/_modal.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .modal {
   &.loading {
     .modal-content {
@@ -17,18 +19,23 @@
     }
   }
 
-  &.error {
+  &.error-modal {
     .modal-header {
       background-color: $error-bg;
     }
+
+    .modal-body {
+      padding: 0;
+    }
   }
 
+  &.show:not(:last-child),
   &.background {
+    z-index: $zindex-modal-backdrop - 1;
     overflow-y: hidden;
 
     .modal-dialog {
       transform: scale(0.9);
-      opacity: 0.75;
     }
   }
 }
@@ -54,7 +61,7 @@
 }
 
 .modal-title {
-  font-size: 1.3rem;
+  font-size: 1.125rem;
   font-weight: 500;
   text-shadow: rgba(black, 0.5) 0 1px 1px;
   color: white;
@@ -63,7 +70,7 @@
 .modal-tabs {
   .nav-tabs {
     background: $body-bg;
-    padding: 10px 15px 0 15px;
+    padding: 0.625rem 1rem 0 1rem;
   }
 }
 
@@ -96,8 +103,8 @@
     border-radius: 0;
     border-width: 0 0 1px 0;
 
-    padding-top: $alert-padding-y / 2;
-    padding-bottom: $alert-padding-y / 2;
+    padding-top: math.div($alert-padding-y, 2);
+    padding-bottom: math.div($alert-padding-y, 2);
 
     .alert-icon {
       font-size: 36px;
@@ -105,11 +112,33 @@
     }
 
     h3 {
-      font-size: 1.25rem;
+      font-size: 1.125rem;
     }
 
     p {
-      font-size: 0.9rem;
+      font-size: 0.825rem;
+    }
+  }
+}
+
+.modal-backdrop {
+  &.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:after {
+      @include icon-fa($fa-var-spinner);
+      @extend .fa-spin;
+
+      font-size: 5rem;
+
+      color: white;
+      opacity: 0.25;
     }
   }
+
+  &.show + &.show {
+    opacity: 0;
+  }
 }

data/frontend/css/components/_pagination.scss

@@ -3,10 +3,11 @@
 
   display: inline-flex;
   align-items: center;
+  gap: 0.75rem;
 
   p {
-    font-size: 0.85rem;
-    margin: 0 10px 0 0;
+    font-size: 0.75rem;
+    margin: 0;
   }
 
   strong {
@@ -23,7 +24,7 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .pagination-container {
     margin-right: auto;
 
@@ -32,16 +33,11 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 0.375rem;
 
     .pagination {
       margin: 0 auto;
       order: -1;
     }
-
-    p {
-      display: block;
-      margin-right: 0;
-      margin-top: 5px;
-    }
   }
 }

data/frontend/css/components/_photoswipe.scss

@@ -0,0 +1,8 @@
+.pswp__content {
+  iframe,
+  video {
+    pointer-events: auto;
+    width: 100%;
+    height: 100%;
+  }
+}

data/frontend/css/components/_popover.scss

@@ -1,4 +1,5 @@
 .popover-header {
   font-weight: 500;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
+  border-bottom-color: $popover-header-border;
 }

data/frontend/css/components/_scopes.scss

@@ -12,7 +12,7 @@
     }
 
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       .scope-group-empty:first-child {
         display: none;
       }
@@ -35,7 +35,7 @@
 
 .scope-group {
   line-height: 2;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   padding: 0.5rem 1rem 0.25rem 0.75rem;
 
   background: #f7f7f7;
@@ -47,19 +47,13 @@
   display: flex;
   flex-wrap: wrap;
 
+  gap: 0.25rem 0.35rem;
+
   position: relative;
   align-items: center;
 
   margin-bottom: 0;
   padding: 0;
-
-  li {
-    margin: 0.125rem 0.35rem 0.125rem 0;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
 }
 
 .scope {
@@ -67,7 +61,7 @@
 
   background-color: $scope-bg;
 
-  font-size: 0.8rem;
+  font-size: 0.6875rem;
   font-weight: normal;
   white-space: nowrap;