From 71fa2c099db7de158c26044789581d40b8303290 Mon Sep 17 00:00:00 2001
From: olivewind <olive@olivewind.com>
Date: Fri, 12 Oct 2018 15:23:55 +0800
Subject: [PATCH] docs(*): style

---
 examples/plugins/codemirror/index.js          |  2 ++
 examples/view/components/code-block/index.vue | 19 +++++++++++++++++--
 .../view/components/code-reader/index.vue     |  7 ++++++-
 examples/view/components/demo-code/index.vue  | 12 ++++--------
 .../view/components/docs-section/index.vue    |  8 +++-----
 examples/view/components/docs-table/index.vue |  2 +-
 examples/view/components/docs-title/index.vue |  9 +++++----
 .../page/change-logs/change-log/index.vue     |  2 +-
 examples/view/page/components/index.vue       | 14 +++++---------
 examples/view/page/installation/index.vue     | 10 +++++-----
 10 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/examples/plugins/codemirror/index.js b/examples/plugins/codemirror/index.js
index 591e49074..a95666bd2 100644
--- a/examples/plugins/codemirror/index.js
+++ b/examples/plugins/codemirror/index.js
@@ -6,6 +6,8 @@ import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/css/css';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/monokai.css';
+import 'codemirror/theme/3024-day.css';
+
 
 Vue.use(VueCodemirror);
 
