From 4f08f2fd9fc013863a611cfdc14382d8262947f9 Mon Sep 17 00:00:00 2001 From: John Gruen Date: Fri, 11 Aug 2017 12:21:59 +0200 Subject: [PATCH] correct and spritify icon buttons --- static/css/frame.scss | 49 +------------------------ static/css/partials/_buttons.scss | 59 ++++++++++++++++++++++++++++++ static/css/shot-index.scss | 56 +++------------------------- static/img/download-active.svg | 11 ------ static/img/download-dark.svg | 11 ------ static/img/download-hover.svg | 11 ------ static/img/download-sprite.svg | 20 ++++++++++ static/img/flag-active.svg | 13 ------- static/img/flag-dark.svg | 13 ------- static/img/flag-hover.svg | 13 ------- static/img/icon-sprite.svg | 1 + static/img/landing-icon-32.png | Bin 684 -> 0 bytes static/img/my-shots.svg | 17 --------- static/img/share-active.svg | 12 ------ static/img/share-dark.svg | 12 ------ static/img/share-hover.svg | 12 ------ static/img/trash-active.svg | 11 ------ static/img/trash-dark.svg | 11 ------ static/img/trash-hover.svg | 11 ------ 19 files changed, 88 insertions(+), 255 deletions(-) delete mode 100644 static/img/download-active.svg delete mode 100644 static/img/download-dark.svg delete mode 100644 static/img/download-hover.svg create mode 100644 static/img/download-sprite.svg delete mode 100644 static/img/flag-active.svg delete mode 100644 static/img/flag-dark.svg delete mode 100644 static/img/flag-hover.svg create mode 100644 static/img/icon-sprite.svg delete mode 100644 static/img/landing-icon-32.png delete mode 100644 static/img/my-shots.svg delete mode 100644 static/img/share-active.svg delete mode 100644 static/img/share-dark.svg delete mode 100644 static/img/share-hover.svg delete mode 100644 static/img/trash-active.svg delete mode 100644 static/img/trash-dark.svg delete mode 100644 static/img/trash-hover.svg diff --git a/static/css/frame.scss b/static/css/frame.scss index 152d500b56..31701e5a33 100644 --- a/static/css/frame.scss +++ b/static/css/frame.scss @@ -202,8 +202,10 @@ } } +// TODO: investigate favicons not appearing on dev, stage and prod .favicon { background-size: 16px 16px; + display: none; height: 16px; margin-right: 6px; width: 16px; @@ -244,50 +246,3 @@ #clip-image-context { display: none; } - -.trash, -.flag, -.share { - background-size: $grid-unit $grid-unit; - background-repeat: no-repeat; - background-position: center center; - margin-right: $grid-unit * 0.5; - transition: background-image 150ms $bezier; -} - -.trash { - background-image: url("../img/trash-dark.svg"); - - &:hover { - background-image: url("../img/trash-hover.svg"); - } - - &:active { - background-image: url("../img/trash-active.svg"); - } -} - -.share { - background-image: url("../img/share-dark.svg"); - - &:hover { - background-image: url("../img/share-hover.svg"); - } - - &:active, - &.active { - background-image: url("../img/share-active.svg"); - } -} - -.flag { - background-image: url("../img/flag-dark.svg"); - - &:hover { - background-image: url("../img/flag-hover.svg"); - } - - &:active { - background-image: url("../img/flag-active.svg"); - } -} diff --git a/static/css/partials/_buttons.scss b/static/css/partials/_buttons.scss index 2afeeb597e..dabb2fa3e4 100644 --- a/static/css/partials/_buttons.scss +++ b/static/css/partials/_buttons.scss @@ -69,4 +69,63 @@ background: $light-active; } } + + &.download, + &.trash, + &.share, + &.flag { + background-image: url("../img/icon-sprite.svg"); + background-size: $grid-unit * 24 $grid-unit * 2; + background-repeat: no-repeat; + background-position: 0 0; + margin-right: $grid-unit * 0.5; + transition: background-color 150ms $bezier; + } + + &.download { + &:hover { + background-position: -2 * $grid-unit 0; + } + + &:active { + background-position: -4 * $grid-unit 0; + } + } + + &.share { + background-position: -6 * $grid-unit 0; + + &:hover { + background-position: -8 * $grid-unit 0; + } + + &:active, + &.active { + background-position: -10 * $grid-unit 0; + } + } + + &.trash { + background-position: -12 * $grid-unit 0; + + &:hover { + background-position: -14 * $grid-unit 0; + } + + &:active { + background-position: -16 * $grid-unit 0; + } + } + + &.flag { + background-position: -18 * $grid-unit 0; + + &:hover { + background-position: -20 * $grid-unit 0; + } + + &:active { + background-position: -22 * $grid-unit 0; + } + } } diff --git a/static/css/shot-index.scss b/static/css/shot-index.scss index 51a1081c69..617cf1346b 100644 --- a/static/css/shot-index.scss +++ b/static/css/shot-index.scss @@ -164,6 +164,7 @@ h1 { .shot-image-container { background-size: cover; + box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05) inset; } &.square .shot-image-container { @@ -180,8 +181,8 @@ h1 { &.deleted { opacity: 0; - transform: scale(0); - transition: transform 250ms $bezier, opacity 250ms $bezier; + transform: scale(.5); + transition: transform 500ms $bezier, opacity 500ms $bezier; } @@ -203,11 +204,13 @@ h1 { .link-container { @include flex-container(row, flex-start, center); + // TODO: investigate favicons not appearing on dev, stage and prod .favicon { + background-size: 16px 16px; + display: none; flex: 0 0 16px; height: 16px; margin-right: 6px; - background-size: 16px 16px; } .shot-url { @@ -223,53 +226,6 @@ h1 { height: 45px; margin: 12px; } - - .download, - .trash, - .share { - background-size: $grid-unit $grid-unit; - background-repeat: no-repeat; - background-position: center center; - margin-right: $grid-unit * 0.5; - transition: background-image 150ms $bezier; - } - - .trash { - background-image: url("../img/trash-dark.svg"); - - &:hover { - background-image: url("../img/trash-hover.svg"); - } - - &:active { - background-image: url("../img/trash-active.svg"); - } - } - - .share { - background-image: url("../img/share-dark.svg"); - - &:hover { - background-image: url("../img/share-hover.svg"); - } - - &:active, - &.active { - background-image: url("../img/share-active.svg"); - } - } - - .download { - background-image: url("../img/download-dark.svg"); - - &:hover { - background-image: url("../img/download-hover.svg"); - } - - &:active { - background-image: url("../img/download-active.svg"); - } - } } .preferences { diff --git a/static/img/download-active.svg b/static/img/download-active.svg deleted file mode 100644 index 3d33143b12..0000000000 --- a/static/img/download-active.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/static/img/download-dark.svg b/static/img/download-dark.svg deleted file mode 100644 index 5f4816b214..0000000000 --- a/static/img/download-dark.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/static/img/download-hover.svg b/static/img/download-hover.svg deleted file mode 100644 index ca1e9e0e82..0000000000 --- a/static/img/download-hover.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/static/img/download-sprite.svg b/static/img/download-sprite.svg new file mode 100644 index 0000000000..096b290dc5 --- /dev/null +++ b/static/img/download-sprite.svg @@ -0,0 +1,20 @@ + + + + dl-sprite + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/flag-active.svg b/static/img/flag-active.svg deleted file mode 100644 index 89f855fee0..0000000000 --- a/static/img/flag-active.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - diff --git a/static/img/flag-dark.svg b/static/img/flag-dark.svg deleted file mode 100644 index 42cb719d02..0000000000 --- a/static/img/flag-dark.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - diff --git a/static/img/flag-hover.svg b/static/img/flag-hover.svg deleted file mode 100644 index 6596d4adcb..0000000000 --- a/static/img/flag-hover.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - diff --git a/static/img/icon-sprite.svg b/static/img/icon-sprite.svg new file mode 100644 index 0000000000..c0dad62b66 --- /dev/null +++ b/static/img/icon-sprite.svg @@ -0,0 +1 @@ +icon-sprite \ No newline at end of file diff --git a/static/img/landing-icon-32.png b/static/img/landing-icon-32.png deleted file mode 100644 index eb6eaacb1565e9c88d33b2693d49279452ff5a78..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 684 zcmV;d0#p5oP)d5zPpW#jH>!xNfS&+eH~%Hz=9Y2!+;x+O@9;sFZh^&F3y^lU{(;Vmndtj}qMW}$k{UUP4!YPnk0o=E^di1r%#)Sg+sC3ha zYq40n;E1jTS1HrTdDF<@Rlq%S*-M4BidYt$>#_^Ng##Z(4tfX1J|jeA1gvV@G*i_@ zm<89QVJt0k1I>X+#lD>>TSU{)ZZQg6(MA$8^}YstX(U(Fa)DL26nG63IojM0U{;}I zQemBes!p3o?#u-(qdPT|Kh|v9n8^=q3(>XGtBVOAXjduF#D+Hi(k9SEWC0Yax@zKr zwrp4@OI4j#xTw+{=PYm~^CM|EaNtwmcMu;#U~dsSXb;% zfHx6Yh)6G12@g(zi_X|S*ao+n)diZd-@HvVEG^(~pL>7VbJzo{8am$GdWpZ0<+Q0O zjpgnk0BFo_SJ*beQr`!mh@2iQm`W>*&E#IjLEyFR{SUy%NGdhHX~l-ifDL_}fAv2V zpXe8Qz(1b_{$>;4kBv!${cZui4cqe6ChOYr3s$?)-|?9Ziv~7K>nQaT^86nYCo?Lm ShDa;`0000 - - - - - - - - - - - - - diff --git a/static/img/share-active.svg b/static/img/share-active.svg deleted file mode 100644 index 48a06827fc..0000000000 --- a/static/img/share-active.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - diff --git a/static/img/share-dark.svg b/static/img/share-dark.svg deleted file mode 100644 index 548ef80b9a..0000000000 --- a/static/img/share-dark.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - diff --git a/static/img/share-hover.svg b/static/img/share-hover.svg deleted file mode 100644 index 6581cee372..0000000000 --- a/static/img/share-hover.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - diff --git a/static/img/trash-active.svg b/static/img/trash-active.svg deleted file mode 100644 index edac3b272a..0000000000 --- a/static/img/trash-active.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/static/img/trash-dark.svg b/static/img/trash-dark.svg deleted file mode 100644 index bf0054cf80..0000000000 --- a/static/img/trash-dark.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/static/img/trash-hover.svg b/static/img/trash-hover.svg deleted file mode 100644 index 88dfb51bd6..0000000000 --- a/static/img/trash-hover.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - -