Fix hover folder icon in IE10/11

Duplicates e0ecc95ac6

Copies the code from the normal folder icon, and manually tweaks the
colour, to also get the benefits of minification.

***

IE 10 supports using SVG[1] but has some buggy behaviour when they’re
used as background images.

Without an explicit width/height it stretches the viewBox of the SVG to
fill the containing element. This causes the content of the file to
display centered within the viewBox.

Explicitly setting the width and height seems to be the thing that fixes
this. Out of the suggested fixes on Stackoverflow[2] this one seems to
be the most straightforward.

1. https://caniuse.com/#feat=svg
2. https://stackoverflow.com/questions/17944354/svg-background-image-position-is-always-centered-in-internet-explorer-despite-b
This commit is contained in:
Chris Hill-Scott
2019-02-05 10:21:08 +00:00
parent 84e458ba78
commit e0d28cf1dd
2 changed files with 2 additions and 22 deletions

View File

@@ -1,11 +1 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 26 20" style="enable-background:new 0 0 26 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#DEE0E2;}
.st1{fill:#0B0C0C;}
</style>
<path class="st0" d="M1.2,18.8V1.3h8.4l1.5,4h13.7v13.5H1.2z"/>
<path class="st1" d="M8.8,2.5l0.9,2.4l0.6,1.6h13.2v11h-21v-15H8.8 M10.5,0H0v20h26V4H12L10.5,0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" viewBox="0 0 26 20"><path fill="#dee0e2" d="M1.2 18.8V1.3h8.4l1.5 4h13.7v13.5z"/><path d="M8.8 2.5l.9 2.4.6 1.6h13.2v11h-21v-15h6.3M10.5 0H0v20h26V4H12l-1.5-4z" fill="#0B0C0C"/></svg>

Before

Width:  |  Height:  |  Size: 588 B

After

Width:  |  Height:  |  Size: 247 B

View File

@@ -1,11 +1 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 26 20" style="enable-background:new 0 0 26 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#DEE0E2;}
.st1{fill:#2B8CC4;}
</style>
<path class="st0" d="M1.2,18.8V1.3h8.4l1.5,4h13.7v13.5H1.2z"/>
<path class="st1" d="M8.8,2.5l0.9,2.4l0.6,1.6h13.2v11h-21v-15H8.8 M10.5,0H0v20h26V4H12L10.5,0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" viewBox="0 0 26 20"><path fill="#dee0e2" d="M1.2 18.8V1.3h8.4l1.5 4h13.7v13.5z"/><path d="M8.8 2.5l.9 2.4.6 1.6h13.2v11h-21v-15h6.3M10.5 0H0v20h26V4H12l-1.5-4z" fill="#2B8CC4"/></svg>

Before

Width:  |  Height:  |  Size: 588 B

After

Width:  |  Height:  |  Size: 247 B