Various css updates

This commit is contained in:
Torkel Ödegaard
2015-02-07 22:00:33 +01:00
parent 48e5a82e7f
commit f82cb3aefe
4 changed files with 36 additions and 15 deletions
@@ -27,16 +27,17 @@
<i class="fa fa-bolt"></i> &nbsp; <i class="fa fa-bolt"></i> &nbsp;
{{annotation.name}} {{annotation.name}}
</td> </td>
<td style="width: 1%"> <td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<a ng-click="edit(annotation)" class="btn btn-success btn-small"> <td style="width: 1%"><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%" class="nobg">
<a ng-click="edit(annotation)" class="btn btn-inverse btn-mini">
<i class="fa fa-edit"></i> <i class="fa fa-edit"></i>
Edit Edit
</a> </a>
</td> </td>
<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td> <td style="width: 1%" class="nobg">
<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td> <a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-mini">
<td style="width: 1%">
<a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
</td> </td>
@@ -55,9 +55,9 @@
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="ac in accounts"> <tr ng-repeat="ac in accounts">
<td style="width: 98%">Name: {{ac.name}}</td> <td style="width: 98%"><strong>Name: </strong> {{ac.name}}</td>
<td>Role: {{ac.role}}</td> <td><strong>Role: </strong> {{ac.role}}</td>
<td> <td class="nobg max-width-btns">
<span class="btn btn-primary" ng-show="ac.isUsing"> <span class="btn btn-primary" ng-show="ac.isUsing">
Current Current
</span> </span>
+22 -2
View File
@@ -3,13 +3,22 @@
tr:nth-child(odd) td { tr:nth-child(odd) td {
background-color: @grafanaListAccent; background-color: @grafanaListAccent;
&.nobg {
background-color: transparent;
border:none;
border-left: 1px solid @grafanaListBorderBottom;
}
} }
td, th { td {
text-align: left;
padding: 5px 10px; padding: 5px 10px;
white-space: nowrap; white-space: nowrap;
border-bottom: 1px solid @grafanaListBorderBottom; border-bottom: 1px solid @grafanaListBorderBottom;
&.nobg {
background-color: transparent;
border:none;
border-left: 1px solid @grafanaListBorderBottom;
}
} }
tr:first-child { tr:first-child {
@@ -25,6 +34,17 @@
td:last-child { td:last-child {
border-right: 1px solid @grafanaListBorderBottom; border-right: 1px solid @grafanaListBorderBottom;
} }
.max-width-btns {
.btn {
width: 100%;
}
}
strong {
font-weight: normal;
color: @white;
}
} }
.max-width { .max-width {
+4 -4
View File
@@ -16,7 +16,7 @@
// Accent colors // Accent colors
// ------------------------- // -------------------------
@blue: #33B5E5; @blue: #33B5E5;
@blueDark: #0086b3; @blueDark: #005f81;
@green: #669900; @green: #669900;
@red: #CC3900; @red: #CC3900;
@yellow: #ECBB13; @yellow: #ECBB13;
@@ -89,7 +89,7 @@
@grafanaListAccent: lighten(@grayDarker, 2%); @grafanaListAccent: lighten(@grayDarker, 2%);
@grafanaListBorderTop: @grayDark; @grafanaListBorderTop: @grayDark;
@grafanaListBorderBottom: @black; @grafanaListBorderBottom: @black;
@grafanaListHighlight: #343434; @grafanaListHighlight: #333;
@grafanaListMainLinkColor: @textColor; @grafanaListMainLinkColor: @textColor;
// Scrollbars // Scrollbars
@@ -110,8 +110,8 @@
@btnBackgroundHighlight: darken(@grayLight, 15%); @btnBackgroundHighlight: darken(@grayLight, 15%);
@btnBorder: #bbb; @btnBorder: #bbb;
@btnPrimaryBackground: lighten(@blueDark, 5%); @btnPrimaryBackground: @blueDark;
@btnPrimaryBackgroundHighlight: darken(@blueDark, 5%); @btnPrimaryBackgroundHighlight: lighten(@blueDark, 10%);
@btnInfoBackground: lighten(@purple, 5%); @btnInfoBackground: lighten(@purple, 5%);
@btnInfoBackgroundHighlight: darken(@purple, 5%); @btnInfoBackgroundHighlight: darken(@purple, 5%);