@transferwise/components 46.130.2 → 46.131.0

package/src/styles/less/chevron.css

@@ -0,0 +1,35 @@
+.tw-chevron {
+  display: inline-block;
+  transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
+}
+.tw-chevron.top {
+  transform: rotate(0deg);
+}
+.tw-chevron.right {
+  transform: rotate(90deg);
+}
+[dir="rtl"] .tw-chevron.right {
+  transform: rotate(-90deg);
+}
+.tw-chevron.right-sigle-direction {
+  transform: rotate(90deg) !important;
+}
+.tw-chevron.bottom {
+  transform: rotate(180deg);
+}
+.tw-chevron.left {
+  transform: rotate(270deg);
+}
+[dir="rtl"] .tw-chevron.left {
+  transform: rotate(-270deg);
+}
+.tw-chevron.left-single-direction {
+  transform: rotate(270deg) !important;
+}
+.chevron-color {
+  color: #0097c7;
+  color: var(--color-content-accent);
+}
+.np-theme-personal .chevron-color {
+  color: var(--color-interactive-primary);
+}

package/src/styles/less/chevron.less

@@ -0,0 +1,39 @@
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+.tw-chevron {
+  display: inline-block;
+  transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
+
+  &.top {
+    transform: rotate(0deg);
+  }
+
+  &.right {
+    .rotate(90deg);
+  }
+
+  &.right-sigle-direction {
+    transform: rotate(+90deg) !important;
+  }
+
+  &.bottom {
+    transform: rotate(180deg);
+  }
+
+  &.left {
+    .rotate(270deg);
+  }
+
+  &.left-single-direction {
+    transform: rotate(270deg) !important;
+  }
+}
+
+.chevron-color {
+  color: var(--color-content-accent);
+
+  .np-theme-personal & {
+    color: var(--color-interactive-primary);
+  }
+}

package/src/styles/less/circles.css

