refactor($theme-default): use stylus instead of native css in style tag (#1933)

Author: yoshinorin

packages/@vuepress/theme-default/components/Page.vue

@@ -22,10 +22,10 @@ export default {
 </script>
 
 <style lang="stylus">
-@require '../styles/wrapper.styl';
+@require '../styles/wrapper.styl'
+
+.page
+  padding-bottom 2rem
+  display block
 
-.page {
-  padding-bottom: 2rem;
-  display: block;
-}
 </style>

packages/@vuepress/theme-default/components/PageEdit.vue

@@ -95,50 +95,36 @@ export default {
 }
 </script>
 <style lang="stylus">
-@require '../styles/wrapper.styl';
+@require '../styles/wrapper.styl'
+
+.page-edit
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom 1rem
+  overflow auto
+
+  .edit-link
+    display inline-block
+    a
+      color lighten($textColor, 25%)
+      margin-right 0.25rem
+  .last-updated
+    float right
+    font-size 0.9em
+    .prefix
+      font-weight 500
+      color lighten($textColor, 25%)
+    .time
+      font-weight 400
+      color #aaa
+
+@media (max-width: $MQMobile)
+  .page-edit
+    .edit-link
+      margin-bottom 0.5rem
+    .last-updated
+      font-size 0.8em
+      float none
+      text-align left
 
-.page-edit {
-  @extend $wrapper;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  overflow: auto;
-
-  .edit-link {
-    display: inline-block;
-
-    a {
-      color: lighten($textColor, 25%);
-      margin-right: 0.25rem;
-    }
-  }
-
-  .last-updated {
-    float: right;
-    font-size: 0.9em;
-
-    .prefix {
-      font-weight: 500;
-      color: lighten($textColor, 25%);
-    }
-
-    .time {
-      font-weight: 400;
-      color: #aaa;
-    }
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .page-edit {
-    .edit-link {
-      margin-bottom: 0.5rem;
-    }
-
-    .last-updated {
-      font-size: 0.8em;
-      float: none;
-      text-align: left;
-    }
-  }
-}
 </style>

packages/@vuepress/theme-default/components/PageNav.vue

@@ -99,23 +99,19 @@ function flatten (items, res) {
 }
 </script>
 <style lang="stylus">
-@require '../styles/wrapper.styl';
+@require '../styles/wrapper.styl'
+
+.page-nav
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom 0
+  .inner
+    min-height 2rem
+    margin-top 0
+    border-top 1px solid $borderColor
+    padding-top 1rem
+    overflow auto // clear float
+  .next
+    float right
 
-.page-nav {
-  @extend $wrapper;
-  padding-top: 1rem;
-  padding-bottom: 0;
-
-  .inner {
-    min-height: 2rem;
-    margin-top: 0;
-    border-top: 1px solid $borderColor;
-    padding-top: 1rem;
-    overflow: auto; // clear float
-  }
-
-  .next {
-    float: right;
-  }
-}
 </style>