Improve use of CSS variables for navbar toggler

TrestleAdmin · Oct 11, 2023 · e49deec · e49deec
1 parent e55df3f
commit e49deec
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/app/assets/bundle/trestle/bundle.css b/app/assets/bundle/trestle/bundle.css
diff --git a/frontend/css/layout/_sidebar.scss b/frontend/css/layout/_sidebar.scss
@@ -26,26 +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: math.div($grid-gutter-width, 2);
     margin-right: math.div($grid-gutter-width, 2);
 
-    background: $sidebar-mobile-toggle-bg;
-    border: $sidebar-mobile-toggle-border;
-    color: $sidebar-mobile-toggle-border-color;
+    background: var(--bs-navbar-toggler-bg);
 
     &:hover, &:focus {
-      background: $sidebar-mobile-toggle-active-bg;
-      border: $sidebar-mobile-toggle-active-border;
-      color: $sidebar-mobile-toggle-active-border-color;
+      --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};
   }
 }