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

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

@@ -1,511 +0,0 @@
-@import (reference) "../variables/neptune-tokens.less";
-@import (reference) "../variables/legacy-variables.less";
-@import (reference) "./mixins/_logical-properties.less";
-@import (reference) "./mixins/_sequence.less";
-@import (reference) "./mixins/_text-emphasis";
-@import (reference) "./mixins/_text-overflow";
-@import (reference) "./core/_typography-utilities.less";
-
-@pip-offset-sm: ((@sequence-step-height / 2) + @sequence-item-spacing-sm);
-@pip-offset-md: ((@sequence-step-height / 2) + @sequence-item-spacing-md);
-@pip-offset-lg: ((@sequence-step-height / 2) + @sequence-item-spacing-lg);
-
-.sequence {
-  .sequence-vertical-spacing(
-    @sequence-margin,
-    @sequence-item-spacing-sm,
-    @sequence-item-spacing-md,
-    @pip-offset-sm,
-    @pip-offset-md,
-    @sequence-step-height,
-    @sequence-icon-size
-  );
-  .sequence-horizontal-spacing(
-    @sequence-spacing-horizontal,
-    @sequence-pip-size,
-    @sequence-icon-size,
-    @sequence-icon-size-md,
-    @sequence-icon-size-lg
-  );
-
-  position: relative;
-  .margin(left, (@sequence-spacing-horizontal + 1px));
-
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: var(--font-size-14);
-  border-color: var(--color-border-neutral);
-
-  @media (min-width: @screen-md-min) {
-    .padding(right, @sequence-spacing-horizontal);
-
-    font-size: var(--font-size-16);
-  }
-
-  > li {
-    display: block;
-    line-height: @sequence-step-height;
-    position: relative;
-    border-color: var(--color-border-neutral);
-
-    > a {
-      display: block;
-      text-decoration: none;
-      font-weight: var(--font-weight-regular);
-      color: var(--color-content-accent);
-      outline-offset: -1px;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-        color: var(--color-content-accent-hover);
-      }
-
-      &:active {
-        color: var(--color-content-accent-active);
-      }
-    }
-
-    p {
-      margin-bottom: 0;
-      padding-bottom: 8px;
-
-      &:last-child {
-        padding-bottom: 0;
-      }
-
-      .text-max-width();
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    .h1,
-    .h2,
-    .h3,
-    .h4,
-    .btn-toolbar {
-      margin-bottom: 16px;
-    }
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: @sequence-pip-size;
-      height: @sequence-pip-size;
-      border-radius: 50%;
-      z-index: 2;
-      border-width: (@sequence-pip-size / 2);
-      border-style: solid;
-      border-color: inherit;
-      outline: 0;
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: @sequence-line-width;
-      height: 100%;
-      border-style: solid;
-      border-color: inherit;
-      outline: 0;
-      border-width: 0;
-      background-color: var(--color-border-neutral);
-      background-size: 200% 200%;
-      background-position: 0 0%;
-    }
-  }
-
-  .sequence-item-no-pip::before {
-    display: none;
-  }
-
-  > .active {
-    > a {
-      text-decoration: none;
-      color: var(--color-content-primary);
-      font-weight: var(--font-weight-semi-bold);
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-        color: var(--color-content-primary);
-      }
-
-      &:active {
-        color: var(--color-content-primary);
-      }
-    }
-
-    &::before {
-      border-color: var(--color-content-accent);
-    }
-
-    &::after,
-    ~ li::after {
-      background-color: var(--color-border-neutral);
-      background-image: none;
-    }
-
-    ~ li::before {
-      border-color: var(--color-border-neutral);
-    }
-  }
-
-  a {
-    text-decoration: none;
-    font-weight: var(--font-weight-regular);
-  }
-}
-
-.sequence-top {
-  > li:first-child::after {
-    top: 0;
-  }
-}
-
-.sequence-inverse {
-  > li {
-    border-color: var(--color-border-neutral);
-
-    > a {
-      color: @color-navy-content-primary;
-    }
-
-    &::after {
-      background-color: @color-navy-background-elevated;
-    }
-  }
-
-  > .active {
-    > a {
-      color: @color-navy-content-primary;
-    }
-
-    .small,
-    .body-2,
-    .np-text-body-default {
-      color: var(--color-content-secondary);
-    }
-
-    &::after,
-    ~ li::after {
-      background-color: @color-navy-background-elevated;
-      background-image: none !important;
-    }
-
-    ~ li::before {
-      border-color: @color-navy-background-elevated;
-    }
-  }
-}
-
-.sequence-variant("info", var(--color-interactive-accent));
-.sequence-variant("primary", @color-navy-background-elevated);
-.sequence-variant("success", var(--color-interactive-positive));
-.sequence-variant("warning", var(--color-interactive-warning));
-.sequence-variant("danger", var(--color-interactive-negative));
-
-.sequence-hollow {
-  > li::before {
-    border-width: @sequence-line-width;
-    background-color: var(--color-background-screen);
-  }
-
-  > .active {
-    &::before {
-      border-width: (@sequence-pip-size / 2);  // TODO sequence-line-width?
-    }
-
-    ~ li::before {
-      background-color: var(--color-background-screen);
-    }
-  }
-
-  &.sequence-inverse > li::before {
-    background-color: @color-navy-background-elevated;
-  }
-}
-
-.sequence-icon {
-  position: absolute;
-  display: block;
-  .margin(left, (-@sequence-spacing-horizontal - (@sequence-icon-size / 2) + 1px));
-
-  background-color: var(--color-background-screen);
-  border-radius: 50%;
-  width: @sequence-icon-size;
-  height: @sequence-icon-size;
-  z-index: 2;
-  text-align: center;
-  text-decoration: none !important;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--color-border-neutral);
-  top: @sequence-item-spacing-md;
-  font-size: var(--font-size-12);
-
-  .icon {
-    font-size: var(--font-size-16);
-    line-height: (@sequence-icon-size - 1px);
-  }
-
-  .sequence-inverse & {
-    background-color: @color-navy-background-elevated;
-    border-color: @color-navy-content-primary;
-  }
-
-  .sequence a & {
-    color: var(--color-content-accent);
-    border-color: var(--color-interactive-accent);
-  }
-
-  .sequence a:hover &,
-  .sequence a:focus & {
-    color: var(--color-content-accent-hover);
-    border-color: var(--color-interactive-accent-hover);
-  }
-}
-
-.sequence-table {
-  display: table;
-
-  > li {
-    display: table-row;
-
-    > a {
-      position: absolute;
-    }
-
-    > .sequence-table-td,
-    > .sequence-table-th {
-      display: table-cell;
-      padding: var(--size-4) var(--size-12);
-      .padding(left, 0);
-
-      &:last-child {
-        .padding(right, 0);
-      }
-    }
-
-    > .sequence-table-th {
-      color: var(--color-content-primary);
-      white-space: nowrap;
-    }
-
-    &::before {
-      position: initial;
-    }
-
-    &::after {
-      // sequence-table is not compatible with progress variants, due to webkit
-      // ignoring position relative on elements with display: table-row
-      display: none;
-    }
-
-    .sequence-icon {
-      position: initial;
-      margin-top: (-@sequence-margin - 1);
-    }
-
-    &:first-child {
-      .sequence-table-td,
-      .sequence-table-th {
-        padding-top: (@sequence-margin + 1); // Adding/removing one evens out spaces
-      }
-    }
-
-    &:last-child {
-      .sequence-table-td,
-      .sequence-table-th {
-        padding-bottom: (@sequence-margin - 1);
-      }
-    }
-  }
-
-  @pip-offset-table: ((@sequence-step-height / 2) + @sequence-margin);
-  @space-outside-pips-table: ((@sequence-margin * 2) + @sequence-step-height);
-  // Sequence table uses a different approach to the left hand line.
-  &::before {
-    content: " ";
-    width: @sequence-line-width;
-    .left(0);
-
-    position: absolute;
-    border-width: (@sequence-line-width / 2);
-    border-style: solid;
-    border-color: inherit;
-    height: ~"calc(100% - @{space-outside-pips-table})";
-    margin-top: @pip-offset-table;
-    display: block;
-  }
-
-  &.sequence-top::before {
-    height: ~"calc(100% - @{pip-offset-table})";
-    margin-top: 0;
-  }
-
-  &.sequence-bottom::before {
-    height: ~"calc(100% - @{pip-offset-table})";
-  }
-
-  &.sequence-top.sequence-bottom::before {
-    height: 100%;
-  }
-}
-
-.sequence-inverse > li > .sequence-table-th,
-.sequence-inverse > li > .sequence-table-td {
-  color: var(--color-content-secondary);
-}
-
-.sequence-icon-md {
-  width: @sequence-icon-size-md;
-  height: @sequence-icon-size-md;
-  line-height: (@sequence-icon-size-md - 2px);
-  margin-top: -6px;
-  font-size: var(--font-size-14);
-}
-
-.sequence-icon-lg {
-  width: @sequence-icon-size-lg;
-  height: @sequence-icon-size-lg;
-  line-height: (@sequence-icon-size-lg - 2px);
-  margin-top: -6px;
-  font-size: var(--font-size-16);
-
-  .icon {
-    font-size: 22px;
-    line-height: 35px;
-  }
-}
-
-.sequence-lg {
-  .sequence-vertical-spacing(
-    @sequence-margin-lg,
-    8px, //@sequence-item-spacing-md,
-    @sequence-item-spacing-lg,
-    @pip-offset-md,
-    @pip-offset-lg,
-    @sequence-step-height,
-    @sequence-icon-size
-  );
-  .sequence-horizontal-spacing(
-    40px,
-    @sequence-pip-size,
-    @sequence-icon-size,
-    @sequence-icon-size-md,
-    @sequence-icon-size-lg
-  );
-
-  @media (--screen-md) {
-    .sequence-horizontal-spacing(
-      @sequence-spacing-horizontal-lg,
-      @sequence-pip-size,
-      @sequence-icon-size,
-      @sequence-icon-size-md,
-      @sequence-icon-size-lg
-    );
-  }
-}
-
-@speed-per-item: 0.3s;
-@speed-per-pulse: 3s;
-
-.sequence-animate {
-  > li::after {
-    background-size: 200% 200%;
-    animation: @speed-per-item linear 0s both sequence-fill;
-  }
-
-  &.sequence-info {
-    .sequence-animation-variant("info");
-  }
-
-  &.sequence-warning {
-    .sequence-animation-variant("warning");
-  }
-
-  &.sequence-success {
-    .sequence-animation-variant("success");
-  }
-
-  &.sequence-danger {
-    .sequence-animation-variant("danger");
-  }
-
-  .sequence-animation-delays(10);
-
-  > .active ~ li::before,
-  > .active ~ li::after {
-    animation: none;
-  }
-}
-
-@keyframes sequence-fill {
-  from {
-    background-position: 0 100%;
-  }
-
-  to {
-    background-position: 0 0;
-  }
-}
-
-@keyframes sequence-pulse-info {
-  0% {
-    box-shadow: 0 0 0 0 rgba(0, 185, 255, 0.3);
-  }
-
-  50% {
-    box-shadow: 0 0 0 16px rgba(0, 185, 255, 0);
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 rgba(0, 185, 255, 0);
-  }
-}
-
-@keyframes sequence-pulse-warning {
-  0% {
-    box-shadow: 0 0 0 0 rgba(255, 166, 0, 0.3);
-  }
-
-  50% {
-    box-shadow: 0 0 0 16px rgba(255, 166, 0, 0);
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 rgba(255, 166, 0, 0);
-  }
-}
-
-@keyframes sequence-pulse-success {
-  0% {
-    box-shadow: 0 0 0 0 rgba(26, 208, 110, 0.3);
-  }
-
-  50% {
-    box-shadow: 0 0 0 16px rgba(26, 208, 110, 0);
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 rgba(226, 208, 110, 0);
-  }
-}
-
-@keyframes sequence-pulse-danger {
-  0% {
-    box-shadow: 0 0 0 0 rgba(245, 54, 54, 0.3);
-  }
-
-  50% {
-    box-shadow: 0 0 0 16px rgba(245, 54, 54, 0);
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 rgba(245, 54, 54, 0);
-  }
-}