@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-9f6647e

package/src/neptune-css/less/decision.less

@@ -1,98 +0,0 @@
-@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);
-    }
-  }
-}

package/src/neptune-css/less/dropdowns.less

@@ -1,365 +0,0 @@
-@import (reference)  "../variables/neptune-tokens.less";
-@import (reference) "../variables/legacy-variables.less";
-@import (reference) "../less/core/_typography.less";
-@import (reference) "./mixins/_border-radius.less";
-@import (reference) "./mixins/_logical-properties.less";
-@import (reference) "./mixins/_theming.less";
-@import (reference) "./mixins/_nav-divider.less";
-
-//
-// Dropdown menus
-// @deprecated use ResponsivePanel / Panel components
-// --------------------------------------------------
-
-// The dropdown wrapper (div)
-.dropup,
-.dropdown {
-  position: relative;
-}
-
-// The dropdown menu (ul)
-.dropdown-menu {
-  position: absolute;
-  top: 0; //100%;
-  .left(0);
-
-  z-index: @zindex-dropdown;
-  .float(left);
-
-  .padding-shorthand(@padding-base-vertical);
-
-  margin: 0; // override default ul
-  list-style: none;
-  .np-text-body-default;
-  .text-align(left); // Ensures proper alignment if parent has it changed (e.g., modal footer)
-
-  background-color: var(--color-background-screen);
-  border: 0 solid var(--color-border-neutral);
-  border-radius: @border-radius-base;
-  box-shadow: 0 20px 66px 0 rgba(34, 48, 73, 0.2);
-  background-clip: padding-box;
-
-  // Bit of a hack for our calculators to make the two controls the same width.
-  min-width: 104px;
-
-  .np-theme-personal &,
-  .np-theme-personal--forest-green &,
-  .np-theme-personal--dark & {
-    background-color: var(--color-background-elevated);
-    border-radius: var(--radius-medium);
-    box-shadow: 0 0 40px rgb(69 71 69 / 20%);
-  }
-
-  @media (min-width: @screen-sm-min) {
-    min-width: 160px;
-  }
-
-  .remove-dark-themes-box-shadows();
-
-  // Dividers (basically an hr) within the dropdown
-  .divider {
-    .nav-divider(var(--color-border-neutral));
-  }
-
-  //Force color to text-primary because the dropdowns are white regardless the context
-  .text-primary {
-    color: var(--color-content-primary) !important;
-  }
-
-  .dropdown-menu-closed();
-
-  // Links within the dropdown menu
-  > li > a {
-    display: block;
-    padding: var(--dropdown-link-padding);
-    clear: both;
-    border-radius: @border-radius-base;
-    .np-text-body-default;
-
-    color: var(--color-content-primary);
-    white-space: nowrap; // prevent links from randomly breaking onto new lines
-
-    .secondary {
-      display: block;
-      white-space: normal;
-    }
-
-    .np-theme-personal &,
-    .np-theme-personal--forest-green &,
-    .np-theme-personal--dark & {
-      border-radius: var(--radius-small);
-    }
-  }
-
-  .np-theme-light & {
-    > li:first-child > a {
-      .border-top-radius((@border-radius-base - 1px));
-    }
-
-    > li:last-child > a {
-      .border-bottom-radius((@border-radius-base - 1px));
-    }
-  }
-
-  > .overlay-back-button,
-  > .overlay-title {
-    display: none;
-  }
-}
-
-.dropdown-menu-open() {
-  transition:
-    opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
-    transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
-    visibility 0s linear 0s;
-  visibility: visible;
-  opacity: 1;
-  transform: none;
-}
-
-.dropdown-menu-closed() {
-  // the visibility transition here allows us to wait
-  // for the opacity/transform animation to finish before we make it hidden.
-  transition:
-    opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
-    transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
-    visibility 0s linear 0.2s;
-  opacity: 0;
-  transform: translateY(-10px) scale(0.95, 0.95);
-  visibility: hidden;
-}
-
-.dropdown-menu,
-.btn-group .dropdown-menu {
-  max-width: ~"calc(100vw - 32px)";
-
-  &.dropdown-menu-sm {
-    width: 220px;
-  }
-
-  &.dropdown-menu-md {
-    width: 300px;
-  }
-
-  &.dropdown-menu-lg {
-    width: 420px;
-  }
-}
-
-// Hover/Focus/Active state
-.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled) {
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: none;
-    color: var(--color-content-primary);
-    outline: 0;
-    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-  }
-}
-
-// Active state
-.dropdown-menu > .active > a,
-.dropdown-menu > .selected > a {
-  &,
-  &:hover,
-  &:focus {
-    color: @color-navy-content-primary;
-    text-decoration: none;
-    outline: 0;
-    background-color: @color-navy-background-elevated;
-  }
-
-  strong {
-    color: inherit;
-  }
-
-  .np-text-body-default,
-  .small,
-  .secondary {
-    color: @color-navy-content-secondary;
-  }
-}
-
-// Disabled state
-//
-// Gray out text and ensure the hover/focus state remains gray
-
-.dropdown-menu > .disabled > a {
-  // Nuke hover/focus effects
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    background-color: transparent;
-    background-image: none; // Remove CSS gradient
-  }
-}
-
-// Open state for the dropdown
-.open {
-  > .dropdown-menu {
-    .dropdown-menu-open();
-  }
-
-  @media (--screen-xs-max) {
-    > .dropdown-menu-overlay {
-      position: fixed;
-      top: 0;
-      .left(0);
-
-      width: 100vw;
-      height: 100vh;
-      height: 100dvh;
-      border: 0;
-      border-radius: 0;
-      box-shadow: none;
-      max-width: none;
-      overflow-y: auto;
-      animation: listSlideOver 0.15s ease-out forwards;
-
-      > .overlay-back-button,
-      > .overlay-title {
-        display: block;
-      }
-    }
-  }
-
-  // Remove the outline when :focus is triggered
-  > a {
-    outline: 0;
-  }
-}
-
-// Menu positioning
-//
-// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
-// menu with the parent.
-.dropdown-menu-right,
-.dropdown-menu-xs-right {
-  .left(auto);
-
-  .right(0);
-}
-
-.dropdown-menu-left,
-.dropdown-menu-xs-left {
-  .left(0);
-
-  .right(auto);
-}
-
-@media (min-width: @screen-sm-min) {
-  .dropdown-menu-sm-right {
-    .left(auto);
-
-    .right(0);
-  }
-
-  .dropdown-menu-sm-left {
-    .left(0);
-
-    .right(auto);
-  }
-}
-
-@media (min-width: @screen-md-min) {
-  .dropdown-menu-md-right {
-    .left(auto);
-
-    .right(0);
-  }
-
-  .dropdown-menu-md-left {
-    .left(0);
-
-    .right(auto);
-  }
-}
-
-@media (min-width: @screen-lg-min) {
-  .dropdown-menu-lg-right {
-    .left(auto);
-
-    .right(0);
-  }
-
-  .dropdown-menu-lg-left {
-    .left(0);
-
-    .right(auto);
-  }
-}
-
-@media (min-width: @screen-xl-min) {
-  .dropdown-menu-xl-right {
-    .left(auto); // Reset the default from `.dropdown-menu`
-
-    .right(0);
-  }
-
-  .dropdown-menu-xl-left {
-    .left(0);
-
-    .right(auto);
-  }
-}
-
-// Dropdown section headers
-.dropdown-header {
-  display: block;
-  padding: 8px 16px;
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
-  color: var(--color-content-secondary);
-  white-space: nowrap; // as with > li > a
-
-  .np-text-title-group();
-}
-
-// Backdrop to catch body clicks on mobile, etc.
-.dropdown-backdrop {
-  position: fixed;
-  .left(0);
-
-  .right(0);
-
-  bottom: 0;
-  top: 0;
-  z-index: (@zindex-dropdown - 10);
-}
-
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-//
-// Just add .dropup after the standard .dropdown class and you're set, bro.
-// TODO: abstract this so that the navbar fixed styles are not placed here?
-
-.dropup,
-.navbar-fixed-bottom .dropdown {
-  // Different positioning for bottom up menu
-  .dropdown-menu {
-    top: auto;
-    bottom: -2px; // 100%;
-    margin-bottom: 2px;
-  }
-}
-
-// Component alignment
-//
-// Reiterate per navbar.less and the modified component alignment there.
-
-@media (min-width: @grid-float-breakpoint) {
-  .navbar-right {
-    .dropdown-menu {
-      .dropdown-menu-right();
-    }
-    // Necessary for overrides of the default right aligned menu.
-    // Will remove come v4 in all likelihood.
-    .dropdown-menu-left {
-      .dropdown-menu-left();
-    }
-  }
-}
-
-.bootstrap-select .dropdown-menu {
-  margin: -8px 0 -6px;
-}

