@transferwise/neptune-css 14.28.1 → 14.29.0

package/src/less/core/viewport-themes.less

@@ -1,51 +1,8 @@
-@import '@transferwise/neptune-tokens/themes/personal/tokens.less';
+@import "@transferwise/neptune-tokens/themes/personal/tokens.less";
+@import "@transferwise/neptune-tokens/tiny-viewport.less";
 
 @media (--screen-400-zoom) {
   .np-theme-personal {
-    --delta: 2;
-
-    --size-4: calc(@size-4 / var(--delta));
-    --size-5: calc(@size-5 / var(--delta));
-    --size-8: calc(@size-8 / var(--delta));
-    --size-10: calc(@size-10 / var(--delta));
-    --size-12: calc(@size-12 / var(--delta));
-    --size-14: calc(@size-14 / var(--delta));
-    --size-16: calc(@size-16 / var(--delta));
-    --size-24: calc(@size-24 / var(--delta));
-    --size-32: calc(@size-32 / var(--delta));
-    --size-40: calc(@size-40 / var(--delta));
-    --size-48: calc(@size-48 / var(--delta));
-    --size-52: calc(@size-52 / var(--delta));
-    --size-56: calc(@size-56 / var(--delta));
-    --size-60: calc(@size-60 / var(--delta));
-    --size-64: calc(@size-64 / var(--delta));
-    --size-72: calc(@size-72 / var(--delta));
-    --size-80: calc(@size-80 / var(--delta));
-    --size-88: calc(@size-88 / var(--delta));
-    --size-96: calc(@size-96 / var(--delta));
-    --size-104: calc(@size-104 / var(--delta));
-    --size-112: calc(@size-112 / var(--delta));
-    --size-120: calc(@size-120 / var(--delta));
-    --size-126: calc(@size-126 / var(--delta));
-    --size-128: calc(@size-128 / var(--delta));
-    --size-146: calc(@size-146 / var(--delta));
-    --size-154: calc(@size-154 / var(--delta));
-    --size-x-small: calc(@size-x-small / var(--delta));
-    --size-small: calc(@size-small / var(--delta));
-    --size-medium: calc(@size-medium / var(--delta));
-    --size-large: calc(@size-large / var(--delta));
-    --size-x-large: calc(@size-x-large / var(--delta));
-    --size-2x-large: calc(@size-2x-large / var(--delta));
-    --space-content-horizontal: calc(@space-content-horizontal / var(--delta));
-    --space-small: calc(@space-small / var(--delta));
-    --space-medium: calc(@space-medium / var(--delta));
-    --space-large: calc(@space-large / var(--delta));
-    --space-x-large: calc(@space-x-large / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
-
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

package/src/less/forms/bootstrap-forms.less

@@ -636,7 +636,7 @@ input[type="password"] {
 //
 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
 // forms begin stacked on extra small (mobile) devices and then go inline when
-// viewports reach <768px.
+// viewports reach <840px.
 //
 // Requires wrapping inputs and labels with `.form-group` for proper display of
 // default HTML form controls and our custom form controls (e.g., input groups).

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

@@ -1,3 +1,4 @@
+// @deprecated Use _logical-properties-modern-browsers.less instead.
 // Mixin to support Logical properties/values for IE
 
 // CSS property: float: Flow-relative values inline-start

package/src/less/mixins/_logical-properties-modern-browsers.less

@@ -1,4 +1,3 @@
-
 // Mixin to support Logical properties/values for modern browsers
 
 // Custom property for the cases which doesn't exist a logical value. (Translations, linear-gradients)
@@ -17,20 +16,10 @@
 
 .float(@direction) {
   & when (@direction = left) {
-    [dir="rtl"] & {
-      float: right;
-    }
-
-    float: @direction;
     float: inline-start;
   }
 
   & when (@direction = right) {
-    [dir="rtl"] & {
-      float: left;
-    }
-
-    float: @direction;
     float: inline-end;
   }
 }
@@ -39,20 +28,10 @@
 
 .clear(@direction) {
   & when (@direction = left) {
-    [dir="rtl"] & {
-      clear: right;
-    }
-
-    clear: @direction;
     clear: inline-start;
   }
 
   & when (@direction = right) {
-    [dir="rtl"] & {
-      clear: left;
-    }
-
-    clear: @direction;
     clear: inline-end;
   }
 }
@@ -71,7 +50,27 @@
 
 // CSS Logical Properties: https://caniuse.com/css-logical-props
 
-.padding(@direction, @value) {
+.padding(@direction, @value, @oppositeValue: ~"") {
+  & when (@direction = left) {
+    padding-inline-start: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        padding-inline-end: @oppositeValue;
+      }
+    }
+  }
+
+  & when (@direction = right) {
+    padding-inline-end: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        padding-inline-start: @oppositeValue;
+      }
+    }
+  }
+}
+
+.padding-for-spacing(@direction, @value) {
   & when (@direction = left) {
     padding-inline-start: @value;
   }
@@ -85,25 +84,45 @@
 // 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-shorthand(@value1, @value2: ~"", @value3: ~"", @value4: ~"") {
+  & when (@value2 = ~"") {
+    padding: @value1;
   }
-
-  html:not([dir="rtl"]) & {
-    padding: @value1 @value2 @value3 @value4;
+  & when not (@value2 = ~"") {
+    padding-block: @value1 @value3;
+    padding-inline: @value4 @value2;
   }
 }
 
 // CSS Logical Properties: https://caniuse.com/css-logical-props
 
-.margin(@direction, @value) {
+.margin(@direction, @value, @oppositeValue: ~"") {
   & when (@direction = left) {
     margin-inline-start: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        margin-inline-end: @oppositeValue;
+      }
+    }
   }
 
   & when (@direction = right) {
-    padding-inline-end: @value;
+    margin-inline-end: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        margin-inline-start: @oppositeValue;
+      }
+    }
+  }
+}
+
+.margin-for-spacing(@direction, @value) {
+  & when (@direction = left) {
+    margin-inline-start: @value;
+  }
+
+  & when (@direction = right) {
+    margin-inline-end: @value;
   }
 }
 
