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; - } -} +