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

Merge branch 'feature/596-select-host' of github.com:influxdata/chronograf into feature/596-select-host

pull/10616/head
Hunter Trujillo 2017-01-12 14:59:13 -07:00
parent e9362a2da9 ef2f71e46e
commit 1c808ed683
3 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/hosts/containers/HostPage.js
View File

@ -139,9 +139,9 @@ export const HostPage = React.createClass({
<div className="page-header full-width">
<div className="page-header__container">
<div className="page-header__left">
<div className="dropdown minimal-dropdown">
<div className="dropdown page-header-dropdown">
<button className="dropdown-toggle" type="button" data-toggle="dropdown">
<span className="button-text btn-info">{hostID}</span>
<span className="button-text">{hostID}</span>
<span className="caret"></span>
</button>
<ul className="dropdown-menu" aria-labelledby="dropdownMenu1">

1
ui/src/style/chronograf.scss
View File

@ -27,6 +27,7 @@
// Components
@import 'components/group-by-time-dropdown';
@import 'components/page-header-dropdown';
@import 'components/multi-select-dropdown';
@import 'components/page-spinner';
@import 'components/flash-messages';

27
ui/src/style/components/page-header-dropdown.scss Normal file
View File

@ -0,0 +1,27 @@
.page-header-dropdown {
.dropdown-toggle {
height: 38px;
padding-left: 0;
min-width: 50px;
width: auto;
border: 0;
background-color: transparent;
text-transform: uppercase;
padding-right: (11px + 12px); // caret width + offset
font-size: 17px;
font-weight: 400;
transition: color 0.25s ease;
}
.dropdown-toggle > .caret {
right: 0;
}
.dropdown-toggle > .caret:after {
content: "\e910";
font-size: 17px;
}
/* Hover & Open State */
&.open .dropdown-toggle,
.dropdown-toggle:hover {
color: $c-pool;
}
}