@transferwise/neptune-css 14.8.2 → 14.9.0

package/dist/css/flex.css

@@ -1,30 +1,4 @@
-.d-flex {
-  display: flex;
-}
-.d-inline-flex {
-  display: inline-flex;
-}
-.flex-column {
-  flex-direction: column;
-}
-.flex-row {
-  flex-direction: row;
-}
-.justify-content-start {
-  justify-content: flex-start;
-}
-.justify-content-end {
-  justify-content: flex-end;
-}
-.justify-content-center {
-  justify-content: center;
-}
-.justify-content-between {
-  justify-content: space-between;
-}
-.justify-content-around {
-  justify-content: space-around;
-}
+/* TODO: Remove utility imports to prevent duplicates */
 .align-items-start {
   align-items: flex-start;
 }
@@ -40,6 +14,74 @@
 .align-items-stretch {
   align-items: stretch;
 }
+@media (min-width: 576px) {
+  .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 (min-width: 768px) {
+  .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 (min-width: 992px) {
+  .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 (min-width: 1200px) {
+  .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;
+  }
+}
 .align-self-start {
   align-self: flex-start;
 }
@@ -49,32 +91,134 @@
 .align-self-center {
   align-self: center;
 }
+.align-self-stretch {
+  align-self: stretch;
+}
 .align-self-baseline {
   align-self: baseline;
 }
-.align-self-stretch {
-  align-self: stretch;
+@media (min-width: 576px) {
+  .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;
+  }
 }
-.flex-nowrap {
-  flex-wrap: nowrap;
+@media (min-width: 768px) {
+  .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;
+  }
 }
-.flex-wrap {
-  flex-wrap: wrap;
+@media (min-width: 992px) {
+  .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;
+  }
 }
-.order-0 {
-  order: 0;
+@media (min-width: 1200px) {
+  .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;
+  }
 }
-.order-1 {
-  order: 1;
+.d-block,
+.show {
+  display: block !important;
 }
-.order-2 {
-  order: 2;
+.d-inline-block {
+  display: inline-block !important;
 }
-.order-3 {
-  order: 3;
+.d-inline {
+  display: inline;
 }
-.flex-grow-1 {
-  flex-grow: 1;
+.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 (min-width: 576px) {
+  .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 (min-width: 576px) {
   .d-flex--sm {
@@ -83,92 +227,221 @@
   .d-inline-flex--sm {
     display: inline-flex;
   }
-  .flex-column--sm {
-    flex-direction: column;
+}
+@media (min-width: 576px) and not all and (min-width: 768px) {
+  .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 (min-width: 768px) {
+  .d-flex--md {
+    display: flex;
+  }
+  .d-inline-flex--md {
+    display: inline-flex;
+  }
+}
+@media (min-width: 768px) and not all and (min-width: 992px) {
+  .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 (min-width: 992px) {
+  .d-flex--lg {
+    display: flex;
+  }
+  .d-inline-flex--lg {
+    display: inline-flex;
+  }
+}
+@media (min-width: 992px) and not all and (min-width: 1200px) {
+  .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 (min-width: 1200px) {
+  .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;
+  }
+}
+.flex-row {
+  flex-direction: row;
+}
+.flex-column {
+  flex-direction: column;
+}
+@media (min-width: 576px) {
   .flex-row--sm {
     flex-direction: row;
   }
-  .justify-content-start--sm {
-    justify-content: flex-start;
+  .flex-column--sm {
+    flex-direction: column;
   }
-  .justify-content-end--sm {
-    justify-content: flex-end;
+}
+@media (min-width: 768px) {
+  .flex-row--md {
+    flex-direction: row;
   }
-  .justify-content-center--sm {
-    justify-content: center;
+  .flex-column--md {
+    flex-direction: column;
   }
-  .justify-content-between--sm {
-    justify-content: space-between;
+}
+@media (min-width: 992px) {
+  .flex-row--lg {
+    flex-direction: row;
   }
-  .justify-content-around--sm {
-    justify-content: space-around;
+  .flex-column--lg {
+    flex-direction: column;
   }
-  .align-items-start--sm {
-    align-items: flex-start;
+}
+@media (min-width: 1200px) {
+  .flex-row--xl {
+    flex-direction: row;
   }
-  .align-items-end--sm {
-    align-items: flex-end;
+  .flex-column--xl {
+    flex-direction: column;
   }
-  .align-items-center--sm {
-    align-items: center;
+}
+.flex-grow-1 {
+  flex-grow: 1;
+}
+@media (min-width: 576px) {
+  .flex-grow-1--sm {
+    flex-grow: 1;
   }
-  .align-items-baseline--sm {
-    align-items: baseline;
+}
+@media (min-width: 768px) {
+  .flex-grow-1--md {
+    flex-grow: 1;
   }
-  .align-items-stretch--sm {
-    align-items: stretch;
+}
+@media (min-width: 992px) {
+  .flex-grow-1--lg {
+    flex-grow: 1;
   }
-  .align-self-start--sm {
-    align-self: flex-start;
+}
+@media (min-width: 1200px) {
+  .flex-grow-1--xl {
+    flex-grow: 1;
   }
-  .align-self-end--sm {
-    align-self: flex-end;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+@media (min-width: 576px) {
+  .flex-wrap--sm {
+    flex-wrap: wrap;
   }
-  .align-self-center--sm {
-    align-self: center;
+  .flex-nowrap--sm {
+    flex-wrap: nowrap;
   }
-  .align-self-baseline--sm {
-    align-self: baseline;
+}
+@media (min-width: 768px) {
+  .flex-wrap--md {
+    flex-wrap: wrap;
   }
-  .align-self-stretch--sm {
-    align-self: stretch;
+  .flex-nowrap--md {
+    flex-wrap: nowrap;
   }
-  .flex-nowrap--sm {
+}
+@media (min-width: 992px) {
+  .flex-wrap--lg {
+    flex-wrap: wrap;
+  }
+  .flex-nowrap--lg {
     flex-wrap: nowrap;
   }
-  .flex-wrap--sm {
+}
+@media (min-width: 1200px) {
+  .flex-wrap--xl {
     flex-wrap: wrap;
   }
-  .order-0--sm {
-    order: 0;
+  .flex-nowrap--xl {
+    flex-wrap: nowrap;
   }
-  .order-1--sm {
-    order: 1;
+}
+.justify-content-start {
+  justify-content: flex-start;
+}
+.justify-content-end {
+  justify-content: flex-end;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-between {
+  justify-content: space-between;
+}
+.justify-content-around {
+  justify-content: space-around;
+}
+@media (min-width: 576px) {
+  .justify-content-start--sm {
+    justify-content: flex-start;
   }
-  .order-2--sm {
-    order: 2;
+  .justify-content-end--sm {
+    justify-content: flex-end;
   }
-  .order-3--sm {
-    order: 3;
+  .justify-content-center--sm {
+    justify-content: center;
   }
-  .flex-grow-1--sm {
-    flex-grow: 1;
+  .justify-content-between--sm {
+    justify-content: space-between;
+  }
+  .justify-content-around--sm {
+    justify-content: space-around;
   }
 }
 @media (min-width: 768px) {
-  .d-flex--md {
-    display: flex;
-  }
-  .d-inline-flex--md {
-    display: inline-flex;
-  }
-  .flex-column--md {
-    flex-direction: column;
-  }
-  .flex-row--md {
-    flex-direction: row;
-  }
   .justify-content-start--md {
     justify-content: flex-start;
   }
@@ -184,71 +457,8 @@
   .justify-content-around--md {
     justify-content: space-around;
   }
-  .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;
-  }
-  .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-baseline--md {
-    align-self: baseline;
-  }
-  .align-self-stretch--md {
-    align-self: stretch;
-  }
-  .flex-nowrap--md {
-    flex-wrap: nowrap;
-  }
-  .flex-wrap--md {
-    flex-wrap: wrap;
-  }
-  .order-0--md {
-    order: 0;
-  }
-  .order-1--md {
-    order: 1;
-  }
-  .order-2--md {
-    order: 2;
-  }
-  .order-3--md {
-    order: 3;
-  }
-  .flex-grow-1--md {
-    flex-grow: 1;
-  }
 }
 @media (min-width: 992px) {
-  .d-flex--lg {
-    display: flex;
-  }
-  .d-inline-flex--lg {
-    display: inline-flex;
-  }
-  .flex-column--lg {
-    flex-direction: column;
-  }
-  .flex-row--lg {
-    flex-direction: row;
-  }
   .justify-content-start--lg {
     justify-content: flex-start;
   }
@@ -264,71 +474,8 @@
   .justify-content-around--lg {
     justify-content: space-around;
   }
-  .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;
-  }
-  .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-baseline--lg {
-    align-self: baseline;
-  }
-  .align-self-stretch--lg {
-    align-self: stretch;
-  }
-  .flex-nowrap--lg {
-    flex-wrap: nowrap;
-  }
-  .flex-wrap--lg {
-    flex-wrap: wrap;
-  }
-  .order-0--lg {
-    order: 0;
-  }
-  .order-1--lg {
-    order: 1;
-  }
-  .order-2--lg {
-    order: 2;
-  }
-  .order-3--lg {
-    order: 3;
-  }
-  .flex-grow-1--lg {
-    flex-grow: 1;
-  }
 }
 @media (min-width: 1200px) {
-  .d-flex--xl {
-    display: flex;
-  }
-  .d-inline-flex--xl {
-    display: inline-flex;
-  }
-  .flex-column--xl {
-    flex-direction: column;
-  }
-  .flex-row--xl {
-    flex-direction: row;
-  }
   .justify-content-start--xl {
     justify-content: flex-start;
   }
@@ -344,45 +491,62 @@
   .justify-content-around--xl {
     justify-content: space-around;
   }
-  .align-items-start--xl {
-    align-items: flex-start;
-  }
-  .align-items-end--xl {
-    align-items: flex-end;
+}
+.order-1 {
+  order: 1;
+}
+.order-2 {
+  order: 2;
+}
+.order-3 {
+  order: 3;
+}
+.order-0 {
+  order: 0;
+}
+@media (min-width: 576px) {
+  .order-1--sm {
+    order: 1;
   }
-  .align-items-center--xl {
-    align-items: center;
+  .order-2--sm {
+    order: 2;
   }
-  .align-items-baseline--xl {
-    align-items: baseline;
+  .order-3--sm {
+    order: 3;
   }
-  .align-items-stretch--xl {
-    align-items: stretch;
+  .order-0--sm {
+    order: 0;
   }
-  .align-self-start--xl {
-    align-self: flex-start;
+}
+@media (min-width: 768px) {
+  .order-1--md {
+    order: 1;
   }
-  .align-self-end--xl {
-    align-self: flex-end;
+  .order-2--md {
+    order: 2;
   }
-  .align-self-center--xl {
-    align-self: center;
+  .order-3--md {
+    order: 3;
   }
-  .align-self-baseline--xl {
-    align-self: baseline;
+  .order-0--md {
+    order: 0;
   }
-  .align-self-stretch--xl {
-    align-self: stretch;
+}
+@media (min-width: 992px) {
+  .order-1--lg {
+    order: 1;
   }
-  .flex-nowrap--xl {
-    flex-wrap: nowrap;
+  .order-2--lg {
+    order: 2;
   }
-  .flex-wrap--xl {
-    flex-wrap: wrap;
+  .order-3--lg {
+    order: 3;
   }
-  .order-0--xl {
+  .order-0--lg {
     order: 0;
   }
+}
+@media (min-width: 1200px) {
   .order-1--xl {
     order: 1;
   }
@@ -392,8 +556,8 @@
   .order-3--xl {
     order: 3;
   }
-  .flex-grow-1--xl {
-    flex-grow: 1;
+  .order-0--xl {
+    order: 0;
   }
 }
 /* Items */