trestle 0.9.9 → 0.10.0.pre2

data/frontend/css/components/_select.scss

@@ -1,56 +1,185 @@
-.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 + 0.875rem;
+      }
     }
+  }
+
+  .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.1rem;
+
+      &: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: 0.25rem;
+        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-container--above .tag-select {
+      border-top-width: 1px;
+    }
+  }
+
+  // Prevent input zooming on mobile devices
+  @include media-breakpoint-down(sm) {
+    .select2-selection,
+    .select2-dropdown .select2-search .select2-search__field {
+      font-size: 1rem;
+    }
+  }
+}
+
+.form-select-sm {
+  ~ .select2-container--bootstrap-5 {
+    .select2-selection--single {
+      padding: 0;
 
-  &.select2-dropdown {
-    display: none;
+      .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 + 0.875rem;
+        }
+      }
+    }
   }
+}
 
-  .select2-container--open &.select2-selection {
-    border-radius: $s2bs-border-radius-base !important;
-    border-color: $s2bs-input-border-focus !important;
+.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.375rem;
+        }
+      }
+    }
   }
 }
 
+.tag-select {
+  background-image: none;
+}
+
 .date-select,
 .datetime-select,
 .time-select {
@@ -59,7 +188,7 @@
     width: auto;
   }
 
-  .select2-container--bootstrap {
+  .select2-container--bootstrap-5 {
     display: inline-block;
     width: auto !important;
   }

data/frontend/css/components/_sort.scss

@@ -8,7 +8,7 @@
     @include icon-fa($fa-var-bars);
 
     font-size: 75%;
-    margin-left: 5px;
+    margin-left: 0.325rem;
     opacity: 0.25;
   }
 

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,75 +69,68 @@
 
   .select-row {
     width: 2.5em;
-    text-align: center;
 
-    .custom-control {
-      padding-left: 1.5rem;
-    }
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
 
-    .custom-control-input {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
+    text-align: center;
+    vertical-align: middle;
 
-    .custom-control-label {
-      &::before,
-      &::after {
-        left: -1.325rem;
-      }
+    .form-check-input {
+      display: block;
     }
   }
 
-  .actions {
-    text-align: right;
-    white-space: nowrap;
+  .avatar {
+    width: 2rem;
+    height: 2rem;
+    vertical-align: middle;
+  }
 
-    .btn {
-      @extend .btn-sm;
+  .badge {
+    vertical-align: middle;
+  }
 
-      padding: 0.5rem;
-      line-height: 1;
+  ul, ol {
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style-position: inside;
+  }
+}
 
-      i {
-        font-size: 0.85rem;
+.table-actions {
+  text-align: right;
+  white-space: nowrap;
 
-        width: 1.25rem;
-        text-align: center;
-      }
+  .btn {
+    @extend .btn-sm;
 
-      &.has-icon .btn-label {
-        @include sr-only;
-      }
-    }
+    padding: 0.5rem;
+    line-height: 1;
 
-    .btn,
-    .btn-group {
-      + .btn,
-      + .btn-group {
-        margin-left: 4px;
-      }
-    }
+    i {
+      font-size: 0.75rem;
 
-    .btn-group {
-      .btn + .btn {
-        margin-left: -1px;
-      }
+      width: 1.125rem;
+      text-align: center;
     }
-  }
 
-  .avatar {
-    width: 32px;
-    height: 32px;
-    vertical-align: middle;
+    &.has-icon .btn-label {
+      @include visually-hidden;
+    }
   }
 
-  .badge {
-    vertical-align: middle;
+  .btn,
+  .btn-group {
+    + .btn,
+    + .btn-group {
+      margin-left: 0.25rem;
+    }
   }
 
-  ul, ol {
-    margin-bottom: 0;
-    padding-left: 0;
-    list-style-position: inside;
+  .btn-group {
+    .btn + .btn {
+      margin-left: -1px;
+    }
   }
 }

data/frontend/css/components/_tabs.scss

@@ -5,6 +5,11 @@
   flex-wrap: nowrap;
   white-space: nowrap;
 
+  gap: 0.325rem;
+
+  --#{$prefix}nav-link-padding-x: 1.25rem;
+  --#{$prefix}nav-link-padding-y: 0.625rem;
+
   &::-webkit-scrollbar {
     height: 4px;
   }
@@ -22,23 +27,22 @@
   }
 
   .nav-link {
-    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 {
     margin-left: auto;
 
-    .nav-link {
-      margin-right: 0;
-      margin-left: 4px;
-    }
-
     & + .align-right {
       margin-left: 0;
     }
@@ -46,29 +50,25 @@
 
   .badge {
     font-size: 0.65em;
-    margin-left: 0.35rem;
+    margin-left: 0.3125rem;
     vertical-align: 1px;
 
     // 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;
-      padding: 10px;
-      margin-right: 2px;
-    }
+    --#{$prefix}nav-link-padding-x: 0.625rem;
+
+    gap: 0.175rem;
 
-    .align-right {
-      .nav-link {
-        margin-left: 2px;
-      }
+    .nav-link {
+      font-size: 0.8125rem;
     }
   }
 }

data/frontend/css/components/_tags.scss

@@ -1,27 +1,92 @@
+@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.375em;
+  --tag-padding-x: 0.5em;
+
+  --tag-border-width: 0.325rem;
+  --tag-border-radius: 0.25rem;
+
+  --tag-font-size: 0.825em;
+  --tag-font-weight: normal;
+  --tag-line-height: 1.1;
+
+  --tag-color: white;
+
+  --tag-bg: #{shift-color($primary, $tag-bg-scale)};
+  --tag-border-color: #{$primary};
+
+  --tag-hover-bg: #{shift-color($primary, $tag-hover-bg-scale)};
+  --tag-hover-border-color: #{shift-color($primary, $tag-hover-border-scale)};
+
   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);
+
+  background-color: var(--tag-bg);
+  color: var(--tag-color);
 
-  color: $tag-color;
-  background-color: $tag-bg;
+  @at-root a#{&} {
+    color: var(--tag-color);
+    font-weight: inherit;
+
+    &: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));
+    }
+  }
 }
 
