mirror of https://github.com/grafana/grafana.git
First pass of getting started panel for home dashboard
This commit is contained in:
Matt Toback
parent
d4bc92b267
commit
15e369ec02
|
|
@ -0,0 +1,2 @@
|
|||
# Plugin List Panel - Native Plugin
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 8.8 KiB |
|
|
@ -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>
|
||||
|
|
@ -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}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue