@transferwise/neptune-css 0.0.0-experimental-0348e0b → 0.0.0-experimental-b79309f

package/dist/css/droppable.css

@@ -124,67 +124,65 @@
   background-color: #455C35;
 }.droppable-dropping .droppable-dropping-card {
   display: flex;
-}.droppable-processing-card {
-  align-items: baseline;
-  display: none;
-}.droppable-processing-card .droppable-card-content {
-  opacity: 1;
 }.droppable-processing .droppable-processing-card {
   display: flex;
   align-items: baseline;
-}.droppable-processing .droppable-processing-card .droppable-card-content {
-  opacity: 1;
 }.droppable-complete .droppable-processing-card {
   display: flex;
 }.droppable-complete-card {
   display: flex;
-}.droppable-complete {
-  /***** End card variants *****/
-}.droppable-complete .droppable-mobile {
+}/***** End card variants *****/.droppable-mobile {
   display: block;
-}.droppable-complete .droppable-desktop {
+}.droppable-desktop {
   display: none;
 }@media (min-width: 768px) {
-  .droppable-complete .droppable-mobile {
+  .droppable-mobile {
     display: none;
   }
-  .droppable-complete .droppable-desktop {
+  .droppable-desktop {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
-}.droppable-complete .droppable-active {
+}.droppable-active {
   border-style: solid;
-}.droppable-complete .droppable-active.droppable-dropping {
+}.droppable-active.droppable-dropping {
   border-style: dashed;
-}.droppable-complete .droppable-sm {
+}.droppable-sm {
   padding: 16px 16px;
 }@media (min-width: 576px) {
-  .droppable-complete .droppable-sm {
+  .droppable-sm {
     padding: 24px 16px;
   }
 }@media (min-width: 992px) {
-  .droppable-complete .droppable-sm {
+  .droppable-sm {
     padding: 32px 24px;
   }
-}.droppable-complete .droppable-md {
+}.droppable-md {
   padding: 32px 32px;
 }@media (min-width: 576px) {
-  .droppable-complete .droppable-md {
+  .droppable-md {
     padding: 48px 32px;
   }
 }@media (min-width: 992px) {
-  .droppable-complete .droppable-md {
+  .droppable-md {
     padding: 64px 48px;
   }
-}.droppable-complete .droppable-lg {
+}.droppable-lg {
   padding: 48px 48px;
 }@media (min-width: 576px) {
-  .droppable-complete .droppable-lg {
+  .droppable-lg {
     padding: 72px 48px;
   }
 }@media (min-width: 992px) {
-  .droppable-complete .droppable-lg {
+  .droppable-lg {
     padding: 96px 72px;
   }
+}@keyframes droppable-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }

package/dist/css/neptune.css

@@ -13745,24 +13745,11 @@ li > a > .currency-flag:first-child {
   display: flex;
 }
 
-.droppable-processing-card {
-  align-items: baseline;
-  display: none;
-}
-
-.droppable-processing-card .droppable-card-content {
-  opacity: 1;
-}
-
 .droppable-processing .droppable-processing-card {
   display: flex;
   align-items: baseline;
 }
 
-.droppable-processing .droppable-processing-card .droppable-card-content {
-  opacity: 1;
-}
-
 .droppable-complete .droppable-processing-card {
   display: flex;
 }
@@ -13771,85 +13758,92 @@ li > a > .currency-flag:first-child {
   display: flex;
 }
 
-.droppable-complete {
-  /***** End card variants *****/
-}
+/***** End card variants *****/
 
-.droppable-complete .droppable-mobile {
+.droppable-mobile {
   display: block;
 }
 
-.droppable-complete .droppable-desktop {
+.droppable-desktop {
   display: none;
 }
 
 @media (min-width: 768px) {
-  .droppable-complete .droppable-mobile {
+  .droppable-mobile {
     display: none;
   }
-  .droppable-complete .droppable-desktop {
+  .droppable-desktop {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
 }
 
-.droppable-complete .droppable-active {
+.droppable-active {
   border-style: solid;
 }
 
-.droppable-complete .droppable-active.droppable-dropping {
+.droppable-active.droppable-dropping {
   border-style: dashed;
 }
 
-.droppable-complete .droppable-sm {
+.droppable-sm {
   padding: 16px 16px;
 }
 
 @media (min-width: 576px) {
-  .droppable-complete .droppable-sm {
+  .droppable-sm {
     padding: 24px 16px;
   }
 }
 
 @media (min-width: 992px) {
-  .droppable-complete .droppable-sm {
+  .droppable-sm {
     padding: 32px 24px;
   }
 }
 
-.droppable-complete .droppable-md {
+.droppable-md {
   padding: 32px 32px;
 }
 
 @media (min-width: 576px) {
-  .droppable-complete .droppable-md {
+  .droppable-md {
     padding: 48px 32px;
   }
 }
 
 @media (min-width: 992px) {
-  .droppable-complete .droppable-md {
+  .droppable-md {
     padding: 64px 48px;
   }
 }
 
-.droppable-complete .droppable-lg {
+.droppable-lg {
   padding: 48px 48px;
 }
 
 @media (min-width: 576px) {
-  .droppable-complete .droppable-lg {
+  .droppable-lg {
     padding: 72px 48px;
   }
 }
 
 @media (min-width: 992px) {
-  .droppable-complete .droppable-lg {
+  .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-0348e0b",
+  "version": "0.0.0-experimental-b79309f",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/droppable.less

@@ -153,54 +153,20 @@
   display: flex;
 }
 
-// Processing hidden by default
-.droppable-processing-card {
-  align-items: baseline;
-  display: none;
-
-  .droppable-card-content {
-    opacity: 1;
-  }
-}
-
-// Processing shown when correct state, any transform cancelled
-
 .droppable-processing .droppable-processing-card {
   display: flex;
   align-items: baseline;
-
-  .droppable-card-content {
-    opacity: 1;
-  }
 }
-// As we go from processing to complete, animate out processing card
+
 .droppable-complete {
   .droppable-processing-card {
     display: flex;
-
-    .droppable-card-content {
-      // opacity: 0;
-    }
   }
 }
 
-// Completed card translated out and hidden by default
 .droppable-complete-card {
   display: flex;
 }
-// Completed card brought back in and shown in correct state
-// stylelint-disable-next-line no-duplicate-selectors
-.droppable-complete {
-  .droppable-complete-card {
-}
-
-// Hide default content in other states, so it fades back in
-// stylelint-disable-next-line no-duplicate-selectors
-.droppable-processing,
-.droppable-complete {
-  .droppable-default-card .droppable-card-content {
-  }
-}
 
 /***** End card variants *****/
 
@@ -256,11 +222,10 @@
 
 @keyframes droppable-fade-in {
   from {
-    // opacity: 0;
+    opacity: 0;
   }
 
   to {
-    // opacity: 1;
+    opacity: 1;
   }
 }
-}