@transferwise/neptune-css 10.0.5 → 10.0.6-beta.38

package/src/less/mixins/_grid.less

@@ -4,64 +4,74 @@
 
 // Centered container element
 .container-fixed(@gutter: @grid-gutter-width) {
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
+  .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));
-  margin-right: floor((@gutter / -2));
+  .margin(left, ceil((@gutter / -2)));
+
+  .margin(right, floor((@gutter / -2)));
+
   &:extend(.clearfix all);
 }
 
 // Generate the extra small columns
 .make-xs-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  float: left;
+  .float(left);
+
   width: percentage((@columns / @grid-columns));
   min-height: 1px;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
+  .padding(left, (@gutter / 2));
+
+  .padding(right, (@gutter / 2));
 }
 .make-xs-column-offset(@columns) {
-  margin-left: percentage((@columns / @grid-columns));
+  .margin(left, percentage((@columns / @grid-columns)));
 }
 .make-xs-column-push(@columns) {
-  left: percentage((@columns / @grid-columns));
+  .left(percentage((@columns / @grid-columns)));
 }
 .make-xs-column-pull(@columns) {
-  right: percentage((@columns / @grid-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);
+  .padding(left, (@gutter / 2));
+
+  .padding(right, (@gutter / 2));
 
   @media (min-width: @screen-sm-min) {
-    float: left;
+    .float(left);
+
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-offset(@columns) {
   @media (min-width: @screen-sm-min) {
-    margin-left: percentage((@columns / @grid-columns));
+    .margin(left, percentage((@columns / @grid-columns)));
   }
 }
 .make-sm-column-push(@columns) {
   @media (min-width: @screen-sm-min) {
-    left: percentage((@columns / @grid-columns));
+    .left(percentage((@columns / @grid-columns)));
   }
 }
 .make-sm-column-pull(@columns) {
   @media (min-width: @screen-sm-min) {
-    right: percentage((@columns / @grid-columns));
+    .right(percentage((@columns / @grid-columns)));
   }
 }
 
@@ -69,27 +79,29 @@
 .make-md-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
+  .padding(left, (@gutter / 2));
+
+  .padding(right, (@gutter / 2));
 
   @media (min-width: @screen-md-min) {
-    float: left;
+    .float(left);
+
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-offset(@columns) {
   @media (min-width: @screen-md-min) {
-    margin-left: percentage((@columns / @grid-columns));
+    .margin(left, percentage((@columns / @grid-columns)));
   }
 }
 .make-md-column-push(@columns) {
   @media (min-width: @screen-md-min) {
-    left: percentage((@columns / @grid-columns));
+    .left(percentage((@columns / @grid-columns)));
   }
 }
 .make-md-column-pull(@columns) {
   @media (min-width: @screen-md-min) {
-    right: percentage((@columns / @grid-columns));
+    .right(percentage((@columns / @grid-columns)));
   }
 }
 
@@ -97,27 +109,29 @@
 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
+  .padding(left, (@gutter / 2));
+
+  .padding(right, (@gutter / 2));
 
   @media (min-width: @screen-lg-min) {
-    float: left;
+    .float(left);
+
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-offset(@columns) {
   @media (min-width: @screen-lg-min) {
-    margin-left: percentage((@columns / @grid-columns));
+    .margin(left, percentage((@columns / @grid-columns)));
   }
 }
 .make-lg-column-push(@columns) {
   @media (min-width: @screen-lg-min) {
-    left: percentage((@columns / @grid-columns));
+    .left(percentage((@columns / @grid-columns)));
   }
 }
 .make-lg-column-pull(@columns) {
   @media (min-width: @screen-lg-min) {
-    right: percentage((@columns / @grid-columns));
+    .right(percentage((@columns / @grid-columns)));
   }
 }
 
@@ -125,26 +139,28 @@
 .make-xl-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-left: (@gutter / 2);
-  padding-right: (@gutter / 2);
+  .padding(left, (@gutter / 2));
+
+  .padding(right, (@gutter / 2));
 
   @media (min-width: @screen-xl-min) {
-    float: left;
+    .float(left);
+
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-xl-column-offset(@columns) {
   @media (min-width: @screen-xl-min) {
-    margin-left: percentage((@columns / @grid-columns));
+    .margin(left, percentage((@columns / @grid-columns)));
   }
 }
 .make-xl-column-push(@columns) {
   @media (min-width: @screen-xl-min) {
-    left: percentage((@columns / @grid-columns));
+    .left(percentage((@columns / @grid-columns)));
   }
 }
 .make-xl-column-pull(@columns) {
   @media (min-width: @screen-xl-min) {
-    right: percentage((@columns / @grid-columns));
+    .right(percentage((@columns / @grid-columns)));
   }
 }

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

@@ -0,0 +1,20 @@
+// 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/less/mixins/_list-group.less

@@ -0,0 +1,23 @@
+@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: @brand-white;
+    }
+
+    .list-group-item-text {
+      color: @color;
+    }
+
+    a& {
+      color: @color;
+
+      &:hover {
+        color: @color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,329 @@
+// 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, @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;
+  }
+
+  html:not([dir="rtl"]) & {
+    padding: @value1 @value2 @value3 @value4;
+  }
+}
+
+// CSS Logical Properties: https://caniuse.com/css-logical-props
+
+.margin(@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;
+  }
+
+  html:not([dir="rtl"]) & {
+    margin: @value1 @value2 @value3 @value4;
+  }
+}
+
+// CSS property: inset-inline (positions): https://caniuse.com/mdn-css_properties_inset-inline
+
+.left(@value) {
+  [dir="rtl"] & {
+    right: @value;
+  }
+
+  html:not([dir="rtl"]) & {
+    left: @value;
+  }
+}
+
+.right(@value) {
+  [dir="rtl"] & {
+    left: @value;
+  }
+
+  html:not([dir="rtl"]) & {
+    right: @value;
+  }
+}
+
+// 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;
+}