LT-250: Making toolbar responsive

Packages/design/app.styl

@@ -2,5 +2,6 @@
 @import "{design}/styles/variables"
 @import "{design}/styles/mixins"
 @import "{design}/styles/spacings"
+@import "{design}/styles/responsive"
 
 @import "{design}/styles/global"

Packages/design/package.js

@@ -17,6 +17,7 @@ Package.onUse(function(api) {
         'app.styl',
         'styles/global.styl',
         'styles/mixins.styl',
+        'styles/responsive.styl',
         'styles/spacings.styl',
         'styles/variables.styl',
         'styles/webfonts.styl'

Packages/design/styles/responsive.styl

@@ -0,0 +1,23 @@
+@import "./spacings"
+
+
+// MIN WIDTH 1601
+generateSpacings('r', $spacer-x, $spacer-y)
+
+@media screen and (min-width: 1441px) and (max-width: 1600px)
+  generateSpacings('r', ($spacer-x * 0.9), ($spacer-y * 0.9))
+
+@media screen and (min-width: 1367px) and (max-width: 1440px)
+  generateSpacings('r', ($spacer-x * 0.8), ($spacer-y * 0.8))
+
+@media screen and (min-width: 1281px) and (max-width: 1366px)
+  generateSpacings('r', ($spacer-x * 0.7), ($spacer-y * 0.7))
+
+@media screen and (min-width: 1153px) and (max-width: 1280px)
+  generateSpacings('r', ($spacer-x * 0.6), ($spacer-y * 0.6))
+
+@media screen and (min-width: 1025px) and (max-width: 1152px)
+  generateSpacings('r', ($spacer-x * 0.5), ($spacer-y * 0.5))
+
+@media screen and (max-width: 1024px)
+  generateSpacings('r', ($spacer-x * 0.4), ($spacer-y * 0.4))

Packages/design/styles/spacings.styl

@@ -3,36 +3,39 @@ $spacer = 1rem
 $spacer-x = $spacer
 $spacer-y = $spacer
 
-$spacerAxis = $spacer-x,
-              $spacer-y
+generateSpacings($prefix, $spacerX, $spacerY)
+  $spacerAxis = $spacerX,
+                $spacerY
 
-$spacings = 0 0,
-            1 1,
-            2 1.5,
-            3 3g
+  $spacings = 0 0,
+              1 1,
+              2 1.5,
+              3 3g
 
-$properties = m margin,
-              p padding
+  $properties = m margin,
+                p padding
 
-$sides = t top 1,
-         r right 0,
-         b bottom 1,
-         l left 0
+  $sides = t top 1,
+           r right 0,
+           b bottom 1,
+           l left 0
 
-$axes = x left right 0,
-        y top bottom 1
+  $axes = x left right 0,
+          y top bottom 1
 
-for $property in $properties
-  for $spacing in $spacings
-    .{$property[0]}-a-{$spacing[0]}
-      {$property[1]} $spacing[1]*$spacer !important
-    for $side in $sides
-      .{$property[0]}-{$side[0]}-{$spacing[0]}
-        {$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important
-    for $axis in $axes
-      .{$property[0]}-{$axis[0]}-{$spacing[0]}
-        {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important
-        {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important
+  for $property in $properties
+    for $spacing in $spacings
+      .{$prefix}{$property[0]}-a-{$spacing[0]}
+        {$property[1]} $spacing[1]*$spacer !important
+      for $side in $sides
+        .{$prefix}{$property[0]}-{$side[0]}-{$spacing[0]}
+          {$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important
+      for $axis in $axes
+        .{$prefix}{$property[0]}-{$axis[0]}-{$spacing[0]}
+          {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important
+          {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important
+
+generateSpacings('', $spacer-x, $spacer-y)
 
 .m-x-auto
   margin-left: auto !important