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

Add envelope for international letters

Browse Source 
International letters aren’t sent by first or second class post. In
keeping with the little touch of skeumorphism, let’s label them with the
commonly recognised marker of international mail instead.
This commit is contained in:
Chris Hill-Scott
2020-05-15 12:24:50 +01:00
parent 336e566d5a
commit 85dbe19611
2 changed files with 74 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/assets/images/envelope-international.svg Normal file
View File

@@ -0,0 +1,70 @@
<?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 277.3 233.2" style="enable-background:new 0 0 277.3 233.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B7A47E;}
.st1{fill:#C4B186;}
.st2{fill:#DEE0E1;}
.st3{fill:#FFFFFF;}
.st4{fill:url(#SVGID_1_);fill-opacity:3.000000e-02;}
.st5{fill:#00629E;}
.st6{fill:none;}
</style>
<g id="Layer_1">
<rect y="0" class="st0" width="277.3" height="233.2"/>
<rect y="3" class="st1" width="274.3" height="230.2"/>
<polyline class="st2" points="277.3,233.2 0,233.2 0,0 "/>
<g>
<path class="st1" d="M209.2,165.9V83.5h-31.9V64.1c4.5,0.1,8.8-0.2,13-1s7.9-2.2,11.3-4.2c3.3-2,6.1-4.6,8.4-7.9
c2.3-3.3,3.8-7.3,4.5-12.2H235v127h-25.8V165.9z"/>
</g>
<polygon class="st3" points="277.3,233.2 0,233.2 0,0 "/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="77.0257" y1="799.1396" x2="122.4226" y2="753.7426" gradientTransform="matrix(1 0 0 1 0 -659.02)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path class="st4" d="M163.8,136.1L72.9,61.4l0.1,74.7H163.8"/>
</g>
<g id="Layer_2">
<polygon class="st5" points="73,61.4 73,28.2 251.7,28.2 251.7,137.7 163.7,137.7 "/>
</g>
<g id="Layer_3">
<path class="st3" d="M237,99.3c-3.8,0-9.3,0-9.3,0s-10.6-16-11.5-17.6c-0.9-1.6-2.1-2-3-2H210l6.4,19.7l-14.4,0.9
c0,0-2.1-5.5-2.3-5.8c-0.4-0.7-1.1-1.4-2.4-1.4s-2.3,0-2.3,0l1.9,8.2c0,0-0.9,1.1-0.9,1.9c0,0.9,0.9,1.8,0.9,1.8l-1.9,8.2
c0,0,1,0,2.3,0s2-0.7,2.4-1.4c0.2-0.3,2.3-5.8,2.3-5.8l14.4,0.9l-6.4,19.7h3.3c0.9,0,2.1-0.4,3-2c0.9-1.6,11.5-17.6,11.5-17.6
s5.5,0,9.3,0s6.2-2.1,6.2-3.9C243.2,101.4,240.8,99.3,237,99.3z"/>
<g>
<rect x="80.7" y="37.2" class="st6" width="162.7" height="32.7"/>
<path class="st3" d="M103.8,60.5l-1.2-3.2H92.1l-1.2,3.3c-0.5,1.3-0.9,2.2-1.2,2.6s-0.9,0.7-1.7,0.7c-0.7,0-1.2-0.2-1.7-0.7
s-0.8-1-0.8-1.6c0-0.4,0.1-0.7,0.2-1.1s0.3-0.9,0.6-1.6l6.6-16.7c0.2-0.5,0.4-1.1,0.7-1.7s0.5-1.2,0.8-1.7s0.7-0.8,1.2-1.1
s1.1-0.4,1.8-0.4c0.7,0,1.3,0.1,1.8,0.4s0.9,0.6,1.2,1.1s0.6,0.9,0.8,1.4s0.5,1.2,0.8,2l6.7,16.6c0.5,1.3,0.8,2.2,0.8,2.8
c0,0.6-0.2,1.1-0.7,1.6s-1.1,0.7-1.8,0.7c-0.4,0-0.8-0.1-1.1-0.2s-0.5-0.3-0.7-0.6s-0.4-0.6-0.6-1.2S104,60.9,103.8,60.5z
M93.5,53.4h7.7l-3.9-10.6L93.5,53.4z"/>
<path class="st3" d="M112.7,60.7V40.4c0-1.1,0.2-1.8,0.7-2.4s1.1-0.8,1.9-0.8c0.8,0,1.4,0.3,1.9,0.8s0.7,1.3,0.7,2.4v20.3
c0,1.1-0.2,1.9-0.7,2.4s-1.1,0.8-1.9,0.8c-0.8,0-1.4-0.3-1.9-0.8S112.7,61.8,112.7,60.7z"/>
<path class="st3" d="M130.8,52.4H129v8.3c0,1.1-0.2,1.9-0.7,2.4s-1.1,0.8-1.9,0.8c-0.8,0-1.5-0.3-1.9-0.8s-0.7-1.3-0.7-2.4V40.9
c0-1.1,0.3-1.9,0.8-2.4s1.3-0.8,2.4-0.8h8.5c1.2,0,2.2,0,3,0.1s1.6,0.3,2.3,0.6c0.8,0.3,1.5,0.8,2.1,1.5s1.1,1.4,1.4,2.2
s0.5,1.7,0.5,2.7c0,1.9-0.5,3.5-1.6,4.6s-2.7,2-4.9,2.4c0.9,0.5,1.8,1.2,2.7,2.2s1.6,2,2.3,3.1s1.2,2.1,1.5,2.9s0.6,1.5,0.6,1.8
c0,0.3-0.1,0.7-0.3,1s-0.5,0.6-0.9,0.8s-0.8,0.3-1.3,0.3c-0.6,0-1.1-0.1-1.5-0.4s-0.7-0.6-1-1c-0.3-0.4-0.7-1-1.2-1.9l-2.1-3.5
c-0.8-1.3-1.4-2.2-2-2.9s-1.2-1.1-1.8-1.4S131.7,52.4,130.8,52.4z M133.8,41.6H129v7.1h4.7c1.3,0,2.3-0.1,3.2-0.3s1.5-0.6,2-1.1
s0.7-1.2,0.7-2.2c0-0.7-0.2-1.3-0.5-1.9s-0.9-1-1.5-1.2C136.8,41.7,135.6,41.6,133.8,41.6z"/>
<path class="st3" d="M167.4,59.6l-4.1-16.4v17.8c0,1-0.2,1.7-0.7,2.2s-1,0.7-1.7,0.7c-0.7,0-1.3-0.2-1.7-0.7s-0.7-1.2-0.7-2.2
V40.5c0-1.1,0.3-1.9,0.9-2.3s1.4-0.6,2.4-0.6h1.6c1,0,1.7,0.1,2.1,0.3s0.8,0.5,1,0.9s0.5,1.2,0.7,2.2l3.7,14.1l3.7-14.1
c0.3-1,0.5-1.8,0.7-2.2s0.5-0.8,1-0.9s1.1-0.3,2.1-0.3h1.6c1,0,1.8,0.2,2.4,0.6s0.9,1.2,0.9,2.3v20.4c0,1-0.2,1.7-0.7,2.2
s-1,0.7-1.8,0.7c-0.7,0-1.3-0.2-1.7-0.7s-0.7-1.2-0.7-2.2V43.1l-4.1,16.4c-0.3,1.1-0.5,1.8-0.7,2.3s-0.5,1-0.9,1.4
s-1.1,0.6-1.9,0.6c-0.6,0-1.1-0.1-1.5-0.4s-0.8-0.6-1-1s-0.4-0.9-0.6-1.4S167.5,60.1,167.4,59.6z"/>
<path class="st3" d="M204.4,60.5l-1.2-3.2h-10.5l-1.2,3.3c-0.5,1.3-0.9,2.2-1.2,2.6s-0.9,0.7-1.7,0.7c-0.7,0-1.2-0.2-1.7-0.7
s-0.8-1-0.8-1.6c0-0.4,0.1-0.7,0.2-1.1s0.3-0.9,0.6-1.6l6.6-16.7c0.2-0.5,0.4-1.1,0.7-1.7s0.5-1.2,0.8-1.7s0.7-0.8,1.2-1.1
s1.1-0.4,1.8-0.4c0.7,0,1.3,0.1,1.8,0.4s0.9,0.6,1.2,1.1s0.6,0.9,0.8,1.4s0.5,1.2,0.8,2l6.7,16.6c0.5,1.3,0.8,2.2,0.8,2.8
c0,0.6-0.2,1.1-0.7,1.6s-1.1,0.7-1.8,0.7c-0.4,0-0.8-0.1-1.1-0.2s-0.5-0.3-0.7-0.6s-0.4-0.6-0.6-1.2S204.6,60.9,204.4,60.5z
M194.1,53.4h7.7l-3.9-10.6L194.1,53.4z"/>
<path class="st3" d="M213.3,60.7V40.4c0-1.1,0.2-1.8,0.7-2.4s1.1-0.8,1.9-0.8c0.8,0,1.4,0.3,1.9,0.8s0.7,1.3,0.7,2.4v20.3
c0,1.1-0.2,1.9-0.7,2.4s-1.1,0.8-1.9,0.8c-0.8,0-1.4-0.3-1.9-0.8S213.3,61.8,213.3,60.7z"/>
<path class="st3" d="M229.5,40.4v18.8h10.6c0.8,0,1.5,0.2,1.9,0.6s0.7,0.9,0.7,1.5c0,0.6-0.2,1.1-0.7,1.5s-1.1,0.6-2,0.6h-12.6
c-1.1,0-2-0.3-2.5-0.8s-0.7-1.3-0.7-2.4V40.4c0-1.1,0.2-1.8,0.7-2.4s1.1-0.8,1.9-0.8c0.8,0,1.4,0.3,1.9,0.8S229.5,39.3,229.5,40.4
z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

4
app/assets/stylesheets/components/letter.scss
View File

@@ -70,6 +70,10 @@ $iso-paper-ratio: 141.42135624%;
background-image: file-url('envelope-2nd-class.svg'); background-image: file-url('envelope-2nd-class.svg');
} }
&-international {
background-image: file-url('envelope-international.svg');
}
.letter-sent &:hover { .letter-sent &:hover {
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;