@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-9f6647e

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

@@ -1,39 +0,0 @@
-@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/neptune-css/less/circles.less

@@ -1,233 +0,0 @@
-@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/neptune-css/less/close.less

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

package/src/neptune-css/less/column-layout.less

@@ -1,167 +0,0 @@
-@import (reference) "../variables/neptune-tokens.less";
-@import (reference) "../variables/legacy-variables.less";
-@import (reference) "./mixins/_logical-properties.less";
-
-.column-layout {
-  width: 100%;
-}
-
-.column-layout-left,
-.column-layout-right {
-  position: fixed;
-  width: @column-width;
-  vertical-align: top;
-  height: 100%;
-  z-index: 3;
-  transition: transform ease 0.5s;
-  top: 0;
-  max-height: 100vh;
-  max-height: 100dvh;
-  overflow-y: auto;
-}
-
-.column-layout-left {
-  transform: translateX(-@column-width);
-}
-
-.column-layout-right {
-  .right(0);
-
-  transform: translateX(@column-width);
-}
-
-.column-layout-left.open,
-.column-layout-right.open {
-  transform: translateX(0);
-}
-
-.column-layout-main {
-  width: 100%;
-}
-
-.column-layout-top {
-  position: fixed;
-  top: 0;
-  width: @column-width;
-  max-height: 100vh;
-  max-height: 100dvh;
-  overflow-y: auto;
-  backface-visibility: hidden;
-}
-
-.column-layout-bottom {
-  position: fixed;
-  bottom: 0;
-  width: @column-width;
-  padding: var(--size-24);
-}
-
-@media (--screen-lg) {
-  .column-layout {
-    display: table;
-  }
-
-  .column-layout-left,
-  .column-layout-right {
-    position: relative;
-    display: table-cell;
-    transform: none;
-  }
-
-  .column-layout-main {
-    display: table-cell;
-    vertical-align: top;
-    width: auto;
-  }
-}
-
-.column-layout-cover.in {
-  width: 100%;
-  height: 100%;
-  opacity: 0.9;
-}
-
-.column-layout-cover .close {
-  position: absolute;
-  .left(@column-width + 20px);
-
-  top: -1000px;
-  opacity: 0;
-  transition: opacity 0.35s ease;
-  transition-delay: 0.35s;
-  text-decoration: none;
-}
-
-.column-layout-cover.in .close {
-  opacity: 1;
-  top: 20px;
-}
-
-@media (min-width: @screen-lg-min) {
-  .column-layout-cover {
-    display: none;
-  }
-}
-
-@media (--screen-md-max) {
-  // apply to body to prevent background scrolling
-  .column-layout-open {
-    overflow: hidden;
-  }
-
-  .column-layout-cover {
-    position: fixed;
-    display: block;
-    top: 0;
-    .left(0);
-
-    width: 0;
-    height: 0;
-    opacity: 0;
-    transition: opacity 0.35s ease;
-    background-color: @color-navy-background-elevated;
-    cursor: pointer;
-    z-index: @zindex-mobile-nav-background;
-  }
-
-  .column-layout-left,
-  .column-layout-right {
-    z-index: @zindex-mobile-nav;
-  }
-}
-
-.column-layout-main .container {
-  // ensures we use the full width on default mac screen
-  max-width: 1176px;
-  .margin(left,0);
-}
-
-.column-layout-brand {
-  padding: var(--size-4) @spacing-1-tablet;
-}
-
-@media (--screen-lg) {
-  .column-layout-brand {
-    padding-left: @spacing-1-desktop;
-    padding-right: @spacing-1-desktop;
-  }
-}
-
-body > .column-layout {
-  min-height: 100vh;
-  min-height: 100dvh;
-  height: 100vh;
-  height: 100dvh;
-}
-
-.column-layout-left .column-layout-top {
-  background-position: 0 var(--size-40);
-  background-repeat: no-repeat;
-  background-size: @column-width auto;
-  height: 100vh;
-  height: 100dvh;
-
-  @media (min-height: 596px) {
-    .background-position(left, bottom);
-  }
-}

package/src/neptune-css/less/components/_component-animations.less

@@ -1,43 +0,0 @@
-// Component animations
-.fade {
-  transition: opacity 0.15s linear;
-  opacity: 0;
-
-  &.in {
-    opacity: 1;
-  }
-}
-
-.collapse {
-  display: none;
-
-  &.in {
-    display: block;
-  }
-
-  tr&.in {
-    display: table-row;
-  }
-
-  tbody&.in {
-    display: table-row-group;
-  }
-}
-
-.collapsing {
-  position: relative;
-  overflow: hidden;
-  height: 0;
-  transition-timing-function: ease;
-  transition-duration: 0.35s;
-  transition-property: height, visibility;
-}
-
-[data-toggle="collapse"] {
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-  }
-}

package/src/neptune-css/less/core/_fonts.less

@@ -1,97 +0,0 @@
-/* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./neptune-css/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./neptune-css/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./neptune-css/fonts/inter-greek-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0370-03FF;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./neptune-css/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+1F00-1FFF;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./neptune-css/fonts/inter-latin-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./neptune-css/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("./neptune-css/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-@font-face {
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src:
-    url("./neptune-css/fonts/TW-Averta-Regular.woff2") format("woff2"),
-    url("./neptune-css/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src:
-    url("./neptune-css/fonts/TW-Averta-Semibold.woff2") format("woff2"),
-    url("./neptune-css/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src:
-    url("./neptune-css/fonts/TW-Averta-Bold.woff2") format("woff2"),
-    url("./neptune-css/fonts/TW-Averta-Bold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Wise Sans";
-  font-style: normal;
-  font-display: swap;
-  src: url("./neptune-css/fonts/WiseSans-Heavy.woff2") format("woff2");
-}