@transferwise/components 46.130.3 → 46.131.0

package/src/styles/less/modals.css

@@ -0,0 +1,185 @@
+.modal-open {
+  overflow: hidden;
+}
+.modal {
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1050;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+}
+.modal.fade .modal-dialog {
+  transform: translate(0, -25%);
+  transition: transform 0.3s ease-out;
+}
+.modal.in .modal-dialog {
+  transform: translate(0, 0);
+}
+.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 16px;
+  margin: var(--size-16);
+}
+.modal-content {
+  position: relative;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  border: 1px solid rgba(134,167,189,0.10196);
+  border: 1px solid var(--color-background-neutral);
+  border-radius: 3px;
+  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  background-clip: padding-box;
+  outline: 0;
+}
+.np-theme-personal--forest-green .modal-content,
+.np-theme-personal--bright-green .modal-content,
+.np-theme-personal--dark .modal-content {
+  box-shadow: none;
+}
+.np-theme-personal .modal-content {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  background-color: #37517e;
+}
+.modal-backdrop.fade {
+  opacity: 0;
+}
+.modal-backdrop.in {
+  opacity: 0.8;
+}
+.np-theme-personal .modal-backdrop {
+  background-color: rgba(14, 15, 12, 0.4);
+}
+.np-theme-personal--dark .modal-backdrop {
+  background-color: rgba(243, 245, 241, 0.25);
+}
+.np-theme-personal--forest-green .modal-backdrop,
+.np-theme-personal--bright-green .modal-backdrop {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+.modal-header {
+  padding: 24px;
+  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid var(--color-border-neutral);
+  min-height: calc(24px + 24px);
+  min-height: calc(24px + var(--size-24));
+}
+.modal-header .close {
+  margin-top: -2px;
+}
+.modal-title {
+  margin: 0;
+  line-height: 1.2;
+  line-height: var(--line-height-title);
+}
+.modal-body {
+  position: relative;
+  padding: 24px;
+}
+.modal-footer {
+  padding: 16px 24px;
+  padding: var(--size-16) 24px;
+  text-align: right;
+  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid var(--color-border-neutral);
+}
+[dir="rtl"] .modal-footer {
+  text-align: left;
+}
+.modal-footer .btn + .btn {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-bottom: 0;
+}
+[dir="rtl"] .modal-footer .btn + .btn {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-left: 0;
+  margin-left: initial;
+}
+.modal-footer .btn-group .btn + .btn {
+  margin-left: -1px;
+}
+[dir="rtl"] .modal-footer .btn-group .btn + .btn {
+  margin-right: -1px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.modal-footer .btn-block + .btn-block {
+  margin-left: 0;
+}
+[dir="rtl"] .modal-footer .btn-block + .btn-block {
+  margin-right: 0;
+  margin-left: 0;
+  margin-left: initial;
+}
+.modal-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+@media (min-width: 576px) {
+  .modal-dialog {
+    width: 540px;
+    margin: 32px auto;
+  }
+  .modal-content {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  }
+  .np-theme-personal--forest-green .modal-content,
+  .np-theme-personal--bright-green .modal-content,
+  .np-theme-personal--dark .modal-content {
+    box-shadow: none;
+  }
+  .modal-header {
+    padding: 28px 32px;
+    min-height: calc(28px + 24px);
+    min-height: calc(28px + var(--size-24));
+  }
+  .modal-body {
+    padding: 32px;
+  }
+  .modal-footer {
+    padding: 16px 32px;
+    padding: var(--size-16) 32px;
+  }
+}
+@media (min-width: 576px) {
+  .modal-sm,
+  .modal-lg {
+    width: auto;
+    margin: 32px 24px;
+  }
+}
+@media (min-width: 332px) {
+  .modal-sm {
+    width: 300px;
+    margin: 32px auto;
+  }
+}
+@media (min-width: 768px) {
+  .modal-lg {
+    width: 720px;
+    margin: 32px auto;
+  }
+}

package/src/styles/less/modals.less

@@ -0,0 +1,239 @@
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_logical-properties.less";
+@import (reference) "./mixins/_theming.less";
+
+//
+// Modals
+// --------------------------------------------------
+
+//
+// Styles for Angular UI modal
+// https://angular-ui.github.io/bootstrap/#!#modal
+
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and shit
+
+// Kill the scroll on the body
+.modal-open {
+  overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-modal;
+  -webkit-overflow-scrolling: touch;
+
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+
+  outline: 0;
+
+  // When fading in the modal, animate it to slide down
+
+  &.fade .modal-dialog {
+    transform: translate(0, -25%);
+    transition: transform (~"0.3s ease-out");
+  }
+  &.in .modal-dialog { transform: translate(0, 0); }
+}
+
+.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+// Shell div to position the modal with bottom padding
+
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: var(--size-16);
+}
+
+// Actual modal
+
+.modal-content {
+  position: relative;
+  background-color: var(--color-background-screen);
+  border: 1px solid var(--color-background-neutral);
+  border-radius: @border-radius-large;
+  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  background-clip: padding-box;
+
+  // Remove focus outline from opened modal
+
+  outline: 0;
+
+  .remove-dark-themes-box-shadows();
+
+  .np-theme-personal & {
+    border-radius: var(--radius-small);
+  }
+}
+
+// Modal background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-modal-background;
+  background-color: @color-navy-background-elevated;
+
+  // Fade for backdrop
+
+  &.fade {
+    opacity: 0;
+  }
+
+  &.in {
+    opacity: @modal-backdrop-opacity;
+  }
+
+  .np-theme-personal & {
+    background-color: rgba(14, 15, 12, 0.4);
+  }
+
+  .np-theme-personal--dark & {
+    background-color: rgba(243, 245, 241, 0.25);
+  }
+
+  .np-theme-personal--forest-green &,
+  .np-theme-personal--bright-green & {
+    background-color: rgba(255, 255, 255, 0.25);
+  }
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+
+.modal-header {
+  padding: @modal-inner-padding-collapse;
+  border-bottom: 1px solid var(--color-border-neutral);
+  min-height: calc(@modal-inner-padding-collapse + var(--size-24));
+}
+
+// Close icon
+
+.modal-header .close {
+  margin-top: -2px;
+}
+
+// Title text within header
+
+.modal-title {
+  margin: 0;
+  line-height: var(--line-height-title);
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+
+.modal-body {
+  position: relative;
+  padding: @modal-inner-padding-collapse;
+}
+
+// Footer (for actions)
+
+.modal-footer {
+  padding: var(--size-16) @modal-inner-padding-collapse;
+  .text-align(right); // right align buttons
+
+  border-top: 1px solid var(--color-border-neutral);
+  &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+
+  .btn + .btn {
+    .margin(left, var(--size-8));
+
+    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  }
+
+  // but override that for button groups
+
+  .btn-group .btn + .btn {
+    .margin(left, -1px);
+  }
+
+  // and override it for block buttons as well
+
+  .btn-block + .btn-block {
+    .margin(left, 0);
+  }
+}
+
+// Measure scrollbar width for padding body during modal show/hide
+.modal-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+
+// Scale up the modal
+
+@media (--screen-sm) {
+  // Automatically set modal's width for larger viewports
+
+  .modal-dialog {
+    width: @modal-md;
+    margin: (@padding-base-vertical * 4) auto;
+  }
+
+  .modal-content {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+
+    .remove-dark-themes-box-shadows();
+  }
+
+  .modal-header {
+    padding: @modal-title-vertical-padding @modal-title-padding;
+    min-height: calc(@modal-title-vertical-padding + var(--size-24));
+  }
+
+  .modal-body {
+    padding: @modal-inner-padding;
+  }
+
+  .modal-footer {
+    padding: var(--size-16) @modal-inner-padding;
+  }
+}
+
+// Modal sizes
+
+@media (--screen-sm) {
+  .modal-sm,
+  .modal-lg {
+    width: auto;
+    margin: (@padding-base-vertical * 4) @grid-gutter-width;
+  }
+}
+
+@media (min-width: (@modal-sm + 32px)) {
+  .modal-sm {
+    width: @modal-sm;
+    margin: (@padding-base-vertical * 4) auto;
+  }
+}
+
+@media (--screen-md) {
+  .modal-lg {
+    width: @modal-lg;
+    margin: (@padding-base-vertical * 4) auto;
+  }
+}