@transferwise/neptune-css 0.0.0-experimental-833aa39 → 0.0.0-experimental-0348e0b

package/dist/css/droppable.css

@@ -12,7 +12,7 @@
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: 3px;
-  overflow: hidden;
+  overflow: auto;
   transition: border-color 0.15s linear;
 }.droppable:hover {
   border-color: #b5b7ba;
@@ -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);
@@ -53,8 +51,7 @@
   border: 2px solid var(--color-sentiment-negative) !important;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-}.np-theme-personal .droppable-area.droppable-complete.droppable-dropping .droppable-card:first-child {
-  opacity: 0;
+  min-height: 315px;
 }.np-theme-personal .droppable-area.droppable-complete .thumbnail {
   margin-bottom: 8px !important;
   margin-bottom: var(--padding-x-small) !important;
@@ -89,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;
@@ -129,81 +125,66 @@
 }.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;
-  transform: translateX(0);
+  align-items: baseline;
 }.droppable-processing .droppable-processing-card .droppable-card-content {
   opacity: 1;
 }.droppable-complete .droppable-processing-card {
   display: flex;
-  transform: translateX(-100%);
-}.droppable-complete .droppable-processing-card .droppable-card-content {
-  opacity: 0;
 }.droppable-complete-card {
   display: flex;
-  transform: translateX(100%);
-}.droppable-complete-card .droppable-card-content {
-  opacity: 0;
-}.droppable-complete .droppable-complete-card {
-  transform: translateX(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 {
-    display: block;
+  .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

@@ -13573,7 +13573,7 @@ li > a > .currency-flag:first-child {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: 3px;
-  overflow: hidden;
+  overflow: auto;
   transition: border-color 0.15s linear;
 }
 
@@ -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);
@@ -13636,10 +13632,7 @@ li > a > .currency-flag:first-child {
   border: 2px solid var(--color-sentiment-negative) !important;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-}
-
-.np-theme-personal .droppable-area.droppable-complete.droppable-dropping .droppable-card:first-child {
-  opacity: 0;
+  min-height: 315px;
 }
 
 .np-theme-personal .droppable-area.droppable-complete .thumbnail {
@@ -13690,7 +13683,6 @@ li > a > .currency-flag:first-child {
 .droppable-card-content {
   max-width: 100%;
   opacity: 1;
-  transition: opacity 0.5s linear;
 }
 
 .droppable-dropping {
@@ -13754,6 +13746,7 @@ li > a > .currency-flag:first-child {
 }
 
 .droppable-processing-card {
+  align-items: baseline;
   display: none;
 }
 
@@ -13763,7 +13756,7 @@ li > a > .currency-flag:first-child {
 
 .droppable-processing .droppable-processing-card {
   display: flex;
-  transform: translateX(0);
+  align-items: baseline;
 }
 
 .droppable-processing .droppable-processing-card .droppable-card-content {
@@ -13772,119 +13765,91 @@ li > a > .currency-flag:first-child {
 
 .droppable-complete .droppable-processing-card {
   display: flex;
-  transform: translateX(-100%);
-}
-
-.droppable-complete .droppable-processing-card .droppable-card-content {
-  opacity: 0;
 }
 
 .droppable-complete-card {
   display: flex;
-  transform: translateX(100%);
-}
-
-.droppable-complete-card .droppable-card-content {
-  opacity: 0;
-}
-
-.droppable-complete .droppable-complete-card {
-  transform: translateX(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 {
-    display: block;
+  .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-833aa39",
+  "version": "0.0.0-experimental-0348e0b",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/droppable.less

@@ -9,7 +9,7 @@
   text-align: center;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: @border-radius-base;
-  overflow: hidden;
+  overflow: auto;
   transition: border-color 0.15s linear;
 
   &:hover {
@@ -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);
@@ -54,11 +51,9 @@
     &.droppable-negative {
       border: 2px solid var(--color-sentiment-negative) !important;
       background-color: var(--color-background-screen);
+      min-height: 315px;
     }
     &.droppable-complete {
-      &.droppable-dropping .droppable-card:first-child {
-        opacity: 0;
-      }
       .thumbnail {
         margin-bottom: var(--padding-x-small) !important;
       }
@@ -99,7 +94,6 @@
 .droppable-card-content {
   max-width: 100%;
   opacity: 1;
-  transition: opacity 0.5s linear;
 }
 
 .droppable-dropping {
@@ -161,6 +155,7 @@
 
 // Processing hidden by default
 .droppable-processing-card {
+  align-items: baseline;
   display: none;
 
   .droppable-card-content {
@@ -172,7 +167,7 @@
 
 .droppable-processing .droppable-processing-card {
   display: flex;
-  transform: translateX(0);
+  align-items: baseline;
 
   .droppable-card-content {
     opacity: 1;
@@ -182,10 +177,9 @@
 .droppable-complete {
   .droppable-processing-card {
     display: flex;
-    transform: translateX(-100%);
 
     .droppable-card-content {
-      opacity: 0;
+      // opacity: 0;
     }
   }
 }
@@ -193,22 +187,11 @@
 // Completed card translated out and hidden by default
 .droppable-complete-card {
   display: flex;
-  transform: translateX(100%);
-
-  .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 {
-    transform: translateX(0);
-
-    .droppable-card-content {
-      opacity: 1;
-    }
-  }
 }
 
 // Hide default content in other states, so it fades back in
@@ -216,7 +199,6 @@
 .droppable-processing,
 .droppable-complete {
   .droppable-default-card .droppable-card-content {
-    opacity: 0;
   }
 }
 
@@ -236,7 +218,9 @@
   }
 
   .droppable-desktop {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
   }
 }
 
@@ -272,10 +256,11 @@
 
 @keyframes droppable-fade-in {
   from {
-    opacity: 0;
+    // opacity: 0;
   }
 
   to {
-    opacity: 1;
+    // opacity: 1;
   }
 }
+}