From d5462827fd9370ceb84a94e6b24059019ee1ce5d Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Sun, 11 Mar 2018 15:27:34 +0800
Subject: [PATCH] update demo style

---
 components/alert/demo/index.vue               |  4 +-
 .../auto-complete/demo/certain-category.md    | 39 +++++++-------
 components/auto-complete/demo/index.vue       | 52 +++++++++++++++++++
 components/back-top/demo/custom.md            |  2 +-
 components/badge/demo/dot.md                  |  2 +-
 components/cascader/demo/index.vue            |  4 +-
 components/grid/demo/gutter.md                |  4 +-
 components/modal/demo/index.vue               | 19 +++++++
 components/modal/demo/position.md             |  2 +-
 components/pagination/demo/custom-changer.md  |  5 --
 components/pagination/demo/mini.md            |  7 +--
 components/select/demo/index.vue              |  8 ++-
 components/spin/demo/delayAndDebounce.md      |  2 +-
 components/spin/demo/inside.md                |  2 +-
 components/spin/demo/nested.md                |  2 +-
 components/spin/demo/tip.md                   |  2 +-
 components/steps/demo/step-next.md            |  2 +-
 examples/index.less                           |  6 +--
 18 files changed, 113 insertions(+), 51 deletions(-)

diff --git a/components/alert/demo/index.vue b/components/alert/demo/index.vue
index 038f85940..076059c01 100644
--- a/components/alert/demo/index.vue
+++ b/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>
diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md
index a3fb42f8e..3c3f4ac7d 100644
--- a/components/auto-complete/demo/certain-category.md
+++ b/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,22 +114,24 @@ export default {
 .certain-category-search-dropdown .ant-select-dropdown-menu {
   max-height: 300px;
 }
-
-.certain-search-item-count {
- position: absolute;
- color: #999;
- right: 16px;
-}
-
-.certain-category-search.ant-select-focused .certain-category-icon {
-  color: #108ee9;
-}
-
-.certain-category-icon {
-  color: #6E6E6E;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  font-size: 16px;
-}
+</style>
+<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 {
+    color: #108ee9;
+  }
+  .certain-category-search-wrapper >>> .certain-category-icon {
+    color: #6E6E6E;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    font-size: 16px;
+  }
 </style>
 ```
 
diff --git a/components/auto-complete/demo/index.vue b/components/auto-complete/demo/index.vue
index 22b135a7d..4117ce4e0 100644
--- a/components/auto-complete/demo/index.vue
+++ b/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>
diff --git a/components/back-top/demo/custom.md b/components/back-top/demo/custom.md
index 4513e5211..f7691cc87 100644
--- a/components/back-top/demo/custom.md
+++ b/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;
   }
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
index 31d082c66..019590acf 100644
--- a/components/badge/demo/dot.md
+++ b/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;
diff --git a/components/cascader/demo/index.vue b/components/cascader/demo/index.vue
index 962744e3c..3a67d3158 100644
--- a/components/cascader/demo/index.vue
+++ b/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>
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
index fe1254d3d..899b1da1d 100644
--- a/components/grid/demo/gutter.md
+++ b/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>
-.gutter-example .ant-row > div {
+<style scoped>
+.gutter-example >>> .ant-row > div {
   background: transparent;
   border: 0;
 }
diff --git a/components/modal/demo/index.vue b/components/modal/demo/index.vue
index a7895bdaa..80f28cef4 100644
--- a/components/modal/demo/index.vue
+++ b/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>
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
index 1d868906b..e0ffb8212 100644
--- a/components/modal/demo/position.md
+++ b/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"
diff --git a/components/pagination/demo/custom-changer.md b/components/pagination/demo/custom-changer.md
index 8b99f9174..8e3026dab 100644
--- a/components/pagination/demo/custom-changer.md
+++ b/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>
 ```
 
diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md
index f78c979a1..d427c7fac 100644
--- a/components/pagination/demo/mini.md
+++ b/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 {
-  margin-bottom: 0 !important;
-}
-.code-box-demo .ant-pagination:not(:last-child) {
+#components-pagination-demo-mini .ant-pagination:not(:last-child) {
   margin-bottom: 24px;
 }
 </style>
diff --git a/components/select/demo/index.vue b/components/select/demo/index.vue
index 0cf341cb1..d35c8a567 100644
--- a/components/select/demo/index.vue
+++ b/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>
+>
diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md
index bbd6fb4a3..1cfdd4bf9 100644
--- a/components/spin/demo/delayAndDebounce.md
+++ b/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;
diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md
index a24c60f9a..bf9ac5cde 100644
--- a/components/spin/demo/inside.md
+++ b/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);
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index 0cd2f7ba1..ccd95ea74 100644
--- a/components/spin/demo/nested.md
+++ b/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;
diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md
index 9acebed70..10fd32034 100644
--- a/components/spin/demo/tip.md
+++ b/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;
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index 3c4ccec14..a6680785e 100644
--- a/components/steps/demo/step-next.md
+++ b/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;
diff --git a/examples/index.less b/examples/index.less
index a8f4a4949..d99ea1a2c 100644
--- a/examples/index.less
+++ b/examples/index.less
@@ -59,8 +59,4 @@
   right: 15px;
   top: 10px;
 }
-.code-box-demo {
-  .ant-select {
-    margin: 0 8px 10px 0;
-  }
-}
+