First pass of getting started panel for home dashboard

public/app/plugins/panel/gettingstarted/README.md

@@ -0,0 +1,2 @@
+# Plugin List Panel -  Native Plugin
+

public/app/plugins/panel/gettingstarted/editor.html

@@ -0,0 +1,40 @@
+<div class="gf-form-group">
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Mode</span>
+			<div class="gf-form-select-wrapper max-width-10">
+				<select class="gf-form-input" ng-model="ctrl.panel.mode" ng-options="f for f in ctrl.modes" ng-change="ctrl.refresh()"></select>
+			</div>
+		</div>
+		<div class="gf-form" ng-show="ctrl.panel.mode === 'recently viewed'">
+			<span class="gf-form-label">
+				<i class="grafana-tip fa fa-question-circle ng-scope" bs-tooltip="'WARNING: This list will be cleared when clearing browser cache'" data-original-title="" title=""></i>
+			</span>
+		</div>
+	</div>
+
+	<div class="gf-form-inline" ng-if="ctrl.panel.mode === 'search'">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Search options</span>
+			<span class="gf-form-label">Query</span>
+
+			<input type="text" class="gf-form-input" placeholder="title query"
+				ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
+
+		</div>
+
+		<div class="gf-form">
+			<span class="gf-form-label">Tags</span>
+
+			<bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">
+			</bootstrap-tagsinput>
+		</div>
+	</div>
+
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Limit number to</span>
+			<input class="gf-form-input" type="number" ng-model="ctrl.panel.limit" ng-model-onblur ng-change="ctrl.refresh()">
+		</div>
+	</div>
+</div>

public/app/plugins/panel/gettingstarted/img/icn-dashlist-panel.svg

