Created CSS sprites from all non-animated images using http://draeton.github.io/stitches/ for now (let’s see if necessary to implement in build process)

This commit is contained in:
Tobi Schäfer 2015-01-03 11:18:44 +01:00
parent d87cd04e82
commit 509f2d1013
36 changed files with 182 additions and 32 deletions

View file

@ -3,3 +3,10 @@
@import "node_modules/uikit/themes/almost-flat/form-password";
@import (inline) "node_modules/codemirror/lib/codemirror.css";
@import "./sprites";
.av-sprite {
display: inline-block;
vertical-align: middle;
}

139
build/client/sprites.less Normal file
View file

@ -0,0 +1,139 @@
.stitches-av-sprite(@x: 0, @y: 0, @width: 0, @height: 0) {
background-position: @x @y;
width: @width;
height: @height;
}
.av-sprite {
background-image: url(/static/img/spritesheet.png);
background-repeat: no-repeat;
display: block;
&.av-sprite-ant {
.stitches-av-sprite(-5px, -5px, 26px, 15px);
}
&.av-sprite-ant-icon {
.stitches-av-sprite(-41px, -5px, 16px, 16px);
}
&.av-sprite-ant-white {
.stitches-av-sprite(-67px, -5px, 26px, 15px);
}
&.av-sprite-bullet {
.stitches-av-sprite(-103px, -5px, 3px, 10px);
}
&.av-sprite-dot {
.stitches-av-sprite(-116px, -5px, 30px, 30px);
}
&.av-sprite-facebook {
.stitches-av-sprite(-156px, -5px, 15px, 15px);
}
&.av-sprite-facebook_round {
.stitches-av-sprite(-181px, -5px, 33px, 32px);
}
&.av-sprite-github {
.stitches-av-sprite(-224px, -5px, 30px, 30px);
}
&.av-sprite-gmail {
.stitches-av-sprite(-264px, -5px, 30px, 30px);
}
&.av-sprite-google {
.stitches-av-sprite(-304px, -5px, 15px, 15px);
}
&.av-sprite-google_round {
.stitches-av-sprite(-329px, -5px, 33px, 32px);
}
&.av-sprite-headbg {
.stitches-av-sprite(-372px, -5px, 3px, 52px);
}
&.av-sprite-helma {
.stitches-av-sprite(-385px, -5px, 41px, 24px);
}
&.av-sprite-hop {
.stitches-av-sprite(-436px, -5px, 124px, 25px);
}
&.av-sprite-linkedin {
.stitches-av-sprite(-570px, -5px, 30px, 30px);
}
&.av-sprite-manage {
.stitches-av-sprite(-610px, -5px, 50px, 13px);
}
&.av-sprite-menu {
.stitches-av-sprite(-610px, -28px, 36px, 13px);
}
&.av-sprite-pixel {
.stitches-av-sprite(-670px, -5px, 1px, 1px);
}
&.av-sprite-recent {
.stitches-av-sprite(-5px, -51px, 123px, 13px);
}
&.av-sprite-rss {
.stitches-av-sprite(-681px, -5px, 16px, 16px);
}
&.av-sprite-rss_round {
.stitches-av-sprite(-656px, -31px, 33px, 32px);
}
&.av-sprite-sandbox {
.stitches-av-sprite(-385px, -45px, 189px, 68px);
}
&.av-sprite-smallchaos {
.stitches-av-sprite(-138px, -73px, 107px, 29px);
}
&.av-sprite-smallstraight {
.stitches-av-sprite(-255px, -73px, 107px, 24px);
}
&.av-sprite-stackoverflow {
.stitches-av-sprite(-584px, -73px, 30px, 30px);
}
&.av-sprite-status {
.stitches-av-sprite(-624px, -73px, 48px, 13px);
}
&.av-sprite-tumblr {
.stitches-av-sprite(-5px, -96px, 30px, 30px);
}
&.av-sprite-twitter {
.stitches-av-sprite(-45px, -96px, 30px, 30px);
}
&.av-sprite-twitter {
.stitches-av-sprite(-156px, -31px, 15px, 15px);
}
&.av-sprite-twitter_round {
.stitches-av-sprite(-85px, -96px, 33px, 33px);
}
&.av-sprite-webloghead {
.stitches-av-sprite(-5px, -139px, 700px, 53px);
}
&.av-sprite-xmlbutton {
.stitches-av-sprite(-624px, -96px, 36px, 14px);
}
}