@ainias42/react-bootstrap-mobile 0.1.9 → 0.1.11

package/src/Components/Layout/Grid/GridItem.tsx

@@ -13,18 +13,21 @@ export type GridItemProps = RbmComponentProps<{
     lg?: number;
     xl?: number;
     xxl?: number;
+    print?: number;
     startXs?: number;
     startSm?: number;
     startMd?: number;
     startLg?: number;
     startXl?: number;
     startXxl?: number;
+    startPrint?: number;
     orderXs?: number;
     orderSm?: number;
     orderMd?: number;
     orderLg?: number;
     orderXl?: number;
     orderXxl?: number;
+    orderPrint?: number;
 }>;
 
 function GridItem({
@@ -38,18 +41,21 @@ function GridItem({
     lg,
     xl,
     xxl,
+    print,
     startXs,
     startMd,
     startSm,
     startLg,
     startXl,
     startXxl,
+    startPrint,
     orderXs,
     orderSm,
     orderMd,
     orderLg,
     orderXxl,
     orderXl,
+    orderPrint,
 }: GridItemProps) {
     // Variables
 
@@ -69,6 +75,9 @@ function GridItem({
     if (xxl) {
         classes.push(`item-xxl-${xxl}`);
     }
+    if (print) {
+        classes.push(`item-print-${print}`);
+    }
 
     if (startXs) {
         classes.push(`start-xs-${startXs}`);
@@ -88,6 +97,9 @@ function GridItem({
     if (startXxl) {
         classes.push(`start-xxl-${startXxl}`);
     }
+    if (startPrint) {
+        classes.push(`start-print-${startPrint}`);
+    }
 
     if (orderXs) {
         classes.push(`order-xs-${orderXs}`);
@@ -107,6 +119,9 @@ function GridItem({
     if (orderXxl) {
         classes.push(`order-xxl-${orderXxl}`);
     }
+    if (orderPrint) {
+        classes.push(`order-print-${orderPrint}`);
+    }
 
     // Refs
 

package/src/Components/Layout/Grid/grid.scss

@@ -40,4 +40,27 @@ $breakpoints: $grid-breakpoints;
       }
     }
   }
+
+  @media print {
+    @for $i from 1 through $columns {
+      .item-print-#{$i} {
+        grid-column: auto / span $i;
+      }
+    }
+
+    // Start with `1` because `0` is and invalid value.
+    // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+    @for $i from 1 through ($columns - 1) {
+      .start-print-#{$i} {
+        grid-column-start: $i;
+      }
+    }
+
+    // Add classes for reordering
+    @for $i from -10 through 10 {
+      .order-print-#{$i} {
+        order: $i;
+      }
+    }
+  }
 }