@transferwise/neptune-css 0.0.0-experimental-00df4a6 → 0.0.0-experimental-0348e0b

package/dist/css/droppable.css

@@ -39,8 +39,6 @@
   border-color: transparent !important;
 }.np-theme-personal .droppable-area.tw-droppable-md {
   min-height: 242px;
-}.np-theme-personal .droppable-area.droppable-dropping .droppable-default-card {
-  opacity: 0;
 }.np-theme-personal .droppable-area.droppable-dropping .tw-icon-plus svg {
   width: 24px;
   width: var(--size-24);
@@ -54,8 +52,6 @@
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   min-height: 315px;
-}.np-theme-personal .droppable-area.droppable-complete.droppable-dropping .droppable-card:first-child {
-  opacity: 0;
 }.np-theme-personal .droppable-area.droppable-complete .thumbnail {
   margin-bottom: 8px !important;
   margin-bottom: var(--padding-x-small) !important;
@@ -90,7 +86,6 @@
 }.droppable-card-content {
   max-width: 100%;
   opacity: 1;
-  transition: opacity 0.5s linear;
 }.droppable-dropping {
   border-color: #a7a9ab !important;
   border-color: var(--color-interactive-secondary-active) !important;
@@ -141,69 +136,55 @@
   opacity: 1;
 }.droppable-complete .droppable-processing-card {
   display: flex;
-}.droppable-complete .droppable-processing-card .droppable-card-content {
-  opacity: 0;
 }.droppable-complete-card {
   display: flex;
-}.droppable-complete-card .droppable-card-content {
-  opacity: 0;
-}.droppable-complete .droppable-complete-card .droppable-card-content {
-  opacity: 1;
-}.droppable-processing .droppable-default-card .droppable-card-content,
-.droppable-complete .droppable-default-card .droppable-card-content {
-  opacity: 0;
-}/***** End card variants *****/.droppable-mobile {
+}.droppable-complete {
+  /***** End card variants *****/
+}.droppable-complete .droppable-mobile {
   display: block;
-}.droppable-desktop {
+}.droppable-complete .droppable-desktop {
   display: none;
 }@media (min-width: 768px) {
-  .droppable-mobile {
+  .droppable-complete .droppable-mobile {
     display: none;
   }
-  .droppable-desktop {
+  .droppable-complete .droppable-desktop {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
-}.droppable-active {
+}.droppable-complete .droppable-active {
   border-style: solid;
-}.droppable-active.droppable-dropping {
+}.droppable-complete .droppable-active.droppable-dropping {
   border-style: dashed;
-}.droppable-sm {
+}.droppable-complete .droppable-sm {
   padding: 16px 16px;
 }@media (min-width: 576px) {
-  .droppable-sm {
+  .droppable-complete .droppable-sm {
     padding: 24px 16px;
   }
 }@media (min-width: 992px) {
-  .droppable-sm {
+  .droppable-complete .droppable-sm {
     padding: 32px 24px;
   }
-}.droppable-md {
+}.droppable-complete .droppable-md {
   padding: 32px 32px;
 }@media (min-width: 576px) {
-  .droppable-md {
+  .droppable-complete .droppable-md {
     padding: 48px 32px;
   }
 }@media (min-width: 992px) {
-  .droppable-md {
+  .droppable-complete .droppable-md {
     padding: 64px 48px;
   }
-}.droppable-lg {
+}.droppable-complete .droppable-lg {
   padding: 48px 48px;
 }@media (min-width: 576px) {
-  .droppable-lg {
+  .droppable-complete .droppable-lg {
     padding: 72px 48px;
   }
 }@media (min-width: 992px) {
-  .droppable-lg {
+  .droppable-complete .droppable-lg {
     padding: 96px 72px;
   }
-}@keyframes droppable-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
 }

package/dist/css/neptune.css

@@ -13616,10 +13616,6 @@ li > a > .currency-flag:first-child {
   min-height: 242px;
 }
 
-.np-theme-personal .droppable-area.droppable-dropping .droppable-default-card {
-  opacity: 0;
-}
-
 .np-theme-personal .droppable-area.droppable-dropping .tw-icon-plus svg {
   width: 24px;
   width: var(--size-24);
@@ -13639,10 +13635,6 @@ li > a > .currency-flag:first-child {
   min-height: 315px;
 }
 
-.np-theme-personal .droppable-area.droppable-complete.droppable-dropping .droppable-card:first-child {
-  opacity: 0;
-}
-
 .np-theme-personal .droppable-area.droppable-complete .thumbnail {
   margin-bottom: 8px !important;
   margin-bottom: var(--padding-x-small) !important;
@@ -13691,7 +13683,6 @@ li > a > .currency-flag:first-child {
 .droppable-card-content {
   max-width: 100%;
   opacity: 1;
-  transition: opacity 0.5s linear;
 }
 
 .droppable-dropping {
@@ -13776,113 +13767,89 @@ li > a > .currency-flag:first-child {
   display: flex;
 }
 
-.droppable-complete .droppable-processing-card .droppable-card-content {
-  opacity: 0;
-}
-
 .droppable-complete-card {
   display: flex;
 }
 
-.droppable-complete-card .droppable-card-content {
-  opacity: 0;
-}
-
-.droppable-complete .droppable-complete-card .droppable-card-content {
-  opacity: 1;
-}
-
-.droppable-processing .droppable-default-card .droppable-card-content,
-.droppable-complete .droppable-default-card .droppable-card-content {
-  opacity: 0;
+.droppable-complete {
+  /***** End card variants *****/
 }
 
-/***** End card variants *****/
-
-.droppable-mobile {
+.droppable-complete .droppable-mobile {
   display: block;
 }
 
-.droppable-desktop {
+.droppable-complete .droppable-desktop {
   display: none;
 }
 
 @media (min-width: 768px) {
-  .droppable-mobile {
+  .droppable-complete .droppable-mobile {
     display: none;
   }
-  .droppable-desktop {
+  .droppable-complete .droppable-desktop {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
 }
 
-.droppable-active {
+.droppable-complete .droppable-active {
   border-style: solid;
 }
 
-.droppable-active.droppable-dropping {
+.droppable-complete .droppable-active.droppable-dropping {
   border-style: dashed;
 }
 
-.droppable-sm {
+.droppable-complete .droppable-sm {
   padding: 16px 16px;
 }
 
 @media (min-width: 576px) {
-  .droppable-sm {
+  .droppable-complete .droppable-sm {
     padding: 24px 16px;
   }
 }
 
 @media (min-width: 992px) {
-  .droppable-sm {
+  .droppable-complete .droppable-sm {
     padding: 32px 24px;
   }
 }
 
-.droppable-md {
+.droppable-complete .droppable-md {
   padding: 32px 32px;
 }
 
 @media (min-width: 576px) {
-  .droppable-md {
+  .droppable-complete .droppable-md {
     padding: 48px 32px;
   }
 }
 
 @media (min-width: 992px) {
-  .droppable-md {
+  .droppable-complete .droppable-md {
     padding: 64px 48px;
   }
 }
 
-.droppable-lg {
+.droppable-complete .droppable-lg {
   padding: 48px 48px;
 }
 
 @media (min-width: 576px) {
-  .droppable-lg {
+  .droppable-complete .droppable-lg {
     padding: 72px 48px;
   }
 }
 
 @media (min-width: 992px) {
-  .droppable-lg {
+  .droppable-complete .droppable-lg {
     padding: 96px 72px;
   }
 }
 
-@keyframes droppable-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 .d-flex {
   display: flex;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-00df4a6",
+  "version": "0.0.0-experimental-0348e0b",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/droppable.less

@@ -40,9 +40,6 @@
       min-height: 242px;
     }
     &.droppable-dropping {
-      .droppable-default-card {
-        opacity: 0;
-      }
       .tw-icon-plus svg {
         width: var(--size-24);
         height: var(--size-24);
@@ -57,9 +54,6 @@
       min-height: 315px;
     }
     &.droppable-complete {
-      &.droppable-dropping .droppable-card:first-child {
-        opacity: 0;
-      }
       .thumbnail {
         margin-bottom: var(--padding-x-small) !important;
       }
@@ -100,7 +94,6 @@
 .droppable-card-content {
   max-width: 100%;
   opacity: 1;
-  transition: opacity 0.5s linear;
 }
 
 .droppable-dropping {
@@ -186,7 +179,7 @@
     display: flex;
 
     .droppable-card-content {
-      opacity: 0;
+      // opacity: 0;
     }
   }
 }
@@ -194,20 +187,11 @@
 // Completed card translated out and hidden by default
 .droppable-complete-card {
   display: flex;
-
-  .droppable-card-content {
-    opacity: 0;
-  }
 }
 // Completed card brought back in and shown in correct state
 // stylelint-disable-next-line no-duplicate-selectors
 .droppable-complete {
   .droppable-complete-card {
-
-    .droppable-card-content {
-      opacity: 1;
-    }
-  }
 }
 
 // Hide default content in other states, so it fades back in
@@ -215,7 +199,6 @@
 .droppable-processing,
 .droppable-complete {
   .droppable-default-card .droppable-card-content {
-    opacity: 0;
   }
 }
 
@@ -273,10 +256,11 @@
 
 @keyframes droppable-fade-in {
   from {
-    opacity: 0;
+    // opacity: 0;
   }
 
   to {
-    opacity: 1;
+    // opacity: 1;
   }
 }
+}