Add full responsive spacing (quasarframework#2586)

Author: pdanpdan

dev/components/css/size-addon.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="layout-padding">
+    <template v-for="b in bp">
+      <h5 :key="`h${ b }`">Breakpoint {{ b || 'NONE' }}</h5>
+      <div class="row items-center" :key="`h${ b }`">
+        <div class="box" v-for="s in sz" :key="`b${ b }-${ s }`">
+          <div :class="`q-pa${ b }-${ s } q-ma${ b }-${ s }`"/>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="stylus">
+  .box
+    position relative
+    display inline-flex
+    margin 2em
+    background rgba(255, 150, 0, .3)
+    width 200px
+    height 200px
+    div
+      flex 1 1 100%
+      background rgba(0, 200, 0, .3)
+      &:before
+        content ''
+        display block
+        width 100%
+        height 100%
+        background rgba(0, 0, 255, .3)
+      &:after
+        content attr(class)
+        position absolute
+        bottom 0
+        left 0
+        right 0
+        transform translateY(100%)
+        padding .5em
+        background rgba(100, 100, 100, .1)
+        text-align center
+
+</style>
+
+<script>
+export default {
+  data () {
+    return {
+      bp: ['', '-xs', '-sm', '-md', '-lg', '-xl'],
+      sz: ['xs', 'sm', 'md', 'lg', 'xl']
+    }
+  },
+  created () {
+    import('./flex-addon.styl')
+  }
+}
+</script>

src/css/flex-addon.styl

@@ -23,6 +23,50 @@ fg($name, $size)
     $column-{$name}-reverse
       flex-direction column-reverse
 
+    for $space, $value in $spaces
+      .q-pa{$name}-{$space}
+        padding: $value.y $value.x
+      .q-pl{$name}-{$space}
+        padding-left: $value.x
+      .q-pr{$name}-{$space}
+        padding-right: $value.x
+      .q-pt{$name}-{$space}
+        padding-top: $value.y
+      .q-pb{$name}-{$space}
+        padding-bottom: $value.y
+      .q-px{$name}-{$space}
+        @extends .q-pl{$name}-{$space}, .q-pr{$name}-{$space}
+      .q-py{$name}-{$space}
+        @extends .q-pt{$name}-{$space}, .q-pb{$name}-{$space}
+      .q-ma{$name}-{$space}
+        margin: $value.y $value.x
+      .q-ml{$name}-{$space}
+        margin-left: $value.x
+      .q-mr{$name}-{$space}
+        margin-right: $value.x
+      .q-mt{$name}-{$space}
+        margin-top: $value.y
+      .q-mb{$name}-{$space}
+        margin-bottom: $value.y
+      .q-mx{$name}-{$space}
+        @extends .q-ml{$name}-{$space}, .q-mr{$name}-{$space}
+      .q-my{$name}-{$space}
+        @extends .q-mt{$name}-{$space}, .q-mb{$name}-{$space}
+
+    .q-ml{$name}-auto
+      margin-left auto
+    .q-mr{$name}-auto
+      margin-right auto
+    .q-mx{$name}-auto
+      @extends .q-ml{$name}-auto, .q-mr{$name}-auto
+
+    .q-my-{$name}-form:not(.q-if-full-width)
+      margin-top $input-margin-top
+      margin-bottom $input-margin-bottom
+      &.q-if-dense
+        margin-top $input-dense-margin-top
+        margin-bottom $input-dense-margin-bottom
+
     .row, .column, .flex
       if $noProcNotZero
         {fr('&.inline<name>', $name)}