@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-0eb6058

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

@@ -1,68 +0,0 @@
-@import (reference) "./mixins/_logical-properties.less";
-
-.media {
-  display: flex;
-  align-items: center;
-}
-
-.media-body {
-  flex: 1;
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.media-middle {
-  align-self: center;
-}
-
-.media-bottom {
-  align-self: flex-end;
-}
-
-/* Images/elements as the media anchor */
-
-.media-object {
-  display: block;
-}
-
-/* Alignment */
-
-.media-right {
-  .padding(left, var(--size-16));
-}
-
-.media-left {
-  .padding(right, var(--size-16));
-}
-
-@media (--screen-400-zoom) {
-  .media-right,
-  .media-left {
-    .padding(left, var(--size-32));
-  }
-}
-
-/* Headings */
-
-.media-heading {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/* Media list variation */
-
-.media-list {
-  .padding(left, 0);
-
-  list-style: none;
-}
-
-/* Fix text-ellipsis issue with text in dropdown */
-
-.dropdown-menu {
-  .media-body {
-    overflow: hidden;
-  }
-}

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

@@ -1,39 +0,0 @@
-@import (reference) "./_logical-properties.less";
-@import (reference) "./_arrows.less";
-
-/**
- * DEPRECATED: use <InfoPrompt /> component instead
- */
-
-.alert-variant(@background; @text-color; @text-hover) {
-  background-color: @background;
-  color: @text-color;
-
-  a,
-  b,
-  strong,
-  .close,
-  .alert-link,
-  .icon {
-    color: @text-color;
-  }
-
-  a:hover,
-  a:focus,
-  .alert-link:hover,
-  .alert-link:focus,
-  .close:hover,
-  .close:focus {
-    color: @text-hover;
-  }
-}
-
-.alert-arrow(@size: 10px) {
-  position: relative;
-  .arrow-pointer(@size);
-
-  &::before {
-    clip-path: polygon(0% 0%, 0 100%, 100% 0);
-  }
-  .arrow-positions(@size);
-}

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

@@ -1,52 +0,0 @@
-@import (reference) "../mixins/_logical-properties.less";
-
-.arrow(@size: 10px) {
-  position: relative;
-  .arrow-pointer(@size);
-  .arrow-positions(@size);
-}
-
-.arrow-pointer(@size: 10px) {
-  &::before {
-    content: " ";
-    position: absolute;
-    display: block;
-    width: @size;
-    height: @size;
-    .left((2 * @size));
-
-    top: (@size / -2);
-    transform: rotate(45deg);
-    background-color: inherit;
-  }
-}
-
-.arrow-positions(@size: 10px) {
-  &.arrow-center::before {
-    .left(50%);
-
-    .margin(left, (@size / -2));
-  }
-
-  &.arrow-top::before {
-    top: (@size / -2);
-    bottom: auto;
-  }
-
-  &.arrow-left::before {
-    .left((2 * @size));
-
-    .right(auto);
-  }
-
-  &.arrow-right::before {
-    .left(auto);
-
-    .right((2 * @size));
-  }
-
-  &.arrow-bottom::before {
-    top: auto;
-    bottom: (@size / -2);
-  }
-}

package/src/neptune-css/less/mixins/_border-radius.less

@@ -1,11 +0,0 @@
-// Single side border-radius
-
-.border-top-radius(@radius) {
-  border-top-right-radius: @radius;
-  border-top-left-radius: @radius;
-}
-
-.border-bottom-radius(@radius) {
-  border-bottom-right-radius: @radius;
-  border-bottom-left-radius: @radius;
-}

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

@@ -1,82 +0,0 @@
-// Mixins to generate button styles and state variations
-.button-variant(
-@color;
-@color-hover;
-@background;
-@background-hover;
-@background-active;
-@border;
-@border-hover;
-@border-active;
-@dropdown-background: @background;
-@color-active: @color-hover) {
-  color: @color;
-  background-color: @background;
-  border-color: @border;
-  transition: color, background-color 0.15s ease-in-out;
-
-  &:not(.disabled, :disabled, .btn-loading):hover {
-    color: @color-hover;
-    background-color: @background-hover;
-    border-color: @border-hover;
-  }
-
-  &:not(.disabled, :disabled, .btn-loading):active,
-  &:not(.disabled, :disabled, .btn-loading).active,
-  .open > .dropdown-toggle& {
-    color: @color-active;
-    background-color: @background-active;
-    border-color: @border-active;
-
-    &:not(.disabled, :disabled):hover {
-      color: @color-active;
-      background-color: @background-active;
-      border-color: @border-active;
-    }
-  }
-
-  &:not(.disabled, :disabled, .btn-loading).active,
-  .open > .dropdown-toggle& {
-    background-image: none;
-  }
-
-  .badge {
-    color: @background;
-    background-color: @color;
-  }
-}
-
-.button-size(@padding; @font-size; @line-height; @border-radius: 9999px; @min-height: 0) {
-  padding: @padding;
-  font-size: @font-size;
-  line-height: @line-height;
-  border-radius: @border-radius;
-  // TODO: Remove min-height in The Future
-  min-height: @min-height;
-
-  .dropdown-menu {
-    > li > a {
-      font-size: @font-size;
-      line-height: @line-height;
-    }
-  }
-}
-
-// @TODO Deprecate
-.button-outline(@color, @active, @inverse) {
-  .button-variant(
-    @color;
-    @inverse;
-    transparent;
-    @color;
-    @active;
-    @color;
-    @color;
-    @active;
-    #FFF
-  );
-}
-
-.btn-sm {
-  height: 32px;
-}

package/src/neptune-css/less/mixins/_center-block.less

@@ -1,7 +0,0 @@
-// Center-align a block level element
-
-.center-block() {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}

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

@@ -1,23 +0,0 @@
-// Clearfix
-//
-// For modern browsers
-// 1. The space content is one way to avoid an Opera bug when the
-//    contenteditable attribute is included anywhere else in the document.
-//    Otherwise it causes space to appear at the top and bottom of elements
-//    that are clearfixed.
-// 2. The use of `table` rather than `block` is only necessary if using
-//    `:before` to contain the top-margins of child elements.
-//
-// Source: http://nicolasgallagher.com/micro-clearfix-hack/
-
-.clearfix() {
-  &::before,
-  &::after {
-    content: " "; // 1
-    display: table; // 2
-  }
-
-  &::after {
-    clear: both;
-  }
-}

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

@@ -1,105 +0,0 @@
-.flex-properties(@break-point) {
-  .d-flex@{break-point} {
-    display: flex;
-  }
-
-  .d-inline-flex@{break-point} {
-    display: inline-flex;
-  }
-
-  .flex-column@{break-point} {
-    flex-direction: column;
-  }
-
-  .flex-row@{break-point} {
-    flex-direction: row;
-  }
-
-  .justify-content-start@{break-point} {
-    justify-content: flex-start;
-  }
-
-  .justify-content-end@{break-point} {
-    justify-content: flex-end;
-  }
-
-  .justify-content-center@{break-point} {
-    justify-content: center;
-  }
-
-  .justify-content-between@{break-point} {
-    justify-content: space-between;
-  }
-
-  .justify-content-around@{break-point} {
-    justify-content: space-around;
-  }
-
-  .align-items-start@{break-point} {
-    align-items: flex-start;
-  }
-
-  .align-items-end@{break-point} {
-    align-items: flex-end;
-  }
-
-  .align-items-center@{break-point} {
-    align-items: center;
-  }
-
-  .align-items-baseline@{break-point} {
-    align-items: baseline;
-  }
-
-  .align-items-stretch@{break-point} {
-    align-items: stretch;
-  }
-
-  .align-self-start@{break-point} {
-    align-self: flex-start;
-  }
-
-  .align-self-end@{break-point} {
-    align-self: flex-end;
-  }
-
-  .align-self-center@{break-point} {
-    align-self: center;
-  }
-
-  .align-self-baseline@{break-point} {
-    align-self: baseline;
-  }
-
-  .align-self-stretch@{break-point} {
-    align-self: stretch;
-  }
-
-  .flex-nowrap@{break-point} {
-    flex-wrap: nowrap;
-  }
-
-  .flex-wrap@{break-point} {
-    flex-wrap: wrap;
-  }
-
-  .order-0@{break-point} {
-    order: 0;
-  }
-
-  .order-1@{break-point} {
-    order: 1;
-  }
-
-  .order-2@{break-point} {
-    order: 2;
-  }
-
-  .order-3@{break-point} {
-    order: 3;
-  }
-
-  .flex-grow-1@{break-point} {
-    flex-grow: 1;
-  }
-}

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

@@ -1,130 +0,0 @@
-@import (reference) "../core/_typography.less";
-
-// Form validation states
-
-.form-control-validation(@text-color; @border-color; @border-hover;) {
-  border-color: @border-color !important;
-
-  // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
-  .control-label,
-
-  // Color the label and help text
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label,
-  .radio label,
-  .checkbox label,
-  .radio-inline label,
-  .checkbox-inline label,
-  .input-group-addon {
-    color: @text-color !important;
-    border-color: @border-color !important;
-  }
-
-  // Set the border and box shadow on specific inputs to match
-  .form-control,
-  .btn-input,
-  .btn-input:not(.disabled, :disabled):focus,
-  .btn-input:not(.disabled, :disabled):hover,
-  .input-group-addon,
-  .alert {
-    border-color: @border-color !important;
-  }
-
-  &:active,
-  &:focus,
-  &:focus-within {
-    .form-control,
-    &.radio label,
-    &.checkbox label,
-    .btn-input,
-    .input-group-addon,
-    .input-group .form-control:focus,
-    .alert {
-      border-color: @border-hover !important;
-    }
-  }
-
-  &:not(.disabled, :disabled):hover {
-    &.radio label,
-    &.checkbox label,
-    .btn-input,
-    .alert {
-      border-color: @border-hover !important;
-    }
-  }
-
-  // Optional feedback icon
-  .form-control-feedback {
-    color: @text-color;
-  }
-
-  .radio,
-  &.checkbox {
-    > label {
-      &:not(.disabled, :disabled) {
-        border-color: @border-color;
-        color: var(--color-content-primary);
-      }
-
-      &:not(.disabled, :disabled):hover,
-      &:focus-within {
-        border-color: @border-hover !important;
-
-        .tw-checkbox-button,
-        .tw-radio-button {
-          border-color: @border-hover !important;
-        }
-      }
-    }
-
-    .tw-checkbox-button,
-    .tw-radio-button {
-      border-color: @border-color;
-    }
-  }
-}
-
-// Form control focus state
-//
-// Generate a customized focus state and for any input with the specified color,
-// which defaults to the `var(--color-interactive-secondary-active)` CSS custom prop.
-//
-// We highly encourage you to not customize the default value, but instead use
-// this to tweak colors on an as-needed basis. This aesthetic change is based on
-// WebKit's default styles, but applicable to a wider range of browsers. Its
-// usability and accessibility should be taken into account with any change.
-//
-// Example usage: change the default blue border and shadow to white for better
-// contrast against a dark gray background.
-.form-control-focus(@color: var(--color-interactive-primary)) {
-  &:not(.disabled, :disabled):focus {
-    border-color: @color;
-    outline: 0;
-  }
-}
-
-// Form control sizing
-//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
-.input-size(@input-height; @input-padding; @border-radius) {
-  min-height: @input-height;
-  padding: @input-padding;
-  border-radius: @border-radius;
-
-  select& {
-    min-height: @input-height;
-  }
-
-  textarea&,
-  select[multiple]& {
-    height: auto;
-  }
-}

package/src/neptune-css/less/mixins/_grid-framework.less

@@ -1,104 +0,0 @@
-@import (reference) "_logical-properties.less";
-
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `@grid-columns`.
-
-.make-grid-columns() {
-  // Common styles for all sizes of grid columns, widths 1-12
-  .col(@index) {
-    // initial
-    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
-    .col((@index + 1), @item);
-  }
-  .col(@index, @list) when (@index =< @grid-columns) {
-    // general; "=<" isn't a typo
-    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
-    .col((@index + 1), ~"@{list}, @{item}");
-  }
-  .col(@index, @list) when (@index > @grid-columns) {
-    // terminal
-    @{list} {
-      position: relative;
-      // Prevent columns from collapsing when empty
-      min-height: 1px;
-      // Inner gutter via padding
-      padding-left: ceil((@grid-gutter-width / 2));
-      padding-right: floor((@grid-gutter-width / 2));
-    }
-  }
-  .col(1); // kickstart it
-}
-
-.float-grid-columns(@class) {
-  .col(@index) {
-    // initial
-    @item: ~".col-@{class}-@{index}";
-    .col((@index + 1), @item);
-  }
-  .col(@index, @list) when (@index =< @grid-columns) {
-    // general
-    @item: ~".col-@{class}-@{index}";
-    .col((@index + 1), ~"@{list}, @{item}");
-  }
-  .col(@index, @list) when (@index > @grid-columns) {
-    // terminal
-    @{list} {
-      .float(left);
-    }
-  }
-  .col(1); // kickstart it
-}
-
-.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
-  .col-@{class}-@{index} {
-    width: percentage((@index / @grid-columns));
-
-    .row-equal-height & {
-      /* stylelint-disable-next-line function-calc-no-unspaced-operator */
-      width: calc(percentage((@index / @grid-columns)) ~"- 0.5px");
-    }
-  }
-}
-.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
-  .col-@{class}-push-@{index} {
-    .left(percentage((@index / @grid-columns)));
-  }
-}
-.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
-  .col-@{class}-push-0 {
-    .left(auto);
-  }
-}
-.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
-  .col-@{class}-pull-@{index} {
-    .right(percentage((@index / @grid-columns)));
-  }
-}
-.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
-  .col-@{class}-pull-0 {
-    .right(auto);
-  }
-}
-.calc-grid-column(@index, @class, @type) when (@type = offset) {
-  .col-@{class}-offset-@{index} {
-    .margin(left, percentage((@index / @grid-columns)));
-  }
-}
-
-// Basic looping in LESS
-.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
-  .calc-grid-column(@index, @class, @type);
-  // next iteration
-  .loop-grid-columns((@index - 1), @class, @type);
-}
-
-// Create grid for specific class
-.make-grid(@class) {
-  .float-grid-columns(@class);
-  .loop-grid-columns(@grid-columns, @class, width);
-  .loop-grid-columns(@grid-columns, @class, pull);
-  .loop-grid-columns(@grid-columns, @class, push);
-  .loop-grid-columns(@grid-columns, @class, offset);
-}