trestle 0.9.9 → 0.10.0

data/frontend/css/core/_bootstrap.scss

@@ -0,0 +1,46 @@
+// Configuration
+// @import "~bootstrap/scss/functions";
+// @import "~bootstrap/scss/variables";
+// @import "~bootstrap/scss/variables-dark";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+// Layout & components
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/offcanvas";
+@import "~bootstrap/scss/placeholders";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";

data/frontend/css/core/_dependencies.scss

@@ -1,5 +1,6 @@
-@import "~bootstrap/scss/bootstrap";
-@import "~magnific-popup/dist/magnific-popup";
+@import "./bootstrap";
+
+@import "~photoswipe/dist/photoswipe.css";
 @import "~flatpickr/dist/flatpickr";
 @import "~select2/src/scss/core";
-@import "~select2-theme-bootstrap4/src/select2-bootstrap";
+@import "~select2-bootstrap-5-theme/src/include-all";

data/frontend/css/core/_functions.scss

@@ -0,0 +1,31 @@
+@use "sass:math";
+
+@function soft-shadow($distance: 0.5rem, $blur: 1.5rem, $color: rgba(black, 0.125), $layers: 5, $reduce: math.div($distance, -4)) {
+  $val: 0 #{$distance} #{$blur} #{$reduce} #{$color};
+
+  @for $i from 1 through ($layers - 1) {
+    $distance: math.div($distance, 2);
+    $blur: math.div($blur, 2);
+
+    $val: 0 #{$distance} #{$blur} #{$reduce} #{$color}, #{$val};
+  }
+
+  @return $val;
+}
+
+@function adjust-theme-hsl($name, $hue: null, $saturation: null, $lightness: null, $wrap: true) {
+  $hsl:
+    adjust-css-value(var(--#{$name}-h), $hue)
+    adjust-css-value(var(--#{$name}-s), $saturation)
+    adjust-css-value(var(--#{$name}-l), $lightness);
+
+  @return if($wrap, hsl($hsl), $hsl);
+}
+
+@function adjust-css-value($var, $adjustment) {
+  @if ($adjustment and $adjustment != 0) {
+    @return calc(#{$var} * #{1 + math.div($adjustment, 100%)});
+  } @else {
+    @return $var;
+  }
+}

data/frontend/css/core/_mixins.scss

@@ -8,46 +8,12 @@
   }
 }
 
-@mixin aspect-ratio($ratio) {
-  position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: percentage(1 / $ratio);
-  background-size: 100%;
-}
-
-@mixin fill-area {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-}
-
 @mixin icon-fa($content) {
-  font-family: 'Font Awesome 5 Free';
+  font-family: 'Font Awesome 6 Free';
   font-weight: 900;
-
   content: fa-content($content);
 }
 
 @mixin sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-@function strip-units($number) {
-  @return $number / ($number * 0 + 1);
-}
-
-@function em($rem) {
-  @return strip-units($rem) * 1em;
+  @include visually-hidden;
 }

data/frontend/css/core/_theme.scss

@@ -0,0 +1,261 @@
+@use "sass:color";
+
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary
+);
+
+// Theme color variables
+
+:root, [data-bs-theme=light] {
+  @each $color, $value in $theme-colors {
+    --#{$color}: #{$value};
+
+    --#{$color}-h: #{hue($value)};
+    --#{$color}-s: #{saturation($value)};
+    --#{$color}-l: #{lightness($value)};
+
+    --#{$color}-hue: var(--#{$color}-h);
+    --#{$color}-saturation: var(--#{$color}-s);
+    --#{$color}-lightness: var(--#{$color}-l);
+
+    --#{$color}-rgb: #{to-rgb($value)};
+
+    --#{$color}-hsl: var(--#{$color}-h) var(--#{$color}-s) var(--#{$color}-l);
+
+    --#{$prefix}#{$color}-rgb: var(--#{$color}-rgb);
+
+    --#{$prefix}#{$color}-text-emphasis: #{adjust-theme-hsl($color, $lightness: -60%)};
+    --#{$prefix}#{$color}-bg-subtle: #{adjust-theme-hsl($color, $lightness: 80%)};
+    --#{$prefix}#{$color}-border-subtle: #{adjust-theme-hsl($color, $lightness: 60%)};
+  }
+
+  --theme-texture: url(../images/bright-squares.png);
+  --theme-gradient: #{linear-gradient(rgba(white, 0.05), rgba(black, 0.05))};
+
+  --#{$prefix}link-color: var(--primary);
+  --#{$prefix}link-color-rgb: var(--primary-rgb);
+  --#{$prefix}link-color-hsl: var(--primary-hsl);
+
+  --#{$prefix}link-hover-color-hsl: #{adjust-theme-hsl(primary, $lightness: -$link-shade-percentage, $wrap: false)};
+  --#{$prefix}link-hover-color: hsl(var(--#{$prefix}link-hover-color-hsl));
+}
+
+
+// Global styles using primary color
+
+a {
+  color: hsl(var(--#{$prefix}link-color-hsl) / var(--#{$prefix}link-opacity, 1));
+
+  &:hover {
+    color: hsl(var(--#{$prefix}link-hover-color-hsl) / var(--#{$prefix}link-opacity, 1));
+  }
+}
+
+.nav-link {
+  &:focus-visible {
+    box-shadow: 0 0 #{$focus-ring-blur} #{$focus-ring-width} rgba(var(--primary-rgb), #{$focus-ring-opacity});
+  }
+}
+
+.btn-link {
+  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}link-color-rgb), .25);
+}
+
+.btn-close {
+  --#{$prefix}btn-close-focus-shadow: 0 0 #{$focus-ring-blur} #{$focus-ring-width} rgba(var(--primary-rgb), #{$focus-ring-opacity});
+}
+
+.pagination {
+  --#{$prefix}pagination-active-bg: var(--primary);
+  --#{$prefix}pagination-active-border-color: var(--primary);
+  --#{$prefix}pagination-focus-box-shadow: 0 0 #{$focus-ring-blur} #{$focus-ring-width} rgba(var(--primary-rgb), #{$focus-ring-opacity});
+}
+
+.accordion {
+  --#{$prefix}accordion-btn-focus-border-color: #{adjust-theme-hsl(primary, $lightness: 50%)};
+  --#{$prefix}accordion-btn-focus-box-shadow: 0 0 #{$focus-ring-blur} #{$focus-ring-width} rgba(var(--primary-rgb), #{$focus-ring-opacity});
+}
+
+.form-control,
+.form-check-input,
+.form-select,
+.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
+  &:focus {
+    border-color: #{adjust-theme-hsl(primary, $lightness: 50%)};
+    box-shadow: 0 0 0 $form-select-focus-width rgba(var(--primary-rgb), #{$focus-ring-opacity});
+  }
+}
+
+.select2-container--bootstrap-5 {
+  &.select2-container--focus,
+  &.select2-container--open {
+    .select2-selection,
+    .select2-dropdown {
+      border-color: #{adjust-theme-hsl(primary, $lightness: 50%)};
+      box-shadow: 0 0 0 $form-select-focus-width rgba(var(--primary-rgb), #{$focus-ring-opacity});
+    }
+
+    &.select2-container--above,
+    &.select2-container--below {
+      .tag-select {
+        border-color: #{adjust-theme-hsl(primary, $lightness: 50%)};
+      }
+    }
+  }
+
+  .select2-dropdown {
+    .select2-results__options {
+      .select2-results__option {
+        // Highlighted item
+        &.select2-results__option--highlighted {
+          background-color: rgba(var(--primary-rgb), 0.2);
+        }
+
+        // Selected item
+        &.select2-results__option--selected,
+        &[aria-selected="true"]:not(.select2-results__option--highlighted) {
+          background-color: rgba(var(--primary-rgb), 0.1);
+        }
+      }
+    }
+  }
+}
+
+.form-check-input {
+  &:checked,
+  &[type=checkbox]:indeterminate {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
+}
+
+.form-range {
+  &:focus {
+    $box-shadow:
+      0 0 0 1px $body-bg,
+      0 0 0 $form-select-focus-width rgba(var(--primary-rgb), #{$focus-ring-opacity});
+
+    &::-webkit-slider-thumb {
+      box-shadow: $box-shadow;
+    }
+
+    &::-moz-range-thumb {
+      box-shadow: $box-shadow;
+    }
+  }
+
+  &::-webkit-slider-thumb {
+    background-color: var(--primary);
+
+    &:active {
+      background-color: #{adjust-theme-hsl(primary, $lightness: 70%)};
+    }
+  }
+
+  &::-moz-range-thumb {
+    background-color: var(--primary);
+
+    &:active {
+      background-color: #{adjust-theme-hsl(primary, $lightness: 70%)};
+    }
+  }
+}
+
+.select2-container--bootstrap-5 {
+  .tag-select.select2-selection--multiple {
+    .select2-selection__rendered {
+      .select2-selection__choice {
+        --tag-bg: #{adjust-theme-hsl(primary, $lightness: -$tag-bg-scale)};
+        --tag-border-color: var(--primary);
+      }
+    }
+  }
+}
+
+.flatpickr-months {
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    &:hover svg {
+      fill: #{adjust-theme-hsl(primary, $lightness: -50%)};
+    }
+  }
+}
+
+
+// Primary and secondary component overrides
+
+@each $color, $value in $theme-colors {
+  .text-bg-#{$color} {
+    background-color: hsl(var(--#{$color}-hsl) / var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+  }
+
+  .link-#{$color} {
+    &:hover,
+    &:focus {
+      $hover-color: #{adjust-theme-hsl($color, $lightness: -$link-shade-percentage, $wrap: false)};
+      color: hsl($hover-color / var(--#{$prefix}link-opacity, 1));
+      text-decoration-color: hsl($hover-color / var(--#{$prefix}link-underline-opacity, 1));
+    }
+  }
+
+  .btn-#{$color} {
+    --#{$prefix}btn-bg: var(--#{$color});
+    --#{$prefix}btn-border-color: var(--#{$color});
+
+    --#{$prefix}btn-hover-bg: #{adjust-theme-hsl($color, $lightness: -$btn-hover-bg-shade-amount)};
+    --#{$prefix}btn-hover-border-color: #{adjust-theme-hsl($color, $lightness: -$btn-hover-border-shade-amount)};
+
+    --#{$prefix}btn-active-bg: #{adjust-theme-hsl($color, $lightness: -$btn-active-bg-shade-amount)};
+    --#{$prefix}btn-active-border-color: #{adjust-theme-hsl($color, $lightness: -$btn-active-border-shade-amount)};
+
+    --#{$prefix}btn-disabled-bg: var(--#{$color});
+    --#{$prefix}btn-disabled-border-color: var(--#{$color});
+
+    --#{$prefix}btn-focus-shadow-rgb: var(--#{$color}-rgb);
+    --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .25);
+  }
+
+  .btn-outline-#{$color} {
+    --#{$prefix}btn-color: var(--#{$color});
+    --#{$prefix}btn-border-color: var(--#{$color});
+
+    --#{$prefix}btn-hover-bg: var(--#{$color});
+    --#{$prefix}btn-hover-border-color: var(--#{$color});
+
+    --#{$prefix}btn-active-bg: var(--#{$color});
+    --#{$prefix}btn-active-border-color: var(--#{$color});
+
+    --#{$prefix}btn-disabled-color: var(--#{$color});
+    --#{$prefix}btn-disabled-border-color: var(--#{$color});
+
+    --#{$prefix}btn-focus-shadow-rgb: var(--#{$color}-rgb);
+    --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .25);
+  }
+
+  .alert-#{$color} {
+    --#{$prefix}alert-bg: #{adjust-theme-hsl($color, $saturation: -40%, $lightness: 10%)};
+    --#{$prefix}alert-border-color: #{adjust-theme-hsl($color, $saturation: -20%, $lightness: -10%)};
+  }
+
+  .badge-#{$color} {
+    --#{$prefix}badge-bg: var(--#{$color});
+    --#{$prefix}badge-hover-bg: #{adjust-theme-hsl($color, $lightness: -$badge-hover-scale)};
+  }
+
+  .table-#{$color} {
+    --#{$prefix}table-bg: #{adjust-theme-hsl($color, $lightness: -$table-bg-scale)};
+    --#{$prefix}table-border-color: #{adjust-theme-hsl($color, $lightness: -$table-bg-scale - percentage($table-border-factor))};
+    --#{$prefix}table-striped-bg: #{adjust-theme-hsl($color, $lightness: -$table-bg-scale - percentage($table-striped-bg-factor))};
+    --#{$prefix}table-active-bg: #{adjust-theme-hsl($color, $lightness: -$table-bg-scale - percentage($table-active-bg-factor))};
+    --#{$prefix}table-hover-bg: #{adjust-theme-hsl($color, $lightness: -$table-bg-scale - percentage($table-hover-bg-factor))};
+  }
+
+  .tag-#{$color} {
+    --tag-bg: #{adjust-theme-hsl($color, $lightness: -$tag-bg-scale)};
+    --tag-border-color: var(--#{$color});
+
+    --tag-hover-bg: #{adjust-theme-hsl($color, $lightness: -$tag-hover-bg-scale)};
+    --tag-hover-border-color: #{adjust-theme-hsl($color, $lightness: -$tag-hover-border-scale)};
+  }
+}

data/frontend/css/core/_typography.scss

@@ -1,7 +1,3 @@
-html {
-  font-size: 14px;
-}
-
 body {
   @include font-smoothing;
 }
@@ -14,6 +10,15 @@ img {
   max-width: 100%;
 }
 
+.error-iframe {
+  display: block;
+  width: 100%;
+  border: 0;
+  flex: 1;
+  min-height: 60vh;
+  max-height: 75vh;
+}
+
 .empty, .blank {
   font-style: italic;
   opacity: 0.5;
@@ -27,26 +32,23 @@ img {
   }
 }
 
+.main-content-header {
+  font-size: 1rem * $header-font-size-scale;
+}
+
 .main-content-sidebar {
   font-size: 1rem * $sidebar-font-size-scale;
 
   h1, h2, h3, h4, h5, h6,
   .h1, .h2, .h3, .h4, .h5, .h6 {
-    border-bottom: 1px solid $hr-border-color;
-    padding-bottom: 0.325rem;
+    border-bottom: $headings-border;
+    padding-bottom: 0.275rem;
 
     &:not(:first-child) {
-      margin-top: 1.75rem;
+      margin-top: 1.5rem;
     }
   }
 
-  h1, .h1 { font-size: $h1-font-size * $sidebar-font-size-scale; }
-  h2, .h2 { font-size: $h2-font-size * $sidebar-font-size-scale; }
-  h3, .h3 { font-size: $h3-font-size * $sidebar-font-size-scale; }
-  h4, .h4 { font-size: $h4-font-size * $sidebar-font-size-scale; }
-  h5, .h5 { font-size: $h5-font-size * $sidebar-font-size-scale; }
-  h6, .h6 { font-size: $h6-font-size * $sidebar-font-size-scale; }
-
   .card-header,
   .card-body,
   .card-footer {

data/frontend/css/icons/_fontawesome.scss

@@ -1,18 +1,6 @@
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free/scss/regular";
+@import "~@fortawesome/fontawesome-free/scss/solid";
+@import "~@fortawesome/fontawesome-free/scss/brands";
 @import "~@fortawesome/fontawesome-free/scss/v4-shims";
-
-.far {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 400;
-}
-
-.fa,
-.fas {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-}
-
-.fab {
-  font-family: 'Font Awesome 5 Brands';
-}

data/frontend/css/index.scss

@@ -2,12 +2,16 @@
 
 // Mixins & functions
 @import "~bootstrap/scss/functions";
+@import "core/functions";
 @import "core/mixins";
 
 // Variables
 @import "variables/bootstrap";
-@import "variables/trestle";
 @import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/variables-dark";
+@import "variables/maps";
+
+@import "variables/trestle";
 
 // Icons
 @import "icons/fontawesome";
@@ -22,23 +26,24 @@
 @import "layout/footer";
 @import "layout/sidebar";
 @import "layout/navigation";
-@import "layout/content";
+@import "layout/content-header";
+@import "layout/main-content";
 
 // Components
-@import "components/color-vars";
 @import "components/alerts";
 @import "components/avatar";
 @import "components/background";
+@import "components/badges";
 @import "components/breadcrumbs";
 @import "components/buttons";
-@import "components/custom-forms";
 @import "components/datepicker";
 @import "components/dropdown";
-@import "components/fields";
-@import "components/magnific-popup";
+@import "components/forms";
+@import "components/grid";
 @import "components/media-grid";
 @import "components/modal";
 @import "components/pagination";
+@import "components/photoswipe";
 @import "components/popover";
 @import "components/scopes";
 @import "components/select";
@@ -48,4 +53,7 @@
 @import "components/tags";
 @import "components/timestamp";
 @import "components/toolbars";
-@import "components/turbolinks";
+@import "components/turbo";
+
+// Theming
+@import "core/theme";

data/frontend/css/layout/_base.scss

@@ -1,5 +1,5 @@
 html, body {
-  min-height: 100%;
+  min-height: 100dvh;
   height: 100%;
 }
 
@@ -8,7 +8,6 @@ html {
 }
 
 body {
-  display: flex;
   overflow: hidden;
 }
 
@@ -22,7 +21,10 @@ body {
   overflow: hidden;
 
   width: 100%;
+  height: 100%;
+
   min-width: 0;
+  min-height: 100dvh;
 }
 
 .app-container {
@@ -43,8 +45,8 @@ body {
   flex-direction: column;
 }
 
-@include media-breakpoint-down(sm) {
-  body {
+@include media-breakpoint-down(md) {
+  html, body {
     height: auto;
   }
 

data/frontend/css/layout/_content-header.scss

@@ -0,0 +1,71 @@
+.content-header {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-areas: "title toolbars"
+                       "breadcrumbs toolbars";
+  align-items: start;
+
+  background: $content-header-bg;
+  padding: 0.875rem 1.25rem;
+
+  @include media-breakpoint-down(md) {
+    padding: 0.625rem;
+  }
+
+  @include media-breakpoint-down(sm) {
+    grid-template-areas: "title toolbars"
+                         "breadcrumbs breadcrumbs";
+  }
+}
+
+.content-header-title {
+  grid-area: title;
+
+  margin: 0.25rem 0 1.125rem;
+
+  @include media-breakpoint-down(md) {
+    margin-top: 0.125rem;
+  }
+
+  h1 {
+    font-size: 2.125rem;
+    font-weight: 200;
+
+    margin: 0;
+
+    @include media-breakpoint-down(md) {
+      font-size: 2rem;
+    }
+
+    @include media-breakpoint-down(md) {
+      font-size: 1.75rem;
+    }
+  }
+}
+
+.content-header-toolbars {
+  grid-area: toolbars;
+
+  display: grid;
+  gap: 0.5rem;
+
+  .btn {
+    white-space: nowrap;
+  }
+
+  .btn-toolbar {
+    flex-direction: row-reverse;
+  }
+
+  @include media-breakpoint-down(md) {
+    gap: 0.25rem;
+  }
+}
+
+.content-header-breadcrumbs {
+  grid-area: breadcrumbs;
+
+  .breadcrumb {
+    margin: 0;
+  }
+}

data/frontend/css/layout/_footer.scss

@@ -4,16 +4,14 @@
   background: $footer-bg;
   color: $footer-color;
 
-  padding: 0.5rem 1.4rem;
-  font-size: 0.75rem;
+  padding: $footer-padding;
+  font-size: 0.625rem;
 
   display: flex;
   justify-content: space-between;
-}
 
-@include media-breakpoint-down(sm) {
-  .app-footer {
-    padding-left: 10px;
-    padding-right: 10px;
+  @include media-breakpoint-down(md) {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
   }
 }

data/frontend/css/layout/_header.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .app-header {
   flex: 0 0 $header-height;
   height: $header-height;
@@ -12,12 +14,12 @@
   background: $header-bg;
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .app-header {
     margin-top: -$header-height;
 
-    padding-left: $grid-gutter-width / 2;
-    padding-right: $grid-gutter-width / 2;
+    padding-left: math.div($grid-gutter-width, 2);
+    padding-right: math.div($grid-gutter-width, 2);
 
     // Hide all elements by default
     > * {