From 18b30e51544b7c250c2c9f82b5fd7675c0ec42ee Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 13 Oct 2014 10:19:38 +0200 Subject: [PATCH] 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. --- app/assets/images/sprite.svg | 254 +++++++++++++------------ app/assets/stylesheets/zammad.css.scss | 170 ++++++++--------- 2 files changed, 218 insertions(+), 206 deletions(-) diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg index 885b2d569..0ddbcd851 100644 --- a/app/assets/images/sprite.svg +++ b/app/assets/images/sprite.svg @@ -1,58 +1,80 @@ - + sprite Created with Sketch (http://www.bohemiancoding.com/sketch) - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + @@ -85,83 +107,73 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index b3cd93b2e..695209254 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -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 {