@transferwise/components 46.130.3 → 46.131.1

package/src/styles/less/popovers.css

@@ -0,0 +1,661 @@
+.close {
+  float: right;
+  color: #0097c7;
+  color: var(--color-content-accent);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+[dir="rtl"] .close {
+  float: left;
+}
+.np-theme-personal .close {
+  color: var(--color-interactive-primary);
+}
+.close:hover {
+  color: #0084b3;
+  color: var(--color-content-accent-hover);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+.np-theme-personal .close:hover {
+  color: var(--color-interactive-primary-hover);
+}
+.close:focus {
+  outline: none;
+}
+.close:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.close:active {
+  color: #0077a5;
+  color: var(--color-content-accent-active);
+}
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.np-theme-personal button.close:hover {
+  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+  background: initial;
+}
+.popover {
+  top: 0;
+  left: 0;
+  z-index: 1060;
+  width: 276px;
+  padding: 18px 24px;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: 24px;
+  line-height: var(--size-24);
+  text-align: left;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  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);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  background-clip: padding-box;
+  border-radius: 3px;
+  box-shadow: 0 20px 66px 0 rgba(34, 48, 73, 0.2);
+  position: absolute;
+}
+[dir="rtl"] .popover {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover {
+  text-align: right;
+}
+.np-theme-personal--forest-green .popover,
+.np-theme-personal--bright-green .popover,
+.np-theme-personal--dark .popover {
+  box-shadow: none;
+}
+.popover.animate {
+  transition: transform 0.25s;
+}
+.popover.scale-down {
+  transform: scale(0);
+}
+.popover.top {
+  margin-top: -14px;
+  transform-origin: 50% 100%;
+}
+.popover.top-left {
+  margin-top: -14px;
+  transform-origin: calc(100% - 29px) 100%;
+}
+.popover.top-right {
+  margin-top: -14px;
+  transform-origin: 29px 100%;
+}
+.popover.right {
+  margin-left: 14px;
+  transform-origin: 0% 50%;
+}
+[dir="rtl"] .popover.right {
+  margin-right: 14px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.right-top {
+  margin-left: 14px;
+  transform-origin: 0% 29px;
+}
+[dir="rtl"] .popover.right-top {
+  margin-right: 14px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.right-bottom {
+  margin-left: 14px;
+  transform-origin: 0% calc(100% - 29px);
+}
+[dir="rtl"] .popover.right-bottom {
+  margin-right: 14px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.bottom {
+  margin-top: 14px;
+  transform-origin: 50% 0%;
+}
+.popover.bottom-left {
+  margin-top: 14px;
+  transform-origin: calc(100% - 29px) 0%;
+}
+.popover.bottom-right {
+  margin-top: 14px;
+  transform-origin: 29px 0%;
+}
+.popover.left {
+  margin-left: -14px;
+  transform-origin: 100% 50%;
+}
+[dir="rtl"] .popover.left {
+  margin-right: -14px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.left-top {
+  margin-left: -14px;
+  transform-origin: 100% 29px;
+}
+[dir="rtl"] .popover.left-top {
+  margin-right: -14px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.left-bottom {
+  margin-left: -14px;
+  transform-origin: 100% calc(100% - 29px);
+}
+[dir="rtl"] .popover.left-bottom {
+  margin-right: -14px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover::before {
+  content: " ";
+  position: absolute;
+  display: block;
+  width: 14px;
+  height: 14px;
+  left: 28px;
+  top: -7px;
+  transform: rotate(45deg);
+  background-color: inherit;
+}
+[dir="rtl"] .popover::before {
+  right: 28px;
+  left: auto;
+  left: initial;
+}
+.popover.top::before {
+  top: auto;
+  bottom: -7px;
+  left: 50%;
+  margin-left: -7px;
+}
+[dir="rtl"] .popover.top::before {
+  right: 50%;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover.top::before {
+  margin-right: -7px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.top-left::before {
+  top: auto;
+  bottom: -7px;
+  right: 29px;
+  left: auto;
+  margin-left: -7px;
+}
+[dir="rtl"] .popover.top-left::before {
+  left: 29px;
+  right: auto;
+  right: initial;
+}
+[dir="rtl"] .popover.top-left::before {
+  right: auto;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover.top-left::before {
+  margin-right: -7px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.top-right::before {
+  top: auto;
+  bottom: -7px;
+  left: 29px;
+  right: auto;
+  margin-left: -7px;
+}
+[dir="rtl"] .popover.top-right::before {
+  right: 29px;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover.top-right::before {
+  left: auto;
+  right: auto;
+  right: initial;
+}
+[dir="rtl"] .popover.top-right::before {
+  margin-right: -7px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.right::before {
+  top: 50%;
+  margin-top: -7px;
+  left: -7px;
+}
+[dir="rtl"] .popover.right::before {
+  right: -7px;
+  left: auto;
+  left: initial;
+}
+.popover.right-top::before {
+  top: 29px;
+  margin-top: -7px;
+  left: -7px;
+}
+[dir="rtl"] .popover.right-top::before {
+  right: -7px;
+  left: auto;
+  left: initial;
+}
+.popover.right-bottom::before {
+  top: calc(100% - 29px);
+  margin-top: -7px;
+  left: -7px;
+}
+[dir="rtl"] .popover.right-bottom::before {
+  right: -7px;
+  left: auto;
+  left: initial;
+}
+.popover.bottom::before {
+  top: -7px;
+  bottom: auto;
+  left: 50%;
+  margin-left: -7px;
+}
+[dir="rtl"] .popover.bottom::before {
+  right: 50%;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover.bottom::before {
+  margin-right: -7px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.bottom-left::before {
+  top: -7px;
+  bottom: auto;
+  right: 29px;
+  left: auto;
+  margin-left: -7px;
+}
+[dir="rtl"] .popover.bottom-left::before {
+  left: 29px;
+  right: auto;
+  right: initial;
+}
+[dir="rtl"] .popover.bottom-left::before {
+  right: auto;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover.bottom-left::before {
+  margin-right: -7px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.bottom-right::before {
+  top: -7px;
+  bottom: auto;
+  right: 29px;
+  left: auto;
+  margin-left: -7px;
+}
+[dir="rtl"] .popover.bottom-right::before {
+  left: 29px;
+  right: auto;
+  right: initial;
+}
+[dir="rtl"] .popover.bottom-right::before {
+  right: auto;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover.bottom-right::before {
+  margin-right: -7px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.popover.left::before {
+  top: 50%;
+  margin-top: -7px;
+  left: auto;
+  right: -7px;
+}
+[dir="rtl"] .popover.left::before {
+  right: auto;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover.left::before {
+  left: -7px;
+  right: auto;
+  right: initial;
+}
+.popover.left-top::before {
+  top: 29px;
+  margin-top: -7px;
+  left: auto;
+  right: -7px;
+}
+[dir="rtl"] .popover.left-top::before {
+  right: auto;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover.left-top::before {
+  left: -7px;
+  right: auto;
+  right: initial;
+}
+.popover.left-bottom::before {
+  top: calc(100% - 29px);
+  margin-top: -7px;
+  left: auto;
+  right: -7px;
+}
+[dir="rtl"] .popover.left-bottom::before {
+  right: auto;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .popover.left-bottom::before {
+  left: -7px;
+  right: auto;
+  right: initial;
+}
+.popover img,
+.popover .popover-image {
+  width: 65%;
+  margin: 8px 0;
+}
+.popover-title {
+  padding: 0;
+  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%;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  border-bottom: 0;
+  border-radius: 2px 2px 0 0;
+  color: var(--color-content-primary) !important;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .popover-title {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .popover-title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .popover-title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-title {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .popover-title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+.popover-title + p,
+.popover-title + ul:not(.list-unstyled),
+.popover-title + ol:not(.list-unstyled) {
+  margin-top: 8px;
+  margin-top: var(--size-8);
+}
+.popover-content {
+  padding: 0;
+  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);
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.popover-content > :last-child {
+  margin-bottom: 0;
+}
+.popover-close {
+  float: right;
+  color: #0097c7;
+  color: var(--color-content-accent);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+[dir="rtl"] .popover-close {
+  float: left;
+}
+.np-theme-personal .popover-close {
+  color: var(--color-interactive-primary);
+}
+.popover-close:hover {
+  color: #0084b3;
+  color: var(--color-content-accent-hover);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+.np-theme-personal .popover-close:hover {
+  color: var(--color-interactive-primary-hover);
+}
+.popover-close:focus {
+  outline: none;
+}
+.popover-close:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.popover-close:active {
+  color: #0077a5;
+  color: var(--color-content-accent-active);
+}
+button.popover-close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.np-theme-personal button.popover-close:hover {
+  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+  background: initial;
+}
+[data-toggle="popover"]:not(.btn) {
+  color: inherit !important;
+  font-weight: inherit !important;
+  -webkit-text-decoration: none !important;
+  text-decoration: none !important;
+  border-bottom: 1px dotted #0097c7 !important;
+  border-bottom: 1px dotted var(--color-content-accent) !important;
+  cursor: pointer;
+}
+[data-toggle="popover"]:not(.btn):hover,
+[data-toggle="popover"]:not(.btn):focus,
+[data-toggle="popover"]:not(.btn)[aria-describedby] {
+  color: #0084b3 !important;
+  color: var(--color-content-accent-hover) !important;
+  outline: 0;
+}
+.nav > li > a [data-toggle="popover"] {
+  border-bottom: 0;
+}
+@media (max-width: 991px) {
+  .popover-modal {
+    position: fixed;
+    top: 0 !important;
+    right: 0 !important;
+    left: 0 !important;
+    width: 272px;
+    margin: 32px auto !important;
+    margin: var(--size-32) auto !important;
+  }
+  .popover-modal::before {
+    display: none;
+  }
+}
+@media (min-width: 992px) {
+  .popover-modal.left {
+    margin-right: -var(--size-24) !important;
+  }
+  [dir="rtl"] .popover-modal.left {
+    margin-left: -var(--size-24) !important;
+    margin-right: 0 !important;
+    margin-right: initial !important;
+  }
+  .popover-modal.right {
+    margin-left: -var(--size-24) !important;
+  }
+  [dir="rtl"] .popover-modal.right {
+    margin-right: -var(--size-24) !important;
+    margin-left: 0 !important;
+    margin-left: initial !important;
+  }
+  .popover-modal.top {
+    margin-bottom: -8px !important;
+  }
+  .popover-modal.bottom {
+    margin-top: -8px !important;
+  }
+}
+@keyframes cover-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+.popover-modal-cover {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1060;
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  cursor: pointer;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  opacity: 0.7;
+  animation: cover-fade-in 0.35s 0s linear forwards;
+}
+[dir="rtl"] .popover-modal-cover {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+@media (max-width: 991px) {
+  .popover-modal-cover {
+    display: block;
+  }
+}
+.popover-promotion {
+  text-align: center;
+  padding: 24px;
+  padding: var(--size-24);
+}
+@media (max-width: 576px) {
+  .popover-promotion {
+    width: auto !important;
+    padding: 24px !important;
+    padding: var(--size-24) !important;
+    margin: 16px !important;
+    margin: var(--size-16) !important;
+  }
+}
+@media (min-width: 566px) and (max-width: 992px) {
+  .popover-promotion {
+    width: 540px !important;
+    padding: 28px 32px !important;
+    padding: 28px var(--size-32) !important;
+    margin: 32px auto !important;
+    margin: var(--size-32) auto !important;
+  }
+}
+.popover-promotion .popover-title {
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
+}
+@media (min-width: 768px) {
+  .popover-promotion .popover-title {
+    font-size: 1.25rem;
+    font-size: var(--font-size-20);
+    line-height: 1.2;
+    line-height: var(--line-height-title);
+  }
+}
+@media (max-width: 480px) {
+  .popover-promotion .popover-image {
+    width: 80%;
+  }
+}
+@media (min-width: 480px) and (max-width: 992px) {
+  .popover-promotion .popover-image {
+    width: 60%;
+  }
+}
+@media (min-width: 992px) {
+  .popover-promotion .popover-image {
+    width: 80%;
+  }
+}
+@media (max-width: 992px) {
+  .popover-promotion {
+    position: absolute !important;
+  }
+}