@transferwise/components 46.130.2 → 46.131.0

package/src/styles/less/sequences.less

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