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

Create new CSS component page-header-dropdown

pull/10616/head
Alex P 2017-01-12 13:16:38 -08:00
parent be6d9a6c30
commit ef2f71e46e
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

@ -140,9 +140,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;
}
}