-a.tag {
-  font-weight: inherit;
+.tag {
+  --tag-bg: #{adjust-theme-hsl(primary, $lightness: -$tag-bg-scale)};
+  --tag-border-color: var(--primary);
+
+  --tag-hover-bg: #{adjust-theme-hsl(primary, $lightness: -$tag-hover-bg-scale)};
+  --tag-hover-border-color: #{adjust-theme-hsl(primary, $lightness: -$tag-hover-border-scale)};
+}
 
-  &:hover, &:focus {
-    text-decoration: none;
-    color: $tag-hover-color;
-    background-color: $tag-hover-bg;
-    border-color: $tag-hover-border;
+@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,36 +1,41 @@
 .btn-toolbar {
-  gap: 5px;
+  gap: 0.375rem;
 }
 
 .primary-toolbar {
   .btn {
-    @extend .btn-lg;
+    --#{$prefix}btn-padding-x: 1.125rem;
+    --#{$prefix}btn-padding-y: 0.5rem;
+    --#{$prefix}btn-font-size: 1.125rem;
 
-    font-size: 1.35rem;
-    padding: 0.5rem 1.25rem;
-
-    @include media-breakpoint-down(sm) {
-      font-size: 1.25rem;
-      padding: 0.35rem 0.75rem;
+    @include media-breakpoint-down(md) {
+      --#{$prefix}btn-padding-x:     0.75rem;
+      --#{$prefix}btn-padding-y:     0.25rem;
+      --#{$prefix}btn-font-size:     1.0625rem;
+      --#{$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%;
 
       + .btn-label {
-        margin-left: 3px;
+        margin-left: 0.25rem;
       }
     }
 
-    @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.25rem;
+      --#{$prefix}btn-font-size: 0.6875rem;
+      --#{$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);
+}