@@ -111,29 +130,39 @@
 // 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-shorthand(@value1, @value2: ~"", @value3: ~"", @value4: ~"") {
+  & when (@value2 = ~"") {
+    margin: @value1;
   }
-
-  html:not([dir="rtl"]) & {
-    margin: @value1 @value2 @value3 @value4;
+  & when not (@value2 = ~"") {
+    margin-block: @value1 @value3;
+    margin-inline: @value4 @value2;
   }
 }
 
 // CSS property: inset-inline (positions): https://caniuse.com/mdn-css_properties_inset-inline
 
-.left(@value) {
+.left(@value, @oppositeValue: ~"") {
   inset-inline-start: @value;
+  & when not (@oppositeValue = ~"") {
+    [dir="rtl"] & {
+      inset-inline-end: @oppositeValue;
+    }
+  }
 }
 
-.right(@value) {
+.right(@value, @oppositeValue: ~"") {
   inset-inline-end: @value;
+  & when not (@oppositeValue = ~"") {
+    [dir="rtl"] & {
+      inset-inline-start: @oppositeValue;
+    }
+  }
 }
 
 // CSS property: border-inline-start https://caniuse.com/mdn-css_properties_border-inline-start
 
-.border(@direction, @size, @style: ~'', @color: ~'') {
+.border(@direction, @size, @style: ~"", @color: ~"") {
   & when (@direction = left) {
     border-inline-start: @size @style @color;
   }
@@ -193,7 +222,7 @@
 
 // Background position
 
-.background-position(@direction, @vertical-direction: ~'') {
+.background-position(@direction, @vertical-direction: ~"") {
   & when (@direction = left) {
     background-position: var(--left) @vertical-direction;
   }
@@ -215,9 +244,19 @@
   }
 }
 
+// Rotations
+
+.rotate(@deg) {
+  [dir="rtl"] & {
+    transform: rotate(@deg * -1);
+  }
+
+  transform: rotate(@deg);
+}
+
 // Horizontal translations
 
-.translateX(@value, @transform2: ~'', @transform3: ~'') {
+.translateX(@value, @transform2: ~"", @transform3: ~"") {
   [dir="rtl"] & {
     transform: translateX(@value * -1) @transform2 @transform3;
   }

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

@@ -1,5 +1,5 @@
 // Custom support for logical properties/values. Select one of the options:
 
-// @import '../mixins/_physical-properties.less';
-@import "./_logical-properties-IE-friendly.less";
-// @import '../mixins/_logical-properties-modern-browsers.less';
+// @import "./_physical-properties.less";
+// @import './_logical-properties-IE-friendly.less';
+@import "../mixins/_logical-properties-modern-browsers.less";

package/src/less/modals.less

@@ -190,7 +190,7 @@
   // Automatically set modal's width for larger viewports
 
   .modal-dialog {
-    width: @modal-md;
+    width: (@screen-sm-min - 36px);
     margin: (@padding-base-vertical * 4) auto;
   }
 
@@ -224,16 +224,16 @@
   }
 }
 
-@media (min-width: (@modal-sm + 32px)) {
+@media (--screen-xs) {
   .modal-sm {
-    width: @modal-sm;
+    width: (@screen-xs-min - 20px);
     margin: (@padding-base-vertical * 4) auto;
   }
 }
 
 @media (--screen-md) {
   .modal-lg {
-    width: @modal-lg;
+    width: (@screen-md-min - 16px);
     margin: (@padding-base-vertical * 4) auto;
   }
 }

package/src/less/navbar.less

@@ -64,7 +64,7 @@
 // Navbar collapse (body)
 //
 // Group your navbar content into this for easy collapsing and expanding across
-// various device sizes. By default, this content is collapsed when <768px, but
+// various device sizes. By default, this content is collapsed when <840px, but
 // will expand past that for a horizontal display.
 //
 // To start (on mobile devices) the navbar links, forms, and buttons are stacked
@@ -291,7 +291,7 @@
 // Navbar nav links
 //
 // Builds on top of the `.nav` components with its own modifier class to make
-// the nav the full height of the horizontal nav (above 768px).
+// the nav the full height of the horizontal nav (above 840px).
 
 .navbar-nav {
   > li {

package/src/less/neptune.bundle.less

@@ -1,18 +1,24 @@
 @import "@transferwise/neptune-tokens/breakpoints.less";
 @import "@transferwise/neptune-tokens/tokens.css";
-@import '@transferwise/neptune-tokens/themes/personal/tokens.css';
-@import '@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css';
-@import '@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css';
-@import '@transferwise/neptune-tokens/themes/personal--dark/tokens.css';
-@import '@transferwise/neptune-tokens/themes/platform/tokens.css';
-@import '@transferwise/neptune-tokens/themes/platform--forest-green/tokens.css';
-@import '@transferwise/neptune-tokens/themes/business/tokens.css';
-@import '@transferwise/neptune-tokens/themes/business--dark/tokens.css';
-@import '@transferwise/neptune-tokens/themes/business--forest-green/tokens.css';
-@import '@transferwise/neptune-tokens/themes/business--bright-green/tokens.css';
-@import "./neptune-core.less";
-@import './core/viewport-themes.less';
-@import "./neptune-addons.less";
+@import "@transferwise/neptune-tokens/themes/personal/tokens.css";
+@import "@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css";
+@import "@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css";
+@import "@transferwise/neptune-tokens/themes/personal--dark/tokens.css";
+@import "@transferwise/neptune-tokens/themes/platform/tokens.css";
+@import "@transferwise/neptune-tokens/themes/platform--forest-green/tokens.css";
+@import "@transferwise/neptune-tokens/themes/business/tokens.css";
+@import "@transferwise/neptune-tokens/themes/business--dark/tokens.css";
+@import "@transferwise/neptune-tokens/themes/business--forest-green/tokens.css";
+@import "@transferwise/neptune-tokens/themes/business--bright-green/tokens.css";
+@import "./core/_fonts.less";
+@import "./core/_scaffolding.less";
+@import "./core/_typography.less";
+@import "./core/_typography-utilities.less";
+@import "./core/viewport-themes.less";
+@import "./addons/_background-utilities.less";
+@import "./addons/_display-utilities.less";
+@import "./addons/_spacing-utilities.less";
+@import "./addons/_border.less";
 
 // Components
 @import "./components/_component-animations.less";
@@ -54,3 +60,5 @@
 @import "./tick.less";
 @import "./utilities.less";
 @import "./wells.less";
+
+@import "./neptune-social-media.less";

package/src/less/table.less

@@ -216,7 +216,7 @@ table col[class*="col-"] {
 // 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
+// by enabling horizontal scrolling. Only applies <840px. Everything above that
 // will display normally.
 
 .table-responsive {

package/src/less/wells.less

@@ -29,7 +29,7 @@
 }
 
 .well-lg,
-/// deprecated
+/// @deprecated
 .well-xl {
   .sized-well(--screen-lg);
 }