@transferwise/components 46.130.3 → 46.131.1

package/src/styles/less/tooltip.less

@@ -0,0 +1,130 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_logical-properties.less";
+@import (reference) "./mixins/_reset-text.less";
+@import (reference) "./mixins/_theming.less";
+@import (reference) "./core/_typography.less";
+
+//
+// Tooltips
+// --------------------------------------------------
+
+// Base class
+.tooltip {
+  position: absolute;
+  z-index: @zindex-tooltip;
+  display: block;
+
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+
+  .reset-text();
+
+  opacity: 0;
+
+  &.in {
+    opacity: @tooltip-opacity;
+  }
+
+  &.top {
+    margin-top: -3px;
+    padding: @tooltip-arrow-width 0;
+  }
+
+  &.right {
+    .margin(left, 3px);
+
+    padding: 0 @tooltip-arrow-width;
+  }
+
+  &.bottom {
+    margin-top: 3px;
+    padding: @tooltip-arrow-width 0;
+  }
+
+  &.left {
+    .margin(left, -3px);
+
+    padding: 0 @tooltip-arrow-width;
+  }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  .np-text-body-default;
+
+  max-width: @tooltip-max-width;
+  min-width: 120px;
+  padding: var(--size-16) var(--size-16);
+  color: var(--color-content-primary);
+  text-align: center;
+  background-color: var(--color-background-screen);
+  border-radius: @border-radius-base;
+  box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
+
+  .remove-dark-themes-box-shadows();
+}
+
+// Arrows
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
+// stylelint-disable-next-line no-duplicate-selectors
+.tooltip {
+  &.top .tooltip-arrow {
+    bottom: 0;
+    .left(50%);
+
+    .margin(left, -@tooltip-arrow-width);
+
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: var(--color-background-screen);
+  }
+
+  &.right .tooltip-arrow {
+    top: 50%;
+    .left(0);
+
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: var(--color-background-screen);
+  }
+
+  &.left .tooltip-arrow {
+    top: 50%;
+    .right(0);
+
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: var(--color-background-screen);
+  }
+
+  &.bottom .tooltip-arrow {
+    top: 0;
+    .left(50%);
+
+    .margin(left, -@tooltip-arrow-width);
+
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: var(--color-background-screen);
+  }
+}
+
+[data-toggle="tooltip"]:not(.btn) {
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    color: var(--color-content-accent-hover) !important;
+    outline: 0;
+  }
+}
+
+a[data-toggle="tooltip"] {
+  white-space: nowrap;
+}

package/src/styles/less/utilities.css

@@ -0,0 +1,145 @@
+.d-inline-block {
+  display: inline-block;
+}
+.d-inline {
+  display: inline;
+}
+.clearfix::before,
+.clearfix::after {
+  content: " ";
+  display: table;
+}
+.clearfix::after {
+  clear: both;
+}
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.pull-right,
+.pull-xs-right {
+  float: right !important;
+}
+[dir="rtl"] .pull-right,
+[dir="rtl"] .pull-xs-right {
+  float: left !important;
+}
+.pull-left,
+.pull-xs-left {
+  float: left !important;
+}
+[dir="rtl"] .pull-left,
+[dir="rtl"] .pull-xs-left {
+  float: right !important;
+}
+.pull-xs-none {
+  float: none !important;
+}
+@media (min-width: 576px) {
+  .pull-sm-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-sm-left {
+    float: right !important;
+  }
+  .pull-sm-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-sm-right {
+    float: left !important;
+  }
+  .pull-sm-none {
+    float: none !important;
+  }
+}
+@media (min-width: 768px) {
+  .pull-md-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-md-left {
+    float: right !important;
+  }
+  .pull-md-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-md-right {
+    float: left !important;
+  }
+  .pull-md-none {
+    float: none !important;
+  }
+}
+@media (min-width: 992px) {
+  .pull-lg-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-lg-left {
+    float: right !important;
+  }
+  .pull-lg-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-lg-right {
+    float: left !important;
+  }
+  .pull-lg-none {
+    float: none !important;
+  }
+}
+@media (min-width: 1200px) {
+  .pull-xl-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-xl-left {
+    float: right !important;
+  }
+  .pull-xl-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-xl-right {
+    float: left !important;
+  }
+  .pull-xl-none {
+    float: none !important;
+  }
+}
+.pull-left-single-direction {
+  float: left !important;
+}
+.pull-right-single-direction {
+  float: right !important;
+}
+.hide {
+  display: none !important;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+.hidden {
+  display: none !important;
+}
+.affix {
+  position: fixed;
+}
+.rotate90 {
+  transform: rotate(90deg);
+}
+.rotate180 {
+  transform: rotate(180deg);
+}
+.rotate270 {
+  transform: rotate(270deg);
+}
+.rotate-90 {
+  transform: rotate(-90deg);
+}

package/src/styles/less/utilities.less

@@ -0,0 +1,153 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_clearfix.less";
+@import (reference) "./mixins/_center-block.less";
+@import (reference) "./mixins/_hide-text.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+.d-inline-block {
+  display: inline-block;
+}
+
+.d-inline {
+  display: inline;
+}
+
+.clearfix {
+  .clearfix();
+}
+
+.center-block {
+  .center-block();
+}
+
+.pull-right,
+.pull-xs-right {
+  .float(right) !important;
+}
+
+.pull-left,
+.pull-xs-left {
+  .float(left) !important;
+}
+
+.pull-xs-none {
+  float: none !important;
+}
+
+@media (--screen-sm) {
+  .pull-sm-left {
+    .float(left) !important;
+  }
+
+  .pull-sm-right {
+    .float(right) !important;
+  }
+
+  .pull-sm-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-md) {
+  .pull-md-left {
+    .float(left) !important;
+  }
+
+  .pull-md-right {
+    .float(right) !important;
+  }
+
+  .pull-md-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-lg) {
+  .pull-lg-left {
+    .float(left) !important;
+  }
+
+  .pull-lg-right {
+    .float(right) !important;
+  }
+
+  .pull-lg-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-xl) {
+  .pull-xl-left {
+    .float(left) !important;
+  }
+
+  .pull-xl-right {
+    .float(right) !important;
+  }
+
+  .pull-xl-none {
+    float: none !important;
+  }
+}
+
+// Floats not changing direction on RTL.
+
+.pull-left-single-direction {
+  float: left !important;
+}
+
+.pull-right-single-direction {
+  float: right !important;
+}
+
+// Toggling content
+// -------------------------
+
+// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
+
+.hide {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.text-hide {
+  .text-hide();
+}
+
+// Hide from screenreaders and browsers
+//
+// Credit: HTML5 Boilerplate
+
+.hidden {
+  display: none !important;
+}
+
+// For Affix plugin
+// -------------------------
+
+.affix {
+  position: fixed;
+}
+
+.rotate90 {
+  transform: rotate(90deg);
+}
+
+.rotate180 {
+  transform: rotate(180deg);
+}
+
+.rotate270 {
+  transform: rotate(270deg);
+}
+
+.rotate-90 {
+  transform: rotate(-90deg);
+}

package/src/styles/less/wells.css

@@ -0,0 +1,74 @@
+.well,
+.well-xs {
+  min-height: 24px;
+  min-height: var(--size-24);
+  margin-bottom: 24px;
+  margin-bottom: var(--size-24);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  border: solid 1px rgba(0,0,0,0.10196);
+  border: solid 1px var(--color-border-neutral);
+  padding: 24px;
+  padding: var(--size-24);
+  box-shadow: none;
+}
+@media only screen and (min-width: 576px) {
+  .well-sm {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .well-md {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .well-lg {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .well-xl {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}

package/src/styles/less/wells.less

@@ -0,0 +1,37 @@
+.well() {
+  min-height: var(--size-24);
+  margin-bottom: var(--size-24);
+  border-radius: var(--radius-small);
+  border: solid 1px var(--color-border-neutral);
+  padding: var(--size-24);
+  box-shadow: none;
+}
+
+.sized-well(@size) {
+  // stylelint-disable-next-line media-feature-name-no-unknown
+  @media only screen and (@size) {
+    .well();
+  }
+}
+
+// Sizes
+.well,
+.well-xs {
+  .well();
+}
+
+.well-sm {
+  .sized-well(--screen-sm);
+}
+
+.well-md {
+  .sized-well(--screen-md);
+}
+
+.well-lg {
+  .sized-well(--screen-lg);
+}
+
+.well-xl {
+  .sized-well(--screen-xl);
+}

package/src/styles/props/custom-media.css

@@ -0,0 +1,11 @@
+@custom-media --screen-xs (min-width: 480px);
+@custom-media --screen-xs-max (max-width: 575px); /* --screen-sm - 1 */
+@custom-media --screen-sm (min-width: 576px);
+@custom-media --screen-sm-max (max-width: 767px); /* --screen-md - 1 */
+@custom-media --screen-md (min-width: 768px);
+@custom-media --screen-md-max (max-width: 991px); /* --screen-lg - 1 */
+@custom-media --screen-lg (min-width: 992px);
+@custom-media --screen-lg-max (max-width: 1199px); /* --screen-xl - 1 */
+@custom-media --screen-xl (min-width: 1200px);
+
+@custom-media --screen-400-zoom (max-width: 320px); /* ~400% zoom viewport */

package/src/styles/props/legacy-custom-props.css

@@ -0,0 +1,69 @@
+/*
+  DEPRECATED
+  Use neptune-tokens.css instead.
+  If the token you want isn't available there, raise an issue in @transferwise/neptune-tokens.
+*/
+:root {
+  --border-radius: var(--radius-small);
+  --spacer: 8px;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-56: 56px;
+  --space-64: 64px;
+  --color-text-link-hover: #00a4df;
+  --color-text-link-active: #008ec0;
+  --brand-white: #fff;
+  --link-color: #00b9ff;
+  --brand-pale-blue: #dbf0fd;
+  --brand-navy-minus-20: #253655;
+  --brand-navy-minus-10: #2e4369;
+  --brand-navy: #37517e;
+  --brand-blue-minus-20: #111824;
+  --brand-blue-minus-10: #192439;
+  --brand-blue: #223049;
+  --brand-light-blue-minus-10: #00a4df;
+  --brand-light-blue: #00b9ff;
+  --brand-grey-plus-10: #6f8691;
+  --brand-smoke-minus-10: #a8aaac;
+  --brand-smoke: #d3d5d8;
+  --brand-smoke-plus-10: #e2e6e8;
+  --brand-smoke-plus-20: #f2f5f7;
+  --brand-green-minus-10: #28b862;
+  --brand-green: #2ed06e;
+  --gray-base: #f2f5f7;
+  --gray-darker: #384347;
+  --gray-light: #829ca9;
+  --brand-primary: #37517e;
+  --body-bg: #fff;
+  --text-bold-color: #2e4369;
+  --font-size-xx-large: 2.8rem; /* 42px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-x-large: 1.8666666667rem; /* 28px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-large: 1.4666666667rem; /* 22px */
+  --font-size-medium: 1.2rem; /* 18px */
+  --font-size: 0.9375rem; /* 15px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-small: 0.9333333333rem; /* 14px */
+  --font-size-x-small: 0.8rem; /* 12px */
+  --line-height: 1.6; /* 24/15 */
+}
+
+@media (--screen-md) {
+  :root {
+    --font-size-xx-large: 2.625rem; /* 42px */
+    --font-size-x-large: 1.75rem; /* 28px */
+    --font-size-large: 1.375rem; /* 22px */
+    --font-size-medium: 1.125rem; /* 18px */
+    --font-size: 1rem; /* 16px */
+    --font-size-small: 0.875rem; /* 14px */
+    --font-size-x-small: 0.75rem; /* 12px */
+    --line-height: 1.5; /* 24/16px */
+  }
+}

package/src/styles/props/neptune-tokens.css

@@ -0,0 +1,11 @@
+@import "@transferwise/neptune-tokens/tokens.css";
+
+/* DEPRECATED, use neptune-tokens instead: https://transferwise.github.io/neptune-web/styles/tokens/Colors */
+:root {
+  --color-primary: #37517e;
+  --color-secondary: #5d7079;
+  --color-accent: #00b9ff;
+  --color-positive: #2ed06e;
+  --color-negative: #f53636;
+  --color-warning: #ffa600;
+}