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

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

@@ -1,158 +0,0 @@
-// Grid system
-//
-// Generate semantic grid columns with these mixins.
-
-// Centered container element
-.container-fixed(@gutter: @grid-gutter-width) {
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  &:extend(.clearfix all);
-}
-
-// Creates a wrapper for a series of columns
-.make-row(@gutter: @grid-gutter-width) {
-  .margin(left, ceil((@gutter / -2)), floor((@gutter / -2)));
-
-  .margin(right, floor((@gutter / -2)), ceil((@gutter / -2)));
-
-  &:extend(.clearfix all);
-}
-
-// Generate the extra small columns
-.make-xs-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  .float(left);
-
-  width: percentage((@columns / @grid-columns));
-  min-height: 1px;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
-}
-.make-xs-column-offset(@columns) {
-  .margin(left, percentage((@columns / @grid-columns)));
-}
-.make-xs-column-push(@columns) {
-  .left(percentage((@columns / @grid-columns)));
-}
-.make-xs-column-pull(@columns) {
-  .right(percentage((@columns / @grid-columns)));
-}
-
-// Generate the small columns
-.make-sm-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  @media (min-width: @screen-sm-min) {
-    .float(left);
-
-    width: percentage((@columns / @grid-columns));
-  }
-}
-.make-sm-column-offset(@columns) {
-  @media (min-width: @screen-sm-min) {
-    .margin(left, percentage((@columns / @grid-columns)));
-  }
-}
-.make-sm-column-push(@columns) {
-  @media (min-width: @screen-sm-min) {
-    .left(percentage((@columns / @grid-columns)));
-  }
-}
-.make-sm-column-pull(@columns) {
-  @media (min-width: @screen-sm-min) {
-    .right(percentage((@columns / @grid-columns)));
-  }
-}
-
-// Generate the medium columns
-.make-md-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  @media (min-width: @screen-md-min) {
-    .float(left);
-
-    width: percentage((@columns / @grid-columns));
-  }
-}
-.make-md-column-offset(@columns) {
-  @media (min-width: @screen-md-min) {
-    .margin(left, percentage((@columns / @grid-columns)));
-  }
-}
-.make-md-column-push(@columns) {
-  @media (min-width: @screen-md-min) {
-    .left(percentage((@columns / @grid-columns)));
-  }
-}
-.make-md-column-pull(@columns) {
-  @media (min-width: @screen-md-min) {
-    .right(percentage((@columns / @grid-columns)));
-  }
-}
-
-// Generate the large columns
-.make-lg-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  @media (min-width: @screen-lg-min) {
-    .float(left);
-
-    width: percentage((@columns / @grid-columns));
-  }
-}
-.make-lg-column-offset(@columns) {
-  @media (min-width: @screen-lg-min) {
-    .margin(left, percentage((@columns / @grid-columns)));
-  }
-}
-.make-lg-column-push(@columns) {
-  @media (min-width: @screen-lg-min) {
-    .left(percentage((@columns / @grid-columns)));
-  }
-}
-.make-lg-column-pull(@columns) {
-  @media (min-width: @screen-lg-min) {
-    .right(percentage((@columns / @grid-columns)));
-  }
-}
-
-// Generate the large columns
-.make-xl-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  @media (min-width: @screen-xl-min) {
-    .float(left);
-
-    width: percentage((@columns / @grid-columns));
-  }
-}
-.make-xl-column-offset(@columns) {
-  @media (min-width: @screen-xl-min) {
-    .margin(left, percentage((@columns / @grid-columns)));
-  }
-}
-.make-xl-column-push(@columns) {
-  @media (min-width: @screen-xl-min) {
-    .left(percentage((@columns / @grid-columns)));
-  }
-}
-.make-xl-column-pull(@columns) {
-  @media (min-width: @screen-xl-min) {
-    .right(percentage((@columns / @grid-columns)));
-  }
-}

package/src/neptune-css/less/mixins/_hide-text.less

@@ -1,20 +0,0 @@
-// CSS image replacement
-//
-// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
-// mixins being reused as classes with the same name, this doesn't hold up. As
-// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
-//
-// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
-
-// Deprecated as of v3.0.1 (will be removed in v4)
-.hide-text() {
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}
-
-// New mixin to use as of v3.0.1
-.text-hide() {
-  .hide-text();
-}

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

