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

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

@@ -1,122 +0,0 @@
-@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

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

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

@@ -1,47 +0,0 @@
-// 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

@@ -1,39 +0,0 @@
-.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

@@ -1,8 +0,0 @@
-// 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

@@ -1,7 +0,0 @@
-.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

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