@transferwise/neptune-css 10.0.5 → 10.0.6-beta.38

package/src/less/popovers.less

@@ -1,9 +1,372 @@
 // TODO: remove bootstrap dependencies
 
 @import (reference) '../variables/legacy-variables.less';
-@import (reference) 'bootstrap/less/mixins/buttons.less';
-@import (reference) 'bootstrap/less/mixins/arrows.less';
-@import (reference) 'bootstrap/less/mixins/reset-text.less';
-@import (reference) 'bootstrap/less/mixins/vendor-prefixes.less';
+@import (reference) './mixins/_buttons.less';
+@import (reference) './mixins/_arrows.less';
+@import (reference) './mixins/_reset-text.less';
+@import (reference) './mixins/_logical-properties.less';
 @import 'close.less';
-@import 'bootstrap/less/popovers.less';
+
+//
+// Popovers
+// --------------------------------------------------
+@popover-padding-vertical: 18px;
+@popover-padding-horizontal: 24px;
+
+.popover {
+  top: 0;
+  .left(0);
+
+  z-index: @zindex-popover;
+  width: @popover-max-width;
+  padding: @popover-padding-vertical @popover-padding-horizontal;
+  // Our parent element can be arbitrary since popovers 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();
+
+  font-size: @font-size-small;
+  background-color: var(--color-background-screen);
+  background-clip: padding-box;
+  border-radius: @border-radius-large;
+  box-shadow: 0 20px 66px 0 rgba(34, 48, 73, 0.2);
+  position: absolute;
+
+  &.animate {
+    transition: transform 0.25s;
+  }
+
+  &.scale-down {
+    transform: scale(0);
+  }
+
+  // Offset the popover to account for the popover arrow
+
+  &.top {
+    margin-top: -@popover-arrow-width;
+    transform-origin: 50% 100%;
+  }
+
+  &.top-left {
+    margin-top: -@popover-arrow-width;
+    transform-origin: calc(100% - 29px) 100%;
+  }
+
+  &.top-right {
+    margin-top: -@popover-arrow-width;
+    transform-origin: 29px 100%;
+  }
+
+  &.right {
+    .margin(left, @popover-arrow-width);
+
+    transform-origin: 0% 50%;
+  }
+
+  &.right-top {
+    .margin(left, @popover-arrow-width);
+
+    transform-origin: 0% 29px;
+  }
+
+  &.right-bottom {
+    .margin(left, @popover-arrow-width);
+
+    transform-origin: 0% calc(100% - 29px);
+  }
+
+  &.bottom {
+    margin-top: @popover-arrow-width;
+    transform-origin: 50% 0%;
+  }
+
+  &.bottom-left {
+    margin-top: @popover-arrow-width;
+    transform-origin: calc(100% - 29px) 0%;
+  }
+
+  &.bottom-right {
+    margin-top: @popover-arrow-width;
+    transform-origin: 29px 0%;
+  }
+
+  &.left {
+    .margin(left, -@popover-arrow-width);
+
+    transform-origin: 100% 50%;
+  }
+
+  &.left-top {
+    .margin(left, -@popover-arrow-width);
+
+    transform-origin: 100% 29px;
+  }
+
+  &.left-bottom {
+    .margin(left, -@popover-arrow-width);
+
+    transform-origin: 100% calc(100% - 29px);
+  }
+
+  .arrow-pointer(@popover-arrow-width);
+
+  &.top::before {
+    top: auto;
+    bottom: (@popover-arrow-width / -2);
+    .left(50%);
+
+    .margin(left, (@popover-arrow-width / -2));
+  }
+
+  &.top-left::before {
+    top: auto;
+    bottom: (@popover-arrow-width / -2);
+    .right(29px);
+
+    .left(auto);
+
+    .margin(left, (@popover-arrow-width / -2));
+  }
+
+  &.top-right::before {
+    top: auto;
+    bottom: (@popover-arrow-width / -2);
+    .left(29px);
+
+    .right(auto);
+
+    .margin(left,(@popover-arrow-width / -2));
+  }
+
+  &.right::before {
+    top: 50%;
+    margin-top: (@popover-arrow-width / -2);
+    .left((@popover-arrow-width / -2));
+  }
+
+  &.right-top::before {
+    top: 29px;
+    margin-top: (@popover-arrow-width / -2);
+    .left((@popover-arrow-width / -2));
+  }
+
+  &.right-bottom::before {
+    top: calc(100% - 29px);
+    margin-top: (@popover-arrow-width / -2);
+    .left((@popover-arrow-width / -2));
+  }
+
+  &.bottom::before {
+    top: (@popover-arrow-width / -2);
+    bottom: auto;
+    .left(50%);
+
+    .margin(left, (@popover-arrow-width / -2));
+  }
+
+  &.bottom-left::before {
+    top: (@popover-arrow-width / -2);
+    bottom: auto;
+    .right(29px);
+
+    .left(auto);
+
+    .margin(left, (@popover-arrow-width / -2));
+  }
+
+  &.bottom-right::before {
+    top: (@popover-arrow-width / -2);
+    bottom: auto;
+    .right(29px);
+
+    .left(auto);
+
+    .margin(left, (@popover-arrow-width / -2));
+  }
+
+  &.left::before {
+    top: 50%;
+    margin-top: (@popover-arrow-width / -2);
+    .left(auto);
+
+    .right((@popover-arrow-width / -2));
+  }
+
+  &.left-top::before {
+    top: 29px;
+    margin-top: (@popover-arrow-width / -2);
+    .left(auto);
+
+    .right((@popover-arrow-width / -2));
+  }
+
+  &.left-bottom::before {
+    top: calc(100% - 29px);
+    margin-top: (@popover-arrow-width / -2);
+    .left(auto);
+
+    .right((@popover-arrow-width / -2));
+  }
+
+  img,
+  .popover-image {
+    width: 65%;
+    margin: 8px 0;
+  }
+}
+
+.popover-title {
+  margin: 0; // reset heading margin
+  padding: 0;
+  font-size: @font-size-small;
+  background-color: var(--color-background-screen);
+  border-bottom: 0;
+  border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
+  color: var(--color-content-primary) !important;
+  line-height: var(--size-24);
+}
+
+.popover-content {
+  padding: 0;
+  color: var(--color-content-secondary);
+  font-size: @font-size-small;
+  line-height: var(--size-24);
+}
+
+.popover-content > :last-child {
+  margin-bottom: 0;
+}
+
+.popover-close {
+  .close();
+}
+
+[data-toggle='popover'] {
+  &:not(.btn) {
+    color: inherit !important;
+    font-weight: inherit !important;
+    text-decoration: none !important;
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &[aria-describedby] {
+      color: var(--color-content-accent-hover) !important;
+      outline: 0;
+    }
+  }
+
+  .nav > li > a & {
+    border-bottom: 0;
+  }
+}
+
+@media (--screen-md-max) {
+  .popover-modal {
+    position: fixed;
+    top: 0 !important;
+    right: 0 !important;
+    left: 0 !important;
+    width: 272px;
+    margin: var(--size-32) auto !important;
+  }
+
+  .popover-modal::before {
+    display: none;
+  }
+}
+
+@media (--screen-lg) {
+  .popover-modal.left {
+    .margin(right, -var(--size-24)) !important;
+  }
+
+  .popover-modal.right {
+    .margin(left, -var(--size-24)) !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;
+  cursor: pointer;
+  background-color: var(--color-background-screen);
+  opacity: 0.7;
+  animation: cover-fade-in 0.35s 0s linear forwards;
+}
+
+@media (--screen-md-max) {
+  .popover-modal-cover {
+    display: block;
+  }
+}
+
+.popover-promotion {
+  text-align: center;
+  padding: var(--size-24);
+
+  @media (max-width: @screen-sm-min) {
+    width: auto !important;
+    padding: var(--size-24) !important;
+    margin: var(--size-16) !important;
+  }
+
+  @media (min-width: (@screen-sm-min - 10px)) and (max-width: @screen-lg-min) {
+    width: 540px !important;
+    padding: 28px var(--size-32) !important;
+    margin: var(--size-32) auto !important;
+  }
+
+  .popover-title {
+    font-size: @font-size-h4;
+    line-height: @line-height-h4;
+
+    @media (min-width: @screen-md-min) {
+      font-size: @font-size-h3;
+      line-height: @line-height-h3;
+    }
+  }
+
+  .popover-image {
+    @media (max-width: @screen-xs-min) {
+      width: 80%;
+    }
+
+    @media (min-width: @screen-xs-min) and (max-width: @screen-lg-min) {
+      width: 60%;
+    }
+
+    @media (--screen-lg) {
+      width: 80%;
+    }
+  }
+}
+
+@media (max-width: @screen-lg-min) {
+  .popover-promotion {
+    position: absolute !important;
+  }
+}

package/src/less/process.less

@@ -1,4 +1,359 @@
-// TODO: remove bootstrap dependencies
-
 @import (reference) '../variables/legacy-variables.less';
-@import 'bootstrap/less/process.less';
+@import (reference) './mixins/_logical-properties.less';
+
+@process-xl-radius: 64px;
+@process-xl-stroke: 3px;
+@process-xl-circumference: (pi() * (2 * (@process-xl-radius - 1)));
+@process-xl-icon-size: 64px;
+@process-xl-icon-stroke: 8px;
+
+/*
+// Keep these sizes in case we want to add these back in.
+@process-lg-radius: 48px;
+@process-lg-stroke: 2.7px;
+@process-lg-circumference: (pi() * (2 * (@process-lg-radius - 1)));
+@process-lg-icon-size: 48px;
+@process-lg-icon-stroke: 6px;
+
+@process-md-radius: 36px;
+@process-md-circumference: (pi() * (2 * (@process-md-radius - 1)));
+@process-md-stroke: 2.5px;
+@process-md-icon-size: 36px;
+@process-md-icon-stroke: 4px;
+*/
+@process-sm-radius: 24px;
+@process-sm-circumference: (pi() * (2 * (@process-sm-radius - 1)));
+@process-sm-stroke: 2.4px;
+@process-sm-icon-size: 24px;
+@process-sm-icon-stroke: 3px;
+
+@process-xs-radius: 12px;
+@process-xs-circumference: (pi() * (2 * (@process-xs-radius - 1)));
+@process-xs-stroke: 2px;
+@process-xs-icon-size: 12px;
+@process-xs-icon-stroke: 2px;
+
+.process {
+  position: relative;
+  margin: auto;
+  display: block;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.process-circle {
+  transform-origin: center center;
+  transition: stroke 1s 0.2s linear;
+  stroke: var(--color-content-accent);
+  stroke-opacity: 1;
+  stroke-linecap: round;
+  animation-duration: 1.5s;
+  animation-timing-function: ease-out;
+  animation-iteration-count: infinite;
+}
+
+.process-inverse .process-circle {
+  stroke: var(--color-background-screen);
+}
+
+.process-icon-container {
+  position: absolute;
+  display: inline-block;
+  transform: rotate(45deg);
+  height: 50%;
+  width: 50%;
+  left: 25%;
+  top: 25%;
+}
+
+.process-icon-horizontal,
+.process-icon-vertical {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+}
+
+.process-success {
+  .process-icon-horizontal {
+    background-color: var(--color-content-positive);
+    bottom: 0;
+    left: 0;
+  }
+
+  .process-icon-vertical {
+    background-color: var(--color-content-positive);
+    top: 100%;
+    right: 0;
+  }
+
+  .process-circle {
+    stroke: var(--color-content-positive);
+  }
+}
+
+.process-danger {
+  .process-icon-horizontal {
+    background-color: var(--color-content-negative);
+    left: 0;
+  }
+
+  .process-icon-vertical {
+    background-color: var(--color-content-negative);
+    top: 0;
+  }
+
+  .process-circle {
+    stroke: var(--color-content-negative);
+  }
+}
+
+.process-success,
+.process-danger {
+  .process-circle {
+    animation-duration: 1.5s;
+    animation-delay: 1ms; // 1 ms delay prevents small glitch on webkit
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+  }
+
+  .process-icon-horizontal {
+    /* Animation over transition, to run once on load */
+    animation: process-width 0.3s 1.2s ease forwards;
+  }
+
+  .process-icon-vertical {
+    /* Animation over transition, to run once on load */
+    animation: process-height 0.3s 1.5s ease forwards;
+  }
+}
+
+.process-stopped {
+  .process-circle {
+    animation: none;
+  }
+
+  .process-icon-container {
+    display: none;
+  }
+}
+
+.process-size(@size, @circle-radius, @cirlce-circumference, @circle-stroke, @icon-size, @icon-stroke) {
+  .process-@{size} {
+    width: (@circle-radius * 2);
+    height: (@circle-radius * 2);
+
+    .process-circle {
+      /* Hide before animation to prevent glitching */
+      stroke-dashoffset: @cirlce-circumference;
+      stroke-dasharray: @cirlce-circumference;
+      stroke-width: @circle-stroke;
+    }
+
+    &.process-danger {
+      .process-icon-horizontal {
+        top: ((@icon-size - @icon-stroke) / 2);
+        height: @icon-stroke;
+      }
+
+      .process-icon-vertical {
+        left: ((@icon-size - @icon-stroke) / 2);
+        width: @icon-stroke;
+      }
+    }
+
+    .process-icon-horizontal,
+    .process-icon-vertical {
+      border-radius: (@icon-stroke / 2);
+    }
+
+    &.process-success {
+      .process-icon-container {
+        // TODO change to percentages so we don't need to redefine for different widths
+        width: ((@icon-size - @icon-stroke) / 2); // 20%
+        height: (@icon-size - @icon-stroke); // 42%
+        left: (3 * (@icon-size / 4)); // 40%
+      }
+
+      .process-icon-horizontal {
+        height: @icon-stroke;
+      }
+
+      .process-icon-vertical {
+        width: @icon-stroke;
+      }
+    }
+  }
+}
+.process-size(xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke);
+.process-size(sm, @process-sm-radius, @process-sm-circumference, @process-sm-stroke, @process-sm-icon-size, @process-sm-icon-stroke);
+.process-size(xl, @process-xl-radius, @process-xl-circumference, @process-xl-stroke, @process-xl-icon-size, @process-xl-icon-stroke);
+
+.process-xs {
+  .process-circle {
+    animation-name: process-chase-circle-xs;
+  }
+
+  &.process-success,
+  &.process-danger {
+    .process-circle {
+      animation-name: process-success-circle-xs;
+    }
+  }
+}
+
+.process-sm {
+  .process-circle {
+    animation-name: process-chase-circle-sm;
+  }
+
+  &.process-success,
+  &.process-danger {
+    .process-circle {
+      animation-name: process-success-circle-sm;
+    }
+  }
+}
+
+.process-xl {
+  .process-circle {
+    animation-name: process-chase-circle-xl;
+  }
+
+  &.process-success,
+  &.process-danger {
+    .process-circle {
+      animation-name: process-success-circle-xl;
+    }
+  }
+}
+
+.complete-circle(@process-circumference) {
+  0% {
+    transform: rotate(0deg);
+    stroke-dashoffset: (@process-circumference - 1);
+    stroke-dasharray: @process-circumference;
+  }
+
+  100% {
+    transform: rotate(360deg);
+    stroke-dashoffset: 0;
+    stroke-dasharray: @process-circumference;
+  }
+}
+
+.chase-circle(@process-circumference) {
+  0% {
+    transform: rotate(0deg);
+    stroke-dashoffset: ((3 * @process-circumference) - 1);
+    stroke-dasharray: @process-circumference;
+  }
+
+  25% {
+    stroke-dashoffset: (@process-circumference - 1);
+    stroke-dasharray: (@process-circumference * 0.5);
+  }
+
+  75% {
+    stroke-dashoffset: (@process-circumference - 1);
+    stroke-dasharray: (@process-circumference * 0.75);
+  }
+
+  100% {
+    transform: rotate(360deg);
+    stroke-dashoffset: (@process-circumference - 1);
+    stroke-dasharray: @process-circumference;
+  }
+}
+
+@keyframes process-chase-circle-xs {
+  .chase-circle(@process-xs-circumference);
+}
+
+@keyframes process-success-circle-xs {
+  .complete-circle(@process-xs-circumference);
+}
+
+@keyframes process-chase-circle-sm {
+  .chase-circle(@process-sm-circumference);
+}
+
+@keyframes process-success-circle-sm {
+  .complete-circle(@process-sm-circumference);
+}
+
+@keyframes process-chase-circle-xl {
+  .chase-circle(@process-xl-circumference);
+}
+
+@keyframes process-success-circle-xl {
+  .complete-circle(@process-xl-circumference);
+}
+
+@keyframes process-width {
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes process-height {
+  to {
+    top: 0;
+    height: 100%;
+  }
+}
+
+.btn .process:first-child {
+  .margin(left, -12px);
+
+  .margin(right, 12px);
+
+  .float(left);
+}
+
+.btn-block .process:first-child {
+  position: absolute;
+}
+
+.btn .process-circle {
+  transition: stroke 0.5s 0s linear;
+}
+
+.btn-primary,
+.btn-success {
+  .process-circle {
+    stroke: @brand-white;
+  }
+
+  .process-icon-horizontal,
+  .process-icon-vertical {
+    background-color: @brand-white;
+  }
+}
+
+.btn:hover,
+.btn:focus {
+  .process-circle {
+    stroke: @brand-white;
+  }
+
+  .process-icon-horizontal,
+  .process-icon-vertical {
+    background-color: @brand-white;
+  }
+}
+
+.btn[disabled] {
+  .process-circle {
+    stroke: @btn-disabled-color;
+  }
+
+  .process-icon-horizontal,
+  .process-icon-vertical {
+    background-color: @brand-white;
+  }
+}