@transferwise/components 0.0.0-experimental-9050641 → 0.0.0-experimental-ce05ccb

package/src/styles/less/droppable.css

@@ -25,7 +25,7 @@
   border-radius: 0;
   border-radius: initial;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .droppable {
     border-style: dashed;
   }
@@ -124,7 +124,7 @@
   max-width: 96px;
   margin: 0 auto;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .droppable .thumbnail {
     max-height: 128px;
     max-width: 128px;
@@ -175,12 +175,12 @@
 .droppable-sm {
   padding: 16px 16px;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .droppable-sm {
     padding: 24px 16px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .droppable-sm {
     padding: 32px 24px;
   }
@@ -188,12 +188,12 @@
 .droppable-md {
   padding: 32px 32px;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .droppable-md {
     padding: 48px 32px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .droppable-md {
     padding: 64px 48px;
   }
@@ -201,12 +201,12 @@
 .droppable-lg {
   padding: 48px 48px;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .droppable-lg {
     padding: 72px 48px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .droppable-lg {
     padding: 96px 72px;
   }

package/src/styles/less/flex.css

@@ -76,7 +76,7 @@
 .flex-grow-1 {
   flex-grow: 1;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .d-flex--sm {
     display: flex;
   }
@@ -156,7 +156,7 @@
     flex-grow: 1;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .d-flex--md {
     display: flex;
   }
@@ -236,7 +236,7 @@
     flex-grow: 1;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .d-flex--lg {
     display: flex;
   }
@@ -315,6 +315,8 @@
   .flex-grow-1--lg {
     flex-grow: 1;
   }
+}
+@media (min-width: 1200px) {
   .d-flex--xl {
     display: flex;
   }
@@ -416,7 +418,7 @@
   margin-left: 0;
   margin-left: initial;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .flex__inner {
     margin-right: calc(-1 * 24px);
     margin-right: calc(-1 * var(--size-24));
@@ -436,7 +438,7 @@
     margin-left: initial;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .flex__inner {
     margin-right: calc(-1 * 32px);
     margin-right: calc(-1 * var(--size-32));
@@ -456,7 +458,7 @@
     margin-left: initial;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .flex__inner {
     margin-right: calc(-1 * 48px);
     margin-right: calc(-1 * var(--size-48));
@@ -494,7 +496,7 @@
   padding-left: 0;
   padding-left: initial;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .flex__item {
     padding-right: 24px;
     padding-right: var(--size-24);
@@ -514,7 +516,7 @@
     padding-left: initial;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .flex__item {
     padding-right: 32px;
     padding-right: var(--size-32);
@@ -534,7 +536,7 @@
     padding-left: initial;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .flex__item {
     padding-right: 48px;
     padding-right: var(--size-48);
@@ -558,7 +560,7 @@
   flex: 0 0 calc(100% / 3);
   max-width: calc(100% / 3);
 }
-@media (max-width: 839.98px) {
+@media (max-width: 767px) {
   .flex__item--4--md {
     flex: 0 0 calc(100% / 3);
     max-width: calc(100% / 3);
@@ -568,7 +570,7 @@
   flex: 0 0 calc(100% / 1.5);
   max-width: calc(100% / 1.5);
 }
-@media (max-width: 839.98px) {
+@media (max-width: 767px) {
   .flex__item--8--md {
     flex: 0 0 calc(100% / 1.5);
     max-width: calc(100% / 1.5);
@@ -578,7 +580,7 @@
   flex: 0 0 50%;
   max-width: 50%;
 }
-@media (max-width: 839.98px) {
+@media (max-width: 767px) {
   .flex__item--6--md {
     flex: 0 0 50%;
     max-width: 50%;
@@ -588,7 +590,7 @@
   flex: 0 0 100%;
   max-width: 100%;
 }
-@media (max-width: 839.98px) {
+@media (max-width: 767px) {
   .flex__item--12--md {
     flex: 0 0 100%;
     max-width: 100%;

package/src/styles/less/flex.less

@@ -14,7 +14,9 @@
 
 @media (--screen-lg) {
   .flex-properties(--lg);
-  /// @deprecated
+}
+
+@media (--screen-xl) {
   .flex-properties(--xl);
 }
 

package/src/styles/less/footer.css

@@ -12,7 +12,7 @@
   padding-bottom: calc(8px * 10);
   padding-bottom: calc(var(--size-8) * 10);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .footer {
     padding-top: calc(8px * 15);
     padding-top: calc(var(--size-8) * 15);
@@ -20,7 +20,7 @@
     padding-bottom: calc(var(--size-8) * 15);
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .footer {
     padding-top: calc(8px * 20);
     padding-top: calc(var(--size-8) * 20);
@@ -122,7 +122,7 @@
 .footer.footer-inverse .np-text-body-default {
   color: #ffffff;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .footer {
     position: relative;
   }

package/src/styles/less/forms/bootstrap-forms.css

@@ -1323,7 +1323,7 @@ select[multiple].input-lg {
 .has-feedback label.sr-only ~ .form-control-feedback {
   top: 0;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .form-inline .form-group {
     display: inline-block;
     margin-bottom: 0;
@@ -1410,7 +1410,7 @@ select[multiple].input-lg {
   margin-left: -12px;
   margin-right: -12px;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .form-horizontal .control-label {
     text-align: right;
     margin-bottom: 0;
@@ -1428,14 +1428,14 @@ select[multiple].input-lg {
   right: auto;
   right: initial;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .form-horizontal .form-group-lg .control-label {
     padding-top: 17px;
     font-size: 1.25rem;
     font-size: var(--font-size-20);
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .form-horizontal .form-group-sm .control-label {
     padding-top: 8px;
     font-size: 0.875rem;
@@ -1869,7 +1869,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   padding-right: 0;
   padding-right: initial;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .form-group .row [class*='col-sm-'] {
     margin-bottom: 0;
   }
@@ -1877,7 +1877,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
     margin-bottom: 12px;
   }
 }
-@media (max-width: 839.98px) {
+@media (max-width: 767px) {
   .form-group .row [class*='col-md-'] {
     margin-bottom: 0;
   }
@@ -1886,7 +1886,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
     margin-bottom: 12px;
   }
 }
-@media (max-width: 1159.98px) {
+@media (max-width: 991px) {
   .form-group .row [class*='col-lg-'] {
     margin-bottom: 0;
   }
@@ -1895,7 +1895,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
     margin-bottom: 12px;
   }
 }
-@media (max-width: 1159.98px) {
+@media (max-width: 1199px) {
   .form-group .row [class*='col-xl-'] {
     margin-bottom: 0;
   }
@@ -1904,7 +1904,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
     margin-bottom: 12px;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   fieldset .form-group:nth-of-type(odd) {
     clear: left;
   }

package/src/styles/less/forms/bootstrap-forms.less

@@ -636,7 +636,7 @@ input[type="password"] {
 //
 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
 // forms begin stacked on extra small (mobile) devices and then go inline when
-// viewports reach <840px.
+// viewports reach <768px.
 //
 // Requires wrapping inputs and labels with `.form-group` for proper display of
 // default HTML form controls and our custom form controls (e.g., input groups).

package/src/styles/less/grid.css

@@ -14,18 +14,18 @@
 .container::after {
   clear: both;
 }
-@media (min-width: 1160px) {
+@media (min-width: 1200px) {
   .container {
     max-width: 1164px;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .container {
     padding-right: 24px;
     padding-left: 24px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .container {
     padding-right: 32px;
     padding-left: 32px;
@@ -546,7 +546,7 @@
   margin-left: 0;
   margin-left: initial;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .col-sm-1,
   .col-sm-2,
   .col-sm-3,
@@ -972,7 +972,7 @@
     margin-left: initial;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .col-md-1,
   .col-md-2,
   .col-md-3,
@@ -1398,7 +1398,7 @@
     margin-left: initial;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .col-lg-1,
   .col-lg-2,
   .col-lg-3,
@@ -1824,7 +1824,7 @@
     margin-left: initial;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 1200px) {
   .col-xl-1,
   .col-xl-2,
   .col-xl-3,
@@ -2250,13 +2250,13 @@
     margin-left: initial;
   }
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .container {
     padding-right: 16px;
     padding-left: 16px;
   }
 }
-@media (min-width: 600px) and (max-width: 839.98px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .container {
     padding-right: 24px;
     padding-left: 24px;
@@ -2272,22 +2272,22 @@
 [class*="col-xs"] {
   margin-bottom: 0;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   [class*="col-sm"] {
     margin-bottom: 0;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   [class*="col-md"] {
     margin-bottom: 0;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   [class*="col-lg"] {
     margin-bottom: 0;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 1200px) {
   [class*="col-xl"] {
     margin-bottom: 0;
   }
@@ -2299,13 +2299,13 @@
 .row-equal-height > [class*="col-"] {
   display: flex;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .row-equal-height .col-xs-12 {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
   }
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .row {
     margin-right: calc(8px * -1);
     margin-right: calc(var(--size-8) * -1);
@@ -2327,7 +2327,7 @@
   padding-right: 24px / 2;
   padding-left: 24px / 2;
 }
-@media all and (min-width: 600px) {
+@media all and (min-width: 576px) {
   .row--wide {
     margin-right: -48px / 2;
     margin-left: -48px / 2;
@@ -2337,7 +2337,7 @@
     padding-left: 48px / 2;
   }
 }
-@media all and (min-width: 1160px) {
+@media all and (min-width: 992px) {
   .row--wide {
     margin-right: -96px / 2;
     margin-left: -96px / 2;
@@ -2347,7 +2347,7 @@
     padding-left: 96px / 2;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 1200px) {
   .container--fullscreen {
     max-width: 100%;
   }
@@ -2362,7 +2362,7 @@
   margin-right: auto;
   margin-left: auto;
 }
-@media (min-width: 1160px) {
+@media (min-width: 1200px) {
   .container--wide {
     max-width: 1500px;
   }

package/src/styles/less/input-groups.css

@@ -1326,7 +1326,7 @@ select[multiple].input-lg {
 .has-feedback label.sr-only ~ .form-control-feedback {
   top: 0;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .form-inline .form-group {
     display: inline-block;
     margin-bottom: 0;
@@ -1413,7 +1413,7 @@ select[multiple].input-lg {
   margin-left: -12px;
   margin-right: -12px;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .form-horizontal .control-label {
     text-align: right;
     margin-bottom: 0;
@@ -1431,14 +1431,14 @@ select[multiple].input-lg {
   right: auto;
   right: initial;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .form-horizontal .form-group-lg .control-label {
     padding-top: 17px;
     font-size: 1.25rem;
     font-size: var(--font-size-20);
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .form-horizontal .form-group-sm .control-label {
     padding-top: 8px;
     font-size: 0.875rem;
@@ -1872,7 +1872,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   padding-right: 0;
   padding-right: initial;
 }
-@media (max-width: 599.98px) {
+@media (max-width: 575px) {
   .form-group .row [class*='col-sm-'] {
     margin-bottom: 0;
   }
@@ -1880,7 +1880,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
     margin-bottom: 12px;
   }
 }
-@media (max-width: 839.98px) {
+@media (max-width: 767px) {
   .form-group .row [class*='col-md-'] {
     margin-bottom: 0;
   }
@@ -1889,7 +1889,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
     margin-bottom: 12px;
   }
 }
-@media (max-width: 1159.98px) {
+@media (max-width: 991px) {
   .form-group .row [class*='col-lg-'] {
     margin-bottom: 0;
   }
@@ -1898,7 +1898,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
     margin-bottom: 12px;
   }
 }
-@media (max-width: 1159.98px) {
+@media (max-width: 1199px) {
   .form-group .row [class*='col-xl-'] {
     margin-bottom: 0;
   }
@@ -1907,7 +1907,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
     margin-bottom: 12px;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   fieldset .form-group:nth-of-type(odd) {
     clear: left;
   }
@@ -2384,14 +2384,14 @@ select[multiple].input-group-lg > .input-group-btn .btn {
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .input-group-lg > .form-control,
     .input-group-lg > .input-group-addon,
     .input-group-lg > .input-group-btn .btn {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .input-group-lg > .form-control,
     .input-group-lg > .input-group-addon,
     .input-group-lg > .input-group-btn .btn {
@@ -2407,7 +2407,7 @@ select[multiple].input-group-lg > .input-group-btn .btn {
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .input-group-lg > .form-control,
     .input-group-lg > .input-group-addon,
     .input-group-lg > .input-group-btn .btn {

package/src/styles/less/list-group.css

@@ -34,7 +34,7 @@ html:not([dir="rtl"]) .list-group-item {
 .panel-group .list-group-item {
   margin-top: 0;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .list-group-item {
     padding: 24px 24px 24px 22px;
   }
@@ -42,7 +42,7 @@ html:not([dir="rtl"]) .list-group-item {
     padding: 24px 22px 24px 24px;
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .list-group-item {
     padding: 32px 32px 32px 30px;
   }
@@ -70,12 +70,12 @@ html:not([dir="rtl"]) .list-group-item {
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 840px) {
+  @media (min-width: 768px) {
     .list-group-item-heading {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .list-group-item-heading {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -87,7 +87,7 @@ html:not([dir="rtl"]) .list-group-item {
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .list-group-item-heading {
       -webkit-hyphenate-limit-before: 4;
     }
@@ -151,7 +151,7 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
 .np-theme-personal--dark .list-group-item.active {
   box-shadow: none;
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .list-group-item.active {
     margin-left: -12px;
     margin-right: -12px;
@@ -169,7 +169,7 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .list-group-inactive .list-group-item:hover .circle,
   .list-group-inactive .list-group-item.active .circle {
     background-color: rgba(134,167,189,0.10196);
@@ -305,7 +305,7 @@ a.list-group-item-danger:hover {
     transform: translateX(0);
   }
 }
-@media (max-width: 839.98px) {
+@media (max-width: 767px) {
   .list-group-slide-out .list-group-item .collapse {
     position: fixed;
     top: 0;

package/src/styles/less/modals.css

@@ -138,9 +138,9 @@
   height: 50px;
   overflow: scroll;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .modal-dialog {
-    width: 564px;
+    width: 540px;
     margin: 32px auto;
   }
   .modal-content {
@@ -164,22 +164,22 @@
     padding: var(--size-16) 32px;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .modal-sm,
   .modal-lg {
     width: auto;
     margin: 32px 24px;
   }
 }
-@media (min-width: 320.02px) {
+@media (min-width: 332px) {
   .modal-sm {
     width: 300px;
     margin: 32px auto;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .modal-lg {
-    width: 824px;
+    width: 720px;
     margin: 32px auto;
   }
 }

package/src/styles/less/modals.less

@@ -190,7 +190,7 @@
   // Automatically set modal's width for larger viewports
 
   .modal-dialog {
-    width: (@screen-sm-min - 36px);
+    width: @modal-md;
     margin: (@padding-base-vertical * 4) auto;
   }
 
@@ -224,16 +224,16 @@
   }
 }
 
-@media (--screen-xs) {
+@media (min-width: (@modal-sm + 32px)) {
   .modal-sm {
-    width: (@screen-xs-min - 20px);
+    width: @modal-sm;
     margin: (@padding-base-vertical * 4) auto;
   }
 }
 
 @media (--screen-md) {
   .modal-lg {
-    width: (@screen-md-min - 16px);
+    width: @modal-lg;
     margin: (@padding-base-vertical * 4) auto;
   }
 }