From 4f57dff1e62f0ab781d67e7c2c6797a391a4411f Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 1 Apr 2016 14:46:04 -0700
Subject: [PATCH] Use svg for paperclip icon

// FREEBIE
---
 images/paperclip.png     | Bin 531 -> 0 bytes
 images/paperclip.svg     |   1 +
 stylesheets/_global.scss |  11 +++++++++--
 stylesheets/manifest.css |  13 ++++++++++---
 4 files changed, 20 insertions(+), 5 deletions(-)
 delete mode 100644 images/paperclip.png
 create mode 100644 images/paperclip.svg

diff --git a/images/paperclip.png b/images/paperclip.png
deleted file mode 100644
index 7777bfda2f17d81575c5a6f1cf7ee84478405c08..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 531
zcmV+u0_^>XP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-wX{G84C@a^y2^k0ia1l
zK~zY`<<+}uRZ$Sd;V;2wA>tztD-|p?kWNUEA|O_lDk3O|s30iF5D<cmSY$!0e1L*j
zM$k%75dtdM2|fx5Dr#k6<zJx95iXZ|b5D{=+|}mH%x|4Dv(Dc9cdM$Fl|QsxcoJ1L
zgX7qYH@J}G^Qr_o;P0^yFYp~lu?`bSUU%26Stk4g_ToU2=S}!TRei-n?C7o?UIBcn
z1O9i-V6>`sFH4{ge4(mtR@MHFq5o=1HnbL40)7kUa0rsXG=3-f*lGp?;Ab(L<Z_cc
zj|rUa#Ts5Ae7XaE7&A%k4is1g{AyK=wE7RK>In{Zz^~)t0QgDV!+4UnJp~#!jNu(F
zC7G+L?f8isNzM;|zf3aOw?&N`jy3zaMsQmbe$@uv>zo?uYR^0-lZ<ve`+}W~*S9VO
zZ(edqoBqH^SKG#M1$%Hm$)mRLUNbm=XE>7NL8r4i@>;|Dxo8o)FqUMoD|QCA+roRz
z0Jh*$GvLQ~iuKL;KaPbYQ*Ge=z5q627N?p$e8aUQciO^RU5iz<sjAkl^veAA*B{-}
V49AMN1YrOG002ovPDHLkV1maF=A{4t

diff --git a/images/paperclip.svg b/images/paperclip.svg
new file mode 100644
index 00000000..357e2bf2
--- /dev/null
+++ b/images/paperclip.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M15 36C8.92 36 4 31.07 4 25s4.92-11 11-11h21c4.42 0 8 3.58 8 8s-3.58 8-8 8H19c-2.76 0-5-2.24-5-5s2.24-5 5-5h15v3H19c-1.1 0-2 .89-2 2s.9 2 2 2h17c2.76 0 5-2.24 5-5s-2.24-5-5-5H15c-4.42 0-8 3.58-8 8s3.58 8 8 8h19v3H15z"/></svg>
\ No newline at end of file
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index fafa871a..fdfd76b6 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -143,12 +143,19 @@ button.back {
   position: relative;
   .choose-file {
     cursor: pointer;
+    padding-left: 10px;
   }
 
   .paperclip {
-    width: 36px;
+    width: $button-height;
     height: 100%;
-    background: url('/images/paperclip.png') no-repeat center center;
+    @include color-svg('/images/paperclip.svg', $grey);
+    opacity: 0.5;
+    transform: rotateZ(-45deg);
+
+    &:hover {
+      opacity: 1.0;
+    }
   }
 
   input[type=file] {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index c5fbd36a..a3d8349f 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -150,11 +150,18 @@ button.back {
 .file-input {
   position: relative; }
   .file-input .choose-file {
-    cursor: pointer; }
+    cursor: pointer;
+    padding-left: 10px; }
   .file-input .paperclip {
-    width: 36px;
+    width: 24px;
     height: 100%;
-    background: url("/images/paperclip.png") no-repeat center center; }
+    -webkit-mask: url("/images/paperclip.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #616161;
+    opacity: 0.5;
+    transform: rotateZ(-45deg); }
+    .file-input .paperclip:hover {
+      opacity: 1.0; }
   .file-input input[type=file] {
     display: none;
     position: absolute;