@transferwise/neptune-css 14.8.1 → 14.9.0

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

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

@@ -0,0 +1,107 @@
+.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;
+  }
+}

package/src/less/utilities/border-radius.less

@@ -0,0 +1,11 @@
+.rounded-sm {
+  border-radius: 2px;
+}
+
+.rounded {
+  border-radius: var(--radius-small);
+}
+
+.rounded-full {
+  border-radius: var(--radius-full);
+}

package/src/less/utilities/color.less

@@ -0,0 +1,70 @@
+@import (reference) "../../variables/neptune-tokens.less";
+@import (reference) "../mixins/_text-emphasis.less";
+
+.text-primary {
+  color: var(--color-content-primary) !important;
+
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+  .bg-primary & {
+    color: @color-navy-content-primary !important;
+  }
+}
+
+.text-secondary {
+  color: var(--color-content-secondary) !important;
+}
+
+.text-muted {
+  color: var(--color-content-tertiary) !important;
+}
+
+.text-accent,
+.text-info {
+  color: var(--color-interactive-primary) !important;
+
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+  .bg-primary & {
+    color: @color-navy-content-accent !important;
+  }
+}
+
+.text-negative,
+/* TODO: Deprecate in favor of `.text-negative` */
+.text-danger {
+  color: var(--color-sentiment-negative) !important;
+
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+  .bg-primary & {
+    color: @color-navy-content-negative !important;
+  }
+}
+
+.text-positive,
+/* TODO: Deprecate in favor of `.text-positive` */
+.text-success {
+  color: var(--color-sentiment-positive) !important;
+
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+  .bg-primary & {
+    color: @color-navy-content-positive !important;
+  }
+}
+
+/**
+ * @deprecated This makes text inaccessible. Use background color in combination with `.text-primary` instead.
+ */
+.text-warning {
+  color: var(--color-sentiment-warning) !important;
+
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+  .bg-primary & {
+    color: @color-navy-content-warning !important;
+  }
+}
+
+/**
+ * @deprecated Navy colors are obsolete.
+ */
+.text-inverse {
+  .text-emphasis-variant(@color-navy-content-primary, @color-navy-content-primary, @color-navy-content-secondary);
+}

package/src/less/utilities/cursor.less

@@ -0,0 +1,3 @@
+.clickable {
+  cursor: pointer;
+}

package/src/less/utilities/display.less