package/src/neptune-css/less/droppable.less

@@ -1,213 +0,0 @@
-@import (reference) "../variables/legacy-variables.less";
-@import (reference) "./mixins/_logical-properties.less";
-@import (reference) "./core/_typography.less";
-
-.droppable {
-  position: relative;
-  .np-text-body-large;
-
-  text-align: center;
-  border: 1px solid var(--color-interactive-secondary);
-  border-radius: @border-radius-base;
-  overflow: auto;
-  transition: border-color 0.15s linear;
-
-  &:hover {
-    border-color: var(--color-interactive-secondary-hover);
-  }
-
-  &:active {
-    border-color: var(--color-interactive-secondary-active);
-  }
-
-  .np-theme-personal & {
-    border-radius: unset;
-  }
-
-  @media (--screen-md) {
-    border-style: dashed;
-  }
-
-  .np-theme-personal &-area {
-    border-radius: var(--radius-medium);
-    background-color: var(--color-background-neutral);
-    padding: var(--padding-medium);
-    &,
-    &.droppable-dropping .droppable-dropping-card {
-      border-color: transparent !important;
-    }
-    &.tw-droppable-md {
-      min-height: 242px;
-    }
-    &.droppable-dropping {
-      .droppable-default-card {
-        opacity: 0;
-      }
-      .tw-icon-plus svg {
-        width: var(--size-24);
-        height: var(--size-24);
-      }
-      h4 {
-        margin-top: var(--padding-small) !important;
-      }
-    }
-    &.droppable-negative {
-      border: 2px solid var(--color-sentiment-negative) !important;
-      background-color: var(--color-background-screen);
-      min-height: 315px;
-    }
-    &.droppable-complete {
-      .thumbnail {
-        margin-bottom: var(--padding-x-small) !important;
-      }
-    }
-    .droppable {
-      &-default-card .m-b-3 {
-        margin-bottom: var(--padding-small) !important;
-      }
-      &-dropping-card {
-        background-color: var(--color-background-neutral-hover);
-      }
-      &-card-content .circle {
-        padding-top: 0 !important;
-      }
-    }
-    .circle {
-      background-color: var(--color-contrast);
-      color: var(--color-content-primary)!important;
-    }
-  }
-}
-
-.droppable-card {
-  background-color: var(--color-background-screen);
-  position: absolute;
-  top: 0;
-  .left(0);
-  display: none;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  padding: inherit;
-  transition: transform 0.3s ease;
-}
-
-.droppable-card-content {
-  max-width: 100%;
-  opacity: 1;
-}
-
-.droppable-dropping {
-  border-color: var(--color-interactive-secondary-active) !important;
-  .np-theme-personal & {
-    border-color: var(--color-background-neutral-hover) !important;
-    border-style: solid;
-  }
-}
-
-.droppable-processing,
-.droppable-complete {
-  border-style: solid;
-}
-
-.droppable .thumbnail {
-  width: auto;
-  max-height: 96px;
-  max-width: 96px;
-  margin: 0 auto;
-
-  @media (--screen-md) {
-    max-height: 128px;
-    max-width: 128px;
-  }
-}
-
-/***** Card variants *****/
-
-.droppable-dropping-card {
-  display: none;
-  animation: droppable-fade-in 0.15s 0s linear forwards;
-  color: var(--color-content-accent);
-  // TODO fix with some non-semitransparent color
-  background-color: #d8f1fa;
-  border-color: var(--color-interactive-accent);
-  z-index: 1;
-
-  .np-theme-personal & {
-    // is a hex code because can't have transparency
-    background-color: #E1E4DF;
-    color: var(--color-content-primary);
-  }
-
-  .np-theme-personal--dark & {
-    // is a hex code because can't have transparency
-    background-color: #404440;
-  }
-
-  .np-theme-personal--forest-green & {
-    // is a hex code because can't have transparency
-    background-color: #455C35;
-  }
-}
-
-.droppable-dropping .droppable-dropping-card {
-  display: flex;
-}
-
-.droppable-processing .droppable-processing-card {
-  display: flex;
-  align-items: baseline;
-}
-
-.droppable-complete {
-  .droppable-processing-card {
-    display: flex;
-  }
-}
-
-.droppable-complete-card {
-  display: flex;
-}
-
-/***** End card variants *****/
-
-.droppable-active {
-  border-style: solid;
-
-  &.droppable-dropping {
-    border-style: dashed;
-  }
-}
-
-.droppable-size(@size, @padding-mobile, @padding-tablet, @padding-desktop) {
-  .droppable-@{size} {
-    padding: @padding-mobile @padding-mobile;
-  }
-
-  @media (--screen-sm) {
-    .droppable-@{size} {
-      padding: @padding-tablet @padding-mobile;
-    }
-  }
-
-  @media (--screen-lg) {
-    .droppable-@{size} {
-      padding: @padding-desktop @padding-tablet;
-    }
-  }
-}
-
-.droppable-size(sm, @spacing-1-mobile, @spacing-1-tablet, @spacing-1-desktop);
-.droppable-size(md, @spacing-2-mobile, @spacing-2-tablet, @spacing-2-desktop);
-.droppable-size(lg, @spacing-3-mobile, @spacing-3-tablet, @spacing-3-desktop);
-
-@keyframes droppable-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}