Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Removing previous overrides for Kapacitor themed forms 

Using modifier classes defined in theme-dark instead
pull/10616/head
Alex P 2016-11-30 12:28:56 -08:00
parent 5fb23272c0
commit 25801a5f16
4 changed files with 18 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/kapacitor/components/RuleMessage.js
View File

@ -52,7 +52,7 @@ export const RuleMessage = React.createClass({
</div>
<div className="rule-section--item bottom alert-message--endpoint">
<p>Send this Alert to:</p>
<Dropdown className="size-256" selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
<Dropdown className="size-256 dropdown-kapacitor" selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
</div>
</div>
</div>

14
ui/src/kapacitor/components/ValuesSection.js
View File

@ -101,8 +101,8 @@ const Threshold = React.createClass({
<p>Send Alert where</p>
<span>{query.fields.length ? query.fields[0].field : 'Select a Metric'}</span>
<p>is</p>
<Dropdown className="size-176" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
<input className="form-control input-sm size-166" type="text" ref={(r) => this.valueInput = r} defaultValue={value} onKeyUp={this.handleInputChange}></input>
<Dropdown className="size-176 dropdown-kapacitor" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
<input className="form-control input-sm size-166 form-control--green" type="text" ref={(r) => this.valueInput = r} defaultValue={value} onKeyUp={this.handleInputChange}></input>
</div>
);
},
@ -145,13 +145,13 @@ const Relative = React.createClass({
return (
<div className="value-selector">
<p>Send Alert when</p>
<Dropdown className="size-106"items={changes} selected={change} onChoose={this.handleDropdownChange} />
<Dropdown className="size-106 dropdown-kapacitor"items={changes} selected={change} onChoose={this.handleDropdownChange} />
<p>compared to previous</p>
<Dropdown className="size-66" items={shifts} selected={shift} onChoose={this.handleDropdownChange} />
<Dropdown className="size-66 dropdown-kapacitor" items={shifts} selected={shift} onChoose={this.handleDropdownChange} />
<p>is</p>
<Dropdown className="size-176" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
<Dropdown className="size-176 dropdown-kapacitor" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
<input
className="form-control input-sm size-166"
className="form-control input-sm size-166 form-control--green"
ref={(r) => this.input = r}
defaultValue={value}
onKeyUp={this.handleInputChange}
@ -186,7 +186,7 @@ const Deadman = React.createClass({
return (
<div className="value-selector">
<p>Send Alert if Data is missing for</p>
<Dropdown className="size-66" items={periods} selected={this.props.rule.values.period} onChoose={this.handleChange} />
<Dropdown className="size-66 dropdown-kapacitor" items={periods} selected={this.props.rule.values.period} onChoose={this.handleChange} />
</div>
);
},

43
ui/src/style/enterprise_style/kapacitor.scss
View File

@ -172,6 +172,10 @@ div.query-editor.kapacitor-metric-selector {
border-radius: $kap-radius-lg $kap-radius-lg 0 0;
border: 0;
padding: $kap-padding-md $kap-padding-lg;
code {
line-height: 1.5em;
}
}
// Tabs
@ -521,8 +525,7 @@ div.query-editor.kapacitor-metric-selector {
.rule-builder {
input[type="text"] {
background-color: $kapacitor-graphic-color;
color: $kapacitor-accent;
border-color: $g5-pepper;
color: $kapacitor-accent !important;
font-weight: 600;
font-size: $kapacitor-font-sm;
font-family: Consolas, "Lucida Console", Monaco, monospace;
@ -532,7 +535,7 @@ div.query-editor.kapacitor-metric-selector {
border-color: $kapacitor-accent;
outline: none;
box-shadow: none;
color: $g20-white;
color: $g20-white !important;
}
}
.dropdown-toggle,
@ -583,40 +586,6 @@ div.query-editor.kapacitor-metric-selector {
.size-49 {
width: 49px;
}
.dropdown-menu {
width: 100%;
min-width: 100%;
padding: 0;
margin: 0;
border-radius: 4px;
@include gradient-v($c-viridian,$c-ocean);
> li {
width: 100%;
}
> li > a {
text-transform: capitalize;
font-size: $kapacitor-font-sm;
padding: ($kap-padding-sm / 2) $kap-padding-sm;
font-weight: 600;
color: transparentize($g20-white, 0.25);
border-radius: 0;
&:hover {
background-color: $c-rainforest;
color: $g20-white;
}
}
> li:first-child > a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
> li:last-child > a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
}
.chronograf-header__editable {

10
ui/src/style/enterprise_style/theme-dark.scss
View File

@ -21,8 +21,8 @@
}
.btn.btn-sm {
font-size: 13px;
line-height: 28px !important;
height: 28px !important;
line-height: 30px !important;
height: 30px !important;
padding: 0 9px !important;
}
@ -100,8 +100,6 @@
min-height: 70px;
max-height: 290px;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
@include custom-scrollbar($c-pool,$c-laser);
@include gradient-h($c-ocean,$c-pool);
@ -135,7 +133,7 @@
border-radius: 3px 3px 0 0;
}
}
.dropdown-menu--kapacitor {
.dropdown.dropdown-kapacitor .dropdown-menu {
@include custom-scrollbar($c-rainforest,$c-honeydew);
@include gradient-h($c-pool,$c-rainforest);
@ -147,7 +145,7 @@
}
}
}
.dropdown-menu--chronograf {
.dropdown.dropdown-chronograf .dropdown-menu {
@include custom-scrollbar($c-comet,$c-potassium);
@include gradient-h($c-ocean,$c-comet);