github/reddit
1
1
Fork 0
mirror of https://github.com/reddit-archive/reddit.git synced 2026-01-10 23:47:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Expando: Use sprites for new expando icons

Browse Source
This commit is contained in:
Matt Lee
2016-02-19 18:56:59 -05:00
parent 95d53d1d79
commit 01ce8b5810
2 changed files with 26 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
r2/Makefile
View File

@@ -86,8 +86,8 @@ clean_ini:
rm $(INIFILES)
#################### CSS file lists
SPRITED_STYLESHEETS += reddit.less compact.css modtools.less
LESS_STYLESHEETS := wiki.less adminbar.less policies.less reddit-embed.less expando.less
SPRITED_STYLESHEETS += reddit.less compact.css modtools.less expando.less
LESS_STYLESHEETS := wiki.less adminbar.less policies.less reddit-embed.less
OTHER_STYLESHEETS := mobile.css highlight.css
#################### Static Files

55
r2/r2/public/static/css/expando.less
View File

@@ -1,50 +1,43 @@
// copied from mixins.less
.hdpi-bg-image(@1x; @2x; @2x-bg-size: 100%; @bg-repeat: no-repeat) {
background-image: @1x;
background-repeat: @bg-repeat;
@media
only screen and (min-resolution: 2dppx),
only screen and (-webkit-min-device-pixel-ratio: 2) {
background-image: @2x;
background-size: @2x-bg-size;
}
}
.thing .entry .expando-button {
background-color: transparent;
cursor: pointer;
height: 20px;
margin: 4px 8px 4px 0;
transition: background-image 0.1s;
width: 20px;
&, &:hover {
background-position: 0 0;
}
&.expanded {
.hdpi-bg-image(
@1x: url('../icon-contract.png'),
@2x: url('../icon-contract_2x.png'));
background-image: url('../icon-contract.png'); /* SPRITE */
}
&.expanded:hover {
.hdpi-bg-image(
@1x: url('../icon-contract-hover.png'),
@2x: url('../icon-contract-hover_2x.png'));
background-image: url('../icon-contract-hover.png'); /* SPRITE */
}
&.collapsed {
.hdpi-bg-image(
@1x: url('../icon-expand.png'),
@2x: url('../icon-expand_2x.png'));
background-image: url('../icon-expand.png'); /* SPRITE */
}
&.collapsed:hover {
.hdpi-bg-image(
@1x: url('../icon-expand-hover.png'),
@2x: url('../icon-expand-hover_2x.png'));
background-image: url('../icon-expand-hover.png'); /* SPRITE */
}
@media
only screen and (min-resolution: 2dppx),
only screen and (-webkit-min-device-pixel-ratio: 2) {
&.expanded {
background-image: url(../icon-contract_2x.png); /* SPRITE pixel-ratio=2 */
}
&.expanded:hover {
background-image: url(../icon-contract-hover_2x.png); /* SPRITE pixel-ratio=2 */
}
&.collapsed {
background-image: url(../icon-expand_2x.png); /* SPRITE pixel-ratio=2 */
}
&.collapsed:hover {
background-image: url(../icon-expand-hover_2x.png); /* SPRITE pixel-ratio=2 */
}
}
}