darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-16 03:10:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix folder icon in IE 10

Browse Source 
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
2018-11-13 13:57:03 +00:00
parent ec58e9baa6
commit e0ecc95ac6
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/images/folder-black.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><path d="M10.3 0H0v20h26V4H12l-1.5-4h-.2z" fill="#dee0e2"/><path d="M9.1 2l1 2.7.5 1.3H24v12H2V2h7.1m1.4-2H0v20h26V4H12l-1.5-4z" fill="#0b0c0c"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" viewBox="0 0 26 20"><path d="M10.3 0H0v20h26V4H12l-1.5-4h-.2z" fill="#dee0e2"/><path d="M9.1 2l1 2.7.5 1.3H24v12H2V2h7.1m1.4-2H0v20h26V4H12l-1.5-4z" fill="#0b0c0c"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 211 B

After

Width:  |  Height:  |  Size: 235 B

2
app/assets/images/folder-blue-bold.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" 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="#005ea5"/></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="#005ea5"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 223 B

After

Width:  |  Height:  |  Size: 247 B

2
app/assets/images/folder-blue.svg
View File

@@ -1,7 +1,7 @@
<?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="blue_outline" 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">
y="0px" viewBox="0 0 26 20" width="26" height="20" style="enable-background:new 0 0 26 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#DEE0E2;}
.st1{fill:#005EA5;}
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 646 B

After

Width:  |  Height:  |  Size: 669 B