@@ -0,0 +1,178 @@
+.d-block,
+.show {
+  display: block !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-inline {
+  display: inline;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.hidden,
+.hide,
+.visible-xs,
+.visible-xs-block,
+.visible-xs-inline-block,
+.visible-xs-inline,
+.visible-sm,
+.visible-sm-block,
+.visible-sm-inline-block,
+.visible-sm-inline,
+.visible-md,
+.visible-md-block,
+.visible-md-inline-block,
+.visible-md-inline,
+.visible-lg,
+.visible-lg-block,
+.visible-lg-inline-block,
+.visible-lg-inline,
+.visible-xl,
+.visible-xl-block,
+.visible-xl-inline-block,
+.visible-xl-inline {
+  display: none !important;
+}
+
+@media not all and (--screen-sm) {
+  .hidden-xs {
+    display: none !important;
+  }
+
+  .visible-xs,
+  .visible-xs-block {
+    display: block !important;
+  }
+
+  .visible-xs-inline-block {
+    display: inline-block !important;
+  }
+
+  .visible-xs-inline {
+    display: inline !important;
+  }
+}
+
+@media (--screen-sm) {
+  .d-flex--sm {
+    display: flex;
+  }
+
+  .d-inline-flex--sm {
+    display: inline-flex;
+  }
+
+  @media not all and (--screen-md) {
+    .hidden-sm {
+      display: none !important;
+    }
+
+    .visible-sm,
+    .visible-sm-block {
+      display: block !important;
+    }
+
+    .visible-sm-inline-block {
+      display: inline-block !important;
+    }
+
+    .visible-sm-inline {
+      display: inline !important;
+    }
+  }
+}
+
+@media (--screen-md) {
+  .d-flex--md {
+    display: flex;
+  }
+
+  .d-inline-flex--md {
+    display: inline-flex;
+  }
+
+  @media not all and (--screen-lg) {
+    .hidden-md {
+      display: none !important;
+    }
+
+    .visible-md,
+    .visible-md-block {
+      display: block !important;
+    }
+
+    .visible-md-inline-block {
+      display: inline-block !important;
+    }
+
+    .visible-md-inline {
+      display: inline !important;
+    }
+  }
+}
+
+@media (--screen-lg) {
+  .d-flex--lg {
+    display: flex;
+  }
+
+  .d-inline-flex--lg {
+    display: inline-flex;
+  }
+
+  @media not all and (--screen-xl) {
+    .hidden-lg {
+      display: none !important;
+    }
+
+    .visible-lg,
+    .visible-lg-block {
+      display: block !important;
+    }
+
+    .visible-lg-inline-block {
+      display: inline-block !important;
+    }
+
+    .visible-lg-inline {
+      display: inline !important;
+    }
+  }
+}
+
+@media (--screen-xl) {
+  .d-flex--xl {
+    display: flex;
+  }
+
+  .d-inline-flex--xl {
+    display: inline-flex;
+  }
+
+  .hidden-xl {
+    display: none !important;
+  }
+
+  .visible-xl,
+  .visible-xl-block {
+    display: block !important;
+  }
+
+  .visible-xl-inline-block {
+    display: inline-block !important;
+  }
+
+  .visible-xl-inline {
+    display: inline !important;
+  }
+}

package/src/less/utilities/flex-direction.less

@@ -0,0 +1,47 @@
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+@media (--screen-sm) {
+  .flex-row--sm {
+    flex-direction: row;
+  }
+
+  .flex-column--sm {
+    flex-direction: column;
+  }
+}
+
+@media (--screen-md) {
+  .flex-row--md {
+    flex-direction: row;
+  }
+
+  .flex-column--md {
+    flex-direction: column;
+  }
+}
+
+@media (--screen-lg) {
+  .flex-row--lg {
+    flex-direction: row;
+  }
+
+  .flex-column--lg {
+    flex-direction: column;
+  }
+}
+
+@media (--screen-xl) {
+  .flex-row--xl {
+    flex-direction: row;
+  }
+
+  .flex-column--xl {
+    flex-direction: column;
+  }
+}

package/src/less/utilities/flex-grow.less

@@ -0,0 +1,27 @@
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+@media (--screen-sm) {
+  .flex-grow-1--sm {
+    flex-grow: 1;
+  }
+}
+
+@media (--screen-md) {
+  .flex-grow-1--md {
+    flex-grow: 1;
+  }
+}
+
+@media (--screen-lg) {
+  .flex-grow-1--lg {
+    flex-grow: 1;
+  }
+}
+
+@media (--screen-xl) {
+  .flex-grow-1--xl {
+    flex-grow: 1;
+  }
+}

package/src/less/utilities/flex-wrap.less

@@ -0,0 +1,47 @@
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+@media (--screen-sm) {
+  .flex-wrap--sm {
+    flex-wrap: wrap;
+  }
+
+  .flex-nowrap--sm {
+    flex-wrap: nowrap;
+  }
+}
+
+@media (--screen-md) {
+  .flex-wrap--md {
+    flex-wrap: wrap;
+  }
+
+  .flex-nowrap--md {
+    flex-wrap: nowrap;
+  }
+}
+
+@media (--screen-lg) {
+  .flex-wrap--lg {
+    flex-wrap: wrap;
+  }
+
+  .flex-nowrap--lg {
+    flex-wrap: nowrap;
+  }
+}
+
+@media (--screen-xl) {
+  .flex-wrap--xl {
+    flex-wrap: wrap;
+  }
+
+  .flex-nowrap--xl {
+    flex-wrap: nowrap;
+  }
+}

package/src/less/utilities/float.less

@@ -0,0 +1,77 @@
+.pull-left,
+.pull-xs-left {
+  float: inline-start !important;
+}
+
+.pull-right,
+.pull-xs-right {
+  float: inline-end !important;
+}
+
+.pull-right-single-direction {
+  float: right !important;
+}
+
+.pull-left-single-direction {
+  float: left !important;
+}
+
+.pull-xs-none {
+  float: none !important;
+}
+
+@media (--screen-sm) {
+  .pull-sm-left {
+    float: inline-start !important;
+  }
+
+  .pull-sm-right {
+    float: inline-end !important;
+  }
+
+  .pull-sm-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-md) {
+  .pull-md-left {
+    float: inline-start !important;
+  }
+
+  .pull-md-right {
+    float: inline-end !important;
+  }
+
+  .pull-md-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-lg) {
+  .pull-lg-left {
+    float: inline-start !important;
+  }
+
+  .pull-lg-right {
+    float: inline-end !important;
+  }
+
+  .pull-lg-none {
+    float: none !important;
+  }
+}
+
+@media (--screen-xl) {
+  .pull-xl-left {
+    float: inline-start !important;
+  }
+
+  .pull-xl-right {
+    float: inline-end !important;
+  }
+
+  .pull-xl-none {
+    float: none !important;
+  }
+}

package/src/less/utilities/font-weight.less

@@ -0,0 +1,11 @@
+.font-weight-normal {
+  font-weight: var(--font-weight-regular) !important;
+}
+
+.font-weight-semi-bold {
+  font-weight: var(--font-weight-semi-bold) !important;
+}
+
+.font-weight-bold {
+  font-weight: var(--font-weight-bold) !important;
+}

package/src/less/utilities/gap.less

@@ -0,0 +1,3 @@
+.gap-y-1 {
+  row-gap: var(--size-8);
+}