correct and spritify icon buttons

mozilla-services · Aug 11, 2017 · 4f08f2f · 4f08f2f
1 parent 2b60163
commit 4f08f2f
Show file tree

Hide file tree

Showing 19 changed files with 88 additions and 255 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/static/img/download-dark.svg b/static/img/download-dark.svg
diff --git a/static/img/download-hover.svg b/static/img/download-hover.svg
diff --git a/static/img/download-sprite.svg b/static/img/download-sprite.svg
diff --git a/static/img/flag-active.svg b/static/img/flag-active.svg
diff --git a/static/img/flag-dark.svg b/static/img/flag-dark.svg
diff --git a/static/img/flag-hover.svg b/static/img/flag-hover.svg
diff --git a/static/img/icon-sprite.svg b/static/img/icon-sprite.svg
diff --git a/static/img/landing-icon-32.png b/static/img/landing-icon-32.png
diff --git a/static/img/my-shots.svg b/static/img/my-shots.svg
diff --git a/static/img/share-active.svg b/static/img/share-active.svg
diff --git a/static/img/share-dark.svg b/static/img/share-dark.svg
diff --git a/static/img/share-hover.svg b/static/img/share-hover.svg
diff --git a/static/img/trash-active.svg b/static/img/trash-active.svg