@transferwise/neptune-css 0.0.0-experimental-2c0913f → 0.0.0-experimental-97410ac

package/src/less/utilities/margin.less

@@ -0,0 +1,192 @@
+.m-a-0 {
+  margin: 0px !important;
+}
+
+.m-a-1 {
+  margin: var(--size-8) !important;
+}
+
+.m-a-2 {
+  margin: var(--size-16) !important;
+}
+
+.m-a-3 {
+  margin: var(--size-24) !important;
+}
+
+.m-a-4 {
+  margin: var(--size-32) !important;
+}
+
+.m-a-5 {
+  margin: var(--size-40) !important;
+}
+
+.m-x-0 {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+}
+
+.m-x-1 {
+  margin-left: var(--size-8) !important;
+  margin-right: var(--size-8) !important;
+}
+
+.m-x-2 {
+  margin-left: var(--size-16) !important;
+  margin-right: var(--size-16) !important;
+}
+
+.m-x-3 {
+  margin-left: var(--size-24) !important;
+  margin-right: var(--size-24) !important;
+}
+
+.m-x-4 {
+  margin-left: var(--size-32) !important;
+  margin-right: var(--size-32) !important;
+}
+
+.m-x-5 {
+  margin-left: var(--size-40) !important;
+  margin-right: var(--size-40) !important;
+}
+
+.m-x-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.m-y-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+
+.m-y-1 {
+  margin-top: var(--size-8) !important;
+  margin-bottom: var(--size-8) !important;
+}
+
+.m-y-2 {
+  margin-top: var(--size-16) !important;
+  margin-bottom: var(--size-16) !important;
+}
+
+.m-y-3 {
+  margin-top: var(--size-24) !important;
+  margin-bottom: var(--size-24) !important;
+}
+
+.m-y-4 {
+  margin-top: var(--size-32) !important;
+  margin-bottom: var(--size-32) !important;
+}
+
+.m-y-5 {
+  margin-top: var(--size-40) !important;
+  margin-bottom: var(--size-40) !important;
+}
+
+.m-l-0 {
+  margin-inline-start: 0px !important;
+}
+
+.m-l-1 {
+  margin-inline-start: var(--size-8) !important;
+}
+
+.m-l-2 {
+  margin-inline-start: var(--size-16) !important;
+}
+
+.m-l-3 {
+  margin-inline-start: var(--size-24) !important;
+}
+
+.m-l-4 {
+  margin-inline-start: var(--size-32) !important;
+}
+
+.m-l-5 {
+  margin-inline-start: var(--size-40) !important;
+}
+
+.m-l-auto {
+  margin-inline-start: auto !important;
+}
+
+.m-r-0 {
+  margin-inline-end: 0px !important;
+}
+
+.m-r-1 {
+  margin-inline-end: var(--size-8) !important;
+}
+
+.m-r-2 {
+  margin-inline-end: var(--size-16) !important;
+}
+
+.m-r-3 {
+  margin-inline-end: var(--size-24) !important;
+}
+
+.m-r-4 {
+  margin-inline-end: var(--size-32) !important;
+}
+
+.m-r-5 {
+  margin-inline-end: var(--size-40) !important;
+}
+
+.m-r-auto {
+  margin-inline-end: auto !important;
+}
+
+.m-t-0 {
+  margin-top: 0px !important;
+}
+
+.m-t-1 {
+  margin-top: var(--size-8) !important;
+}
+
+.m-t-2 {
+  margin-top: var(--size-16) !important;
+}
+
+.m-t-3 {
+  margin-top: var(--size-24) !important;
+}
+
+.m-t-4 {
+  margin-top: var(--size-32) !important;
+}
+
+.m-t-5 {
+  margin-top: var(--size-40) !important;
+}
+
+.m-b-0 {
+  margin-bottom: 0px !important;
+}
+
+.m-b-1 {
+  margin-bottom: var(--size-8) !important;
+}
+
+.m-b-2 {
+  margin-bottom: var(--size-16) !important;
+}
+
+.m-b-3 {
+  margin-bottom: var(--size-24) !important;
+}
+
+.m-b-4 {
+  margin-bottom: var(--size-32) !important;
+}
+
+.m-b-5 {
+  margin-bottom: var(--size-40) !important;
+}

package/src/less/utilities/max-width.less

@@ -0,0 +1,3 @@
+.text-max-width {
+  max-width: 600px;
+}

package/src/less/utilities/order.less

