feat: adds remove odd cols var trigger

zalog · Mar 28, 2021 · 0a2cdc3 · 0a2cdc3
1 parent 8a4ca53
commit 0a2cdc3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,8 @@ $ph-color:                #ced4da !default;
 $ph-border:               1px solid darken($ph-bg, 10%) !default;
 $ph-border-radius:        2px !default;
 
+$ph-cols:                 12 !default;
+$ph-cols-remove-odd:      true !default;
 $ph-gutter:               30px !default;
 $ph-spacer:               15px !default;
 

diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss
@@ -59,23 +59,18 @@
   }
 }
 
-.ph-col-2 {
-  flex: 0 0 percentage(2 / 12);
-}
-.ph-col-4 {
-  flex: 0 0 percentage(4 / 12);
-}
-.ph-col-6 {
-  flex: 0 0 percentage(6 / 12);
-}
-.ph-col-8 {
-  flex: 0 0 percentage(8 / 12);
-}
-.ph-col-10 {
-  flex: 0 0 percentage(10 / 12);
+@mixin ph-make-col($size, $columns) {
+  .ph-col-#{$size} {
+    flex: 0 0 percentage($size / $columns);
+  }
 }
-.ph-col-12 {
-  flex: 0 0 percentage(12 / 12);
+
+@for $i from 1 through $ph-cols {
+  @if $ph-cols-remove-odd and $i % 2 == 0 {
+    @include ph-make-col($i, $ph-cols);
+  } @else if not $ph-cols-remove-odd {
+    @include ph-make-col($i, $ph-cols);
+  }
 }
 
 // TODO make this a `.ph-wrap` class for no padding, no background, no animation,

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -4,6 +4,8 @@ $ph-color:                #ced4da !default;
 $ph-border:               1px solid darken($ph-bg, 10%) !default;
 $ph-border-radius:        2px !default;
 
+$ph-cols:                 12 !default;
+$ph-cols-remove-odd:      true !default;
 $ph-gutter:               30px !default;
 $ph-spacer:               15px !default;