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

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

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

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

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

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