@@ -0,0 +1,248 @@
+/**
+ * DEPRECATED: use <Circle /> component instead
+ */
+.circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #37517e;
+  color: var(--color-content-primary);
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+  background-color: #fff;
+  border-radius: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+  transition: background-color ease 0.15s, border-color ease 0.15s, color ease 0.15s;
+}
+.circle.active {
+  border-color: #0081ba;
+  border-color: var(--color-interactive-accent-active);
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.circle img {
+  width: 100%;
+  border-radius: 50%;
+  vertical-align: baseline;
+  vertical-align: initial;
+}
+img.circle {
+  background-color: transparent;
+  border-radius: 50%;
+}
+.circle[style] {
+  border: 0;
+  border-radius: 50% !important;
+}
+a.circle[style]:hover {
+  border: 1px solid #00a2dd;
+  border: 1px solid var(--color-interactive-accent);
+}
+.navbar-nav > li > a .circle {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+.navbar-nav > li > a .circle .icon {
+  line-height: 40px;
+}
+.circle,
+.circle-sm {
+  font-size: 16px;
+  width: 48px;
+  height: 48px;
+  line-height: 48px;
+}
+.circle-xs {
+  font-size: 10px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+}
+.circle-md {
+  font-size: 24px;
+  width: 72px;
+  height: 72px;
+  line-height: 72px;
+}
+.circle-lg {
+  font-size: 32px;
+  width: 96px;
+  height: 96px;
+  line-height: 96px;
+}
+a.circle,
+a.circle .icon {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+a:hover .circle,
+a.circle:hover {
+  border-color: #00a2dd;
+  border-color: var(--color-interactive-accent);
+  color: #0097c7;
+  color: var(--color-content-accent);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+a:hover .circle.active,
+a.circle.active:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #fff;
+}
+/* TODO this could be tidier, ideally change the general link behaviour */
+.dropdown-menu li a:hover .circle {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  border-color: #fff;
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.dropdown-menu .disabled a:hover .circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border-color: transparent;
+}
+.circle-inverse {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.circle-responsive {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  width: 24px;
+  width: var(--size-24);
+  height: 24px;
+  height: var(--size-24);
+  line-height: 24px;
+  line-height: var(--size-24);
+  font-size: 16px;
+  overflow: visible;
+}
+.circle-responsive .icon {
+  font-size: 24px;
+  line-height: 24px;
+}
+.circle-responsive.circle-lg {
+  border-radius: 50%;
+  background-color: #fff;
+  font-size: 16px;
+  width: 48px;
+  height: 48px;
+  line-height: 48px;
+}
+.circle-responsive.circle-lg.circle-inverse {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+@media (min-width: 576px) {
+  .circle-responsive {
+    border-radius: 50%;
+    background-color: #fff;
+  }
+  .circle-responsive.circle,
+  .circle-responsive.circle-sm,
+  .circle-responsive.circle-md {
+    font-size: 16px;
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+  }
+  .circle-responsive.circle-lg {
+    font-size: 24px;
+    width: 72px;
+    height: 72px;
+    line-height: 72px;
+  }
+  .circle-responsive.circle-inverse {
+    background-color: rgba(134,167,189,0.10196);
+    background-color: var(--color-background-neutral);
+  }
+}
+@media (--screen-md-min) {
+  .circle-responsive.circle-md {
+    font-size: 24px;
+    width: 72px;
+    height: 72px;
+    line-height: 72px;
+  }
+  .circle-responsive.circle-lg {
+    font-size: 32px;
+    width: 96px;
+    height: 96px;
+    line-height: 96px;
+  }
+}
+.dropdown-menu li > .circle:first-child,
+.dropdown-menu li > a > .circle:first-child {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .dropdown-menu li > .circle:first-child,
+[dir="rtl"] .dropdown-menu li > a > .circle:first-child {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
+}
+.dropdown-menu li > .circle-sm:first-child,
+.dropdown-menu li > a > .circle-sm:first-child {
+  margin-right: 12px;
+  margin-right: var(--size-12);
+}
+[dir="rtl"] .dropdown-menu li > .circle-sm:first-child,
+[dir="rtl"] .dropdown-menu li > a > .circle-sm:first-child {
+  margin-left: 12px;
+  margin-left: var(--size-12);
+  margin-right: 0;
+  margin-right: initial;
+}
+.btn .circle:first-child {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .btn .circle:first-child {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
+}
+.btn .circle-sm:first-child {
+  margin-right: 12px;
+  margin-right: var(--size-12);
+}
+[dir="rtl"] .btn .circle-sm:first-child {
+  margin-left: 12px;
+  margin-left: var(--size-12);
+  margin-right: 0;
+  margin-right: initial;
+}
+.btn .circle .tw-icon,
+.dropdown-menu li .circle .tw-icon {
+  float: none;
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+[dir="rtl"] .btn .circle .tw-icon,
+[dir="rtl"] .dropdown-menu li .circle .tw-icon {
+  margin-right: 0;
+  margin-left: 0;
+  margin-left: initial;
+}
+[dir="rtl"] .btn .circle .tw-icon,
+[dir="rtl"] .dropdown-menu li .circle .tw-icon {
+  margin-left: 0;
+  margin-right: 0;
+  margin-right: initial;
+}

package/src/styles/less/circles.less

@@ -0,0 +1,233 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+/**
+ * DEPRECATED: use <Circle /> component instead
+ */
+
+@circle-xs-diameter: 24px;
+@circle-sm-diameter: 48px;
+@circle-md-diameter: 72px;
+@circle-lg-diameter: 96px;
+
+@circle-xs-font-size: 10px;
+@circle-sm-font-size: 16px;
+@circle-md-font-size: 24px;
+@circle-lg-font-size: 32px;
+
+@circle-xs-icon-size: 14px;
+@circle-sm-icon-size: 24px;
+@circle-md-icon-size: 32px;
+@circle-lg-icon-size: 40px;
+
+@circle-inverse-bg: var(--color-background-neutral);
+
+.circle-variant(@diameter; @font-size; @icon-size) {
+  font-size: @font-size;
+  width: @diameter;
+  height: @diameter;
+  line-height: @diameter;
+}
+
+.circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-content-primary);
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+  background-color: #fff;
+  border-radius: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+  transition:
+    background-color ease @transition-duration,
+    border-color ease @transition-duration,
+    color ease @transition-duration;
+
+  &.active {
+    border-color: var(--color-interactive-accent-active);
+    background-color: var(--color-interactive-accent-active);
+  }
+
+  img {
+    width: 100%;
+    border-radius: 50%;
+    vertical-align: initial;
+  }
+
+  img& {
+    background-color: transparent;
+    border-radius: 50%;
+  }
+
+  &[style] {
+    border: 0;
+    border-radius: 50% !important;
+  }
+
+  a& {
+    &[style]:hover {
+      border: 1px solid var(--color-interactive-accent);
+    }
+  }
+
+  .navbar-nav > li > a & {
+    width: @navbar-line-height;
+    height: @navbar-line-height;
+    line-height: @navbar-line-height;
+
+    .icon {
+      line-height: @navbar-line-height;
+    }
+  }
+}
+
+.circle,
+.circle-sm {
+  .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
+}
+
+.circle-xs {
+  .circle-variant(@circle-xs-diameter, @circle-xs-font-size, @circle-xs-icon-size);
+}
+
+.circle-md {
+  .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
+}
+
+.circle-lg {
+  .circle-variant(@circle-lg-diameter, @circle-lg-font-size, @circle-lg-icon-size);
+}
+
+a.circle,
+a.circle .icon {
+  text-decoration: none;
+}
+
+a:hover .circle,
+a.circle:hover {
+  border-color: var(--color-interactive-accent);
+  color: var(--color-content-accent);
+  text-decoration: none;
+}
+
+a:hover .circle.active,
+a.circle.active:hover {
+  text-decoration: none;
+  color: #fff;
+}
+
+/* TODO this could be tidier, ideally change the general link behaviour */
+
+.dropdown-menu li a:hover .circle {
+  background-color: var(--color-background-screen);
+  border-color: #fff;
+  color: var(--color-content-primary);
+}
+
+.dropdown-menu .disabled a:hover .circle {
+  background-color: @circle-inverse-bg;
+  border-color: transparent;
+}
+
+.circle-inverse {
+  background-color: @circle-inverse-bg;
+}
+
+.circle-responsive {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  width: var(--size-24);
+  height: var(--size-24);
+  line-height: var(--size-24);
+  font-size: @circle-sm-font-size;
+  overflow: visible;
+
+  .icon {
+    font-size: @circle-sm-icon-size;
+    line-height: @circle-sm-icon-size;
+  }
+
+  &.circle-lg {
+    border-radius: 50%;
+    background-color: #fff;
+
+    &.circle-inverse {
+      background-color: var(--color-background-neutral);
+    }
+    .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
+  }
+}
+
+@media (--screen-sm) {
+  .circle-responsive {
+    border-radius: 50%;
+    background-color: #fff;
+
+    &.circle,
+    &.circle-sm,
+    &.circle-md {
+      .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
+    }
+
+    &.circle-lg {
+      .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
+    }
+
+    &.circle-inverse {
+      background-color: var(--color-background-neutral);
+    }
+  }
+}
+
+@media (--screen-md-min) {
+  .circle-responsive {
+    &.circle-md {
+      .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
+    }
+
+    &.circle-lg {
+      .circle-variant(@circle-lg-diameter, @circle-lg-font-size, @circle-lg-icon-size);
+    }
+  }
+}
+
+.dropdown-menu {
+  li,
+  li > a {
+    > .circle:first-child {
+      .margin(right, var(--size-8));
+    }
+
+    > .circle-sm:first-child {
+      .margin(right, var(--size-12));
+    }
+  }
+}
+
+.btn {
+  .circle:first-child {
+    .margin(right, var(--size-8));
+  }
+
+  .circle-sm:first-child {
+    .margin(right, var(--size-12));
+  }
+}
+
+.btn .circle .tw-icon,
+.dropdown-menu li .circle .tw-icon {
+  float: none;
+  margin-top: 0;
+  .margin(left, 0);
+
+  .margin(right, 0);
+}

package/src/styles/less/close.css

@@ -0,0 +1,47 @@
+.close {
+  float: right;
+  color: #0097c7;
+  color: var(--color-content-accent);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+[dir="rtl"] .close {
+  float: left;
+}
+.np-theme-personal .close {
+  color: var(--color-interactive-primary);
+}
+.close:hover {
+  color: #0084b3;
+  color: var(--color-content-accent-hover);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+.np-theme-personal .close:hover {
+  color: var(--color-interactive-primary-hover);
+}
+.close:focus {
+  outline: none;
+}
+.close:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.close:active {
+  color: #0077a5;
+  color: var(--color-content-accent-active);
+}
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.np-theme-personal button.close:hover {
+  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+  background: initial;
+}

package/src/styles/less/close.less

@@ -0,0 +1,48 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_logical-properties.less";
+@import (reference) "./ring.less";
+
+.close {
+  .float(right);
+
+  color: var(--color-content-accent);
+  text-decoration: none;
+
+  .np-theme-personal & {
+    color: var(--color-interactive-primary);
+  }
+
+  &:hover {
+    color: var(--color-content-accent-hover);
+    text-decoration: none;
+    cursor: pointer;
+
+    .np-theme-personal & {
+      color: var(--color-interactive-primary-hover);
+    }
+  }
+
+  .focus-ring();
+
+  &:active {
+    color: var(--color-content-accent-active);
+  }
+
+  // Additional properties for button version
+  // iOS requires the button element instead of an anchor tag.
+  // If you want the anchor version, it requires `href="#"`.
+  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+  button& {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    appearance: none;
+
+    .np-theme-personal & {
+      &:hover {
+        background: initial;
+      }
+    }
+  }
+}