Update

2 files changed, 151 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 ^^^^^^^^^^
+        }
+    }
+}
diff --git a/src/mixins/_typography.scss b/src/mixins/_typography.scss
new file mode 100644
index 0000000..31e39f0
--- /dev/null
+++ b/src/mixins/_typography.scss
@@ -0,0 +1,63 @@
+@function set-font($basis, $values: ()) {
+    $font: map-merge($basis, $values);
+
+    $map: (font-family: map-get($font, 'family'));
+
+    @if (map-has-key($font, 'size')) {
+        $map: map-merge(
+            $map, (
+                font-size: map-get($font, 'size')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'weight')) {
+        $map: map-merge(
+            $map, (
+                font-weight: map-get($font, 'weight')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'style')) {
+        $map: map-merge(
+            $map, (
+                font-style: map-get($font, 'style')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'line-height')) {
+        $map: map-merge(
+            $map, (
+                line-height: map-get($font, 'line-height')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'transform')) {
+        $map: map-merge(
+            $map, (
+                text-transform: map-get($font, 'transform')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'variant-alternates')) {
+        $map: map-merge(
+            $map, (
+                font-variant-alternates: map-get($font, 'variant-alternates')
+            )
+        );
+    }
+
+    @return $map;
+}
+
+@mixin set-font($basis, $values: ()) {
+    $values: set-font($basis, $values);
+
+    @each $prop, $value in $values {
+        #{$prop}: $value;
+    }
+}