Starting css refactor for grafana-target

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

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

View File

@ -5,180 +5,175 @@
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">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
<li role="menuitem"><a tabindex="1" ng-click="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a></li>
<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up </a></li>
<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
</ul>
</div>
</li>
<li class="grafana-target-segment last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
<div class="grafana-target-inner">
<ul class="grafana-segment-list pull-right">
<li class="grafana-target-segment">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
<ul class="grafana-segment-list">
<li>
<a class="grafana-target-segment" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<!-- Raw Query mode -->
<ul class="grafana-segment-list" ng-show="target.rawQuery">
<li>
<input type="text"
class="grafana-target-segment-input span10"
ng-model="target.query"
placeholder="select ..."
focus-me="target.rawQuery"
spellcheck='false'
data-min-length=0 data-items=100
ng-model-onblur
ng-blur="get_data()">
</li>
</ul>
<!-- Query editor mode -->
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
<li class="grafana-target-segment">
series
</li>
<li>
<input type="text"
class="grafana-target-segment-input span8"
ng-model="target.series"
spellcheck='false'
bs-typeahead="listSeries"
match-all="true"
min-length="3"
placeholder="series name"
data-min-length=0 data-items=100
ng-blur="seriesBlur()">
</li>
<li class="grafana-target-segment">
alias
</li>
<li>
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
spellcheck='false' placeholder="alias" ng-blur="get_data()">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="grafana-target-inner">
<!-- Raw Query mode -->
<ul class="grafana-segment-list" ng-show="target.rawQuery">
<li class="grafana-target-segment">
<i class="fa fa-eye invisible"></i>
</li>
<li class="grafana-target-segment">
alias
</li>
<li>
<input type="text"
class="input-medium grafana-target-segment-input"
ng-model="target.alias"
spellcheck='false'
placeholder="alias"
ng-blur="get_data()">
</li>
<li class="grafana-target-segment">
group by time
</li>
<li>
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" >
</li>
</ul>
<!-- Query editor mode -->
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
<li class="grafana-target-segment">
<i class="fa fa-eye invisible"></i>
</li>
<li class="grafana-target-segment">
select
</li>
<li class="dropdown">
<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
</span>
</li>
<li class="grafana-target-segment">
where
</li>
<li>
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
</li>
<li class="grafana-target-segment">
group by time
</li>
<li>
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" >
</li>
<li class="grafana-target-segment">
and
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
</li>
<li class="dropdown">
<a class="grafana-target-segment pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
<span ng-show="target.fill">
fill ({{target.fill}})
</span>
<span ng-show="!target.fill">
no fill
</span>
</a>
<ul class="dropdown-menu">
<li><a ng-click="target.fill = ''">no fill</a></li>
<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
<li><a ng-click="target.fill = '0'">fill (0)</a></li>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
<li role="menuitem"><a tabindex="1" ng-click="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a></li>
<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up </a></li>
<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
</ul>
</li>
</div>
</li>
<li class="grafana-target-segment last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
</ul>
<ul class="grafana-segment-list">
<li>
<a class="grafana-target-segment" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<!-- Raw Query mode -->
<ul class="grafana-segment-list" ng-show="target.rawQuery">
<li>
<input type="text"
class="grafana-target-segment-input span10"
ng-model="target.query"
placeholder="select ..."
focus-me="target.rawQuery"
spellcheck='false'
data-min-length=0 data-items=100
ng-model-onblur
ng-blur="get_data()">
</li>
</ul>
<!-- Query editor mode -->
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
<li class="grafana-target-segment">
series
</li>
<li>
<input type="text"
class="grafana-target-segment-input span8"
ng-model="target.series"
spellcheck='false'
bs-typeahead="listSeries"
match-all="true"
min-length="3"
placeholder="series name"
data-min-length=0 data-items=100
ng-blur="seriesBlur()">
</li>
<li class="grafana-target-segment">
alias
</li>
<li>
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
spellcheck='false' placeholder="alias" ng-blur="get_data()">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="grafana-target-inner">
<!-- Raw Query mode -->
<ul class="grafana-segment-list" ng-show="target.rawQuery">
<li class="grafana-target-segment">
<i class="fa fa-eye invisible"></i>
</li>
<li class="grafana-target-segment">
alias
</li>
<li>
<input type="text"
class="input-medium grafana-target-segment-input"
ng-model="target.alias"
spellcheck='false'
placeholder="alias"
ng-blur="get_data()">
</li>
<li class="grafana-target-segment">
group by time
</li>
<li>
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" >
</li>
</ul>
<!-- Query editor mode -->
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
<li class="grafana-target-segment">
<i class="fa fa-eye invisible"></i>
</li>
<li class="grafana-target-segment">
select
</li>
<li class="dropdown">
<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
</span>
</li>
<li class="grafana-target-segment">
where
</li>
<li>
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
</li>
<li class="grafana-target-segment">
group by time
</li>
<li>
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" >
</li>
<li class="grafana-target-segment">
and
</li>
<li>
<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
</li>
<li class="dropdown">
<a class="grafana-target-segment pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
<span ng-show="target.fill">
fill ({{target.fill}})
</span>
<span ng-show="!target.fill">
no fill
</span>
</a>
<ul class="dropdown-menu">
<li><a ng-click="target.fill = ''">no fill</a></li>
<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
<li><a ng-click="target.fill = '0'">fill (0)</a></li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<section class="grafana-metric-options">

