steps component fixes

pages/_docs/steps.md

@@ -7,27 +7,26 @@ Steps are progress indicators of a sequence of task steps.
 ### Default markup
 
 {% example html %}
-{% include ui/steps.html %}
+{% include ui/steps.html show-title=true %}
 {% endexample %}
 
-### Size
+### Tooltips
 
 {% example html %}
-{% include ui/steps.html size="md" %}
-{% include ui/steps.html size="lg" %}
+{% include ui/steps.html show-title=true show-tooltip=true %}
 {% endexample %}
 
 ### Color
 
 {% example html %}
-{% include ui/steps.html color="green" %}
-{% include ui/steps.html color="red" %}
+{% include ui/steps.html color="green" show-title=true %}
+{% include ui/steps.html color="red" show-title=true %}
 {% endexample %}
 
-### Steps with title
+### Steps without title
 
 {% example html %}
-{% include ui/steps.html show-title=true %}
+{% include ui/steps.html show-tooltip=true %}
 {% endexample %}
 
 ### Steps with numbers

pages/_includes/ui/steps.html

@@ -4,7 +4,7 @@
    {% 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 %}
+   <{{ elem }} href="#" class="step-item{% if i == active %} active{% endif %}"{% if include.show-tooltip %} data-toggle="tooltip" title="Step {{ i }} description"{% endif %}>{% if include.show-title %}
       Step {{ i }}
    {% endif %}</{{ elem }}>
    {% endfor %}

scss/ui/_steps.scss

@@ -1,4 +1,5 @@
 $steps-border-width: 2px;
+$steps-color-inactive: #f3f5f5;
 
 @mixin step-size($border-width, $dot-size: 1rem) {
   .step-item {
@@ -21,10 +22,12 @@ $steps-border-width: 2px;
     &:after,
     &:before {
       background: $color;
+      color: $white;
     }
 
     &.active:before {
       border-color: $color;
+      color: inherit;
     }
   }
 }
@@ -40,14 +43,6 @@ $steps-border-width: 2px;
   @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);
@@ -100,9 +95,15 @@ $steps-border-width: 2px;
     }
 
     & ~ .step-item {
+      color: $text-muted-light;
+
       &:after,
       &:before {
-        background: $border-color;
+        background: $steps-color-inactive;
+      }
+
+      &:before {
+        color: $text-muted-light !important;
       }
     }
   }
@@ -110,12 +111,21 @@ $steps-border-width: 2px;
 
 .steps-counter {
   counter-reset: steps;
+  @include step-size(2px, 1.5rem);
 
   .step-item {
     counter-increment: steps;
 
     &:before {
-      content: counter(steps)
+      content: counter(steps);
+      line-height: 1.5rem;
+      font-size: 1rem;
+    }
+
+    &.active ~ .step-item {
+      &:before {
+        background: #fff;
+      }
     }
   }
 }