From 08db701c64916231f22a7289c544ea7a7594b707 Mon Sep 17 00:00:00 2001
From: chomik <codecalm@gmail.com>
Date: Fri, 19 Apr 2019 23:24:27 +0200
Subject: [PATCH] steps component

---
 _config.yml                   |   2 +-
 pages/_docs/steps.md          |  37 +++++++++++
 pages/_includes/ui/steps.html |  11 ++++
 pages/_layouts/default.html   |   2 +
 scss/_variables.scss          |   2 +-
 scss/ui-kit.scss              |   1 +
 scss/ui/_steps.scss           | 121 ++++++++++++++++++++++++++++++++++
 7 files changed, 174 insertions(+), 2 deletions(-)
 create mode 100644 pages/_docs/steps.md
 create mode 100644 pages/_includes/ui/steps.html
 create mode 100644 scss/ui/_steps.scss

diff --git a/_config.yml b/_config.yml
index 02a931fff..009fb237d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -106,4 +106,4 @@ docs-menu:
 - title: Getting started
   pages: [index]
 - title: Components
-  pages: [avatars, badges, buttons, carousel, spinners, toasts, tooltips, typography]
+  pages: [avatars, badges, buttons, carousel, spinners, steps, toasts, tooltips, typography]
diff --git a/pages/_docs/steps.md b/pages/_docs/steps.md
new file mode 100644
index 000000000..f8f9e8ac2
--- /dev/null
+++ b/pages/_docs/steps.md
@@ -0,0 +1,37 @@
+---
+title: Steps
+---
+
+Steps are progress indicators of a sequence of task steps.
+
+### Default markup
+
+{% example html %}
+{% include ui/steps.html %}
+{% endexample %}
+
+### Size
+
+{% example html %}
+{% include ui/steps.html size="md" %}
+{% include ui/steps.html size="lg" %}
+{% endexample %}
+
+### Color
+
+{% example html %}
+{% include ui/steps.html color="green" %}
+{% include ui/steps.html color="red" %}
+{% endexample %}
+
+### Steps with title
+
+{% example html %}
+{% include ui/steps.html show-title=true %}
+{% endexample %}
+
+### Steps with numbers
+
+{% example html %}
+{% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
+{% endexample %}
diff --git a/pages/_includes/ui/steps.html b/pages/_includes/ui/steps.html
new file mode 100644
index 000000000..f5c045527
--- /dev/null
+++ b/pages/_includes/ui/steps.html
@@ -0,0 +1,11 @@
+{% assign count = include.count | default: 4 %}
+{% assign active = include.active | default: 3 %}
+<div class="steps{% if include.numbers %} steps-counter{% endif %}{% if include.color %} steps-{{ include.color }}{% endif %}{% if include['size'] %} steps-{{ include['size'] }}{% endif %}">
+   {% for i in (1..count) %}
+   {% assign elem = 'a' %}
+   {% if i > active %}{% assign elem = 'span' %}{% endif %}
+   <{{ elem }} href="#" class="step-item{% if i == active %} active{% endif %}" data-toggle="tooltip" title="Step {{ i }} description">{% if include.show-title %}
+      Step {{ i }}
+   {% endif %}</{{ elem }}>
+   {% endfor %}
+</div>
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 6096e37dc..6b5d7301a 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -3,7 +3,9 @@ layout: base
 ---
 
 <div class="d-flex h-auto min-h-screen">
+   {% comment %}
    {% include layout/sidenav.html %}
+   {% endcomment %}
 
 	<div class="flex-fill d-flex flex-column mw-100">
 		{% include layout/header.html %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 66f0b18e1..9ac3a0644 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -50,7 +50,7 @@ $text-color: #495057 !default;
 $text-muted: #888e9a !default;
 $text-muted-light: #adb5bd !default;
 
-$border-color: rgba(0, 40, 100, .12) !default;
+$border-color: #e1e5ec !default;
 
 $social-colors: (
   "facebook": #3b5998,
diff --git a/scss/ui-kit.scss b/scss/ui-kit.scss
index 304912c40..128642566 100644
--- a/scss/ui-kit.scss
+++ b/scss/ui-kit.scss
@@ -52,6 +52,7 @@
 @import "ui/calendars";
 @import "ui/pagination";
 @import "ui/toasts";
+@import "ui/steps";
 
 @import "ui/highlight";
 @import "ui/examples";
diff --git a/scss/ui/_steps.scss b/scss/ui/_steps.scss
new file mode 100644
index 000000000..f735f7ab2
--- /dev/null
+++ b/scss/ui/_steps.scss
@@ -0,0 +1,121 @@
+$steps-border-width: 2px;
+
+@mixin step-size($border-width, $dot-size: 1rem) {
+  .step-item {
+    padding-top: calc(#{$dot-size} + 4px);
+
+    &:after {
+      height: $border-width;
+      top: calc(#{$dot-size / 2} + 2px);
+    }
+
+    &:before {
+      width: $dot-size;
+      height: $dot-size;
+    }
+  }
+}
+
+@mixin step-color($color) {
+  .step-item {
+    &:after,
+    &:before {
+      background: $color;
+    }
+
+    &.active:before {
+      border-color: $color;
+    }
+  }
+}
+
+.steps {
+  list-style: none;
+  display: flex;
+  flex-wrap: nowrap;
+  margin: 2rem 0;
+  padding: 0;
+  width: 100%;
+  @include step-size(2px, .5rem);
+  @include step-color($primary);
+}
+
+.steps-md {
+  @include step-size(4px);
+}
+
+.steps-lg {
+  @include step-size(8px);
+}
+
+@each $color, $value in $colors {
+  .steps-#{$color} {
+    @include step-color($value);
+  }
+}
+
+.step-item {
+  flex: 1 1 0;
+  margin-top: 0;
+  min-height: 1rem;
+  text-align: center;
+  position: relative;
+  color: inherit;
+  cursor: default;
+
+  @at-root a#{&} {
+    cursor: pointer;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  &:not(:first-child):after {
+    content: '';
+    position: absolute;
+    left: -50%;
+    width: 100%;
+    transform: translateY(-50%);
+  }
+
+  &:before {
+    content: '';
+    border: 2px solid #fff;
+    box-sizing: content-box;
+    border-radius: 50%;
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+
+  &.active {
+    font-weight: 600;
+
+    &:before {
+      background: #fff;
+    }
+
+    & ~ .step-item {
+      &:after,
+      &:before {
+        background: $border-color;
+      }
+    }
+  }
+}
+
+.steps-counter {
+  counter-reset: steps;
+
+  .step-item {
+    counter-increment: steps;
+
+    &:before {
+      content: counter(steps)
+    }
+  }
+}