@transferwise/components 46.130.3 → 46.131.1

package/src/styles/less/grid.less

@@ -0,0 +1,187 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_clearfix.less";
+@import (reference) "./mixins/_grid.less";
+@import (reference) "./mixins/_grid-framework.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+// Set the container width, and override it for fixed navbars in media queries.
+.container {
+  .container-fixed();
+  .clearfix ();
+
+  @media (min-width: @screen-xl-min) {
+    max-width: @container-xl;
+  }
+
+  padding-right: @spacing-1-mobile;
+  padding-left: @spacing-1-mobile;
+
+  @media (min-width: @screen-sm-min) {
+    padding-right: @spacing-1-tablet;
+    padding-left: @spacing-1-tablet;
+  }
+
+  @media (min-width: @screen-lg-min) {
+    padding-right: @spacing-1-desktop;
+    padding-left: @spacing-1-desktop;
+  }
+}
+
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+.container-fluid {
+  .container-fixed();
+}
+
+// Rows contain and clear the floats of your columns.
+.row {
+  .make-row();
+  .clearfix ();
+}
+
+// Common styles for small and large grid columns
+.make-grid-columns();
+
+// Columns, offsets, pushes, and pulls for extra small devices like smartphones.
+.make-grid(xs);
+
+// Columns, offsets, pushes, and pulls for the small device range, from phones to tablets.
+@media (min-width: @screen-sm-min) {
+  .make-grid(sm);
+}
+
+// Columns, offsets, pushes, and pulls for the desktop device range.
+@media (min-width: @screen-md-min) {
+  .make-grid(md);
+}
+
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+@media (min-width: @screen-lg-min) {
+  .make-grid(lg);
+}
+
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+@media (min-width: @screen-xl-min) {
+  .make-grid(xl);
+}
+
+@media (max-width: @screen-xs-max) {
+  .container {
+    padding-right: @spacing-1-mobile;
+    padding-left: @spacing-1-mobile;
+  }
+}
+
+@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+  .container {
+    padding-right: @spacing-1-tablet;
+    padding-left: @spacing-1-tablet;
+  }
+}
+
+[class*="col-sm"],
+[class*="col-md"],
+[class*="col-lg"],
+[class*="col-xl"] {
+  margin-bottom: calc(var(--size-8) * 2);
+}
+
+[class*="col-xs"] {
+  margin-bottom: 0;
+}
+
+@media (min-width: @screen-sm-min) {
+  [class*="col-sm"] {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  [class*="col-md"] {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: @screen-lg-min) {
+  [class*="col-lg"] {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: @screen-xl-min) {
+  [class*="col-xl"] {
+    margin-bottom: 0;
+  }
+}
+
+.row-equal-height {
+  display: flex;
+  flex-wrap: wrap;
+
+  > [class*="col-"] {
+    display: flex;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    .col-xs-12 {
+      margin-bottom: var(--size-12);
+    }
+  }
+}
+
+// Make grid gutters smaller on mobile
+@media (max-width: @screen-xs-max) {
+  .row {
+    margin-right: calc(var(--size-8) * -1);
+    margin-left: calc(var(--size-8) * -1);
+  }
+
+  [class*="col-"] {
+    padding-right: var(--size-8);
+    padding-left: var(--size-8);
+  }
+}
+
+.make-grid-columns-wide(@gutter: @grid-gutter-width) {
+  margin-right: -@gutter / 2;
+  margin-left: -@gutter / 2;
+
+  [class*="col-"] {
+    padding-right: @gutter / 2;
+    padding-left: @gutter / 2;
+  }
+}
+
+.row--wide {
+  .make-grid-columns-wide();
+
+  @media all and (min-width: @screen-sm) {
+    .make-grid-columns-wide(@grid-gutter-width * 2);
+  }
+
+  @media all and (min-width: @screen-lg) {
+    .make-grid-columns-wide(@grid-gutter-width * 4);
+  }
+}
+
+.container--fullscreen {
+  @media (min-width: @screen-xl-min) {
+    max-width: 100%;
+  }
+}
+
+.container--text {
+  max-width: 700px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container--wide {
+  max-width: 1500px;
+  margin-right: auto;
+  margin-left: auto;
+
+  @media (min-width: @screen-xl-min) {
+    max-width: 1500px;
+  }
+}