@transferwise/neptune-css 0.0.0-experimental-1181467

package/src/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/less/circles.less

@@ -0,0 +1,223 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_circle.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+@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 {
+  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/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;
+      }
+    }
+  }
+}

package/src/less/column-layout.less

@@ -0,0 +1,167 @@
+@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/less/components/_component-animations.less

@@ -0,0 +1,43 @@
+// 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/less/core/_fonts.less

@@ -0,0 +1,97 @@
+/* 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("../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("../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("../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("../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("../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("../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("../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("../fonts/TW-Averta-Regular.woff2") format("woff2"),
+    url("../fonts/TW-Averta-Regular.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-weight: var(--font-weight-semi-bold);
+  font-family: Averta;
+  src:
+    url("../fonts/TW-Averta-Semibold.woff2") format("woff2"),
+    url("../fonts/TW-Averta-Semibold.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-weight: var(--font-weight-bold);
+  font-family: Averta;
+  src:
+    url("../fonts/TW-Averta-Bold.woff2") format("woff2"),
+    url("../fonts/TW-Averta-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Wise Sans";
+  font-style: normal;
+  font-display: swap;
+  src: url("../fonts/WorldwiseSans-Heavy.woff2") format("woff2");
+}