trestle 0.9.9 → 0.10.0.pre

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,258 @@
+@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%)};
+  }
+
+  --#{$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

@@ -27,12 +27,21 @@ img {
   }
 }
 
+.main-content-header {
+  h1, .h1 { font-size: $h1-font-size * $header-font-size-scale; }
+  h2, .h2 { font-size: $h2-font-size * $header-font-size-scale; }
+  h3, .h3 { font-size: $h3-font-size * $header-font-size-scale; }
+  h4, .h4 { font-size: $h4-font-size * $header-font-size-scale; }
+  h5, .h5 { font-size: $h5-font-size * $header-font-size-scale; }
+  h6, .h6 { font-size: $h6-font-size * $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;
+    border-bottom: $headings-border;
     padding-bottom: 0.325rem;
 
     &:not(:first-child) {

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";
@@ -25,20 +29,19 @@
 @import "layout/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/media-grid";
 @import "components/modal";
 @import "components/pagination";
+@import "components/photoswipe";
 @import "components/popover";
 @import "components/scopes";
 @import "components/select";
@@ -48,4 +51,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: 100vh;
   height: 100%;
 }
 
@@ -43,8 +43,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.scss

@@ -12,7 +12,7 @@
     margin-top: 0;
     margin-bottom: 0.5rem;
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       font-size: 2.25rem;
     }
   }
@@ -24,7 +24,7 @@
   .content-header-title {
     margin: 5px 0;
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       margin: 2px 0;
     }
   }
@@ -44,6 +44,7 @@
 
 .main-content-area {
   margin: 20px;
+  scroll-margin: 20px;
 }
 
 .main-content-container {
@@ -110,13 +111,15 @@
 }
 
 .error-iframe {
+  display: block;
+  width: 100%;
   border: 0;
   flex: 1;
-  width: 100%;
-  min-height: 400px;
+  min-height: 60vh;
+  max-height: 75vh;
 }
 
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   .main-content-container {
     flex-direction: column;
   }
@@ -127,13 +130,14 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .content-header {
     padding: 10px;
   }
 
   .main-content-area {
     margin: 10px;
+    scroll-margin: 10px;
   }
 
   .main-content-container {

data/frontend/css/layout/_footer.scss

@@ -11,7 +11,7 @@
   justify-content: space-between;
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .app-footer {
     padding-left: 10px;
     padding-right: 10px;

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
     > * {

data/frontend/css/layout/_navigation.scss

@@ -69,7 +69,7 @@
   }
 
   .active a {
-    border-left: $sidebar-active-border solid theme-color("primary");
+    border-left: $sidebar-active-border solid var(--primary);
     padding-left: 18px - $sidebar-active-border;
 
     background: $sidebar-active-bg;
@@ -127,7 +127,7 @@
   }
 }
 
-@include media-breakpoint-between(md, lg) {
+@include media-breakpoint-between(md, xl) {
   .nav-tooltip {
     display: block !important;
   }

data/frontend/css/layout/_sidebar.scss

@@ -1,13 +1,20 @@
+@use "sass:math";
+
 .app-sidebar {
   background: $sidebar-bg;
 
   width: $sidebar-width;
+  padding: 0;
+
   flex-shrink: 0;
 
   position: relative;
 
   display: flex;
   flex-direction: column;
+  flex-wrap: nowrap;
+
+  align-items: stretch;
 }
 
 .app-sidebar-header {
@@ -19,24 +26,27 @@
   align-items: stretch;
 
   .navbar-toggler {
+    --bs-navbar-toggler-bg: #{$sidebar-mobile-toggle-bg};
+    --bs-navbar-toggler-color: #{$sidebar-mobile-toggle-border-color};
+    --bs-navbar-toggler-border-color: #{$sidebar-mobile-toggle-border-color};
+
     outline: none;
 
     align-self: center;
 
-    margin-left: $grid-gutter-width / 2;
-    margin-right: $grid-gutter-width / 2;
+    margin-left: math.div($grid-gutter-width, 2);
+    margin-right: math.div($grid-gutter-width, 2);
 
-    background: $sidebar-mobile-toggle-bg;
-    border: $sidebar-mobile-toggle-border;
+    background: var(--bs-navbar-toggler-bg);
 
     &:hover, &:focus {
-      background: $sidebar-mobile-toggle-active-bg;
-      border: $sidebar-mobile-toggle-active-border;
+      --bs-navbar-toggler-border-color: #{$sidebar-mobile-toggle-active-border-color};
+      --bs-navbar-toggler-bg: #{$sidebar-mobile-toggle-active-bg};
     }
   }
 
   .navbar-toggler-icon {
-    background-image: $sidebar-mobile-toggle-icon-bg;
+    --bs-navbar-toggler-icon-bg: #{$sidebar-mobile-toggle-icon-bg};
   }
 }
 
@@ -122,7 +132,7 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   html, body {
     overflow-x: hidden;
   }
@@ -170,7 +180,7 @@
   }
 }
 
-@include media-breakpoint-between(md, lg) {
+@include media-breakpoint-between(md, xl) {
   .app-sidebar {
     width: $sidebar-width-collapsed;
 

data/frontend/css/support/_sprockets.scss

@@ -3,6 +3,7 @@
 // Mixins & functions
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/mixins";
+@import "trestle/frontend/css/core/functions";
 @import "trestle/frontend/css/core/mixins";
 
 // Variables
@@ -11,4 +12,5 @@
 @import "bootstrap/scss/variables";
 
 // Icon variables
+@import "@fortawesome/fontawesome-free/scss/functions";
 @import "@fortawesome/fontawesome-free/scss/variables";

data/frontend/css/support/_webpack.scss

@@ -3,6 +3,7 @@
 // Mixins & functions
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/mixins";
+@import "../core/functions";
 @import "../core/mixins";
 
 // Variables
@@ -11,4 +12,5 @@
 @import "~bootstrap/scss/variables";
 
 // Icon variables
+@import "~@fortawesome/fontawesome-free/scss/functions";
 @import "~@fortawesome/fontawesome-free/scss/variables";