Enhance Element-plus's style
Element Plus Patch by erimus-koo
Details
Authorerimus-koo
LicenseNo License
Categoryelement-plus.org
Created
Updated
Code size2.3 kB
Code checksum14308b79
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name element-plus.org/zh-CN/component/steps
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
@preprocessor less
==/UserStyle== */
@-moz-document url-prefix("https://element-plus.org/zh-CN/component/steps.html") {
:root {
--theme-color: #06f;
/* 如果要兼容老版本 这里可以写死一个颜色 */
--theme-color-bg: color-mix(in srgb, var(--theme-color) 10%, white 90%);
--text-primay: #222;
--text-secondary: #777;
--remaining-color: #eee;
--c-bg: #fff;
}
.el-steps {
/* Add spaces around node */
.el-step__icon {
box-shadow: 0 0 0 4px var(--c-bg);
}
.el-step__description {
color: var(--text-secondary);
}
/* Finished Step */
.is-success,
.is-finish {
&.el-step__head {
/* Line at the right of the node */
.el-step__line {
background-color: var(--theme-color);
color: var(--theme-color);
}
/* Node */
.el-step__icon {
border: none;
background: var(--theme-color-bg);
color: var(--theme-color);
.el-icon,
.el-icon path {
fill: var(--theme-color);
stroke: var(--theme-color);
/* viewBox=1024 icon=1em~=16px 描边=1024/16=64=1px */
stroke-width: 80;
}
}
}
/* Title */
&.el-step__title {
color: var(--text-primay);
}
}
/* Current Step */
.is-process {
&.el-step__head {
/* Line at the right of the node */
.el-step__line {
background-color: var(--remaining-color);
color: var(--remaining-color);
}
/* Node */
.el-step__icon {
border: none;
background: var(--theme-color);
color: #fff;
}
}
/* Title */
&.el-step__title {
color: var(--theme-color);
}
}
/* Remaining Steps */
.is-wait {
&.el-step__head {
/* Line at the right of the node */
.el-step__line {
background-color: var(--remaining-color);
color: var(--remaining-color);
}
/* Node */
.el-step__icon {
border: none;
background: var(--remaining-color);
color: var(--text-secondary);
.el-step__icon-inner {
font-weight: 400;
}
}
}
/* Title */
&.el-step__title {
color: var(--text-secondary);
}
}
}
}