@transferwise/neptune-css 14.13.0 → 14.13.2

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;
@@ -50,9 +50,10 @@
   margin-top: 16px !important;
   margin-top: var(--padding-small) !important;
 }.np-theme-personal .droppable-area.droppable-negative {
-  border-color: var(--color-sentiment-negative) !important;
-}.np-theme-personal .droppable-area.droppable-complete.droppable-dropping .droppable-card:first-child {
-  opacity: 0;
+  border: 2px solid var(--color-sentiment-negative) !important;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  min-height: 315px;
 }.np-theme-personal .droppable-area.droppable-complete .thumbnail {
   margin-bottom: 8px !important;
   margin-bottom: var(--padding-x-small) !important;
@@ -87,7 +88,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;
@@ -126,44 +126,14 @@
   background-color: #455C35;
 }.droppable-dropping .droppable-dropping-card {
   display: flex;
-}.droppable-processing-card {
-  display: none;
-}.droppable-processing-card .droppable-card-content {
-  opacity: 1;
 }.droppable-processing .droppable-processing-card {
   display: flex;
-  transform: translateX(0);
-}.droppable-processing .droppable-processing-card .droppable-card-content {
-  opacity: 1;
+  align-items: baseline;
 }.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 {
-  display: block;
-}.droppable-desktop {
-  display: none;
-}@media (min-width: 768px) {
-  .droppable-mobile {
-    display: none;
-  }
-  .droppable-desktop {
-    display: block;
-  }
-}.droppable-active {
+}/***** End card variants *****/.droppable-active {
   border-style: solid;
 }.droppable-active.droppable-dropping {
   border-style: dashed;

package/dist/css/input-groups.css

@@ -192,8 +192,8 @@ input[type='search'] {
 }
 .form-group:focus-within .control-label,
 .form-group:focus-within > label {
-  color: #0097c7;
-  color: var(--color-content-accent);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 .row-equal-height > [class*='col-'] > .form-group {
   width: 100%;
@@ -458,8 +458,8 @@ select[multiple].input-lg {
 }
 .focus .control-label,
 .has-focus .control-label {
-  color: #0077a5;
-  color: var(--color-content-accent-active);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 .focus .input-group-addon,
 .has-focus .input-group-addon {

package/dist/css/neptune.css

@@ -9475,8 +9475,8 @@ input[type='search'] {
 
 .form-group:focus-within .control-label,
 .form-group:focus-within > label {
-  color: #0097c7;
-  color: var(--color-content-accent);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 
 .row-equal-height > [class*='col-'] > .form-group {
@@ -9790,8 +9790,8 @@ select[multiple].input-lg {
 
 .focus .control-label,
 .has-focus .control-label {
-  color: #0077a5;
-  color: var(--color-content-accent-active);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 
 .focus .input-group-addon,
@@ -13569,7 +13569,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;
 }
 
@@ -13629,11 +13629,10 @@ li > a > .currency-flag:first-child {
 }
 
 .np-theme-personal .droppable-area.droppable-negative {
-  border-color: var(--color-sentiment-negative) !important;
-}
-
-.np-theme-personal .droppable-area.droppable-complete.droppable-dropping .droppable-card:first-child {
-  opacity: 0;
+  border: 2px solid var(--color-sentiment-negative) !important;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  min-height: 315px;
 }
 
 .np-theme-personal .droppable-area.droppable-complete .thumbnail {
@@ -13684,7 +13683,6 @@ li > a > .currency-flag:first-child {
 .droppable-card-content {
   max-width: 100%;
   opacity: 1;
-  transition: opacity 0.5s linear;
 }
 
 .droppable-dropping {
@@ -13747,73 +13745,21 @@ li > a > .currency-flag:first-child {
   display: flex;
 }
 
-.droppable-processing-card {
-  display: none;
-}
-
-.droppable-processing-card .droppable-card-content {
-  opacity: 1;
-}
-
 .droppable-processing .droppable-processing-card {
   display: flex;
-  transform: translateX(0);
-}
-
-.droppable-processing .droppable-processing-card .droppable-card-content {
-  opacity: 1;
+  align-items: baseline;
 }
 
 .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 {
-  display: block;
-}
-
-.droppable-desktop {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .droppable-mobile {
-    display: none;
-  }
-  .droppable-desktop {
-    display: block;
-  }
-}
-
 .droppable-active {
   border-style: solid;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.13.0",
+  "version": "14.13.2",
   "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 {
@@ -52,12 +52,11 @@
       }
     }
     &.droppable-negative {
-      border-color: var(--color-sentiment-negative) !important;
+      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;
       }
@@ -85,7 +84,6 @@
   position: absolute;
   top: 0;
   .left(0);
-
   display: none;
   width: 100%;
   height: 100%;
@@ -98,7 +96,6 @@
 .droppable-card-content {
   max-width: 100%;
   opacity: 1;
-  transition: opacity 0.5s linear;
 }
 
 .droppable-dropping {
@@ -158,87 +155,23 @@
   display: flex;
 }
 
-// Processing hidden by default
-.droppable-processing-card {
-  display: none;
-
-  .droppable-card-content {
-    opacity: 1;
-  }
-}
-
-// Processing shown when correct state, any transform cancelled
-
 .droppable-processing .droppable-processing-card {
   display: flex;
-  transform: translateX(0);
-
-  .droppable-card-content {
-    opacity: 1;
-  }
+  align-items: baseline;
 }
-// As we go from processing to complete, animate out processing card
+
 .droppable-complete {
   .droppable-processing-card {
     display: flex;
-    transform: translateX(-100%);
-
-    .droppable-card-content {
-      opacity: 0;
-    }
   }
 }
 
-// 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
-// stylelint-disable-next-line no-duplicate-selectors
-.droppable-processing,
-.droppable-complete {
-  .droppable-default-card .droppable-card-content {
-    opacity: 0;
-  }
 }
 
 /***** End card variants *****/
 
-.droppable-mobile {
-  display: block;
-}
-
-.droppable-desktop {
-  display: none;
-}
-
-@media (--screen-md) {
-  .droppable-mobile {
-    display: none;
-  }
-
-  .droppable-desktop {
-    display: block;
-  }
-}
-
 .droppable-active {
   border-style: solid;
 

package/src/less/forms/bootstrap-forms.less

@@ -243,7 +243,7 @@ input[type='search'] {
     // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
     .control-label,
     > label {
-      color: var(--color-content-accent);
+      color: var(--color-content-primary);
     }
   }
 }
@@ -508,7 +508,7 @@ input[type="password"] {
 .has-focus {
   // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
   .control-label {
-    color: var(--color-content-accent-active);
+    color: var(--color-content-primary);
   }
 
   .input-group-addon {