From 400913533e76144453412cf8b633c01a0181ba09 Mon Sep 17 00:00:00 2001
From: KrystofM <krystof.mitka@seznam.cz>
Date: Wed, 9 May 2018 17:21:19 +0200
Subject: [PATCH 1/3] Add flex mixin

---
 src/styles/mixins/flex.scss | 46 +++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/styles/mixins/flex.scss

diff --git a/src/styles/mixins/flex.scss b/src/styles/mixins/flex.scss
new file mode 100644
index 0000000..7c99824
--- /dev/null
+++ b/src/styles/mixins/flex.scss
@@ -0,0 +1,46 @@
+@charset "UTF-8";
+
+/// Provides a quick method for setting an element’s flex settings. Use a `null` value to “skip” a side. Fast & Neat.
+///
+/// @example sass - Usage
+///   .element1 {
+///     +flex(space-between, center);
+///   }
+///
+///   .element2 {
+///     +flex(space-evenly, null, column);
+///   }
+///
+/// @example css - CSS Output
+///   .element1 {
+///     display: flex;
+///     justify-content: space-between
+///     align-items: center
+///   }
+///
+///   .element2 {
+///     display: flex;
+///     justify-content: space-between
+///     flex-direction: column
+///   }
+///
+/// @krystofm - Kodérek for life.
+///
+
+@mixin flex($justify: null, $align: null, $direction: null) {
+
+  $offsets: (
+    justify-content: $justify,
+    align-items: $align,
+    flex-direction: $direction
+  );
+
+  display: flex;
+
+  @each $offset, $value in $offsets {
+    @if $value {
+      #{$offset}: $value
+    }
+  }
+
+}
\ No newline at end of file

From 4f146790c1cc5cb8f4cc3fd15d021ed1da0c2425 Mon Sep 17 00:00:00 2001
From: KrystofM <krystof.mitka@seznam.cz>
Date: Wed, 9 May 2018 17:31:18 +0200
Subject: [PATCH 2/3] Line fix

---
 src/styles/mixins/flex.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/mixins/flex.scss b/src/styles/mixins/flex.scss
index 7c99824..ca81a5e 100644
--- a/src/styles/mixins/flex.scss
+++ b/src/styles/mixins/flex.scss
@@ -43,4 +43,4 @@
     }
   }
 
-}
\ No newline at end of file
+}

From 6a928c3de2d93e071c5f7bac68e989670557c5f3 Mon Sep 17 00:00:00 2001
From: KrystofM <krystof.mitka@seznam.cz>
Date: Wed, 9 May 2018 19:27:13 +0200
Subject: [PATCH 3/3] Flex mixin: sass -> scss

---
 src/styles/mixins/flex.sass | 36 +++++++++++++++++++++++++++++
 src/styles/mixins/flex.scss | 46 -------------------------------------
 2 files changed, 36 insertions(+), 46 deletions(-)
 create mode 100644 src/styles/mixins/flex.sass
 delete mode 100644 src/styles/mixins/flex.scss

diff --git a/src/styles/mixins/flex.sass b/src/styles/mixins/flex.sass
new file mode 100644
index 0000000..e959860
--- /dev/null
+++ b/src/styles/mixins/flex.sass
@@ -0,0 +1,36 @@
+// Provides a quick method for setting an element’s flex settings. Use a `null` value to “skip” a side. Fast & Neat.
+
+    @example sass - Usage
+      .element1 {
+         +flex(space-between, center);
+      }
+
+      .element2 {
+         +flex(space-evenly, null, column);
+      }
+
+    @example css - CSS Output
+      .element1 {
+         display: flex;
+         justify-content: space-between
+         align-items: center
+      }
+
+      .element2 {
+         display: flex;
+         justify-content: space-between
+         flex-direction: column
+      }
+
+    @krystofm - Kodérek for life.
+
+
+=flex($justify: null, $align: center, $direction: null)
+
+  $offsets: (justify-content: $justify, align-items: $align, flex-direction: $direction)
+
+  display: flex
+
+  @each $offset, $value in $offsets
+    @if $value
+      #{$offset}: $value
\ No newline at end of file
diff --git a/src/styles/mixins/flex.scss b/src/styles/mixins/flex.scss
deleted file mode 100644
index ca81a5e..0000000
--- a/src/styles/mixins/flex.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "UTF-8";
-
-/// Provides a quick method for setting an element’s flex settings. Use a `null` value to “skip” a side. Fast & Neat.
-///
-/// @example sass - Usage
-///   .element1 {
-///     +flex(space-between, center);
-///   }
-///
-///   .element2 {
-///     +flex(space-evenly, null, column);
-///   }
-///
-/// @example css - CSS Output
-///   .element1 {
-///     display: flex;
-///     justify-content: space-between
-///     align-items: center
-///   }
-///
-///   .element2 {
-///     display: flex;
-///     justify-content: space-between
-///     flex-direction: column
-///   }
-///
-/// @krystofm - Kodérek for life.
-///
-
-@mixin flex($justify: null, $align: null, $direction: null) {
-
-  $offsets: (
-    justify-content: $justify,
-    align-items: $align,
-    flex-direction: $direction
-  );
-
-  display: flex;
-
-  @each $offset, $value in $offsets {
-    @if $value {
-      #{$offset}: $value
-    }
-  }
-
-}