fix: steps custom icon style

This commit is contained in:
ycjcl868 2019-12-24 15:01:03 +08:00
parent b50590c61f
commit c352a1786b
7 changed files with 56 additions and 19 deletions

View File

@ -73,3 +73,9 @@ ReactDOM.render(
padding: 5px 0;
}
```
<style>
[data-theme="dark"] .gutter-box {
background: #028ac8;
}
</style>

View File

@ -133,3 +133,9 @@ ReactDOM.render(<App />, mountNode);
padding: 8px 16px;
}
```
<style>
[data-theme="dark"] #components-grid-demo-playground [class~='ant-col'] > div {
background: #028ac8;
}
</style>

View File

@ -66,6 +66,12 @@ ReactDOM.render(
background: #7dbcea;
color: #fff;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-header {
background: #6aa0c7;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-footer {
background: #6aa0c7;
}
#components-layout-demo-basic .ant-layout-footer {
line-height: 1.5;
}
@ -74,12 +80,18 @@ ReactDOM.render(
color: #fff;
line-height: 120px;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-sider {
background: #3499ec;
}
#components-layout-demo-basic .ant-layout-content {
background: rgba(16, 142, 233, 1);
color: #fff;
min-height: 120px;
line-height: 120px;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-content {
background: #107bcb;
}
#components-layout-demo-basic > .code-box-demo > div > .ant-layout {
margin-bottom: 48px;
}

View File

@ -45,7 +45,7 @@ ReactDOM.render(
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
<div className="site-layout-content">Content</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>,
@ -54,6 +54,11 @@ ReactDOM.render(
```
```css
.site-layout-content {
background: #fff;
padding: 24px;
min-height: 280px;
}
#components-layout-demo-top .logo {
width: 120px;
height: 31px;
@ -62,3 +67,9 @@ ReactDOM.render(
float: left;
}
```
<style>
[data-theme="dark"] .site-layout-content {
background: #141414;
}
</style>

View File

@ -52,7 +52,7 @@ A single step in the step bar.
| disabled | Disable click | boolean | false | |
<style>
.steps-content {
[data-theme="dark"] .steps-content {
border: 1px dashed #303030;
background-color: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.65);

View File

@ -53,7 +53,7 @@ title: Steps
| disabled | 禁用点击 | boolean | false | |
<style>
.steps-content {
[data-theme="dark"] .steps-content {
border: 1px dashed #303030;
background-color: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.65);

View File

@ -1,20 +1,22 @@
.@{steps-prefix-cls}-item-custom {
.@{steps-prefix-cls}-item-icon {
height: auto;
background: none;
border: 0;
> .@{steps-prefix-cls}-icon {
top: 0;
left: 0.5px;
width: @steps-icon-size;
height: @steps-icon-size;
font-size: 24px;
line-height: @steps-icon-size;
.@{steps-prefix-cls} {
.@{steps-prefix-cls}-item-custom {
.@{steps-prefix-cls}-item-icon {
height: auto;
background: none;
border: 0;
> .@{steps-prefix-cls}-icon {
top: 0;
left: 0.5px;
width: @steps-icon-size;
height: @steps-icon-size;
font-size: 24px;
line-height: @steps-icon-size;
}
}
}
&.@{steps-prefix-cls}-item-process {
.@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
color: @process-icon-color;
&.@{steps-prefix-cls}-item-process {
.@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
color: @process-icon-color;
}
}
}
}