@alifd/next/lib/step/variable.css

A configurable component library for web built on React.

:root {
--step-arrow-item-height: 32px;
--step-arrow-item-border-width: calc(32px / 2);
--step-arrow-item-title-size: 14px;
--step-arrow-item-title-weight: bold;
--step-arrow-item-wait-background: #EBECF0;
--step-arrow-item-title-wait-color: #999999;
--step-arrow-item-process-background: #5584FF;
--step-arrow-item-title-process-color: #FFFFFF;
--step-arrow-item-finish-background: #DEE8FF;
--step-arrow-item-title-finish-color: #5584FF;
--step-arrow-item-disabled-background: #F7F8FA;
--step-arrow-item-title-disabled-color: #CCCCCC;
--step-circle-item-node-padding: 8px;
--step-circle-item-node-border-width: 1px;
--step-circle-item-node-icon-size: 12px;
--step-circle-item-node-font-size: 12px;
--step-circle-item-node-corner: 50%;
--step-circle-item-tail-size: 1px;
--step-circle-item-title-margin-top: 8px;
--step-circle-item-content-margin-top: 4px;
--step-circle-item-content-font-size: 12px;
--step-circle-item-body-width: 100px;
--step-circle-item-title-size: 14px;
--step-circle-item-title-weight: bold;
--step-circle-item-node-wait-size: 32px;
--step-circle-item-node-process-size: 32px;
--step-circle-item-node-finish-size: 32px;
--step-circle-item-node-disabled-size: 32px;
--step-circle-item-tail-wait-color: #C4C6CF;
--step-circle-item-tail-process-color: #C4C6CF;
--step-circle-item-tail-finish-color: #5584FF;
--step-circle-item-tail-disabled-color: #E6E7EB;
--step-circle-item-node-wait-font-weight: normal;
--step-circle-item-node-process-font-weight: normal;
--step-circle-item-node-disabled-font-weight: normal;
--step-circle-item-node-finish-font-weight: normal;
--step-circle-item-title-wait-color: #666666;
--step-circle-item-title-process-color: #333333;
--step-circle-item-title-finish-color: #666666;
--step-circle-item-title-disabled-color: #CCCCCC;
--step-circle-item-node-wait-border-color: #A0A2AD;
--step-circle-item-node-wait-background: #FFFFFF;
--step-circle-item-node-wait-color: #666666;
--step-circle-item-node-process-border-color: #5584FF;
--step-circle-item-node-process-background: #5584FF;
--step-circle-item-node-process-color: #FFFFFF;
--step-circle-item-node-process-percent-color: #5584FF;
--step-circle-item-node-process-percent-size: 12px;
--step-circle-item-node-finish-border-color: #5584FF;
--step-circle-item-node-finish-background: #FFFFFF;
--step-circle-item-node-finish-color: #5584FF;
--step-circle-item-node-disabled-border-color: #E6E7EB;
--step-circle-item-node-disabled-background: #FFFFFF;
--step-circle-item-node-disabled-color: #CCCCCC;
--step-circle-vertical-item-node-padding: 8px;
--step-circle-vertical-item-body-margin-left: 16px;
--step-circle-vertical-item-title-margin-top: 8px;
--step-circle-vertical-item-content-margin-top: 4px;
--step-circle-item-content-color: #666666;
--step-circle-item-tail-bg-color: #E6E7EB;
--step-circle-vertical-item-tail-size: 1px;
--step-dot-item-dot-padding: 8px;
--step-dot-item-dot-icon-size: 12px;
--step-dot-item-dot-border-width: 1px;
--step-dot-item-body-width: 100px;
--step-dot-item-content-margin-top: 4px;
--step-dot-item-dot-corner: 50%;
--step-dot-item-title-size: 12px;
--step-dot-item-title-weight: bold;
--step-dot-item-title-margin-top: 8px;
--step-dot-item-tail-size: 1px;
--step-dot-item-dot-wait-size: 12px;
--step-dot-item-dot-process-size: 12px;
--step-dot-item-dot-finish-size: 12px;
--step-dot-item-dot-disabled-size: 12px;
--step-dot-item-tail-wait-color: #C4C6CF;
--step-dot-item-tail-process-color: #C4C6CF;
--step-dot-item-tail-finish-color: #5584FF;
--step-dot-item-tail-disabled-color: #E6E7EB;
--step-dot-item-title-wait-color: #666666;
--step-dot-item-title-process-color: #333333;
--step-dot-item-title-finish-color: #666666;
--step-dot-item-title-disabled-color: #CCCCCC;
--step-dot-item-node-wait-border-color: #A0A2AD;
--step-dot-item-node-wait-background: #FFFFFF;
--step-dot-item-node-wait-color: #999999;
--step-dot-item-node-process-border-color: #5584FF;
--step-dot-item-node-process-background: #5584FF;
--step-dot-item-node-process-color: #5584FF;
--step-dot-item-node-finish-border-color: #5584FF;
--step-dot-item-node-finish-background: #FFFFFF;
--step-dot-item-node-finish-color: #5584FF;
--step-dot-item-node-disabled-border-color: #DCDEE3;
--step-dot-item-node-disabled-background: #FFFFFF;
--step-dot-item-node-disabled-color: #E6E7EB;
--step-dot-vertical-item-node-padding: 8px;
--step-dot-vertical-item-body-margin-left: 16px;
--step-dot-vertical-item-title-margin-top: 0px;
--step-dot-vertical-item-content-margin-top: 8px;
--step-dot-item-content-font-size: 12px;
--step-dot-item-content-color: #666666;
--step-dot-item-tail-bg-color: #E6E7EB;
--step-dot-vertical-item-tail-size: 1px;
}