diff options
author | johnsoncodehk <johnsoncodehk@gmail.com> | 2018-07-11 10:44:44 +0300 |
---|---|---|
committer | Thibaud LeprĂȘtre <thibaud.lepretre@gmail.com> | 2018-09-09 13:22:10 +0300 |
commit | 576b1a740639dbf96dc5338267ddd9d376932737 (patch) | |
tree | 3a4fd53af6b204a5c626b44531334a1356f5d2b8 /src | |
parent | 97bbefe8a0c581a96885841c75f8edb7966a04c0 (diff) |
Fix content out of the container when open sidebar
fixes #278
Diffstat (limited to 'src')
-rwxr-xr-x | src/scss/layouts/_bottom-bar.scss | 5 | ||||
-rwxr-xr-x | src/scss/layouts/_header.scss | 8 | ||||
-rwxr-xr-x | src/scss/layouts/_main.scss | 5 | ||||
-rwxr-xr-x | src/scss/utils/_variables.scss | 1 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_bottom-bar.scss | 12 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_header.scss | 9 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_main.scss | 12 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_post-header-cover.scss | 12 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_sidebar.scss | 9 |
9 files changed, 57 insertions, 16 deletions
diff --git a/src/scss/layouts/_bottom-bar.scss b/src/scss/layouts/_bottom-bar.scss index b4d5119..3a67466 100755 --- a/src/scss/layouts/_bottom-bar.scss +++ b/src/scss/layouts/_bottom-bar.scss @@ -11,6 +11,11 @@ z-index: map-get($z-indexes, c-post-bottom-bar); transition: transform .25s ease-in-out; -webkit-transition: -webkit-transform .25s ease-in-out; + + min-width: $main-width - 15px * 2; + @media only screen and (max-width: $main-width - 15px * 2) { + min-width: calc(100% - 15px * 2); + } } @media #{$small-and-down} { diff --git a/src/scss/layouts/_header.scss b/src/scss/layouts/_header.scss index 4760154..bfb3176 100755 --- a/src/scss/layouts/_header.scss +++ b/src/scss/layouts/_header.scss @@ -18,6 +18,11 @@ -webkit-backface-visibility: hidden; -webkit-perspective: 1000; + min-width: $main-width; + @media only screen and (max-width: $main-width) { + min-width: 100%; + } + #btn-open-sidebar { position: absolute; // vertical center @@ -67,8 +72,9 @@ } } // Class used to swipe to the top the header on small screen when the user scroll down + @include prefix(transition, 'margin-top 0.5s, margin-left 0.5s, width 0.5s', 'webkit' 'moz'); &.header-up { - @include prefix(transform, translate3d(0, -#{map-get($header, height)}, 0), 'webkit' 'moz'); + margin-top: -#{map-get($header, height)}; } // Push the header from the size of the large sidebar diff --git a/src/scss/layouts/_main.scss b/src/scss/layouts/_main.scss index 782ae58..3fb4486 100755 --- a/src/scss/layouts/_main.scss +++ b/src/scss/layouts/_main.scss @@ -5,6 +5,11 @@ transition: transform .25s ease-in-out; -webkit-transition: -webkit-transform .25s ease-in-out; + min-width: $main-width; + @media only screen and (max-width: $main-width) { + min-width: 100%; + } + &.hasCover { // Set `padding-top` to `50px` when there is a cover image on page and // if there is a cover caption or diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss index 3c60521..5407ac4 100755 --- a/src/scss/utils/_variables.scss +++ b/src/scss/utils/_variables.scss @@ -219,6 +219,7 @@ $main-content: ( 'max-width': 750px, 'padding-right-left': 20px, ); +$main-width: map-get($main-content, max-width) + map-get($main-content, padding-right-left) * 2; // Mardown // These variables are use to have headings smaller than general headings title diff --git a/src/scss/utils/mixins/_bottom-bar.scss b/src/scss/utils/mixins/_bottom-bar.scss index 32f7131..91c7cbb 100755 --- a/src/scss/utils/mixins/_bottom-bar.scss +++ b/src/scss/utils/mixins/_bottom-bar.scss @@ -27,20 +27,26 @@ /// Mixin helper to pushed bottom bar from medium sidebar size @mixin bottom-bar-pushed-md { + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, md-screen-width)}; + width: calc(100% - #{map-get($sidebar, md-screen-width)}); } } /// Mixin helper to pushed bottom bar from large sidebar size @mixin bottom-bar-pushed-lg { + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, lg-screen-width)}; + width: calc(100% - #{map-get($sidebar, lg-screen-width)}); } } /// Mixin helper to pushed bottom bar from extra large sidebar size @mixin bottom-bar-pushed-xlg { + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, xlg-screen-width)}; + width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); } }
\ No newline at end of file diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss index 028275c..b9aecce 100755 --- a/src/scss/utils/mixins/_header.scss +++ b/src/scss/utils/mixins/_header.scss @@ -1,19 +1,22 @@ /// Mixin helper to push header from medium sidebar size @mixin header-pushed-md { &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, md-screen-width)}; + width: calc(100% - #{map-get($sidebar, md-screen-width)}); } } /// Mixin helper to push header from large sidebar size @mixin header-pushed-lg { &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, lg-screen-width)}; + width: calc(100% - #{map-get($sidebar, lg-screen-width)}); } } /// Mixin helper to push header from extra large sidebar size @mixin header-pushed-xlg { &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, xlg-screen-width)}; + width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); } }
\ No newline at end of file diff --git a/src/scss/utils/mixins/_main.scss b/src/scss/utils/mixins/_main.scss index a74364c..226da6f 100755 --- a/src/scss/utils/mixins/_main.scss +++ b/src/scss/utils/mixins/_main.scss @@ -28,21 +28,27 @@ /// Mixin helper to push `main` div from medium sidebar size @mixin main-pushed-md { + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, md-screen-width)}; + width: calc(100% - #{map-get($sidebar, md-screen-width)}); } } /// Mixin helper to push `main` div from large sidebar size @mixin main-pushed-lg { + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, lg-screen-width)}; + width: calc(100% - #{map-get($sidebar, lg-screen-width)}); } } /// Mixin helper to push `main` div from extra large sidebar size @mixin main-pushed-xlg { + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, xlg-screen-width)}; + width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); } } diff --git a/src/scss/utils/mixins/_post-header-cover.scss b/src/scss/utils/mixins/_post-header-cover.scss index fd805f9..33d0d7d 100755 --- a/src/scss/utils/mixins/_post-header-cover.scss +++ b/src/scss/utils/mixins/_post-header-cover.scss @@ -27,21 +27,27 @@ /// Mixin helper to pushed post header cover from medium sidebar size @mixin post-header-cover-pushed-md { + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, md-screen-width)}; + width: calc(100% - #{map-get($sidebar, md-screen-width)}); } } /// Mixin helper to pushed post header cover from large sidebar size @mixin post-header-cover-pushed-lg { + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, lg-screen-width)}; + width: calc(100% - #{map-get($sidebar, lg-screen-width)}); } } /// Mixin helper to pushed post header cover from extra large sidebar size @mixin post-header-cover-pushed-xlg { + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, xlg-screen-width)}; + width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); } }
\ No newline at end of file diff --git a/src/scss/utils/mixins/_sidebar.scss b/src/scss/utils/mixins/_sidebar.scss index d5ca2ec..e68fd7a 100755 --- a/src/scss/utils/mixins/_sidebar.scss +++ b/src/scss/utils/mixins/_sidebar.scss @@ -41,8 +41,9 @@ } } // Used to animate the sidebar (pushed effect) + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, md-screen-width)}; } } @@ -103,8 +104,9 @@ } } // Used to animate the sidebar (pushed effect) + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, lg-screen-width)}; } } @@ -194,7 +196,8 @@ } } // Used to animate the sidebar (pushed effect) + @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + margin-left: #{map-get($sidebar, xlg-screen-width)}; } } |