@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#666666;" d="M8.842,11.219h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,11.219z"/>
+		<path style="fill:#666666;" d="M0.008,2.113l2.054-2.054C0.966,0.139,0.089,1.016,0.008,2.113z"/>
+		<polygon style="fill:#666666;" points="0,2.998 0,5.533 5.484,0.05 2.948,0.05 		"/>
+		<polygon style="fill:#666666;" points="6.361,0.05 0,6.411 0,8.946 8.896,0.05 		"/>
+		<path style="fill:#666666;" d="M11.169,2.277c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V2.277z"/>
+		<path style="fill:#666666;" d="M9.654,0.169L0.119,9.704c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,0.812,10.247,0.37,9.654,0.169z"/>
+		<polygon style="fill:#666666;" points="11.169,5.479 5.429,11.219 7.964,11.219 11.169,8.014 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,11.031H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,10.212,89.157,11.031,88.146,11.031z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,23.902h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,23.902z"/>
+		<path style="fill:#666666;" d="M0.008,14.796l2.054-2.054C0.966,12.822,0.089,13.699,0.008,14.796z"/>
+		<polygon style="fill:#666666;" points="0,15.681 0,18.216 5.484,12.733 2.948,12.733 		"/>
+		<polygon style="fill:#666666;" points="6.361,12.733 0,19.094 0,21.629 8.896,12.733 		"/>
+		<path style="fill:#666666;" d="M11.169,14.96c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V14.96z"/>
+		<path style="fill:#666666;" d="M9.654,12.852l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,13.495,10.247,13.053,9.654,12.852z"/>
+		<polygon style="fill:#666666;" points="11.169,18.162 5.429,23.902 7.964,23.902 11.169,20.697 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,23.714H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.83,1.83-1.83h73.281
+		c1.011,0,1.83,0.82,1.83,1.83v7.37C89.977,22.895,89.157,23.714,88.146,23.714z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,36.585h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,36.585z"/>
+		<path style="fill:#666666;" d="M0.008,27.479l2.054-2.054C0.966,25.505,0.089,26.382,0.008,27.479z"/>
+		<polygon style="fill:#666666;" points="0,28.364 0,30.899 5.484,25.416 2.948,25.416 		"/>
+		<polygon style="fill:#666666;" points="6.361,25.416 0,31.777 0,34.312 8.896,25.416 		"/>
+		<path style="fill:#666666;" d="M11.169,27.643c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V27.643z"/>
+		<path style="fill:#666666;" d="M9.654,25.535L0.119,35.07c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,26.178,10.247,25.736,9.654,25.535z"/>
+		<polygon style="fill:#666666;" points="11.169,30.845 5.429,36.585 7.964,36.585 11.169,33.38 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,36.397H14.866c-1.011,0-1.83-0.82-1.83-1.831v-7.37c0-1.011,0.82-1.83,1.83-1.83h73.281
+		c1.011,0,1.83,0.82,1.83,1.83v7.37C89.977,35.578,89.157,36.397,88.146,36.397z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,49.268h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,49.268z"/>
+		<path style="fill:#666666;" d="M0.008,40.162l2.054-2.054C0.966,38.188,0.089,39.065,0.008,40.162z"/>
+		<polygon style="fill:#666666;" points="0,41.047 0,43.582 5.484,38.099 2.948,38.099 		"/>
+		<polygon style="fill:#666666;" points="6.361,38.099 0,44.46 0,46.995 8.896,38.099 		"/>
+		<path style="fill:#666666;" d="M11.169,40.326c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V40.326z"/>
+		<path style="fill:#666666;" d="M9.654,38.218l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,38.861,10.247,38.419,9.654,38.218z"/>
+		<polygon style="fill:#666666;" points="11.169,43.528 5.429,49.268 7.964,49.268 11.169,46.063 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,49.08H14.866c-1.011,0-1.83-0.82-1.83-1.831v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,48.261,89.157,49.08,88.146,49.08z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,61.951h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,61.951z"/>
+		<path style="fill:#666666;" d="M0.008,52.845l2.054-2.054C0.966,50.871,0.089,51.748,0.008,52.845z"/>
+		<polygon style="fill:#666666;" points="0,53.73 0,56.265 5.484,50.782 2.948,50.782 		"/>
+		<polygon style="fill:#666666;" points="6.361,50.782 0,57.143 0,59.678 8.896,50.782 		"/>
+		<path style="fill:#666666;" d="M11.169,53.009c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V53.009z"/>
+		<path style="fill:#666666;" d="M9.654,50.901l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,51.544,10.247,51.102,9.654,50.901z"/>
+		<polygon style="fill:#666666;" points="11.169,56.211 5.429,61.951 7.964,61.951 11.169,58.746 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,61.763H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,60.944,89.157,61.763,88.146,61.763z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,74.634h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,74.634z"/>
+		<path style="fill:#666666;" d="M0.008,65.528l2.054-2.054C0.966,63.554,0.089,64.431,0.008,65.528z"/>
+		<polygon style="fill:#666666;" points="0,66.413 0,68.948 5.484,63.465 2.948,63.465 		"/>
+		<polygon style="fill:#666666;" points="6.361,63.465 0,69.826 0,72.361 8.896,63.465 		"/>
+		<path style="fill:#666666;" d="M11.169,65.692c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V65.692z"/>
+		<path style="fill:#666666;" d="M9.654,63.584l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,64.227,10.247,63.785,9.654,63.584z"/>
+		<polygon style="fill:#666666;" points="11.169,68.894 5.429,74.634 7.964,74.634 11.169,71.429 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,74.446H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,73.627,89.157,74.446,88.146,74.446z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,87.317h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,87.317z"/>
+		<path style="fill:#666666;" d="M0.008,78.211l2.054-2.054C0.966,76.237,0.089,77.114,0.008,78.211z"/>
+		<polygon style="fill:#666666;" points="0,79.096 0,81.631 5.484,76.148 2.948,76.148 		"/>
+		<polygon style="fill:#666666;" points="6.361,76.148 0,82.509 0,85.044 8.896,76.148 		"/>
+		<path style="fill:#666666;" d="M11.169,78.375c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V78.375z"/>
+		<path style="fill:#666666;" d="M9.654,76.267l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,76.91,10.247,76.468,9.654,76.267z"/>
+		<polygon style="fill:#666666;" points="11.169,81.577 5.429,87.317 7.964,87.317 11.169,84.112 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,87.129H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,86.31,89.157,87.129,88.146,87.129z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,100h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,100z"/>
+		<path style="fill:#666666;" d="M0.008,90.894l2.054-2.054C0.966,88.92,0.089,89.797,0.008,90.894z"/>
+		<polygon style="fill:#666666;" points="0,91.779 0,94.314 5.484,88.831 2.948,88.831 		"/>
+		<polygon style="fill:#666666;" points="6.361,88.831 0,95.192 0,97.727 8.896,88.831 		"/>
+		<path style="fill:#666666;" d="M11.169,91.058c0-0.068-0.004-0.134-0.01-0.2L2.027,99.99c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V91.058z"/>
+		<path style="fill:#666666;" d="M9.654,88.95l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,89.593,10.247,89.151,9.654,88.95z"/>
+		<polygon style="fill:#666666;" points="11.169,94.26 5.429,100 7.964,100 11.169,96.795 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,99.812H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.83,1.83-1.83h73.281
+		c1.011,0,1.83,0.82,1.83,1.83v7.37C89.977,98.993,89.157,99.812,88.146,99.812z"/>
+	<circle style="fill:#F7941E;" cx="96.125" cy="5.637" r="3.875"/>
+	<circle style="fill:#898989;" cx="96.125" cy="18.37" r="3.875"/>
+	<circle style="fill:#898989;" cx="96.125" cy="31.104" r="3.875"/>
+	<circle style="fill:#F7941E;" cx="96.125" cy="43.837" r="3.875"/>
+	<circle style="fill:#F7941E;" cx="96.125" cy="56.57" r="3.875"/>
+	<circle style="fill:#898989;" cx="96.125" cy="69.304" r="3.875"/>
+	<circle style="fill:#F7941E;" cx="96.125" cy="82.037" r="3.875"/>
+	<circle style="fill:#898989;" cx="96.125" cy="94.77" r="3.875"/>
+</g>
+</svg>

