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

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

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

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

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

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

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

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

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

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

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

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

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