@transferwise/neptune-css 14.9.2 → 14.9.4

package/src/less/core/_typography.less

@@ -97,74 +97,16 @@ h6,
   line-height: 140%;
 }
 
-.body-1,
-.body-2,
-.body-3,
-.label,
-.value,
-.np-text-body-default {
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-body);
-}
-
-.body-1,
-.np-text-body-default,
-.np-text-body-default-bold {
-  font-size: var(--font-size-16);
-}
-
-.np-text-body-default-bold {
-  font-weight: var(--font-weight-bold);
-}
-
-.body-2 {
-  font-size: var(--font-size-14);
-}
-
-.body-3 {
-  font-size: var(--font-size-12);
-}
-
-.control-1,
-.control-2 {
-  color: var(--color-content-accent);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--line-height-title);
-}
-
-.control-1 {
-  font-size: var(--font-size-16);
-}
-
-.control-2 {
-  font-size: var(--font-size-14);
-}
-
-.label {
-  font-size: var(--font-size-14);
-}
-
-.value {
-  font-size: var(--font-size-16);
-}
-
+/* DEPRECATED: use .np-text-title-body instead */
 .lead {
   margin-bottom: var(--size-24);
   font-size: var(--font-size-20);
   line-height: var(--line-height-title);
 }
 
-small,
-.small,
-.body-2 {
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
-}
-
+// DEPRECATED: use .np-text-body-default instead
 .tiny {
   color: var(--color-content-secondary);
-  font-size: var(--font-size-12);
-  line-height: var(--line-height-body);
 }
 
 // BODY
@@ -172,7 +114,7 @@ small,
 /* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-2, .body-3, .label, .control-label, .small, .tiny,
-body,
+body, small,
 .np-text-body-default {
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -184,15 +126,12 @@ body,
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-2,
 .np-text-body-default-bold {
+  font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
   font-weight: var(--font-weight-semi-bold);
 }
 
-.np-text-body-default-bold {
-  font-size: var(--font-size-14);
-}
-
 /* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-1, .value,
@@ -435,6 +374,7 @@ a,
   }
 }
 
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-1 {
   margin-bottom: var(--size-24);
   /* stylelint-disable-next-line number-max-precision */