public/app/plugins/panel/gettingstarted/module.html

@@ -0,0 +1,33 @@
+<div class="dashlist">
+  <div class="dashlist-section">
+    <h6 class="dashlist-section-header">
+      Getting Started with Grafana
+      <button class="dashlist-CTA-close-btn"><i class="fa fa-remove"></i></button>
+    </h6>
+    <ul class="progress-tracker progress-tracker--text progress-tracker--center">
+      <li class="progress-step is-complete">
+        <span class="progress-marker"><i class="icon-gf icon-gf-check gettingstarted-icon-success"></i></span>
+        <span class="progress-text"><span class="gettingstarted-blurb-success">Install Grafana</span></span>
+      </li>
+      <li class="progress-step is-active">
+        <span class="progress-marker"><i class="icon-gf icon-gf-datasources gettingstarted-icon-active"></i></span>
+        <span class="progress-text">
+          <a href="#" class="gettingstarted-blurb">Create your first data source.</a>
+          <button class="btn btn-success btn-small">Add Data Source</button>
+        </span>
+      </li>
+      <li class="progress-step">
+        <span class="progress-marker"><i class="icon-gf icon-gf-dashboard gettingstarted-icon-upcoming"></i></span>
+        <span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Create your first dashboard.</a></span>
+      </li>
+      <li class="progress-step">
+        <span class="progress-marker"><i class="icon-gf icon-gf-users gettingstarted-icon-upcoming"></i></span>
+        <span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Invite your team.</a></span>
+      </li>
+      <li class="progress-step">
+        <span class="progress-marker"><i class="icon-gf icon-gf-apps gettingstarted-icon-upcoming"></i></span>
+        <span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Install apps & plugins</a></span>
+      </li>
+    </ul>
+  </div>
+</div>

