QStepper: allow imbricated QSteppers with different orientation (quasarframework#2624)

close quasarframework#2620

Author: pdanpdan

dev/components/components/stepper.vue

@@ -88,6 +88,50 @@
           </q-stepper-navigation>
         </q-step>
       </q-stepper>
+
+      <q-stepper class="q-my-md" :no-header-navigation="!backnav" :alternative-labels="alt" :contractable="contractable">
+        <q-step default title="First Step" subtitle="Here we go">
+          <q-stepper vertical :no-header-navigation="!backnav" :alternative-labels="alt" :contractable="contractable">
+            <q-step default title="First Step" subtitle="Here we go">
+              ...Step content, components, ...
+            </q-step>
+            <q-step title="Step 2">...</q-step>
+            <q-step title="Step 3" subtitle="Review and submit">...</q-step>
+            <q-stepper-navigation>
+              <q-btn :color="color" flat >Back</q-btn>
+              <q-btn :color="color" class="q-ml-sm">Next</q-btn>
+            </q-stepper-navigation>
+          </q-stepper>
+        </q-step>
+        <q-step title="Step 2">...</q-step>
+        <q-step title="Step 3" subtitle="Review and submit">...</q-step>
+        <q-stepper-navigation>
+          <q-btn :color="color" flat >Back</q-btn>
+          <q-btn :color="color" class="q-ml-sm">Next</q-btn>
+        </q-stepper-navigation>
+      </q-stepper>
+
+      <q-stepper vertical class="q-my-md" :no-header-navigation="!backnav" :alternative-labels="alt" :contractable="contractable">
+        <q-step default title="First Step" subtitle="Here we go">
+          <q-stepper :no-header-navigation="!backnav" :alternative-labels="alt" :contractable="contractable">
+            <q-step default title="First Step" subtitle="Here we go">
+              ...Step content, components, ...
+            </q-step>
+            <q-step title="Step 2">...</q-step>
+            <q-step title="Step 3" subtitle="Review and submit">...</q-step>
+            <q-stepper-navigation>
+              <q-btn :color="color" flat >Back</q-btn>
+              <q-btn :color="color" class="q-ml-sm">Next</q-btn>
+            </q-stepper-navigation>
+          </q-stepper>
+        </q-step>
+        <q-step title="Step 2">...</q-step>
+        <q-step title="Step 3" subtitle="Review and submit">...</q-step>
+        <q-stepper-navigation>
+          <q-btn :color="color" flat >Back</q-btn>
+          <q-btn :color="color" class="q-ml-sm">Next</q-btn>
+        </q-stepper-navigation>
+      </q-stepper>
     </div>
   </div>
 </template>

src/components/stepper/stepper.ios.styl

@@ -73,86 +73,87 @@
 .q-stepper-step-content
   color black
 
-.q-stepper-horizontal
-  .q-stepper-step-inner
-    padding 24px
+.q-stepper-horizontal >
+  .q-stepper-header
+    .q-stepper-tab
+      overflow hidden
+    .q-stepper-first .q-stepper-dot:before,
+    .q-stepper-last .q-stepper-label:after,
+    .q-stepper-last .q-stepper-dot:after
+      display none
+    .q-stepper-line
+      &:before, &:after
+        position absolute
+        top 50%
+        height 1px
+        width 100vw
+        background $stepper-divider-color
+    .q-stepper-label:after, .q-stepper-dot:after
+      content ''
+      left 100%
+      margin-left 8px
+    .q-stepper-dot:before
+      content ''
+      right 100%
+      margin-right 8px
   .q-stepper-nav
     margin 0 16px 8px
-  .q-stepper-step .q-stepper-nav
-    margin 16px 0 0
-    > div.col
-      display none
-
-  .q-stepper-first .q-stepper-dot:before,
-  .q-stepper-last .q-stepper-label:after,
-  .q-stepper-last .q-stepper-dot:after
-    display none
-  .q-stepper-tab
-    overflow hidden
-  .q-stepper-line
-    &:before, &:after
-      position absolute
-      top 50%
-      height 1px
-      width 100vw
-      background $stepper-divider-color
-  .q-stepper-label:after, .q-stepper-dot:after
-    content ''
-    left 100%
-    margin-left 8px
-  .q-stepper-dot:before
-    content ''
-    right 100%
-    margin-right 8px
+  .q-stepper-step
+    .q-stepper-nav
+      margin 16px 0 0
+      > div.col
+        display none
+    > .q-stepper-step-content > .q-stepper-step-inner
+      padding 24px
 
 .q-stepper-vertical
   padding 8px 0 18px
-  .q-stepper-tab
-    padding 12px 16px
-  .q-stepper-label
-    padding-top 4px
-  .q-stepper-title
-    line-height 18px
-  .q-stepper-step-inner
-    padding 0 24px 24px 48px
+.q-stepper-vertical >
   .q-stepper-nav
     margin-top 16px
     > div.col
       display none
-
-  .q-stepper-first .q-stepper-dot:before,
-  .q-stepper-last .q-stepper-dot:after
-    display none
   .q-stepper-step
     overflow hidden
-  .q-stepper-dot
-    &:before, &:after
-      content ''
-      position absolute
-      left 50%
-      width 1px
-      height 100vh
-      background $stepper-divider-color
-  .q-stepper-dot:before
-    bottom 100%
-    margin-bottom 8px
-  .q-stepper-dot:after
-    top 100%
-    margin-top 8px
+    > .q-stepper-step-content > .q-stepper-step-inner
+      padding 0 24px 24px 48px
+    > .q-stepper-tab
+      padding 12px 16px
+      .q-stepper-dot
+        &:before, &:after
+          content ''
+          position absolute
+          left 50%
+          width 1px
+          height 100vh
+          background $stepper-divider-color
+      .q-stepper-dot:before
+        bottom 100%
+        margin-bottom 8px
+      .q-stepper-dot:after
+        top 100%
+        margin-top 8px
+      .q-stepper-label
+        padding-top 4px
+        .q-stepper-title
+          line-height 18px
+      &.q-stepper-first .q-stepper-dot:before,
+      &.q-stepper-last .q-stepper-dot:after
+        display none
 
 body.desktop .q-stepper-tab.step-navigation:hover
   background $stepper-hover-background
 
 @media (max-width $breakpoint-sm-max)
-  .q-stepper-horizontal.q-stepper-contractable
+  .q-stepper-horizontal.q-stepper-contractable >
     .q-stepper-header
       min-height 72px
-    .q-stepper-tab
-      padding 24px 0
-    .q-stepper-tab:not(:last-child)
-      .q-stepper-dot:after
-        display block !important
-    .q-stepper-dot
-      margin 0
-    .q-stepper-label
-      display none
+      .q-stepper-tab
+        padding 24px 0
+        &:not(:last-child)
+          .q-stepper-dot:after
+            display block !important
+      .q-stepper-dot
+        margin 0
+      .q-stepper-label
+        display none

src/components/stepper/stepper.mat.styl

@@ -71,86 +71,87 @@
 .q-stepper-step-content
   color black
 
-.q-stepper-horizontal
-  .q-stepper-step-inner
-    padding 24px
+.q-stepper-horizontal >
+  .q-stepper-header
+    .q-stepper-tab
+      overflow hidden
+    .q-stepper-first .q-stepper-dot:before,
+    .q-stepper-last .q-stepper-label:after,
+    .q-stepper-last .q-stepper-dot:after
+      display none
+    .q-stepper-line
+      &:before, &:after
+        position absolute
+        top 50%
+        height 1px
+        width 100vw
+        background $stepper-divider-color
+    .q-stepper-label:after, .q-stepper-dot:after
+      content ''
+      left 100%
+      margin-left 8px
+    .q-stepper-dot:before
+      content ''
+      right 100%
+      margin-right 8px
   .q-stepper-nav
     margin 0 16px 8px
-  .q-stepper-step .q-stepper-nav
-    margin 16px 0 0
-    > div.col
-      display none
-
-  .q-stepper-first .q-stepper-dot:before,
-  .q-stepper-last .q-stepper-label:after,
-  .q-stepper-last .q-stepper-dot:after
-    display none
-  .q-stepper-tab
-    overflow hidden
-  .q-stepper-line
-    &:before, &:after
-      position absolute
-      top 50%
-      height 1px
-      width 100vw
-      background $stepper-divider-color
-  .q-stepper-label:after, .q-stepper-dot:after
-    content ''
-    left 100%
-    margin-left 8px
-  .q-stepper-dot:before
-    content ''
-    right 100%
-    margin-right 8px
+  .q-stepper-step
+    .q-stepper-nav
+      margin 16px 0 0
+      > div.col
+        display none
+    > .q-stepper-step-content > .q-stepper-step-inner
+      padding 24px
 
 .q-stepper-vertical
   padding 8px 0 18px
-  .q-stepper-tab
-    padding 12px 16px
-  .q-stepper-label
-    padding-top 4px
-  .q-stepper-title
-    line-height 18px
-  .q-stepper-step-inner
-    padding 0 24px 24px 48px
+.q-stepper-vertical >
   .q-stepper-nav
     margin-top 16px
     > div.col
       display none
-
-  .q-stepper-first .q-stepper-dot:before,
-  .q-stepper-last .q-stepper-dot:after
-    display none
   .q-stepper-step
     overflow hidden
-  .q-stepper-dot
-    &:before, &:after
-      content ''
-      position absolute
-      left 50%
-      width 1px
-      height 100vh
-      background $stepper-divider-color
-  .q-stepper-dot:before
-    bottom 100%
-    margin-bottom 8px
-  .q-stepper-dot:after
-    top 100%
-    margin-top 8px
+    > .q-stepper-step-content > .q-stepper-step-inner
+      padding 0 24px 24px 48px
+    > .q-stepper-tab
+      padding 12px 16px
+      .q-stepper-dot
+        &:before, &:after
+          content ''
+          position absolute
+          left 50%
+          width 1px
+          height 100vh
+          background $stepper-divider-color
+      .q-stepper-dot:before
+        bottom 100%
+        margin-bottom 8px
+      .q-stepper-dot:after
+        top 100%
+        margin-top 8px
+      .q-stepper-label
+        padding-top 4px
+        .q-stepper-title
+          line-height 18px
+      &.q-stepper-first .q-stepper-dot:before,
+      &.q-stepper-last .q-stepper-dot:after
+        display none
 
 body.desktop .q-stepper-tab.step-navigation:hover
   background $stepper-hover-background
 
 @media (max-width $breakpoint-sm-max)
-  .q-stepper-horizontal.q-stepper-contractable
+  .q-stepper-horizontal.q-stepper-contractable >
     .q-stepper-header
       min-height 72px
-    .q-stepper-tab
-      padding 24px 0
-    .q-stepper-tab:not(:last-child)
-      .q-stepper-dot:after
-        display block !important
-    .q-stepper-dot
-      margin 0
-    .q-stepper-label
-      display none
+      .q-stepper-tab
+        padding 24px 0
+        &:not(:last-child)
+          .q-stepper-dot:after
+            display block !important
+      .q-stepper-dot
+        margin 0
+      .q-stepper-label
+        display none