@transferwise/neptune-css 0.0.0-experimental-e1f6a4f → 0.0.0-experimental-11855a1

package/dist/css/navbar.css

@@ -890,53 +890,6 @@ html:not([dir="rtl"]) .nav-stacked > li.active > a:focus {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
-.close {
-  float: right;
-  color: #0097c7;
-  color: var(--color-content-accent);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-[dir="rtl"] .close {
-  float: left;
-}
-.np-theme-personal .close {
-  color: var(--color-interactive-primary);
-}
-.close:hover {
-  color: #0084b3;
-  color: var(--color-content-accent-hover);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-}
-.np-theme-personal .close:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.close:focus {
-  outline: none;
-}
-.close:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
-.close:active {
-  color: #0077a5;
-  color: var(--color-content-accent-active);
-}
-button.close {
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
-.np-theme-personal button.close:hover {
-  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
-  background: initial;
-}
 .navbar {
   position: relative;
   font-size: 0.875rem;
@@ -2303,6 +2256,53 @@ button.close {
   }
 }
 /* stylelint-enable */
+.close {
+  float: right;
+  color: #0097c7;
+  color: var(--color-content-accent);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+[dir="rtl"] .close {
+  float: left;
+}
+.np-theme-personal .close {
+  color: var(--color-interactive-primary);
+}
+.close:hover {
+  color: #0084b3;
+  color: var(--color-content-accent-hover);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+.np-theme-personal .close:hover {
+  color: var(--color-interactive-primary-hover);
+}
+.close:focus {
+  outline: none;
+}
+.close:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.close:active {
+  color: #0077a5;
+  color: var(--color-content-accent-active);
+}
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.np-theme-personal button.close:hover {
+  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+  background: initial;
+}
 @media (min-width: 576px) {
   .form-inline .form-group {
     display: inline-block;

package/dist/css/neptune.css

@@ -22340,20 +22340,28 @@ button.popover-close {
 }
 
 .progress {
-  height: 2px;
-  margin-top: calc((24px - 2px) / 2);
-  margin-top: calc((var(--size-24) - 2px) / 2);
-  margin-bottom: calc((24px - 2px) / 2);
-  margin-bottom: calc((var(--size-24) - 2px) / 2);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border-radius: calc(2px / 2);
+  --progress-bar-height: 8px;
+  --progress-bar-border-width: 4px;
+  --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
+  height: 8px;
+  height: var(--progress-bar-height);
+  overflow: hidden;
+  margin-top: calc((24px - 8px) / 2);
+  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
+  margin-bottom: calc((24px - 8px) / 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);
 }
 
 .progress-bar {
   float: left;
-  width: 0%;
-  height: 100%;
+  position: relative;
+  top: calc(-1 * var(--progress-bar-border-width));
+  left: calc(-1 * var(--progress-bar-start-shift));
+  height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
   font-size: 1rem;
   font-size: var(--font-size-16);
   font-weight: 700;
@@ -22362,7 +22370,9 @@ button.popover-close {
   text-align: right;
   background-color: #0097c7;
   background-color: var(--color-content-accent);
-  transition: width 0.6s ease;
+  border: var(--progress-bar-border-width) solid #ffffff;
+  border: var(--progress-bar-border-width) solid var(--color-background-screen);
+  border-radius: inherit;
 }
 
 [dir="rtl"] .progress-bar {
@@ -22373,35 +22383,9 @@ button.popover-close {
   text-align: left;
 }
 
-.progress-bar::after {
-  content: "";
-  float: right;
-  margin-top: 8px / 2 + 1;
-  margin-right: 8px / 2;
-  width: 8px;
-  height: 8px;
-  background-color: inherit;
-  border-radius: 8px / 2;
-}
-
-[dir="rtl"] .progress-bar::after {
-  float: left;
-}
-
-[dir="rtl"] .progress-bar::after {
-  margin-left: 8px / 2;
-  margin-right: 0;
-  margin-right: initial;
-}
-
-.progress-bar:first-child {
-  border-top-left-radius: 2px / 2;
-  border-bottom-left-radius: 2px / 2;
-}
-
-.progress-bar:last-child {
-  border-top-right-radius: 2px / 2;
-  border-bottom-right-radius: 2px / 2;
+[dir="rtl"] .progress-bar {
+  right: calc(-1 * var(--progress-bar-start-shift));
+  left: 0;
 }
 
 .progress-bar-primary {

package/dist/css/progress-bars.css

@@ -1,17 +1,25 @@
 .progress {
-  height: 2px;
-  margin-top: calc((24px - 2px) / 2);
-  margin-top: calc((var(--size-24) - 2px) / 2);
-  margin-bottom: calc((24px - 2px) / 2);
-  margin-bottom: calc((var(--size-24) - 2px) / 2);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border-radius: calc(2px / 2);
+  --progress-bar-height: 8px;
+  --progress-bar-border-width: 4px;
+  --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
+  height: 8px;
+  height: var(--progress-bar-height);
+  overflow: hidden;
+  margin-top: calc((24px - 8px) / 2);
+  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
+  margin-bottom: calc((24px - 8px) / 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);
 }
 .progress-bar {
   float: left;
-  width: 0%;
-  height: 100%;
+  position: relative;
+  top: calc(-1 * var(--progress-bar-border-width));
+  left: calc(-1 * var(--progress-bar-start-shift));
+  height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
   font-size: 1rem;
   font-size: var(--font-size-16);
   font-weight: 700;
@@ -20,7 +28,9 @@
   text-align: right;
   background-color: #0097c7;
   background-color: var(--color-content-accent);
-  transition: width 0.6s ease;
+  border: var(--progress-bar-border-width) solid #ffffff;
+  border: var(--progress-bar-border-width) solid var(--color-background-screen);
+  border-radius: inherit;
 }
 [dir="rtl"] .progress-bar {
   float: right;
@@ -28,31 +38,9 @@
 [dir="rtl"] .progress-bar {
   text-align: left;
 }
-.progress-bar::after {
-  content: "";
-  float: right;
-  margin-top: 8px / 2 + 1;
-  margin-right: 8px / 2;
-  width: 8px;
-  height: 8px;
-  background-color: inherit;
-  border-radius: 8px / 2;
-}
-[dir="rtl"] .progress-bar::after {
-  float: left;
-}
-[dir="rtl"] .progress-bar::after {
-  margin-left: 8px / 2;
-  margin-right: 0;
-  margin-right: initial;
-}
-.progress-bar:first-child {
-  border-top-left-radius: 2px / 2;
-  border-bottom-left-radius: 2px / 2;
-}
-.progress-bar:last-child {
-  border-top-right-radius: 2px / 2;
-  border-bottom-right-radius: 2px / 2;
+[dir="rtl"] .progress-bar {
+  right: calc(-1 * var(--progress-bar-start-shift));
+  left: 0;
 }
 .progress-bar-primary {
   background-color: #37517e;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-e1f6a4f",
+  "version": "0.0.0-experimental-11855a1",
   "license": "MIT",
   "repository": {
     "type": "git",