update demo style

components/alert/demo/index.vue

@@ -30,7 +30,7 @@ export default {
   title: 'Alert',
   render () {
     return (
-      <div>
+      <div id='components-alert-demo'>
         <md cn={md.cn} us={md.us}/>
         < Banner/>
         <Basic/>
@@ -49,7 +49,7 @@ export default {
 }
 </script>
 <style>
-.ant-alert {
+#components-alert-demo .ant-alert {
   margin-bottom: 16px;
 }
 </style>

components/auto-complete/demo/certain-category.md

@@ -92,12 +92,7 @@ export default {
   },
 }
 </script>
-
 <style>
-.certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
-  right: 12px;
-}
-
 .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
   color: #666;
   font-weight: bold;
@@ -119,18 +114,20 @@ export default {
 .certain-category-search-dropdown .ant-select-dropdown-menu {
   max-height: 300px;
 }
-
+</style>
-.certain-search-item-count {
+<style scoped>
+  .certain-category-search-wrapper >>> .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
+    right: 12px;
+  }
+  .certain-category-search-wrapper >>> .certain-search-item-count {
     position: absolute;
     color: #999;
     right: 16px;
   }
-
+  .certain-category-search-wrapper >>> .certain-category-search.ant-select-focused .certain-category-icon {
-.certain-category-search.ant-select-focused .certain-category-icon {
     color: #108ee9;
   }
-
+  .certain-category-search-wrapper >>> .certain-category-icon {
-.certain-category-icon {
     color: #6E6E6E;
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     font-size: 16px;

components/auto-complete/demo/index.vue

@@ -40,3 +40,55 @@ export default {
   },
 }
 </script>
+<style>
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
+  color: #666;
+  font-weight: bold;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
+  border-bottom: 1px solid #F6F6F6;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item {
+  padding-left: 16px;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
+  text-align: center;
+  cursor: default;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu {
+  max-height: 300px;
+}
+.global-search-wrapper {
+  padding-right: 50px;
+}
+
+.global-search {
+  width: 100%;
+}
+
+.global-search.ant-select-auto-complete .ant-select-selection--single {
+  margin-right: -46px;
+}
+
+.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
+  padding-right: 62px;
+}
+
+.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
+  right: 0;
+}
+
+.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.global-search-item-count {
+  position: absolute;
+  right: 16px;
+}
+</style>

components/back-top/demo/custom.md

@@ -19,7 +19,7 @@ You can customize the style of the button, just note the size limit: no more tha
     button.
   </div>
 </template>
-<style>
+<style scoped>
   #components-back-top-demo-custom .ant-back-top {
     bottom: 100px;
   }

components/badge/demo/dot.md

@@ -19,7 +19,7 @@ This will simply display a red badge, without a specific count.
   </a-badge>
 </div>
 </template>
-<style>
+<style scoped>
 #components-badge-demo-dot .anticon-notification {
   width: 16px;
   height: 16px;

components/cascader/demo/index.vue

@@ -31,7 +31,7 @@ const md = {
 export default {
   render () {
     return (
-      <div>
+      <div id='components-cascader-demo'>
         <md cn={md.cn} us={md.us}/>
         <Basic />
         <ChangeOnSelect/>
@@ -53,7 +53,7 @@ export default {
 }
 </script>
 <style>
-.ant-cascader-picker {
+#components-cascader-demo .ant-cascader-picker {
   width: 300px;
 }
 </style>

components/grid/demo/gutter.md

@@ -29,8 +29,8 @@ You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsi
     </a-row>
   </div>
 </template>
-<style>
+<style scoped>
-.gutter-example .ant-row > div {
+.gutter-example >>> .ant-row > div {
   background: transparent;
   border: 0;
 }

components/modal/demo/index.vue

@@ -60,4 +60,23 @@ export default {
 #components-modal-demo .ant-btn {
   margin-right: 8px;
 }
+.vertical-center-modal {
+  text-align: center;
+  white-space: nowrap;
+}
+
+.vertical-center-modal:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  width: 0;
+}
+
+.vertical-center-modal .ant-modal {
+  display: inline-block;
+  vertical-align: middle;
+  top: 0;
+  text-align: left;
+}
 </style>

components/modal/demo/position.md

@@ -11,7 +11,7 @@ You can use `style.top` or other styles to set position of modal dialog.
 
 ```html
 <template>
-  <div>
+  <div id="components-modal-demo-position">
     <a-button type="primary" @click="() => setModal1Visible(true)">Display a modal dialog at 20px to Top</a-button>
     <a-modal
       title="20px to Top"

components/pagination/demo/custom-changer.md

@@ -42,10 +42,5 @@ Customize dropdown options such as adding all options
     }
   }
 </script>
-<style scoped>
-  .ant-select {
-    margin-bottom: 0 !important;
-  }
-</style>
 ```
 

components/pagination/demo/mini.md

@@ -11,17 +11,14 @@ Mini size pagination.
 
 ```html
 <template>
-  <div>
+  <div id="components-pagination-demo-mini">
     <a-pagination size="small" :total="50" />
     <a-pagination size="small" :total="50" showSizeChanger showQuickJumper />
     <a-pagination size="small" :total="50" :showTotal="total => `Total ${total} items`" />
   </div>
 </template>
 <style scoped>
-.ant-select {
+#components-pagination-demo-mini .ant-pagination:not(:last-child) {
-  margin-bottom: 0 !important;
-}
-.code-box-demo .ant-pagination:not(:last-child) {
   margin-bottom: 24px;
 }
 </style>

components/select/demo/index.vue

@@ -32,7 +32,7 @@ const md = {
 export default {
   render () {
     return (
-      <div>
+      <div id='components-select-demo'>
         <md cn={md.cn} us={md.us}/>
         <Basic/>
         <Size/>
@@ -55,3 +55,9 @@ export default {
   },
 }
 </script>
+<style>
+#components-select-demo .ant-select {
+  margin: 0 8px 10px 0;
+}
+</style>
+>

components/spin/demo/delayAndDebounce.md

@@ -9,7 +9,7 @@ Specifies a delay for loading state. If `spinning` ends during delay, loading st
 </us>
 
 ```html
-<style>
+<style scoped>
   .spin-content{
     border: 1px solid #91d5ff;
     background-color: #e6f7ff;

components/spin/demo/inside.md

@@ -9,7 +9,7 @@ Spin in a container.
 </us>
 
 ```html
-<style>
+<style scoped>
   .example {
     text-align: center;
     background: rgba(0,0,0,0.05);

components/spin/demo/nested.md

@@ -9,7 +9,7 @@ Embedding content into `Spin` will alter it into loading state.
 </us>
 
 ```html
-<style>
+<style scoped>
   .spin-content{
     border: 1px solid #91d5ff;
     background-color: #e6f7ff;

components/spin/demo/tip.md

@@ -9,7 +9,7 @@ Customized description content.
 </us>
 
 ```html
-<style>
+<style scoped>
   .spin-content{
     border: 1px solid #91d5ff;
     background-color: #e6f7ff;

components/steps/demo/step-next.md

@@ -66,7 +66,7 @@ Cooperate with the content and buttons, to represent the progress of a process.
     },
   }
 </script>
-<style>
+<style scoped>
   .steps-content {
     margin-top: 16px;
     border: 1px dashed #e9e9e9;

examples/index.less

@@ -59,8 +59,4 @@
   right: 15px;
   top: 10px;
 }
-.code-box-demo {
+
-  .ant-select {
-    margin: 0 8px 10px 0;
-  }
-}