@transferwise/neptune-css 11.0.1-beta-66e6490bc3.13 → 11.0.1

package/src/less/progress-bars.less

@@ -1,4 +1,5 @@
-@import (reference) './mixins/_logical-properties.less';
+@import (reference) '../variables/neptune-tokens.less';
+@import (reference) './variables/_typography.less';
 
 @progress-height: 2px;
 @progress-pip-size: 8px;
@@ -7,30 +8,26 @@
   height: @progress-height;
   margin-top: calc((var(--size-24) - @progress-height) / 2);
   margin-bottom: calc((var(--size-24) - @progress-height) / 2);
-  background-color: var(--color-background-neutral);
+  background-color: @color-base-smoke-light;
   border-radius: calc(@progress-height / 2);
 }
 
 .progress-bar {
-  .float(left);
-
+  float: left;
   width: 0%;
   height: 100%;
-  font-size: var(--font-size-16);
+  font-size: @font-size-base;
   font-weight: bold;
-  color: #fff;
-  .text-align(right);
-
-  background-color: var(--color-content-accent);
+  color: @color-base-white;
+  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;
@@ -49,21 +46,21 @@
 }
 
 .progress-bar-primary {
-  background-color: var(--color-content-primary);
+  background-color: @color-base-navy-light;
 }
 
 .progress-bar-success {
-  background-color: var(--color-content-positive);
+  background-color: @color-base-green-light;
 }
 
 .progress-bar-info {
-  background-color: var(--color-content-accent);
+  background-color: @color-base-blue-light;
 }
 
 .progress-bar-warning {
-  background-color: var(--color-content-warning);
+  background-color: var(--color-warning);
 }
 
 .progress-bar-danger {
-  background-color: var(--color-content-negative);
+  background-color: var(--color-negative);
 }

package/src/less/select.less

@@ -1,11 +1,9 @@
 @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;
   }
@@ -18,7 +16,7 @@
     &--divider {
       border-bottom-style: solid;
       border-bottom-width: 1px;
-      border-bottom-color: var(--color-border-neutral);
+      border-bottom-color: @color-base-smoke-fade;
     }
 
     &--focused {
@@ -26,7 +24,7 @@
     }
 
     .currency-flag {
-      .margin(right, var(--size-8));
+      margin-right: var(--size-8);
     }
 
     > a {
@@ -36,22 +34,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-shorthand(0);
+    margin: 0;
   }
 
   // tw-icon - Angular component

package/src/less/sequences.less

@@ -1,514 +1,17 @@
 // TODO: remove bootstrap dependencies
 
+// variables
 @import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_logical-properties.less';
+
+// mixins
 @import (reference) 'bootstrap/less/mixins/background-variant';
 @import (reference) 'bootstrap/less/mixins/gradients';
-@import (reference) './mixins/_sequence.less';
-@import (reference) './mixins/_text-emphasis';
+@import (reference) 'bootstrap/less/mixins/sequence.less';
+@import (reference) 'bootstrap/less/mixins/text-emphasis';
 @import (reference) 'bootstrap/less/mixins/text-overflow';
 @import (reference) './core/_typography-utilities.less';
+@import 'bootstrap/less/sequences.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: @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: 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: @font-weight-normal;
-  }
-}
-
-.sequence-top {
-  > li:first-child::after {
-    top: 0;
-  }
-}
-
-.sequence-inverse {
-  > li {
-    border-color: var(--color-border-neutral);
-
-    > a {
-      color: var(--color-navy-content-primary);
-    }
-
-    &::after {
-      background-color: var(--color-navy-background-elevated);
-    }
-  }
-
-  > .active {
-    > a {
-      color: var(--color-navy-content-primary);
-    }
-
-    .small,
-    .body-2 {
-      color: var(--color-content-secondary);
-    }
-
-    &::after,
-    ~ li::after {
-      background-color: var(--color-navy-background-elevated);
-      background-image: none !important;
-    }
-
-    ~ li::before {
-      border-color: var(--color-navy-background-elevated);
-    }
-  }
-}
-
-.sequence-variant('info', var(--color-interactive-accent));
-.sequence-variant('primary', var(--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: var(--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;
-  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(--font-size-12);
-
-  .icon {
-    font-size: var(--font-size-16);
-    line-height: (@sequence-icon-size - 1px);
-  }
-
-  .sequence-inverse & {
-    background-color: var(--color-navy-background-elevated);
-    border-color: var(--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);
-  }
+.sequence > li::after {
+  border-width: 0;
 }