Remove hover shadow for links, improve hover style for hoverable avatars

dmstern · Nov 5, 2018 · 493faea · 493faea
1 parent ae053d9
commit 493faea
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
@@ -42,5 +42,4 @@ $grid-breakpoints: (
 
 $mdi2faScaleFactor: 20/24;
 
-$shadow-focused: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-  0 1px 5px 0 rgba(0, 0, 0, 0.12);
+$shadow-floating: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
diff --git a/src/components/PackageDetailItem.vue b/src/components/PackageDetailItem.vue
@@ -49,10 +49,13 @@ export default class PackageDetailItem extends Vue {
   a:not([href='#']),
   .v-avatar {
     margin-right: 0.5em;
-    transition: $transition-smooth;
+    transition: $transition-fast;
+  }
 
+  .v-avatar {
     &:hover {
-      box-shadow: $shadow-focused;
+      box-shadow: $shadow-floating;
+      transform: scale(1.1);
     }
   }
 }