wip #6182 @0:20 mixins

diff --git a/resources/quizv2/style/004-mixins.sass b/resources/quizv2/style/004-mixins.sass
new file mode 100644 (file)
index 0000000..30b5ed2
--- /dev/null
+++ b/resources/quizv2/style/004-mixins.sass
@@ -0,0 +1,37 @@
+@mixin above($min-width)
+    @media (min-width: $min-width)
+        @content
+
+@mixin below($max-width)
+    @media (max-width: $max-width)
+        @content
+
+@mixin breakpoint($breakpoint, $direction: min)
+    //check if the supplied breakpoint exists in our breakpoits map
+    $breakpoint-values: map-get($breakpoints, $breakpoint)
+    $breakpoint: map-get($breakpoint-values, $direction)
+    //check if we are writing styles for larger or smaller screens
+
+    @media (#{$direction}-width: $breakpoint)
+        @content
+
+
+@mixin opacity($opacity)
+    opacity: $opacity
+    filter: alpha(opacity=($opacity * 100))
+
+
+@mixin flex-config($justify-content: false, $flex: false, $flex-direction: false, $align-items: false)
+    display: flex
+
+    @if $justify-content != false
+        justify-content: $justify-content
+
+    @if $flex != false
+        flex: $flex
+
+    @if $flex-direction != false
+        flex-direction: $flex-direction
+
+    @if $align-items != false
+        align-items: $align-items