View File

@ -4,216 +4,213 @@
ng-class="{'grafana-target-hidden': target.hide}"
ng-controller="OpenTSDBQueryCtrl"
ng-init="init()">
<div class="grafana-target-inner">
<ul class="grafana-segment-list pull-right">
<li class="grafana-target-segment">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
</li>
</ul>
</div>
</li>
<li class="grafana-target-segment last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<div class="grafana-target-inner-wrapper">
<div class="grafana-target-inner">
<ul class="grafana-segment-list pull-right">
<li class="grafana-target-segment">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
</li>
</ul>
</div>
</li>
<li class="grafana-target-segment last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="grafana-segment-list">
<li>
<a class="grafana-target-segment"
ng-click="target.hide = !target.hide; get_data();"
role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<ul class="grafana-segment-list">
<li>
<a class="grafana-target-segment"
ng-click="target.hide = !target.hide; get_data();"
role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<ul class="grafana-segment-list" role="menu">
<li>
<input type="text"
class="grafana-target-segment-input"
ng-model="target.metric"
spellcheck='false'
bs-typeahead="suggestMetrics"
placeholder="metric name"
data-min-length=0 data-items=100
ng-blur="targetBlur()"
>
<a bs-tooltip="target.errors.metric"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.metric">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="grafana-target-segment">
Aggregator
</li>
<li>
<select ng-model="target.aggregator"
class="grafana-target-segment-input input-small"
ng-options="agg for agg in aggregators"
ng-change="targetBlur()">
</select>
<a bs-tooltip="target.errors.aggregator"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.aggregator">
<i class="fa fa-warning"></i>
</a>
</li>
<ul class="grafana-segment-list" role="menu">
<li>
<input type="text"
class="grafana-target-segment-input"
ng-model="target.metric"
spellcheck='false'
bs-typeahead="suggestMetrics"
placeholder="metric name"
data-min-length=0 data-items=100
ng-blur="targetBlur()"
>
<a bs-tooltip="target.errors.metric"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.metric">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="grafana-target-segment">
Aggregator
</li>
<li>
<select ng-model="target.aggregator"
class="grafana-target-segment-input input-small"
ng-options="agg for agg in aggregators"
ng-change="targetBlur()">
</select>
<a bs-tooltip="target.errors.aggregator"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.aggregator">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="grafana-target-segment">
Rate:
<input type="checkbox"
class="grafana-target-option-checkbox"
ng-model="target.shouldComputeRate"
ng-change="targetBlur()"
>
</li>
<li class="grafana-target-segment" ng-hide="!target.shouldComputeRate">
Counter:
<li class="grafana-target-segment">
Rate:
<input type="checkbox"
class="grafana-target-option-checkbox"
ng-disabled="!target.shouldComputeRate"
ng-model="target.isCounter"
ng-change="targetBlur()">
</li>
<li class="grafana-target-segment" ng-hide="!target.isCounter">
Counter Max:
</li>
<li ng-hide="!target.isCounter">
<input type="text"
class="grafana-target-segment-input input-medium"
ng-disabled="!target.shouldComputeRate"
ng-model="target.counterMax"
spellcheck='false'
placeholder="Counter max value"
ng-blur="targetBlur()"
/>
</li>
<li class="grafana-target-segment" ng-hide="!target.isCounter">
Counter Reset Value:
</li>
<li ng-hide="!target.isCounter">
<input type="text"
class="grafana-target-segment-input input-medium"
ng-disabled="!target.shouldComputeRate"
ng-model="target.counterResetValue"
spellcheck='false'
placeholder="Counter reset value"
ng-blur="targetBlur()"
/>
</li>
<li class="grafana-target-segment">
Alias:
</li>
<li>
<input type="text"
class="grafana-target-segment-input input-medium"
ng-model="target.alias"
spellcheck='false'
placeholder="series alias"
data-min-length=0 data-items=100
ng-blur="targetBlur()"
/>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="grafana-target-inner">
<ul class="grafana-segment-list" role="menu">
<li class="grafana-target-segment">
Downsample:
<input type="checkbox"
class="grafana-target-option-checkbox"
ng-model="target.shouldDownsample"
ng-change="targetBlur(target)"
ng-model="target.shouldComputeRate"
ng-change="targetBlur()"
>
</li>
</li>
<li class="grafana-target-segment" ng-hide="!target.shouldComputeRate">
Counter:
<input type="checkbox"
class="grafana-target-option-checkbox"
ng-disabled="!target.shouldComputeRate"
ng-model="target.isCounter"
ng-change="targetBlur()">
</li>
<li class="grafana-target-segment" ng-hide="!target.isCounter">
Counter Max:
</li>
<li ng-hide="!target.isCounter">
<input type="text"
class="grafana-target-segment-input input-medium"
ng-disabled="!target.shouldComputeRate"
ng-model="target.counterMax"
spellcheck='false'
placeholder="Counter max value"
ng-blur="targetBlur()"
/>
</li>
<li class="grafana-target-segment" ng-hide="!target.isCounter">
Counter Reset Value:
</li>
<li ng-hide="!target.isCounter">
<input type="text"
class="grafana-target-segment-input input-medium"
ng-disabled="!target.shouldComputeRate"
ng-model="target.counterResetValue"
spellcheck='false'
placeholder="Counter reset value"
ng-blur="targetBlur()"
/>
</li>
<li class="grafana-target-segment">
Alias:
</li>
<li>
<input type="text"
class="grafana-target-segment-input input-medium"
ng-model="target.alias"
spellcheck='false'
placeholder="series alias"
data-min-length=0 data-items=100
ng-blur="targetBlur()"
/>
</li>
<li ng-hide="!target.shouldDownsample">
</ul>
<div class="clearfix"></div>
</div>
<div class="grafana-target-inner">
<ul class="grafana-segment-list" role="menu">
<li class="grafana-target-segment">
Downsample:
<input type="checkbox"
class="grafana-target-option-checkbox"
ng-model="target.shouldDownsample"
ng-change="targetBlur(target)"
>
</li>
<li ng-hide="!target.shouldDownsample">
<input type="text"
class="input-small grafana-target-segment-input"
ng-disabled="!target.shouldDownsample"
ng-model="target.downsampleInterval"
ng-change="targetBlur()"
placeholder="interval"
>
</li>
<li class="grafana-target-segment" ng-hide="!target.shouldDownsample">
Aggregator
</li>
<li ng-hide="!target.shouldDownsample">
<select ng-model="target.downsampleAggregator"
class="grafana-target-segment-input input-small"
ng-options="agg for agg in aggregators"
ng-change="targetBlur()">
</select>
</li>
<li class="grafana-target-segment">
Tags:
</li>
<li ng-repeat="(key, value) in target.tags track by $index" class="grafana-target-segment">
{{key}}&nbsp;=&nbsp;{{value}}
<a ng-click="removeTag(key)">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="grafana-target-segment" ng-hide="addTagMode">
<a ng-click="addTag()">
<i class="fa fa-plus"></i>
</a>
</li>
<li ng-show="addTagMode">
<input type="text"
class="input-small grafana-target-segment-input"
ng-disabled="!target.shouldDownsample"
ng-model="target.downsampleInterval"
ng-change="targetBlur()"
placeholder="interval"
>
</li>
<li class="grafana-target-segment" ng-hide="!target.shouldDownsample">
Aggregator
</li>
<li ng-hide="!target.shouldDownsample">
<select ng-model="target.downsampleAggregator"
class="grafana-target-segment-input input-small"
ng-options="agg for agg in aggregators"
ng-change="targetBlur()">
</select>
</li>
<li class="grafana-target-segment">
Tags:
</li>
<li ng-repeat="(key, value) in target.tags track by $index" class="grafana-target-segment">
{{key}}&nbsp;=&nbsp;{{value}}
<a ng-click="removeTag(key)">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="grafana-target-segment" ng-hide="addTagMode">
spellcheck='false'
bs-typeahead="suggestTagKeys"
data-min-length=0 data-items=100
ng-model="target.currentTagKey"
placeholder="key">
<input type="text"
class="input-small grafana-target-segment-input"
spellcheck='false'
bs-typeahead="suggestTagValues"
data-min-length=0 data-items=100
ng-model="target.currentTagValue"
placeholder="value">
<a ng-click="addTag()">
<i class="fa fa-plus"></i>
</a>
</li>
<a bs-tooltip="target.errors.tags"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.tags">
<i class="fa fa-warning"></i>
</a>
</li>
</ul>
<li ng-show="addTagMode">
<input type="text"
class="input-small grafana-target-segment-input"
spellcheck='false'
bs-typeahead="suggestTagKeys"
data-min-length=0 data-items=100
ng-model="target.currentTagKey"
placeholder="key">
<input type="text"
class="input-small grafana-target-segment-input"
spellcheck='false'
bs-typeahead="suggestTagValues"
data-min-length=0 data-items=100
ng-model="target.currentTagValue"
placeholder="value">
<a ng-click="addTag()">
<i class="fa fa-plus"></i>
</a>
<a bs-tooltip="target.errors.tags"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.tags">
<i class="fa fa-warning"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

View File

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

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;
}
}