diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html index b5c59862e5d..549ca31b442 100644 --- a/public/app/plugins/panel/dashlist/module.html +++ b/public/app/plugins/panel/dashlist/module.html @@ -1,3 +1,51 @@ +
+
+
+ Getting Started with Grafana + +
+
+
+
Next up:
+ Create your first data source +

If Grafana dashboards are like the eyes, man, datasources are the heart. Cosmic.

+ +
+ +
+
+
diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss index dfb11dfb848..656513aa8c9 100644 --- a/public/sass/components/_panel_dashlist.scss +++ b/public/sass/components/_panel_dashlist.scss @@ -24,3 +24,125 @@ background-color: $tight-form-func-bg; } } + +.dashlist-flex-container { + display: flex; + justify-content: space-between; + flex-direction: row; + background-color: $tight-form-bg; + padding: 20px; +} + +.dashlist-panel-CTA-flex-container--left { + flex-grow: 2; + align-items: center; +} + +ul.dashlist-panel-CTA-flex-container--right { + padding-left: 1rem; + border-left: solid 1px black; + list-style-type: none; +} + +li.dashlist-panel-CTA-items { + text-align: left; + margin: 10px 0; +} + +li.dashlist-icons-container--active::before { + content: ' '; + border-top: 1px solid black; + width: 13px; + position: absolute; + margin-left: -14px; + margin-top: 9px; +} + +p.dashlist-blurb{ + font-size:14px; + color: $text-color; + margin: 0; +} + +a.dashlist-blurb{ + font-size:14px; + color: $text-color; + margin: 0; +} + +a.dashlist-blurb:hover{ + text-decoration: underline; +} + +.dashlist-blurb-success { + color: $text-color-weak; + text-decoration: line-through; +} + +a.dashlist-blurb-upcoming { + color: $text-color-weak; +} + +.dashlist-icon-active { + color: $brand-primary; + -webkit-text-fill-color: transparent; + background: $brand-gradient; + -webkit-background-clip: text; + text-decoration:none; + font-size: 20px; + vertical-align: sub; +} + +.dashlist-icon-upcoming { + color: $text-color-weak; + text-decoration:none; + font-size: 20px; + vertical-align: sub; +} + +.rt-dashboard-icon-warning { + color: $text-color-strong; + text-decoration:none; + font-size: 20px; + vertical-align: sub; +} + +.dashlist-icon-success { + color: $online; + font-size: 24px; + text-decoration:none; + vertical-align: sub; +} + +.dashlist-icons-container { + width: 30px; + display: inline-block; + margin-right: 5px; + text-align: center; + vertical-align: top; +} + +h5.dashlist-next-up { + color: $text-color-weak; + font-style: italic; +} + +p.dashlist-next-up-blurb { + color: $text-color-weak; + max-width: 375px; +} + +.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; + } +}