From e56433e1f881ace92d0f5510f12ccac4fb33e238 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 23 Jan 2017 13:02:36 +0000
Subject: [PATCH] Fix ticks and crosses on team page in IE8
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ticks and crosses on the team page are served bigger than actual
size (128×128px). They are then resized using CSS3 `background-size`
to their displayed size (19px).

The reason for doing this is so they display crisply on retina screens.

IE8 doesn’t support `background-size` (see
http://caniuse.com/#feat=background-img-opts). This means that the ticks
and crosses get show at their original size (way too big).

This commit adds resized versions of the ticks and crosses which are
then served to these older browsers only.
---
 app/assets/images/cross-grey-16px.png         | Bin 0 -> 239 bytes
 app/assets/images/tick-16px.png               | Bin 0 -> 213 bytes
 app/assets/images/tick-white-16px.png         | Bin 0 -> 190 bytes
 app/assets/stylesheets/components/banner.scss |   3 +++
 .../stylesheets/components/tick-cross.scss    |  20 +++++++++++++++++-
 5 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/images/cross-grey-16px.png
 create mode 100644 app/assets/images/tick-16px.png
 create mode 100644 app/assets/images/tick-white-16px.png

diff --git a/app/assets/images/cross-grey-16px.png b/app/assets/images/cross-grey-16px.png
new file mode 100644
index 0000000000000000000000000000000000000000..76b609c603356b1c4ba33a53ec76f35541dc64c8
GIT binary patch
literal 239
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!WQl7;NpOBzNqJ&XDuZK6ep0G}
zXKrG8YEWuoN@d~6R2!fo(Ey(i*Zl_%@7sT9-+@DW_Z{53|KOgz2Y`s__pEb31?(k3
ze!>62fI-Te*$pTZ>*?YcQgJJ$Ka!6@k;6G!?0x-{iMb}<oFA~>>iEj>G2^RML&6p|
z&j&0`H}oD!YdBp?HH+FQC}-^7b@hyJw^>F)@gb%%pPm0A#IAKr{q($Z>Y3Xv_s;)p
dh@Q{D%y6}dxlo|Kd^XS`22WQ%mvv4FO#l|FU3dTh

literal 0
HcmV?d00001

diff --git a/app/assets/images/tick-16px.png b/app/assets/images/tick-16px.png
new file mode 100644
index 0000000000000000000000000000000000000000..3679ae53ffe04eed333b22fbfc4c0267e28d0391
GIT binary patch
literal 213
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!WQl7;NpOBzNqJ&XDuZK6ep0G}
zXKrG8YEWuoN@d~6R2!fop#Yx{*H>TPUwm=r(#t!7T^<Zg)_e9IaNMqx0hDDc3Gxg6
z4+0FE_b=HG6mj=-aSW-rRnvcvk3oUMY2}0e^_Im?&os}e@mc2Jn!)?YJmVBwtVWHQ
zn$T>+nztJbY$VoLvqe8icb)U{@|h}i@99^!+-2fnD0<5>Ln)&m7HA}cr>mdKI;Vst
E0M;i>ivR!s

literal 0
HcmV?d00001

diff --git a/app/assets/images/tick-white-16px.png b/app/assets/images/tick-white-16px.png
new file mode 100644
index 0000000000000000000000000000000000000000..e743f0a8ddae376d50c0ebdde45a92054d42bc3d
GIT binary patch
literal 190
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!WQl7;NpOBzNqJ&XDuZK6ep0G}
zXKrG8YEWuoN@d~6R2!fowg8_H*Z=?j@7a4Gxbv7lP=u)@$S?Rm!_(~sUO=9Mr;B4q
z#jTqDi(Cu}9L)Lu|6dl(deQVvY2G4fqmQfxjM1_JoBrjntT8+l^}6Jw!><{8Ka_tz
jx54gB#Uk~$LJ16U%?xW}9#-!Hn#JJh>gTe~DWM4f^mjt(

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index 38fa4d8c0..fcb030f17 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -30,6 +30,9 @@
 .banner-with-tick {
   padding: $gutter-half ($gutter + $gutter-half);
   background-image: file-url('tick-white.png');
+  @include ie-lte(8) {
+    background-image: file-url('tick-white-16px.png');
+  }
   background-size: 19px;
   background-repeat: no-repeat;
   background-position: $gutter-half $gutter-half;
diff --git a/app/assets/stylesheets/components/tick-cross.scss b/app/assets/stylesheets/components/tick-cross.scss
index a44aa023c..b3a90660a 100644
--- a/app/assets/stylesheets/components/tick-cross.scss
+++ b/app/assets/stylesheets/components/tick-cross.scss
@@ -1,23 +1,41 @@
 %tick-cross {
+
   @include core-16;
   display: inline-block;
   background-size: 19px 19px;
   background-repeat: no-repeat;
   background-position: 0 0;
   padding: 1px 0 0 25px;
+
+  @include ie-lte(8) {
+    background-position: 0 3px;
+  }
+
 }
 
 .tick-cross {
 
   &-tick {
+
     @extend %tick-cross;
     background-image: file-url('tick.png');
+
+    @include ie-lte(8) {
+      background-image: file-url('tick-16px.png');
+    }
+
   }
 
   &-cross {
+
     @extend %tick-cross;
-    background-image: file-url('cross-grey.png');
     color: $secondary-text-colour;
+    background-image: file-url('cross-grey.png');
+
+    @include ie-lte(8) {
+      background-image: file-url('cross-grey-16px.png');
+    }
+
   }
 
   &-list {