@transferwise/neptune-css 10.0.6-beta.36 → 10.0.6-beta.38

package/src/less/progress-bars.less

@@ -1,5 +1,6 @@
 @import (reference) '../variables/neptune-tokens.less';
 @import (reference) './variables/_typography.less';
+@import (reference) './mixins/_logical-properties.less';
 
 @progress-height: 2px;
 @progress-pip-size: 8px;
@@ -8,26 +9,30 @@
   height: @progress-height;
   margin-top: calc((var(--size-24) - @progress-height) / 2);
   margin-bottom: calc((var(--size-24) - @progress-height) / 2);
-  background-color: @color-base-smoke-light;
+  background-color: var(--color-background-neutral);
   border-radius: calc(@progress-height / 2);
 }
 
 .progress-bar {
-  float: left;
+  .float(left);
+
   width: 0%;
   height: 100%;
-  font-size: @font-size-base;
+  font-size: var(--font-size-16);
   font-weight: bold;
-  color: @color-base-white;
-  text-align: right;
+  color: var(--color-base-white-light);
+  .text-align(right);
+
   background-color: @color-base-blue-light;
   transition: width 0.6s ease;
 
   &::after {
     content: '';
-    float: right;
+    .float(right);
+
     margin-top: @progress-pip-size / 2 + 1;
-    margin-right: @progress-pip-size / 2;
+    .margin(right, @progress-pip-size / 2);
+
     width: @progress-pip-size;
     height: @progress-pip-size;
     background-color: inherit;
@@ -58,9 +63,9 @@
 }
 
 .progress-bar-warning {
-  background-color: var(--color-warning);
+  background-color: var(--color-content-warning);
 }
 
 .progress-bar-danger {
-  background-color: var(--color-negative);
+  background-color: var(--color-content-negative);
 }

package/src/less/select.less

@@ -1,9 +1,11 @@
 @import (reference) '@transferwise/neptune-css/src/variables/neptune-tokens.less';
+@import (reference) './mixins/_logical-properties.less';
 
 .tw-select {
   .tw-icon {
     display: inline-block;
-    margin-right: var(--size-8);
+    .margin(right, var(--size-8));
+
     margin-top: -2px;
     vertical-align: middle;
   }
@@ -24,7 +26,7 @@
     }
 
     .currency-flag {
-      margin-right: var(--size-8);
+      .margin(right, var(--size-8));
     }
 
     > a {
@@ -34,22 +36,22 @@
 
   .dropdown-toggle.btn-input {
     &.btn-sm {
-      padding-right: var(--size-32);
+      .padding(right, var(--size-32));
     }
 
     &.btn-md {
-      padding-right: var(--size-40);
+      .padding(right, var(--size-40));
     }
 
     &.btn-lg {
-      padding-right: var(--size-48);
+      .padding(right, var(--size-48));
     }
   }
 
   // tw-chevron-down-icon - Angular component
   .dropdown-toggle .tw-select-chevron,
   .dropdown-toggle tw-chevron-down-icon > span { // stylelint-disable-line selector-type-no-unknown
-    margin: 0;
+    .margin-shorthand(0);
   }
 
   // tw-icon - Angular component

package/src/less/sequences.less

@@ -1,17 +1,513 @@
 // TODO: remove bootstrap dependencies
 
-// variables
 @import (reference) '../variables/legacy-variables.less';
-
-// mixins
+@import (reference) './mixins/_logical-properties.less';
 @import (reference) 'bootstrap/less/mixins/background-variant';
 @import (reference) 'bootstrap/less/mixins/gradients';
-@import (reference) 'bootstrap/less/mixins/sequence.less';
-@import (reference) 'bootstrap/less/mixins/text-emphasis';
+@import (reference) './mixins/_sequence.less';
+@import (reference) './mixins/_text-emphasis';
 @import (reference) 'bootstrap/less/mixins/text-overflow';
 @import (reference) './core/_typography-utilities.less';
-@import 'bootstrap/less/sequences.less';
 
-.sequence > li::after {
-  border-width: 0;
+@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: @font-size-small;
+  border-color: var(--color-border-neutral);
+
+  @media (min-width: @screen-md-min) {
+    .padding(right, @sequence-spacing-horizontal);
+
+    font-size: @font-size-base;
+  }
+
+  > li {
+    display: block;
+    line-height: @sequence-step-height;
+    position: relative;
+    border-color: var(--color-border-neutral);
+
+    > a {
+      display: block;
+      text-decoration: none;
+      font-weight: @font-weight-normal;
+      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: @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: @font-weight-normal;
+  }
+}
+
+.sequence-top {
+  > li:first-child::after {
+    top: 0;
+  }
+}
+
+.sequence-inverse {
+  > li {
+    border-color: var(--color-border-neutral);
+
+    > a {
+      color: #fff; // @nav-inverse-link-color;
+    }
+
+    &::after {
+      background-color: var(--color-base-navy-light);
+    }
+  }
+
+  > .active {
+    > a {
+      color: #fff;
+    }
+
+    .small {
+      color: var(--color-content-secondary);
+    }
+
+    &::after,
+    ~ li::after {
+      background-color: var(--color-base-navy-light);
+      background-image: none !important;
+    }
+
+    ~ li::before {
+      border-color: var(--color-base-navy-light);
+    }
+  }
+}
+
+.sequence-variant('info', var(--color-interactive-accent));
+.sequence-variant('primary', var(--color-base-navy-light));
+.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: var(--color-base-navy-light);
+  }
+}
+
+.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;
+  line-height: (@sequence-icon-size - 1px);
+  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(--size-12);
+
+  .icon {
+    font-size: 16px;
+    line-height: (@sequence-icon-size - 1px);
+  }
+
+  .sequence-inverse & {
+    background-color: var(--color-base-navy-light);
+    border-color: #fff;
+  }
+
+  .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: 14px;
+}
+
+.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: 16px;
+
+  .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);
+  }
 }