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

Add progress "dots" to rule builder sub-headers

pull/10616/head
Alex P 2017-10-04 15:04:57 -07:00
parent 82522f5284
commit d442f494de
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,7 @@ const ValuesSection = ({
)}
</TabList>
<div>
<h3 className="rule-builder--sub-header">Time Series</h3>
<h3 className="rule-section--sub-heading">Time Series</h3>
<DataSection
query={query}
timeRange={timeRange}
@ -60,7 +60,7 @@ const ValuesSection = ({
isDeadman={isDeadman(rule)}
/>
</div>
<h3 className="rule-builder--sub-header">Rule Conditions</h3>
<h3 className="rule-section--sub-heading">Rule Conditions</h3>
<TabPanels>
<TabPanel>
<Threshold

28
ui/src/style/pages/kapacitor.scss
View File

@ -82,6 +82,27 @@ $rule-builder--radius-lg: 5px;
left: ($rule-builder--dot / 2);
}
}
.rule-section--sub-heading {
margin: 0;
padding: $rule-builder--section-gap 0 $rule-builder--padding-md 0;
font-size: $page-header-size;
font-weight: $page-header-weight;
color: $g12-forge;
position: relative;
// Dot
&:after {
content: '';
position: absolute;
width: $rule-builder--dot;
height: $rule-builder--dot;
background-color: $rule-builder--accent-color;
border: 6px solid $rule-builder--accent-line-color;
border-radius: 50%;
top: ($rule-builder--section-gap + 3px);
left: -$rule-builder--left-gutter;
}
}
// Override appearance of lines and dots for first section
.rule-section:first-of-type {
.rule-section--heading {
@ -213,13 +234,6 @@ $rule-builder--radius-lg: 5px;
Sectiom 2 - Rule Conditions
-----------------------------------------------------------------------------
*/
.rule-builder--sub-header {
margin: 0;
padding: 30px 0 13px 0;
font-size: 19px;
font-weight: 400 !important;
color: #a4a8b6;
}
.rule-builder--metric {
height: 30px;
line-height: 30px;