trestle 0.9.8 → 0.10.0.pre

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;
     }
   }
 }
@@ -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;
@@ -113,3 +120,25 @@
     }
   }
 }
+
+.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

@@ -23,7 +23,7 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .pagination-container {
     margin-right: auto;
 

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

data/frontend/css/components/_select.scss

@@ -1,56 +1,186 @@
-.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;
+.select2-dropdown {
+  z-index: $zindex-modal + 1;
 }
 
-.tag-select {
-  &.select2-selection--multiple {
-    .select2-selection__choice {
-      display: flex;
-      align-items: center;
+.select2-container--bootstrap-5 {
+  width: auto !important;
+
+  .select2-dropdown {
+    .select2-search {
+      padding: $s2bs5-padding-y $s2bs5-padding-y;
 
-      padding: 2px 6px;
+      .select2-search__field {
+        padding: $s2bs5-padding-y $s2bs5-padding-y;
+      }
+    }
+  }
 
-      font-size: 0.9rem;
+  .select2-selection--single {
+    padding: 0;
 
-      border: 0;
-      border-left: 4px solid $tag-border;
-      border-radius: 4px;
+    .select2-selection__rendered {
+      height: 100%;
+      padding: $s2bs5-padding-y $s2bs5-indicator-padding $s2bs5-padding-y $s2bs5-padding-x;
 
-      background: $tag-bg;
-      color: $tag-color;
+      &:has(.select2-selection__clear) {
+        padding-right: $s2bs5-indicator-padding + 1rem;
+      }
     }
+  }
+
+  .select2-selection--multiple {
+    padding: $s2bs5-padding-y $s2bs5-padding-y;
 
-    .select2-selection__choice__remove {
-      order: 99;
+    .select2-selection__rendered {
+      gap: $s2bs5-padding-y;
 
-      color: $tag-color;
+      .select2-selection__choice {
+        background: #eee;
+        margin: 0;
+      }
 
-      margin-right: 0;
-      margin-left: 4px;
-      line-height: 1.2;
+      .select2-selection__choice__remove {
+        cursor: pointer;
+      }
     }
 
     .select2-search--inline {
-      position: relative;
-      left: -4px;
+      width: auto;
+      margin-left: 0.12rem;
+
+      &:first-child {
+        margin-left: 0.375rem;
+      }
+    }
+  }
+
+  &.select2-container--open {
+    $inset: -$input-btn-focus-width;
+
+    &.select2-container--below {
+      .select2-selection {
+        clip-path: inset($inset $inset 0 $inset);
+        border-bottom-width: 1px;
+      }
+    }
+
+    &.select2-container--above {
+      .select2-selection {
+        clip-path: inset(0 $inset $inset $inset);
+        border-top-width: 1px;
+      }
+    }
+
+    .select2-dropdown {
+      border-color: $s2bs5-focus-border-color;
+      box-shadow: $s2bs5-focus-box-shadow;
+    }
+
+    .select2-dropdown--below {
+      clip-path: inset(0 $inset $inset $inset);
+    }
+
+    .select2-dropdown--above {
+      clip-path: inset($inset $inset 0 $inset);
+    }
+  }
+
+  .tag-select.select2-selection--multiple {
+    clip-path: none !important;
+
+    .select2-selection__rendered {
+      .select2-selection__choice {
+        @extend .tag;
+
+        display: inline-flex !important;
+        align-items: center;
+        border: 0;
+      }
+
+      .select2-selection__choice__remove {
+        order: 99;
+
+        background: $s2bs5-clear-tag-bg;
+
+        margin-right: 0;
+        margin-left: 4px;
+        font-size: 0;
+        line-height: 1.2;
+
+        &:hover {
+          background: $s2bs5-clear-tag-bg;
+        }
+      }
     }
   }
 
   // Hide the results dropdown
+  &.select2-container--open {
+    .tag-select {
+      &.select2-dropdown {
+        display: none;
+      }
+
+      &.select2-selection {
+        border-radius: $s2bs5-border-radius !important;
+      }
+    }
+
+    &.select2-container--below .tag-select {
+      border-bottom-width: 1px;
+    }
 
-  &.select2-dropdown {
-    display: none;
+    &.select2-container--above .tag-select {
+      border-top-width: 1px;
+    }
   }
 
-  .select2-container--open &.select2-selection {
-    border-radius: $s2bs-border-radius-base !important;
-    border-color: $s2bs-input-border-focus !important;
+  // Prevent input zooming on mobile devices
+  @include media-breakpoint-down(sm) {
+    .select2-search--inline {
+      .select2-search__field {
+        font-size: 16px;
+      }
+    }
   }
 }
 
+.form-select-sm {
+  ~ .select2-container--bootstrap-5 {
+    .select2-selection--single {
+      padding: 0;
+
+      .select2-selection__rendered {
+        padding: map-get($s2bs5-small, padding-y) map-get($s2bs5-small, padding-x);
+
+        &:has(.select2-selection__clear) {
+          padding-right: $s2bs5-indicator-padding + 1rem;
+        }
+      }
+    }
+  }
+}
+
+.form-select-lg {
+  ~ .select2-container--bootstrap-5 {
+    .select2-selection--single {
+      padding: 0;
+
+      .select2-selection__rendered {
+        padding: map-get($s2bs5-large, padding-y) map-get($s2bs5-large, padding-x);
+
+        &:has(.select2-selection__clear) {
+          padding-right: $s2bs5-indicator-padding + 1.5rem;
+        }
+      }
+    }
+  }
+}
+
+.tag-select {
+  background-image: none;
+}
+
 .date-select,
 .datetime-select,
 .time-select {
@@ -59,7 +189,7 @@
     width: auto;
   }
 
-  .select2-container--bootstrap {
+  .select2-container--bootstrap-5 {
     display: inline-block;
     width: auto !important;
   }

data/frontend/css/components/_table.scss

@@ -10,15 +10,17 @@
   background-repeat: no-repeat;
   background-size: 50px 100%, 50px 100%, 15px 100%, 15px 100%;
   background-attachment: local, local, scroll, scroll;
+
+  // iOS 13 no longer supports -wekbit-overflow-scrolling so
+  // we must unfortunately disable the overflow shadows.
+  @supports (-webkit-touch-callout: none) {
+    background: none;
+  }
 }
 
 .table-container {
   overflow-x: auto;
 
-  // Momentum scrolling (touch) causes rendering issues on iOS with the
-  // scrolling background hints. Must be disabled explicitly.
-  -webkit-overflow-scrolling: auto;
-
   @include table-container-background(white);
 
   .main-content-sidebar & {
@@ -36,24 +38,24 @@
   @extend .table-hover;
 
   margin-bottom: 0;
+  vertical-align: middle;
 
-  td, tr {
-    vertical-align: middle;
+  tr[data-url] {
+    cursor: pointer;
   }
 
-  thead {
-    tr:first-child {
-      td, th {
-        border-top: 0;
-      }
-    }
+  // Wider border between thead/tbody/tfoot
+  > :not(:last-child) > :last-child > * {
+    border-bottom-color: $table-border-color;
+    border-bottom-width: 2px;
   }
 
-  tr[data-url] {
-    cursor: pointer;
+  // No border on bottom of table
+  > :last-child > :last-child > * {
+    border-bottom: none;
   }
 
-  th, a {
+  thead th {
     white-space: nowrap;
 
     &.wrap {
@@ -67,59 +69,15 @@
 
   .select-row {
     width: 2.5em;
-    text-align: center;
-
-    .custom-control {
-      padding-left: 1.5rem;
-    }
-
-    .custom-control-input {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    .custom-control-label {
-      &::before,
-      &::after {
-        left: -1.325rem;
-      }
-    }
-  }
-
-  .actions {
-    text-align: right;
-    white-space: nowrap;
-
-    .btn {
-      @extend .btn-sm;
-
-      padding: 0.5rem;
-      line-height: 1;
-
-      i {
-        font-size: 0.85rem;
 
-        width: 1.25rem;
-        text-align: center;
-      }
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
 
-      &.has-icon .btn-label {
-        @include sr-only;
-      }
-    }
-
-    .btn,
-    .btn-group {
-      + .btn,
-      + .btn-group {
-        margin-left: 4px;
-      }
-    }
+    text-align: center;
+    vertical-align: middle;
 
-    .btn-group {
-      .btn + .btn {
-        margin-left: -1px;
-      }
+    .form-check-input {
+      display: block;
     }
   }
 
@@ -139,3 +97,40 @@
     list-style-position: inside;
   }
 }
+
+.table-actions {
+  text-align: right;
+  white-space: nowrap;
+
+  .btn {
+    @extend .btn-sm;
+
+    padding: 0.5rem;
+    line-height: 1;
+
+    i {
+      font-size: 0.85rem;
+
+      width: 1.25rem;
+      text-align: center;
+    }
+
+    &.has-icon .btn-label {
+      @include visually-hidden;
+    }
+  }
+
+  .btn,
+  .btn-group {
+    + .btn,
+    + .btn-group {
+      margin-left: 4px;
+    }
+  }
+
+  .btn-group {
+    .btn + .btn {
+      margin-left: -1px;
+    }
+  }
+}

data/frontend/css/components/_tabs.scss

@@ -25,10 +25,17 @@
     margin-right: 4px;
     padding: 10px 20px;
 
+    font-weight: 500;
+
+    transition: $nav-tabs-link-transition;
+
     background-color: $nav-tabs-link-bg;
     color: $nav-tabs-link-color;
 
-    font-weight: 500;
+    &:not(.active):hover {
+      background-color: $nav-tabs-link-hover-bg;
+      color: $nav-tabs-link-hover-color;
+    }
   }
 
   .align-right {
@@ -52,12 +59,12 @@
     // Default badge color when no badge- classes specified
     &:not([class*="badge-"]) {
       background: $gray-600;
-      color: color-yiq($gray-600);
+      color: color-contrast($gray-600);
     }
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .nav-tabs {
     .nav-link {
       font-size: 0.95rem;

data/frontend/css/components/_tags.scss

@@ -1,27 +1,82 @@
+@mixin tag-variant(
+  $base-color,
+  $background: shift-color($base-color, $tag-bg-scale),
+  $border: shift-color($base-color, $tag-border-scale),
+  $color: color-contrast($background),
+  $hover-background: shift-color($base-color, $tag-hover-bg-scale),
+  $hover-border: shift-color($base-color, $tag-hover-border-scale),
+  $hover-color: $color
+) {
+  --tag-bg: #{$background};
+  --tag-border-color: #{$border};
+  --tag-color: #{$color};
+
+  --tag-hover-bg: #{$hover-background};
+  --tag-hover-border-color: #{$hover-border};
+  --tag-hover-color: #{$hover-color};
+}
+
 .tag {
+  --tag-padding-y: 0.25rem;
+  --tag-padding-x: 6px;
+
+  --tag-border-width: 0.325rem;
+  --tag-border-radius: 0.25rem;
+
+  --tag-font-size: 0.8rem;
+  --tag-font-weight: normal;
+  --tag-line-height: 1.1;
+
+  --tag-bg: #{shift-color($primary, $tag-bg-scale)};
+  --tag-border-color: #{rgba(black, 0.25)};
+  --tag-color: white;
+
+  --tag-hover-border-color: #{rgba(black, 0.35)};
+
   display: inline-block;
-  padding: 3px 6px 3px 4px;
-  margin: 1px 4px 1px 0;
+  padding: var(--tag-padding-y) var(--tag-padding-x) var(--tag-padding-y) calc(var(--tag-padding-x) - var(--tag-border-width) / 2);
 
-  font-size: 0.8rem;
-  line-height: 1.1;
+  font-size: var(--tag-font-size);
+  font-weight: var(--tag-font-weight);
+  line-height: var(--tag-line-height);
 
   white-space: nowrap;
 
-  border-left: 4px solid $tag-border;
-  border-radius: 4px;
+  border-left: var(--tag-border-width) solid var(--tag-border-color);
+  border-radius: var(--tag-border-radius);
 
-  color: $tag-color;
-  background-color: $tag-bg;
-}
+  background-color: var(--tag-bg);
+  color: var(--tag-color);
 
-a.tag {
-  font-weight: inherit;
+  @at-root a#{&} {
+    color: var(--tag-color);
+    font-weight: inherit;
 
-  &:hover, &:focus {
-    text-decoration: none;
-    color: $tag-hover-color;
-    background-color: $tag-hover-bg;
-    border-color: $tag-hover-border;
+    &:hover, &:focus {
+      text-decoration: none;
+
+      background-color: var(--tag-hover-bg, var(--tag-bg));
+      border-color: var(--tag-hover-border-color, var(--tag-border-color));
+      color: var(--tag-hover-color, var(--tag-color));
+    }
+  }
+}
+
+@each $state, $value in $theme-colors {
+  .tag-#{$state} {
+    @include tag-variant($value);
   }
 }
+
+.tag-list {
+  --tag-spacing-y: #{$tag-spacing-y};
+  --tag-spacing-x: #{$tag-spacing-x};
+
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--tag-spacing-y) var(--tag-spacing-x);
+
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

data/frontend/css/components/_toolbars.scss

@@ -1,42 +1,27 @@
 .btn-toolbar {
-  .btn,
-  .btn-group,
-  .input-group {
-    + .btn,
-    + .btn-group,
-    + .input-group {
-      margin-left: 5px;
-    }
-  }
-
-  .btn-group {
-    .btn,
-    .btn-group {
-      + .btn,
-      + .btn-group {
-        margin-left: 0;
-      }
-    }
-  }
+  gap: 5px;
 }
 
 .primary-toolbar {
   .btn {
-    @extend .btn-lg;
-
-    font-size: 1.35rem;
-    padding: 0.5rem 1.25rem;
-
-    @include media-breakpoint-down(sm) {
-      font-size: 1.25rem;
-      padding: 0.35rem 0.75rem;
+    --#{$prefix}btn-padding-x:     1.25rem;
+    --#{$prefix}btn-padding-y:     0.5rem;
+    --#{$prefix}btn-font-size:     1.35rem;
+
+    @include media-breakpoint-down(md) {
+      --#{$prefix}btn-padding-x:     0.75rem;
+      --#{$prefix}btn-padding-y:     0.35rem;
+      --#{$prefix}btn-font-size:     1.25rem;
+      --#{$prefix}btn-border-radius: #{$btn-border-radius-sm};
     }
   }
 }
 
 .secondary-toolbar {
   .btn {
-    @extend .btn-sm;
+    --#{$prefix}btn-padding-x: #{$btn-padding-x-sm};
+    --#{$prefix}btn-padding-y: #{$btn-padding-y-sm};
+    --#{$prefix}btn-font-size: #{$btn-font-size-sm};
 
     > i {
       font-size: 80%;
@@ -46,9 +31,11 @@
       }
     }
 
-    @include media-breakpoint-down(sm) {
-      font-size: 0.75rem;
-      padding: 0.2rem 0.5rem;
+    @include media-breakpoint-down(md) {
+      --#{$prefix}btn-padding-x: 0.5rem;
+      --#{$prefix}btn-padding-y: 0.2rem;
+      --#{$prefix}btn-font-size: 0.75rem;
+      --#{$prefix}btn-border-radius: #{$btn-border-radius-sm};
     }
   }
 }

data/frontend/css/components/_turbo.scss

@@ -0,0 +1,3 @@
+.turbo-progress-bar {
+  background-color: var(--primary);
+}