IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Polished some styles, updated issue 6466

Browse Source
This commit is contained in:
Matt Toback 2016-12-07 14:51:00 -05:00
parent 2f354ed926
commit 6ae6a5d312
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/plugins/panel/gettingstarted/module.html
View File

@ -8,8 +8,8 @@
</h6>
<ul class="progress-tracker">
<li class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
<span class="progress-marker"><i class="{{step.icon}}"></i></span>
<span class="progress-text">{{step.title}}</span>
<a class="progress-marker" ng-href="{{step.href}}"><i class="{{step.icon}}"></i></a>
<a class="progress-text" ng-href="{{step.href}}">{{step.title}}</a>
<a class="btn progress-step-cta" ng-href="{{step.href}}">{{step.cta}}</a>
</li>
</ul>

26
public/sass/components/_panel_gettingstarted.scss
View File

@ -4,13 +4,14 @@ $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-shadow: $panel-border !default;
$progress-color-grey: $iconContainerBackground !default;
$progress-color-grey-dark: $iconContainerBackground !default;
// Sizing
$marker-size: 60px !default;
$marker-size-half: ($marker-size / 2);
$path-height: 4px !default;
$path-height: 2px !default;
$path-position: $marker-size-half - ($path-height / 2);
@ -62,9 +63,16 @@ $path-position: $marker-size-half - ($path-height / 2);
right: - $marker-size-half;
width: 100%;
height: $path-height;
border-top: 2px solid $progress-color-grey-light;
border-bottom: $progress-color-shadow;
background: $progress-color-grey-light;
}
&:first-child {
&::after {
left: 50%;
}
}
&:last-child {
&::after {
right: 50%;
@ -105,10 +113,12 @@ $path-position: $marker-size-half - ($path-height / 2);
}
.progress-text {
text-decoration: line-through;
&:hover {
color: $text-color-weak;
}
}
&::after {
background: $progress-color-grey;
background: $progress-color-grey-light;
}
}
}
@ -136,6 +146,9 @@ $path-position: $marker-size-half - ($path-height / 2);
color: $text-color-weak;
font-size: 35px;
vertical-align: sub;
&:hover {
color: $link-hover-color;
}
}
// Progress text
@ -143,6 +156,10 @@ $path-position: $marker-size-half - ($path-height / 2);
display: block;
overflow: hidden;
text-overflow: ellipsis;
color: $text-muted;
&:hover {
color: $link-hover-color;
}
}
.progress-marker {
@ -151,6 +168,3 @@ $path-position: $marker-size-half - ($path-height / 2);
font-size: 35px;
vertical-align: sub;
}