diff --git a/examples/view/components/code-block/index.vue b/examples/view/components/code-block/index.vue
index d6f5322d5..09b829fc9 100644
--- a/examples/view/components/code-block/index.vue
+++ b/examples/view/components/code-block/index.vue
@@ -23,6 +23,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    theme: {
+      type: String,
+      default: 'monokai',
+    },
   },
   data() {
     return {
@@ -35,7 +39,7 @@ export default {
         tabSize: 2,
         readOnly: this.readOnly,
         mode: 'text/x-vue',
-        theme: 'monokai',
+        theme: this.theme,
       };
       switch (this.type) {
         case 'vue':
@@ -69,10 +73,21 @@ export default {
 .code-block{
   .CodeMirror{
     height: auto;
-    padding: 6px 20px;
+    padding: 4px 8px;
   }
   .CodeMirror-line {
     font-family: SF Mono,Monaco,Inconsolata,Fira Mono,Droid Sans Mono,Source Code Pro,monospace !important;
   }
+  .cm-s-monokai{
+    background-color: #153656;
+  }
+  .cm-s-3024-day{
+    .cm-def{
+      color: #01a252;
+    }
+    span.cm-string{
+      color: rgb(102, 153, 0);
+    }
+  }
 }
 </style>
diff --git a/examples/view/components/code-reader/index.vue b/examples/view/components/code-reader/index.vue
index ad6269703..99eb7c59f 100644
--- a/examples/view/components/code-reader/index.vue
+++ b/examples/view/components/code-reader/index.vue
@@ -3,7 +3,8 @@
     <code-block
       :type="type"
       :readOnly="readOnly"
-      :code="code">
+      :code="code"
+      :theme="theme">
     </code-block>
   </div>
 </template>
@@ -24,6 +25,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    theme: {
+      type: String,
+      default: 'monokai',
+    },
   },
   data() {
     return {
diff --git a/examples/view/components/demo-code/index.vue b/examples/view/components/demo-code/index.vue
index 56a717707..19eabb0dd 100644
--- a/examples/view/components/demo-code/index.vue
+++ b/examples/view/components/demo-code/index.vue
@@ -30,19 +30,16 @@ export default {
 
 <style lang="scss" scoped>
 @import 'daoColor';
-$padding : 20px;
+$padding : 12px;
 
 .demo-code{
   border: 1px solid #ebebeb;
-  border-radius: 5px;
-  transition: .2s;
   border-radius: 4px;
+  transition: all .08s ease-in-out;
   overflow: hidden;
-  transition: all .1s ease-in-out;
   background-color: $white-light;
-  box-shadow: 0 1px 4px rgba(204, 209, 217, 0.3);
   .header{
-    padding: 10px $padding;
+    padding: $padding;
     cursor: pointer;
     user-select: none;
     font-size: 12px;
@@ -51,7 +48,6 @@ $padding : 20px;
     background-color: #1f4160;
     .header{
       color: #FFF;
-      font-weight: 600;
     }
   }
   .desc{
@@ -64,7 +60,7 @@ $padding : 20px;
     .wrap{
       padding: $padding;
       background-color: $white;
-      border-radius: 3px;
+      border-radius: 4px;
       box-shadow: 0 0 0 1px rgba(67,90,111,.146);
     }
   }
diff --git a/examples/view/components/docs-section/index.vue b/examples/view/components/docs-section/index.vue
index 7fb1b36a9..45d6d6f9d 100644
--- a/examples/view/components/docs-section/index.vue
+++ b/examples/view/components/docs-section/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="docs-section">
     <div class="title" slot="section-title" v-if="$slots['title']"><slot name="title"></slot></div>
-    <div class="helper" slot="section-title-helper"><slot name="helper"></slot></div>
+    <div class="helper" slot="section-title-helper" v-if="$slots.helper"><slot name="helper"></slot></div>
     <div class="content" slot="content" v-if="$slots.content"><slot name="content"></slot></div>
   </div>
 </template>
@@ -22,12 +22,10 @@ export default {
     font-weight: 500;
   }
   &>.helper{
-    padding: 6px 0;
-    color: $grey-dark;
-    border-bottom: 1px solid $white-dark;
+    padding: 5px 0;
   }
   &>.content{
-    padding: 20px 0;
+    padding: 10px 0;
     overflow: auto;
   }
 }
diff --git a/examples/view/components/docs-table/index.vue b/examples/view/components/docs-table/index.vue
index f77e50672..45625c4dd 100644
--- a/examples/view/components/docs-table/index.vue
+++ b/examples/view/components/docs-table/index.vue
@@ -140,7 +140,7 @@ export default {
     color: $blue;
   }
   .option{
-    width: 300px;
+    width: 100px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/examples/view/components/docs-title/index.vue b/examples/view/components/docs-title/index.vue
index a4394287e..0be60295b 100644
--- a/examples/view/components/docs-title/index.vue
+++ b/examples/view/components/docs-title/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="docs-title">
     <h2 :class="size">{{name}}</h2>
-    <div class="desc">
+    <div class="desc" v-if="$slots.content || desc">
       <slot name="desc">
-        <div v-if="desc"><md-reader>{{desc}}</md-reader></div>
+        <div><md-reader>{{desc}}</md-reader></div>
       </slot>
     </div>
   </div>
@@ -39,16 +39,17 @@ export default {
       font-size: 18px;
     }
     &.md{
-      font-size: 24px;
+      font-size: 22px;
     }
     &.lg{
-      font-size: 32px;
+      font-size: 28px;
     }
   }
   .desc{
     color: $grey-dark;
     font-size: 14px;
     font-weight: normal;
+    padding-top: 4px;
   }
 }
 </style>
diff --git a/examples/view/page/change-logs/change-log/index.vue b/examples/view/page/change-logs/change-log/index.vue
index cfa361b9d..f162c2e1a 100644
--- a/examples/view/page/change-logs/change-log/index.vue
+++ b/examples/view/page/change-logs/change-log/index.vue
@@ -29,7 +29,7 @@ export default {
   border-radius: 4px;
   padding: 20px;
   h2{
-    margin: 30px 0px 20px 0px;
+    margin: 20px 0px;
   }
   li{
     margin: 10px 0;
diff --git a/examples/view/page/components/index.vue b/examples/view/page/components/index.vue
index 3ff127b0b..be9bc6a94 100644
--- a/examples/view/page/components/index.vue
+++ b/examples/view/page/components/index.vue
@@ -94,23 +94,19 @@ export default {
       height: 100%;
       overflow: auto;
       width: 100%;
-      padding: 20px 10px;
+      padding: 20px;
       .view-wrap{
+        margin: 0 auto;
         @media (max-width: 768px) {
-          padding: 10px;
+          width: calc(100% - 40px);
         }
         @media (min-width: 768px) {
-         padding: 0px 40px;
+          width: calc(100% - 120px);
         }
         
         @media (min-width: 1100px) {
-          &.not-component{
-            width: 800px;
-            margin: 0 auto;
-          }
+          width: calc(100% - 300px);
         }
-         
-        margin: 0 auto;
         color: #5e6d82;
       }
     }
diff --git a/examples/view/page/installation/index.vue b/examples/view/page/installation/index.vue
index 31b7273a2..0dfa48617 100644
--- a/examples/view/page/installation/index.vue
+++ b/examples/view/page/installation/index.vue
@@ -4,23 +4,23 @@
     <docs-section>
       <template slot="title">1. {{$t('installationPage.use_npm')}}</template>
       <template slot="content">
-        <code-reader readOnly file="installation/demo-1.sh"></code-reader>
+        <code-reader readOnly theme="3024-day" file="installation/demo-1.sh"></code-reader>
         <br>
-        <code-reader readOnly type="javascript" file="installation/demo-4.js"></code-reader>
+        <code-reader readOnly theme="3024-day" type="javascript" file="installation/demo-4.js"></code-reader>
       </template>
     </docs-section>
      <docs-section>
       <template slot="title">2. {{$t('installationPage.use_html')}}</template>
       <template slot="content">
-        <code-reader readOnly file="installation/demo-2.html"></code-reader>
+        <code-reader readOnly theme="3024-day" file="installation/demo-2.html"></code-reader>
       </template>
     </docs-section>
      <docs-section>
       <template slot="title">
-        <docs-title :name="$t('installationPage.usage')" size="sm"></docs-title>
+        <docs-title :name="$t('installationPage.usage')" size="lg"></docs-title>
       </template>
       <template slot="content">
-        <code-reader readOnly file="installation/demo-3.vue"></code-reader>
+        <code-reader readOnly theme="3024-day" file="installation/demo-3.vue"></code-reader>
       </template>
     </docs-section>
   </div>