diff --git a/public/app/plugins/panel/gettingstarted/module.html b/public/app/plugins/panel/gettingstarted/module.html index ae5f3b9ed54..86605c52fb8 100644 --- a/public/app/plugins/panel/gettingstarted/module.html +++ b/public/app/plugins/panel/gettingstarted/module.html @@ -8,8 +8,8 @@ diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss index b3967c0b421..9703f8086d0 100644 --- a/public/sass/components/_panel_gettingstarted.scss +++ b/public/sass/components/_panel_gettingstarted.scss @@ -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; } - - -