Browse Source

Nicer Instagram selection UX, with some transitions

Alexander Zaytsev 6 years ago
parent
commit
487a06300e
1 changed files with 8 additions and 1 deletions
  1. 8 1
      packages/@uppy/provider-views/src/style.scss

+ 8 - 1
packages/@uppy/provider-views/src/style.scss

@@ -341,6 +341,7 @@
     right: 7px;
     bottom: 7px;
     text-align: center;
+    background-color: $color-black;
   }
 
   .uppy-ProviderBrowserItem-inner:focus {
@@ -352,8 +353,14 @@
   .uppy-ProviderBrowserItem svg {
     width: 100%;
     height: 100%;
-    vertical-align: middle;
     object-fit: cover;
+    opacity: 0.9;
+    transition: opacity 0.1s ease-in-out;
+  }
+
+  .uppy-ProviderBrowserItem--selected img,
+  .uppy-ProviderBrowserItem--selected svg {
+    opacity: 1;
   }
 
   .uppy-ProviderBrowserItem--noPreview .uppy-ProviderBrowserItem-inner {