Move editable page header styles into their own sheet

Also updating to latest naming scheme

ui/src/dashboards/components/DashboardHeaderEdit.js

@@ -23,10 +23,10 @@ class DashboardEditHeader extends Component {
         <div className="page-header__container">
           <div className="page-header__left">
             <input
-              className="chronograf-header__editing"
+              className="page-header--editing"
               autoFocus={true}
               value={name}
-              placeholder="Dashboard name"
+              placeholder="Name this Dashboard"
               onChange={(e) => this.handleChange(e.target.value)}
             />
           </div>

ui/src/kapacitor/components/RuleHeader.js

@@ -81,7 +81,7 @@ export const RuleHeader = React.createClass({
 
     const name = isEditingName ?
       (<input
-        className="chronograf-header__editing"
+        className="page-header--editing kapacitor-theme"
         autoFocus={true}
         defaultValue={rule.name}
         ref={r => this.ruleName = r}
@@ -89,7 +89,7 @@ export const RuleHeader = React.createClass({
         onBlur={() => this.handleEditNameBlur(rule)}
         placeholder="Name your rule"
       />) :
-      (<h1 className="chronograf-header__editable" onClick={this.toggleEditName} data-for="rename-kapacitor-tooltip" data-tip="Click to Rename">
+      (<h1 className="page-header--editable kapacitor-theme" onClick={this.toggleEditName} data-for="rename-kapacitor-tooltip" data-tip="Click to Rename">
         {rule.name}
         <span className="icon pencil"></span>
         <ReactTooltip id="rename-kapacitor-tooltip" delayShow={200} effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip kapacitor-tooltip place-bottom" />

ui/src/style/chronograf.scss

@@ -29,6 +29,7 @@
 @import 'components/input-tag-list';
 @import 'components/group-by-time-dropdown';
 @import 'components/page-header-dropdown';
+@import 'components/page-header-editable';
 @import 'components/multi-select-dropdown';
 @import 'components/page-spinner';
 @import 'components/flash-messages';

ui/src/style/components/page-header-editable.scss

@@ -0,0 +1,43 @@
+/*
+    Click to Rename Page Header
+    ----------------------------------------------------------------
+*/
+.page-header--editable {
+  transition: color 0.25s ease;
+
+  &:hover {
+    color: $c-pool;
+    cursor: text !important;
+  }
+  &.kapacitor-theme:hover {
+    color: $c-rainforest;
+  }
+  .icon {
+    cursor: inherit;
+    margin-left: 5px;
+    position: relative;
+    top: -1.5px;
+  }
+}
+.page-header--editing {
+  border: 0;
+  outline: none;
+  background-color: $g0-obsidian;
+  font-size: $page-header-size;
+  font-weight: $page-header-weight;
+  padding: 0;
+  flex: 1;
+  position: relative;
+  top: -1px;
+
+  &:focus {
+    color: $c-pool;
+  }
+  &.kapacitor-theme:focus {
+    color: $c-rainforest;
+  }
+  &::-webkit-input-placeholder { color: $g9-mountain; }
+  &::-moz-placeholder { color: $g9-mountain; }
+  &:-ms-input-placeholder { color: $g9-mountain; }
+  &:-moz-placeholder { color: $g9-mountain; }
+}

ui/src/style/pages/kapacitor.scss

@@ -655,36 +655,4 @@ div.qeditor.kapacitor-metric-selector {
   .size-49 {
     width: 49px;
   }
-}
+}
-
-.chronograf-header__editable {
-  transition: color 0.25s ease;
-
-  &:hover {
-    color: $g13-mist;
-    cursor: text !important;
-  }
-  .icon {
-    cursor: inherit;
-    margin-left: 5px;
-    position: relative;
-    top: -1.5px;
-  }
-}
-.chronograf-header__editing {
-  border: 0;
-  outline: none;
-  background-color: $g0-obsidian;
-  font-size: 20px;
-  font-weight: 400;
-  padding: 0;
-  width: 466px;
-
-  &:focus {
-    color: $kapacitor-accent;
-  }
-  &::-webkit-input-placeholder { color: $g9-mountain; }
-  &::-moz-placeholder { color: $g9-mountain; }
-  &:-ms-input-placeholder { color: $g9-mountain; }
-  &:-moz-placeholder { color: $g9-mountain; }
-}