public/app/plugins/panel/gettingstarted/module.ts

@@ -0,0 +1,15 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import {PanelCtrl} from 'app/plugins/sdk';
+
+class GettingstartedPanelCtrl extends PanelCtrl {
+  static templateUrl = 'public/app/plugins/panel/gettingstarted/module.html';
+
+  /** @ngInject */
+  constructor($scope, $injector) {
+    super($scope, $injector);
+  }
+
+}
+
+export {GettingstartedPanelCtrl, GettingstartedPanelCtrl as PanelCtrl}

public/app/plugins/panel/gettingstarted/plugin.json

@@ -0,0 +1,16 @@
+{
+  "type": "panel",
+  "name": "Getting Started",
+  "id": "gettingstarted",
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    },
+    "logos": {
+      "small": "img/icn-dashlist-panel.svg",
+      "large": "img/icn-dashlist-panel.svg"
+    }
+  }
+}

public/sass/_grafana.scss

@@ -42,6 +42,7 @@
 @import "components/panel_graph";
 @import "components/submenu";
 @import "components/panel_dashlist";
+@import "components/panel_gettingstarted";
 @import "components/panel_pluginlist";
 @import "components/panel_singlestat";
 @import "components/panel_table";

public/sass/components/_panel_gettingstarted.scss