@@ -446,6 +386,7 @@ a,
   }
 }
 
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-2 {
   margin-bottom: var(--size-24);
   /* stylelint-disable-next-line number-max-precision */
@@ -457,6 +398,7 @@ a,
   }
 }
 
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-3 {
   margin-bottom: var(--size-8);
   font-size: 2.8rem;
@@ -467,6 +409,7 @@ a,
   }
 }
 
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-4 {
   margin-bottom: var(--size-4);
   /* stylelint-disable-next-line number-max-precision */
@@ -478,6 +421,7 @@ a,
   }
 }
 
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-5 {
   margin-bottom: var(--size-4);
   /* stylelint-disable-next-line number-max-precision */

package/src/less/flex.less

@@ -1,15 +1,24 @@
 // mixins
+@import (reference) "./mixins/_flex.less";
 @import (reference) "./mixins/_logical-properties.less";
 
-/* TODO: Remove utility imports to prevent duplicates */
-@import "./utilities/align-items.less";
-@import "./utilities/align-self.less";
-@import "./utilities/display.less";
-@import "./utilities/flex-direction.less";
-@import "./utilities/flex-grow.less";
-@import "./utilities/flex-wrap.less";
-@import "./utilities/justify-content.less";
-@import "./utilities/order.less";
+.flex-properties(~"");
+
+@media (--screen-sm) {
+  .flex-properties(--sm);
+}
+
+@media (--screen-md) {
+  .flex-properties(--md);
+}
+
+@media (--screen-lg) {
+  .flex-properties(--lg);
+}
+
+@media (--screen-xl) {
+  .flex-properties(--xl);
+}
 
 /* Items */
 .flex__inner {

package/src/less/{addons → mixins}/_center-block.less

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

package/src/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/less/navbar.less

@@ -4,15 +4,12 @@
 @import (reference) "./mixins/_arrows.less";
 @import (reference) "./mixins/_border-radius.less";
 @import (reference) "./mixins/_clearfix.less";
+@import (reference) "./mixins/_center-block.less";
 @import (reference) "./mixins/_hide-text.less";
 @import (reference) "./mixins/_grid.less";
 @import (reference) "./mixins/_tab-focus.less";
 @import (reference) "./mixins/_logical-properties.less";
-
-/* TODO: Remove utility imports to prevent duplicates */
-@import "./addons/_center-block.less";
-@import "./utilities/float.less";
-
+@import "./addons/_utilities.less";
 @import "dropdowns.less";
 @import "navs.less";
 @import "navbar-base.less";
@@ -107,8 +104,3 @@
 .navbar-background--inverse {
   background-color: @color-navy-background-elevated;
 }
-
-/* TODO: Remove to prefer direct utility imports */
-.clearfix {
-  .clearfix();
-}

package/src/less/neptune-addons.less

@@ -1,7 +1,4 @@
 @import "./addons/_background-utilities.less";
+@import "./addons/_display-utilities.less";
 @import "./addons/_spacing-utilities.less";
 @import "./addons/_border.less";
-
-/* TODO: Remove utility imports to prevent duplicates */
-@import "./utilities/display.less";
-@import "./utilities/outline-style.less";

package/src/less/utilities.less

@@ -1,41 +1,153 @@
 @import (reference) "../variables/legacy-variables.less";
 @import (reference) "./mixins/_clearfix.less";
+@import (reference) "./mixins/_center-block.less";
 @import (reference) "./mixins/_hide-text.less";
+@import (reference) "./mixins/_logical-properties.less";
 
-@import "./addons/_center-block.less";
-@import "./utilities/align-items.less";
-@import "./utilities/align-self.less";
-@import "./utilities/border-radius.less";
-@import "./utilities/color.less";
-@import "./utilities/cursor.less";
-@import "./utilities/display.less";
-@import "./utilities/flex-direction.less";
-@import "./utilities/flex-grow.less";
-@import "./utilities/flex-wrap.less";
-@import "./utilities/float.less";
-@import "./utilities/font-weight.less";
-@import "./utilities/gap.less";
-@import "./utilities/justify-content.less";
-@import "./utilities/margin.less";
-@import "./utilities/max-width.less";
-@import "./utilities/order.less";
-@import "./utilities/outline-style.less";
-@import "./utilities/overflow-wrap.less";
-@import "./utilities/padding.less";
-@import "./utilities/position.less";
-@import "./utilities/rotate.less";
-@import "./utilities/screen-reader.less";
-@import "./utilities/text-align.less";
-@import "./utilities/text-decoration-line.less";
-@import "./utilities/text-overflow.less";
-@import "./utilities/text-transform.less";
-@import "./utilities/visibility.less";
-@import "./utilities/white-space.less";
+.d-inline-block {
+  display: inline-block;
+}
+
+.d-inline {
+  display: inline;
+}
 
 .clearfix {
   .clearfix();
 }
 
+.center-block {
+  .center-block();
+}
+
+.pull-right,
+.pull-xs-right {
+  .float(right) !important;
+}
+
+.pull-left,
+.pull-xs-left {
+  .float(left) !important;
+}
+
+.pull-xs-none {
+  float: none !important;
+}
+
+@media (--screen-sm) {
+  .pull-sm-left {
+    .float(left) !important;
+  }
+
+  .pull-sm-right {
+    .float(right) !important;
+  }
+
+  .pull-sm-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-md) {
+  .pull-md-left {
+    .float(left) !important;
+  }
+
+  .pull-md-right {
+    .float(right) !important;
+  }
+
+  .pull-md-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-lg) {
+  .pull-lg-left {
+    .float(left) !important;
+  }
+
+  .pull-lg-right {
+    .float(right) !important;
+  }
+
+  .pull-lg-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-xl) {
+  .pull-xl-left {
+    .float(left) !important;
+  }
+
+  .pull-xl-right {
+    .float(right) !important;
+  }
+
+  .pull-xl-none {
+    float: none !important;
+  }
+}
+
+// Floats not changing direction on RTL.
+
+.pull-left-single-direction {
+  float: left !important;
+}
+
+.pull-right-single-direction {
+  float: right !important;
+}
+
+// Toggling content
+// -------------------------
+
+// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
+
+.hide {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
 .text-hide {
   .text-hide();
 }
+
+// Hide from screenreaders and browsers
+//
+// Credit: HTML5 Boilerplate
+
+.hidden {
+  display: none !important;
+}
+
+// For Affix plugin
+// -------------------------
+
+.affix {
+  position: fixed;
+}
+
+.rotate90 {
+  transform: rotate(90deg);
+}
+
+.rotate180 {
+  transform: rotate(180deg);
+}
+
+.rotate270 {
+  transform: rotate(270deg);
+}
+
+.rotate-90 {
+  transform: rotate(-90deg);
+}

package/src/less/utilities/align-items.less

@@ -1,107 +0,0 @@
-.align-items-start {
-  align-items: flex-start;
-}
-
-.align-items-end {
-  align-items: flex-end;
-}
-
-.align-items-center {
-  align-items: center;
-}
-
-.align-items-baseline {
-  align-items: baseline;
-}
-
-.align-items-stretch {
-  align-items: stretch;
-}
-
-@media (--screen-sm) {
-  .align-items-start--sm {
-    align-items: flex-start;
-  }
-
-  .align-items-end--sm {
-    align-items: flex-end;
-  }
-
-  .align-items-center--sm {
-    align-items: center;
-  }
-
-  .align-items-baseline--sm {
-    align-items: baseline;
-  }
-
-  .align-items-stretch--sm {
-    align-items: stretch;
-  }
-}
-
-@media (--screen-md) {
-  .align-items-start--md {
-    align-items: flex-start;
-  }
-
-  .align-items-end--md {
-    align-items: flex-end;
-  }
-
-  .align-items-center--md {
-    align-items: center;
-  }
-
-  .align-items-baseline--md {
-    align-items: baseline;
-  }
-
-  .align-items-stretch--md {
-    align-items: stretch;
-  }
-}
-
-@media (--screen-lg) {
-  .align-items-start--lg {
-    align-items: flex-start;
-  }
-
-  .align-items-end--lg {
-    align-items: flex-end;
-  }
-
-  .align-items-center--lg {
-    align-items: center;
-  }
-
-  .align-items-baseline--lg {
-    align-items: baseline;
-  }
-
-  .align-items-stretch--lg {
-    align-items: stretch;
-  }
-}
-
-@media (--screen-xl) {
-  .align-items-start--xl {
-    align-items: flex-start;
-  }
-
-  .align-items-end--xl {
-    align-items: flex-end;
-  }
-
-  .align-items-center--xl {
-    align-items: center;
-  }
-
-  .align-items-baseline--xl {
-    align-items: baseline;
-  }
-
-  .align-items-stretch--xl {
-    align-items: stretch;
-  }
-}

package/src/less/utilities/align-self.less

@@ -1,107 +0,0 @@
-.align-self-start {
-  align-self: flex-start;
-}
-
-.align-self-end {
-  align-self: flex-end;
-}
-
-.align-self-center {
-  align-self: center;
-}
-
-.align-self-stretch {
-  align-self: stretch;
-}
-
-.align-self-baseline {
-  align-self: baseline;
-}
-
-@media (--screen-sm) {
-  .align-self-start--sm {
-    align-self: flex-start;
-  }
-
-  .align-self-end--sm {
-    align-self: flex-end;
-  }
-
-  .align-self-center--sm {
-    align-self: center;
-  }
-
-  .align-self-stretch--sm {
-    align-self: stretch;
-  }
-
-  .align-self-baseline--sm {
-    align-self: baseline;
-  }
-}
-
-@media (--screen-md) {
-  .align-self-start--md {
-    align-self: flex-start;
-  }
-
-  .align-self-end--md {
-    align-self: flex-end;
-  }
-
-  .align-self-center--md {
-    align-self: center;
-  }
-
-  .align-self-stretch--md {
-    align-self: stretch;
-  }
-
-  .align-self-baseline--md {
-    align-self: baseline;
-  }
-}
-
-@media (--screen-lg) {
-  .align-self-start--lg {
-    align-self: flex-start;
-  }
-
-  .align-self-end--lg {
-    align-self: flex-end;
-  }
-
-  .align-self-center--lg {
-    align-self: center;
-  }
-
-  .align-self-stretch--lg {
-    align-self: stretch;
-  }
-
-  .align-self-baseline--lg {
-    align-self: baseline;
-  }
-}
-
-@media (--screen-xl) {
-  .align-self-start--xl {
-    align-self: flex-start;
-  }
-
-  .align-self-end--xl {
-    align-self: flex-end;
-  }
-
-  .align-self-center--xl {
-    align-self: center;
-  }
-
-  .align-self-stretch--xl {
-    align-self: stretch;
-  }
-
-  .align-self-baseline--xl {
-    align-self: baseline;
-  }
-}