@@ -0,0 +1,111 @@
+.order-1 {
+  order: 1;
+}
+
+@media (--screen-sm) {
+  .order-1--sm {
+    order: 1;
+  }
+}
+
+@media (--screen-md) {
+  .order-1--md {
+    order: 1;
+  }
+}
+
+@media (--screen-lg) {
+  .order-1--lg {
+    order: 1;
+  }
+}
+
+@media (--screen-xl) {
+  .order-1--xl {
+    order: 1;
+  }
+}
+
+.order-2 {
+  order: 2;
+}
+
+@media (--screen-sm) {
+  .order-2--sm {
+    order: 2;
+  }
+}
+
+@media (--screen-md) {
+  .order-2--md {
+    order: 2;
+  }
+}
+
+@media (--screen-lg) {
+  .order-2--lg {
+    order: 2;
+  }
+}
+
+@media (--screen-xl) {
+  .order-2--xl {
+    order: 2;
+  }
+}
+
+.order-3 {
+  order: 3;
+}
+
+@media (--screen-sm) {
+  .order-3--sm {
+    order: 3;
+  }
+}
+
+@media (--screen-md) {
+  .order-3--md {
+    order: 3;
+  }
+}
+
+@media (--screen-lg) {
+  .order-3--lg {
+    order: 3;
+  }
+}
+
+@media (--screen-xl) {
+  .order-3--xl {
+    order: 3;
+  }
+}
+
+.order-0 {
+  order: 0;
+}
+
+@media (--screen-sm) {
+  .order-0--sm {
+    order: 0;
+  }
+}
+
+@media (--screen-md) {
+  .order-0--md {
+    order: 0;
+  }
+}
+
+@media (--screen-lg) {
+  .order-0--lg {
+    order: 0;
+  }
+}
+
+@media (--screen-xl) {
+  .order-0--xl {
+    order: 0;
+  }
+}

package/src/less/utilities/outline-style.less

@@ -0,0 +1,8 @@
+.outline-none {
+  outline: none;
+  /*
+  TODO: Support Windows High Contrast mode
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  */
+}

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

@@ -0,0 +1,3 @@
+.text-word-break {
+  overflow-wrap: break-word;
+}

package/src/less/utilities/padding.less

@@ -0,0 +1,179 @@
+.p-a-0 {
+  padding: 0px !important;
+}
+
+.p-a-1 {
+  padding: var(--size-8) !important;
+}
+
+.p-a-2 {
+  padding: var(--size-16) !important;
+}
+
+.p-a-3 {
+  padding: var(--size-24) !important;
+}
+
+.p-a-4 {
+  padding: var(--size-32) !important;
+}
+
+.p-a-5 {
+  padding: var(--size-40) !important;
+}
+
+.p-x-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+
+.p-x-1 {
+  padding-left: var(--size-8) !important;
+  padding-right: var(--size-8) !important;
+}
+
+.p-x-2 {
+  padding-left: var(--size-16) !important;
+  padding-right: var(--size-16) !important;
+}
+
+.p-x-3 {
+  padding-left: var(--size-24) !important;
+  padding-right: var(--size-24) !important;
+}
+
+.p-x-4 {
+  padding-left: var(--size-32) !important;
+  padding-right: var(--size-32) !important;
+}
+
+.p-x-5 {
+  padding-left: var(--size-40) !important;
+  padding-right: var(--size-40) !important;
+}
+
+.p-y-0 {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+.p-y-1 {
+  padding-top: var(--size-8) !important;
+  padding-bottom: var(--size-8) !important;
+}
+
+.p-y-2 {
+  padding-top: var(--size-16) !important;
+  padding-bottom: var(--size-16) !important;
+}
+
+.p-y-3 {
+  padding-top: var(--size-24) !important;
+  padding-bottom: var(--size-24) !important;
+}
+
+.p-y-4 {
+  padding-top: var(--size-32) !important;
+  padding-bottom: var(--size-32) !important;
+}
+
+.p-y-5 {
+  padding-top: var(--size-40) !important;
+  padding-bottom: var(--size-40) !important;
+}
+
+.p-l-0 {
+  padding-inline-start: 0px !important;
+}
+
+.p-l-1 {
+  padding-inline-start: var(--size-8) !important;
+}
+
+.p-l-2 {
+  padding-inline-start: var(--size-16) !important;
+}
+
+.p-l-3 {
+  padding-inline-start: var(--size-24) !important;
+}
+
+.p-l-4 {
+  padding-inline-start: var(--size-32) !important;
+}
+
+.p-l-5 {
+  padding-inline-start: var(--size-40) !important;
+}
+
+.p-r-0 {
+  padding-inline-end: 0px !important;
+}
+
+.p-r-1 {
+  padding-inline-end: var(--size-8) !important;
+}
+
+.p-r-2 {
+  padding-inline-end: var(--size-16) !important;
+}
+
+.p-r-3 {
+  padding-inline-end: var(--size-24) !important;
+}
+
+.p-r-4 {
+  padding-inline-end: var(--size-32) !important;
+}
+
+.p-r-5 {
+  padding-inline-end: var(--size-40) !important;
+}
+
+.p-t-0 {
+  padding-top: 0px !important;
+}
+
+.p-t-1 {
+  padding-top: var(--size-8) !important;
+}
+
+.p-t-2 {
+  padding-top: var(--size-16) !important;
+}
+
+.p-t-3 {
+  padding-top: var(--size-24) !important;
+}
+
+.p-t-4 {
+  padding-top: var(--size-32) !important;
+}
+
+.p-t-5 {
+  padding-top: var(--size-40) !important;
+}
+
+.p-b-0 {
+  padding-bottom: 0px !important;
+}
+
+.p-b-1 {
+  padding-bottom: var(--size-8) !important;
+}
+
+.p-b-2 {
+  padding-bottom: var(--size-16) !important;
+}
+
+.p-b-3 {
+  padding-bottom: var(--size-24) !important;
+}
+
+.p-b-4 {
+  padding-bottom: var(--size-32) !important;
+}
+
+.p-b-5 {
+  padding-bottom: var(--size-40) !important;
+}

package/src/less/utilities/position.less

@@ -0,0 +1,3 @@
+.affix {
+  position: fixed;
+}

package/src/less/utilities/rotate.less

@@ -0,0 +1,12 @@
+.rotate90 {
+  transform: rotate(90deg);
+}
+
+.rotate180 {
+  transform: rotate(180deg);
+}
+
+.rotate270,
+.rotate-90 {
+  transform: rotate(-90deg);
+}

package/src/less/utilities/screen-reader.less

@@ -0,0 +1,24 @@
+// Only display content to screen readers
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+// Use in conjunction with `.sr-only` to only display content when it's focused.
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}

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

