add a 1px padding to each sprite image

fixes #137 because browsers rounde the sprite position when zoomed in and that leads to overlaps. A 1px padding around each image combats these overlaps.
This commit is contained in:
Felix Niklas 2014-10-13 10:19:38 +02:00
parent 3f330a2588
commit 18b30e5154
2 changed files with 218 additions and 206 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

View file

@ -898,7 +898,7 @@ ol.tabs li {
}
.dark.cog.icon {
background-position: 0 -76px;
background-position: 0 -77px;
}
.green.plus.icon {
@ -906,19 +906,19 @@ ol.tabs li {
}
.white.plus.icon {
background-position: -20px -76px;
background-position: -20px -77px;
}
.signout.icon {
width: 15px;
height: 19px;
background-position: 0 -96px;
background-position: 0 -98px;
}
.switchView.icon {
width: 19px;
height: 18px;
background-position: -15px -96px;
background-position: -15px -98px;
}
.priority.icon {
@ -963,7 +963,7 @@ ol.tabs li {
.organisation.icon {
height: 13px;
width: 14px;
background-position: 0 -115px;
background-position: 0 -118px;
}
.icon-switch:hover .organisation.icon,
@ -975,79 +975,79 @@ ol.tabs li {
.user.icon {
height: 13px;
width: 14px;
background-position: -14px -115px;
background-position: -15px -118px;
}
.icon-switch:hover .user.icon,
.task.active .user.icon,
.white.user.icon {
background-position: -14px -128px;
background-position: -15px -128px;
}
.note.icon {
height: 13px;
width: 14px;
background-position: -28px -115px;
background-position: -30px -118px;
}
.icon-switch:hover .note.icon,
.task.active .note.icon,
.white.note.icon {
background-position: -28px -128px;
background-position: -30px -128px;
}
.pen.icon {
height: 13px;
width: 14px;
background-position: -42px -115px;
background-position: -45px -118px;
}
.icon-switch:hover .pen.icon,
.task.active .pen.icon,
.white.pen.icon {
background-position: -42px -128px;
background-position: -45px -128px;
}
.important.icon {
height: 13px;
width: 14px;
background-position: -56px -115px;
background-position: -60px -118px;
}
.icon-switch:hover .important.icon,
.task.active .important.icon,
.white.important.icon {
background-position: -56px -128px;
background-position: -60px -128px;
}
.tools.icon {
height: 13px;
width: 14px;
background-position: -70px -115px;
background-position: -75px -118px;
}
.icon-switch:hover .tools.icon,
.task.active .tools.icon,
.white.tools.icon {
background-position: -70px -128px;
background-position: -75px -128px;
}
.clock.icon {
height: 13px;
width: 14px;
background-position: -84px -115px;
background-position: -90px -118px;
}
.icon-switch:hover .clock.icon,
.task.active .clock.icon,
.white.clock.icon {
background-position: -84px -128px;
background-position: -90px -128px;
}
.team.icon {
height: 13px;
width: 20px;
background-position: -98px -115px;
background-position: -105px -118px;
}
.white.team.icon {
background-position: -98px -128px;
background-position: -105px -128px;
}
.channel.icon {
@ -1056,79 +1056,79 @@ ol.tabs li {
}
.email.channel.icon {
background-position: 0 -141px;
background-position: 0 -146px;
}
.received-calls.channel.icon {
background-position: -17px -141px;
background-position: -18px -146px;
}
.outbound-calls.channel.icon {
background-position: -34px -141px;
background-position: -36px -146px;
}
.facebook.channel.icon {
background-position: -51px -141px;
background-position: -54px -146px;
}
.twitter.channel.icon {
background-position: -68px -141px;
background-position: -72px -146px;
}
.gray.email.channel.icon {
background-position: -85px -141px;
background-position: -90px -146px;
}
.gray.received-calls.channel.icon {
background-position: -102px -141px;
background-position: -108px -146px;
}
.gray.outbound-calls.channel.icon {
background-position: -119px -141px;
background-position: -126px -146px;
}
.gray.facebook.channel.icon {
background-position: -136px -141px;
background-position: -144px -146px;
}
.gray.twitter.channel.icon {
background-position: -153px -141px;
background-position: -162px -146px;
}
.gray.note.channel.icon {
background-position: -170px -141px;
background-position: -180px -146px;
}
.gray.phone.channel.icon {
background-position: -187px -141px;
background-position: -198px -146px;
}
.white.email.channel.icon {
background-position: -204px -141px;
background-position: -216px -146px;
}
.white.received-calls.channel.icon {
background-position: -221px -141px;
background-position: -234px -146px;
}
.white.outbound-calls.channel.icon {
background-position: -238px -141px;
background-position: -252px -146px;
}
.white.facebook.channel.icon {
background-position: -255px -141px;
background-position: -270px -146px;
}
.white.twitter.channel.icon {
background-position: -272px -141px;
background-position: -288px -146px;
}
.white.note.channel.icon {
background-position: -289px -141px;
background-position: -306px -146px;
}
.white.phone.channel.icon {
background-position: -306px -141px;
background-position: -324px -146px;
}
.mood.icon {
@ -1137,35 +1137,35 @@ ol.tabs li {
}
.mood.icon.superbad-state {
background-position: 0 -157px;
background-position: 0 -163px;
}
.mood.icon.bad-state {
background-position: -60px -157px;
background-position: -61px -163px;
}
.mood.icon.ok-state {
background-position: -120px -157px;
background-position: -122px -163px;
}
.mood.icon.good-state {
background-position: -180px -157px;
background-position: -183px -163px;
}
.mood.icon.supergood-state {
background-position: -240px -157px;
background-position: -244px -163px;
}
.stopwatch.icon {
width: 77px;
height: 83px;
background-position: 0 -216px;
background-position: 0 -223px;
}
.in-process.icon {
width: 64px;
height: 64px;
background-position: -77px -216px;
background-position: -79px -225px;
}
.in-process.superbad-state,
@ -1196,19 +1196,19 @@ ol.tabs li {
.reopening.icon {
width: 68px;
height: 47px;
background-position: -141px -216px;
background-position: -146px -225px;
}
.paperclip.icon {
width: 31px;
height: 29px;
background-position: -141px -263px;
background-position: -145px -274px;
}
.stat-all-tickets.icon {
width: 48px;
height: 83px;
background-position: -209px -216px;
background-position: -216px -224px;
}
.stat-tickets {
@ -1224,24 +1224,24 @@ ol.tabs li {
margin-bottom: 2px;
}
.stat-ticket.superbad-state {
background-position: -257px -256px;
}
.stat-ticket.bad-state {
background-position: -257px -246px;
}
.stat-ticket.ok-state {
background-position: -257px -236px;
.stat-ticket.supergood-state {
background-position: -265px -223px;
}
.stat-ticket.good-state {
background-position: -257px -226px;
background-position: -265px -235px;
}
.stat-ticket.supergood-state {
background-position: -257px -216px;
.stat-ticket.ok-state {
background-position: -265px -246px;
}
.stat-ticket.bad-state {
background-position: -265px -257px;
}
.stat-ticket.superbad-state {
background-position: -265px -268px;
}
.left.arrow.icon,
@ -1257,19 +1257,19 @@ ol.tabs li {
}
.left.arrow.icon {
background-position: 0 -299px;
background-position: 0 -307px;
}
.right.arrow.icon {
background-position: -8px -299px;
background-position: -9px -307px;
}
.white.left.arrow.icon {
background-position: -16px -299px;
background-position: -18px -307px;
}
.white.right.arrow.icon {
background-position: -24px -299px;
background-position: -27px -307px;
}
.checkbox.icon {
@ -1277,7 +1277,7 @@ ol.tabs li {
margin: 0; /* overwriting bootstrap */
width: 10px;
height: 10px;
background-position: -32px -299px;
background-position: -36px -307px;
}
.white.checkbox.icon {
@ -1285,117 +1285,117 @@ ol.tabs li {
}
:checked + .checkbox.icon {
background-position: -42px -299px;
background-position: -47px -307px;
}
.arrow-right.icon {
width: 12px;
height: 11px;
background-position: -52px -299px;
background-position: -58px -307px;
}
.delete.icon {
width: 9px;
height: 9px;
background-position: -64px -300px;
background-position: -71px -308px;
}
.select-arrow.icon {
width: 12px;
height: 7px;
background-position: -73px -300px;
background-position: -81px -308px;
}
.dark.group.icon {
width: 23px;
height: 24px;
background-position: 0 -311px;
background-position: 0 -320px;
}
.dark.message.icon {
width: 19px;
height: 19px;
background-position: -23px -311px;
background-position: -24px -320px;
}
.dark.person.icon {
width: 11px;
height: 24px;
background-position: -42px -311px;
background-position: -44px -320px;
}
.dark.templates.icon {
width: 19px;
height: 22px;
background-position: -53px -311px;
background-position: -56px -320px;
}
.split.action.icon {
width: 18px;
height: 15px;
background-position: 0 -336px;
background-position: 0 -346px;
}
.reply.action.icon {
width: 14px;
height: 15px;
background-position: -18px -336px;
background-position: -19px -346px;
}
.internal.action.icon,
.public.visibility.icon {
width: 11px;
height: 15px;
background-position: -32px -336px;
background-position: -34px -346px;
}
.public.action.icon,
.internal.visibility.icon {
width: 11px;
height: 15px;
background-position: -43px -336px;
background-position: -46px -346px;
}
.recipients.icon {
width: 16px;
height: 12px;
background-position: -54px -339px;
background-position: -58px -349px;
}
.white.close.icon {
width: 13px;
height: 13px;
background-position: -70px -338px;
background-position: -75px -348px;
}
.close.icon {
width: 13px;
height: 13px;
background-position: -83px -338px;
background-position: -89px -348px;
}
.help.icon {
width: 16px;
height: 16px;
background-position: -96px -335px;
background-position: -103px -345px;
}
.download.icon {
width: 14px;
height: 13px;
background-position: -112px -339px;
background-position: -120px -349px;
}
.checkmark.icon {
width: 16px;
height: 15px;
background-position: -126px -337px;
background-position: -135px -347px;
}
.error.icon {
width: 13px;
height: 13px;
background-position: -143px -339px;
background-position: -153px -349px;
}
.loading.icon {