@transferwise/neptune-css 0.0.0-experimental-aabbb4a → 0.0.0-experimental-8b73066

package/dist/css/neptune-addons.css

@@ -139,91 +139,107 @@
 .visible-xl-inline-block {
   display: none !important;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .visible-xs,
   .visible-xs-block {
     display: block !important;
   }
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .visible-xs-inline {
     display: inline !important;
   }
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .visible-xs-inline-block {
     display: inline-block !important;
   }
 }
-@media (min-width: 600px) and (max-width: 839.98px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .visible-sm,
   .visible-sm-block {
     display: block !important;
   }
 }
-@media (min-width: 600px) and (max-width: 839.98px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .visible-sm-inline {
     display: inline !important;
   }
 }
-@media (min-width: 600px) and (max-width: 839.98px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .visible-sm-inline-block {
     display: inline-block !important;
   }
 }
-@media (min-width: 840px) and (max-width: 1159.98px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .visible-md,
   .visible-md-block {
     display: block !important;
   }
 }
-@media (min-width: 840px) and (max-width: 1159.98px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .visible-md-inline {
     display: inline !important;
   }
 }
-@media (min-width: 840px) and (max-width: 1159.98px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .visible-md-inline-block {
     display: inline-block !important;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) and (max-width: 1199px) {
   .visible-lg,
-  .visible-lg-block,
+  .visible-lg-block {
+    display: block !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-lg-inline {
+    display: inline !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-lg-inline-block {
+    display: inline-block !important;
+  }
+}
+@media (min-width: 1200px) {
   .visible-xl,
   .visible-xl-block {
     display: block !important;
   }
 }
-@media (min-width: 1160px) {
-  .visible-lg-inline,
+@media (min-width: 1200px) {
   .visible-xl-inline {
     display: inline !important;
   }
 }
-@media (min-width: 1160px) {
-  .visible-lg-inline-block,
+@media (min-width: 1200px) {
   .visible-xl-inline-block {
     display: inline-block !important;
   }
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .hidden-xs {
     display: none !important;
   }
 }
-@media (min-width: 600px) and (max-width: 839.98px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .hidden-sm {
     display: none !important;
   }
 }
-@media (min-width: 840px) and (max-width: 1159.98px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .hidden-md {
     display: none !important;
   }
 }
-@media (min-width: 1160px) {
-  .hidden-lg,
+@media (min-width: 992px) and (max-width: 1199px) {
+  .hidden-lg {
+    display: none !important;
+  }
+}
+@media (min-width: 1200px) {
   .hidden-xl {
     display: none !important;
   }
@@ -1115,7 +1131,7 @@ html:not([dir="rtl"]) .p-a-panel {
   padding-left: 16px !important;
   padding-left: var(--size-16) !important;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .m-a-panel {
     margin-top: 24px !important;
     margin-top: var(--size-24) !important;
@@ -1161,7 +1177,7 @@ html:not([dir="rtl"]) .p-a-panel {
     padding-left: var(--size-24) !important;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .m-a-panel {
     margin-top: 32px !important;
     margin-top: var(--size-32) !important;
@@ -1235,7 +1251,7 @@ html:not([dir="rtl"]) .p-a-panel {
   padding-bottom: 16px !important;
   padding-bottom: var(--size-16) !important;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .m-t-panel {
     margin-top: 24px !important;
     margin-top: var(--size-24) !important;
@@ -1265,7 +1281,7 @@ html:not([dir="rtl"]) .p-a-panel {
     padding-bottom: var(--size-24) !important;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .m-t-panel {
     margin-top: 32px !important;
     margin-top: var(--size-32) !important;
@@ -1359,7 +1375,7 @@ html:not([dir="rtl"]) .p-x-panel {
   padding-right: 16px !important;
   padding-right: var(--size-16) !important;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   [dir="rtl"] .m-l-panel {
     margin-right: 24px !important;
     margin-right: var(--size-24) !important;
@@ -1425,7 +1441,7 @@ html:not([dir="rtl"]) .p-x-panel {
     padding-right: var(--size-24) !important;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   [dir="rtl"] .m-l-panel {
     margin-right: 32px !important;
     margin-right: var(--size-32) !important;
@@ -1519,7 +1535,7 @@ html:not([dir="rtl"]) .p-x-panel {
   padding-bottom: 16px !important;
   padding-bottom: var(--size-16) !important;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .m-t-section-1 {
     margin-top: 24px !important;
     margin-top: var(--size-24) !important;
@@ -1549,7 +1565,7 @@ html:not([dir="rtl"]) .p-x-panel {
     padding-bottom: var(--size-24) !important;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .m-t-section-1 {
     margin-top: 32px !important;
     margin-top: var(--size-32) !important;
@@ -1607,7 +1623,7 @@ html:not([dir="rtl"]) .p-x-panel {
   padding-bottom: 32px !important;
   padding-bottom: var(--size-32) !important;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .m-t-section-2 {
     margin-top: 48px !important;
     margin-top: var(--size-48) !important;
@@ -1637,7 +1653,7 @@ html:not([dir="rtl"]) .p-x-panel {
     padding-bottom: var(--size-48) !important;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .m-t-section-2 {
     margin-top: 64px !important;
     margin-top: var(--size-64) !important;
@@ -1695,7 +1711,7 @@ html:not([dir="rtl"]) .p-x-panel {
   padding-bottom: 48px !important;
   padding-bottom: var(--size-48) !important;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .m-t-section-3 {
     margin-top: 72px !important;
     margin-top: var(--size-72) !important;
@@ -1725,7 +1741,7 @@ html:not([dir="rtl"]) .p-x-panel {
     padding-bottom: var(--size-72) !important;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .m-t-section-3 {
     margin-top: 96px !important;
     margin-top: var(--size-96) !important;
@@ -1791,7 +1807,7 @@ html:not([dir="rtl"]) .p-x-panel {
   padding-bottom: 48px;
   padding-bottom: var(--size-48);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .section {
     padding-top: 72px;
     padding-top: var(--size-72);
@@ -1799,7 +1815,7 @@ html:not([dir="rtl"]) .p-x-panel {
     padding-bottom: var(--size-72);
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .section {
     padding-top: 96px;
     padding-top: var(--size-96);
@@ -1812,12 +1828,12 @@ html:not([dir="rtl"]) .p-x-panel {
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .np-text-hyphenated {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-text-hyphenated {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -1829,7 +1845,7 @@ html:not([dir="rtl"]) .p-x-panel {
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-text-hyphenated {
       -webkit-hyphenate-limit-before: 4;
     }

package/dist/css/neptune-core.css

@@ -549,7 +549,7 @@ dd {
   color: #37517e;
   color: var(--color-content-primary);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   dd {
     margin-bottom: 24px;
     margin-bottom: var(--size-24);
@@ -564,7 +564,7 @@ dd {
 .dl-horizontal dd::after {
   clear: both;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .dl-horizontal dt {
     float: left;
     clear: left;
@@ -620,13 +620,13 @@ hr {
 .bg-primary hr {
   border-top: 1px solid rgba(255,255,255,0.10196);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   hr {
     margin: 24px auto;
     margin: var(--size-24) auto;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   hr {
     margin: 32px auto;
     margin: var(--size-32) auto;
@@ -740,7 +740,7 @@ h6,
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .h1,
     .h2,
     .h3,
@@ -766,7 +766,7 @@ h6,
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .h1,
     .h2,
     .h3,
@@ -820,7 +820,7 @@ h6,
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .h1,
     .h2,
     .h3,
@@ -1089,7 +1089,16 @@ a,
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
-.np-text-display-small {
+.np-text-display-small,
+.display-1--forced,
+.display-2--forced,
+.display-3--forced,
+.display-4--forced,
+.display-5--forced,
+.np-text-display-extra-large--forced,
+.np-text-display-large--forced,
+.np-text-display-medium--forced,
+.np-text-display-small--forced {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-synthesis: none;
@@ -1135,9 +1144,14 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
 }
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 .np-text-display-extra-large,
@@ -1154,7 +1168,7 @@ a,
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .np-text-display-extra-large,
     .np-text-display-large,
     .np-text-display-medium,
@@ -1162,7 +1176,7 @@ a,
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-text-display-extra-large,
     .np-text-display-large,
     .np-text-display-medium,
@@ -1180,7 +1194,7 @@ a,
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .np-text-display-extra-large,
     .np-text-display-large,
     .np-text-display-medium,
@@ -1584,7 +1598,7 @@ a,
   /* stylelint-disable-next-line number-max-precision */
   font-size: 3.73333333rem;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .display-1 {
     margin-bottom: 8px;
     margin-bottom: var(--size-8);
@@ -1598,7 +1612,7 @@ a,
   /* stylelint-disable-next-line number-max-precision */
   font-size: 3.73333333rem;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .display-2 {
     margin-bottom: 16px;
     margin-bottom: var(--size-16);
@@ -1611,7 +1625,7 @@ a,
   margin-bottom: var(--size-8);
   font-size: 2.8rem;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .display-3 {
     margin-bottom: 24px;
     margin-bottom: var(--size-24);
@@ -1625,7 +1639,7 @@ a,
   /* stylelint-disable-next-line number-max-precision */
   font-size: 1.86666667rem;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .display-4 {
     margin-bottom: 24px;
     margin-bottom: var(--size-24);
@@ -1639,7 +1653,7 @@ a,
   /* stylelint-disable-next-line number-max-precision */
   font-size: 1.86666667rem;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .display-5 {
     margin-bottom: 8px;
     margin-bottom: var(--size-8);
@@ -1737,13 +1751,13 @@ blockquote footer {
 blockquote footer::before {
   content: "\2014 \00A0";
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   blockquote {
     margin: 24px;
     margin: var(--size-24);
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   blockquote {
     margin: 32px;
     margin: var(--size-32);
@@ -1862,7 +1876,7 @@ kbd kbd {
 .text-xs-nowrap {
   white-space: nowrap;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .text-sm-left {
     text-align: left;
   }
@@ -1885,7 +1899,7 @@ kbd kbd {
     white-space: nowrap;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .text-md-left {
     text-align: left;
   }
@@ -1908,32 +1922,48 @@ kbd kbd {
     white-space: nowrap;
   }
 }
-@media (min-width: 1160px) {
-  .text-lg-left,
+@media (min-width: 992px) {
+  .text-lg-left {
+    text-align: left;
+  }
+  [dir="rtl"] .text-lg-left {
+    text-align: right;
+  }
+  .text-lg-right {
+    text-align: right;
+  }
+  [dir="rtl"] .text-lg-right {
+    text-align: left;
+  }
+  .text-lg-center {
+    text-align: center;
+  }
+  .text-lg-justify {
+    text-align: justify;
+  }
+  .text-lg-nowrap {
+    white-space: nowrap;
+  }
+}
+@media (min-width: 1200px) {
   .text-xl-left {
     text-align: left;
   }
-  [dir="rtl"] .text-lg-left,
   [dir="rtl"] .text-xl-left {
     text-align: right;
   }
-  .text-lg-right,
   .text-xl-right {
     text-align: right;
   }
-  [dir="rtl"] .text-lg-right,
   [dir="rtl"] .text-xl-right {
     text-align: left;
   }
-  .text-lg-center,
   .text-xl-center {
     text-align: center;
   }
-  .text-lg-justify,
   .text-xl-justify {
     text-align: justify;
   }
-  .text-lg-nowrap,
   .text-xl-nowrap {
     white-space: nowrap;
   }