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

Make scrollbars green themed on Kapacitor pages

pull/10616/head
Alex P 2017-05-08 16:01:52 -07:00
parent 8983cbfe48
commit b6886a8bd8
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,7 +58,7 @@ export const KapacitorRule = React.createClass({
timeRange={timeRange} timeRange={timeRange}
source={source} source={source}
/> />
<FancyScrollbox className="page-contents"> <FancyScrollbox className="page-contents fancy-scroll--kapacitor">
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-xs-12"> <div className="col-xs-12">

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

@ -63,7 +63,7 @@ const PageContents = ({children, source}) => (
</div> </div>
</div> </div>
</div> </div>
<FancyScrollbox className="page-contents"> <FancyScrollbox className="page-contents fancy-scroll--kapacitor">
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-md-12"> <div className="col-md-12">

16
ui/src/style/components/fancy-scrollbars.scss
View File

@ -6,6 +6,9 @@
$scrollbar-track-size: 12px; $scrollbar-track-size: 12px;
$scrollbar-thumb-size: 6px; $scrollbar-thumb-size: 6px;
$scrollbar-color-a: $c-pool;
$scrollbar-color-b: $c-comet;
/* Horizontal Scrollbar Styles */ /* Horizontal Scrollbar Styles */
.fancy-scroll--track-h { .fancy-scroll--track-h {
padding: ($scrollbar-track-size - $scrollbar-thumb-size) / 2; padding: ($scrollbar-track-size - $scrollbar-thumb-size) / 2;
@ -17,7 +20,7 @@ $scrollbar-thumb-size: 6px;
.fancy-scroll--thumb-h { .fancy-scroll--thumb-h {
height: $scrollbar-thumb-size !important; height: $scrollbar-thumb-size !important;
border-radius: ($scrollbar-thumb-size / 2); border-radius: ($scrollbar-thumb-size / 2);
@include gradient-h($c-pool,$c-comet); @include gradient-h($scrollbar-color-a,$scrollbar-color-b);
} }
/* Vertical Scrollbar Styles */ /* Vertical Scrollbar Styles */
.fancy-scroll--track-v { .fancy-scroll--track-v {
@ -30,5 +33,14 @@ $scrollbar-thumb-size: 6px;
.fancy-scroll--thumb-v { .fancy-scroll--thumb-v {
width: $scrollbar-thumb-size !important; width: $scrollbar-thumb-size !important;
border-radius: ($scrollbar-thumb-size / 2); border-radius: ($scrollbar-thumb-size / 2);
@include gradient-v($c-pool,$c-comet); @include gradient-v($scrollbar-color-a,$scrollbar-color-b);
}
/* Kapacitor Theme Scrollbars */
$scrollbar-color-kap-a: $c-rainforest;
$scrollbar-color-kap-b: $c-pool;
.fancy-scroll--kapacitor {
.fancy-scroll--thumb-h { @include gradient-h($scrollbar-color-kap-a,$scrollbar-color-kap-b); }
.fancy-scroll--thumb-v { @include gradient-v($scrollbar-color-kap-a,$scrollbar-color-kap-b); }
} }