Add PNG versions of the folder icons for IE8 users

IE8 doesn’t support SVG images as CSS backgrounds. We still have users
on IE8, as I saw yesterday.

This commit adds fallback PNG images for these users. The images are
rendered at 1x (because no-one is using IE8 on a retina screen) and
have been run through `pngcrush -brute` for the smallest possible file
size.
This commit is contained in:
Chris Hill-Scott
2018-12-07 10:30:58 +00:00
parent 3eea729c07
commit 9a884a38d7
4 changed files with 18 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 266 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 B

View File

@@ -87,12 +87,18 @@
&-folder {
a:first-child {
display: inline-block;
text-indent: 40px;
background-image: file-url('folder-blue-bold.svg');
background-repeat: no-repeat;
background-size: auto 20px;
background-position: 0px 2px;
@include ie-lte(8) {
background-image: file-url('folder-blue-bold.png');
}
}
}
@@ -134,10 +140,16 @@
vertical-align: top;
&:first-child {
background-image: file-url('folder-blue.svg');
max-width: 33%;
overflow: hidden;
text-overflow: ellipsis;
@include ie-lte(8) {
background-image: file-url('folder-blue.png');
}
}
}
@@ -147,8 +159,14 @@
padding-left: 0;
&:first-child {
background-image: file-url('folder-black.svg');
padding-left: $gutter * 2;
@include ie-lte(8) {
background-image: file-url('folder-black.png');
}
}
}