@transferwise/components 0.0.0-experimental-1bc70dc → 0.0.0-experimental-cbe4279

package/src/neptune-css/less/mixins/_spacing.less

@@ -0,0 +1,122 @@
+@import (reference) "./_logical-properties.less";
+
+.spacing(@postfix, @spacer) {
+  .spacing-global(@postfix, @spacer);
+  .spacing-vertical(@postfix, @spacer);
+  .spacing-horizontal(@postfix, @spacer);
+}
+
+.spacing-global(@postfix, @spacer) {
+  .m-a-@{postfix} {
+    margin-top: @spacer !important;
+    .margin-for-spacing(right, @spacer) !important;
+
+    margin-bottom: @spacer !important;
+    .margin-for-spacing(left, @spacer) !important;
+  }
+
+  .p-a-@{postfix} {
+    padding-top: @spacer !important;
+    .padding-for-spacing(right, @spacer) !important;
+
+    padding-bottom: @spacer !important;
+    .padding-for-spacing(left, @spacer) !important;
+  }
+}
+
+.spacing-vertical(@postfix, @spacer) {
+  .m-t-@{postfix} {
+    margin-top: @spacer !important;
+  }
+
+  .m-b-@{postfix} {
+    margin-bottom: @spacer !important;
+  }
+
+  .m-y-@{postfix} {
+    margin-top: @spacer !important;
+    margin-bottom: @spacer !important;
+  }
+
+  .p-t-@{postfix} {
+    padding-top: @spacer !important;
+  }
+
+  .p-b-@{postfix} {
+    padding-bottom: @spacer !important;
+  }
+
+  .p-y-@{postfix} {
+    padding-top: @spacer !important;
+    padding-bottom: @spacer !important;
+  }
+}
+
+.spacing-horizontal(@postfix, @spacer) {
+  .m-l-@{postfix} {
+    .margin-for-spacing(left, @spacer) !important;
+  }
+
+  .m-r-@{postfix} {
+    .margin-for-spacing(right, @spacer) !important;
+  }
+
+  .m-x-@{postfix} {
+    .margin-for-spacing(left, @spacer) !important;
+    .margin-for-spacing(right, @spacer) !important;
+  }
+
+  .p-l-@{postfix} {
+    .padding-for-spacing(left, @spacer) !important;
+  }
+
+  .p-r-@{postfix} {
+    .padding-for-spacing(right, @spacer) !important;
+  }
+
+  .p-x-@{postfix} {
+    .padding-for-spacing(left, @spacer) !important;
+    .padding-for-spacing(right, @spacer) !important;
+  }
+}
+
+.responsive-spacing(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
+  .responsive-spacing-global(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop);
+  .responsive-spacing-vertical(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop);
+  .responsive-spacing-horizontal(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop);
+}
+
+.responsive-spacing-global(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
+  .spacing-global(@postfix, @spacing-mobile);
+
+  @media (--screen-sm) {
+    .spacing-global(@postfix, @spacing-tablet);
+  }
+
+  @media (--screen-lg) {
+    .spacing-global(@postfix, @spacing-desktop);
+  }
+}
+.responsive-spacing-vertical(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
+  .spacing-vertical(@postfix, @spacing-mobile);
+
+  @media (--screen-sm) {
+    .spacing-vertical(@postfix, @spacing-tablet);
+  }
+
+  @media (--screen-lg) {
+    .spacing-vertical(@postfix, @spacing-desktop);
+  }
+}
+
+.responsive-spacing-horizontal(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
+  .spacing-horizontal(@postfix, @spacing-mobile);
+
+  @media (--screen-sm) {
+    .spacing-horizontal(@postfix, @spacing-tablet);
+  }
+
+  @media (--screen-lg) {
+    .spacing-horizontal(@postfix, @spacing-desktop);
+  }
+}

package/src/neptune-css/less/mixins/_tab-focus.less

@@ -0,0 +1,5 @@
+@import (reference) "../ring.less";
+
+.tab-focus() {
+  .ring();
+}

package/src/neptune-css/less/mixins/_table-row.less

@@ -0,0 +1,47 @@
+// Tables
+
+.table-row-variant(@state; @background; @border; @color:none) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table {
+    > thead > tr,
+    > tbody > tr,
+    > tfoot > tr {
+      > td.@{state},
+      > th.@{state},
+      &.@{state} > td,
+      &.@{state} > th {
+        background-color: @background;
+        .set-color(@color);
+      }
+    }
+  }
+
+  // Adds support for contextual colours on description table
+  //.table > .tbody > dl {
+  //  > dd.@{state},
+  //  &.@{state} > dd,
+  //  &.@{state} {
+  //    background-color: @background;
+  //  }
+  //}
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover > tbody > tr {
+    > td.@{state}:hover,
+    > th.@{state}:hover,
+    &.@{state}:hover > td,
+    &:hover > .@{state},
+    &.@{state}:hover > th {
+      background-color: @background;
+    }
+  }
+}
+
+.set-color(@color:none) when (iscolor(@color)) {
+  color: @color;
+}
+
+// stylelint-disable block-no-empty
+.set-color(@color:none) when not (iscolor(@color)) {}

package/src/neptune-css/less/mixins/_text-emphasis.less

@@ -0,0 +1,39 @@
+.text-emphasis-variant(@small-color, @large-color, @hover) {
+  color: @small-color !important;
+
+  a&:hover,
+  a&:focus {
+    color: @hover !important;
+  }
+
+  .large-text-emphasis(@small-color, @large-color);
+}
+
+.large-text-emphasis(@small-color, @large-color) when not (@small-color = @large-color) {
+  h1&,
+  h2&,
+  h3&,
+  &.h1,
+  &.h2,
+  &.h3,
+  &.title-1,
+  &.title-2,
+  &.title-3,
+  &.np-text-title-screen,
+  &.np-text-title-section,
+  &.np-text-title-subsection,
+  h1,
+  h2,
+  h3,
+  .h1,
+  .h2,
+  .h3,
+  .title-1,
+  .title-2,
+  .title-3,
+  .np-text-title-screen,
+  .np-text-title-section,
+  .np-text-title-subsection {
+    color: @large-color !important;
+  }
+}

package/src/neptune-css/less/mixins/_text-overflow.less

@@ -0,0 +1,8 @@
+// Text overflow
+// Requires inline-block or block for proper styling
+
+.text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/neptune-css/less/mixins/_theming.less

@@ -0,0 +1,7 @@
+.remove-dark-themes-box-shadows() {
+  .np-theme-personal--forest-green &,
+  .np-theme-personal--bright-green &,
+  .np-theme-personal--dark & {
+    box-shadow: none;
+  }
+}

package/src/neptune-css/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;
+  }
+}