@maxtropy/v-components 0.1.12-beta.1 → 0.1.12-beta.11

package/lib/components/steps/MxStep.css

@@ -0,0 +1,572 @@
+.mx-steps.el-steps .mx-step.el-step.is-horizontal {
+  display: flex;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__line {
+  display: none;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head {
+  width: 32px;
+  height: 32px;
+  border-color: #4a90e2;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-success {
+  color: #4a90e2;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon .el-icon {
+  height: 16px;
+  width: 16px;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon .el-icon svg {
+  height: 16px;
+  width: 16px;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__icon {
+  width: 32px;
+  height: 32px;
+  background: #4a90e2;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__icon .el-step__icon-inner {
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 22px;
+  text-align: center;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-wait {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__icon {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__icon .el-step__icon-inner {
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+  text-align: center;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__main {
+  width: 100%;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__title {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__title::after {
+  content: "";
+  width: 100%;
+  height: 1px;
+  background-color: rgba(255, 255, 255, 0.2);
+  margin: 15px 8px 0 8px;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__main .mx-step-title {
+  margin: 0px;
+  font-weight: 400;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 24px;
+  white-space: nowrap;
+  padding-left: 8px;
+  padding-top: 4px;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__title.is-process .mx-step-title {
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__title.is-success::after {
+  background-color: #4a90e2;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__description {
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.45);
+  line-height: 22px;
+  padding-left: 8px;
+  padding-top: 4px;
+}
+.mx-steps.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__description.is-process {
+  color: rgba(255, 255, 255, 0.65);
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success {
+  color: #4a90e2;
+  border-color: #4a90e2;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__line {
+  width: 1px;
+  height: calc(100% - 48px);
+  left: 15px;
+  top: 40px;
+  background-color: #4a90e2;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon .el-icon {
+  height: 16px;
+  width: 16px;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon .el-icon svg {
+  height: 16px;
+  width: 16px;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process {
+  border-color: #4a90e2;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__line {
+  width: 1px;
+  height: calc(100% - 48px);
+  left: 15px;
+  top: 40px;
+  background: rgba(255, 255, 255, 0.2);
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__icon {
+  width: 32px;
+  height: 32px;
+  background: #4a90e2;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__icon .el-step__icon-inner {
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 22px;
+  text-align: center;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__line {
+  width: 1px;
+  height: calc(100% - 48px);
+  left: 15px;
+  top: 40px;
+  background: rgba(255, 255, 255, 0.2);
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__icon {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__icon .el-step__icon-inner {
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+  text-align: center;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__main {
+  width: 100%;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__main .el-step__title {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__main .mx-step-title {
+  margin: 0px;
+  font-weight: 400;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 24px;
+  white-space: nowrap;
+  padding-left: 8px;
+  padding-top: 4px;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__main .el-step__title.is-process .mx-step-title {
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__main .el-step__description {
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.45);
+  line-height: 22px;
+  padding-left: 8px;
+  padding-top: 4px;
+}
+.mx-steps.el-steps .mx-step.el-step.is-vertical .el-step__main .el-step__description.is-process {
+  color: rgba(255, 255, 255, 0.65);
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal {
+  display: flex;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__line {
+  display: none;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head {
+  width: 24px;
+  height: 24px;
+  border-color: #4a90e2;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-success {
+  color: #4a90e2;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon {
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon .el-icon {
+  height: 16px;
+  width: 16px;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon .el-icon svg {
+  height: 16px;
+  width: 16px;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__icon {
+  width: 24px;
+  height: 24px;
+  background: #4a90e2;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__icon .el-step__icon-inner {
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 22px;
+  text-align: center;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-wait {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__icon {
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__icon .el-step__icon-inner {
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+  text-align: center;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__main {
+  width: 100%;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__title {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__title::after {
+  content: "";
+  width: 100%;
+  height: 1px;
+  background-color: rgba(255, 255, 255, 0.2);
+  margin: 12px 8px 0 8px;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__main .mx-step-title {
+  margin: 0px;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+  white-space: nowrap;
+  padding-left: 8px;
+  padding-top: 2px;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__title.is-process .mx-step-title {
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__title.is-success::after {
+  background-color: #4a90e2;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__description {
+  font-weight: 400;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.45);
+  line-height: 20px;
+  padding-left: 8px;
+  padding-top: 4px;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-horizontal .el-step__main .el-step__description.is-process {
+  color: rgba(255, 255, 255, 0.65);
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success {
+  color: #4a90e2;
+  border-color: #4a90e2;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__line {
+  width: 1px;
+  height: calc(100% - 40px);
+  left: 12px;
+  top: 32px;
+  background-color: #4a90e2;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon {
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon .el-icon {
+  height: 16px;
+  width: 16px;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon .el-icon svg {
+  height: 16px;
+  width: 16px;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process {
+  border-color: #4a90e2;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__line {
+  width: 1px;
+  height: calc(100% - 40px);
+  left: 12px;
+  top: 32px;
+  background: rgba(255, 255, 255, 0.2);
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__icon {
+  width: 24px;
+  height: 24px;
+  background: #4a90e2;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__icon .el-step__icon-inner {
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 22px;
+  text-align: center;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__line {
+  width: 1px;
+  height: calc(100% - 40px);
+  left: 12px;
+  top: 32px;
+  background: rgba(255, 255, 255, 0.2);
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__icon {
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: 1px solid;
+  border-color: inherit;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__icon .el-step__icon-inner {
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+  text-align: center;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__main {
+  padding-left: 8px;
+  width: 100%;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__main .el-step__title {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__main .mx-step-title {
+  margin: 0px;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+  white-space: nowrap;
+  padding-top: 2px;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__main .el-step__title.is-process .mx-step-title {
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__main .el-step__description {
+  font-weight: 400;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.45);
+  line-height: 20px;
+}
+.mx-steps-small.el-steps .mx-step.el-step.is-vertical .el-step__main .el-step__description.is-process {
+  color: rgba(255, 255, 255, 0.65);
+}
+.mx-steps-small.el-steps :last-child .el-step__main .el-step__title::after,
+.el-steps.mx-steps :last-child .el-step__main .el-step__title::after {
+  display: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__line,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__line {
+  height: calc(100% - 20px);
+  top: 24px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__line .el-step__line-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__icon,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__icon {
+  width: 8px;
+  height: 8px;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  margin-left: 8px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__icon .el-step__icon-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__icon .el-step__icon-inner {
+  display: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__line,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__line {
+  height: calc(100% - 20px);
+  top: 24px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__line .el-step__line-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon {
+  width: 8px;
+  height: 8px;
+  background: #4a90e2;
+  margin-left: 8px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon .el-step__icon-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon .el-step__icon-inner {
+  display: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__line,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__line {
+  height: calc(100% - 20px);
+  top: 24px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__line .el-step__line-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__icon,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__icon {
+  width: 8px;
+  height: 8px;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  margin-left: 8px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__icon .el-step__icon-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__icon .el-step__icon-inner {
+  display: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__line,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__line {
+  height: calc(100% - 20px);
+  top: 24px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__line .el-step__line-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__icon,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__icon {
+  width: 8px;
+  height: 8px;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  margin-left: 8px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__icon .el-step__icon-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-process .el-step__icon .el-step__icon-inner {
+  display: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__line,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__line {
+  height: calc(100% - 20px);
+  top: 24px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__line .el-step__line-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon {
+  width: 8px;
+  height: 8px;
+  background: #4a90e2;
+  margin-left: 8px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon .el-step__icon-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-success .el-step__icon .el-step__icon-inner {
+  display: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__line,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__line {
+  height: calc(100% - 20px);
+  top: 24px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__line .el-step__line-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__line .el-step__line-inner {
+  border: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__icon,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__icon {
+  width: 8px;
+  height: 8px;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  margin-left: 8px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__icon .el-step__icon-inner,
+.mx-steps-small.el-steps.mx-steps-progress-dot .mx-step.el-step.is-horizontal .el-step__head.is-wait .el-step__icon .el-step__icon-inner {
+  display: none;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-process .el-step__icon,
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-success .el-step__icon,
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__head.is-wait .el-step__icon {
+  margin-left: 11px;
+}
+.mx-steps.el-steps.mx-steps-progress-dot .mx-step.el-step.is-vertical .el-step__main {
+  padding-left: 4px;
+}

package/lib/components/steps/MxStep.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/steps/MxStep.vue.js

@@ -0,0 +1,29 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/step/style/css");
+const _hoisted_1 = { class: "mx-step-title" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MxStep",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElStep), vue.mergeProps({ class: "mx-step" }, _ctx.$attrs), vue.createSlots({
+        title: vue.withCtx(() => [
+          vue.createElementVNode("p", _hoisted_1, vue.toDisplayString(_ctx.$attrs.title), 1)
+        ]),
+        _: 2
+      }, [
+        vue.renderList(_ctx.$slots, (item, key, index) => {
+          return {
+            name: key,
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, key)
+            ])
+          };
+        })
+      ]), 1040);
+    };
+  }
+});
+const MxStep_vue_vue_type_style_index_0_lang = "";
+module.exports = _sfc_main;

package/lib/components/steps/MxSteps.vue.d.ts

@@ -0,0 +1,29 @@
+import { type PropType } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    size: {
+        type: PropType<"default" | "small">;
+        default: string;
+    };
+    progressDot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<"default" | "small">;
+        default: string;
+    };
+    progressDot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    size: "default" | "small";
+    progressDot: boolean;
+}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/steps/MxSteps.vue.js

@@ -0,0 +1,39 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+require("element-plus/es/components/steps/style/css");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MxSteps",
+  props: {
+    size: {
+      type: String,
+      default: "default"
+    },
+    progressDot: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const buttonProps = __props;
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElSteps), vue.mergeProps({
+        class: {
+          "mx-steps": buttonProps.size !== "small",
+          "mx-steps-small": buttonProps.size === "small",
+          "mx-steps-progress-dot": buttonProps.progressDot
+        }
+      }, _ctx.$attrs), vue.createSlots({ _: 2 }, [
+        vue.renderList(_ctx.$slots, (item, key, index) => {
+          return {
+            name: key,
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, key)
+            ])
+          };
+        })
+      ]), 1040, ["class"]);
+    };
+  }
+});
+module.exports = _sfc_main;