Added span = 0

nickbullll · Jun 7, 2018 · cece45e · cece45e
1 parent 76a843f
commit cece45e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/example/App.js b/example/App.js
@@ -28,6 +28,11 @@ export default class App extends React.Component {
       );
       colCode += `  <Col span={${12 / colCount}} />\n`;
     }
+    cols.push(
+      <Col md={{ span: 0 }}>
+        <div style={{ display: 'flex', 'justifyContent': 'center', 'alignItems': 'center', height: '150px', fontSize: '1.5em', 'color': '#FFF' }}>col-4</div>
+      </Col>
+    );
     return (
       <div>
         <div style={{ marginBottom: 16 }}>

diff --git a/src/Col.js b/src/Col.js
@@ -18,7 +18,7 @@ function Col({ span, offset, className, children, prefix = 'rct-grid-col', order
       }
       delete others[size]; // To prevent a "Warning: Unknown props.."
       sizeClasses = Object.assign({}, sizeClasses, {
-        [s[`${prefix}-${size}-${sizeParams.span}`]]: sizeParams.span,
+        [s[`${prefix}-${size}-${sizeParams.span}`]]: typeof sizeParams.span !== 'undefined',
         [s[`${prefix}-${size}-offset-${sizeParams.offset}`]]: sizeParams.offset || sizeParams.offset === 0,
         [s[`${prefix}-${size}-order-${sizeParams.order}`]]: sizeParams.order || sizeParams.order === 0
       });

diff --git a/src/style/mixins.scss b/src/style/mixins.scss
@@ -41,16 +41,28 @@
 }
 
 @mixin create-grid-options($class) {
-  @for $i from 1 through $grid-columns {
-    .#{$prefix}-col#{$class}-#{$i} {
-      display: block;
-      width: percentage($i / $grid-columns);
-    }
-    .#{$prefix}-col#{$class}-offset-#{$i} {
-      margin-left: percentage($i / $grid-columns);
-    }
-    .#{$prefix}-col#{$class}-order-#{$i} {
-      order: $i;
+  @for $i from 0 through $grid-columns {
+    @if $i == 0 {
+      .#{$prefix}-col#{$class}-#{$i} {
+        display: none;
+      }
+      .#{$prefix}-col#{$class}-offset-#{$i} {
+        margin-left: 0;
+      }
+      .#{$prefix}-col#{$class}-order-#{$i} {
+        order: 0;
+      }
+    } @else {
+      .#{$prefix}-col#{$class}-#{$i} {
+        display: block;
+        width: percentage($i / $grid-columns);
+      }
+      .#{$prefix}-col#{$class}-offset-#{$i} {
+        margin-left: percentage($i / $grid-columns);
+      }
+      .#{$prefix}-col#{$class}-order-#{$i} {
+        order: $i;
+      }
     }
   }
 }