@transferwise/components 46.130.2 → 46.131.0

package/src/styles/less/process.less

@@ -0,0 +1,426 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+@process-xl-radius: 64px;
+@process-xl-stroke: 3px;
+@process-xl-circumference: (pi() * (2 * (@process-xl-radius - 1)));
+@process-xl-icon-size: 64px;
+@process-xl-icon-stroke: 8px;
+
+/*
+// Keep these sizes in case we want to add these back in.
+@process-lg-radius: 48px;
+@process-lg-stroke: 2.7px;
+@process-lg-circumference: (pi() * (2 * (@process-lg-radius - 1)));
+@process-lg-icon-size: 48px;
+@process-lg-icon-stroke: 6px;
+
+@process-md-radius: 36px;
+@process-md-circumference: (pi() * (2 * (@process-md-radius - 1)));
+@process-md-stroke: 2.5px;
+@process-md-icon-size: 36px;
+@process-md-icon-stroke: 4px;
+*/
+@process-sm-radius: 24px;
+@process-sm-circumference: (pi() * (2 * (@process-sm-radius - 1)));
+@process-sm-stroke: 2.4px;
+@process-sm-icon-size: 24px;
+@process-sm-icon-stroke: 3px;
+
+@process-xs-radius: 12px;
+@process-xs-circumference: (pi() * (2 * (@process-xs-radius - 1)));
+@process-xs-stroke: 2px;
+@process-xs-icon-size: 12px;
+@process-xs-icon-stroke: 2px;
+
+@process-xxs-radius: 6px;
+@process-xxs-circumference: (pi() * (2 * (@process-xxs-radius - 1)));
+@process-xxs-stroke: 1.5px;
+@process-xxs-icon-size: 6px;
+@process-xxs-icon-stroke: 1px;
+
+.process {
+  position: relative;
+  margin: auto;
+  display: block;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.process-circle {
+  transform-origin: center center;
+  transition: stroke 1s 0.2s linear;
+  stroke: var(--color-content-accent);
+  stroke-opacity: 1;
+  stroke-linecap: round;
+  -webkit-transform: translate3d(0, 0, 0);
+  animation-duration: 1.5s;
+  animation-timing-function: ease-out;
+  animation-iteration-count: infinite;
+
+  .np-theme-personal & {
+    stroke: var(--color-content-primary);
+  }
+
+  .np-theme-personal--forest-green &,
+  .np-theme-personal--bright-green &,
+  .np-theme-personal--dark & {
+    stroke: var(--color-interactive-primary);
+  }
+}
+
+.process-inverse .process-circle {
+  stroke: var(--color-background-screen);
+}
+
+.process-icon-container {
+  position: absolute;
+  display: inline-block;
+  transform: rotate(45deg);
+  height: 50%;
+  width: 50%;
+  left: 25%;
+  top: 25%;
+}
+
+.process-icon-horizontal,
+.process-icon-vertical {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+}
+
+.process-success {
+  .process-icon-horizontal {
+    background-color: var(--color-content-positive);
+    bottom: 0;
+    left: 0;
+
+    .np-theme-personal & {
+      background-color: var(--color-sentiment-positive);
+    }
+  }
+
+  .process-icon-vertical {
+    background-color: var(--color-content-positive);
+    top: 100%;
+    right: 0;
+
+    .np-theme-personal & {
+      background-color: var(--color-sentiment-positive);
+    }
+  }
+
+  .process-circle {
+    stroke: var(--color-content-positive);
+
+    .np-theme-personal & {
+      stroke: var(--color-sentiment-positive);
+    }
+  }
+}
+
+.process-danger {
+  .process-icon-horizontal {
+    background-color: var(--color-content-negative);
+    left: 0;
+
+    .np-theme-personal & {
+      background-color: var(--color-sentiment-negative);
+    }
+  }
+
+  .process-icon-vertical {
+    background-color: var(--color-content-negative);
+    top: 0;
+
+    .np-theme-personal & {
+      background-color: var(--color-sentiment-negative);
+    }
+  }
+
+  .process-circle {
+    stroke: var(--color-content-negative);
+
+    .np-theme-personal & {
+      stroke: var(--color-sentiment-negative);
+    }
+  }
+}
+
+.process-success,
+.process-danger {
+  .process-circle {
+    animation-duration: 1.5s;
+    animation-delay: 1ms; // 1 ms delay prevents small glitch on webkit
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+  }
+
+  .process-icon-horizontal {
+    /* Animation over transition, to run once on load */
+    animation: process-width 0.3s 1.2s ease forwards;
+  }
+
+  .process-icon-vertical {
+    /* Animation over transition, to run once on load */
+    animation: process-height 0.3s 1.5s ease forwards;
+  }
+}
+
+.process-stopped {
+  .process-circle {
+    animation: none;
+  }
+
+  .process-icon-container {
+    display: none;
+  }
+}
+
+.process-size(@size, @circle-radius, @cirlce-circumference, @circle-stroke, @icon-size, @icon-stroke) {
+  .process-@{size} {
+    width: (@circle-radius * 2);
+    height: (@circle-radius * 2);
+
+    .process-circle {
+      /* Hide before animation to prevent glitching */
+      stroke-dashoffset: @cirlce-circumference;
+      stroke-dasharray: @cirlce-circumference;
+      stroke-width: @circle-stroke;
+    }
+
+    &.process-danger {
+      .process-icon-horizontal {
+        top: ((@icon-size - @icon-stroke) / 2);
+        height: @icon-stroke;
+      }
+
+      .process-icon-vertical {
+        left: ((@icon-size - @icon-stroke) / 2);
+        width: @icon-stroke;
+      }
+    }
+
+    .process-icon-horizontal,
+    .process-icon-vertical {
+      border-radius: (@icon-stroke / 2);
+    }
+
+    &.process-success {
+      .process-icon-container {
+        // TODO change to percentages so we don't need to redefine for different widths
+        width: ((@icon-size - @icon-stroke) / 2); // 20%
+        height: (@icon-size - @icon-stroke); // 42%
+        left: (3 * (@icon-size / 4)); // 40%
+      }
+
+      .process-icon-horizontal {
+        height: @icon-stroke;
+      }
+
+      .process-icon-vertical {
+        width: @icon-stroke;
+      }
+    }
+  }
+}
+.process-size(
+  xs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
+);
+.process-size(
+  xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke
+);
+.process-size(
+  sm, @process-sm-radius, @process-sm-circumference, @process-sm-stroke, @process-sm-icon-size, @process-sm-icon-stroke
+);
+.process-size(
+  xl, @process-xl-radius, @process-xl-circumference, @process-xl-stroke, @process-xl-icon-size, @process-xl-icon-stroke
+);
+
+.process-xxs {
+  .process-circle {
+    animation-name: process-chase-circle-xxs;
+  }
+
+  &.process-success,
+  &.process-danger {
+    .process-circle {
+      animation-name: process-success-circle-xxs;
+    }
+  }
+}
+
+.process-xs {
+  .process-circle {
+    animation-name: process-chase-circle-xs;
+  }
+
+  &.process-success,
+  &.process-danger {
+    .process-circle {
+      animation-name: process-success-circle-xs;
+    }
+  }
+}
+
+.process-sm {
+  .process-circle {
+    animation-name: process-chase-circle-sm;
+  }
+
+  &.process-success,
+  &.process-danger {
+    .process-circle {
+      animation-name: process-success-circle-sm;
+    }
+  }
+}
+
+.process-xl {
+  .process-circle {
+    animation-name: process-chase-circle-xl;
+  }
+
+  &.process-success,
+  &.process-danger {
+    .process-circle {
+      animation-name: process-success-circle-xl;
+    }
+  }
+}
+
+.complete-circle(@process-circumference) {
+  0% {
+    transform: rotate(0deg);
+    stroke-dashoffset: (@process-circumference - 1);
+    stroke-dasharray: @process-circumference;
+  }
+
+  100% {
+    transform: rotate(360deg);
+    stroke-dashoffset: 0;
+    stroke-dasharray: @process-circumference;
+  }
+}
+
+.chase-circle(@process-circumference) {
+  0% {
+    transform: rotate(0deg);
+    stroke-dashoffset: ((3 * @process-circumference) - 1);
+    stroke-dasharray: @process-circumference;
+  }
+
+  25% {
+    stroke-dashoffset: (@process-circumference - 1);
+    stroke-dasharray: (@process-circumference * 0.5);
+  }
+
+  75% {
+    stroke-dashoffset: (@process-circumference - 1);
+    stroke-dasharray: (@process-circumference * 0.75);
+  }
+
+  100% {
+    transform: rotate(360deg);
+    stroke-dashoffset: (@process-circumference - 1);
+    stroke-dasharray: @process-circumference;
+  }
+}
+
+@keyframes process-chase-circle-xxs {
+  .chase-circle(@process-xxs-circumference);
+}
+
+@keyframes process-success-circle-xxs {
+  .complete-circle(@process-xxs-circumference);
+}
+
+@keyframes process-chase-circle-xs {
+  .chase-circle(@process-xs-circumference);
+}
+
+@keyframes process-success-circle-xs {
+  .complete-circle(@process-xs-circumference);
+}
+
+@keyframes process-chase-circle-sm {
+  .chase-circle(@process-sm-circumference);
+}
+
+@keyframes process-success-circle-sm {
+  .complete-circle(@process-sm-circumference);
+}
+
+@keyframes process-chase-circle-xl {
+  .chase-circle(@process-xl-circumference);
+}
+
+@keyframes process-success-circle-xl {
+  .complete-circle(@process-xl-circumference);
+}
+
+@keyframes process-width {
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes process-height {
+  to {
+    top: 0;
+    height: 100%;
+  }
+}
+
+.btn .process:first-child {
+  .margin(left, -12px);
+
+  .margin(right, 12px);
+
+  .float(left);
+}
+
+.btn-block .process:first-child {
+  position: absolute;
+}
+
+.btn .process-circle {
+  transition: stroke 0.5s 0s linear;
+}
+
+.btn-primary,
+.btn-success {
+  .process-circle {
+    stroke: #fff;
+  }
+
+  .process-icon-horizontal,
+  .process-icon-vertical {
+    background-color: #fff;
+  }
+}
+
+.btn:hover,
+.btn:focus {
+  .process-circle {
+    stroke: #fff;
+  }
+
+  .process-icon-horizontal,
+  .process-icon-vertical {
+    background-color: #fff;
+  }
+}
+
+.btn[disabled] {
+  .process-icon-horizontal,
+  .process-icon-vertical {
+    background-color: #fff;
+  }
+}

package/src/styles/less/progress-bars.css

@@ -0,0 +1,64 @@
+.progress {
+  --progress-bar-height: 4px;
+  --progress-bar-border-width: 4px;
+  --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
+  height: 4px;
+  height: var(--progress-bar-height);
+  overflow: hidden;
+  margin-top: calc((24px - 4px) / 2);
+  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 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: calc(4px + 4px);
+  border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
+}
+.progress-bar {
+  float: left;
+  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;
+  font-weight: var(--font-weight-bold);
+  color: #fff;
+  text-align: right;
+  background-color: #0097c7;
+  background-color: var(--color-content-accent);
+  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;
+}
+[dir="rtl"] .progress-bar {
+  text-align: left;
+}
+[dir="rtl"] .progress-bar {
+  right: calc(-1 * var(--progress-bar-start-shift));
+  left: 0;
+}
+.progress-bar-primary {
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+}
+.progress-bar-success {
+  background-color: #008026;
+  background-color: var(--color-content-positive);
+}
+.progress-bar-info {
+  background-color: #0097c7;
+  background-color: var(--color-content-accent);
+}
+.progress-bar-warning {
+  background-color: #9a6500;
+  background-color: var(--color-content-warning);
+}
+.progress-bar-danger {
+  background-color: #cf2929;
+  background-color: var(--color-content-negative);
+}

package/src/styles/less/progress-bars.less

@@ -0,0 +1,55 @@
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+.progress {
+  --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);
+  height: var(--progress-bar-height);
+  overflow: hidden;
+  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: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
+}
+
+.progress-bar {
+  .float(left);
+  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: var(--font-size-16);
+  font-weight: var(--font-weight-bold);
+  color: #fff;
+  .text-align(right);
+  background-color: var(--color-content-accent);
+  border: var(--progress-bar-border-width) solid var(--color-background-screen);
+  border-radius: inherit;
+
+  [dir="rtl"] & {
+    right: calc(-1 * var(--progress-bar-start-shift));
+    left: 0;
+  }
+}
+
+.progress-bar-primary {
+  background-color: var(--color-content-primary);
+}
+
+.progress-bar-success {
+  background-color: var(--color-content-positive);
+}
+
+.progress-bar-info {
+  background-color: var(--color-content-accent);
+}
+
+.progress-bar-warning {
+  background-color: var(--color-content-warning);
+}
+
+.progress-bar-danger {
+  background-color: var(--color-content-negative);
+}

package/src/styles/less/ring.css

@@ -0,0 +1,55 @@
+:root {
+  --ring-outline-width: 2px;
+  --ring-outline-offset: 2px;
+  --ring-outline-color: var(--color-content-primary);
+}
+:root.np-theme-personal,
+:root .np-theme-personal {
+  --ring-outline-color: var(--color-interactive-primary);
+}
+.focus-ring:focus {
+  outline: none;
+}
+.focus-ring:focus-visible {
+  outline: #37517e solid 2px;
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 2px;
+  outline-offset: var(--ring-outline-offset);
+}
+details:focus,
+summary:focus,
+a:focus,
+button:focus,
+input:focus,
+option:focus,
+dialog:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+}
+details:focus-visible,
+summary:focus-visible,
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+option:focus-visible,
+dialog:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: #37517e solid 2px;
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 2px;
+  outline-offset: var(--ring-outline-offset);
+}
+.ring-offset-0 {
+  --ring-outline-offset: 0;
+}
+.ring-inset {
+  --ring-outline-width: 3px;
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+}
+.ring-negative {
+  --ring-outline-color: var(--color-sentiment-negative);
+}

package/src/styles/less/ring.less

@@ -0,0 +1,51 @@
+:root {
+  --ring-outline-width: 2px;
+  --ring-outline-offset: 2px;
+  --ring-outline-color: var(--color-content-primary);
+
+  &.np-theme-personal,
+  & .np-theme-personal {
+    --ring-outline-color: var(--color-interactive-primary);
+  }
+}
+
+.ring() {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+
+.focus-ring {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    .ring();
+  }
+}
+
+details,
+summary,
+a,
+button,
+input,
+option,
+dialog,
+input,
+select,
+textarea {
+  .focus-ring();
+}
+
+.ring-offset-0 {
+  --ring-outline-offset: 0;
+}
+
+.ring-inset {
+  --ring-outline-width: 3px;
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+}
+
+.ring-negative {
+  --ring-outline-color: var(--color-sentiment-negative);
+}