Skip to content

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

Enhance Element-plus's style

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

Reviews

No reviews yet.