frontend/css/layout/_sidebar.scss in trestle-0.10.0.pre vs frontend/css/layout/_sidebar.scss in trestle-0.10.0.pre2

@@ -1,11 +1,19 @@
 @use "sass:math";
 
+.app-wrapper {
+  --sidebar-width: #{$sidebar-width};
+  --sidebar-width-collapsed: #{$sidebar-width-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: $sidebar-width;
+  width: var(--sidebar-width);
   padding: 0;
 
   flex-shrink: 0;
 
   position: relative;
@@ -13,54 +21,59 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
 
   align-items: stretch;
+
+  transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
 }
 
 .app-sidebar-header {
   @extend .theme-bg;
 
   height: $header-height;
 
   display: flex;
   align-items: stretch;
 
+  overflow: hidden;
+
   .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};
+    --#{$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: math.div($grid-gutter-width, 2);
     margin-right: math.div($grid-gutter-width, 2);
 
-    background: var(--bs-navbar-toggler-bg);
+    background: var(--#{$prefix}navbar-toggler-bg);
 
     &:hover, &:focus {
-      --bs-navbar-toggler-border-color: #{$sidebar-mobile-toggle-active-border-color};
-      --bs-navbar-toggler-bg: #{$sidebar-mobile-toggle-active-bg};
+      --#{$prefix}navbar-toggler-border-color: #{$sidebar-mobile-toggle-active-border-color};
+      --#{$prefix}navbar-toggler-bg: #{$sidebar-mobile-toggle-active-bg};
     }
   }
 
   .navbar-toggler-icon {
-    --bs-navbar-toggler-icon-bg: #{$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: 0.5rem 0.875rem;
 
-  font-size: 1.4rem;
+  font-size: 1.25rem;
   font-weight: 500;
   text-shadow: rgba(black, 0.5) 0 1px 1px;
   color: white;
 
   &:hover, &:focus {
@@ -70,11 +83,11 @@
 
   img {
     max-height: 100%;
 
     & + .title-large {
-      margin-left: 10px;
+      margin-left: 0.75rem;
     }
   }
 
   .title-small {
     display: none;
@@ -110,12 +123,13 @@
 
   background: $sidebar-toggle-bg;
   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;
 
   opacity: 0.75;
 
@@ -136,41 +150,35 @@
   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;
     }
   }
 
   .app-sidebar {
     position: static;
   }
 
   .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: 0.5rem 0.25rem;
 
     // Match right margin with navbar toggler width:
     // (margin + border + font-size * icon-width + padding)
     margin-right: calc(#{$grid-gutter-width} + #{$border-width} + #{$navbar-toggler-font-size} * 1.5 + #{$navbar-toggler-padding-x} * 2);
   }
@@ -180,18 +188,21 @@
   }
 }
 
 @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: 0.5rem 0.25rem;
       justify-content: center;
 
       img {
         margin: auto;
       }
@@ -208,18 +219,21 @@
     .toggle-sidebar:after {
       @include icon-fa($fa-var-angle-double-right);
     }
 
     .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: 0.5rem 0.25rem;
         justify-content: flex-start;
 
         img {
           margin: 0;
         }
@@ -241,18 +255,21 @@
 }
 
 @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: 0.5rem 0.25rem;
         justify-content: center;
 
         img {
           margin: auto;
         }
@@ -268,7 +285,14 @@
 
       .toggle-sidebar:after {
         @include icon-fa($fa-var-angle-double-right);
       }
     }
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .app-sidebar,
+  .app-wrapper {
+    transition: none;
   }
 }