diff --git a/images/paperclip.png b/images/paperclip.png deleted file mode 100644 index 7777bfda..00000000 Binary files a/images/paperclip.png and /dev/null differ 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 @@ + \ 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;