trestle 0.9.9 → 0.10.0

data/frontend/css/layout/_main-content.scss

@@ -0,0 +1,107 @@
+.main-content-area {
+  --content-area-margin: 1.25rem;
+  --content-area-padding: 1.25rem;
+
+  --content-area-sidebar-width: #{$content-sidebar-width};
+  --content-area-sidebar-bg: #{$content-sidebar-bg};
+
+  --content-area-header-padding: 0.625rem 1.125rem;
+  --content-area-header-bg: #{$main-content-header-bg};
+  --content-area-header-border: #{$main-content-header-border};
+
+  --content-area-footer-padding: 0.625rem 1.125rem;
+  --content-area-footer-bg: #{$main-content-footer-bg};
+  --content-area-footer-border: #{$main-content-footer-border};
+
+  margin: var(--content-area-margin);
+  scroll-margin: var(--content-area-margin);
+}
+
+.main-content-container {
+  background: white;
+  display: flex;
+}
+
+.main-content,
+.main-content-sidebar {
+  padding: var(--content-area-padding);
+}
+
+.main-content {
+  // Allow nesting of tab panes directly within
+  @extend .tab-content;
+
+  flex: 1;
+  min-width: 0;
+}
+
+.main-content-header,
+.main-content-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.main-content-header {
+  margin: calc(var(--content-area-padding) * -1) calc(var(--content-area-padding) * -1) var(--content-area-padding) !important;
+  padding: var(--content-area-header-padding);
+  background: var(--content-area-header-bg);
+  border-bottom: var(--content-area-header-border)
+}
+
+.main-content-footer {
+  margin: var(--content-area-padding) calc(var(--content-area-padding) * -1) calc(var(--content-area-padding) * -1) !important;
+  padding: var(--content-area-footer-padding);
+  background: var(--content-area-footer-bg);
+  border-top: var(--content-area-footer-border);
+}
+
+.main-content,
+.main-content-sidebar,
+.tab-pane {
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.main-content-sidebar {
+  background: var(--content-area-sidebar-bg);
+  flex: 0 0 var(--content-area-sidebar-width);
+  max-width: var(--content-area-sidebar-width);
+}
+
+.utilities {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 0.75rem;
+}
+
+@include media-breakpoint-down(lg) {
+  .main-content-container {
+    flex-direction: column;
+  }
+
+  .main-content-sidebar {
+    flex-basis: 0;
+    max-width: none;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .main-content-area {
+    --content-area-margin: 0.625rem;
+    --content-area-padding: 0.875rem;
+
+    --content-area-header-padding: 0.625rem 0.875rem;
+    --content-area-footer-padding: 0.625rem 0.875rem;
+  }
+
+  .main-content-header,
+  .main-content-footer {
+    flex-direction: column;
+    align-items: center;
+  }
+}

data/frontend/css/layout/_navigation.scss

@@ -1,24 +1,28 @@
 .app-nav {
   flex: 1;
-  padding: 10px 0;
+  padding: 0.625rem 0;
 
   &, a {
     color: $sidebar-link-color;
   }
 
   ul {
-    margin: 10px 0;
+    margin: 0.625rem 0;
     padding: 0;
     list-style: none;
   }
 
-  a {
-    display: block;
+  .nav-item a {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
 
     font-weight: normal;
-    font-size: 0.9rem;
+    font-size: 0.8125rem;
 
-    padding: 12px 18px;
+    padding: 0.75rem 1rem;
+
+    position: relative;
 
     &:hover, &:focus {
       color: $sidebar-link-color;
@@ -31,12 +35,31 @@
     }
   }
 
+  .nav-item.active a {
+    border-left: $sidebar-active-border solid var(--primary);
+    padding-left: calc(1rem - #{$sidebar-active-border});
+
+    background: $sidebar-active-bg;
+    color: white;
+  }
+
   .nav-icon {
-    display: inline-block;
-    text-align: center;
-    width: 18px;
-    margin-right: 8px;
-    vertical-align: 0;
+    flex-shrink: 0;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.25rem;
+  }
+
+  .nav-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    opacity: 1;
+    transition: opacity var(--sidebar-transition-duration) var(--sidebar-transition-timing);
   }
 
   .nav-header a {
@@ -47,39 +70,38 @@
     font-weight: bold;
     line-height: 1;
 
-    font-size: 11px;
-    padding: 8px 20px;
+    font-size: 0.6875rem;
+    padding: 0.5rem 1.125rem;
 
-    &::after {
-      @include icon-fa($fa-var-caret-down);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    white-space: nowrap;
 
-      float: right;
-      margin-top: 2px;
+    span {
+      opacity: 1;
+      transition: opacity var(--sidebar-transition-duration) var(--sidebar-transition-timing);
+    }
 
+    &::after {
+      @include icon-fa($fa-var-caret-down);
       opacity: 0.75;
     }
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: none;
 
-      &::before, &::after {
-        opacity: 1 !important;
+      &::before,
+      &::after {
+        opacity: 1;
       }
     }
   }
 
-  .active a {
-    border-left: $sidebar-active-border solid theme-color("primary");
-    padding-left: 18px - $sidebar-active-border;
-
-    background: $sidebar-active-bg;
-    color: white;
-  }
-
   .badge {
-    float: right;
-    position: relative;
-    top: 1px;
+    margin-left: auto;
   }
 
   .collapsed {
@@ -98,17 +120,17 @@
 }
 
 @mixin collapsed-nav-header {
-  height: 0;
-  padding: 13px 15px 14px;
-  text-indent: -99999px;
+  span {
+    opacity: 0;
+  }
 
   &::after {
     display: none;
 
     position: absolute;
-    top: 4px;
+    top: 50%;
     left: 50%;
-    margin-left: -3px;
+    translate: -50% -5px;
 
     text-indent: 0;
   }
@@ -117,24 +139,42 @@
     content: "";
 
     position: absolute;
-    left: 15px;
-    right: 15px;
     top: 50%;
-    margin-top: -4px;
+    left: 1rem;
+    right: 1rem;
+    margin-top: -2px;
 
     border-bottom: 1px solid $sidebar-active-bg;
     opacity: 0.75;
   }
 }
 
-@include media-breakpoint-between(md, lg) {
+@mixin collapsed-nav-label {
+  opacity: 0;
+}
+
+@mixin collapsed-nav-badge {
+  text-indent: -99999px;
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  top: 0.625rem;
+  left: 2rem;
+}
+
+@include media-breakpoint-between(md, xl) {
   .nav-tooltip {
     display: block !important;
   }
 
   .app-nav {
-    .nav-label, .badge {
-      display: none;
+    .nav-label {
+      @include collapsed-nav-label;
+    }
+
+    .badge {
+      @include collapsed-nav-badge;
     }
 
     .nav-header a {
@@ -151,9 +191,9 @@
   .sidebar-expanded {
     .app-nav {
       .nav-header a {
-        height: auto;
-        padding: 8px 20px;
-        text-indent: 0;
+        span {
+          opacity: 1;
+        }
 
         &::before {
           display: none;
@@ -162,12 +202,21 @@
         &::after {
           display: block;
           position: static;
-          margin-left: 0;
+          translate: 0;
         }
       }
 
-      .nav-label  { display: inline; }
-      .badge  { display: block; }
+      .nav-label {
+        opacity: 1;
+      }
+
+      .badge {
+        position: static;
+        width: auto;
+        height: auto;
+        text-indent: 0;
+        padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+      }
     }
 
     .nav-tooltip {
@@ -179,8 +228,12 @@
 @include media-breakpoint-up(xl) {
   .sidebar-collapsed {
     .app-nav {
-      .nav-label, .badge {
-        display: none;
+      .nav-label {
+        @include collapsed-nav-label;
+      }
+
+      .badge {
+        @include collapsed-nav-badge;
       }
 
       .nav-header a {
@@ -199,3 +252,12 @@
     }
   }
 }
+
+@media (prefers-reduced-motion) {
+  .app-nav {
+    .nav-label,
+    .nav-header a span {
+      transition: none;
+    }
+  }
+}

data/frontend/css/layout/_sidebar.scss

@@ -1,13 +1,32 @@
+@use "sass:math";
+
+.app-wrapper {
+  --sidebar-width: #{$sidebar-width};
+  --sidebar-width-collapsed: #{$sidebar-width-collapsed};
+  --sidebar-padding: #{$sidebar-padding};
+  --sidebar-padding-collapsed: #{$sidebar-padding-collapsed};
+  --sidebar-transition-duration: #{$sidebar-transition-duration};
+  --sidebar-transition-timing: ease-out;
+  --sidebar-bg: #{$sidebar-bg};
+}
+
 .app-sidebar {
-  background: $sidebar-bg;
+  background: var(--sidebar-bg);
+
+  width: var(--sidebar-width);
+  padding: 0;
 
-  width: $sidebar-width;
   flex-shrink: 0;
 
   position: relative;
 
   display: flex;
   flex-direction: column;
+  flex-wrap: nowrap;
+
+  align-items: stretch;
+
+  transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
 }
 
 .app-sidebar-header {
@@ -18,37 +37,43 @@
   display: flex;
   align-items: stretch;
 
+  overflow: hidden;
+
   .navbar-toggler {
+    --#{$prefix}navbar-toggler-bg: #{$sidebar-mobile-toggle-bg};
+    --#{$prefix}navbar-toggler-color: #{$sidebar-mobile-toggle-border-color};
+    --#{$prefix}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(--#{$prefix}navbar-toggler-bg);
 
     &:hover, &:focus {
-      background: $sidebar-mobile-toggle-active-bg;
-      border: $sidebar-mobile-toggle-active-border;
+      --#{$prefix}navbar-toggler-border-color: #{$sidebar-mobile-toggle-active-border-color};
+      --#{$prefix}navbar-toggler-bg: #{$sidebar-mobile-toggle-active-bg};
     }
   }
 
   .navbar-toggler-icon {
-    background-image: $sidebar-mobile-toggle-icon-bg;
+    --#{$prefix}navbar-toggler-icon-bg: #{$sidebar-mobile-toggle-icon-bg};
   }
 }
 
 .app-sidebar-title {
-  flex: 1;
+  flex: 1 0 var(--sidebar-width);
+  width: var(--sidebar-width);
 
   display: flex;
   align-items: center;
 
-  padding: 10px 15px;
+  padding: var(--sidebar-padding);
 
-  font-size: 1.4rem;
+  font-size: 1.25rem;
   font-weight: 500;
   text-shadow: rgba(black, 0.5) 0 1px 1px;
   color: white;
@@ -62,7 +87,7 @@
     max-height: 100%;
 
     & + .title-large {
-      margin-left: 10px;
+      margin-left: 0.75rem;
     }
   }
 
@@ -102,8 +127,9 @@
   color: $sidebar-toggle-color;
   border: none;
 
-  font-size: 1.4rem;
-  padding: 10px 20px;
+  font-size: 1.25rem;
+  width: var(--sidebar-width-collapsed);
+  padding: 0.625rem;
 
   cursor: pointer;
 
@@ -122,25 +148,19 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   html, body {
     overflow-x: hidden;
   }
 
   .app-wrapper {
-    margin-left: -$sidebar-width;
-    margin-right: 0;
+    width: calc(100% + var(--sidebar-width));
 
-    &.animate {
-      transition: all $sidebar-transition-duration ease-out;
-      transition-property: margin-left, margin-right;
-    }
-  }
+    translate: calc(var(--sidebar-width) * -1);
+    transition: translate var(--sidebar-transition-duration) ease-out;
 
-  .mobile-nav-expanded {
-    .app-wrapper {
-      margin-left: 0;
-      margin-right: -$sidebar-width;
+    .mobile-nav-expanded & {
+      translate: 0;
     }
   }
 
@@ -151,14 +171,14 @@
   .app-sidebar-header {
     position: absolute;
     top: 0;
-    left: $sidebar-width;
+    left: var(--sidebar-width);
     right: 0;
     z-index: 1;
   }
 
   .app-sidebar-title {
     justify-content: center;
-    padding: 10px 5px;
+    padding: var(--sidebar-padding-collapsed);
 
     // Match right margin with navbar toggler width:
     // (margin + border + font-size * icon-width + padding)
@@ -170,16 +190,19 @@
   }
 }
 
-@include media-breakpoint-between(md, lg) {
+@include media-breakpoint-between(md, xl) {
   .app-sidebar {
-    width: $sidebar-width-collapsed;
+    width: var(--sidebar-width-collapsed);
 
     .app-sidebar-header {
       text-align: center;
     }
 
     .app-sidebar-title {
-      padding: 10px 5px;
+      width: var(--sidebar-width-collapsed);
+      flex-basis: var(--sidebar-width-collapsed);
+
+      padding: var(--sidebar-padding-collapsed);
       justify-content: center;
 
       img {
@@ -200,14 +223,17 @@
     }
 
     .sidebar-expanded & {
-      width: $sidebar-width;
+      width: var(--sidebar-width);
 
       .app-sidebar-header {
         text-align: left;
       }
 
       .app-sidebar-title {
-        padding: 10px 15px;
+        width: var(--sidebar-width);
+        flex-basis: var(--sidebar-width);
+
+        padding: var(--sidebar-padding);
         justify-content: flex-start;
 
         img {
@@ -233,14 +259,17 @@
 @include media-breakpoint-up(xl) {
   .app-sidebar {
     .sidebar-collapsed & {
-      width: $sidebar-width-collapsed;
+      width: var(--sidebar-width-collapsed);
 
       .app-sidebar-header {
         text-align: center;
       }
 
       .app-sidebar-title {
-        padding: 10px 5px;
+        width: var(--sidebar-width-collapsed);
+        flex-basis: var(--sidebar-width-collapsed);
+
+        padding: var(--sidebar-padding-collapsed);
         justify-content: center;
 
         img {
@@ -262,3 +291,10 @@
     }
   }
 }
+
+@media (prefers-reduced-motion) {
+  .app-sidebar,
+  .app-wrapper {
+    transition: none;
+  }
+}

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";