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> </h6>
<ul class="progress-tracker"> <ul class="progress-tracker">
<li class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass"> <li class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
<span class="progress-marker"><i class="{{step.icon}}"></i></span> <a class="progress-marker" ng-href="{{step.href}}"><i class="{{step.icon}}"></i></a>
<span class="progress-text">{{step.title}}</span> <a class="progress-text" ng-href="{{step.href}}">{{step.title}}</a>
<a class="btn progress-step-cta" ng-href="{{step.href}}">{{step.cta}}</a> <a class="btn progress-step-cta" ng-href="{{step.href}}">{{step.cta}}</a>
</li> </li>
</ul> </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: $panel-bg !default;
$progress-color-light: $panel-bg !default; $progress-color-light: $panel-bg !default;
$progress-color-grey-light: $body-bg !default; $progress-color-grey-light: $body-bg !default;
$progress-color-shadow: $panel-border !default;
$progress-color-grey: $iconContainerBackground !default; $progress-color-grey: $iconContainerBackground !default;
$progress-color-grey-dark: $iconContainerBackground !default; $progress-color-grey-dark: $iconContainerBackground !default;
// Sizing // Sizing
$marker-size: 60px !default; $marker-size: 60px !default;
$marker-size-half: ($marker-size / 2); $marker-size-half: ($marker-size / 2);
$path-height: 4px !default; $path-height: 2px !default;
$path-position: $marker-size-half - ($path-height / 2); $path-position: $marker-size-half - ($path-height / 2);
@ -62,9 +63,16 @@ $path-position: $marker-size-half - ($path-height / 2);
right: - $marker-size-half; right: - $marker-size-half;
width: 100%; width: 100%;
height: $path-height; height: $path-height;
border-top: 2px solid $progress-color-grey-light;
border-bottom: $progress-color-shadow;
background: $progress-color-grey-light; background: $progress-color-grey-light;
} }
&:first-child {
&::after {
left: 50%;
}
}
&:last-child { &:last-child {
&::after { &::after {
right: 50%; right: 50%;
@ -105,10 +113,12 @@ $path-position: $marker-size-half - ($path-height / 2);
} }
.progress-text { .progress-text {
text-decoration: line-through; text-decoration: line-through;
&:hover {
color: $text-color-weak;
}
} }
&::after { &::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; color: $text-color-weak;
font-size: 35px; font-size: 35px;
vertical-align: sub; vertical-align: sub;
&:hover {
color: $link-hover-color;
}
} }
// Progress text // Progress text
@ -143,6 +156,10 @@ $path-position: $marker-size-half - ($path-height / 2);
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: $text-muted;
&:hover {
color: $link-hover-color;
}
} }
.progress-marker { .progress-marker {
@ -151,6 +168,3 @@ $path-position: $marker-size-half - ($path-height / 2);
font-size: 35px; font-size: 35px;
vertical-align: sub; vertical-align: sub;
} }