Use CSS variables for sidebar configuration

TrestleAdmin · Jul 17, 2024 · db1306f · db1306f
1 parent 7a30889
commit db1306f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/app/assets/bundle/trestle/admin.css b/app/assets/bundle/trestle/admin.css
diff --git a/frontend/css/layout/_sidebar.scss b/frontend/css/layout/_sidebar.scss
@@ -1,9 +1,16 @@
 @use "sass:math";
 
+.app-wrapper {
+  --sidebar-width: #{$sidebar-width};
+  --sidebar-width-collapsed: #{$sidebar-width-collapsed};
+  --sidebar-transition-duration: #{$sidebar-transition-duration};
+  --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;
@@ -138,10 +145,10 @@
   }
 
   .app-wrapper {
-    width: calc(100% + #{$sidebar-width});
+    width: calc(100% + var(--sidebar-width));
 
-    translate: calc(#{$sidebar-width} * -1);
-    transition: translate $sidebar-transition-duration ease-out;
+    translate: calc(var(--sidebar-width) * -1);
+    transition: translate var(--sidebar-transition-duration) ease-out;
 
     .mobile-nav-expanded & {
       translate: 0;
@@ -155,7 +162,7 @@
   .app-sidebar-header {
     position: absolute;
     top: 0;
-    left: $sidebar-width;
+    left: var(--sidebar-width);
     right: 0;
     z-index: 1;
   }
@@ -176,7 +183,7 @@
 
 @include media-breakpoint-between(md, xl) {
   .app-sidebar {
-    width: $sidebar-width-collapsed;
+    width: var(--sidebar-width-collapsed);
 
     .app-sidebar-header {
       text-align: center;
@@ -204,7 +211,7 @@
     }
 
     .sidebar-expanded & {
-      width: $sidebar-width;
+      width: var(--sidebar-width);
 
       .app-sidebar-header {
         text-align: left;
@@ -237,7 +244,7 @@
 @include media-breakpoint-up(xl) {
   .app-sidebar {
     .sidebar-collapsed & {
-      width: $sidebar-width-collapsed;
+      width: var(--sidebar-width-collapsed);
 
       .app-sidebar-header {
         text-align: center;

diff --git a/frontend/css/variables/_trestle.scss b/frontend/css/variables/_trestle.scss
@@ -59,7 +59,7 @@ $sidebar-mobile-toggle-active-border:       $sidebar-mobile-toggle-border-width
 $sidebar-width:           250px;
 $sidebar-width-collapsed: 54px;
 
-$sidebar-transition-duration: 250ms;
+$sidebar-transition-duration: 200ms;
 
 
 // Content