- fix(scss): new mobile breakpoint variables

xidedix · xidedix · commit c67063b3c705 · 2019-06-12T14:46:56.000+02:00
```scss
// Breakpoints for mobile defaults:
$breakpoint-mobile-up: lg !default;
$breakpoint-mobile-down: md !default;
 ```
usage: to shift mobile breakpoint in your template:
1. override `_variables.scss`
    ```scss
    $breakpoint-mobile-up: md;
    $breakpoint-mobile-down: sm;
    ```

2. and complementary changes in `index.html`
  - body: `sidebar-lg-show` -&gt; `sidebar-md-show`
  - mobile sidebar toggler button: `d-lg-none` -&gt; `d-md-none`
  - sidebar toggler button:
    - `d-md-down-none` -&gt; `d-sm-down-none`
    - `data-toggle="sidebar-lg-show"` -&gt; `data-toggle="sidebar-md-show"`
diff --git a/scss/_header.scss b/scss/_header.scss
@@ -114,7 +114,7 @@
   background-color: rgba(0, 0, 0, .075);
 }
 
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up($breakpoint-mobile-up) {
   .brand-minimized {
     .app-header {
       .navbar-brand {
diff --git a/scss/_layout.scss b/scss/_layout.scss
@@ -67,7 +67,7 @@ html[dir="rtl"] {
   }
 }
 
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up($breakpoint-mobile-up) {
   //
   // Header
   //
@@ -256,9 +256,17 @@ html[dir="rtl"] {
               }
             }
             &.sidebar-minimized {
-              .main,
-              .app-footer {
-                margin-left: if($breakpoint != "lg" and $breakpoint != "xl", $sidebar-width, $sidebar-minimized-width);
+              @include media-breakpoint-down($breakpoint-mobile-down) {
+                .main,
+                .app-footer {
+                  margin-left: $sidebar-width;
+                }
+              }
+              @include media-breakpoint-up($breakpoint-mobile-up) {
+                .main,
+                .app-footer {
+                  margin-left: $sidebar-minimized-width;
+                }
               }
             }
           }
@@ -320,9 +328,17 @@ html[dir="rtl"] {
               }
             }
             &.sidebar-minimized {
-              .main,
-              .app-footer {
-                margin-right: if($breakpoint != "lg" and $breakpoint != "xl", $sidebar-width, $sidebar-minimized-width);
+              @include media-breakpoint-down($breakpoint-mobile-down) {
+                .main,
+                .app-footer {
+                  margin-left: $sidebar-width;
+                }
+              }
+              @include media-breakpoint-up($breakpoint-mobile-up) {
+                .main,
+                .app-footer {
+                  margin-left: $sidebar-minimized-width;
+                }
               }
             }
           }
@@ -432,7 +448,7 @@ html[dir="rtl"] {
 //
 // Mobile layout
 //
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down($breakpoint-mobile-down) {
   .app-header {
     position: fixed;
     z-index: $zindex-sticky;
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -114,7 +114,7 @@
   background-color: rgba(0, 0, 0, .075);
 }
 
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up($breakpoint-mobile-up) {
   .brand-minimized {
     .app-header {
       .navbar-brand {
diff --git a/scss/_sidebar.scss b/scss/_sidebar.scss
@@ -321,7 +321,7 @@
   }
 }
 
-@include media-breakpoint-up(lg) {
+@include media-breakpoint-up($breakpoint-mobile-up) {
   .sidebar-compact {
     .sidebar {
       .sidebar-nav {
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -202,3 +202,7 @@ $switch-handle-margin:                2px !default;
 
 // Cursor
 $cursor-disabled: default !default;
+
+// Breakpoints for mobile
+$breakpoint-mobile-up: lg !default;
+$breakpoint-mobile-down: md !default;

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@`
`114`	`114`	`background-color: rgba(0, 0, 0, .075);`
`115`	`115`	`}`
`116`	`116`
`117`		`-@include media-breakpoint-up(lg) {`
	`117`	`+@include media-breakpoint-up($breakpoint-mobile-up) {`
`118`	`118`	`.brand-minimized {`
`119`	`119`	`.app-header {`
`120`	`120`	`.navbar-brand {`
Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ html[dir="rtl"] {`
`67`	`67`	`}`
`68`	`68`	`}`
`69`	`69`
`70`		`-@include media-breakpoint-up(lg) {`
	`70`	`+@include media-breakpoint-up($breakpoint-mobile-up) {`
`71`	`71`	`//`
`72`	`72`	`// Header`
`73`	`73`	`//`
`@@ -256,9 +256,17 @@ html[dir="rtl"] {`
`256`	`256`	`}`
`257`	`257`	`}`
`258`	`258`	`&.sidebar-minimized {`
`259`		`- .main,`
`260`		`- .app-footer {`
`261`		`- margin-left: if($breakpoint != "lg" and $breakpoint != "xl", $sidebar-width, $sidebar-minimized-width);`
	`259`	`+ @include media-breakpoint-down($breakpoint-mobile-down) {`
	`260`	`+ .main,`
	`261`	`+ .app-footer {`
	`262`	`+ margin-left: $sidebar-width;`
	`263`	`+ }`
	`264`	`+ }`
	`265`	`+ @include media-breakpoint-up($breakpoint-mobile-up) {`
	`266`	`+ .main,`
	`267`	`+ .app-footer {`
	`268`	`+ margin-left: $sidebar-minimized-width;`
	`269`	`+ }`
`262`	`270`	`}`
`263`	`271`	`}`
`264`	`272`	`}`
`@@ -320,9 +328,17 @@ html[dir="rtl"] {`
`320`	`328`	`}`
`321`	`329`	`}`
`322`	`330`	`&.sidebar-minimized {`
`323`		`- .main,`
`324`		`- .app-footer {`
`325`		`- margin-right: if($breakpoint != "lg" and $breakpoint != "xl", $sidebar-width, $sidebar-minimized-width);`
	`331`	`+ @include media-breakpoint-down($breakpoint-mobile-down) {`
	`332`	`+ .main,`
	`333`	`+ .app-footer {`
	`334`	`+ margin-left: $sidebar-width;`
	`335`	`+ }`
	`336`	`+ }`
	`337`	`+ @include media-breakpoint-up($breakpoint-mobile-up) {`
	`338`	`+ .main,`
	`339`	`+ .app-footer {`
	`340`	`+ margin-left: $sidebar-minimized-width;`
	`341`	`+ }`
`326`	`342`	`}`
`327`	`343`	`}`
`328`	`344`	`}`
`@@ -432,7 +448,7 @@ html[dir="rtl"] {`
`432`	`448`	`//`
`433`	`449`	`// Mobile layout`
`434`	`450`	`//`
`435`		`-@include media-breakpoint-down(md) {`
	`451`	`+@include media-breakpoint-down($breakpoint-mobile-down) {`
`436`	`452`	`.app-header {`
`437`	`453`	`position: fixed;`
`438`	`454`	`z-index: $zindex-sticky;`
Original file line number	Diff line number	Diff line change
`@@ -321,7 +321,7 @@`
`321`	`321`	`}`
`322`	`322`	`}`
`323`	`323`
`324`		`-@include media-breakpoint-up(lg) {`
	`324`	`+@include media-breakpoint-up($breakpoint-mobile-up) {`
`325`	`325`	`.sidebar-compact {`
`326`	`326`	`.sidebar {`
`327`	`327`	`.sidebar-nav {`