@@ -1,7 +0,0 @@
-.link-underline (@isUnderlineImportant: false) {
-  text-decoration: underline;
-  & when (@isUnderlineImportant = true) {
-    text-decoration: underline !important;
-  }
-  text-underline-offset: 0.3em;
-}

package/src/neptune-css/less/mixins/_list-group.less

@@ -1,23 +0,0 @@
-@import (reference) "_logical-properties.less";
-
-.list-group-item-variant(@state; @background; @color) {
-  .list-group-item-@{state} {
-    .border(left, 3px, solid, @color);
-
-    .list-group-item& {
-      background-color: var(--color-background-screen);
-    }
-
-    .list-group-item-text {
-      color: @color;
-    }
-
-    a& {
-      color: @color;
-
-      &:hover {
-        color: @color;
-      }
-    }
-  }
-}

package/src/neptune-css/less/mixins/_logical-properties-IE-friendly.less

@@ -1,381 +0,0 @@
-// Mixin to support Logical properties/values for IE
-
-// CSS property: float: Flow-relative values inline-start
-// and inline-end: https://caniuse.com/mdn-css_properties_float_flow_relative_values
-
-.float(@direction) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      float: right;
-    }
-
-    float: @direction;
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      float: left;
-    }
-
-    float: @direction;
-  }
-}
-
-// CSS property: clear: Flow-relative values inline-start
-// and inline-end: https://caniuse.com/mdn-css_properties_clear_flow_relative_values
-
-.clear(@direction) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      clear: right;
-    }
-
-    clear: @direction;
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      clear: left;
-    }
-
-    clear: @direction;
-  }
-}
-
-// CSS property: text-align: Flow-relative values start
-// and end: https://caniuse.com/mdn-css_properties_text-align_flow_relative_values_start_and_end
-
-.text-align(@direction) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      text-align: right;
-    }
-
-    text-align: left;
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      text-align: left;
-    }
-
-    text-align: right;
-  }
-}
-
-// CSS Logical Properties: https://caniuse.com/css-logical-props
-
-.padding(@direction, @currentDirectionPaddingValue, @oppositeDirectionPaddingValue: initial) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      padding-right: @currentDirectionPaddingValue;
-      padding-@{direction}: @oppositeDirectionPaddingValue;
-    }
-
-    padding-@{direction}: @currentDirectionPaddingValue;
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      padding-left: @currentDirectionPaddingValue;
-      padding-@{direction}: @oppositeDirectionPaddingValue;
-    }
-
-    padding-@{direction}: @currentDirectionPaddingValue;
-  }
-}
-
-.padding-for-spacing(@direction, @value) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      padding-right: @value;
-    }
-
-    html:not([dir="rtl"]) & {
-      padding-@{direction}: @value;
-    }
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      padding-left: @value;
-    }
-
-    html:not([dir="rtl"]) & {
-      padding-@{direction}: @value;
-    }
-  }
-}
-
-// Use only if the right and left values are different or you have to step up specificity of the padding.
-// Use for single value shorthand
-//  'padding: var(--foo);' -> '.padding-shorthand(var(--foo))'
-// Use for multiple value shorthand
-//  'padding: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' ->
-//  '.padding-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
-
-.padding-shorthand(@value1, @value2: ~'', @value3: ~'', @value4: ~'') {
-  [dir="rtl"] & {
-    padding: @value1 @value4 @value3 @value2;
-  }
-
-  padding: @value1 @value2 @value3 @value4;
-}
-
-// CSS Logical Properties: https://caniuse.com/css-logical-props
-
-.margin(@direction, @currentDirectionMarginValue, @oppositeDirectionMarginValue: initial) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      margin-right: @currentDirectionMarginValue;
-      margin-@{direction}: @oppositeDirectionMarginValue;
-    }
-
-    margin-@{direction}: @currentDirectionMarginValue;
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      margin-left: @currentDirectionMarginValue;
-      margin-@{direction}: @oppositeDirectionMarginValue;
-    }
-
-    margin-@{direction}: @currentDirectionMarginValue;
-  }
-}
-
-.margin-for-spacing(@direction, @value) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      margin-right: @value;
-    }
-
-    html:not([dir="rtl"]) & {
-      margin-@{direction}: @value;
-    }
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      margin-left: @value;
-    }
-
-    html:not([dir="rtl"]) & {
-      margin-@{direction}: @value;
-    }
-  }
-}
-
-// Use only if the right and left values are different or you have to step up specificity of the margin.
-// Use for single value shorthand 'margin: var(--foo);' -> '.margin-shorthand(var(--foo))'
-// Use for multiple value shorthand
-//  'margin: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' ->
-//  '.margin-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
-
-.margin-shorthand(@value1, @value2: ~'', @value3: ~'', @value4: ~'') {
-  [dir="rtl"] & {
-    margin: @value1 @value4 @value3 @value2;
-  }
-
-  margin: @value1 @value2 @value3 @value4;
-}
-
-// CSS property: inset-inline (positions): https://caniuse.com/mdn-css_properties_inset-inline
-
-.left(@currentDirectionPositionValue, @oppositeDirectionPositionValue: initial) {
-  [dir="rtl"] & {
-    right: @currentDirectionPositionValue;
-    left: @oppositeDirectionPositionValue;
-  }
-
-  left: @currentDirectionPositionValue;
-}
-
-.right(@currentDirectionPositionValue, @oppositeDirectionPositionValue: initial) {
-  [dir="rtl"] & {
-    left: @currentDirectionPositionValue;
-    right: @oppositeDirectionPositionValue;
-  }
-
-  right: @currentDirectionPositionValue;
-}
-
-// CSS property: border-inline-start https://caniuse.com/mdn-css_properties_border-inline-start
-
-.border(@direction, @size, @style: ~'', @color: ~'') {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      border-right: @size @style @color;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-@{direction}: @size @style @color;
-    }
-  }
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      border-left: @size @style @color;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-@{direction}: @size @style @color;
-    }
-  }
-}
-
-.border-width(@direction, @size) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      border-right-width: @size;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-@{direction}-width: @size;
-    }
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      border-left-width: @size;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-@{direction}-width: @size;
-    }
-  }
-}
-
-// CSS property: border-start-start-radius: https://caniuse.com/mdn-css_properties_border-start-start-radius
-
-//  | top-left      | top-right      |
-//  | bottom-left   | bottom-right   |
-
-.border-radius(@direction, @radius) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      border-bottom-right-radius: @radius;
-      border-top-right-radius: @radius;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-bottom-@{direction}-radius: @radius;
-      border-top-@{direction}-radius: @radius;
-    }
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      border-bottom-left-radius: @radius;
-      border-top-left-radius: @radius;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-bottom-@{direction}-radius: @radius;
-      border-top-@{direction}-radius: @radius;
-    }
-  }
-}
-
-.border-top-dir-radius(@direction, @radius) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      border-top-right-radius: @radius;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-top-@{direction}-radius: @radius;
-    }
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      border-top-left-radius: @radius;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-top-@{direction}-radius: @radius;
-    }
-  }
-}
-
-.border-bottom-dir-radius(@direction, @radius) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      border-bottom-right-radius: @radius;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-bottom-@{direction}-radius: @radius;
-    }
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      border-bottom-left-radius: @radius;
-    }
-
-    html:not([dir="rtl"]) & {
-      border-bottom-@{direction}-radius: @radius;
-    }
-  }
-}
-
-// Background position
-
-.background-position(@direction, @vertical-direction: ~'') {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      background-position: right @vertical-direction;
-    }
-
-    background-position: left @vertical-direction;
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      background-position: left @vertical-direction;
-    }
-
-    background-position: right @vertical-direction;
-  }
-}
-
-// Horizontal linear gradient
-
-.background-linear-gradient(@direction, @color1, @color2) {
-  & when (@direction = left) {
-    [dir="rtl"] & {
-      background: linear-gradient(to right, @color1, @color2);
-    }
-
-    background: linear-gradient(to left, @color1, @color2);
-  }
-
-  & when (@direction = right) {
-    [dir="rtl"] & {
-      background: linear-gradient(to left, @color1, @color2);
-    }
-
-    background: linear-gradient(to right, @color1, @color2);
-  }
-}
-
-// Horizontal translations
-
-.translateX(@value, @transform2: ~'', @transform3: ~'') {
-  [dir="rtl"] & {
-    transform: translateX(@value * -1) @transform2 @transform3;
-  }
-
-  transform: translateX(@value) @transform2 @transform3;
-}
-
-// Rotations
-
-.rotate(@deg) {
-  [dir="rtl"] & {
-    transform: rotate(@deg * -1);
-  }
-
-  transform: rotate(@deg);
-}