IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Starting css refactor for grafana-target

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-01-16 08:35:32 +01:00
parent af3aa81d71
commit e1f410d32e
6 changed files with 524 additions and 533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -12,6 +12,7 @@
**Fixes**
- [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query
- [Issue #1309](https://github.com/grafana/grafana/issues/1309). Graph: Fixed issue when using zero as a grid threshold
- [Issue #1345](https://github.com/grafana/grafana/issues/1345). UI: Fixed position of confirm modal when scrolled down
**Tech**
- [Issue #1311](https://github.com/grafana/grafana/issues/1311). Tech: Updated Font-Awesome from 3.2 to 4.2

5
src/app/features/influxdb/partials/query.editor.html
View File

@ -5,8 +5,6 @@
ng-class="{'grafana-target-hidden': target.hide}"
ng-controller="InfluxQueryCtrl"
ng-init="init()">
<div class="grafana-target-inner-wrapper">
<div class="grafana-target-inner">
<ul class="grafana-segment-list pull-right">
<li class="grafana-target-segment">
@ -175,10 +173,7 @@
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<section class="grafana-metric-options">

3
src/app/features/opentsdb/partials/query.editor.html
View File

@ -4,8 +4,6 @@
ng-class="{'grafana-target-hidden': target.hide}"
ng-controller="OpenTSDBQueryCtrl"
ng-init="init()">
<div class="grafana-target-inner-wrapper">
<div class="grafana-target-inner">
<ul class="grafana-segment-list pull-right">
<li class="grafana-target-segment">
@ -215,5 +213,4 @@
<div class="clearfix"></div>
</div>
</div>
</div>
</div>

1
src/css/less/forms.less
View File

@ -26,3 +26,4 @@ input[type="checkbox"]:checked+label {
background: url(@checkboxImageUrl) 0px -18px no-repeat;
}

170
src/css/less/grafana.less
View File

@ -7,6 +7,7 @@
@import "panel.less";
@import "forms.less";
@import "singlestat.less";
@import "tightform.less";
.row-control-inner {
padding:0px;
@ -101,175 +102,6 @@
position:relative;
}
.grafana-target:last-child {
border-bottom: 1px solid @grafanaTargetBorder;
}
.grafana-target-inner {
border-top: 1px solid @grafanaTargetBorder;
border-left: 1px solid @grafanaTargetBorder;
border-right: 1px solid @grafanaTargetBorder;
background: @grafanaTargetBackground;
width: 100%;
}
.grafana-target-onoff {
display: inline-block;
padding: 5px 7px;
display: inline-block;
}
.grafana-segment-list {
list-style: none;
margin: 0;
>li {
float: left;
}
}
.grafana-metric-options {
margin-top: 35px;
}
// fix for fixed positioned panel & scrolling
.grafana-segment-dropdown-menu {
margin-bottom: 70px;
}
.grafana-target-segment {
padding: 8px 7px;
display: inline-block;
font-weight: normal;
border-right: 1px solid @grafanaTargetSegmentBorder;
color: @grafanaTargetColor;
display: inline-block;
.has-open-function & {
padding-top: 25px;
}
.grafana-target-hidden & {
color: @grafanaTargetColorHide;
}
&:hover, &:focus {
text-decoration: none;
}
&a:hover {
background: @grafanaTargetFuncBackground;
}
&.template-param-name {
border-right: none;
padding-right: 3px;
}
&.annotation-segment {
padding: 8px 15px;
}
&.last {
border-right: none;
}
}
.grafana-target-segment-icon {
i {
width: 15px;
text-align: center;
display: inline-block;
}
}
.grafana-target-function {
background: @grafanaTargetFuncBackground;
> a {
color: @grafanaTargetColor;
}
> a:hover {
color: @linkColor;
}
&.show-function-controls {
padding-top: 5px;
min-width: 100px;
text-align: center;
}
}
input[type=text].grafana-function-param-input {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
input[type=text].grafana-target-text-input {
padding: 8px 7px;
border: none;
margin: 0px;
background: transparent;
float: left;
color: @grafanaTargetColor;
border-radius: 0;
border-right: 1px solid @grafanaTargetSegmentBorder;
}
[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
border: none;
border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px;
border-radius: 0;
padding: 8px 4px;
&.last {
border-right: none;
}
}
input[type=checkbox].grafana-target-option-checkbox {
margin: 0;
}
select.grafana-target-segment-input {
border: none;
border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px;
border-radius: 0;
height: 36px;
padding: 8px 5px;
&.last {
border-right: none;
}
}
.grafana-target .dropdown {
padding: 0; margin: 0;
}
.graphite-func-controls {
display: none;
text-align: center;
.fa-arrow-left {
float: left;
position: relative;
top: 2px;
}
.fa-arrow-right {
float: right;
position: relative;
top: 2px;
}
.fa-remove {
margin-left: 10px;
}
}
.grafana-target {
.popover-content {
padding: 0;
}
}
.scrollable {
max-height: 300px;
overflow: auto;

165
src/css/less/tightform.less Normal file
View File

@ -0,0 +1,165 @@
// old graphite-target
.tight-form:last-child {
border-bottom: 1px solid @grafanaTargetBorder;
.dropdown {
padding: 0; margin: 0;
}
}
// old graphite-target-inner
.tight-form-row {
border-top: 1px solid @grafanaTargetBorder;
border-left: 1px solid @grafanaTargetBorder;
border-right: 1px solid @grafanaTargetBorder;
background: @grafanaTargetBackground;
width: 100%;
}
// old graphite-segment-list
.tight-form-list {
list-style: none;
margin: 0;
>li {
float: left;
}
}
.grafana-metric-options {
margin-top: 35px;
}
// old grafana-target-segment {
.tight-form-item {
padding: 8px 7px;
display: inline-block;
font-weight: normal;
border-right: 1px solid @grafanaTargetSegmentBorder;
color: @grafanaTargetColor;
display: inline-block;
.has-open-function & {
padding-top: 25px;
}
// old .grafana-target-hidden & {
.tight-form-disabled & {
color: @grafanaTargetColorHide;
}
&:hover, &:focus {
text-decoration: none;
}
&a:hover {
background: @grafanaTargetFuncBackground;
}
&.template-param-name {
border-right: none;
padding-right: 3px;
}
&.annotation-segment {
padding: 8px 15px;
}
&.last {
border-right: none;
}
}
//.grafana-target-segment-icon {
.tight-form-item-icon {
i {
width: 15px;
text-align: center;
display: inline-block;
}
}
//.grafana-target-function {
.tight-form-item-func {
background: @grafanaTargetFuncBackground;
> a {
color: @grafanaTargetColor;
}
> a:hover {
color: @linkColor;
}
&.show-function-controls {
padding-top: 5px;
min-width: 100px;
text-align: center;
}
}
//input[type=text].grafana-function-param-input {
input[type=text].tight-form-func-param {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
//input[type=text].grafana-target-text-input {
// input[type=text].tight-form-input {
// padding: 8px 7px;
// border: none;
// margin: 0px;
// background: transparent;
// float: left;
// color: @grafanaTargetColor;
// border-radius: 0;
// border-right: 1px solid @grafanaTargetSegmentBorder;
// }
//[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
[type=text].tight-form-input, [type=number].tight-form-input {
border: none;
border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px;
border-radius: 0;
padding: 8px 4px;
&.last {
border-right: none;
}
}
// input[type=checkbox].grafana-target-option-checkbox {
// margin: 0;
// }
select.tight-form-input {
border: none;
border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px;
border-radius: 0;
height: 36px;
padding: 8px 5px;
&.last {
border-right: none;
}
}
//.graphite-func-controls {
.tight-form-func-controls {
display: none;
text-align: center;
.fa-arrow-left {
float: left;
position: relative;
top: 2px;
}
.fa-arrow-right {
float: right;
position: relative;
top: 2px;
}
.fa-remove {
margin-left: 10px;
}
}