Add mobile width variable

fxpio · Sep 21, 2021 · e61ec98 · e61ec98
1 parent 088cfe8
commit e61ec98
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/scss/_sidebar-core.scss b/scss/_sidebar-core.scss
@@ -285,14 +285,14 @@
 
 @media (max-width: (map-get($sidebar-grid-breakpoints, $sidebar-mobile-breakpoint) - 1)) {
     .fxp-sidebar {
-        width: 80%;
+        width: $sidebar-mobile-width;
         -webkit-transform: translate3d(-100%, 0px, 0px);
         transform: translate3d(-100%, 0px, 0px);
     }
 
     .fxp-sidebar-open + .fxp-sidebar-swipe,
     .fxp-sidebar-force-open.fxp-sidebar-open + .fxp-sidebar-swipe {
-        left: 80%;
+        left: $sidebar-mobile-width;
     }
 
     .fxp-sidebar-force-open {
@@ -303,13 +303,14 @@
 
     .fxp-sidebar-right {
         &.fxp-sidebar {
+            width: $sidebar-right-mobile-width;
             -webkit-transform: translate3d(100%, 0px, 0px);
             transform: translate3d(100%, 0px, 0px);
         }
 
         &.fxp-sidebar-open + .fxp-sidebar-swipe {
             left: auto;
-            right: 80%;
+            right: $sidebar-right-mobile-width;
         }
 
         &.fxp-sidebar-force-open {

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -48,6 +48,8 @@ $sidebar-width:                      210px !default;
 $sidebar-mini-width:                 round($sidebar-width / 3) !default;
 $sidebar-right-width:                $sidebar-width !default;
 $sidebar-right-mini-width:           round($sidebar-right-width / 3) !default;
+$sidebar-mobile-width:               80%;
+$sidebar-right-mobile-width:         $sidebar-mobile-width;
 $sidebar-clickable-swipe-bg:         fade($primary, 23%) !default;
 $sidebar-obfuscator-bg:              rgba(0, 0, 0, 0.5) !default;
 $sidebar-obfuscator-duration:        '0.3s' !default;