@transferwise/components 0.0.0-experimental-57e70f3 → 0.0.0-experimental-09066ec

package/src/neptune-css/less/process.less

@@ -1,426 +0,0 @@
-@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/neptune-css/less/progress-bars.less

@@ -1,55 +0,0 @@
-@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/neptune-css/less/ring.less

@@ -1,51 +0,0 @@
-: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);
-}

package/src/neptune-css/less/select.less

@@ -1,88 +0,0 @@
-@import (reference) "../variables/neptune-tokens.less";
-@import (reference) "./mixins/_logical-properties.less";
-
-// Used only by Angular tw-select component
-// http://transferwise.github.io/styleguide-components/index.html#select
-// React Select uses Select.less (`.np-select`) in components package
-.tw-select {
-  .tw-icon {
-    display: inline-block;
-    .margin(right, var(--size-8));
-
-    margin-top: -2px;
-    vertical-align: middle;
-  }
-
-  .tw-dropdown-item {
-    &--clickable {
-      cursor: pointer;
-    }
-
-    &--divider {
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
-      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-      border-bottom-color: var(--color-border-neutral);
-    }
-
-    &--focused {
-      background-color: var(--color-background-neutral);
-    }
-
-    .currency-flag {
-      .margin(right, var(--size-8));
-    }
-
-    > a {
-      white-space: normal;
-    }
-  }
-
-  .dropdown-toggle.btn-input {
-    &.btn-sm {
-      .padding(right, var(--size-32));
-    }
-
-    &.btn-md {
-      .padding(right, var(--size-40));
-    }
-
-    &.btn-lg {
-      .padding(right, var(--size-48));
-    }
-  }
-
-  // tw-chevron-down-icon - Angular component
-  .dropdown-toggle tw-chevron-down-icon > span { // stylelint-disable-line selector-type-no-unknown
-    .margin-shorthand(0);
-  }
-
-  // tw-icon - Angular component
-  .dropdown-toggle tw-icon span.tw-icon { // stylelint-disable-line selector-type-no-unknown
-    position: static;
-    display: inline-block;
-  }
-
-  .circle .tw-icon {
-    vertical-align: middle;
-  }
-}
-
-// open options in custom bottom sheet on mobile screens
-@media (--screen-xs-max) {
-  .tw-select.dropdown-menu.dropdown-menu--open {
-    max-height: 50vh;
-    max-height: 50svh;
-    max-width: 100%;
-    opacity: 1;
-    overflow: auto;
-    position: static;
-    transform: none;
-    visibility: visible;
-    width: 100% !important;
-  }
-}
-
-.tw-select-filter {
-  border: 0;
-}