diff options
Diffstat (limited to 'src/scss/components/_post.scss')
| -rwxr-xr-x | src/scss/components/_post.scss | 44 |
1 files changed, 40 insertions, 4 deletions
diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss index 92a377d..6b25cf0 100755 --- a/src/scss/components/_post.scss +++ b/src/scss/components/_post.scss @@ -71,18 +71,54 @@ } @media #{$large-only} { - .post { - &.pushed { + #main { + // Display bottom bar in small size and push it from the size of the large sidebar + &[data-behavior="1"] .post.pushed, + &[data-behavior="2"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in medium size and push it from the size of the medium sidebar + &[data-behavior="3"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in large size and push it from the size of the large sidebar + &[data-behavior="4"] .post.pushed, + &[data-behavior="5"] .post.pushed { @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); } + // Display bottom bar in large size and push it from the size of the medium sidebar + &[data-behavior="6"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } } } @media #{$xlarge-and-up} { - .post { - &.pushed { + #main { + // Display bottom bar in extra small size and push it from the size of the extra large sidebar + &[data-behavior="1"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in small size and push it from the size of the large sidebar + &[data-behavior="2"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in medium size and push it from the size of the medium sidebar + &[data-behavior="3"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in large size and push it from the size of the extra large sidebar + &[data-behavior="4"] .post.pushed { @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); } + // Display bottom bar in large size and push it from the size of the extra large sidebar + &[data-behavior="5"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + // Display bottom bar in large size and push it from the size of the medium sidebar + &[data-behavior="6"] .post.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } } } |