@transferwise/components 46.130.3 → 46.131.0

package/src/styles/less/currency-flags.css

@@ -0,0 +1,46 @@
+/* DEPRECATED: use <Flag /> component instead */
+.currency-flag {
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.6);
+}
+.np-theme-personal .currency-flag {
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10196);
+  box-shadow: inset 0 0 0 1px var(--color-border-neutral);
+  border-radius: 50%;
+}
+.btn .currency-flag,
+.dropdown-menu li .currency-flag {
+  vertical-align: -3px;
+  line-height: 16px;
+}
+.btn-sm .currency-flag,
+.form-group-sm .btn .currency-flag,
+.input-group-sm .btn .currency-flag {
+  vertical-align: -4px;
+}
+.btn-lg .currency-flag,
+.form-group-lg .btn .currency-flag,
+.input-group-lg .btn .currency-flag {
+  vertical-align: -1px;
+}
+li > .currency-flag:first-child,
+li > a > .currency-flag:first-child {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] li > .currency-flag:first-child,
+[dir="rtl"] li > a > .currency-flag:first-child {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
+}
+.btn .currency-flag:first-child {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .btn .currency-flag:first-child {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
+}

package/src/styles/less/currency-flags.less

@@ -0,0 +1,42 @@
+@import (reference) "./mixins/_logical-properties.less";
+
+/* DEPRECATED: use <Flag /> component instead */
+.currency-flag {
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.6);
+
+  .np-theme-personal & {
+    box-shadow: inset 0 0 0 1px var(--color-border-neutral);
+    border-radius: 50%;
+  }
+
+  .btn &,
+  .dropdown-menu li & {
+    vertical-align: -3px;
+    line-height: 16px;
+  }
+
+  .btn-sm &,
+  .form-group-sm .btn &,
+  .input-group-sm .btn & {
+    vertical-align: -4px;
+  }
+
+  .btn-lg &,
+  .form-group-lg .btn &,
+  .input-group-lg .btn & {
+    vertical-align: -1px;
+  }
+}
+
+li,
+li > a {
+  > .currency-flag:first-child {
+    .margin(right, var(--size-8));
+  }
+}
+
+.btn {
+  .currency-flag:first-child {
+    .margin(right, var(--size-8));
+  }
+}

package/src/styles/less/decision.css

@@ -0,0 +1,136 @@
+.decision {
+  cursor: pointer;
+  margin-bottom: 0 !important;
+  border: 0;
+  align-items: center;
+  transition: background-color ease 350ms;
+  background-color: transparent;
+  display: block;
+}
+.decision:not(.np-option):focus-visible,
+.decision:not(.np-option):has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
+  outline-offset: var(--ring-outline-offset);
+  --ring-outline-offset: 0;
+}
+.decision__title {
+  margin: 0;
+  color: #37517e;
+  color: var(--color-content-primary);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
+  font-size: 1.125rem;
+  font-size: var(--font-size-18);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.014em;
+  line-height: 135%;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .decision__title {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .decision__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .decision__title {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .decision__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+.decision__title + p,
+.decision__title + ul:not(.list-unstyled),
+.decision__title + ol:not(.list-unstyled) {
+  margin-top: 8px;
+  margin-top: var(--size-8);
+}
+.decision__content {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
+.decision + .decision {
+  margin-top: -1px;
+}
+.decision dd:last-child {
+  margin-bottom: 0;
+}
+.decision dl {
+  margin-top: 8px;
+  margin-top: var(--size-8);
+}
+.decision .media,
+.decision.media {
+  width: 100%;
+  padding: 16px 12px;
+  padding: var(--size-16) var(--size-12);
+}
+.np-theme-personal .decision .media,
+.np-theme-personal .decision.media {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.decision .media .media-left,
+.decision.media .media-left {
+  display: none;
+}
+.decision .media .media-body,
+.decision.media .media-body {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+@media (min-width: 480px) {
+  .decision .media .media-left,
+  .decision.media .media-left {
+    display: block;
+  }
+}
+.decision:not(.disabled):hover {
+  background-color: rgba(134,167,189,0.07059);
+}
+.decision:not(.disabled):hover .circle-inverse {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.np-theme-personal .decision:not(.disabled):hover .circle-inverse {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.decision:not(.disabled):hover .tw-checkbox-button,
+.decision:not(.disabled):hover .tw-radio-button {
+  border-color: #00a2dd;
+  border-color: var(--color-interactive-accent);
+}
+.np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,
+.np-theme-personal .decision:not(.disabled):hover .tw-radio-button {
+  border-color: transparent;
+}
+.decision.decision-complex {
+  align-items: initial;
+}
+.np-theme-personal .decision:not(.disabled):hover {
+  background-color: var(--color-background-screen-hover);
+}

package/src/styles/less/decision.less

@@ -0,0 +1,98 @@
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "./core/_typography.less";
+@import (reference) "./ring.less";
+
+.decision {
+  cursor: pointer;
+  margin-bottom: 0 !important;
+  border: 0;
+  align-items: center;
+  transition: background-color ease 350ms;
+  background-color: transparent;
+  display: block;
+
+  &:not(.np-option):focus-visible,
+  &:not(.np-option):has(:focus-visible) {
+    .ring();
+    .ring-offset-0();
+  }
+
+  &__title {
+    .np-text-title-body();
+  }
+
+  &__content {
+    .np-text-body-default;
+
+    margin-top: var(--size-4);
+  }
+
+  + .decision {
+    margin-top: -1px;
+  }
+
+  dd:last-child {
+    margin-bottom: 0;
+  }
+
+  dl {
+    margin-top: var(--size-8);
+  }
+
+  .media,
+  &.media {
+    width: 100%;
+    padding: var(--size-16) var(--size-12);
+
+    .np-theme-personal & {
+      padding: var(--size-16);
+    }
+
+    .media-left {
+      display: none;
+    }
+
+    .media-body {
+      color: var(--color-content-secondary);
+    }
+
+    @media (--screen-xs) {
+      .media-left {
+        display: block;
+      }
+    }
+  }
+
+  &:not(.disabled):hover {
+    // TODO: Replace this color on rebrand.
+    // Custom hover color added to distinct decision hover color from product page backgrounds.
+    background-color: #86a7bd12;
+
+    .circle-inverse {
+      background-color: var(--color-background-screen);
+
+      .np-theme-personal & {
+        background-color: var(--color-background-neutral);
+      }
+    }
+
+    .tw-checkbox-button,
+    .tw-radio-button {
+      border-color: var(--color-interactive-accent);
+
+      .np-theme-personal & {
+        border-color: transparent;
+      }
+    }
+  }
+
+  &.decision-complex {
+    align-items: initial;
+  }
+
+  .np-theme-personal & {
+    &:not(.disabled):hover {
+      background-color: var(--color-background-screen-hover);
+    }
+  }
+}