@transferwise/components 46.130.2 → 46.131.0

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

@@ -0,0 +1,164 @@
+.column-layout {
+  width: 100%;
+}
+.column-layout-left,
+.column-layout-right {
+  position: fixed;
+  width: 264px;
+  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(-264px);
+}
+.column-layout-right {
+  right: 0;
+  transform: translateX(264px);
+}
+[dir="rtl"] .column-layout-right {
+  left: 0;
+  right: auto;
+  right: initial;
+}
+.column-layout-left.open,
+.column-layout-right.open {
+  transform: translateX(0);
+}
+.column-layout-main {
+  width: 100%;
+}
+.column-layout-top {
+  position: fixed;
+  top: 0;
+  width: 264px;
+  max-height: 100vh;
+  max-height: 100dvh;
+  overflow-y: auto;
+  backface-visibility: hidden;
+}
+.column-layout-bottom {
+  position: fixed;
+  bottom: 0;
+  width: 264px;
+  padding: 24px;
+  padding: var(--size-24);
+}
+@media (min-width: 992px) {
+  .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: 284px;
+  top: -1000px;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  transition-delay: 0.35s;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+[dir="rtl"] .column-layout-cover .close {
+  right: 284px;
+  left: auto;
+  left: initial;
+}
+.column-layout-cover.in .close {
+  opacity: 1;
+  top: 20px;
+}
+@media (min-width: 992px) {
+  .column-layout-cover {
+    display: none;
+  }
+}
+@media (max-width: 991px) {
+  .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: #37517e;
+    cursor: pointer;
+    z-index: 1055;
+  }
+  [dir="rtl"] .column-layout-cover {
+    right: 0;
+    left: auto;
+    left: initial;
+  }
+  .column-layout-left,
+  .column-layout-right {
+    z-index: 1060;
+  }
+}
+.column-layout-main .container {
+  max-width: 1176px;
+  margin-left: 0;
+}
+[dir="rtl"] .column-layout-main .container {
+  margin-right: 0;
+  margin-left: 0;
+  margin-left: initial;
+}
+.column-layout-brand {
+  padding: 4px 24px;
+  padding: var(--size-4) 24px;
+}
+@media (min-width: 992px) {
+  .column-layout-brand {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+body > .column-layout {
+  min-height: 100vh;
+  min-height: 100dvh;
+  height: 100vh;
+  height: 100dvh;
+}
+.column-layout-left .column-layout-top {
+  background-position: 0 40px;
+  background-position: 0 var(--size-40);
+  background-repeat: no-repeat;
+  background-size: 264px auto;
+  height: 100vh;
+  height: 100dvh;
+}
+@media (min-height: 596px) {
+  .column-layout-left .column-layout-top {
+    background-position: left bottom;
+  }
+  [dir="rtl"] .column-layout-left .column-layout-top {
+    background-position: right bottom;
+  }
+}

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