Commit e7f5b765 by Matt

Added styles and new markup for dashlist panel

parent f1f923ab
<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">
......
......@@ -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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment