ADD: Steps component and improve docs

1 files changed, 70 insertions, 0 deletions

diff --git a/src/steps.less b/src/steps.less
new file mode 100644
index 0000000..ef46249
--- /dev/null
+++ b/src/steps.less
@@ -0,0 +1,70 @@
+// Steps
+.step {
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: .5rem 0;
+  width: 100%;
+
+  .step-item {
+    flex: 1 1 0;
+    margin-top: 0;
+    min-height: 2rem;
+    text-align: center;
+    position: relative;
+
+    &:not(:first-child)::before {
+      background: @core-color;
+      content: "";
+      height: .4rem;
+      left: -50%;
+      position: absolute;
+      top: .8rem;
+      width: 100%;
+    }
+
+    a {
+      color: @core-meta-color;
+      display: inline-block;
+      padding: 2rem 1rem 0;
+      text-decoration: none;
+
+      &::before {
+        background: @core-color;
+        border: .2rem solid @core-light-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: 1.4rem;
+        left: 50%;
+        position: absolute;
+        top: .3rem;
+        transform: translateX(-50%);
+        width: 1.4rem;
+        z-index: 99;
+      }
+    }
+
+    &.active {
+      a {
+        &::before {
+          background: @core-light-color;
+          border: .4rem solid @core-color;
+        }
+      }
+
+      & ~ .step-item {
+        &::before {
+          background: @core-border-color;
+        }
+
+        a {
+
+          &::before {
+            background: @control-color;
+          }
+        }
+      }
+    }
+  }
+}