@@ -0,0 +1,111 @@
+.text-xs-center {
+  text-align: center;
+}
+
+@media (--screen-sm) {
+  .text-sm-center {
+    text-align: center;
+  }
+}
+
+@media (--screen-md) {
+  .text-md-center {
+    text-align: center;
+  }
+}
+
+@media (--screen-lg) {
+  .text-lg-center {
+    text-align: center;
+  }
+}
+
+@media (--screen-xl) {
+  .text-xl-center {
+    text-align: center;
+  }
+}
+
+.text-xs-justify {
+  text-align: justify;
+}
+
+@media (--screen-sm) {
+  .text-sm-justify {
+    text-align: justify;
+  }
+}
+
+@media (--screen-md) {
+  .text-md-justify {
+    text-align: justify;
+  }
+}
+
+@media (--screen-lg) {
+  .text-lg-justify {
+    text-align: justify;
+  }
+}
+
+@media (--screen-xl) {
+  .text-xl-justify {
+    text-align: justify;
+  }
+}
+
+.text-xs-left {
+  text-align: start;
+}
+
+@media (--screen-sm) {
+  .text-sm-left {
+    text-align: start;
+  }
+}
+
+@media (--screen-md) {
+  .text-md-left {
+    text-align: start;
+  }
+}
+
+@media (--screen-lg) {
+  .text-lg-left {
+    text-align: start;
+  }
+}
+
+@media (--screen-xl) {
+  .text-xl-left {
+    text-align: start;
+  }
+}
+
+.text-xs-right {
+  text-align: end;
+}
+
+@media (--screen-sm) {
+  .text-sm-right {
+    text-align: end;
+  }
+}
+
+@media (--screen-md) {
+  .text-md-right {
+    text-align: end;
+  }
+}
+
+@media (--screen-lg) {
+  .text-lg-right {
+    text-align: end;
+  }
+}
+
+@media (--screen-xl) {
+  .text-xl-right {
+    text-align: end;
+  }
+}

package/src/less/utilities/text-decoration-line.less

@@ -0,0 +1,8 @@
+.text-underline {
+  text-decoration-line: underline !important;
+  text-underline-offset: 2px;
+}
+
+.text-no-decoration {
+  text-decoration-line: none !important;
+}

package/src/less/utilities/text-overflow.less

@@ -0,0 +1,6 @@
+.text-ellipsis,
+.text-ellipses {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/less/utilities/text-transform.less

@@ -0,0 +1,11 @@
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}

package/src/less/utilities/visibility.less

@@ -0,0 +1,3 @@
+.invisible {
+  visibility: hidden;
+}

package/src/less/utilities/white-space.less

@@ -0,0 +1,27 @@
+.text-xs-nowrap {
+  white-space: nowrap;
+}
+
+@media (--screen-sm) {
+  .text-sm-nowrap {
+    white-space: nowrap;
+  }
+}
+
+@media (--screen-md) {
+  .text-md-nowrap {
+    white-space: nowrap;
+  }
+}
+
+@media (--screen-lg) {
+  .text-lg-nowrap {
+    white-space: nowrap;
+  }
+}
+
+@media (--screen-xl) {
+  .text-xl-nowrap {
+    white-space: nowrap;
+  }
+}