github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update demo style

pull/9/head
tjz 2018-03-11 15:27:34 +08:00
parent 8df7d846a2
commit d5462827fd
18 changed files with 113 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/alert/demo/index.vue
View File

@ -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>

25
components/auto-complete/demo/certain-category.md
View File

@ -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 {
</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.ant-select-focused .certain-category-icon {
}
.certain-category-search-wrapper >>> .certain-category-search.ant-select-focused .certain-category-icon {
color: #108ee9;
}
.certain-category-icon {
}
.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>
```

52
components/auto-complete/demo/index.vue
View File

@ -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>

2
components/back-top/demo/custom.md
View File

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

2
components/badge/demo/dot.md
View File

@ -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;

4
components/cascader/demo/index.vue
View File

@ -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>

4
components/grid/demo/gutter.md
View File

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

19
components/modal/demo/index.vue
View File

@ -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>

2
components/modal/demo/position.md
View File

@ -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"

5
components/pagination/demo/custom-changer.md
View File

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

7
components/pagination/demo/mini.md
View File

@ -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>

8
components/select/demo/index.vue
View File

@ -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>
>

2
components/spin/demo/delayAndDebounce.md
View File

@ -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;

2
components/spin/demo/inside.md
View File

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

2
components/spin/demo/nested.md
View File

@ -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;

2
components/spin/demo/tip.md
View File

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

2
components/steps/demo/step-next.md
View File

@ -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;

6
examples/index.less
View File

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