diff options
Diffstat (limited to 'src')
-rwxr-xr-x | src/scss/layouts/_bottom-bar.scss | 7 | ||||
-rwxr-xr-x | src/scss/layouts/_header.scss | 10 | ||||
-rwxr-xr-x | src/scss/layouts/_main.scss | 7 | ||||
-rwxr-xr-x | src/scss/utils/_variables.scss | 1 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_bottom-bar.scss | 14 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_header.scss | 11 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_main.scss | 12 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_post-header-cover.scss | 14 | ||||
-rwxr-xr-x | src/scss/utils/mixins/_sidebar.scss | 9 |
9 files changed, 22 insertions, 63 deletions
diff --git a/src/scss/layouts/_bottom-bar.scss b/src/scss/layouts/_bottom-bar.scss index 3a67466..d765623 100755 --- a/src/scss/layouts/_bottom-bar.scss +++ b/src/scss/layouts/_bottom-bar.scss @@ -11,11 +11,6 @@ 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} { @@ -121,4 +116,4 @@ @include bottom-bar-pushed-md; } } -}
\ No newline at end of file +} diff --git a/src/scss/layouts/_header.scss b/src/scss/layouts/_header.scss index bfb3176..6008759 100755 --- a/src/scss/layouts/_header.scss +++ b/src/scss/layouts/_header.scss @@ -18,11 +18,6 @@ -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 @@ -72,9 +67,8 @@ } } // 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 { - margin-top: -#{map-get($header, height)}; + @include prefix(transform, translate3d(0, -#{map-get($header, height)}, 0), 'webkit' 'moz'); } // Push the header from the size of the large sidebar @@ -122,4 +116,4 @@ #header { display: none; } -}
\ No newline at end of file +} diff --git a/src/scss/layouts/_main.scss b/src/scss/layouts/_main.scss index 3fb4486..e310cf3 100755 --- a/src/scss/layouts/_main.scss +++ b/src/scss/layouts/_main.scss @@ -5,11 +5,6 @@ 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 @@ -129,4 +124,4 @@ @include main-pushed-md; } } -}
\ No newline at end of file +} diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss index 5407ac4..3c60521 100755 --- a/src/scss/utils/_variables.scss +++ b/src/scss/utils/_variables.scss @@ -219,7 +219,6 @@ $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 91c7cbb..4552f3b 100755 --- a/src/scss/utils/mixins/_bottom-bar.scss +++ b/src/scss/utils/mixins/_bottom-bar.scss @@ -27,26 +27,20 @@ /// 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 { - margin-left: #{map-get($sidebar, md-screen-width)}; - width: calc(100% - #{map-get($sidebar, md-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); } } /// 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 { - margin-left: #{map-get($sidebar, lg-screen-width)}; - width: calc(100% - #{map-get($sidebar, lg-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); } } /// 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 { - margin-left: #{map-get($sidebar, xlg-screen-width)}; - width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); } -}
\ No newline at end of file +} diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss index b9aecce..4b0cd2f 100755 --- a/src/scss/utils/mixins/_header.scss +++ b/src/scss/utils/mixins/_header.scss @@ -1,22 +1,19 @@ /// Mixin helper to push header from medium sidebar size @mixin header-pushed-md { &.pushed { - margin-left: #{map-get($sidebar, md-screen-width)}; - width: calc(100% - #{map-get($sidebar, md-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); } } /// Mixin helper to push header from large sidebar size @mixin header-pushed-lg { &.pushed { - margin-left: #{map-get($sidebar, lg-screen-width)}; - width: calc(100% - #{map-get($sidebar, lg-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); } } /// Mixin helper to push header from extra large sidebar size @mixin header-pushed-xlg { &.pushed { - margin-left: #{map-get($sidebar, xlg-screen-width)}; - width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); } -}
\ No newline at end of file +} diff --git a/src/scss/utils/mixins/_main.scss b/src/scss/utils/mixins/_main.scss index 226da6f..a74364c 100755 --- a/src/scss/utils/mixins/_main.scss +++ b/src/scss/utils/mixins/_main.scss @@ -28,27 +28,21 @@ /// 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 { - margin-left: #{map-get($sidebar, md-screen-width)}; - width: calc(100% - #{map-get($sidebar, md-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); } } /// 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 { - margin-left: #{map-get($sidebar, lg-screen-width)}; - width: calc(100% - #{map-get($sidebar, lg-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); } } /// 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 { - margin-left: #{map-get($sidebar, xlg-screen-width)}; - width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); } } diff --git a/src/scss/utils/mixins/_post-header-cover.scss b/src/scss/utils/mixins/_post-header-cover.scss index 33d0d7d..b2af42d 100755 --- a/src/scss/utils/mixins/_post-header-cover.scss +++ b/src/scss/utils/mixins/_post-header-cover.scss @@ -27,27 +27,21 @@ /// 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 { - margin-left: #{map-get($sidebar, md-screen-width)}; - width: calc(100% - #{map-get($sidebar, md-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); } } /// 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 { - margin-left: #{map-get($sidebar, lg-screen-width)}; - width: calc(100% - #{map-get($sidebar, lg-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); } } /// 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 { - margin-left: #{map-get($sidebar, xlg-screen-width)}; - width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); + @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); } -}
\ No newline at end of file +} diff --git a/src/scss/utils/mixins/_sidebar.scss b/src/scss/utils/mixins/_sidebar.scss index ef6e5cb..d5ca2ec 100755 --- a/src/scss/utils/mixins/_sidebar.scss +++ b/src/scss/utils/mixins/_sidebar.scss @@ -41,9 +41,8 @@ } } // Used to animate the sidebar (pushed effect) - @include prefix(transition, 'margin-left 0.5s', 'webkit' 'moz'); &.pushed { - margin-left: #{map-get($sidebar, md-screen-width)}; + @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); } } @@ -104,9 +103,8 @@ } } // Used to animate the sidebar (pushed effect) - @include prefix(transition, 'margin-left 0.5s', 'webkit' 'moz'); &.pushed { - margin-left: #{map-get($sidebar, lg-screen-width)}; + @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); } } @@ -196,8 +194,7 @@ } } // Used to animate the sidebar (pushed effect) - @include prefix(transition, 'width 0.5s, margin-left 0.5s', 'webkit' 'moz'); &.pushed { - margin-left: #{map-get($sidebar, xlg-screen-width)}; + @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); } } |