feat: show all styles in source code

one/docs/demo/accordion/multiple.vue

@@ -22,7 +22,8 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped docs>
-section
-  margin-bottom 20px
+<style scoped>
+section {
+  margin-bottom: 20px;
+}
 </style>

one/docs/demo/accordion/size.vue

@@ -34,7 +34,8 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped docs>
-section
-  margin-bottom 20px
+<style scoped>
+section {
+  margin-bottom: 20px;
+}
 </style>

one/docs/demo/alert-box/title.vue

@@ -55,10 +55,11 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 10px;
 }
+
 .icon {
   vertical-align: -2px;
 }

one/docs/demo/alert-box/type.vue

@@ -60,7 +60,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 10px;
 }

one/docs/demo/alert/type.vue

@@ -26,7 +26,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-alert {
   margin-bottom: 20px;
 }

one/docs/demo/anchor/offset.vue

@@ -71,7 +71,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .anchor-offset-demo {
   position: relative;
 
@@ -80,7 +80,8 @@ export default {
     position: absolute;
     top: 20px;
     width: 180px;
-    border-top: 1px solid red;;
+    border-top: 1px solid red;
+
     &::after {
       content: "targetOffset: 20px";
       position: absolute;
@@ -90,9 +91,11 @@ export default {
       font-size: 12px;
     }
   }
+
   .sticky-offset-line {
     top: 30px;
     left: 250px;
+
     &::after {
       content: "stickyOffset: 30px";
     }
@@ -117,10 +120,12 @@ export default {
     width: 100px;
     height: 150px;
     flex: none;
+
     & + .block {
       margin-top: 20px;
     }
   }
+
   .anchor-two {
     position: absolute;
     left: 250px;

one/docs/demo/anchor/sticky.vue

@@ -77,14 +77,16 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .anchor-demo {
   position: relative;
+
   .line {
     position: absolute;
     top: 0;
     width: 180px;
     border-top: 1px solid red;;
+
     &::after {
       content: "0";
       position: absolute;
@@ -114,6 +116,7 @@ export default {
     width: 100px;
     height: 150px;
     flex: none;
+
     & + .block {
       margin-top: 20px;
     }
@@ -124,6 +127,7 @@ export default {
     left: 250px;
     top: 50px;
   }
+
   .anchor-two {
     position: absolute;
     left: 450px;

one/docs/demo/badge/dot.vue

@@ -32,7 +32,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/badge/number.vue

@@ -46,7 +46,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-badge {
   margin-right: 2em;
 }

one/docs/demo/badge/text.vue

@@ -41,7 +41,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-badge {
   & + & {
     margin-left: 2em;

one/docs/demo/breadcrumb/redirect.vue

@@ -48,7 +48,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-breadcrumb:first-child {
   margin-bottom: 20px;
 }

one/docs/demo/breadcrumb/separator.vue

@@ -42,7 +42,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-breadcrumb:first-child {
   margin-bottom: 20px;
 }

one/docs/demo/breadcrumb/size.vue

@@ -40,7 +40,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/breadcrumb/style.vue

@@ -40,7 +40,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/button-group/disabled.vue

@@ -61,7 +61,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/button-group/items.vue

@@ -28,7 +28,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button-group {
   margin-right: 1em;
 }

one/docs/demo/button-group/size.vue

@@ -34,7 +34,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button-group {
   margin-right: 1em;
 }

one/docs/demo/button-group/style.vue

@@ -38,7 +38,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/button/disabled.vue

@@ -87,7 +87,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/button/loading.vue

@@ -87,7 +87,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/button/size.vue

@@ -28,7 +28,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 1em;
 }

one/docs/demo/button/style.vue

@@ -47,7 +47,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 1em;
 }

one/docs/demo/calendar/range-multiple.vue

@@ -54,7 +54,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 article {
   overflow: hidden;
 }

one/docs/demo/carousel/effect.vue

@@ -56,7 +56,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 h4 {
   margin: 0 0 10px;
 }

one/docs/demo/carousel/indicator.vue

@@ -64,27 +64,28 @@ export default {
       indicatorPosition: 'inside',
       align: 'start',
       indicators: [
-        { label: 'Bar', value: 'bar' },
-        { label: 'Number', value: 'number' },
-        { label: 'Dot', value: 'dot' },
-        { label: 'None', value: 'none' }
+        { label: 'bar', value: 'bar' },
+        { label: 'number', value: 'number' },
+        { label: 'dot', value: 'dot' },
+        { label: 'none', value: 'none' }
       ],
       alignments: [
-        { value: 'start', label: 'start' },
-        { value: 'end', label: 'end' }
+        { label: 'start', value: 'start' },
+        { label: 'end', value: 'end' }
       ],
       positions: [
-        { label: 'Inside', value: 'inside' },
-        { label: 'Outside', value: 'outside' }
+        { label: 'inside', value: 'inside' },
+        { label: 'outside', value: 'outside' }
       ]
     }
   }
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 h4 {
   margin: 0 0 10px;
+
   &:not(:first-child) {
     margin-top: 10px;
   }

one/docs/demo/carousel/slides.vue

@@ -65,7 +65,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 h4 {
   margin: 0 0 10px;
 }

one/docs/demo/carousel/switch.vue

@@ -53,7 +53,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 h4 {
   margin: 0 0 10px;
 }

one/docs/demo/carousel/vertical.vue

@@ -58,7 +58,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 h4 {
   margin: 0 0 10px;
 }

one/docs/demo/cascader/multiple.vue

@@ -1,32 +1,52 @@
 <template>
 <article>
   <section class="cascader-config">
-    <veui-checkbox ui="s" v-model="clearable2">Clearable</veui-checkbox>
-    <veui-checkbox ui="s" v-model="showSelectAll2">ShowSelectAll</veui-checkbox>
+    <veui-checkbox
+      v-model="clearable2"
+      ui="s"
+    >
+      Clearable
+    </veui-checkbox>
+    <veui-checkbox
+      v-model="showSelectAll2"
+      ui="s"
+    >
+      ShowSelectAll
+    </veui-checkbox>
     <veui-radio
       v-model="trigger2"
       ui="s"
       value="click"
       name="columnTrigger2"
-    >click to expand</veui-radio>
+    >
+      click to expand
+    </veui-radio>
     <veui-radio
       v-model="trigger2"
       ui="s"
       value="hover"
       name="columnTrigger2"
-    >hover to expand</veui-radio>
+    >
+      hover to expand
+    </veui-radio>
     <label>
       Max:
-      <veui-number-input ui="s" v-model="max2"/>
+      <veui-number-input
+        v-model="max2"
+        ui="s"
+      />
     </label>
     <label>
       columnWidth:
-      <veui-input ui="s" v-model="columnWidth2"/>
+      <veui-input
+        v-model="columnWidth2"
+        ui="s"
+      />
     </label>
   </section>
   <veui-cascader
-    class="mt-3p"
     v-model="value2"
+    class="mt-3p"
     :options="options"
     :searchable="searchable2"
     :column-trigger="trigger2"
@@ -178,7 +198,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .cascader-config {
   display: flex;
   align-items: center;

one/docs/demo/cascader/size.vue

@@ -141,13 +141,14 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .cascader-wrap {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+}
+
 .veui-cascader + .veui-cascader {
   margin-top: 12px;
 }
-}
 </style>

one/docs/demo/check-button-group/default.vue

@@ -54,7 +54,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/check-button-group/exclusive.vue

@@ -51,7 +51,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/checkbox-group/default.vue

@@ -54,7 +54,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/checkbox-group/exclusive.vue

@@ -51,7 +51,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/checkbox/size.vue

@@ -48,10 +48,12 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped docs>
-.veui-checkbox
-  & + &
-    margin-left 20px
+<style lang="less" scoped>
+.veui-checkbox {
+  & + & {
+    margin-left: 20px;
+  }
+}
 </style>
 
 <docs>

one/docs/demo/collapse/size.vue

@@ -28,7 +28,8 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped docs>
-section
-  margin-bottom 20px
+<style lang="less" scoped>
+section {
+  margin-bottom: 20px;
+}
 </style>

one/docs/demo/date-picker/default.vue

@@ -33,7 +33,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section:not(:last-child) {
   margin-bottom: 20px;
 }

one/docs/demo/date-picker/range.vue

@@ -35,7 +35,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section:not(:last-child) {
   margin-bottom: 20px;
 }

one/docs/demo/dialog/async.vue

@@ -106,7 +106,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 article > .veui-button {
   margin-right: 20px;
 }

one/docs/demo/dialog/custom.vue

@@ -66,7 +66,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 20px;
 }

one/docs/demo/dialog/draggable.vue

@@ -31,7 +31,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 20px;
 }

one/docs/demo/dialog/modal.vue

@@ -57,7 +57,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 20px;
 }

one/docs/demo/dialog/size.vue

@@ -59,7 +59,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 20px;
 }

one/docs/demo/dialog/stack.vue

@@ -47,7 +47,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 20px;
 }

one/docs/demo/dialog/status.vue

@@ -4,8 +4,15 @@
     <veui-button @click="aOpen = true">
       Open Dialog
     </veui-button>
-    <veui-checkbox v-model="loading">Loading</veui-checkbox>
-    <veui-checkbox class="ml-3p" v-model="disabled">Disabled</veui-checkbox>
+    <veui-checkbox v-model="loading">
+      Loading
+    </veui-checkbox>
+    <veui-checkbox
+      v-model="disabled"
+      class="ml-3p"
+    >
+      Disabled
+    </veui-checkbox>
   </div>
   <veui-dialog
     :open.sync="aOpen"
@@ -37,7 +44,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 20px;
 }

one/docs/demo/directives/drag/axis.vue

@@ -27,16 +27,15 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
-@import "~veui-theme-dls/lib.less";
-
+<style lang="less" scoped>
 article {
   height: 200px;
 }
 
 .target {
-  .size(80px);
-  background: @veui-gray-color-6;
+  width: 80px;
+  height: 80px;
+  background: #e7e7e7;
   display: inline-flex;
   margin-right: 40px;
   align-items: center;
@@ -45,7 +44,8 @@ article {
 }
 
 .container {
-  .size(100%, 300px);
-  background: @veui-gray-color-8;
+  width: 100%;
+  height: 300px;
+  background: #f7f7f7;
 }
 </style>

one/docs/demo/directives/drag/base.vue

@@ -18,11 +18,11 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
-@import "~veui-theme-dls/lib.less";
+<style lang="less" scoped>
 
 .target {
-  .size(80px);
+  width: 80px;
+  height: 80px;
   background: @veui-gray-color-6;
 }
 </style>

one/docs/demo/directives/drag/containment.vue

@@ -23,16 +23,16 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
-@import "~veui-theme-dls/lib.less";
-
+<style lang="less" scoped>
 .target {
-  .size(80px);
-  background: @veui-gray-color-6;
+  width: 80px;
+  height: 80px;
+  background: #e7e7e7;
 }
 
 .container {
-  .size(100%, 300px);
-  background: @veui-gray-color-8;
+  width: 100%;
+  height: 300px;
+  background: #f7f7f7;
 }
 </style>

one/docs/demo/directives/drag/targets.vue

@@ -28,12 +28,11 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
-@import "~veui-theme-dls/lib.less";
-
+<style lang="less" scoped>
 .target {
-  .size(80px);
-  background: @veui-gray-color-6;
+  width: 80px;
+  height: 80px;
+  background: #e7e7e7;
   display: inline-flex;
   margin-right: 40px;
   align-items: center;
@@ -42,7 +41,8 @@ export default {
 }
 
 .container {
-  .size(100%, 300px);
-  background: @veui-gray-color-8;
+  width: 100%;
+  height: 300px;
+  background: #f7f7f7;
 }
 </style>

one/docs/demo/directives/nudge.vue

@@ -45,19 +45,18 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
-@import "~veui-theme-dls/lib.less";
-
+<style lang="less" scoped>
 article {
   display: flex;
 }
 
 .box {
-  .size(200px, 50px);
+  width: 200px;
+  height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid @veui-gray-color-5;
+  border: 1px solid #dbdbdb;
   background: #fff;
   margin-right: 40px;
   user-select: none;
@@ -67,7 +66,7 @@ article {
   line-height: 1;
 
   &:focus {
-    background-color: @veui-gray-color-6;
+    background-color: #e7e7e7;
   }
 }
 

one/docs/demo/directives/outside/click.vue

@@ -36,12 +36,11 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
-@import "~veui-theme-dls/lib.less";
-
+<style lang="less" scoped>
 .box {
-  .size(500px, 100px);
-  background: @veui-gray-color-8;
+  width: 500px;
+  height: 100px;
+  background: #f7f7f7;
   display: flex;
   align-items: center;
   justify-content: center;

one/docs/demo/directives/outside/hover-with-delay.vue

@@ -43,14 +43,13 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
-@import "~veui-theme-dls/lib.less";
-
+<style lang="less" scoped>
 .box1,
 .box2,
 .box3 {
-  .size(200px, 100px);
-  background: @veui-gray-color-8;
+  width: 200px;
+  height: 100px;
+  background: #f7f7f7;
   margin-right: 30px;
   display: inline-flex;
   align-items: center;

one/docs/demo/directives/outside/hover.vue

@@ -31,12 +31,11 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
-@import "~veui-theme-dls/lib.less";
-
+<style lang="less" scoped>
 .box {
-  .size(500px, 100px);
-  background: @veui-gray-color-8;
+  width: 500px;
+  height: 100px;
+  background: #f7f7f7;
   display: flex;
   align-items: center;
   justify-content: center;

one/docs/demo/directives/resize.vue

@@ -86,7 +86,7 @@ export default {
 }
 </script>
 
-<style lang="less" docs scoped>
+<style lang="less" scoped>
 .demo {
   height: 50px;
   line-height: 50px;

one/docs/demo/directives/tooltip.vue

@@ -39,7 +39,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button + .veui-button {
   margin-left: 8px;
 }

one/docs/demo/drawer/custom.vue

@@ -66,7 +66,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 20px;
 }

one/docs/demo/drawer/modal.vue

@@ -57,7 +57,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-button {
   margin-right: 20px;
 }

one/docs/demo/dropdown/disable.vue

@@ -98,7 +98,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-dropdown {
   margin-left: 1em;
 }

one/docs/demo/dropdown/other.vue

@@ -122,9 +122,10 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .container {
   margin-bottom: 1em;
+
   .veui-dropdown {
     margin-left: 1em;
   }

one/docs/demo/dropdown/searchable.vue

@@ -161,7 +161,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-dropdown {
   margin-left: 1em;
 }

one/docs/demo/dropdown/size.vue

@@ -64,7 +64,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-dropdown {
   max-width: 120px;
   margin-right: 10px;

one/docs/demo/dropdown/style.vue

@@ -50,7 +50,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-dropdown {
   & + & {
     margin-left: 1em;

one/docs/demo/embedded/size.vue

@@ -43,7 +43,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/filter-panel/default.vue

@@ -56,7 +56,7 @@ export default {
 }
 </script>
 
-<style lang="less" docs scoped>
+<style lang="less" scoped>
 .item {
   padding: 8px 15px;
 }

one/docs/demo/focus-visible.vue

@@ -6,29 +6,29 @@
 </article>
 </template>
 
-<style lang="stylus" scoped docs>
-p
-  margin-bottom 1em
-
-button
-  width 120px
-  height 36px
-  margin-right 1em
-  background #fff
-  border solid 1px #999
-  padding 3px 6px
-  text-align center
-  transition background-color 0.3s
-
-  &:hover
-    background-color #f8f8f8
-
-  &:active
-    background-color #eee
-</style>
-
 <style lang="less" scoped>
+p {
+  margin-bottom: 1em;
+}
+
 button {
+  width: 120px;
+  height: 36px;
+  margin-right: 1em;
+  background: #fff;
+  border: solid 1px #999;
+  padding: 3px 6px;
+  text-align: center;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #f8f8f8;
+  }
+
+  &:active {
+    background-color: #eee;
+  }
+
   &:focus {
     outline: 2px solid #eee;
   }

one/docs/demo/form/disabled.vue

@@ -37,7 +37,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/form/readonly.vue

@@ -37,7 +37,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/grid/default.vue

@@ -69,9 +69,7 @@ export default {
     margin: 2px 0; /* Just for showcase */
   }
 }
-</style>
 
-<style lang="less" scoped docs>
 .content {
   background-color: #eee;
   height: 100%;

one/docs/demo/grid/fixed.vue

@@ -60,9 +60,7 @@ article {
     margin: 2px 0; /* Just for showcase */
   }
 }
-</style>
 
-<style lang="less" scoped docs>
 .content {
   background-color: #eee;
   height: 100%;

one/docs/demo/icon/default.vue

@@ -31,13 +31,13 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 article {
   overflow: hidden;
 }
 
 .item {
-  @grid-size: 128px;
+  @grid-size: 120px;
   float: left;
   width: @grid-size;
   height: calc(@grid-size + 3em);
@@ -51,7 +51,7 @@ article {
     font-size: 1.5em;
     line-height: @grid-size;
     border-radius: 4px;
-    transition: border-color .2s;
+    transition: border-color 0.2s;
 
     &:hover {
       border-color: #ccc;

one/docs/demo/input-group/default.vue

@@ -119,7 +119,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/input/disabled.vue

@@ -53,7 +53,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/input/readonly.vue

@@ -53,7 +53,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/input/size.vue

@@ -32,7 +32,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 1em;
 }

one/docs/demo/label/default.vue

@@ -44,7 +44,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/lightbox/default.vue

@@ -3,18 +3,24 @@
   <div>
     <veui-check-box
       v-model="wrap"
-    >循环播放</veui-check-box>
+    >
+      循环播放
+    </veui-check-box>
     <veui-check-box
       v-model="indicator"
       true-value="number"
       false-value="none"
-    >头部页码</veui-check-box>
+    >
+      头部页码
+    </veui-check-box>
   </div>
   <veui-button
     class="mt-3p"
     ui="primary"
     @click="open = true"
-  >展现灯箱</veui-button>
+  >
+    展现灯箱
+  </veui-button>
   <veui-lightbox
     :open.sync="open"
     :datasource="items"
@@ -73,10 +79,11 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-checkbox {
   margin-right: 15px;
 }
+
 .mt-3p {
   margin-top: 12px;
 }

one/docs/demo/link/default.vue

@@ -44,7 +44,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 h4 {
   margin-top: 0;
 }

one/docs/demo/loading/layout.vue

@@ -22,7 +22,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .container {
   display: flex;
   align-items: flex-end;

one/docs/demo/loading/size.vue

@@ -76,14 +76,16 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs-loading>
+<style lang="less" scoped>
 .reverse {
   background: #ccc;
   padding: 8px;
 }
+
 .veui-loading {
   margin-left: 1em;
 }
+
 .container {
   margin-bottom: 2em;
 }

one/docs/demo/loading/slot.vue

@@ -60,7 +60,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .reverse {
   background: #ccc;
   padding: 8px;

one/docs/demo/loading/style.vue

@@ -32,10 +32,11 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-loading {
   margin-left: 1em;
 }
+
 .reverse {
   background: #ccc;
   padding: 8px;

one/docs/demo/number-input/disabled.vue

@@ -47,7 +47,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section,
 p {
   margin-bottom: 1em;

one/docs/demo/number-input/readonly.vue

@@ -47,7 +47,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section,
 p {
   margin-bottom: 1em;

one/docs/demo/number-input/size.vue

@@ -33,7 +33,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 p {
   margin-bottom: 1em;
 }

one/docs/demo/overlay/position.vue

@@ -40,7 +40,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .centered-overlay {
   position: fixed;
   top: 50%;
@@ -49,15 +49,11 @@ export default {
   width: 200px;
   height: 100px;
 }
-</style>
-
-<style lang="less" docs>
-@import "~veui-theme-dls/lib.less";
 
 .centered-overlay {
   line-height: 100px;
   text-align: center;
-  border: 1px solid @veui-gray-color-5;
+  border: 1px solid #dbdbdb;
   background-color: #fff;
 }
 </style>

one/docs/demo/overlay/relative-base.vue

@@ -42,4 +42,21 @@ export default {
 }
 </script>
 
-<style lang="less" src="./relative.less" docs></style>
+<style lang="less" scoped>
+.veui-overlay {
+  display: none;
+}
+
+.relative-overlay {
+  width: 200px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px solid #dbdbdb;
+  background-color: #fff;
+
+  .veui-button {
+    margin-left: 10px;
+  }
+}
+</style>

one/docs/demo/overlay/relative.less

@@ -1,18 +0,0 @@
-@import "~veui-theme-dls/lib.less";
-
-.veui-overlay {
-  display: none;
-}
-
-.relative-overlay {
-  width: 200px;
-  height: 100px;
-  line-height: 100px;
-  text-align: center;
-  border: 1px solid @veui-gray-color-5;
-  background-color: #fff;
-
-  .veui-button {
-    margin-left: 10px;
-  }
-}

one/docs/demo/overlay/stack-display-order-with-on-overlay.vue

@@ -87,14 +87,21 @@ export default {
 }
 </script>
 
-<style lang="less" docs scoped>
+<style lang="less" scoped>
 .veui-overlay {
   display: none;
 }
 
+.relative-overlay {
+  width: 200px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px solid #dbdbdb;
+  background-color: #fff;
+
   .veui-button {
-  margin-right: 10px;
+    margin-left: 10px;
+  }
 }
 </style>
-
-<style lang="less" src="./relative.less" docs></style>

one/docs/demo/overlay/stack-display-order.vue

@@ -71,14 +71,21 @@ export default {
 }
 </script>
 
-<style lang="less" docs scoped>
+<style lang="less" scoped>
 .veui-overlay {
   display: none;
 }
 
+.relative-overlay {
+  width: 200px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px solid #dbdbdb;
+  background-color: #fff;
+
   .veui-button {
-  margin-right: 10px;
+    margin-left: 10px;
+  }
 }
 </style>
-
-<style lang="less" src="./relative.less" docs></style>

one/docs/demo/overlay/stack-on-overlay.vue

@@ -60,10 +60,21 @@ export default {
 }
 </script>
 
-<style lang="less" docs scoped>
+<style lang="less" scoped>
+.veui-overlay {
+  display: none;
+}
+
+.relative-overlay {
+  width: 200px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px solid #dbdbdb;
+  background-color: #fff;
+
   .veui-button {
-  margin-right: 10px;
+    margin-left: 10px;
+  }
 }
 </style>
-
-<style lang="less" src="./relative.less" docs></style>

one/docs/demo/pagination/goto.vue

@@ -30,7 +30,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 article {
   text-align: right;
 }

one/docs/demo/pagination/size.vue

@@ -41,7 +41,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 article {
   text-align: right;
 }

one/docs/demo/popover/position.vue

@@ -192,7 +192,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-grid-container {
   width: 80%;
   min-width: 600px;

one/docs/demo/popover/trigger.vue

@@ -62,7 +62,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section + section {
   margin-top: 20px;
 }

one/docs/demo/popover/ui.vue

@@ -53,7 +53,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section + section {
   margin-top: 20px;
 }

one/docs/demo/progress/default.vue

@@ -66,7 +66,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section + section {
   margin-top: 20px;
 }

one/docs/demo/radio-button-group/default.vue

@@ -66,7 +66,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/radio-group/default.vue

@@ -51,7 +51,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 section {
   margin-bottom: 20px;
 }

one/docs/demo/radio/model.vue

@@ -40,7 +40,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-radio {
   margin-right: 20px;
 }

one/docs/demo/radio/size.vue

@@ -36,7 +36,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped docs>
+<style lang="less" scoped>
 .veui-radio {
   margin-right: 20px;
 }