Update

1 files changed, 88 insertions, 0 deletions

diff --git a/src/mixins/_grid.scss b/src/mixins/_grid.scss
new file mode 100644
index 0000000..e0a73d9
--- /dev/null
+++ b/src/mixins/_grid.scss
@@ -0,0 +1,88 @@
+$context-id: 'grid' !default;
+
+@include iro-context-stack-create($grid-context-id);
+
+@mixin native-grid {
+    @supports (display: grid) {
+        @content;
+    }
+}
+
+@mixin grid($columns: 12, $h-spacing: 0, $v-spacing: 0, $reverse: false) {
+    display:         flex;
+    flex-flow:       row wrap;
+    align-items:     stretch;
+    justify-content: flex-start;
+    margin:          (-.5 * $v-spacing) (-.5 * $h-spacing);
+
+    @if $reverse {
+        flex-direction: row-reverse;
+    }
+
+    @include iro-context-push($grid-context-id, 'grid', (
+        --h-spacing: $h-spacing,
+        --v-spacing: $v-spacing,
+        --columns:   $columns,
+        --reverse:   $reverse
+    ));
+
+    @content;
+
+    @include iro-context-pop($grid-context-id);
+}
+
+@mixin grid-col {
+    @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
+
+    $data:      nth(iro-context-get($grid-context-id, 'grid'), 2);
+    $v-spacing: map-get($data, --v-spacing);
+    $h-spacing: map-get($data, --h-spacing);
+
+    box-sizing: border-box;
+    flex:       0 0 auto;
+    margin:     .5 * $v-spacing .5 * $h-spacing;
+
+    @include iro-context-push($grid-context-id, 'grid__col');
+
+    @content;
+
+    @include iro-context-pop($grid-context-id);
+}
+
+@mixin grid-col-span($i) {
+    @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
+
+    $data:      nth(iro-context-get($grid-context-id, 'grid'), 2);
+    $columns:   map-get($data, --columns);
+    $h-spacing: map-get($data, --h-spacing);
+
+    @if $h-spacing != 0 {
+        width: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{($i - 1) * $h-spacing});
+        //                                                ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
+    } @else {
+        width: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
+    }
+}
+
+@mixin grid-col-shift($i) {
+    @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
+
+    $data:      nth(iro-context-get($grid-context-id, 'grid'), 2);
+    $columns:   map-get($data, --columns);
+    $h-spacing: map-get($data, --h-spacing);
+    $reverse:   map-get($data, --reverse);
+
+    $prop: if($reverse, margin-right, margin-left);
+
+    @if $i == 0 {
+        #{$prop}: 0;
+    } @else {
+        @if $h-spacing != 0 {
+            #{$prop}: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{$i * $h-spacing + $h-spacing / 2});
+            //                                                   ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
+        } @else {
+            #{$prop}: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
+            //                      ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
+        }
+    }
+}