Added styles and new markup for dashlist panel

public/app/plugins/panel/dashlist/module.html

@@ -1,3 +1,50 @@
+<div class="dashlist">
+  <div class="dashlist-section">
+    <h6 class="dashlist-section-header">
+      Getting Started with Grafana
+    </h6>
+    <div class="dashlist-flex-container">
+      <div class="dashlist-panel-CTA-flex-container--left">
+        <h4><em>Next up:</em></h4>
+        <h5>Create your first data source</h5>
+        <p class="dashlist-next-up-blurb">If Grafana dashboards are like the eyes, man, datasources are the heart. Cosmic.</p>
+        <button class="btn btn-success">Add Data Source</button>
+      </div>
+      <div class="dashlist-panel-CTA-flex-container--right">
+        <div class="dashlist-panel-CTA-items">
+          <div class="dashlist-icons-container">
+              <i class="icon-gf icon-gf-check dashlist-icon-success"></i>
+          </div>
+          <span class="dashlist-blurb dashlist-blurb-success">Install Grafana like a boss.</span>
+        </div>
+        <div class="dashlist-panel-CTA-items">
+          <div class="dashlist-icons-container dashlist-icons-container--active">
+              <i class="icon-gf icon-gf-datasources dashlist-icon-active"></i>
+          </div>
+          <a href="#" class="dashlist-blurb">Add your first data source.</a>
+        </div>
+        <div class="dashlist-panel-CTA-items">
+          <div class="dashlist-icons-container">
+              <i class="icon-gf icon-gf-dashboard dashlist-icon-upcoming"></i>
+          </div>
+          <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Create your first dashboard.</a>
+        </div>
+        <div class="dashlist-panel-CTA-items">
+          <div class="dashlist-icons-container">
+              <i class="icon-gf icon-gf-users dashlist-icon-upcoming"></i>
+          </div>
+          <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Invite your team.</a>
+        </div>
+        <div class="dashlist-panel-CTA-items">
+          <div class="dashlist-icons-container">
+              <i class="icon-gf icon-gf-grafana-icon dashlist-icon-upcoming"></i>
+          </div>
+          <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Extend on Grafana.net.</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="dashlist" ng-repeat="group in ctrl.groups">
   <div class="dashlist-section" ng-if="group.show">
     <h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">

public/sass/components/_panel_dashlist.scss

@@ -24,3 +24,101 @@
     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;
+}
+
+.dashlist-panel-CTA-flex-container--right {
+  padding-left: 1rem;
+  border-left: solid 1px black;
+}
+
+.dashlist-panel-CTA-items {
+  text-align: left;
+  margin: 10px 0;
+}
+
+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;
+}
+
+.dashlist-icons-container--active:before {
+  border-top: 1px solid black;
+  margin-left: -1em;
+  padding-left: 2em;
+}
+
+p.dashlist-next-up-blurb {
+  color: $text-color-weak;
+  max-width: 375px;
+}