feat(ui): New StepWizard frame style

vuejs · Mar 10, 2018 · 921e99f · 921e99f
1 parent e20e21d
commit 921e99f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/packages/@vue/cli-ui/src/components/StatusBar.vue b/packages/@vue/cli-ui/src/components/StatusBar.vue
@@ -112,8 +112,12 @@ export default {
       if (this.$route.name === 'project-select') {
         this.$router.push(lastRoute || { name: 'home' })
       } else {
-        const { name, params, query } = this.$route
-        lastRoute = { name, params, query }
+        if (this.$route.name === 'project-create') {
+          lastRoute = null
+        } else {
+          const { name, params, query } = this.$route
+          lastRoute = { name, params, query }
+        }
         this.$router.push({ name: 'project-select' })
       }
     },

diff --git a/packages/@vue/cli-ui/src/components/StepWizard.vue b/packages/@vue/cli-ui/src/components/StepWizard.vue
@@ -7,7 +7,9 @@
   >
     <div class="shell">
       <div class="header">
-        <div v-if="title" class="title">{{ title }}</div>
+        <div class="content">
+          <div v-if="title" class="title">{{ title }}</div>
+        </div>
       </div>
 
       <VueTabs
@@ -65,10 +67,19 @@ export default {
     v-box()
     height 100%
 
+  .header
+    .content
+      margin 0 auto
+
   .main-tabs
     height 100%
     flex auto 1 1
 
+  >>> .vue-tab
+    margin 0 auto
+    padding $padding-item $padding-item 0
+    box-sizing border-box
+
   .header,
   >>> .tabs
     background $vue-color-light-neutral
@@ -84,6 +95,7 @@ export default {
   >>> .vue-tab-content
     overflow-y hidden
     v-box()
+    margin 0 auto
 
     > .content
       flex 100% 1 1
@@ -107,10 +119,11 @@ export default {
 
   &.frame
     margin 0 auto
-    padding $padding-item
-    max-width 1200px
+    $max-width = 1200px
     .shell
-      border solid 1px $vue-color-light-neutral
-      border-radius $br
+      background $color-light-background
+    .header .content,
+    >>> .vue-tab
+      max-width $max-width
 
 </style>