github/reddit
1
1
Fork 0
mirror of https://github.com/reddit-archive/reddit.git synced 2026-01-29 08:48:18 -05:00
Code Issues Packages Projects Releases Wiki Activity

Use background attachment to position sidebar grippy image.

Browse Source 
Fixed positioning was causing the grippy image to bleed out of the
sidebar when scrolling horizontally on small viewports.
This commit is contained in:
Max Goodman
2013-07-21 19:39:44 -07:00
parent 977076e92c
commit 0e0b0aa218
1 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
r2/r2/public/static/css/reddit.less
View File

@@ -7129,13 +7129,11 @@ body.with-listing-chooser {
&:before {
content: '';
display: block;
position: fixed;
top: 50%;
position: absolute;
width: @lc-grippy-width;
height: @grippy-image-height;
margin-top: -@grippy-image-height / 2;
background-image: url(../sidebar-grippy-hide.png); /* SPRITE */
background-repeat: no-repeat;
height: 100%;
background: url(../sidebar-grippy-hide.png) fixed no-repeat;
background-position: (@lc-width + (@lc-grippy-width - @grippy-image-width) / 2) center;
margin-left: (@lc-grippy-width - @grippy-image-width) / 2;
opacity: .5;
}
@@ -7194,8 +7192,8 @@ body.with-listing-chooser {
width: @lc-grippy-width + @grippy-fudge;
&:before {
background-image: url(../sidebar-grippy-show.png); /* SPRITE */
background-repeat: no-repeat;
background-image: url(../sidebar-grippy-show.png);
background-position: ((@lc-grippy-width - @grippy-image-width) / 2 + 1) center;
margin-left: (@lc-grippy-width - @grippy-image-width) / 2;
width: @lc-grippy-width;
}