@transferwise/neptune-css 14.16.0 → 14.18.0

package/dist/css/progress-bars.css

@@ -1,18 +1,18 @@
 .progress {
-  --progress-bar-height: 8px;
+  --progress-bar-height: 4px;
   --progress-bar-border-width: 4px;
   --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
-  height: 8px;
+  height: 4px;
   height: var(--progress-bar-height);
   overflow: hidden;
-  margin-top: calc((24px - 8px) / 2);
+  margin-top: calc((24px - 4px) / 2);
   margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
-  margin-bottom: calc((24px - 8px) / 2);
+  margin-bottom: calc((24px - 4px) / 2);
   margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
   background-color: #c9cbce;
   background-color: var(--color-interactive-secondary);
-  border-radius: 8px;
-  border-radius: var(--progress-bar-height);
+  border-radius: calc(4px + 4px);
+  border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
 }
 .progress-bar {
   float: left;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.16.0",
+  "version": "14.18.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/buttons.less

@@ -69,7 +69,7 @@
     }
   }
 
-  &:not(.disabled, :disabled):hover {
+  &:not(.disabled, :disabled, .btn-loading):hover {
     color: var(--color-interactive-accent-hover);
     text-decoration: none;
   }
@@ -79,12 +79,14 @@
   fieldset[disabled] & {
     outline: none;
     box-shadow: none;
+    cursor: not-allowed;
     pointer-events: none;
   }
 
   a& {
     &.disabled,
     fieldset[disabled] & {
+      cursor: not-allowed;
       pointer-events: none;
     }
   }
@@ -211,7 +213,7 @@
     background-color: transparent;
   }
 
-  &:not(.disabled, :disabled):hover,
+  &:not(.disabled, :disabled, .btn-loading):hover,
   &:not(.disabled, :disabled):focus-visible {
     color: var(--color-content-accent-hover);
     text-decoration: underline;
@@ -219,7 +221,7 @@
     background-color: transparent;
   }
 
-  &:not(.disabled, :disabled):active {
+  &:not(.disabled, :disabled, .btn-loading):active {
     color: var(--color-content-accent-active);
   }
 
@@ -228,13 +230,13 @@
     border-color: transparent;
     .link-underline();
 
-    &:not(.disabled, :disabled):hover,
+    &:not(.disabled, :disabled, .btn-loading):hover,
     &:not(.disabled, :disabled):focus-visible {
       color: var(--color-interactive-primary-hover);
       border-color: transparent;
     }
 
-    &:not(.disabled, :disabled):active {
+    &:not(.disabled, :disabled, .btn-loading):active {
       color: var(--color-interactive-primary-active);
       background-color: var(--color-background-screen-active) !important;
     }
@@ -636,17 +638,11 @@ input[type="button"] {
   margin-bottom: -8px;
   background-repeat: no-repeat;
   background-position: center;
-
-  .process-circle {
-    .np-theme-personal--dark &,
-    .np-theme-personal--bright-green &,
-    .np-theme-personal--forest-green & {
-      stroke: var(--color-interactive-negative);
-    }
-  }
 }
 
 .btn-loading {
+  cursor: wait;
+
   &:not(.btn-block) {
     display: inline-flex;
     align-items: center;
@@ -658,7 +654,7 @@ input[type="button"] {
         margin-left: 16px;
         margin-right: 0;
       }
-  
+
       [dir="rtl"] & {
         margin-left: 0 !important;
         margin-right: 16px !important;
@@ -672,6 +668,16 @@ input[type="button"] {
     margin-top: auto;
     margin-bottom: auto;
   }
+
+  &:hover,
+  &:focus,
+  &:active,
+  & {
+    .process-circle[class] {
+      stroke: currentColor;
+    }
+  }
+
 }
 
 .btn-sm {

package/src/less/mixins/_buttons.less

@@ -15,14 +15,14 @@
   border-color: @border;
   transition: color, background-color 0.15s ease-in-out;
 
-  &:not(.disabled, :disabled):hover {
+  &:not(.disabled, :disabled, .btn-loading):hover {
     color: @color-hover;
     background-color: @background-hover;
     border-color: @border-hover;
   }
 
-  &:not(.disabled, :disabled):active,
-  &:not(.disabled, :disabled).active,
+  &:not(.disabled, :disabled, .btn-loading):active,
+  &:not(.disabled, :disabled, .btn-loading).active,
   .open > .dropdown-toggle& {
     color: @color-active;
     background-color: @background-active;
@@ -35,7 +35,7 @@
     }
   }
 
-  &:not(.disabled, :disabled).active,
+  &:not(.disabled, :disabled, .btn-loading).active,
   .open > .dropdown-toggle& {
     background-image: none;
   }

package/src/less/progress-bars.less

@@ -2,7 +2,7 @@
 @import (reference) "./mixins/_logical-properties.less";
 
 .progress {
-  --progress-bar-height: 8px;
+  --progress-bar-height: 4px;
   --progress-bar-border-width: 4px;
   // Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders which are used for progress vertical delimiter.
   --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
@@ -11,7 +11,7 @@
   margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
   margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
   background-color: var(--color-interactive-secondary);
-  border-radius: var(--progress-bar-height);
+  border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
 }
 
 .progress-bar {