@transferwise/components 0.0.0-experimental-57e70f3 → 0.0.0-experimental-09066ec

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

@@ -1,385 +0,0 @@
-// variables
-@import (reference) "../variables/neptune-tokens.less";
-@import (reference) "../variables/legacy-variables.less";
-
-// mixins
-@import "./mixins/_table-row.less";
-@import (reference) "./mixins/_logical-properties.less";
-
-//
-// Tables
-// --------------------------------------------------
-
-table {
-  background-color: var(--color-background-screen);
-  border-collapse: separate;
-
-  td,
-  th {
-    &[class*="col-"] {
-      // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
-      position: static;
-      float: none;
-      display: table-cell;
-    }
-  }
-}
-
-caption {
-  padding-top: @table-cell-padding;
-  padding-bottom: @table-cell-padding;
-  color: var(--color-content-secondary);
-  .text-align(left);
-}
-
-th {
-  .text-align(left);
-}
-
-// Baseline styles
-
-.table {
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: var(--size-24);
-
-  // Cells
-  > thead,
-  > tbody,
-  > tfoot {
-    > tr > th,
-    > tr > td {
-      padding: var(--size-24) var(--size-16);
-      line-height: var(--line-height-body);
-      vertical-align: top;
-      border-top: 1px solid var(--color-border-neutral);
-      border-bottom: 0;
-      transition: border ease @panel-focus-transtion;
-    }
-  }
-
-  > .thead > ol > li,
-  > .tbody > dl > dd,
-  > .tfoot > ol > li {
-    padding: var(--size-24) var(--size-16);
-    line-height: var(--line-height-body);
-    vertical-align: top;
-    border-top: 1px solid var(--color-border-neutral);
-    border-bottom: 0;
-    transition: border ease @panel-focus-transtion;
-  }
-
-  // Bottom align for column headings
-  > thead > tr > th,
-  > .thead > ol > li {
-    vertical-align: bottom;
-
-    a {
-      text-decoration: none;
-    }
-
-    .tw-icon {
-      margin-top: -3px;
-    }
-  }
-  // Remove top border from thead by default
-  > caption + thead,
-  > colgroup + thead,
-  > thead:first-child {
-    > tr:first-child {
-      > th,
-      > td {
-        border-top: 0;
-      }
-    }
-  }
-
-  > .thead:first-child {
-    > ol:first-child {
-      > li {
-        border-top: 0;
-      }
-    }
-  }
-  // Account for multiple tbody instances
-  > tbody + tbody {
-    border-top: 1px solid var(--color-border-neutral);
-  }
-
-  // Nesting
-  .table {
-    background-color: var(--color-background-screen);
-  }
-
-  > thead,
-  > tfoot,
-  > .thead,
-  > .tfoot {
-    font-size: var(--font-size-14);
-    color: var(--color-content-primary);
-  }
-
-  > tbody,
-  > .tbody {
-    font-size: var(--font-size-14);
-  }
-
-  > tbody > tr > th,
-  > .tbody > dl > .th {
-    color: var(--color-content-primary);
-  }
-}
-
-// Condensed table w/ half padding
-
-.table-condensed {
-  > thead,
-  > tbody,
-  > tfoot {
-    > tr {
-      > th,
-      > td {
-        padding: var(--size-8);
-      }
-    }
-  }
-
-  > .thead > ol > li,
-  > .tbody > dl > dd {
-    padding: var(--size-8);
-  }
-}
-
-// Bordered version
-//
-// Add borders all around the table and between all the columns.
-
-.table-bordered {
-  border: 1px solid var(--color-border-neutral);
-  border-radius: @border-radius-base;
-
-  thead,
-  .thead {
-    background-color: var(--color-background-neutral);
-  }
-}
-
-@media (max-width: @screen-sm-max) {
-  div.table-bordered:not(.table-responsive) {
-    border: 0;
-  }
-}
-
-// Zebra-striping
-//
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-
-.table-striped {
-  > tbody > tr:nth-of-type(odd) {
-    background-color: var(--color-background-neutral);
-  }
-
-  @media (min-width: @screen-md-min) {
-    > .tbody > dl:nth-of-type(odd) {
-      background-color: var(--color-background-neutral);
-    }
-  }
-}
-
-// Table cell sizing
-//
-// Reset default table behavior
-
-table col[class*="col-"] {
-  // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
-  position: static;
-  float: none;
-  display: table-column;
-}
-
-// Table backgrounds
-//
-// Exact selectors below required to override `.table-striped` and prevent
-// inheritance to nested tables.
-
-// Generate the contextual variants
-.table-row-variant(
-  primary; @color-navy-background-elevated; var(--color-border-neutral); var(--color-background-elevated)
-);
-.table-row-variant(active; var(--color-background-screen); var(--color-border-neutral));
-.table-row-variant(success; var(--color-background-positive); var(--color-interactive-positive));
-.table-row-variant(info; var(--color-background-accent); var(--color-interactive-accent));
-.table-row-variant(warning; var(--color-background-warning); var(--color-interactive-warning));
-.table-row-variant(danger; var(--color-background-negative); var(--color-interactive-negative));
-.table-row-variant(default; var(--color-background-secondary); var(--color-interactive-secondary));
-
-// Responsive tables
-//
-// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
-// by enabling horizontal scrolling. Only applies <768px. Everything above that
-// will display normally.
-
-.table-responsive {
-  overflow-x: auto;
-  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
-
-  &.table-bordered {
-    border: 0;
-  }
-
-  @media screen and (max-width: @screen-sm-max) {
-    width: 100%;
-    margin-bottom: var(--size-24);
-    overflow-y: hidden;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-
-    // Tighten up spacing
-    > .table {
-      margin-bottom: 0;
-
-      // Ensure the content doesn't wrap
-      > thead,
-      > tbody,
-      > tfoot {
-        > tr {
-          > th,
-          > td {
-            white-space: nowrap;
-          }
-        }
-      }
-    }
-
-    // Special overrides for the bordered tables
-    > .table-bordered {
-      border: 0;
-
-      // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
-      // chances are there will be only one `tr` in a `thead` and that would
-      // remove the border altogether.
-      > tbody,
-      > tfoot {
-        > tr:last-child {
-          > th,
-          > td {
-            border-bottom: 0;
-          }
-        }
-      }
-    }
-
-    &.table-bordered {
-      border: 1px solid var(--color-background-neutral);
-      border-radius: @border-radius-base;
-    }
-  }
-}
-
-// Definition list tables
-//
-// Act as definition list on mobile and as a table on desktop
-@media (min-width: @screen-md-min) {
-  .table {
-    display: table;
-
-    > .thead {
-      display: table-header-group;
-
-      > ol {
-        display: table-row;
-
-        > li {
-          display: table-cell;
-          font-weight: var(--font-weight-bold);
-          color: var(--color-content-primary);
-        }
-      }
-    }
-
-    > .tbody {
-      display: table-row-group;
-
-      > dl {
-        display: table-row;
-
-        > dt {
-          display: none;
-        }
-
-        > dd {
-          display: table-cell;
-          font-size: var(--font-size-14);
-          color: var(--color-content-secondary);
-        }
-      }
-    }
-
-    > .tfoot {
-      display: table-footer-group;
-    }
-  }
-}
-
-@media (max-width: @screen-sm-max) {
-  .table {
-    > .thead {
-      display: none;
-    }
-
-    > .tbody {
-      > dl {
-        border: 1px var(--color-interactive-secondary) solid;
-        border-radius: @border-radius-base;
-        margin-bottom: var(--size-24);
-        padding: var(--size-24) var(--line-height-body) 0;
-
-        > dd {
-          padding: 0;
-          border: 0;
-
-          &:empty {
-            margin: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: @screen-xs-max) {
-  .table > .tbody > dl {
-    padding-bottom: 8px;
-  }
-}
-
-/* Deprecated - Table CSS for components moved inside @transferwise/components */
-.table-calendar {
-  min-width: 300px;
-
-  > tbody > tr > td {
-    padding: 0;
-
-    > a {
-      display: block;
-      padding: 4px 0;
-      margin: 4px 2px;
-      border-radius: @border-radius-base;
-      text-align: center;
-      text-decoration: none;
-
-      &.active {
-        background-color: @color-navy-background-elevated;
-        color: @color-navy-content-primary;
-      }
-
-      &:not([disabled]):hover {
-        background-color: var(--color-content-accent);
-        color: #fff;
-      }
-    }
-  }
-
-  > thead > tr > th {
-    text-align: center;
-  }
-}

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

@@ -1,37 +0,0 @@
-@import (reference) "./mixins/_logical-properties.less";
-
-.tw-checkbox-check {
-  position: relative;
-  display: inline-block;
-  width: 10px;
-  height: 8px;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    background: var(--color-background-screen);
-    transform: translateX(0.5px) rotate(-45deg);
-    transform-origin: left bottom;
-    left: var(--size-8);
-  }
-
-  .has-error {
-    &::before,
-    &::after {
-      background-color: var(--color-interactive-negative);
-    }
-  }
-
-  &::before {
-    top: 9px;
-    height: 6px;
-    width: 2px;
-  }
-
-  &::after {
-    bottom: 5px;
-    height: 2px;
-    width: 11px;
-  }
-}

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

@@ -1,130 +0,0 @@
-@import (reference) "../variables/legacy-variables.less";
-@import (reference) "./mixins/_logical-properties.less";
-@import (reference) "./mixins/_reset-text.less";
-@import (reference) "./mixins/_theming.less";
-@import (reference) "./core/_typography.less";
-
-//
-// Tooltips
-// --------------------------------------------------
-
-// Base class
-.tooltip {
-  position: absolute;
-  z-index: @zindex-tooltip;
-  display: block;
-
-  // Our parent element can be arbitrary since tooltips 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();
-
-  opacity: 0;
-
-  &.in {
-    opacity: @tooltip-opacity;
-  }
-
-  &.top {
-    margin-top: -3px;
-    padding: @tooltip-arrow-width 0;
-  }
-
-  &.right {
-    .margin(left, 3px);
-
-    padding: 0 @tooltip-arrow-width;
-  }
-
-  &.bottom {
-    margin-top: 3px;
-    padding: @tooltip-arrow-width 0;
-  }
-
-  &.left {
-    .margin(left, -3px);
-
-    padding: 0 @tooltip-arrow-width;
-  }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
-  .np-text-body-default;
-
-  max-width: @tooltip-max-width;
-  min-width: 120px;
-  padding: var(--size-16) var(--size-16);
-  color: var(--color-content-primary);
-  text-align: center;
-  background-color: var(--color-background-screen);
-  border-radius: @border-radius-base;
-  box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
-
-  .remove-dark-themes-box-shadows();
-}
-
-// Arrows
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
-// stylelint-disable-next-line no-duplicate-selectors
-.tooltip {
-  &.top .tooltip-arrow {
-    bottom: 0;
-    .left(50%);
-
-    .margin(left, -@tooltip-arrow-width);
-
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: var(--color-background-screen);
-  }
-
-  &.right .tooltip-arrow {
-    top: 50%;
-    .left(0);
-
-    margin-top: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-right-color: var(--color-background-screen);
-  }
-
-  &.left .tooltip-arrow {
-    top: 50%;
-    .right(0);
-
-    margin-top: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-left-color: var(--color-background-screen);
-  }
-
-  &.bottom .tooltip-arrow {
-    top: 0;
-    .left(50%);
-
-    .margin(left, -@tooltip-arrow-width);
-
-    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
-    border-bottom-color: var(--color-background-screen);
-  }
-}
-
-[data-toggle="tooltip"]:not(.btn) {
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    color: var(--color-content-accent-hover) !important;
-    outline: 0;
-  }
-}
-
-a[data-toggle="tooltip"] {
-  white-space: nowrap;
-}

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

@@ -1,153 +0,0 @@
-@import (reference) "../variables/legacy-variables.less";
-@import (reference) "./mixins/_clearfix.less";
-@import (reference) "./mixins/_center-block.less";
-@import (reference) "./mixins/_hide-text.less";
-@import (reference) "./mixins/_logical-properties.less";
-
-.d-inline-block {
-  display: inline-block;
-}
-
-.d-inline {
-  display: inline;
-}
-
-.clearfix {
-  .clearfix();
-}
-
-.center-block {
-  .center-block();
-}
-
-.pull-right,
-.pull-xs-right {
-  .float(right) !important;
-}
-
-.pull-left,
-.pull-xs-left {
-  .float(left) !important;
-}
-
-.pull-xs-none {
-  float: none !important;
-}
-
-@media (--screen-sm) {
-  .pull-sm-left {
-    .float(left) !important;
-  }
-
-  .pull-sm-right {
-    .float(right) !important;
-  }
-
-  .pull-sm-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-md) {
-  .pull-md-left {
-    .float(left) !important;
-  }
-
-  .pull-md-right {
-    .float(right) !important;
-  }
-
-  .pull-md-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-lg) {
-  .pull-lg-left {
-    .float(left) !important;
-  }
-
-  .pull-lg-right {
-    .float(right) !important;
-  }
-
-  .pull-lg-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-xl) {
-  .pull-xl-left {
-    .float(left) !important;
-  }
-
-  .pull-xl-right {
-    .float(right) !important;
-  }
-
-  .pull-xl-none {
-    float: none !important;
-  }
-}
-
-// Floats not changing direction on RTL.
-
-.pull-left-single-direction {
-  float: left !important;
-}
-
-.pull-right-single-direction {
-  float: right !important;
-}
-
-// Toggling content
-// -------------------------
-
-// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
-
-.hide {
-  display: none !important;
-}
-
-.show {
-  display: block !important;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-.text-hide {
-  .text-hide();
-}
-
-// Hide from screenreaders and browsers
-//
-// Credit: HTML5 Boilerplate
-
-.hidden {
-  display: none !important;
-}
-
-// For Affix plugin
-// -------------------------
-
-.affix {
-  position: fixed;
-}
-
-.rotate90 {
-  transform: rotate(90deg);
-}
-
-.rotate180 {
-  transform: rotate(180deg);
-}
-
-.rotate270 {
-  transform: rotate(270deg);
-}
-
-.rotate-90 {
-  transform: rotate(-90deg);
-}