@@ -0,0 +1,486 @@
+ul.gettingstarted-flex-container {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  padding:  20px;
+  list-style-type: none;
+}
+
+.gettingstarted-flex-item {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.gettingstarted-blurb-copy {
+  font-size: $font-size-base;
+  margin-bottom: $spacer/2;
+  text-align: center;
+}
+
+a.gettingstarted-blurb{
+  @extend .gettingstarted-blurb-copy;
+  color: $text-color;
+  display: block;
+}
+
+a.gettingstarted-blurb:hover{
+  text-decoration: underline;
+}
+
+.gettingstarted-blurb-success {
+  @extend .gettingstarted-blurb-copy;
+  color: $text-color-weak;
+  text-decoration: line-through;
+}
+
+a.gettingstarted-blurb-upcoming {
+  @extend .gettingstarted-blurb-copy;
+  color: $text-color-weak;
+}
+
+.gettingstarted-icon-container {
+  height: 50px;
+}
+
+.gettingstarted-icon-active {
+  color: $brand-primary;
+  -webkit-text-fill-color: transparent;
+  background: $brand-gradient;
+  -webkit-background-clip: text;
+  text-decoration:none;
+  font-size: 35px;
+  vertical-align: sub;
+  animation: iconPulse 500ms forwards 1s;
+  will-change: zoom;
+}
+
+.gettingstarted-icon-upcoming {
+  color: $text-color-weak;
+  text-decoration:none;
+  font-size: 35px;
+  vertical-align: sub;
+}
+
+.gettingstarted-icon-success {
+  color: $online;
+  font-size: 35px;
+  text-decoration:none;
+  vertical-align: sub;
+}
+
+
+.dashlist-CTA-close-btn {
+  float: right;
+  padding: 0;
+  margin: 0 2px 0 0;
+  background-color: transparent;
+  border: none;
+  i {
+    font-size: 80%;
+  }
+  color: $text-color-weak;
+  &:hover {
+    color: $white;
+  }
+}
+
+@keyframes iconPulse {
+  from {
+    zoom: 100%;
+  }
+
+  50% {
+    zoom: 102%;
+  }
+
+  to {
+    zoom: 100%;
+  }
+}
+
+
+// ----- Progress Tracker -----
+
+// ----- Variables -----
+
+// Colours
+$progress-color-dark:       $panel-bg !default;
+$progress-color:            $panel-bg !default;
+$progress-color-light:      $panel-bg !default;
+$progress-color-grey-light: $body-bg !default;
+$progress-color-grey:       $iconContainerBackground !default;
+$progress-color-grey-dark:  $iconContainerBackground !default;
+
+// Sizing
+$progress-tracker-padding:  5px !default;
+
+$marker-size:               60px !default;
+$marker-size-half:          ($marker-size / 2);
+$marker-size-third:         ($marker-size / 3);
+$marker-size-quarter:       ($marker-size / 4);
+$marker-spacing:            10px !default;
+
+$path-height:               4px !default;
+$path-position:             $marker-size-half - ($path-height / 2);
+
+$text-padding:              $marker-size-half !default;
+$text-padding-X:            $marker-size-third !default;
+$text-padding-Y:            5px !default;
+$text-padding--vertical:    $marker-size + $marker-size-half !default;
+
+// Only needed for short text version, the word size should be the width of the widest word without padding.
+$word-size:                     54px !default;
+$progress-tracker-word-padding: ($word-size + $text-padding-X + $marker-size-half) / 2;
+
+// Animations/Transitions
+$animation-duration:        0.3s !default;
+$ripple-color:              rgba(0, 0, 0, 0.3) !default;
+
+// ----- Elements -----
+
+// Container element
+.progress-tracker {
+  display: flex;
+  margin: 20px auto;
+  padding: 0;
+  list-style: none;
+}
+
+// Step container that creates lines between steps
+  .progress-step {
+    display: block;
+    position: relative;
+    flex: 1 1 0%;
+    margin: 0;
+    padding: 0;
+    min-width: $marker-size; // For a flexbox bug in firefox that wont allow the text overflow on the text
+
+    // Stops the last step growing
+    &:last-child {
+      flex-grow: 0;
+    }
+
+    // Path between markers, this is not created for the last step
+    &:not(:last-child)::after {
+      content: '';
+      display: block;
+      position: absolute;
+      z-index: 1;
+      top: $path-position;
+      bottom: $path-position;
+      right: - $marker-size-half;
+      width: 100%;
+      height: $path-height;
+      transition: background-color $animation-duration;
+    }
+
+    // Active state
+    &.is-active {
+      .progress-title {
+        font-weight: 400;
+      }
+    }
+
+    > a {
+      display: block;
+    }
+
+  }
+
+// Progress marker
+    .progress-marker {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      z-index: 20;
+      width: $marker-size;
+      height: $marker-size;
+      padding-bottom: 2px; // To align text within the marker
+      color: #fff;
+      font-weight: 400;
+      border: 2px solid transparent;
+      border-radius: 50%;
+      transition: background-color, border-color;
+      transition-duration: $animation-duration;
+    }
+
+
+// Progress text
+  .progress-text {
+    display: block;
+    padding: $text-padding-Y $text-padding-X;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+    .progress-title {
+      margin-top: 0;
+    }
+
+
+// Step state mixin - The first arugment is required and the rest are optional, if you pass in null the value will not be changed.
+@mixin progress-state($marker-color-bg, $marker-color-border: null, $marker-color-text: null, $path-color: null, $text-color: null) {
+  .progress-marker {
+    color: $marker-color-text;
+    background-color: $marker-color-bg;
+    border-color: $marker-color-border;
+  }
+
+  &::after {
+    background-color: $path-color;
+  }
+
+  .progress-text, .progress-step > a .progress-text {
+    color: $text-color;
+  }
+}
+
+
+// States
+  .progress-step {
+
+    // Inactive - Default state
+    @include progress-state($progress-color, null, #fff, $progress-color-grey-light, $progress-color-grey-dark);
+
+    // Active state
+    &.is-active {
+      @include progress-state($progress-color);
+    }
+
+    // Complete state
+    &.is-complete {
+      @include progress-state($progress-color-dark, $path-color: $progress-color-grey);
+    }
+
+    // Hover state
+    &:hover {
+      @include progress-state($progress-color-light);
+    }
+
+  }
+
+
+
+// ----- Modifiers -----
+
+// Center align markers and text
+.progress-tracker--center {
+
+  .progress-step {
+    text-align: center;
+
+    &:last-child {
+      flex-grow: 1;
+    }
+
+    &::after {
+      right: -50%;
+    }
+  }
+
+    .progress-marker {
+      margin-left: auto;
+      margin-right: auto;
+    }
+}
+
+
+// Right align markers and text
+.progress-tracker--right {
+
+  .progress-step {
+    text-align: right;
+
+    &:last-child {
+      flex-grow: 1;
+    }
+
+    &::after {
+      right: calc(-100% + #{$marker-size-half});
+    }
+  }
+
+    .progress-marker {
+      margin-left: auto;
+    }
+}
+
+
+// Border around steps (Only for use without text)
+.progress-tracker--border {
+  padding: $progress-tracker-padding;
+  border: 2px solid $progress-color-grey;
+  border-radius: $marker-size + ($progress-tracker-padding * 2);
+}
+
+
+// Spaces between markers
+.progress-tracker--spaced {
+
+  .progress-step {
+
+    &::after {
+      width: calc(100% - #{$marker-size + ($marker-spacing * 2)});
+      margin-right: ($marker-size-half + $marker-spacing);
+    }
+  }
+
+}
+
+
+// Word below markers
+.progress-tracker--word {
+  padding-right: $progress-tracker-word-padding;
+  overflow: hidden;
+
+  .progress-text {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+    .progress-title {
+      margin: 0;
+    }
+
+}
+
+
+.progress-tracker--word-center {
+  padding-right: $progress-tracker-word-padding;
+  padding-left: $progress-tracker-word-padding;
+
+  .progress-text {
+    padding-right: 0;
+    padding-left: 0;
+    transform: translateX(calc(-50% + #{$marker-size-half}));
+  }
+
+}
+
+
+.progress-tracker--word-right {
+  padding-right: 0;
+  padding-left: $progress-tracker-word-padding;
+
+  .progress-text {
+    padding-left: 0;
+    transform: translateX(calc(-100% + #{$marker-size}));
+  }
+
+}
+
+
+// Text below markers
+.progress-tracker--text {
+
+  .progress-step {
+
+    &:last-child {
+      flex-grow: 1;
+    }
+  }
+
+}
+
+
+// Text above markers
+.progress-tracker--text-top {
+
+  .progress-step::after {
+    top: auto;
+  }
+
+    .progress-text {
+      height: 100%;
+    }
+
+    .progress-marker {
+      bottom: $marker-size;
+    }
+
+}
+
+
+// Text inline with markers
+.progress-tracker--text-inline {
+
+  .progress-step {
+    display: flex;
+  }
+
+    .progress-text {
+      position: relative;
+      z-index: 30;
+      max-width: 70%;
+      white-space: nowrap;
+      padding-top: 0;
+      padding-bottom: 0;
+      background-color: #fff;
+    }
+
+      .progress-title {
+        margin: 0;
+      }
+
+}
+
+
+// Square markers
+.progress-tracker--square {
+
+  .progress-step {
+    padding-top: 0;
+  }
+
+    .progress-marker {
+      transform: scaleX(0.33) translateY(- $path-position);
+      border-radius: 0;
+    }
+
+}
+
+
+// Overflow on small screens
+@media (max-width: 399px) {
+  .progress-tracker-mobile {
+    overflow-x: auto;
+
+    .progress-tracker {
+      min-width: 200%;
+    }
+  }
+}
+
+
+// Vertical layout
+.progress-tracker--vertical {
+  flex-direction: column;
+
+  .progress-step {
+    flex: 1 1 auto;
+
+    &::after {
+      right: auto;
+      top: $marker-size-half;
+      left: $path-position;
+      width: $path-height;
+      height: 100%;
+    }
+  }
+
+    .progress-marker {
+      position: absolute;
+      left: 0;
+    }
+
+    .progress-text {
+      padding-top: $marker-size-quarter;
+      padding-left: $text-padding--vertical;
+    }
+
+    .progress-step:not(:last-child) .progress-text {
+      padding-bottom: $text-padding--vertical;
+    }
+}