Browse Source

Add @steps-background and @process-icon-text-color variables for customizing step theme

pull/5624/head
Graeme Yeates 8 years ago
parent
commit
18d0a4d1fb
  1. 14
      components/steps/style/index.less

14
components/steps/style/index.less

@ -6,6 +6,7 @@
@process-title-color: @text-color;
@process-description-color: @process-title-color;
@process-tail-color: @border-color-split;
@process-icon-text-color: #fff;
@wait-icon-color: @disabled-color;
@wait-title-color: @text-color-secondary;
@wait-description-color: @wait-title-color;
@ -18,6 +19,7 @@
@error-title-color: @error-color;
@error-description-color: @error-color;
@error-tail-color: @error-color;
@steps-background: @component-background;
@steps-icon-size: 26px;
@steps-small-icon-size: 18px;
@ -37,7 +39,7 @@
&.@{steps-prefix-cls}-status-wait {
.@{steps-prefix-cls}-head-inner {
border-color: @wait-icon-color;
background-color: @component-background;
background-color: @steps-background;
> .@{steps-prefix-cls}-icon {
color: @wait-icon-color;
.@{steps-prefix-cls}-icon-dot {
@ -60,7 +62,7 @@
border-color: @process-icon-color;
background-color: @process-icon-color;
> .@{steps-prefix-cls}-icon {
color: @component-background;
color: @process-icon-text-color;
.@{steps-prefix-cls}-icon-dot {
background: @process-icon-color;
}
@ -79,7 +81,7 @@
&.@{steps-prefix-cls}-status-finish {
.@{steps-prefix-cls}-head-inner {
border-color: @finish-icon-color;
background-color: @component-background;
background-color: @steps-background;
> .@{steps-prefix-cls}-icon {
color: @finish-icon-color;
.@{steps-prefix-cls}-icon-dot {
@ -106,7 +108,7 @@
&.@{steps-prefix-cls}-status-error {
.@{steps-prefix-cls}-head-inner {
border-color: @error-icon-color;
background-color: @component-background;
background-color: @steps-background;
> .@{steps-prefix-cls}-icon {
color: @error-icon-color;
.@{steps-prefix-cls}-icon-dot {
@ -159,7 +161,7 @@
vertical-align: top;
}
.@{steps-prefix-cls}-head {
background: @component-background;
background: @steps-background;
}
.@{steps-prefix-cls}-head-inner {
@ -195,7 +197,7 @@
margin-bottom: 4px;
color: @text-color;
font-weight: bold;
background: @component-background;
background-color: @steps-background;
display: inline-block;
padding-right: 10px;
> a:first-child:last-child {

Loading…
Cancel
Save