From 6a5639beb8d66bd575461dc595872a6d48c09b1b Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Mon, 26 Feb 2018 18:47:28 -0800 Subject: [PATCH 001/431] add secondary props update function to InputClickToEdit for updating on key changes --- .../chronograf/OrganizationsTableRow.js | 2 +- .../chronograf/ProvidersTableRow.js | 4 +-- .../chronograf/ProvidersTableRowNew.js | 6 +++-- ui/src/shared/components/InputClickToEdit.js | 25 +++++++++++++------ 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/ui/src/admin/components/chronograf/OrganizationsTableRow.js b/ui/src/admin/components/chronograf/OrganizationsTableRow.js index aa7b56e7a..41a88560d 100644 --- a/ui/src/admin/components/chronograf/OrganizationsTableRow.js +++ b/ui/src/admin/components/chronograf/OrganizationsTableRow.js @@ -94,7 +94,7 @@ class OrganizationsTableRow extends Component {
diff --git a/ui/src/admin/components/chronograf/ProvidersTableRowNew.js b/ui/src/admin/components/chronograf/ProvidersTableRowNew.js index d99f32d54..855c1d491 100644 --- a/ui/src/admin/components/chronograf/ProvidersTableRowNew.js +++ b/ui/src/admin/components/chronograf/ProvidersTableRowNew.js @@ -62,14 +62,16 @@ class ProvidersTableRowNew extends Component { diff --git a/ui/src/shared/components/InputClickToEdit.js b/ui/src/shared/components/InputClickToEdit.js index 478ca57c4..34bc72a5c 100644 --- a/ui/src/shared/components/InputClickToEdit.js +++ b/ui/src/shared/components/InputClickToEdit.js @@ -7,13 +7,14 @@ class InputClickToEdit extends Component { this.state = { isEditing: null, value: this.props.value, + initialValue: this.props.value, } } handleCancel = () => { this.setState({ isEditing: false, - value: this.props.value, + value: this.state.initialValue, }) } @@ -22,22 +23,29 @@ class InputClickToEdit extends Component { } handleInputBlur = e => { - const {onUpdate, value} = this.props - + const {onBlurUpdate, value} = this.props if (value !== e.target.value) { - onUpdate(e.target.value) + onBlurUpdate(e.target.value) } - this.setState({isEditing: false, value: e.target.value}) + this.setState({ + isEditing: false, + value: e.target.value, + initialValue: e.target.value, + }) } - handleKeyDown = e => { + handleKeyUp = e => { + const {onKeyUpdate, value} = this.props if (e.key === 'Enter') { this.handleInputBlur(e) } if (e.key === 'Escape') { this.handleCancel() } + if (onKeyUpdate && value !== e.target.value) { + onKeyUpdate(e.target.value) + } } handleFocus = e => { @@ -63,7 +71,7 @@ class InputClickToEdit extends Component { className="form-control input-sm provider--input" defaultValue={value} onBlur={this.handleInputBlur} - onKeyDown={this.handleKeyDown} + onKeyUp={this.handleKeyUp} autoFocus={true} onFocus={this.handleFocus} ref={r => (this.inputRef = r)} @@ -88,7 +96,8 @@ const {func, bool, number, string} = PropTypes InputClickToEdit.propTypes = { wrapperClass: string.isRequired, value: string, - onUpdate: func.isRequired, + onKeyUpdate: func, + onBlurUpdate: func.isRequired, disabled: bool, tabIndex: number, placeholder: string, From cfb4ad79957d75b8954c878b12d839264db56460 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 13:05:36 -0800 Subject: [PATCH 002/431] Remove jQuery & Bootstrap packages --- ui/package.json | 2 -- ui/webpack/devConfig.js | 4 ---- ui/webpack/prodConfig.js | 4 ---- ui/yarn.lock | 8 -------- 4 files changed, 18 deletions(-) diff --git a/ui/package.json b/ui/package.json index 27933bc66..0e4f186e6 100644 --- a/ui/package.json +++ b/ui/package.json @@ -100,7 +100,6 @@ "@skidding/react-codemirror": "^1.0.1", "axios": "^0.13.1", "bignumber.js": "^4.0.2", - "bootstrap": "^3.3.7", "calculate-size": "^1.1.1", "classnames": "^2.2.3", "dygraphs": "2.1.0", @@ -108,7 +107,6 @@ "fast.js": "^0.1.1", "fixed-data-table": "^0.6.1", "he": "^1.1.1", - "jquery": "^3.1.0", "lodash": "^4.3.0", "moment": "^2.13.0", "nano-date": "^2.0.1", diff --git a/ui/webpack/devConfig.js b/ui/webpack/devConfig.js index 693a7fd6f..583298459 100644 --- a/ui/webpack/devConfig.js +++ b/ui/webpack/devConfig.js @@ -91,10 +91,6 @@ module.exports = { }, plugins: [ new webpack.HotModuleReplacementPlugin(), - new webpack.ProvidePlugin({ - $: 'jquery', - jQuery: 'jquery', - }), new ExtractTextPlugin('chronograf.css'), new HtmlWebpackPlugin({ template: path.resolve(__dirname, '..', 'src', 'index.template.html'), diff --git a/ui/webpack/prodConfig.js b/ui/webpack/prodConfig.js index 1536d8c23..76c09ec02 100644 --- a/ui/webpack/prodConfig.js +++ b/ui/webpack/prodConfig.js @@ -88,10 +88,6 @@ var config = { NODE_ENV: JSON.stringify('production'), }, }), - new webpack.ProvidePlugin({ - $: 'jquery', - jQuery: 'jquery', - }), new ExtractTextPlugin('chronograf.css'), new HtmlWebpackPlugin({ template: path.resolve(__dirname, '..', 'src', 'index.template.html'), diff --git a/ui/yarn.lock b/ui/yarn.lock index a2b777e95..412d4c54c 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1507,10 +1507,6 @@ boom@2.x.x: dependencies: hoek "2.x.x" -bootstrap@^3.3.7: - version "3.3.7" - resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71" - bower@^1.7.7: version "1.8.0" resolved "https://registry.yarnpkg.com/bower/-/bower-1.8.0.tgz#55dbebef0ad9155382d9e9d3e497c1372345b44a" @@ -4027,10 +4023,6 @@ jodid25519@^1.0.0: dependencies: jsbn "~0.1.0" -jquery@^3.1.0: - version "3.1.1" - resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.1.1.tgz#347c1c21c7e004115e0a4da32cece041fad3c8a3" - js-base64@^2.1.9: version "2.1.9" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce" From 5564486d8995387d64ec66fb4f15c630e0491709 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 13:06:14 -0800 Subject: [PATCH 003/431] Remove bootstrap base stylesheet --- ui/src/style/chronograf.scss | 5 +- ui/src/style/theme/bootstrap.scss | 8117 ----------------------------- 2 files changed, 2 insertions(+), 8120 deletions(-) delete mode 100644 ui/src/style/theme/bootstrap.scss diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index 443ef10d6..caf95e5e2 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -6,10 +6,9 @@ // Fonts @import 'fonts/fonts'; -// Base Theme -@import 'theme/bootstrap'; -@import 'theme/bootstrap-theme'; +// Theme @import 'theme/reset'; +@import 'theme/bootstrap-theme'; // Vendor @import 'external/react-grid-layout'; diff --git a/ui/src/style/theme/bootstrap.scss b/ui/src/style/theme/bootstrap.scss deleted file mode 100644 index 74593c54f..000000000 --- a/ui/src/style/theme/bootstrap.scss +++ /dev/null @@ -1,8117 +0,0 @@ -/*! - * Bootstrap v3.3.6 (http://getbootstrap.com) - * Copyright 2011-2015 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - */ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ -html { - font-family: sans-serif; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -body { - margin: 0; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -audio, -canvas, -progress, -video { - display: inline-block; - vertical-align: baseline; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -[hidden], -template { - display: none; -} - -a { - background-color: transparent; -} - -a:active, -a:hover { - outline: 0; -} - -abbr[title] { - border-bottom: 1px dotted; -} - -b, -strong { - font-weight: bold; -} - -dfn { - font-style: italic; -} - -h1 { - margin: .67em 0; - font-size: 2em; -} - -mark { - color: #000; - background: #ff0; -} - -small { - font-size: 80%; -} - -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} - -sup { - top: -.5em; -} - -sub { - bottom: -.25em; -} - -img { - border: 0; -} - -svg:not(:root) { - overflow: hidden; -} - -figure { - margin: 1em 40px; -} - -hr { - height: 0; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; -} - -pre { - overflow: auto; -} - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -button, -input, -optgroup, -select, -textarea { - margin: 0; - font: inherit; - color: inherit; -} - -button { - overflow: visible; -} - -button, -select { - text-transform: none; -} - -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; -} - -button[disabled], -html input[disabled] { - cursor: default; -} - -button::-moz-focus-inner, -input::-moz-focus-inner { - padding: 0; - border: 0; -} - -input { - line-height: normal; -} - -input[type="checkbox"], -input[type="radio"] { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 0; -} - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -input[type="search"] { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; - -webkit-appearance: textfield; -} - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -fieldset { - padding: .35em .625em .75em; - margin: 0 2px; - border: 1px solid #c0c0c0; -} - -legend { - padding: 0; - border: 0; -} - -textarea { - overflow: auto; -} - -optgroup { - font-weight: bold; -} - -table { - border-spacing: 0; - border-collapse: collapse; -} - -td, -th { - padding: 0; -} - -/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ -@media print { - *, - *:before, - *:after { - color: #000 !important; - text-shadow: none !important; - background: transparent !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { - display: table-header-group; - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } - - .navbar { - display: none; - } - - .btn > .caret, - .dropup > .btn > .caret { - border-top-color: #000 !important; - } - - .label { - border: 1px solid #000; - } - - .table { - border-collapse: collapse !important; - } - - .table td, - .table th { - background-color: #fff !important; - } - - .table-bordered th, - .table-bordered td { - border: 1px solid #ddd !important; - } -} - -// @font-face { -// font-family: 'Glyphicons Halflings'; -// src: url("fonts/glyphicons-halflings-regular.eot"); -// src: url("fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("fonts/glyphicons-halflings-regular.woff") format("woff"), url("fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); -// } - -// .glyphicon { -// position: relative; -// top: 1px; -// display: inline-block; -// font-family: 'Glyphicons Halflings'; -// font-style: normal; -// font-weight: normal; -// line-height: 1; -// -webkit-font-smoothing: antialiased; -// -moz-osx-font-smoothing: grayscale; -// } - -// .glyphicon-asterisk:before { -// content: "\002a"; -// } - -// .glyphicon-plus:before { -// content: "\002b"; -// } - -// .glyphicon-euro:before, -// .glyphicon-eur:before { -// content: "\20ac"; -// } - -// .glyphicon-minus:before { -// content: "\2212"; -// } - -// .glyphicon-cloud:before { -// content: "\2601"; -// } - -// .glyphicon-envelope:before { -// content: "\2709"; -// } - -// .glyphicon-pencil:before { -// content: "\270f"; -// } - -// .glyphicon-glass:before { -// content: "\e001"; -// } - -// .glyphicon-music:before { -// content: "\e002"; -// } - -// .glyphicon-search:before { -// content: "\e003"; -// } - -// .glyphicon-heart:before { -// content: "\e005"; -// } - -// .glyphicon-star:before { -// content: "\e006"; -// } - -// .glyphicon-star-empty:before { -// content: "\e007"; -// } - -// .glyphicon-user:before { -// content: "\e008"; -// } - -// .glyphicon-film:before { -// content: "\e009"; -// } - -// .glyphicon-th-large:before { -// content: "\e010"; -// } - -// .glyphicon-th:before { -// content: "\e011"; -// } - -// .glyphicon-th-list:before { -// content: "\e012"; -// } - -// .glyphicon-ok:before { -// content: "\e013"; -// } - -// .glyphicon-remove:before { -// content: "\e014"; -// } - -// .glyphicon-zoom-in:before { -// content: "\e015"; -// } - -// .glyphicon-zoom-out:before { -// content: "\e016"; -// } - -// .glyphicon-off:before { -// content: "\e017"; -// } - -// .glyphicon-signal:before { -// content: "\e018"; -// } - -// .glyphicon-cog:before { -// content: "\e019"; -// } - -// .glyphicon-trash:before { -// content: "\e020"; -// } - -// .glyphicon-home:before { -// content: "\e021"; -// } - -// .glyphicon-file:before { -// content: "\e022"; -// } - -// .glyphicon-time:before { -// content: "\e023"; -// } - -// .glyphicon-road:before { -// content: "\e024"; -// } - -// .glyphicon-download-alt:before { -// content: "\e025"; -// } - -// .glyphicon-download:before { -// content: "\e026"; -// } - -// .glyphicon-upload:before { -// content: "\e027"; -// } - -// .glyphicon-inbox:before { -// content: "\e028"; -// } - -// .glyphicon-play-circle:before { -// content: "\e029"; -// } - -// .glyphicon-repeat:before { -// content: "\e030"; -// } - -// .glyphicon-refresh:before { -// content: "\e031"; -// } - -// .glyphicon-list-alt:before { -// content: "\e032"; -// } - -// .glyphicon-lock:before { -// content: "\e033"; -// } - -// .glyphicon-flag:before { -// content: "\e034"; -// } - -// .glyphicon-headphones:before { -// content: "\e035"; -// } - -// .glyphicon-volume-off:before { -// content: "\e036"; -// } - -// .glyphicon-volume-down:before { -// content: "\e037"; -// } - -// .glyphicon-volume-up:before { -// content: "\e038"; -// } - -// .glyphicon-qrcode:before { -// content: "\e039"; -// } - -// .glyphicon-barcode:before { -// content: "\e040"; -// } - -// .glyphicon-tag:before { -// content: "\e041"; -// } - -// .glyphicon-tags:before { -// content: "\e042"; -// } - -// .glyphicon-book:before { -// content: "\e043"; -// } - -// .glyphicon-bookmark:before { -// content: "\e044"; -// } - -// .glyphicon-print:before { -// content: "\e045"; -// } - -// .glyphicon-camera:before { -// content: "\e046"; -// } - -// .glyphicon-font:before { -// content: "\e047"; -// } - -// .glyphicon-bold:before { -// content: "\e048"; -// } - -// .glyphicon-italic:before { -// content: "\e049"; -// } - -// .glyphicon-text-height:before { -// content: "\e050"; -// } - -// .glyphicon-text-width:before { -// content: "\e051"; -// } - -// .glyphicon-align-left:before { -// content: "\e052"; -// } - -// .glyphicon-align-center:before { -// content: "\e053"; -// } - -// .glyphicon-align-right:before { -// content: "\e054"; -// } - -// .glyphicon-align-justify:before { -// content: "\e055"; -// } - -// .glyphicon-list:before { -// content: "\e056"; -// } - -// .glyphicon-indent-left:before { -// content: "\e057"; -// } - -// .glyphicon-indent-right:before { -// content: "\e058"; -// } - -// .glyphicon-facetime-video:before { -// content: "\e059"; -// } - -// .glyphicon-picture:before { -// content: "\e060"; -// } - -// .glyphicon-map-marker:before { -// content: "\e062"; -// } - -// .glyphicon-adjust:before { -// content: "\e063"; -// } - -// .glyphicon-tint:before { -// content: "\e064"; -// } - -// .glyphicon-edit:before { -// content: "\e065"; -// } - -// .glyphicon-share:before { -// content: "\e066"; -// } - -// .glyphicon-check:before { -// content: "\e067"; -// } - -// .glyphicon-move:before { -// content: "\e068"; -// } - -// .glyphicon-step-backward:before { -// content: "\e069"; -// } - -// .glyphicon-fast-backward:before { -// content: "\e070"; -// } - -// .glyphicon-backward:before { -// content: "\e071"; -// } - -// .glyphicon-play:before { -// content: "\e072"; -// } - -// .glyphicon-pause:before { -// content: "\e073"; -// } - -// .glyphicon-stop:before { -// content: "\e074"; -// } - -// .glyphicon-forward:before { -// content: "\e075"; -// } - -// .glyphicon-fast-forward:before { -// content: "\e076"; -// } - -// .glyphicon-step-forward:before { -// content: "\e077"; -// } - -// .glyphicon-eject:before { -// content: "\e078"; -// } - -// .glyphicon-chevron-left:before { -// content: "\e079"; -// } - -// .glyphicon-chevron-right:before { -// content: "\e080"; -// } - -// .glyphicon-plus-sign:before { -// content: "\e081"; -// } - -// .glyphicon-minus-sign:before { -// content: "\e082"; -// } - -// .glyphicon-remove-sign:before { -// content: "\e083"; -// } - -// .glyphicon-ok-sign:before { -// content: "\e084"; -// } - -// .glyphicon-question-sign:before { -// content: "\e085"; -// } - -// .glyphicon-info-sign:before { -// content: "\e086"; -// } - -// .glyphicon-screenshot:before { -// content: "\e087"; -// } - -// .glyphicon-remove-circle:before { -// content: "\e088"; -// } - -// .glyphicon-ok-circle:before { -// content: "\e089"; -// } - -// .glyphicon-ban-circle:before { -// content: "\e090"; -// } - -// .glyphicon-arrow-left:before { -// content: "\e091"; -// } - -// .glyphicon-arrow-right:before { -// content: "\e092"; -// } - -// .glyphicon-arrow-up:before { -// content: "\e093"; -// } - -// .glyphicon-arrow-down:before { -// content: "\e094"; -// } - -// .glyphicon-share-alt:before { -// content: "\e095"; -// } - -// .glyphicon-resize-full:before { -// content: "\e096"; -// } - -// .glyphicon-resize-small:before { -// content: "\e097"; -// } - -// .glyphicon-exclamation-sign:before { -// content: "\e101"; -// } - -// .glyphicon-gift:before { -// content: "\e102"; -// } - -// .glyphicon-leaf:before { -// content: "\e103"; -// } - -// .glyphicon-fire:before { -// content: "\e104"; -// } - -// .glyphicon-eye-open:before { -// content: "\e105"; -// } - -// .glyphicon-eye-close:before { -// content: "\e106"; -// } - -// .glyphicon-warning-sign:before { -// content: "\e107"; -// } - -// .glyphicon-plane:before { -// content: "\e108"; -// } - -// .glyphicon-calendar:before { -// content: "\e109"; -// } - -// .glyphicon-random:before { -// content: "\e110"; -// } - -// .glyphicon-comment:before { -// content: "\e111"; -// } - -// .glyphicon-magnet:before { -// content: "\e112"; -// } - -// .glyphicon-chevron-up:before { -// content: "\e113"; -// } - -// .glyphicon-chevron-down:before { -// content: "\e114"; -// } - -// .glyphicon-retweet:before { -// content: "\e115"; -// } - -// .glyphicon-shopping-cart:before { -// content: "\e116"; -// } - -// .glyphicon-folder-close:before { -// content: "\e117"; -// } - -// .glyphicon-folder-open:before { -// content: "\e118"; -// } - -// .glyphicon-resize-vertical:before { -// content: "\e119"; -// } - -// .glyphicon-resize-horizontal:before { -// content: "\e120"; -// } - -// .glyphicon-hdd:before { -// content: "\e121"; -// } - -// .glyphicon-bullhorn:before { -// content: "\e122"; -// } - -// .glyphicon-bell:before { -// content: "\e123"; -// } - -// .glyphicon-certificate:before { -// content: "\e124"; -// } - -// .glyphicon-thumbs-up:before { -// content: "\e125"; -// } - -// .glyphicon-thumbs-down:before { -// content: "\e126"; -// } - -// .glyphicon-hand-right:before { -// content: "\e127"; -// } - -// .glyphicon-hand-left:before { -// content: "\e128"; -// } - -// .glyphicon-hand-up:before { -// content: "\e129"; -// } - -// .glyphicon-hand-down:before { -// content: "\e130"; -// } - -// .glyphicon-circle-arrow-right:before { -// content: "\e131"; -// } - -// .glyphicon-circle-arrow-left:before { -// content: "\e132"; -// } - -// .glyphicon-circle-arrow-up:before { -// content: "\e133"; -// } - -// .glyphicon-circle-arrow-down:before { -// content: "\e134"; -// } - -// .glyphicon-globe:before { -// content: "\e135"; -// } - -// .glyphicon-wrench:before { -// content: "\e136"; -// } - -// .glyphicon-tasks:before { -// content: "\e137"; -// } - -// .glyphicon-filter:before { -// content: "\e138"; -// } - -// .glyphicon-briefcase:before { -// content: "\e139"; -// } - -// .glyphicon-fullscreen:before { -// content: "\e140"; -// } - -// .glyphicon-dashboard:before { -// content: "\e141"; -// } - -// .glyphicon-paperclip:before { -// content: "\e142"; -// } - -// .glyphicon-heart-empty:before { -// content: "\e143"; -// } - -// .glyphicon-link:before { -// content: "\e144"; -// } - -// .glyphicon-phone:before { -// content: "\e145"; -// } - -// .glyphicon-pushpin:before { -// content: "\e146"; -// } - -// .glyphicon-usd:before { -// content: "\e148"; -// } - -// .glyphicon-gbp:before { -// content: "\e149"; -// } - -// .glyphicon-sort:before { -// content: "\e150"; -// } - -// .glyphicon-sort-by-alphabet:before { -// content: "\e151"; -// } - -// .glyphicon-sort-by-alphabet-alt:before { -// content: "\e152"; -// } - -// .glyphicon-sort-by-order:before { -// content: "\e153"; -// } - -// .glyphicon-sort-by-order-alt:before { -// content: "\e154"; -// } - -// .glyphicon-sort-by-attributes:before { -// content: "\e155"; -// } - -// .glyphicon-sort-by-attributes-alt:before { -// content: "\e156"; -// } - -// .glyphicon-unchecked:before { -// content: "\e157"; -// } - -// .glyphicon-expand:before { -// content: "\e158"; -// } - -// .glyphicon-collapse-down:before { -// content: "\e159"; -// } - -// .glyphicon-collapse-up:before { -// content: "\e160"; -// } - -// .glyphicon-log-in:before { -// content: "\e161"; -// } - -// .glyphicon-flash:before { -// content: "\e162"; -// } - -// .glyphicon-log-out:before { -// content: "\e163"; -// } - -// .glyphicon-new-window:before { -// content: "\e164"; -// } - -// .glyphicon-record:before { -// content: "\e165"; -// } - -// .glyphicon-save:before { -// content: "\e166"; -// } - -// .glyphicon-open:before { -// content: "\e167"; -// } - -// .glyphicon-saved:before { -// content: "\e168"; -// } - -// .glyphicon-import:before { -// content: "\e169"; -// } - -// .glyphicon-export:before { -// content: "\e170"; -// } - -// .glyphicon-send:before { -// content: "\e171"; -// } - -// .glyphicon-floppy-disk:before { -// content: "\e172"; -// } - -// .glyphicon-floppy-saved:before { -// content: "\e173"; -// } - -// .glyphicon-floppy-remove:before { -// content: "\e174"; -// } - -// .glyphicon-floppy-save:before { -// content: "\e175"; -// } - -// .glyphicon-floppy-open:before { -// content: "\e176"; -// } - -// .glyphicon-credit-card:before { -// content: "\e177"; -// } - -// .glyphicon-transfer:before { -// content: "\e178"; -// } - -// .glyphicon-cutlery:before { -// content: "\e179"; -// } - -// .glyphicon-header:before { -// content: "\e180"; -// } - -// .glyphicon-compressed:before { -// content: "\e181"; -// } - -// .glyphicon-earphone:before { -// content: "\e182"; -// } - -// .glyphicon-phone-alt:before { -// content: "\e183"; -// } - -// .glyphicon-tower:before { -// content: "\e184"; -// } - -// .glyphicon-stats:before { -// content: "\e185"; -// } - -// .glyphicon-sd-video:before { -// content: "\e186"; -// } - -// .glyphicon-hd-video:before { -// content: "\e187"; -// } - -// .glyphicon-subtitles:before { -// content: "\e188"; -// } - -// .glyphicon-sound-stereo:before { -// content: "\e189"; -// } - -// .glyphicon-sound-dolby:before { -// content: "\e190"; -// } - -// .glyphicon-sound-5-1:before { -// content: "\e191"; -// } - -// .glyphicon-sound-6-1:before { -// content: "\e192"; -// } - -// .glyphicon-sound-7-1:before { -// content: "\e193"; -// } - -// .glyphicon-copyright-mark:before { -// content: "\e194"; -// } - -// .glyphicon-registration-mark:before { -// content: "\e195"; -// } - -// .glyphicon-cloud-download:before { -// content: "\e197"; -// } - -// .glyphicon-cloud-upload:before { -// content: "\e198"; -// } - -// .glyphicon-tree-conifer:before { -// content: "\e199"; -// } - -// .glyphicon-tree-deciduous:before { -// content: "\e200"; -// } - -// .glyphicon-cd:before { -// content: "\e201"; -// } - -// .glyphicon-save-file:before { -// content: "\e202"; -// } - -// .glyphicon-open-file:before { -// content: "\e203"; -// } - -// .glyphicon-level-up:before { -// content: "\e204"; -// } - -// .glyphicon-copy:before { -// content: "\e205"; -// } - -// .glyphicon-paste:before { -// content: "\e206"; -// } - -// .glyphicon-alert:before { -// content: "\e209"; -// } - -// .glyphicon-equalizer:before { -// content: "\e210"; -// } - -// .glyphicon-king:before { -// content: "\e211"; -// } - -// .glyphicon-queen:before { -// content: "\e212"; -// } - -// .glyphicon-pawn:before { -// content: "\e213"; -// } - -// .glyphicon-bishop:before { -// content: "\e214"; -// } - -// .glyphicon-knight:before { -// content: "\e215"; -// } - -// .glyphicon-baby-formula:before { -// content: "\e216"; -// } - -// .glyphicon-tent:before { -// content: "\26fa"; -// } - -// .glyphicon-blackboard:before { -// content: "\e218"; -// } - -// .glyphicon-bed:before { -// content: "\e219"; -// } - -// .glyphicon-apple:before { -// content: "\f8ff"; -// } - -// .glyphicon-erase:before { -// content: "\e221"; -// } - -// .glyphicon-hourglass:before { -// content: "\231b"; -// } - -// .glyphicon-lamp:before { -// content: "\e223"; -// } - -// .glyphicon-duplicate:before { -// content: "\e224"; -// } - -// .glyphicon-piggy-bank:before { -// content: "\e225"; -// } - -// .glyphicon-scissors:before { -// content: "\e226"; -// } - -// .glyphicon-bitcoin:before { -// content: "\e227"; -// } - -// .glyphicon-btc:before { -// content: "\e227"; -// } - -// .glyphicon-xbt:before { -// content: "\e227"; -// } - -// .glyphicon-yen:before { -// content: "\00a5"; -// } - -// .glyphicon-jpy:before { -// content: "\00a5"; -// } - -// .glyphicon-ruble:before { -// content: "\20bd"; -// } - -// .glyphicon-rub:before { -// content: "\20bd"; -// } - -// .glyphicon-scale:before { -// content: "\e230"; -// } - -// .glyphicon-ice-lolly:before { -// content: "\e231"; -// } - -// .glyphicon-ice-lolly-tasted:before { -// content: "\e232"; -// } - -// .glyphicon-education:before { -// content: "\e233"; -// } - -// .glyphicon-option-horizontal:before { -// content: "\e234"; -// } - -// .glyphicon-option-vertical:before { -// content: "\e235"; -// } - -// .glyphicon-menu-hamburger:before { -// content: "\e236"; -// } - -// .glyphicon-modal-window:before { -// content: "\e237"; -// } - -// .glyphicon-oil:before { -// content: "\e238"; -// } - -// .glyphicon-grain:before { -// content: "\e239"; -// } - -// .glyphicon-sunglasses:before { -// content: "\e240"; -// } - -// .glyphicon-text-size:before { -// content: "\e241"; -// } - -// .glyphicon-text-color:before { -// content: "\e242"; -// } - -// .glyphicon-text-background:before { -// content: "\e243"; -// } - -// .glyphicon-object-align-top:before { -// content: "\e244"; -// } - -// .glyphicon-object-align-bottom:before { -// content: "\e245"; -// } - -// .glyphicon-object-align-horizontal:before { -// content: "\e246"; -// } - -// .glyphicon-object-align-left:before { -// content: "\e247"; -// } - -// .glyphicon-object-align-vertical:before { -// content: "\e248"; -// } - -// .glyphicon-object-align-right:before { -// content: "\e249"; -// } - -// .glyphicon-triangle-right:before { -// content: "\e250"; -// } - -// .glyphicon-triangle-left:before { -// content: "\e251"; -// } - -// .glyphicon-triangle-bottom:before { -// content: "\e252"; -// } - -// .glyphicon-triangle-top:before { -// content: "\e253"; -// } - -// .glyphicon-console:before { -// content: "\e254"; -// } - -// .glyphicon-superscript:before { -// content: "\e255"; -// } - -// .glyphicon-subscript:before { -// content: "\e256"; -// } - -// .glyphicon-menu-left:before { -// content: "\e257"; -// } - -// .glyphicon-menu-right:before { -// content: "\e258"; -// } - -// .glyphicon-menu-down:before { -// content: "\e259"; -// } - -// .glyphicon-menu-up:before { -// content: "\e260"; -// } - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -*:before, -*:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -html { - font-size: 10px; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -body { - font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif; - font-size: 14px; - line-height: 1.42857143; - color: #575e6b; - background-color: #fafbfc; -} - -input, -button, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -a { - color: #22adf6; - text-decoration: none; -} - -a:hover, -a:focus { - color: #00c9ff; - text-decoration: none; -} - -a:focus { - outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -figure { - margin: 0; -} - -img { - vertical-align: middle; -} - -.img-responsive, -.thumbnail > img, -.thumbnail a > img, -.carousel-inner > .item > img, -.carousel-inner > .item > a > img { - display: block; - max-width: 100%; - height: auto; -} - -.img-rounded { - border-radius: 5px; -} - -.img-thumbnail { - display: inline-block; - max-width: 100%; - height: auto; - padding: 4px; - line-height: 1.42857143; - background-color: #fafbfc; - border: 1px solid #ddd; - border-radius: 4px; - -webkit-transition: all .2s ease-in-out; - -o-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; -} - -.img-circle { - border-radius: 50%; -} - -hr { - margin-top: 20px; - margin-bottom: 20px; - border: 0; - border-top: 1px solid #eef0f2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -.sr-only-focusable:active, -.sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; -} - -[role="button"] { - cursor: pointer; -} - -h1, -h2, -h3, -h4, -h5, -h6, -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { - font-family: inherit; - font-weight: 500; - line-height: 1.1; - color: inherit; -} - -h1 small, -h2 small, -h3 small, -h4 small, -h5 small, -h6 small, -.h1 small, -.h2 small, -.h3 small, -.h4 small, -.h5 small, -.h6 small, -h1 .small, -h2 .small, -h3 .small, -h4 .small, -h5 .small, -h6 .small, -.h1 .small, -.h2 .small, -.h3 .small, -.h4 .small, -.h5 .small, -.h6 .small { - font-weight: normal; - line-height: 1; - color: #79818c; -} - -h1, -.h1, -h2, -.h2, -h3, -.h3 { - margin-top: 20px; - margin-bottom: 10px; -} - -h1 small, -.h1 small, -h2 small, -.h2 small, -h3 small, -.h3 small, -h1 .small, -.h1 .small, -h2 .small, -.h2 .small, -h3 .small, -.h3 .small { - font-size: 65%; -} - -h4, -.h4, -h5, -.h5, -h6, -.h6 { - margin-top: 10px; - margin-bottom: 10px; -} - -h4 small, -.h4 small, -h5 small, -.h5 small, -h6 small, -.h6 small, -h4 .small, -.h4 .small, -h5 .small, -.h5 .small, -h6 .small, -.h6 .small { - font-size: 75%; -} - -h1, -.h1 { - font-size: 36px; -} - -h2, -.h2 { - font-size: 30px; -} - -h3, -.h3 { - font-size: 24px; -} - -h4, -.h4 { - font-size: 18px; -} - -h5, -.h5 { - font-size: 14px; -} - -h6, -.h6 { - font-size: 12px; -} - -p { - margin: 0 0 10px; -} - -.lead { - margin-bottom: 20px; - font-size: 16px; - font-weight: 300; - line-height: 1.4; -} - -@media (min-width: 768px) { - .lead { - font-size: 21px; - } -} - -small, -.small { - font-size: 85%; -} - -mark, -.mark { - padding: .2em; - background-color: #fcf8e3; -} - -.text-left { - text-align: left; -} - -.text-right { - text-align: right; -} - -.text-center { - text-align: center; -} - -.text-justify { - text-align: justify; -} - -.text-nowrap { - white-space: nowrap; -} - -.text-lowercase { - text-transform: lowercase; -} - -.text-uppercase { - text-transform: uppercase; -} - -.text-capitalize { - text-transform: capitalize; -} - -.text-muted { - color: #79818c; -} - -.text-primary { - color: #22adf6; -} - -a.text-primary:hover, -a.text-primary:focus { - color: #0993dc; -} - -.text-success { - color: #3c763d; -} - -a.text-success:hover, -a.text-success:focus { - color: #2b542c; -} - -.text-info { - color: #31708f; -} - -a.text-info:hover, -a.text-info:focus { - color: #245269; -} - -.text-warning { - color: #8a6d3b; -} - -a.text-warning:hover, -a.text-warning:focus { - color: #66512c; -} - -.text-danger { - color: #a94442; -} - -a.text-danger:hover, -a.text-danger:focus { - color: #843534; -} - -.bg-primary { - color: #fff; - background-color: #22adf6; -} - -a.bg-primary:hover, -a.bg-primary:focus { - background-color: #0993dc; -} - -.bg-success { - background-color: #dff0d8; -} - -a.bg-success:hover, -a.bg-success:focus { - background-color: #c1e2b3; -} - -.bg-info { - background-color: #d9edf7; -} - -a.bg-info:hover, -a.bg-info:focus { - background-color: #afd9ee; -} - -.bg-warning { - background-color: #fcf8e3; -} - -a.bg-warning:hover, -a.bg-warning:focus { - background-color: #f7ecb5; -} - -.bg-danger { - background-color: #f2dede; -} - -a.bg-danger:hover, -a.bg-danger:focus { - background-color: #e4b9b9; -} - -.page-header { - padding-bottom: 9px; - margin: 40px 0 20px; - border-bottom: 1px solid #eef0f2; -} - -ul, -ol { - margin-top: 0; - margin-bottom: 10px; -} - -ul ul, -ol ul, -ul ol, -ol ol { - margin-bottom: 0; -} - -.list-unstyled { - padding-left: 0; - list-style: none; -} - -.list-inline { - padding-left: 0; - margin-left: -5px; - list-style: none; -} - -.list-inline > li { - display: inline-block; - padding-right: 5px; - padding-left: 5px; -} - -dl { - margin-top: 0; - margin-bottom: 20px; -} - -dt, -dd { - line-height: 1.42857143; -} - -dt { - font-weight: bold; -} - -dd { - margin-left: 0; -} - -@media (min-width: 768px) { - .dl-horizontal dt { - float: left; - width: 160px; - overflow: hidden; - clear: left; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; - } - - .dl-horizontal dd { - margin-left: 180px; - } -} - -abbr[title], -abbr[data-original-title] { - cursor: help; - border-bottom: 1px dotted #79818c; -} - -.initialism { - font-size: 90%; - text-transform: uppercase; -} - -blockquote { - padding: 10px 20px; - margin: 0 0 20px; - font-size: 17.5px; - border-left: 5px solid #eef0f2; -} - -blockquote p:last-child, -blockquote ul:last-child, -blockquote ol:last-child { - margin-bottom: 0; -} - -blockquote footer, -blockquote small, -blockquote .small { - display: block; - font-size: 80%; - line-height: 1.42857143; - color: #79818c; -} - -blockquote footer:before, -blockquote small:before, -blockquote .small:before { - content: '\2014 \00A0'; -} - -.blockquote-reverse, -blockquote.pull-right { - padding-right: 15px; - padding-left: 0; - text-align: right; - border-right: 5px solid #eef0f2; - border-left: 0; -} - -.blockquote-reverse footer:before, -blockquote.pull-right footer:before, -.blockquote-reverse small:before, -blockquote.pull-right small:before, -.blockquote-reverse .small:before, -blockquote.pull-right .small:before { - content: ''; -} - -.blockquote-reverse footer:after, -blockquote.pull-right footer:after, -.blockquote-reverse small:after, -blockquote.pull-right small:after, -.blockquote-reverse .small:after, -blockquote.pull-right .small:after { - content: '\00A0 \2014'; -} - -address { - margin-bottom: 20px; - font-style: normal; - line-height: 1.42857143; -} - -code, -kbd, -pre, -samp { - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; -} - -code { - padding: 2px 4px; - font-size: 90%; - color: #c7254e; - background-color: #f9f2f4; - border-radius: 4px; -} - -kbd { - padding: 2px 4px; - font-size: 90%; - color: #fff; - background-color: #333; - border-radius: 3px; - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); -} - -kbd kbd { - padding: 0; - font-size: 100%; - font-weight: bold; - -webkit-box-shadow: none; - box-shadow: none; -} - -pre { - display: block; - padding: 9.5px; - margin: 0 0 10px; - font-size: 13px; - line-height: 1.42857143; - color: #373d49; - word-break: break-all; - word-wrap: break-word; - background-color: #f5f5f5; - border: 1px solid #ccc; - border-radius: 4px; -} - -pre code { - padding: 0; - font-size: inherit; - color: inherit; - white-space: pre-wrap; - background-color: transparent; - border-radius: 0; -} - -.pre-scrollable { - max-height: 340px; - overflow-y: scroll; -} - -.container { - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} - -@media (min-width: 768px) { - .container { - width: 750px; - } -} - -@media (min-width: 992px) { - .container { - width: 970px; - } -} - -@media (min-width: 1200px) { - .container { - width: 1170px; - } -} - -.container-fluid { - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} - -.row { - margin-right: -15px; - margin-left: -15px; -} - -.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { - position: relative; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; -} - -.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { - float: left; -} - -.col-xs-12 { - width: 100%; -} - -.col-xs-11 { - width: 91.66666667%; -} - -.col-xs-10 { - width: 83.33333333%; -} - -.col-xs-9 { - width: 75%; -} - -.col-xs-8 { - width: 66.66666667%; -} - -.col-xs-7 { - width: 58.33333333%; -} - -.col-xs-6 { - width: 50%; -} - -.col-xs-5 { - width: 41.66666667%; -} - -.col-xs-4 { - width: 33.33333333%; -} - -.col-xs-3 { - width: 25%; -} - -.col-xs-2 { - width: 16.66666667%; -} - -.col-xs-1 { - width: 8.33333333%; -} - -.col-xs-pull-12 { - right: 100%; -} - -.col-xs-pull-11 { - right: 91.66666667%; -} - -.col-xs-pull-10 { - right: 83.33333333%; -} - -.col-xs-pull-9 { - right: 75%; -} - -.col-xs-pull-8 { - right: 66.66666667%; -} - -.col-xs-pull-7 { - right: 58.33333333%; -} - -.col-xs-pull-6 { - right: 50%; -} - -.col-xs-pull-5 { - right: 41.66666667%; -} - -.col-xs-pull-4 { - right: 33.33333333%; -} - -.col-xs-pull-3 { - right: 25%; -} - -.col-xs-pull-2 { - right: 16.66666667%; -} - -.col-xs-pull-1 { - right: 8.33333333%; -} - -.col-xs-pull-0 { - right: auto; -} - -.col-xs-push-12 { - left: 100%; -} - -.col-xs-push-11 { - left: 91.66666667%; -} - -.col-xs-push-10 { - left: 83.33333333%; -} - -.col-xs-push-9 { - left: 75%; -} - -.col-xs-push-8 { - left: 66.66666667%; -} - -.col-xs-push-7 { - left: 58.33333333%; -} - -.col-xs-push-6 { - left: 50%; -} - -.col-xs-push-5 { - left: 41.66666667%; -} - -.col-xs-push-4 { - left: 33.33333333%; -} - -.col-xs-push-3 { - left: 25%; -} - -.col-xs-push-2 { - left: 16.66666667%; -} - -.col-xs-push-1 { - left: 8.33333333%; -} - -.col-xs-push-0 { - left: auto; -} - -.col-xs-offset-12 { - margin-left: 100%; -} - -.col-xs-offset-11 { - margin-left: 91.66666667%; -} - -.col-xs-offset-10 { - margin-left: 83.33333333%; -} - -.col-xs-offset-9 { - margin-left: 75%; -} - -.col-xs-offset-8 { - margin-left: 66.66666667%; -} - -.col-xs-offset-7 { - margin-left: 58.33333333%; -} - -.col-xs-offset-6 { - margin-left: 50%; -} - -.col-xs-offset-5 { - margin-left: 41.66666667%; -} - -.col-xs-offset-4 { - margin-left: 33.33333333%; -} - -.col-xs-offset-3 { - margin-left: 25%; -} - -.col-xs-offset-2 { - margin-left: 16.66666667%; -} - -.col-xs-offset-1 { - margin-left: 8.33333333%; -} - -.col-xs-offset-0 { - margin-left: 0; -} - -@media (min-width: 768px) { - .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { - float: left; - } - - .col-sm-12 { - width: 100%; - } - - .col-sm-11 { - width: 91.66666667%; - } - - .col-sm-10 { - width: 83.33333333%; - } - - .col-sm-9 { - width: 75%; - } - - .col-sm-8 { - width: 66.66666667%; - } - - .col-sm-7 { - width: 58.33333333%; - } - - .col-sm-6 { - width: 50%; - } - - .col-sm-5 { - width: 41.66666667%; - } - - .col-sm-4 { - width: 33.33333333%; - } - - .col-sm-3 { - width: 25%; - } - - .col-sm-2 { - width: 16.66666667%; - } - - .col-sm-1 { - width: 8.33333333%; - } - - .col-sm-pull-12 { - right: 100%; - } - - .col-sm-pull-11 { - right: 91.66666667%; - } - - .col-sm-pull-10 { - right: 83.33333333%; - } - - .col-sm-pull-9 { - right: 75%; - } - - .col-sm-pull-8 { - right: 66.66666667%; - } - - .col-sm-pull-7 { - right: 58.33333333%; - } - - .col-sm-pull-6 { - right: 50%; - } - - .col-sm-pull-5 { - right: 41.66666667%; - } - - .col-sm-pull-4 { - right: 33.33333333%; - } - - .col-sm-pull-3 { - right: 25%; - } - - .col-sm-pull-2 { - right: 16.66666667%; - } - - .col-sm-pull-1 { - right: 8.33333333%; - } - - .col-sm-pull-0 { - right: auto; - } - - .col-sm-push-12 { - left: 100%; - } - - .col-sm-push-11 { - left: 91.66666667%; - } - - .col-sm-push-10 { - left: 83.33333333%; - } - - .col-sm-push-9 { - left: 75%; - } - - .col-sm-push-8 { - left: 66.66666667%; - } - - .col-sm-push-7 { - left: 58.33333333%; - } - - .col-sm-push-6 { - left: 50%; - } - - .col-sm-push-5 { - left: 41.66666667%; - } - - .col-sm-push-4 { - left: 33.33333333%; - } - - .col-sm-push-3 { - left: 25%; - } - - .col-sm-push-2 { - left: 16.66666667%; - } - - .col-sm-push-1 { - left: 8.33333333%; - } - - .col-sm-push-0 { - left: auto; - } - - .col-sm-offset-12 { - margin-left: 100%; - } - - .col-sm-offset-11 { - margin-left: 91.66666667%; - } - - .col-sm-offset-10 { - margin-left: 83.33333333%; - } - - .col-sm-offset-9 { - margin-left: 75%; - } - - .col-sm-offset-8 { - margin-left: 66.66666667%; - } - - .col-sm-offset-7 { - margin-left: 58.33333333%; - } - - .col-sm-offset-6 { - margin-left: 50%; - } - - .col-sm-offset-5 { - margin-left: 41.66666667%; - } - - .col-sm-offset-4 { - margin-left: 33.33333333%; - } - - .col-sm-offset-3 { - margin-left: 25%; - } - - .col-sm-offset-2 { - margin-left: 16.66666667%; - } - - .col-sm-offset-1 { - margin-left: 8.33333333%; - } - - .col-sm-offset-0 { - margin-left: 0; - } -} - -@media (min-width: 992px) { - .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - - .col-md-12 { - width: 100%; - } - - .col-md-11 { - width: 91.66666667%; - } - - .col-md-10 { - width: 83.33333333%; - } - - .col-md-9 { - width: 75%; - } - - .col-md-8 { - width: 66.66666667%; - } - - .col-md-7 { - width: 58.33333333%; - } - - .col-md-6 { - width: 50%; - } - - .col-md-5 { - width: 41.66666667%; - } - - .col-md-4 { - width: 33.33333333%; - } - - .col-md-3 { - width: 25%; - } - - .col-md-2 { - width: 16.66666667%; - } - - .col-md-1 { - width: 8.33333333%; - } - - .col-md-pull-12 { - right: 100%; - } - - .col-md-pull-11 { - right: 91.66666667%; - } - - .col-md-pull-10 { - right: 83.33333333%; - } - - .col-md-pull-9 { - right: 75%; - } - - .col-md-pull-8 { - right: 66.66666667%; - } - - .col-md-pull-7 { - right: 58.33333333%; - } - - .col-md-pull-6 { - right: 50%; - } - - .col-md-pull-5 { - right: 41.66666667%; - } - - .col-md-pull-4 { - right: 33.33333333%; - } - - .col-md-pull-3 { - right: 25%; - } - - .col-md-pull-2 { - right: 16.66666667%; - } - - .col-md-pull-1 { - right: 8.33333333%; - } - - .col-md-pull-0 { - right: auto; - } - - .col-md-push-12 { - left: 100%; - } - - .col-md-push-11 { - left: 91.66666667%; - } - - .col-md-push-10 { - left: 83.33333333%; - } - - .col-md-push-9 { - left: 75%; - } - - .col-md-push-8 { - left: 66.66666667%; - } - - .col-md-push-7 { - left: 58.33333333%; - } - - .col-md-push-6 { - left: 50%; - } - - .col-md-push-5 { - left: 41.66666667%; - } - - .col-md-push-4 { - left: 33.33333333%; - } - - .col-md-push-3 { - left: 25%; - } - - .col-md-push-2 { - left: 16.66666667%; - } - - .col-md-push-1 { - left: 8.33333333%; - } - - .col-md-push-0 { - left: auto; - } - - .col-md-offset-12 { - margin-left: 100%; - } - - .col-md-offset-11 { - margin-left: 91.66666667%; - } - - .col-md-offset-10 { - margin-left: 83.33333333%; - } - - .col-md-offset-9 { - margin-left: 75%; - } - - .col-md-offset-8 { - margin-left: 66.66666667%; - } - - .col-md-offset-7 { - margin-left: 58.33333333%; - } - - .col-md-offset-6 { - margin-left: 50%; - } - - .col-md-offset-5 { - margin-left: 41.66666667%; - } - - .col-md-offset-4 { - margin-left: 33.33333333%; - } - - .col-md-offset-3 { - margin-left: 25%; - } - - .col-md-offset-2 { - margin-left: 16.66666667%; - } - - .col-md-offset-1 { - margin-left: 8.33333333%; - } - - .col-md-offset-0 { - margin-left: 0; - } -} - -@media (min-width: 1200px) { - .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { - float: left; - } - - .col-lg-12 { - width: 100%; - } - - .col-lg-11 { - width: 91.66666667%; - } - - .col-lg-10 { - width: 83.33333333%; - } - - .col-lg-9 { - width: 75%; - } - - .col-lg-8 { - width: 66.66666667%; - } - - .col-lg-7 { - width: 58.33333333%; - } - - .col-lg-6 { - width: 50%; - } - - .col-lg-5 { - width: 41.66666667%; - } - - .col-lg-4 { - width: 33.33333333%; - } - - .col-lg-3 { - width: 25%; - } - - .col-lg-2 { - width: 16.66666667%; - } - - .col-lg-1 { - width: 8.33333333%; - } - - .col-lg-pull-12 { - right: 100%; - } - - .col-lg-pull-11 { - right: 91.66666667%; - } - - .col-lg-pull-10 { - right: 83.33333333%; - } - - .col-lg-pull-9 { - right: 75%; - } - - .col-lg-pull-8 { - right: 66.66666667%; - } - - .col-lg-pull-7 { - right: 58.33333333%; - } - - .col-lg-pull-6 { - right: 50%; - } - - .col-lg-pull-5 { - right: 41.66666667%; - } - - .col-lg-pull-4 { - right: 33.33333333%; - } - - .col-lg-pull-3 { - right: 25%; - } - - .col-lg-pull-2 { - right: 16.66666667%; - } - - .col-lg-pull-1 { - right: 8.33333333%; - } - - .col-lg-pull-0 { - right: auto; - } - - .col-lg-push-12 { - left: 100%; - } - - .col-lg-push-11 { - left: 91.66666667%; - } - - .col-lg-push-10 { - left: 83.33333333%; - } - - .col-lg-push-9 { - left: 75%; - } - - .col-lg-push-8 { - left: 66.66666667%; - } - - .col-lg-push-7 { - left: 58.33333333%; - } - - .col-lg-push-6 { - left: 50%; - } - - .col-lg-push-5 { - left: 41.66666667%; - } - - .col-lg-push-4 { - left: 33.33333333%; - } - - .col-lg-push-3 { - left: 25%; - } - - .col-lg-push-2 { - left: 16.66666667%; - } - - .col-lg-push-1 { - left: 8.33333333%; - } - - .col-lg-push-0 { - left: auto; - } - - .col-lg-offset-12 { - margin-left: 100%; - } - - .col-lg-offset-11 { - margin-left: 91.66666667%; - } - - .col-lg-offset-10 { - margin-left: 83.33333333%; - } - - .col-lg-offset-9 { - margin-left: 75%; - } - - .col-lg-offset-8 { - margin-left: 66.66666667%; - } - - .col-lg-offset-7 { - margin-left: 58.33333333%; - } - - .col-lg-offset-6 { - margin-left: 50%; - } - - .col-lg-offset-5 { - margin-left: 41.66666667%; - } - - .col-lg-offset-4 { - margin-left: 33.33333333%; - } - - .col-lg-offset-3 { - margin-left: 25%; - } - - .col-lg-offset-2 { - margin-left: 16.66666667%; - } - - .col-lg-offset-1 { - margin-left: 8.33333333%; - } - - .col-lg-offset-0 { - margin-left: 0; - } -} - -table { - background-color: transparent; -} - -caption { - padding-top: 8px; - padding-bottom: 8px; - color: #79818c; - text-align: left; -} - -th { - text-align: left; -} - -.table { - width: 100%; - max-width: 100%; - margin-bottom: 20px; -} - -.table > thead > tr > th, -.table > tbody > tr > th, -.table > tfoot > tr > th, -.table > thead > tr > td, -.table > tbody > tr > td, -.table > tfoot > tr > td { - padding: 8px; - line-height: 1.42857143; - vertical-align: top; - border-top: 2px solid #eef0f2; -} - -.table > thead > tr > th { - vertical-align: bottom; - border-bottom: 2px solid #eef0f2; -} - -.table > caption + thead > tr:first-child > th, -.table > colgroup + thead > tr:first-child > th, -.table > thead:first-child > tr:first-child > th, -.table > caption + thead > tr:first-child > td, -.table > colgroup + thead > tr:first-child > td, -.table > thead:first-child > tr:first-child > td { - border-top: 0; -} - -.table > tbody + tbody { - border-top: 2px solid #eef0f2; -} - -.table .table { - background-color: #fafbfc; -} - -.table-condensed > thead > tr > th, -.table-condensed > tbody > tr > th, -.table-condensed > tfoot > tr > th, -.table-condensed > thead > tr > td, -.table-condensed > tbody > tr > td, -.table-condensed > tfoot > tr > td { - padding: 5px; -} - -.table-bordered { - border: 2px solid #eef0f2; -} - -.table-bordered > thead > tr > th, -.table-bordered > tbody > tr > th, -.table-bordered > tfoot > tr > th, -.table-bordered > thead > tr > td, -.table-bordered > tbody > tr > td, -.table-bordered > tfoot > tr > td { - border: 2px solid #eef0f2; -} - -.table-bordered > thead > tr > th, -.table-bordered > thead > tr > td { - border-bottom-width: 2px; -} - -.table-striped > tbody > tr:nth-of-type(odd) { - background-color: #f9f9f9; -} - -.table-hover > tbody > tr:hover { - background-color: #f5f5f5; -} - -table col[class*="col-"] { - position: static; - display: table-column; - float: none; -} - -table td[class*="col-"], -table th[class*="col-"] { - position: static; - display: table-cell; - float: none; -} - -.table > thead > tr > td.active, -.table > tbody > tr > td.active, -.table > tfoot > tr > td.active, -.table > thead > tr > th.active, -.table > tbody > tr > th.active, -.table > tfoot > tr > th.active, -.table > thead > tr.active > td, -.table > tbody > tr.active > td, -.table > tfoot > tr.active > td, -.table > thead > tr.active > th, -.table > tbody > tr.active > th, -.table > tfoot > tr.active > th { - background-color: #f5f5f5; -} - -.table-hover > tbody > tr > td.active:hover, -.table-hover > tbody > tr > th.active:hover, -.table-hover > tbody > tr.active:hover > td, -.table-hover > tbody > tr:hover > .active, -.table-hover > tbody > tr.active:hover > th { - background-color: #e8e8e8; -} - -.table > thead > tr > td.success, -.table > tbody > tr > td.success, -.table > tfoot > tr > td.success, -.table > thead > tr > th.success, -.table > tbody > tr > th.success, -.table > tfoot > tr > th.success, -.table > thead > tr.success > td, -.table > tbody > tr.success > td, -.table > tfoot > tr.success > td, -.table > thead > tr.success > th, -.table > tbody > tr.success > th, -.table > tfoot > tr.success > th { - background-color: #dff0d8; -} - -.table-hover > tbody > tr > td.success:hover, -.table-hover > tbody > tr > th.success:hover, -.table-hover > tbody > tr.success:hover > td, -.table-hover > tbody > tr:hover > .success, -.table-hover > tbody > tr.success:hover > th { - background-color: #d0e9c6; -} - -.table > thead > tr > td.info, -.table > tbody > tr > td.info, -.table > tfoot > tr > td.info, -.table > thead > tr > th.info, -.table > tbody > tr > th.info, -.table > tfoot > tr > th.info, -.table > thead > tr.info > td, -.table > tbody > tr.info > td, -.table > tfoot > tr.info > td, -.table > thead > tr.info > th, -.table > tbody > tr.info > th, -.table > tfoot > tr.info > th { - background-color: #d9edf7; -} - -.table-hover > tbody > tr > td.info:hover, -.table-hover > tbody > tr > th.info:hover, -.table-hover > tbody > tr.info:hover > td, -.table-hover > tbody > tr:hover > .info, -.table-hover > tbody > tr.info:hover > th { - background-color: #c4e3f3; -} - -.table > thead > tr > td.warning, -.table > tbody > tr > td.warning, -.table > tfoot > tr > td.warning, -.table > thead > tr > th.warning, -.table > tbody > tr > th.warning, -.table > tfoot > tr > th.warning, -.table > thead > tr.warning > td, -.table > tbody > tr.warning > td, -.table > tfoot > tr.warning > td, -.table > thead > tr.warning > th, -.table > tbody > tr.warning > th, -.table > tfoot > tr.warning > th { - background-color: #fcf8e3; -} - -.table-hover > tbody > tr > td.warning:hover, -.table-hover > tbody > tr > th.warning:hover, -.table-hover > tbody > tr.warning:hover > td, -.table-hover > tbody > tr:hover > .warning, -.table-hover > tbody > tr.warning:hover > th { - background-color: #faf2cc; -} - -.table > thead > tr > td.danger, -.table > tbody > tr > td.danger, -.table > tfoot > tr > td.danger, -.table > thead > tr > th.danger, -.table > tbody > tr > th.danger, -.table > tfoot > tr > th.danger, -.table > thead > tr.danger > td, -.table > tbody > tr.danger > td, -.table > tfoot > tr.danger > td, -.table > thead > tr.danger > th, -.table > tbody > tr.danger > th, -.table > tfoot > tr.danger > th { - background-color: #f2dede; -} - -.table-hover > tbody > tr > td.danger:hover, -.table-hover > tbody > tr > th.danger:hover, -.table-hover > tbody > tr.danger:hover > td, -.table-hover > tbody > tr:hover > .danger, -.table-hover > tbody > tr.danger:hover > th { - background-color: #ebcccc; -} - -.table-responsive { - min-height: .01%; - overflow-x: auto; -} - -@media screen and (max-width: 767px) { - .table-responsive { - width: 100%; - margin-bottom: 15px; - overflow-y: hidden; - -ms-overflow-style: -ms-autohiding-scrollbar; - border: 2px solid #eef0f2; - } - - .table-responsive > .table { - margin-bottom: 0; - } - - .table-responsive > .table > thead > tr > th, - .table-responsive > .table > tbody > tr > th, - .table-responsive > .table > tfoot > tr > th, - .table-responsive > .table > thead > tr > td, - .table-responsive > .table > tbody > tr > td, - .table-responsive > .table > tfoot > tr > td { - white-space: nowrap; - } - - .table-responsive > .table-bordered { - border: 0; - } - - .table-responsive > .table-bordered > thead > tr > th:first-child, - .table-responsive > .table-bordered > tbody > tr > th:first-child, - .table-responsive > .table-bordered > tfoot > tr > th:first-child, - .table-responsive > .table-bordered > thead > tr > td:first-child, - .table-responsive > .table-bordered > tbody > tr > td:first-child, - .table-responsive > .table-bordered > tfoot > tr > td:first-child { - border-left: 0; - } - - .table-responsive > .table-bordered > thead > tr > th:last-child, - .table-responsive > .table-bordered > tbody > tr > th:last-child, - .table-responsive > .table-bordered > tfoot > tr > th:last-child, - .table-responsive > .table-bordered > thead > tr > td:last-child, - .table-responsive > .table-bordered > tbody > tr > td:last-child, - .table-responsive > .table-bordered > tfoot > tr > td:last-child { - border-right: 0; - } - - .table-responsive > .table-bordered > tbody > tr:last-child > th, - .table-responsive > .table-bordered > tfoot > tr:last-child > th, - .table-responsive > .table-bordered > tbody > tr:last-child > td, - .table-responsive > .table-bordered > tfoot > tr:last-child > td { - border-bottom: 0; - } -} - -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; -} - -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: 20px; - font-size: 21px; - line-height: inherit; - color: #373d49; - border: 0; - border-bottom: 1px solid #e5e5e5; -} - -label { - display: inline-block; - max-width: 100%; - margin-bottom: 5px; - font-weight: bold; -} - -input[type="search"] { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - margin-top: 1px \9; - line-height: normal; -} - -input[type="file"] { - display: block; -} - -input[type="range"] { - display: block; - width: 100%; -} - -select[multiple], -select[size] { - height: auto; -} - -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus { - outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -output { - display: block; - padding-top: 10px; - font-size: 14px; - line-height: 1.42857143; - color: #575e6b; -} - -.form-control { - display: block; - width: 100%; - height: 40px; - padding: 9px 18px; - font-size: 14px; - line-height: 1.42857143; - color: #575e6b; - background-color: #fff; - background-image: none; - border: 1px solid #ccc; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -} - -.form-control:focus { - border-color: #66afe9; - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); -} - -.form-control::-moz-placeholder { - color: #999; - opacity: 1; -} - -.form-control:-ms-input-placeholder { - color: #999; -} - -.form-control::-webkit-input-placeholder { - color: #999; -} - -.form-control::-ms-expand { - background-color: transparent; - border: 0; -} - -.form-control[disabled], -.form-control[readonly], -fieldset[disabled] .form-control { - background-color: #eef0f2; - opacity: 1; -} - -.form-control[disabled], -fieldset[disabled] .form-control { - cursor: not-allowed; -} - -textarea.form-control { - height: auto; -} - -input[type="search"] { - -webkit-appearance: none; -} - -@media screen and (-webkit-min-device-pixel-ratio: 0) { - input[type="date"].form-control, - input[type="time"].form-control, - input[type="datetime-local"].form-control, - input[type="month"].form-control { - line-height: 40px; - } - - input[type="date"].input-sm, - input[type="time"].input-sm, - input[type="datetime-local"].input-sm, - input[type="month"].input-sm, - .input-group-sm input[type="date"], - .input-group-sm input[type="time"], - .input-group-sm input[type="datetime-local"], - .input-group-sm input[type="month"] { - line-height: 28px; - } - - input[type="date"].input-lg, - input[type="time"].input-lg, - input[type="datetime-local"].input-lg, - input[type="month"].input-lg, - .input-group-lg input[type="date"], - .input-group-lg input[type="time"], - .input-group-lg input[type="datetime-local"], - .input-group-lg input[type="month"] { - line-height: 52px; - } -} - -.form-group { - margin-bottom: 15px; -} - -.radio, -.checkbox { - position: relative; - display: block; - margin-top: 10px; - margin-bottom: 10px; -} - -.radio label, -.checkbox label { - min-height: 20px; - padding-left: 20px; - margin-bottom: 0; - font-weight: normal; - cursor: pointer; -} - -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] { - position: absolute; - margin-top: 4px \9; - margin-left: -20px; -} - -.radio + .radio, -.checkbox + .checkbox { - margin-top: -5px; -} - -.radio-inline, -.checkbox-inline { - position: relative; - display: inline-block; - padding-left: 20px; - margin-bottom: 0; - font-weight: normal; - vertical-align: middle; - cursor: pointer; -} - -.radio-inline + .radio-inline, -.checkbox-inline + .checkbox-inline { - margin-top: 0; - margin-left: 10px; -} - -input[type="radio"][disabled], -input[type="checkbox"][disabled], -input[type="radio"].disabled, -input[type="checkbox"].disabled, -fieldset[disabled] input[type="radio"], -fieldset[disabled] input[type="checkbox"] { - cursor: not-allowed; -} - -.radio-inline.disabled, -.checkbox-inline.disabled, -fieldset[disabled] .radio-inline, -fieldset[disabled] .checkbox-inline { - cursor: not-allowed; -} - -.radio.disabled label, -.checkbox.disabled label, -fieldset[disabled] .radio label, -fieldset[disabled] .checkbox label { - cursor: not-allowed; -} - -.form-control-static { - min-height: 34px; - padding-top: 10px; - padding-bottom: 10px; - margin-bottom: 0; -} - -.form-control-static.input-lg, -.form-control-static.input-sm { - padding-right: 0; - padding-left: 0; -} - -.input-sm { - height: 28px; - padding: 4px 13px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; -} - -select.input-sm { - height: 28px; - line-height: 28px; -} - -textarea.input-sm, -select[multiple].input-sm { - height: auto; -} - -.form-group-sm .form-control { - height: 28px; - padding: 4px 13px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; -} - -.form-group-sm select.form-control { - height: 28px; - line-height: 28px; -} - -.form-group-sm textarea.form-control, -.form-group-sm select[multiple].form-control { - height: auto; -} - -.form-group-sm .form-control-static { - height: 28px; - min-height: 32px; - padding: 5px 13px; - font-size: 12px; - line-height: 1.5; -} - -.input-lg { - height: 52px; - padding: 13px 24px; - font-size: 18px; - line-height: 1.3333333; - border-radius: 5px; -} - -select.input-lg { - height: 52px; - line-height: 52px; -} - -textarea.input-lg, -select[multiple].input-lg { - height: auto; -} - -.form-group-lg .form-control { - height: 52px; - padding: 13px 24px; - font-size: 18px; - line-height: 1.3333333; - border-radius: 5px; -} - -.form-group-lg select.form-control { - height: 52px; - line-height: 52px; -} - -.form-group-lg textarea.form-control, -.form-group-lg select[multiple].form-control { - height: auto; -} - -.form-group-lg .form-control-static { - height: 52px; - min-height: 38px; - padding: 14px 24px; - font-size: 18px; - line-height: 1.3333333; -} - -.has-feedback { - position: relative; -} - -.has-feedback .form-control { - padding-right: 50px; -} - -.form-control-feedback { - position: absolute; - top: 0; - right: 0; - z-index: 2; - display: block; - width: 40px; - height: 40px; - line-height: 40px; - text-align: center; - pointer-events: none; -} - -.input-lg + .form-control-feedback, -.input-group-lg + .form-control-feedback, -.form-group-lg .form-control + .form-control-feedback { - width: 52px; - height: 52px; - line-height: 52px; -} - -.input-sm + .form-control-feedback, -.input-group-sm + .form-control-feedback, -.form-group-sm .form-control + .form-control-feedback { - width: 28px; - height: 28px; - line-height: 28px; -} - -.has-success .help-block, -.has-success .control-label, -.has-success .radio, -.has-success .checkbox, -.has-success .radio-inline, -.has-success .checkbox-inline, -.has-success.radio label, -.has-success.checkbox label, -.has-success.radio-inline label, -.has-success.checkbox-inline label { - color: #3c763d; -} - -.has-success .form-control { - border-color: #3c763d; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} - -.has-success .form-control:focus { - border-color: #2b542c; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; -} - -.has-success .input-group-addon { - color: #3c763d; - background-color: #dff0d8; - border-color: #3c763d; -} - -.has-success .form-control-feedback { - color: #3c763d; -} - -.has-warning .help-block, -.has-warning .control-label, -.has-warning .radio, -.has-warning .checkbox, -.has-warning .radio-inline, -.has-warning .checkbox-inline, -.has-warning.radio label, -.has-warning.checkbox label, -.has-warning.radio-inline label, -.has-warning.checkbox-inline label { - color: #8a6d3b; -} - -.has-warning .form-control { - border-color: #8a6d3b; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} - -.has-warning .form-control:focus { - border-color: #66512c; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; -} - -.has-warning .input-group-addon { - color: #8a6d3b; - background-color: #fcf8e3; - border-color: #8a6d3b; -} - -.has-warning .form-control-feedback { - color: #8a6d3b; -} - -.has-error .help-block, -.has-error .control-label, -.has-error .radio, -.has-error .checkbox, -.has-error .radio-inline, -.has-error .checkbox-inline, -.has-error.radio label, -.has-error.checkbox label, -.has-error.radio-inline label, -.has-error.checkbox-inline label { - color: #a94442; -} - -.has-error .form-control { - border-color: #a94442; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} - -.has-error .form-control:focus { - border-color: #843534; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; -} - -.has-error .input-group-addon { - color: #a94442; - background-color: #f2dede; - border-color: #a94442; -} - -.has-error .form-control-feedback { - color: #a94442; -} - -.has-feedback label ~ .form-control-feedback { - top: 25px; -} - -.has-feedback label.sr-only ~ .form-control-feedback { - top: 0; -} - -.help-block { - display: block; - margin-top: 5px; - margin-bottom: 10px; - color: #979eaa; -} - -@media (min-width: 768px) { - .form-inline .form-group { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; - } - - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - - .form-inline .form-control-static { - display: inline-block; - } - - .form-inline .input-group { - display: inline-table; - vertical-align: middle; - } - - .form-inline .input-group .input-group-addon, - .form-inline .input-group .input-group-btn, - .form-inline .input-group .form-control { - width: auto; - } - - .form-inline .input-group > .form-control { - width: 100%; - } - - .form-inline .control-label { - margin-bottom: 0; - vertical-align: middle; - } - - .form-inline .radio, - .form-inline .checkbox { - display: inline-block; - margin-top: 0; - margin-bottom: 0; - vertical-align: middle; - } - - .form-inline .radio label, - .form-inline .checkbox label { - padding-left: 0; - } - - .form-inline .radio input[type="radio"], - .form-inline .checkbox input[type="checkbox"] { - position: relative; - margin-left: 0; - } - - .form-inline .has-feedback .form-control-feedback { - top: 0; - } -} - -.form-horizontal .radio, -.form-horizontal .checkbox, -.form-horizontal .radio-inline, -.form-horizontal .checkbox-inline { - padding-top: 10px; - margin-top: 0; - margin-bottom: 0; -} - -.form-horizontal .radio, -.form-horizontal .checkbox { - min-height: 30px; -} - -.form-horizontal .form-group { - margin-right: -15px; - margin-left: -15px; -} - -@media (min-width: 768px) { - .form-horizontal .control-label { - padding-top: 10px; - margin-bottom: 0; - text-align: right; - } -} - -.form-horizontal .has-feedback .form-control-feedback { - right: 15px; -} - -@media (min-width: 768px) { - .form-horizontal .form-group-lg .control-label { - padding-top: 14px; - font-size: 18px; - } -} - -@media (min-width: 768px) { - .form-horizontal .form-group-sm .control-label { - padding-top: 5px; - font-size: 12px; - } -} - -.btn { - display: inline-block; - padding: 9px 18px; - margin-bottom: 0; - font-size: 14px; - font-weight: normal; - line-height: 1.42857143; - text-align: center; - white-space: nowrap; - vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-image: none; - border: 1px solid transparent; - border-radius: 4px; -} - -.btn:focus, -.btn:active:focus, -.btn.active:focus, -.btn.focus, -.btn:active.focus, -.btn.active.focus { - outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -.btn:hover, -.btn:focus, -.btn.focus { - color: #575e6b; - text-decoration: none; -} - -.btn:active, -.btn.active { - background-image: none; - outline: 0; - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); -} - -.btn.disabled, -.btn[disabled], -fieldset[disabled] .btn { - cursor: not-allowed; - filter: alpha(opacity = 65); - -webkit-box-shadow: none; - box-shadow: none; - opacity: .65; -} - -a.btn.disabled, -fieldset[disabled] a.btn { - pointer-events: none; -} - -.btn-default { - color: #575e6b; - background-color: #d7dce0; - border-color: #cbd0d6; -} - -.btn-default:focus, -.btn-default.focus { - color: #575e6b; - background-color: #bac3ca; - border-color: #84909e; -} - -.btn-default:hover { - color: #575e6b; - background-color: #bac3ca; - border-color: #a9b1bb; -} - -.btn-default:active, -.btn-default.active, -.open > .dropdown-toggle.btn-default { - color: #575e6b; - background-color: #bac3ca; - border-color: #a9b1bb; -} - -.btn-default:active:hover, -.btn-default.active:hover, -.open > .dropdown-toggle.btn-default:hover, -.btn-default:active:focus, -.btn-default.active:focus, -.open > .dropdown-toggle.btn-default:focus, -.btn-default:active.focus, -.btn-default.active.focus, -.open > .dropdown-toggle.btn-default.focus { - color: #575e6b; - background-color: #a6b1ba; - border-color: #84909e; -} - -.btn-default:active, -.btn-default.active, -.open > .dropdown-toggle.btn-default { - background-image: none; -} - -.btn-default.disabled:hover, -.btn-default[disabled]:hover, -fieldset[disabled] .btn-default:hover, -.btn-default.disabled:focus, -.btn-default[disabled]:focus, -fieldset[disabled] .btn-default:focus, -.btn-default.disabled.focus, -.btn-default[disabled].focus, -fieldset[disabled] .btn-default.focus { - background-color: #d7dce0; - border-color: #cbd0d6; -} - -.btn-default .badge { - color: #d7dce0; - background-color: #575e6b; -} - -.btn-primary { - color: #f0fcff; - background-color: #22adf6; - border-color: #4591ed; -} - -.btn-primary:focus, -.btn-primary.focus { - color: #f0fcff; - background-color: #0993dc; - border-color: #1052a3; -} - -.btn-primary:hover { - color: #f0fcff; - background-color: #0993dc; - border-color: #1671df; -} - -.btn-primary:active, -.btn-primary.active, -.open > .dropdown-toggle.btn-primary { - color: #f0fcff; - background-color: #0993dc; - border-color: #1671df; -} - -.btn-primary:active:hover, -.btn-primary.active:hover, -.open > .dropdown-toggle.btn-primary:hover, -.btn-primary:active:focus, -.btn-primary.active:focus, -.open > .dropdown-toggle.btn-primary:focus, -.btn-primary:active.focus, -.btn-primary.active.focus, -.open > .dropdown-toggle.btn-primary.focus { - color: #f0fcff; - background-color: #087cba; - border-color: #1052a3; -} - -.btn-primary:active, -.btn-primary.active, -.open > .dropdown-toggle.btn-primary { - background-image: none; -} - -.btn-primary.disabled:hover, -.btn-primary[disabled]:hover, -fieldset[disabled] .btn-primary:hover, -.btn-primary.disabled:focus, -.btn-primary[disabled]:focus, -fieldset[disabled] .btn-primary:focus, -.btn-primary.disabled.focus, -.btn-primary[disabled].focus, -fieldset[disabled] .btn-primary.focus { - background-color: #22adf6; - border-color: #4591ed; -} - -.btn-primary .badge { - color: #22adf6; - background-color: #f0fcff; -} - -.btn-success { - color: #f2fff4; - background-color: #4ed8a0; - border-color: #32b08c; -} - -.btn-success:focus, -.btn-success.focus { - color: #f2fff4; - background-color: #2cc788; - border-color: #164d3d; -} - -.btn-success:hover { - color: #f2fff4; - background-color: #2cc788; - border-color: #248066; -} - -.btn-success:active, -.btn-success.active, -.open > .dropdown-toggle.btn-success { - color: #f2fff4; - background-color: #2cc788; - border-color: #248066; -} - -.btn-success:active:hover, -.btn-success.active:hover, -.open > .dropdown-toggle.btn-success:hover, -.btn-success:active:focus, -.btn-success.active:focus, -.open > .dropdown-toggle.btn-success:focus, -.btn-success:active.focus, -.btn-success.active.focus, -.open > .dropdown-toggle.btn-success.focus { - color: #f2fff4; - background-color: #25aa74; - border-color: #164d3d; -} - -.btn-success:active, -.btn-success.active, -.open > .dropdown-toggle.btn-success { - background-image: none; -} - -.btn-success.disabled:hover, -.btn-success[disabled]:hover, -fieldset[disabled] .btn-success:hover, -.btn-success.disabled:focus, -.btn-success[disabled]:focus, -fieldset[disabled] .btn-success:focus, -.btn-success.disabled.focus, -.btn-success[disabled].focus, -fieldset[disabled] .btn-success.focus { - background-color: #4ed8a0; - border-color: #32b08c; -} - -.btn-success .badge { - color: #4ed8a0; - background-color: #f2fff4; -} - -.btn-info { - color: #d7dce0; - background-color: #454c59; - border-color: #2c323d; -} - -.btn-info:focus, -.btn-info.focus { - color: #d7dce0; - background-color: #2f333c; - border-color: #000; -} - -.btn-info:hover { - color: #d7dce0; - background-color: #2f333c; - border-color: #121519; -} - -.btn-info:active, -.btn-info.active, -.open > .dropdown-toggle.btn-info { - color: #d7dce0; - background-color: #2f333c; - border-color: #121519; -} - -.btn-info:active:hover, -.btn-info.active:hover, -.open > .dropdown-toggle.btn-info:hover, -.btn-info:active:focus, -.btn-info.active:focus, -.open > .dropdown-toggle.btn-info:focus, -.btn-info:active.focus, -.btn-info.active.focus, -.open > .dropdown-toggle.btn-info.focus { - color: #d7dce0; - background-color: #1f2228; - border-color: #000; -} - -.btn-info:active, -.btn-info.active, -.open > .dropdown-toggle.btn-info { - background-image: none; -} - -.btn-info.disabled:hover, -.btn-info[disabled]:hover, -fieldset[disabled] .btn-info:hover, -.btn-info.disabled:focus, -.btn-info[disabled]:focus, -fieldset[disabled] .btn-info:focus, -.btn-info.disabled.focus, -.btn-info[disabled].focus, -fieldset[disabled] .btn-info.focus { - background-color: #454c59; - border-color: #2c323d; -} - -.btn-info .badge { - color: #454c59; - background-color: #d7dce0; -} - -.btn-warning { - color: #f2f4ff; - background-color: #7a65f2; - border-color: #513cc6; -} - -.btn-warning:focus, -.btn-warning.focus { - color: #f2f4ff; - background-color: #5136ee; - border-color: #281e65; -} - -.btn-warning:hover { - color: #f2f4ff; - background-color: #5136ee; - border-color: #3d2d98; -} - -.btn-warning:active, -.btn-warning.active, -.open > .dropdown-toggle.btn-warning { - color: #f2f4ff; - background-color: #5136ee; - border-color: #3d2d98; -} - -.btn-warning:active:hover, -.btn-warning.active:hover, -.open > .dropdown-toggle.btn-warning:hover, -.btn-warning:active:focus, -.btn-warning.active:focus, -.open > .dropdown-toggle.btn-warning:focus, -.btn-warning:active.focus, -.btn-warning.active.focus, -.open > .dropdown-toggle.btn-warning.focus { - color: #f2f4ff; - background-color: #3515eb; - border-color: #281e65; -} - -.btn-warning:active, -.btn-warning.active, -.open > .dropdown-toggle.btn-warning { - background-image: none; -} - -.btn-warning.disabled:hover, -.btn-warning[disabled]:hover, -fieldset[disabled] .btn-warning:hover, -.btn-warning.disabled:focus, -.btn-warning[disabled]:focus, -fieldset[disabled] .btn-warning:focus, -.btn-warning.disabled.focus, -.btn-warning[disabled].focus, -fieldset[disabled] .btn-warning.focus { - background-color: #7a65f2; - border-color: #513cc6; -} - -.btn-warning .badge { - color: #7a65f2; - background-color: #f2f4ff; -} - -.btn-danger { - color: #fff7f4; - background-color: #f95f53; - border-color: #dc4e58; -} - -.btn-danger:focus, -.btn-danger.focus { - color: #fff7f4; - background-color: #f73122; - border-color: #8e1c24; -} - -.btn-danger:hover { - color: #fff7f4; - background-color: #f73122; - border-color: #c62732; -} - -.btn-danger:active, -.btn-danger.active, -.open > .dropdown-toggle.btn-danger { - color: #fff7f4; - background-color: #f73122; - border-color: #c62732; -} - -.btn-danger:active:hover, -.btn-danger.active:hover, -.open > .dropdown-toggle.btn-danger:hover, -.btn-danger:active:focus, -.btn-danger.active:focus, -.open > .dropdown-toggle.btn-danger:focus, -.btn-danger:active.focus, -.btn-danger.active.focus, -.open > .dropdown-toggle.btn-danger.focus { - color: #fff7f4; - background-color: #ed1908; - border-color: #8e1c24; -} - -.btn-danger:active, -.btn-danger.active, -.open > .dropdown-toggle.btn-danger { - background-image: none; -} - -.btn-danger.disabled:hover, -.btn-danger[disabled]:hover, -fieldset[disabled] .btn-danger:hover, -.btn-danger.disabled:focus, -.btn-danger[disabled]:focus, -fieldset[disabled] .btn-danger:focus, -.btn-danger.disabled.focus, -.btn-danger[disabled].focus, -fieldset[disabled] .btn-danger.focus { - background-color: #f95f53; - border-color: #dc4e58; -} - -.btn-danger .badge { - color: #f95f53; - background-color: #fff7f4; -} - -.btn-link { - font-weight: normal; - color: #22adf6; - border-radius: 0; -} - -.btn-link, -.btn-link:active, -.btn-link.active, -.btn-link[disabled], -fieldset[disabled] .btn-link { - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; -} - -.btn-link, -.btn-link:hover, -.btn-link:focus, -.btn-link:active { - border-color: transparent; -} - -.btn-link:hover, -.btn-link:focus { - color: #00c9ff; - text-decoration: none; - background-color: transparent; -} - -.btn-link[disabled]:hover, -fieldset[disabled] .btn-link:hover, -.btn-link[disabled]:focus, -fieldset[disabled] .btn-link:focus { - color: #79818c; - text-decoration: none; -} - -.btn-lg, -.btn-group-lg > .btn { - padding: 13px 24px; - font-size: 18px; - line-height: 1.3333333; - border-radius: 5px; -} - -.btn-sm, -.btn-group-sm > .btn { - padding: 4px 13px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; -} - -.btn-xs, -.btn-group-xs > .btn { - padding: 2px 9px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; -} - -.btn-block { - display: block; - width: 100%; -} - -.btn-block + .btn-block { - margin-top: 5px; -} - -// Spinner button -// Not already in theme, so making a rough version here - -@keyframes buttonSpinner { - 0% { - transform: translate(-50%, -50%) rotate(0deg); - } - 100% { - transform: translate(-50%, -50%) rotate(360deg); - } -} -.btn-spinner { - position: relative; - - &, - &:hover, - &:focus, - &:active, - &:focus:active, - &:focus:hover, - &:focus:active:hover { - color: transparent !important; - text-shadow: none; - } - - // Spinner shared styles - &:before { - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - animation-name: buttonSpinner; - animation-iteration-count: infinite; - animation-duration: 0.6s; - animation-timing-function: linear; - content: ''; - border-radius: 50%; - border-width: 2px; - border-style: solid; - border-color: fade_out($g20-white, 0.75); - border-top-color: $g20-white; - width: 20px; - height: 20px; - } - // Size of spinner related to button size - &.btn-xs:before { - width: 13px; - height: 13px; - } - &.btn-sm:before { - width: 16px; - height: 16px; - } - &.btn-md:before { - width: 20px; - height: 20px; - } - &.btn-lg:before { - width: 24px; - height: 24px; - } -} - -input[type="submit"].btn-block, -input[type="reset"].btn-block, -input[type="button"].btn-block { - width: 100%; -} - -.fade { - opacity: 0; - -webkit-transition: opacity .15s linear; - -o-transition: opacity .15s linear; - transition: opacity .15s linear; -} - -.fade.in { - opacity: 1; -} - -.collapse { - display: none; -} - -.collapse.in { - display: block; -} - -tr.collapse.in { - display: table-row; -} - -tbody.collapse.in { - display: table-row-group; -} - -.collapsing { - position: relative; - height: 0; - overflow: hidden; - -webkit-transition-timing-function: ease; - -o-transition-timing-function: ease; - transition-timing-function: ease; - -webkit-transition-duration: .35s; - -o-transition-duration: .35s; - transition-duration: .35s; - -webkit-transition-property: height, visibility; - -o-transition-property: height, visibility; - transition-property: height, visibility; -} - -.caret { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: 4px dashed; - border-top: 4px solid \9; - border-right: 4px solid transparent; - border-left: 4px solid transparent; -} - -.dropup, -.dropdown { - position: relative; -} - -.dropdown-toggle:focus { - outline: 0; -} - -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; - font-size: 14px; - text-align: left; - list-style: none; - background-color: #fff; - -webkit-background-clip: padding-box; - background-clip: padding-box; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); -} - -.dropdown-menu.pull-right { - right: 0; - left: auto; -} - -.dropdown-menu .divider { - height: 1px; - margin: 9px 0; - overflow: hidden; - background-color: #e5e5e5; -} - -.dropdown-menu > li > a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: 1.42857143; - color: #373d49; - white-space: nowrap; -} - -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus { - color: #2c313a; - text-decoration: none; - background-color: #f5f5f5; -} - -.dropdown-menu > .active > a, -.dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus { - color: #fff; - text-decoration: none; - background-color: #22adf6; - outline: 0; -} - -.dropdown-menu > .disabled > a, -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - color: #79818c; -} - -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - text-decoration: none; - cursor: not-allowed; - background-color: transparent; - background-image: none; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); -} - -.open > .dropdown-menu { - display: block; -} - -.open > a { - outline: 0; -} - -.dropdown-menu-right { - right: 0; - left: auto; -} - -.dropdown-menu-left { - right: auto; - left: 0; -} - -.dropdown-header { - display: block; - padding: 3px 20px; - font-size: 12px; - line-height: 1.42857143; - color: #79818c; - white-space: nowrap; -} - -.dropdown-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 990; -} - -.pull-right > .dropdown-menu { - right: 0; - left: auto; -} - -.dropup .caret, -.navbar-fixed-bottom .dropdown .caret { - content: ""; - border-top: 0; - border-bottom: 4px dashed; - border-bottom: 4px solid \9; -} - -.dropup .dropdown-menu, -.navbar-fixed-bottom .dropdown .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: 2px; -} - -@media (min-width: 768px) { - .navbar-right .dropdown-menu { - right: 0; - left: auto; - } - - .navbar-right .dropdown-menu-left { - right: auto; - left: 0; - } -} - -.btn-group, -.btn-group-vertical { - position: relative; - display: inline-block; - vertical-align: middle; -} - -.btn-group > .btn, -.btn-group-vertical > .btn { - position: relative; - float: left; -} - -.btn-group > .btn:hover, -.btn-group-vertical > .btn:hover, -.btn-group > .btn:focus, -.btn-group-vertical > .btn:focus, -.btn-group > .btn:active, -.btn-group-vertical > .btn:active, -.btn-group > .btn.active, -.btn-group-vertical > .btn.active { - z-index: 2; -} - -.btn-group .btn + .btn, -.btn-group .btn + .btn-group, -.btn-group .btn-group + .btn, -.btn-group .btn-group + .btn-group { - margin-left: -1px; -} - -.btn-toolbar { - margin-left: -5px; -} - -.btn-toolbar .btn, -.btn-toolbar .btn-group, -.btn-toolbar .input-group { - float: left; -} - -.btn-toolbar > .btn, -.btn-toolbar > .btn-group, -.btn-toolbar > .input-group { - margin-left: 5px; -} - -.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { - border-radius: 0; -} - -.btn-group > .btn:first-child { - margin-left: 0; -} - -.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.btn-group > .btn:last-child:not(:first-child), -.btn-group > .dropdown-toggle:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.btn-group > .btn-group { - float: left; -} - -.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} - -.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, -.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle { - outline: 0; -} - -.btn-group > .btn + .dropdown-toggle { - padding-right: 8px; - padding-left: 8px; -} - -.btn-group > .btn-lg + .dropdown-toggle { - padding-right: 12px; - padding-left: 12px; -} - -.btn-group.open .dropdown-toggle { - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); -} - -.btn-group.open .dropdown-toggle.btn-link { - -webkit-box-shadow: none; - box-shadow: none; -} - -.btn .caret { - margin-left: 0; -} - -.btn-lg .caret { - border-width: 5px 5px 0; - border-bottom-width: 0; -} - -.dropup .btn-lg .caret { - border-width: 0 5px 5px; -} - -.btn-group-vertical > .btn, -.btn-group-vertical > .btn-group, -.btn-group-vertical > .btn-group > .btn { - display: block; - float: none; - width: 100%; - max-width: 100%; -} - -.btn-group-vertical > .btn-group > .btn { - float: none; -} - -.btn-group-vertical > .btn + .btn, -.btn-group-vertical > .btn + .btn-group, -.btn-group-vertical > .btn-group + .btn, -.btn-group-vertical > .btn-group + .btn-group { - margin-top: -1px; - margin-left: 0; -} - -.btn-group-vertical > .btn:not(:first-child):not(:last-child) { - border-radius: 0; -} - -.btn-group-vertical > .btn:first-child:not(:last-child) { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.btn-group-vertical > .btn:last-child:not(:first-child) { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; -} - -.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} - -.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, -.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.btn-group-justified { - display: table; - width: 100%; - table-layout: fixed; - border-collapse: separate; -} - -.btn-group-justified > .btn, -.btn-group-justified > .btn-group { - display: table-cell; - float: none; - width: 1%; -} - -.btn-group-justified > .btn-group .btn { - width: 100%; -} - -.btn-group-justified > .btn-group .dropdown-menu { - left: auto; -} - -[data-toggle="buttons"] > .btn input[type="radio"], -[data-toggle="buttons"] > .btn-group > .btn input[type="radio"], -[data-toggle="buttons"] > .btn input[type="checkbox"], -[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { - position: absolute; - clip: rect(0, 0, 0, 0); - pointer-events: none; -} - -.input-group { - position: relative; - display: table; - border-collapse: separate; -} - -.input-group[class*="col-"] { - float: none; - padding-right: 0; - padding-left: 0; -} - -.input-group .form-control { - position: relative; - z-index: 2; - float: left; - width: 100%; - margin-bottom: 0; -} - -.input-group .form-control:focus { - z-index: 3; -} - -.input-group-lg > .form-control, -.input-group-lg > .input-group-addon, -.input-group-lg > .input-group-btn > .btn { - height: 52px; - padding: 13px 24px; - font-size: 18px; - line-height: 1.3333333; - border-radius: 5px; -} - -select.input-group-lg > .form-control, -select.input-group-lg > .input-group-addon, -select.input-group-lg > .input-group-btn > .btn { - height: 52px; - line-height: 52px; -} - -textarea.input-group-lg > .form-control, -textarea.input-group-lg > .input-group-addon, -textarea.input-group-lg > .input-group-btn > .btn, -select[multiple].input-group-lg > .form-control, -select[multiple].input-group-lg > .input-group-addon, -select[multiple].input-group-lg > .input-group-btn > .btn { - height: auto; -} - -.input-group-sm > .form-control, -.input-group-sm > .input-group-addon, -.input-group-sm > .input-group-btn > .btn { - height: 28px; - padding: 4px 13px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; -} - -select.input-group-sm > .form-control, -select.input-group-sm > .input-group-addon, -select.input-group-sm > .input-group-btn > .btn { - height: 28px; - line-height: 28px; -} - -textarea.input-group-sm > .form-control, -textarea.input-group-sm > .input-group-addon, -textarea.input-group-sm > .input-group-btn > .btn, -select[multiple].input-group-sm > .form-control, -select[multiple].input-group-sm > .input-group-addon, -select[multiple].input-group-sm > .input-group-btn > .btn { - height: auto; -} - -.input-group-addon, -.input-group-btn, -.input-group .form-control { - display: table-cell; -} - -.input-group-addon:not(:first-child):not(:last-child), -.input-group-btn:not(:first-child):not(:last-child), -.input-group .form-control:not(:first-child):not(:last-child) { - border-radius: 0; -} - -.input-group-addon, -.input-group-btn { - width: 1%; - white-space: nowrap; - vertical-align: middle; -} - -.input-group-addon { - padding: 9px 18px; - font-size: 14px; - font-weight: normal; - line-height: 1; - color: #575e6b; - text-align: center; - background-color: #eef0f2; - border: 1px solid #ccc; - border-radius: 4px; -} - -.input-group-addon.input-sm { - padding: 4px 13px; - font-size: 12px; - border-radius: 3px; -} - -.input-group-addon.input-lg { - padding: 13px 24px; - font-size: 18px; - border-radius: 5px; -} - -.input-group-addon input[type="radio"], -.input-group-addon input[type="checkbox"] { - margin-top: 0; -} - -.input-group .form-control:first-child, -.input-group-addon:first-child, -.input-group-btn:first-child > .btn, -.input-group-btn:first-child > .btn-group > .btn, -.input-group-btn:first-child > .dropdown-toggle, -.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.input-group-addon:first-child { - border-right: 0; -} - -.input-group .form-control:last-child, -.input-group-addon:last-child, -.input-group-btn:last-child > .btn, -.input-group-btn:last-child > .btn-group > .btn, -.input-group-btn:last-child > .dropdown-toggle, -.input-group-btn:first-child > .btn:not(:first-child), -.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.input-group-addon:last-child { - border-left: 0; -} - -.input-group-btn { - position: relative; - font-size: 0; - white-space: nowrap; -} - -.input-group-btn > .btn { - position: relative; -} - -.input-group-btn > .btn + .btn { - margin-left: -1px; -} - -.input-group-btn > .btn:hover, -.input-group-btn > .btn:focus, -.input-group-btn > .btn:active { - z-index: 2; -} - -.input-group-btn:first-child > .btn, -.input-group-btn:first-child > .btn-group { - margin-right: -1px; -} - -.input-group-btn:last-child > .btn, -.input-group-btn:last-child > .btn-group { - z-index: 2; - margin-left: -1px; -} - -.nav { - padding-left: 0; - margin-bottom: 0; - list-style: none; -} - -.nav > li { - position: relative; - display: block; -} - -.nav > li > a { - position: relative; - display: block; - padding: 10px 15px; -} - -.nav > li > a:hover, -.nav > li > a:focus { - text-decoration: none; - background-color: #eef0f2; -} - -.nav > li.disabled > a { - color: #79818c; -} - -.nav > li.disabled > a:hover, -.nav > li.disabled > a:focus { - color: #79818c; - text-decoration: none; - cursor: not-allowed; - background-color: transparent; -} - -.nav .open > a, -.nav .open > a:hover, -.nav .open > a:focus { - background-color: #eef0f2; - border-color: #22adf6; -} - -.nav .nav-divider { - height: 1px; - margin: 9px 0; - overflow: hidden; - background-color: #e5e5e5; -} - -.nav > li > a > img { - max-width: none; -} - -.nav-tabs { - border-bottom: 1px solid #ddd; -} - -.nav-tabs > li { - float: left; - margin-bottom: -1px; -} - -.nav-tabs > li > a { - margin-right: 2px; - line-height: 1.42857143; - border: 1px solid transparent; - border-radius: 4px 4px 0 0; -} - -.nav-tabs > li > a:hover { - border-color: #eef0f2 #eef0f2 #ddd; -} - -.nav-tabs > li.active > a, -.nav-tabs > li.active > a:hover, -.nav-tabs > li.active > a:focus { - color: #575e6b; - cursor: default; - background-color: #fafbfc; - border: 1px solid #ddd; - border-bottom-color: transparent; -} - -.nav-tabs.nav-justified { - width: 100%; - border-bottom: 0; -} - -.nav-tabs.nav-justified > li { - float: none; -} - -.nav-tabs.nav-justified > li > a { - margin-bottom: 5px; - text-align: center; -} - -.nav-tabs.nav-justified > .dropdown .dropdown-menu { - top: auto; - left: auto; -} - -@media (min-width: 768px) { - .nav-tabs.nav-justified > li { - display: table-cell; - width: 1%; - } - - .nav-tabs.nav-justified > li > a { - margin-bottom: 0; - } -} - -.nav-tabs.nav-justified > li > a { - margin-right: 0; - border-radius: 4px; -} - -.nav-tabs.nav-justified > .active > a, -.nav-tabs.nav-justified > .active > a:hover, -.nav-tabs.nav-justified > .active > a:focus { - border: 1px solid #ddd; -} - -@media (min-width: 768px) { - .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #ddd; - border-radius: 4px 4px 0 0; - } - - .nav-tabs.nav-justified > .active > a, - .nav-tabs.nav-justified > .active > a:hover, - .nav-tabs.nav-justified > .active > a:focus { - border-bottom-color: #fafbfc; - } -} - -.nav-pills > li { - float: left; -} - -.nav-pills > li > a { - border-radius: 4px; -} - -.nav-pills > li + li { - margin-left: 2px; -} - -.nav-pills > li.active > a, -.nav-pills > li.active > a:hover, -.nav-pills > li.active > a:focus { - color: #fff; - background-color: #22adf6; -} - -.nav-stacked > li { - float: none; -} - -.nav-stacked > li + li { - margin-top: 2px; - margin-left: 0; -} - -.nav-justified { - width: 100%; -} - -.nav-justified > li { - float: none; -} - -.nav-justified > li > a { - margin-bottom: 5px; - text-align: center; -} - -.nav-justified > .dropdown .dropdown-menu { - top: auto; - left: auto; -} - -@media (min-width: 768px) { - .nav-justified > li { - display: table-cell; - width: 1%; - } - - .nav-justified > li > a { - margin-bottom: 0; - } -} - -.nav-tabs-justified { - border-bottom: 0; -} - -.nav-tabs-justified > li > a { - margin-right: 0; - border-radius: 4px; -} - -.nav-tabs-justified > .active > a, -.nav-tabs-justified > .active > a:hover, -.nav-tabs-justified > .active > a:focus { - border: 1px solid #ddd; -} - -@media (min-width: 768px) { - .nav-tabs-justified > li > a { - border-bottom: 1px solid #ddd; - border-radius: 4px 4px 0 0; - } - - .nav-tabs-justified > .active > a, - .nav-tabs-justified > .active > a:hover, - .nav-tabs-justified > .active > a:focus { - border-bottom-color: #fafbfc; - } -} - -.tab-content > .tab-pane { - display: none; -} - -.tab-content > .active { - display: block; -} - -.nav-tabs .dropdown-menu { - margin-top: -1px; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.navbar { - position: relative; - min-height: 60px; - margin-bottom: 20px; - border: 1px solid transparent; -} - -@media (min-width: 768px) { - .navbar { - border-radius: 4px; - } -} - -@media (min-width: 768px) { - .navbar-header { - float: left; - } -} - -.navbar-collapse { - padding-right: 15px; - padding-left: 15px; - overflow-x: visible; - -webkit-overflow-scrolling: touch; - border-top: 1px solid transparent; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.navbar-collapse.in { - overflow-y: auto; -} - -@media (min-width: 768px) { - .navbar-collapse { - width: auto; - border-top: 0; - -webkit-box-shadow: none; - box-shadow: none; - } - - .navbar-collapse.collapse { - display: block !important; - height: auto !important; - padding-bottom: 0; - overflow: visible !important; - } - - .navbar-collapse.in { - overflow-y: visible; - } - - .navbar-fixed-top .navbar-collapse, - .navbar-static-top .navbar-collapse, - .navbar-fixed-bottom .navbar-collapse { - padding-right: 0; - padding-left: 0; - } -} - -.navbar-fixed-top .navbar-collapse, -.navbar-fixed-bottom .navbar-collapse { - max-height: 340px; -} - -@media (max-device-width: 480px) and (orientation: landscape) { - .navbar-fixed-top .navbar-collapse, - .navbar-fixed-bottom .navbar-collapse { - max-height: 200px; - } -} - -.container > .navbar-header, -.container-fluid > .navbar-header, -.container > .navbar-collapse, -.container-fluid > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; -} - -@media (min-width: 768px) { - .container > .navbar-header, - .container-fluid > .navbar-header, - .container > .navbar-collapse, - .container-fluid > .navbar-collapse { - margin-right: 0; - margin-left: 0; - } -} - -.navbar-static-top { - z-index: 1000; - border-width: 0 0 1px; -} - -@media (min-width: 768px) { - .navbar-static-top { - border-radius: 0; - } -} - -.navbar-fixed-top, -.navbar-fixed-bottom { - position: fixed; - right: 0; - left: 0; - z-index: 1030; -} - -@media (min-width: 768px) { - .navbar-fixed-top, - .navbar-fixed-bottom { - border-radius: 0; - } -} - -.navbar-fixed-top { - top: 0; - border-width: 0 0 1px; -} - -.navbar-fixed-bottom { - bottom: 0; - margin-bottom: 0; - border-width: 1px 0 0; -} - -.navbar-brand { - float: left; - height: 60px; - padding: 20px 15px; - font-size: 18px; - line-height: 20px; -} - -.navbar-brand:hover, -.navbar-brand:focus { - text-decoration: none; -} - -.navbar-brand > img { - display: block; -} - -@media (min-width: 768px) { - .navbar > .container .navbar-brand, - .navbar > .container-fluid .navbar-brand { - margin-left: -15px; - } -} - -.navbar-toggle { - position: relative; - float: right; - padding: 9px 10px; - margin-top: 13px; - margin-right: 15px; - margin-bottom: 13px; - background-color: transparent; - background-image: none; - border: 1px solid transparent; - border-radius: 4px; -} - -.navbar-toggle:focus { - outline: 0; -} - -.navbar-toggle .icon-bar { - display: block; - width: 22px; - height: 2px; - border-radius: 1px; -} - -.navbar-toggle .icon-bar + .icon-bar { - margin-top: 4px; -} - -@media (min-width: 768px) { - .navbar-toggle { - display: none; - } -} - -.navbar-nav { - margin: 10px -15px; -} - -.navbar-nav > li > a { - padding-top: 10px; - padding-bottom: 10px; - line-height: 20px; -} - -@media (max-width: 767px) { - .navbar-nav .open .dropdown-menu { - position: static; - float: none; - width: auto; - margin-top: 0; - background-color: transparent; - border: 0; - -webkit-box-shadow: none; - box-shadow: none; - } - - .navbar-nav .open .dropdown-menu > li > a, - .navbar-nav .open .dropdown-menu .dropdown-header { - padding: 5px 15px 5px 25px; - } - - .navbar-nav .open .dropdown-menu > li > a { - line-height: 20px; - } - - .navbar-nav .open .dropdown-menu > li > a:hover, - .navbar-nav .open .dropdown-menu > li > a:focus { - background-image: none; - } -} - -@media (min-width: 768px) { - .navbar-nav { - float: left; - margin: 0; - } - - .navbar-nav > li { - float: left; - } - - .navbar-nav > li > a { - padding-top: 20px; - padding-bottom: 20px; - } -} - -.navbar-form { - padding: 10px 15px; - margin-top: 10px; - margin-right: -15px; - margin-bottom: 10px; - margin-left: -15px; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); -} - -@media (min-width: 768px) { - .navbar-form .form-group { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; - } - - .navbar-form .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - - .navbar-form .form-control-static { - display: inline-block; - } - - .navbar-form .input-group { - display: inline-table; - vertical-align: middle; - } - - .navbar-form .input-group .input-group-addon, - .navbar-form .input-group .input-group-btn, - .navbar-form .input-group .form-control { - width: auto; - } - - .navbar-form .input-group > .form-control { - width: 100%; - } - - .navbar-form .control-label { - margin-bottom: 0; - vertical-align: middle; - } - - .navbar-form .radio, - .navbar-form .checkbox { - display: inline-block; - margin-top: 0; - margin-bottom: 0; - vertical-align: middle; - } - - .navbar-form .radio label, - .navbar-form .checkbox label { - padding-left: 0; - } - - .navbar-form .radio input[type="radio"], - .navbar-form .checkbox input[type="checkbox"] { - position: relative; - margin-left: 0; - } - - .navbar-form .has-feedback .form-control-feedback { - top: 0; - } -} - -@media (max-width: 767px) { - .navbar-form .form-group { - margin-bottom: 5px; - } - - .navbar-form .form-group:last-child { - margin-bottom: 0; - } -} - -@media (min-width: 768px) { - .navbar-form { - width: auto; - padding-top: 0; - padding-bottom: 0; - margin-right: 0; - margin-left: 0; - border: 0; - -webkit-box-shadow: none; - box-shadow: none; - } -} - -.navbar-nav > li > .dropdown-menu { - margin-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { - margin-bottom: 0; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.navbar-btn { - margin-top: 10px; - margin-bottom: 10px; -} - -.navbar-btn.btn-sm { - margin-top: 16px; - margin-bottom: 16px; -} - -.navbar-btn.btn-xs { - margin-top: 19px; - margin-bottom: 19px; -} - -.navbar-text { - margin-top: 20px; - margin-bottom: 20px; -} - -@media (min-width: 768px) { - .navbar-text { - float: left; - margin-right: 15px; - margin-left: 15px; - } -} - -@media (min-width: 768px) { - .navbar-left { - float: left !important; - } - - .navbar-right { - float: right !important; - margin-right: -15px; - } - - .navbar-right ~ .navbar-right { - margin-right: 0; - } -} - -.navbar-default { - background-color: #fff; - border-color: #e6e9ec; -} - -.navbar-default .navbar-brand { - color: #575e6b; -} - -.navbar-default .navbar-brand:hover, -.navbar-default .navbar-brand:focus { - color: #40454f; - background-color: transparent; -} - -.navbar-default .navbar-text { - color: #575e6b; -} - -.navbar-default .navbar-nav > li > a { - color: #575e6b; -} - -.navbar-default .navbar-nav > li > a:hover, -.navbar-default .navbar-nav > li > a:focus { - color: #8f97a1; - background-color: transparent; -} - -.navbar-default .navbar-nav > .active > a, -.navbar-default .navbar-nav > .active > a:hover, -.navbar-default .navbar-nav > .active > a:focus { - color: #373d49; - background-color: #eef0f2; -} - -.navbar-default .navbar-nav > .disabled > a, -.navbar-default .navbar-nav > .disabled > a:hover, -.navbar-default .navbar-nav > .disabled > a:focus { - color: #d7dce0; - background-color: transparent; -} - -.navbar-default .navbar-toggle { - border-color: #ddd; -} - -.navbar-default .navbar-toggle:hover, -.navbar-default .navbar-toggle:focus { - background-color: #ddd; -} - -.navbar-default .navbar-toggle .icon-bar { - background-color: #888; -} - -.navbar-default .navbar-collapse, -.navbar-default .navbar-form { - border-color: #e6e9ec; -} - -.navbar-default .navbar-nav > .open > a, -.navbar-default .navbar-nav > .open > a:hover, -.navbar-default .navbar-nav > .open > a:focus { - color: #373d49; - background-color: #eef0f2; -} - -@media (max-width: 767px) { - .navbar-default .navbar-nav .open .dropdown-menu > li > a { - color: #575e6b; - } - - .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, - .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { - color: #8f97a1; - background-color: transparent; - } - - .navbar-default .navbar-nav .open .dropdown-menu > .active > a, - .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, - .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { - color: #373d49; - background-color: #eef0f2; - } - - .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, - .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, - .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { - color: #d7dce0; - background-color: transparent; - } -} - -.navbar-default .navbar-link { - color: #575e6b; -} - -.navbar-default .navbar-link:hover { - color: #8f97a1; -} - -.navbar-default .btn-link { - color: #575e6b; -} - -.navbar-default .btn-link:hover, -.navbar-default .btn-link:focus { - color: #8f97a1; -} - -.navbar-default .btn-link[disabled]:hover, -fieldset[disabled] .navbar-default .btn-link:hover, -.navbar-default .btn-link[disabled]:focus, -fieldset[disabled] .navbar-default .btn-link:focus { - color: #d7dce0; -} - -.navbar-inverse { - background-color: #222; - border-color: #080808; -} - -.navbar-inverse .navbar-brand { - color: #a2a8af; -} - -.navbar-inverse .navbar-brand:hover, -.navbar-inverse .navbar-brand:focus { - color: #fff; - background-color: transparent; -} - -.navbar-inverse .navbar-text { - color: #a2a8af; -} - -.navbar-inverse .navbar-nav > li > a { - color: #a2a8af; -} - -.navbar-inverse .navbar-nav > li > a:hover, -.navbar-inverse .navbar-nav > li > a:focus { - color: #fff; - background-color: transparent; -} - -.navbar-inverse .navbar-nav > .active > a, -.navbar-inverse .navbar-nav > .active > a:hover, -.navbar-inverse .navbar-nav > .active > a:focus { - color: #fff; - background-color: #080808; -} - -.navbar-inverse .navbar-nav > .disabled > a, -.navbar-inverse .navbar-nav > .disabled > a:hover, -.navbar-inverse .navbar-nav > .disabled > a:focus { - color: #444; - background-color: transparent; -} - -.navbar-inverse .navbar-toggle { - border-color: #333; -} - -.navbar-inverse .navbar-toggle:hover, -.navbar-inverse .navbar-toggle:focus { - background-color: #333; -} - -.navbar-inverse .navbar-toggle .icon-bar { - background-color: #fff; -} - -.navbar-inverse .navbar-collapse, -.navbar-inverse .navbar-form { - border-color: #101010; -} - -.navbar-inverse .navbar-nav > .open > a, -.navbar-inverse .navbar-nav > .open > a:hover, -.navbar-inverse .navbar-nav > .open > a:focus { - color: #fff; - background-color: #080808; -} - -@media (max-width: 767px) { - .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { - border-color: #080808; - } - - .navbar-inverse .navbar-nav .open .dropdown-menu .divider { - background-color: #080808; - } - - .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { - color: #a2a8af; - } - - .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, - .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { - color: #fff; - background-color: transparent; - } - - .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, - .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, - .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { - color: #fff; - background-color: #080808; - } - - .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, - .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, - .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { - color: #444; - background-color: transparent; - } -} - -.navbar-inverse .navbar-link { - color: #a2a8af; -} - -.navbar-inverse .navbar-link:hover { - color: #fff; -} - -.navbar-inverse .btn-link { - color: #a2a8af; -} - -.navbar-inverse .btn-link:hover, -.navbar-inverse .btn-link:focus { - color: #fff; -} - -.navbar-inverse .btn-link[disabled]:hover, -fieldset[disabled] .navbar-inverse .btn-link:hover, -.navbar-inverse .btn-link[disabled]:focus, -fieldset[disabled] .navbar-inverse .btn-link:focus { - color: #444; -} - -.breadcrumb { - padding: 8px 15px; - margin-bottom: 20px; - list-style: none; - background-color: #f5f5f5; - border-radius: 4px; -} - -.breadcrumb > li { - display: inline-block; -} - -.breadcrumb > li + li:before { - padding: 0 5px; - color: #ccc; - content: "/\00a0"; -} - -.breadcrumb > .active { - color: #79818c; -} - -.pagination { - display: inline-block; - padding-left: 0; - margin: 20px 0; - border-radius: 4px; -} - -.pagination > li { - display: inline; -} - -.pagination > li > a, -.pagination > li > span { - position: relative; - float: left; - padding: 9px 18px; - margin-left: -1px; - line-height: 1.42857143; - color: #22adf6; - text-decoration: none; - background-color: #fff; - border: 1px solid #ddd; -} - -.pagination > li:first-child > a, -.pagination > li:first-child > span { - margin-left: 0; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -.pagination > li:last-child > a, -.pagination > li:last-child > span { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} - -.pagination > li > a:hover, -.pagination > li > span:hover, -.pagination > li > a:focus, -.pagination > li > span:focus { - z-index: 2; - color: #00c9ff; - background-color: #eef0f2; - border-color: #ddd; -} - -.pagination > .active > a, -.pagination > .active > span, -.pagination > .active > a:hover, -.pagination > .active > span:hover, -.pagination > .active > a:focus, -.pagination > .active > span:focus { - z-index: 3; - color: #fff; - cursor: default; - background-color: #22adf6; - border-color: #22adf6; -} - -.pagination > .disabled > span, -.pagination > .disabled > span:hover, -.pagination > .disabled > span:focus, -.pagination > .disabled > a, -.pagination > .disabled > a:hover, -.pagination > .disabled > a:focus { - color: #79818c; - cursor: not-allowed; - background-color: #fff; - border-color: #ddd; -} - -.pagination-lg > li > a, -.pagination-lg > li > span { - padding: 13px 24px; - font-size: 18px; - line-height: 1.3333333; -} - -.pagination-lg > li:first-child > a, -.pagination-lg > li:first-child > span { - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} - -.pagination-lg > li:last-child > a, -.pagination-lg > li:last-child > span { - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; -} - -.pagination-sm > li > a, -.pagination-sm > li > span { - padding: 4px 13px; - font-size: 12px; - line-height: 1.5; -} - -.pagination-sm > li:first-child > a, -.pagination-sm > li:first-child > span { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; -} - -.pagination-sm > li:last-child > a, -.pagination-sm > li:last-child > span { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -.pager { - padding-left: 0; - margin: 20px 0; - text-align: center; - list-style: none; -} - -.pager li { - display: inline; -} - -.pager li > a, -.pager li > span { - display: inline-block; - padding: 5px 14px; - background-color: #fff; - border: 1px solid #ddd; - border-radius: 15px; -} - -.pager li > a:hover, -.pager li > a:focus { - text-decoration: none; - background-color: #eef0f2; -} - -.pager .next > a, -.pager .next > span { - float: right; -} - -.pager .previous > a, -.pager .previous > span { - float: left; -} - -.pager .disabled > a, -.pager .disabled > a:hover, -.pager .disabled > a:focus, -.pager .disabled > span { - color: #79818c; - cursor: not-allowed; - background-color: #fff; -} - -.label { - display: inline; - padding: .2em .6em .3em; - font-size: 75%; - font-weight: bold; - line-height: 1; - color: #fff; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: .25em; -} - -a.label:hover, -a.label:focus { - color: #fff; - text-decoration: none; - cursor: pointer; -} - -.label:empty { - display: none; -} - -.btn .label { - position: relative; - top: -1px; -} - -.label-default { - background-color: #79818c; -} - -.label-default[href]:hover, -.label-default[href]:focus { - background-color: #616871; -} - -.label-primary { - background-color: #22adf6; -} - -.label-primary[href]:hover, -.label-primary[href]:focus { - background-color: #0993dc; -} - -.label-success { - background-color: #4ed8a0; -} - -.label-success[href]:hover, -.label-success[href]:focus { - background-color: #2cc788; -} - -.label-info { - background-color: #454c59; -} - -.label-info[href]:hover, -.label-info[href]:focus { - background-color: #2f333c; -} - -.label-warning { - background-color: #7a65f2; -} - -.label-warning[href]:hover, -.label-warning[href]:focus { - background-color: #5136ee; -} - -.label-danger { - background-color: #f95f53; -} - -.label-danger[href]:hover, -.label-danger[href]:focus { - background-color: #f73122; -} - -.badge { - display: inline-block; - min-width: 10px; - padding: 3px 7px; - font-size: 12px; - font-weight: bold; - line-height: 1; - color: #fff; - text-align: center; - white-space: nowrap; - vertical-align: middle; - background-color: #79818c; - border-radius: 10px; -} - -.badge:empty { - display: none; -} - -.btn .badge { - position: relative; - top: -1px; -} - -.btn-xs .badge, -.btn-group-xs > .btn .badge { - top: 0; - padding: 1px 5px; -} - -a.badge:hover, -a.badge:focus { - color: #fff; - text-decoration: none; - cursor: pointer; -} - -.list-group-item.active > .badge, -.nav-pills > .active > a > .badge { - color: #22adf6; - background-color: #fff; -} - -.list-group-item > .badge { - float: right; -} - -.list-group-item > .badge + .badge { - margin-right: 5px; -} - -.nav-pills > li > a > .badge { - margin-left: 3px; -} - -.jumbotron { - padding-top: 30px; - padding-bottom: 30px; - margin-bottom: 30px; -} - -.jumbotron h1, -.jumbotron .h1 { - color: inherit; -} - -.jumbotron p { - margin-bottom: 15px; - font-size: 21px; - font-weight: 200; -} - -.jumbotron > hr { - border-top-color: #e6e6e6; -} - -.container .jumbotron, -.container-fluid .jumbotron { - padding-right: 15px; - padding-left: 15px; - border-radius: 5px; -} - -.jumbotron .container { - max-width: 100%; -} - -@media screen and (min-width: 768px) { - .jumbotron { - padding-top: 48px; - padding-bottom: 48px; - } - - .container .jumbotron, - .container-fluid .jumbotron { - padding-right: 60px; - padding-left: 60px; - } - - .jumbotron h1, - .jumbotron .h1 { - font-size: 63px; - } -} - -.thumbnail { - display: block; - padding: 4px; - margin-bottom: 20px; - line-height: 1.42857143; - background-color: #fafbfc; - border: 1px solid #ddd; - border-radius: 4px; - -webkit-transition: border .2s ease-in-out; - -o-transition: border .2s ease-in-out; - transition: border .2s ease-in-out; -} - -.thumbnail > img, -.thumbnail a > img { - margin-right: auto; - margin-left: auto; -} - -a.thumbnail:hover, -a.thumbnail:focus, -a.thumbnail.active { - border-color: #22adf6; -} - -.thumbnail .caption { - padding: 9px; - color: #575e6b; -} - -.alert { - padding: 15px; - margin-bottom: 20px; - border: 1px solid transparent; - border-radius: 4px; -} - -.alert h4 { - margin-top: 0; - color: inherit; -} - -.alert .alert-link { - font-weight: bold; -} - -.alert > p, -.alert > ul { - margin-bottom: 0; -} - -.alert > p + p { - margin-top: 5px; -} - -.alert-dismissable, -.alert-dismissible { - padding-right: 35px; -} - -.alert-dismissable .close, -.alert-dismissible .close { - position: relative; - top: -2px; - right: -21px; - color: inherit; -} - -.alert-success { - color: #3c763d; - background-color: #dff0d8; - border-color: #d6e9c6; -} - -.alert-success hr { - border-top-color: #c9e2b3; -} - -.alert-success .alert-link { - color: #2b542c; -} - -.alert-info { - color: #31708f; - background-color: #d9edf7; - border-color: #bce8f1; -} - -.alert-info hr { - border-top-color: #a6e1ec; -} - -.alert-info .alert-link { - color: #245269; -} - -.alert-warning { - color: #8a6d3b; - background-color: #fcf8e3; - border-color: #faebcc; -} - -.alert-warning hr { - border-top-color: #f7e1b5; -} - -.alert-warning .alert-link { - color: #66512c; -} - -.alert-danger { - color: #a94442; - background-color: #f2dede; - border-color: #ebccd1; -} - -.alert-danger hr { - border-top-color: #e4b9c0; -} - -.alert-danger .alert-link { - color: #843534; -} - -@-webkit-keyframes progress-bar-stripes { - from { - background-position: 40px 0; - } - - to { - background-position: 0 0; - } -} - -@-o-keyframes progress-bar-stripes { - from { - background-position: 40px 0; - } - - to { - background-position: 0 0; - } -} - -@keyframes progress-bar-stripes { - from { - background-position: 40px 0; - } - - to { - background-position: 0 0; - } -} - -.progress { - height: 20px; - margin-bottom: 20px; - overflow: hidden; - background-color: #f5f5f5; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -} - -.progress-bar { - float: left; - width: 0; - height: 100%; - font-size: 12px; - line-height: 20px; - color: #fff; - text-align: center; - background-color: #22adf6; - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -webkit-transition: width .6s ease; - -o-transition: width .6s ease; - transition: width .6s ease; -} - -.progress-striped .progress-bar, -.progress-bar-striped { - background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - -webkit-background-size: 40px 40px; - background-size: 40px 40px; -} - -.progress.active .progress-bar, -.progress-bar.active { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -o-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; -} - -.progress-bar-success { - background-color: #4ed8a0; -} - -.progress-striped .progress-bar-success { - background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} - -.progress-bar-info { - background-color: #454c59; -} - -.progress-striped .progress-bar-info { - background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} - -.progress-bar-warning { - background-color: #7a65f2; -} - -.progress-striped .progress-bar-warning { - background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} - -.progress-bar-danger { - background-color: #f95f53; -} - -.progress-striped .progress-bar-danger { - background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} - -.media { - margin-top: 15px; -} - -.media:first-child { - margin-top: 0; -} - -.media, -.media-body { - overflow: hidden; - zoom: 1; -} - -.media-body { - width: 10000px; -} - -.media-object { - display: block; -} - -.media-object.img-thumbnail { - max-width: none; -} - -.media-right, -.media > .pull-right { - padding-left: 10px; -} - -.media-left, -.media > .pull-left { - padding-right: 10px; -} - -.media-left, -.media-right, -.media-body { - display: table-cell; - vertical-align: top; -} - -.media-middle { - vertical-align: middle; -} - -.media-bottom { - vertical-align: bottom; -} - -.media-heading { - margin-top: 0; - margin-bottom: 5px; -} - -.media-list { - padding-left: 0; - list-style: none; -} - -.list-group { - padding-left: 0; - margin-bottom: 20px; -} - -.list-group-item { - position: relative; - display: block; - padding: 10px 15px; - margin-bottom: -1px; - background-color: #fff; - border: 1px solid #ddd; -} - -.list-group-item:first-child { - border-top-left-radius: 4px; - border-top-right-radius: 4px; -} - -.list-group-item:last-child { - margin-bottom: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; -} - -a.list-group-item, -button.list-group-item { - color: #555; -} - -a.list-group-item .list-group-item-heading, -button.list-group-item .list-group-item-heading { - color: #333; -} - -a.list-group-item:hover, -button.list-group-item:hover, -a.list-group-item:focus, -button.list-group-item:focus { - color: #555; - text-decoration: none; - background-color: #f5f5f5; -} - -button.list-group-item { - width: 100%; - text-align: left; -} - -.list-group-item.disabled, -.list-group-item.disabled:hover, -.list-group-item.disabled:focus { - color: #79818c; - cursor: not-allowed; - background-color: #eef0f2; -} - -.list-group-item.disabled .list-group-item-heading, -.list-group-item.disabled:hover .list-group-item-heading, -.list-group-item.disabled:focus .list-group-item-heading { - color: inherit; -} - -.list-group-item.disabled .list-group-item-text, -.list-group-item.disabled:hover .list-group-item-text, -.list-group-item.disabled:focus .list-group-item-text { - color: #79818c; -} - -.list-group-item.active, -.list-group-item.active:hover, -.list-group-item.active:focus { - z-index: 2; - color: #fff; - background-color: #22adf6; - border-color: #22adf6; -} - -.list-group-item.active .list-group-item-heading, -.list-group-item.active:hover .list-group-item-heading, -.list-group-item.active:focus .list-group-item-heading, -.list-group-item.active .list-group-item-heading > small, -.list-group-item.active:hover .list-group-item-heading > small, -.list-group-item.active:focus .list-group-item-heading > small, -.list-group-item.active .list-group-item-heading > .small, -.list-group-item.active:hover .list-group-item-heading > .small, -.list-group-item.active:focus .list-group-item-heading > .small { - color: inherit; -} - -.list-group-item.active .list-group-item-text, -.list-group-item.active:hover .list-group-item-text, -.list-group-item.active:focus .list-group-item-text { - color: #e6f6fe; -} - -.list-group-item-success { - color: #3c763d; - background-color: #dff0d8; -} - -a.list-group-item-success, -button.list-group-item-success { - color: #3c763d; -} - -a.list-group-item-success .list-group-item-heading, -button.list-group-item-success .list-group-item-heading { - color: inherit; -} - -a.list-group-item-success:hover, -button.list-group-item-success:hover, -a.list-group-item-success:focus, -button.list-group-item-success:focus { - color: #3c763d; - background-color: #d0e9c6; -} - -a.list-group-item-success.active, -button.list-group-item-success.active, -a.list-group-item-success.active:hover, -button.list-group-item-success.active:hover, -a.list-group-item-success.active:focus, -button.list-group-item-success.active:focus { - color: #fff; - background-color: #3c763d; - border-color: #3c763d; -} - -.list-group-item-info { - color: #31708f; - background-color: #d9edf7; -} - -a.list-group-item-info, -button.list-group-item-info { - color: #31708f; -} - -a.list-group-item-info .list-group-item-heading, -button.list-group-item-info .list-group-item-heading { - color: inherit; -} - -a.list-group-item-info:hover, -button.list-group-item-info:hover, -a.list-group-item-info:focus, -button.list-group-item-info:focus { - color: #31708f; - background-color: #c4e3f3; -} - -a.list-group-item-info.active, -button.list-group-item-info.active, -a.list-group-item-info.active:hover, -button.list-group-item-info.active:hover, -a.list-group-item-info.active:focus, -button.list-group-item-info.active:focus { - color: #fff; - background-color: #31708f; - border-color: #31708f; -} - -.list-group-item-warning { - color: #8a6d3b; - background-color: #fcf8e3; -} - -a.list-group-item-warning, -button.list-group-item-warning { - color: #8a6d3b; -} - -a.list-group-item-warning .list-group-item-heading, -button.list-group-item-warning .list-group-item-heading { - color: inherit; -} - -a.list-group-item-warning:hover, -button.list-group-item-warning:hover, -a.list-group-item-warning:focus, -button.list-group-item-warning:focus { - color: #8a6d3b; - background-color: #faf2cc; -} - -a.list-group-item-warning.active, -button.list-group-item-warning.active, -a.list-group-item-warning.active:hover, -button.list-group-item-warning.active:hover, -a.list-group-item-warning.active:focus, -button.list-group-item-warning.active:focus { - color: #fff; - background-color: #8a6d3b; - border-color: #8a6d3b; -} - -.list-group-item-danger { - color: #a94442; - background-color: #f2dede; -} - -a.list-group-item-danger, -button.list-group-item-danger { - color: #a94442; -} - -a.list-group-item-danger .list-group-item-heading, -button.list-group-item-danger .list-group-item-heading { - color: inherit; -} - -a.list-group-item-danger:hover, -button.list-group-item-danger:hover, -a.list-group-item-danger:focus, -button.list-group-item-danger:focus { - color: #a94442; - background-color: #ebcccc; -} - -a.list-group-item-danger.active, -button.list-group-item-danger.active, -a.list-group-item-danger.active:hover, -button.list-group-item-danger.active:hover, -a.list-group-item-danger.active:focus, -button.list-group-item-danger.active:focus { - color: #fff; - background-color: #a94442; - border-color: #a94442; -} - -.list-group-item-heading { - margin-top: 0; - margin-bottom: 5px; -} - -.list-group-item-text { - margin-bottom: 0; - line-height: 1.3; -} - -.panel { - margin-bottom: 20px; - background-color: #fff; - border: 1px solid transparent; - border-radius: 4px; -} - -.panel-body { - padding: 15px; -} - -.panel-heading { - padding: 10px 15px; - border-bottom: 1px solid transparent; - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.panel-heading > .dropdown .dropdown-toggle { - color: inherit; -} - -.panel-title { - margin-top: 0; - margin-bottom: 0; - font-size: 16px; - color: inherit; -} - -.panel-title > a, -.panel-title > small, -.panel-title > .small, -.panel-title > small > a, -.panel-title > .small > a { - color: inherit; -} - -.panel-footer { - padding: 10px 15px; - background-color: #f5f5f5; - border-top: 1px solid #ddd; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; -} - -.panel > .list-group, -.panel > .panel-collapse > .list-group { - margin-bottom: 0; -} - -.panel > .list-group .list-group-item, -.panel > .panel-collapse > .list-group .list-group-item { - border-width: 1px 0; - border-radius: 0; -} - -.panel > .list-group:first-child .list-group-item:first-child, -.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child { - border-top: 0; - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.panel > .list-group:last-child .list-group-item:last-child, -.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child { - border-bottom: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; -} - -.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.panel-heading + .list-group .list-group-item:first-child { - border-top-width: 0; -} - -.list-group + .panel-footer { - border-top-width: 0; -} - -.panel > .table, -.panel > .table-responsive > .table, -.panel > .panel-collapse > .table { - margin-bottom: 0; -} - -.panel > .table caption, -.panel > .table-responsive > .table caption, -.panel > .panel-collapse > .table caption { - padding-right: 15px; - padding-left: 15px; -} - -.panel > .table:first-child, -.panel > .table-responsive:first-child > .table:first-child { - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.panel > .table:first-child > thead:first-child > tr:first-child, -.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child, -.panel > .table:first-child > tbody:first-child > tr:first-child, -.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child { - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, -.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, -.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, -.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, -.panel > .table:first-child > thead:first-child > tr:first-child th:first-child, -.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, -.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, -.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { - border-top-left-radius: 3px; -} - -.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, -.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, -.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, -.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, -.panel > .table:first-child > thead:first-child > tr:first-child th:last-child, -.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, -.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, -.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { - border-top-right-radius: 3px; -} - -.panel > .table:last-child, -.panel > .table-responsive:last-child > .table:last-child { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; -} - -.panel > .table:last-child > tbody:last-child > tr:last-child, -.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child, -.panel > .table:last-child > tfoot:last-child > tr:last-child, -.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; -} - -.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, -.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, -.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, -.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, -.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, -.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, -.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, -.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { - border-bottom-left-radius: 3px; -} - -.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, -.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, -.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, -.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, -.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, -.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, -.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, -.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { - border-bottom-right-radius: 3px; -} - -.panel > .panel-body + .table, -.panel > .panel-body + .table-responsive, -.panel > .table + .panel-body, -.panel > .table-responsive + .panel-body { - border-top: 1px solid #eef0f2; -} - -.panel > .table > tbody:first-child > tr:first-child th, -.panel > .table > tbody:first-child > tr:first-child td { - border-top: 0; -} - -.panel > .table-bordered, -.panel > .table-responsive > .table-bordered { - border: 0; -} - -.panel > .table-bordered > thead > tr > th:first-child, -.panel > .table-responsive > .table-bordered > thead > tr > th:first-child, -.panel > .table-bordered > tbody > tr > th:first-child, -.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, -.panel > .table-bordered > tfoot > tr > th:first-child, -.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, -.panel > .table-bordered > thead > tr > td:first-child, -.panel > .table-responsive > .table-bordered > thead > tr > td:first-child, -.panel > .table-bordered > tbody > tr > td:first-child, -.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, -.panel > .table-bordered > tfoot > tr > td:first-child, -.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child { - border-left: 0; -} - -.panel > .table-bordered > thead > tr > th:last-child, -.panel > .table-responsive > .table-bordered > thead > tr > th:last-child, -.panel > .table-bordered > tbody > tr > th:last-child, -.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, -.panel > .table-bordered > tfoot > tr > th:last-child, -.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, -.panel > .table-bordered > thead > tr > td:last-child, -.panel > .table-responsive > .table-bordered > thead > tr > td:last-child, -.panel > .table-bordered > tbody > tr > td:last-child, -.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, -.panel > .table-bordered > tfoot > tr > td:last-child, -.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child { - border-right: 0; -} - -.panel > .table-bordered > thead > tr:first-child > td, -.panel > .table-responsive > .table-bordered > thead > tr:first-child > td, -.panel > .table-bordered > tbody > tr:first-child > td, -.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, -.panel > .table-bordered > thead > tr:first-child > th, -.panel > .table-responsive > .table-bordered > thead > tr:first-child > th, -.panel > .table-bordered > tbody > tr:first-child > th, -.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { - border-bottom: 0; -} - -.panel > .table-bordered > tbody > tr:last-child > td, -.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, -.panel > .table-bordered > tfoot > tr:last-child > td, -.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, -.panel > .table-bordered > tbody > tr:last-child > th, -.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, -.panel > .table-bordered > tfoot > tr:last-child > th, -.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { - border-bottom: 0; -} - -.panel > .table-responsive { - margin-bottom: 0; - border: 0; -} - -.panel-group { - margin-bottom: 20px; -} - -.panel-group .panel { - margin-bottom: 0; - border-radius: 4px; -} - -.panel-group .panel + .panel { - margin-top: 5px; -} - -.panel-group .panel-heading { - border-bottom: 0; -} - -.panel-group .panel-heading + .panel-collapse > .panel-body, -.panel-group .panel-heading + .panel-collapse > .list-group { - border-top: 1px solid #ddd; -} - -.panel-group .panel-footer { - border-top: 0; -} - -.panel-group .panel-footer + .panel-collapse .panel-body { - border-bottom: 1px solid #ddd; -} - -.embed-responsive { - position: relative; - display: block; - height: 0; - padding: 0; - overflow: hidden; -} - -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; -} - -.embed-responsive-16by9 { - padding-bottom: 56.25%; -} - -.embed-responsive-4by3 { - padding-bottom: 75%; -} - -.well { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #e3e3e3; - border-radius: 4px; -} - -.well blockquote { - border-color: #ddd; - border-color: rgba(0, 0, 0, 0.15); -} - -.well-lg { - padding: 24px; - border-radius: 5px; -} - -.well-sm { - padding: 9px; - border-radius: 3px; -} - -.close { - float: right; - font-size: 21px; - font-weight: bold; - line-height: 1; - color: #000; - text-shadow: 0 1px 0 #fff; - filter: alpha(opacity = 20); - opacity: .2; -} - -.close:hover, -.close:focus { - color: #000; - text-decoration: none; - cursor: pointer; - filter: alpha(opacity = 50); - opacity: .5; -} - -button.close { - -webkit-appearance: none; - padding: 0; - cursor: pointer; - background: transparent; - border: 0; -} - -.modal-open { - overflow: hidden; -} - -.modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1050; - display: none; - overflow: hidden; - -webkit-overflow-scrolling: touch; - outline: 0; -} - -.modal.fade .modal-dialog { - -webkit-transition: -webkit-transform .3s ease-out; - -o-transition: -o-transform .3s ease-out; - transition: transform .3s ease-out; - -webkit-transform: translate(0, -25%); - -ms-transform: translate(0, -25%); - -o-transform: translate(0, -25%); - transform: translate(0, -25%); -} - -.modal.in .modal-dialog { - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - -o-transform: translate(0, 0); - transform: translate(0, 0); -} - -.modal-open .modal { - overflow-x: hidden; - overflow-y: auto; -} - -.modal-dialog { - position: relative; - width: auto; - margin: 10px; -} - -.modal-content { - position: relative; - background-color: #fff; - -webkit-background-clip: padding-box; - background-clip: padding-box; - border: 1px solid #999; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 5px; - outline: 0; - -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); - box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); -} - -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1040; - background-color: #000; -} - -.modal-backdrop.fade { - filter: alpha(opacity = 0); - opacity: 0; -} - -.modal-backdrop.in { - filter: alpha(opacity = 50); - opacity: .5; -} - -.modal-header { - padding: 15px; - border-bottom: 1px solid #e5e5e5; -} - -.modal-header .close { - margin-top: -2px; -} - -.modal-title { - margin: 0; - line-height: 1.42857143; -} - -.modal-body { - position: relative; - padding: 15px; -} - -.modal-footer { - padding: 15px; - text-align: right; - border-top: 1px solid #e5e5e5; -} - -.modal-footer .btn + .btn { - margin-bottom: 0; - margin-left: 5px; -} - -.modal-footer .btn-group .btn + .btn { - margin-left: -1px; -} - -.modal-footer .btn-block + .btn-block { - margin-left: 0; -} - -.modal-scrollbar-measure { - position: absolute; - top: -9999px; - width: 50px; - height: 50px; - overflow: scroll; -} - -@media (min-width: 768px) { - .modal-dialog { - width: 600px; - margin: 30px auto; - } - - .modal-content { - -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); - } - - .modal-sm { - width: 300px; - } -} - -@media (min-width: 992px) { - .modal-lg { - width: 900px; - } -} - -.tooltip { - position: absolute; - z-index: 1070; - display: block; - font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif; - font-size: 12px; - font-style: normal; - font-weight: normal; - line-height: 1.42857143; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-break: normal; - word-spacing: normal; - word-wrap: normal; - white-space: normal; - filter: alpha(opacity = 0); - opacity: 0; - line-break: auto; -} - -.tooltip.in { - filter: alpha(opacity = 90); - opacity: .9; -} - -.tooltip.top { - padding: 5px 0; - margin-top: -3px; -} - -.tooltip.right { - padding: 0 5px; - margin-left: 3px; -} - -.tooltip.bottom { - padding: 5px 0; - margin-top: 3px; -} - -.tooltip.left { - padding: 0 5px; - margin-left: -3px; -} - -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #fff; - text-align: center; - background-color: #000; - border-radius: 4px; -} - -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000; -} - -.tooltip.top-left .tooltip-arrow { - right: 5px; - bottom: 0; - margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000; -} - -.tooltip.top-right .tooltip-arrow { - bottom: 0; - left: 5px; - margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000; -} - -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000; -} - -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000; -} - -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000; -} - -.tooltip.bottom-left .tooltip-arrow { - top: 0; - right: 5px; - margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000; -} - -.tooltip.bottom-right .tooltip-arrow { - top: 0; - left: 5px; - margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000; -} - -.popover { - position: absolute; - top: 0; - left: 0; - z-index: 1060; - display: none; - max-width: 276px; - padding: 1px; - font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif; - font-size: 14px; - font-style: normal; - font-weight: normal; - line-height: 1.42857143; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-break: normal; - word-spacing: normal; - word-wrap: normal; - white-space: normal; - background-color: #fff; - -webkit-background-clip: padding-box; - background-clip: padding-box; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 5px; - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - line-break: auto; -} - -.popover.top { - margin-top: -10px; -} - -.popover.right { - margin-left: 10px; -} - -.popover.bottom { - margin-top: 10px; -} - -.popover.left { - margin-left: -10px; -} - -.popover-title { - padding: 8px 14px; - margin: 0; - font-size: 14px; - background-color: #f7f7f7; - border-bottom: 1px solid #ebebeb; - border-radius: 4px 4px 0 0; -} - -.popover-content { - padding: 9px 14px; -} - -.popover > .arrow, -.popover > .arrow:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.popover > .arrow { - border-width: 11px; -} - -.popover > .arrow:after { - content: ""; - border-width: 10px; -} - -.popover.top > .arrow { - bottom: -11px; - left: 50%; - margin-left: -11px; - border-top-color: #999; - border-top-color: rgba(0, 0, 0, 0.25); - border-bottom-width: 0; -} - -.popover.top > .arrow:after { - bottom: 1px; - margin-left: -10px; - content: " "; - border-top-color: #fff; - border-bottom-width: 0; -} - -.popover.right > .arrow { - top: 50%; - left: -11px; - margin-top: -11px; - border-right-color: #999; - border-right-color: rgba(0, 0, 0, 0.25); - border-left-width: 0; -} - -.popover.right > .arrow:after { - bottom: -10px; - left: 1px; - content: " "; - border-right-color: #fff; - border-left-width: 0; -} - -.popover.bottom > .arrow { - top: -11px; - left: 50%; - margin-left: -11px; - border-top-width: 0; - border-bottom-color: #999; - border-bottom-color: rgba(0, 0, 0, 0.25); -} - -.popover.bottom > .arrow:after { - top: 1px; - margin-left: -10px; - content: " "; - border-top-width: 0; - border-bottom-color: #fff; -} - -.popover.left > .arrow { - top: 50%; - right: -11px; - margin-top: -11px; - border-right-width: 0; - border-left-color: #999; - border-left-color: rgba(0, 0, 0, 0.25); -} - -.popover.left > .arrow:after { - right: 1px; - bottom: -10px; - content: " "; - border-right-width: 0; - border-left-color: #fff; -} - -.carousel { - position: relative; -} - -.carousel-inner { - position: relative; - width: 100%; - overflow: hidden; -} - -.carousel-inner > .item { - position: relative; - display: none; - -webkit-transition: .6s ease-in-out left; - -o-transition: .6s ease-in-out left; - transition: .6s ease-in-out left; -} - -.carousel-inner > .item > img, -.carousel-inner > .item > a > img { - line-height: 1; -} - -@media all and (transform-3d), (-webkit-transform-3d) { - .carousel-inner > .item { - -webkit-transition: -webkit-transform .6s ease-in-out; - -o-transition: -o-transform .6s ease-in-out; - transition: transform .6s ease-in-out; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-perspective: 1000px; - perspective: 1000px; - } - - .carousel-inner > .item.next, - .carousel-inner > .item.active.right { - left: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - - .carousel-inner > .item.prev, - .carousel-inner > .item.active.left { - left: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - - .carousel-inner > .item.next.left, - .carousel-inner > .item.prev.right, - .carousel-inner > .item.active { - left: 0; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.carousel-inner > .active, -.carousel-inner > .next, -.carousel-inner > .prev { - display: block; -} - -.carousel-inner > .active { - left: 0; -} - -.carousel-inner > .next, -.carousel-inner > .prev { - position: absolute; - top: 0; - width: 100%; -} - -.carousel-inner > .next { - left: 100%; -} - -.carousel-inner > .prev { - left: -100%; -} - -.carousel-inner > .next.left, -.carousel-inner > .prev.right { - left: 0; -} - -.carousel-inner > .active.left { - left: -100%; -} - -.carousel-inner > .active.right { - left: 100%; -} - -.carousel-control { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 15%; - font-size: 20px; - color: #fff; - text-align: center; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); - background-color: rgba(0, 0, 0, 0); - filter: alpha(opacity = 50); - opacity: .5; -} - -.carousel-control.left { - background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); - background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); - background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); - background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); - background-repeat: repeat-x; -} - -.carousel-control.right { - right: 0; - left: auto; - background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); - background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); - background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); - background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); - background-repeat: repeat-x; -} - -.carousel-control:hover, -.carousel-control:focus { - color: #fff; - text-decoration: none; - filter: alpha(opacity = 90); - outline: 0; - opacity: .9; -} - -.carousel-control .icon-prev, -.carousel-control .icon-next, -.carousel-control .glyphicon-chevron-left, -.carousel-control .glyphicon-chevron-right { - position: absolute; - top: 50%; - z-index: 5; - display: inline-block; - margin-top: -10px; -} - -.carousel-control .icon-prev, -.carousel-control .glyphicon-chevron-left { - left: 50%; - margin-left: -10px; -} - -.carousel-control .icon-next, -.carousel-control .glyphicon-chevron-right { - right: 50%; - margin-right: -10px; -} - -.carousel-control .icon-prev, -.carousel-control .icon-next { - width: 20px; - height: 20px; - font-family: serif; - line-height: 1; -} - -.carousel-control .icon-prev:before { - content: '\2039'; -} - -.carousel-control .icon-next:before { - content: '\203a'; -} - -.carousel-indicators { - position: absolute; - bottom: 10px; - left: 50%; - z-index: 15; - width: 60%; - padding-left: 0; - margin-left: -30%; - text-align: center; - list-style: none; -} - -.carousel-indicators li { - display: inline-block; - width: 10px; - height: 10px; - margin: 1px; - text-indent: -999px; - cursor: pointer; - background-color: #000 \9; - background-color: rgba(0, 0, 0, 0); - border: 1px solid #fff; - border-radius: 10px; -} - -.carousel-indicators .active { - width: 12px; - height: 12px; - margin: 0; - background-color: #fff; -} - -.carousel-caption { - position: absolute; - right: 15%; - bottom: 20px; - left: 15%; - z-index: 10; - padding-top: 20px; - padding-bottom: 20px; - color: #fff; - text-align: center; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); -} - -.carousel-caption .btn { - text-shadow: none; -} - -@media screen and (min-width: 768px) { - // .carousel-control .glyphicon-chevron-left, - // .carousel-control .glyphicon-chevron-right, - .carousel-control .icon-prev, - .carousel-control .icon-next { - width: 30px; - height: 30px; - margin-top: -10px; - font-size: 30px; - } - - // .carousel-control .glyphicon-chevron-left, - .carousel-control .icon-prev { - margin-left: -10px; - } - - // .carousel-control .glyphicon-chevron-right, - .carousel-control .icon-next { - margin-right: -10px; - } - - .carousel-caption { - right: 20%; - left: 20%; - padding-bottom: 30px; - } - - .carousel-indicators { - bottom: 20px; - } -} - -.clearfix:before, -.clearfix:after, -.dl-horizontal dd:before, -.dl-horizontal dd:after, -.container:before, -.container:after, -.container-fluid:before, -.container-fluid:after, -.row:before, -.row:after, -.form-horizontal .form-group:before, -.form-horizontal .form-group:after, -.btn-toolbar:before, -.btn-toolbar:after, -.btn-group-vertical > .btn-group:before, -.btn-group-vertical > .btn-group:after, -.nav:before, -.nav:after, -.navbar:before, -.navbar:after, -.navbar-header:before, -.navbar-header:after, -.navbar-collapse:before, -.navbar-collapse:after, -.pager:before, -.pager:after, -.panel-body:before, -.panel-body:after, -.modal-header:before, -.modal-header:after, -.modal-footer:before, -.modal-footer:after { - display: table; - content: " "; -} - -.clearfix:after, -.dl-horizontal dd:after, -.container:after, -.container-fluid:after, -.row:after, -.form-horizontal .form-group:after, -.btn-toolbar:after, -.btn-group-vertical > .btn-group:after, -.nav:after, -.navbar:after, -.navbar-header:after, -.navbar-collapse:after, -.pager:after, -.panel-body:after, -.modal-header:after, -.modal-footer:after { - clear: both; -} - -.center-block { - display: block; - margin-right: auto; - margin-left: auto; -} - -.pull-right { - float: right !important; -} - -.pull-left { - float: left !important; -} - -.hide { - display: none !important; -} - -.show { - display: block !important; -} - -.invisible { - visibility: hidden; -} - -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - -.hidden { - display: none !important; -} - -.affix { - position: fixed; -} - -@-ms-viewport { - width: device-width; -} - -.visible-xs, -.visible-sm, -.visible-md, -.visible-lg { - display: none !important; -} - -.visible-xs-block, -.visible-xs-inline, -.visible-xs-inline-block, -.visible-sm-block, -.visible-sm-inline, -.visible-sm-inline-block, -.visible-md-block, -.visible-md-inline, -.visible-md-inline-block, -.visible-lg-block, -.visible-lg-inline, -.visible-lg-inline-block { - display: none !important; -} - -@media (max-width: 767px) { - .visible-xs { - display: block !important; - } - - table.visible-xs { - display: table !important; - } - - tr.visible-xs { - display: table-row !important; - } - - th.visible-xs, - td.visible-xs { - display: table-cell !important; - } -} - -@media (max-width: 767px) { - .visible-xs-block { - display: block !important; - } -} - -@media (max-width: 767px) { - .visible-xs-inline { - display: inline !important; - } -} - -@media (max-width: 767px) { - .visible-xs-inline-block { - display: inline-block !important; - } -} - -@media (min-width: 768px) and (max-width: 991px) { - .visible-sm { - display: block !important; - } - - table.visible-sm { - display: table !important; - } - - tr.visible-sm { - display: table-row !important; - } - - th.visible-sm, - td.visible-sm { - display: table-cell !important; - } -} - -@media (min-width: 768px) and (max-width: 991px) { - .visible-sm-block { - display: block !important; - } -} - -@media (min-width: 768px) and (max-width: 991px) { - .visible-sm-inline { - display: inline !important; - } -} - -@media (min-width: 768px) and (max-width: 991px) { - .visible-sm-inline-block { - display: inline-block !important; - } -} - -@media (min-width: 992px) and (max-width: 1199px) { - .visible-md { - display: block !important; - } - - table.visible-md { - display: table !important; - } - - tr.visible-md { - display: table-row !important; - } - - th.visible-md, - td.visible-md { - display: table-cell !important; - } -} - -@media (min-width: 992px) and (max-width: 1199px) { - .visible-md-block { - display: block !important; - } -} - -@media (min-width: 992px) and (max-width: 1199px) { - .visible-md-inline { - display: inline !important; - } -} - -@media (min-width: 992px) and (max-width: 1199px) { - .visible-md-inline-block { - display: inline-block !important; - } -} - -@media (min-width: 1200px) { - .visible-lg { - display: block !important; - } - - table.visible-lg { - display: table !important; - } - - tr.visible-lg { - display: table-row !important; - } - - th.visible-lg, - td.visible-lg { - display: table-cell !important; - } -} - -@media (min-width: 1200px) { - .visible-lg-block { - display: block !important; - } -} - -@media (min-width: 1200px) { - .visible-lg-inline { - display: inline !important; - } -} - -@media (min-width: 1200px) { - .visible-lg-inline-block { - display: inline-block !important; - } -} - -@media (max-width: 767px) { - .hidden-xs { - display: none !important; - } -} - -@media (min-width: 768px) and (max-width: 991px) { - .hidden-sm { - display: none !important; - } -} - -@media (min-width: 992px) and (max-width: 1199px) { - .hidden-md { - display: none !important; - } -} - -@media (min-width: 1200px) { - .hidden-lg { - display: none !important; - } -} - -.visible-print { - display: none !important; -} - -@media print { - .visible-print { - display: block !important; - } - - table.visible-print { - display: table !important; - } - - tr.visible-print { - display: table-row !important; - } - - th.visible-print, - td.visible-print { - display: table-cell !important; - } -} - -.visible-print-block { - display: none !important; -} - -@media print { - .visible-print-block { - display: block !important; - } -} - -.visible-print-inline { - display: none !important; -} - -@media print { - .visible-print-inline { - display: inline !important; - } -} - -.visible-print-inline-block { - display: none !important; -} - -@media print { - .visible-print-inline-block { - display: inline-block !important; - } -} - -@media print { - .hidden-print { - display: none !important; - } -} - -/*# sourceMappingURL=bootstrap.css.map */ From a8b0bd7730da6736e571b5cc8bf7e51ae72b0609 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 13:06:45 -0800 Subject: [PATCH 004/431] Improve reset stylesheet --- ui/src/style/theme/reset.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/src/style/theme/reset.scss b/ui/src/style/theme/reset.scss index fe1b0316c..f7905fe3c 100644 --- a/ui/src/style/theme/reset.scss +++ b/ui/src/style/theme/reset.scss @@ -1,6 +1,12 @@ /* Setting lowermost styles here */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + html, body { background-color: $g0-obsidian; } @@ -24,4 +30,4 @@ body { margin-top: 60px; } } -} \ No newline at end of file +} From 6f1aa4d7d7e065453495b6fe608cf74feef3b717 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Tue, 27 Feb 2018 14:21:46 -0800 Subject: [PATCH 005/431] Add react-virtualized to dependencies --- ui/package.json | 1 + ui/yarn.lock | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/ui/package.json b/ui/package.json index 778647e70..f8c46d609 100644 --- a/ui/package.json +++ b/ui/package.json @@ -126,6 +126,7 @@ "react-router-redux": "^4.0.8", "react-sparklines": "^1.4.2", "react-tooltip": "^3.2.1", + "react-virtualized": "^9.18.5", "redux": "^3.3.1", "redux-auth-wrapper": "^1.0.0", "redux-thunk": "^1.0.3", diff --git a/ui/yarn.lock b/ui/yarn.lock index 942a897e3..9dc1f6cd3 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1017,6 +1017,13 @@ babel-runtime@^6.18.0, babel-runtime@^6.22.0: core-js "^2.4.0" regenerator-runtime "^0.10.0" +babel-runtime@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.11.0" + babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.3.0, babel-template@^6.8.0: version "6.16.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca" @@ -2102,6 +2109,10 @@ dom-css@^2.0.0: prefix-style "2.0.1" to-camel-case "1.0.0" +"dom-helpers@^2.4.0 || ^3.0.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" + dom-serialize@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b" @@ -2715,6 +2726,18 @@ fbjs@^0.8.1, fbjs@^0.8.4: setimmediate "^1.0.5" ua-parser-js "^0.7.9" +fbjs@^0.8.16: + version "0.8.16" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.9" + fbjs@^0.8.9: version "0.8.12" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" @@ -4156,7 +4179,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.3.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -5384,6 +5407,14 @@ prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8: fbjs "^0.8.9" loose-envify "^1.3.1" +prop-types@^15.6.0: + version "15.6.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.3.1" + object-assign "^4.1.1" + proxy-addr@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37" @@ -5596,6 +5627,16 @@ react-tooltip@^3.2.1: dependencies: classnames "^2.2.0" +react-virtualized@^9.18.5: + version "9.18.5" + resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.18.5.tgz#42dd390ebaa7ea809bfcaf775d39872641679b89" + dependencies: + babel-runtime "^6.26.0" + classnames "^2.2.3" + dom-helpers "^2.4.0 || ^3.0.0" + loose-envify "^1.3.0" + prop-types "^15.6.0" + react@^15.0.2: version "15.4.1" resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6" @@ -5750,6 +5791,10 @@ regenerator-runtime@^0.10.0: version "0.10.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb" +regenerator-runtime@^0.11.0: + version "0.11.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" + regenerator-transform@0.9.8: version "0.9.8" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c" From 2d4e02a1c449519790f2357d10a0868475fd2263 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 27 Feb 2018 16:12:33 -0800 Subject: [PATCH 006/431] add visualization option for table --- ui/src/dashboards/graphics/graph.js | 38 +++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/ui/src/dashboards/graphics/graph.js b/ui/src/dashboards/graphics/graph.js index 6fb9a6cc1..2ce7ade6f 100644 --- a/ui/src/dashboards/graphics/graph.js +++ b/ui/src/dashboards/graphics/graph.js @@ -459,4 +459,42 @@ export const GRAPH_TYPES = [
), }, + { + type: 'table', + menuOption: 'Table', + graphic: ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ), + }, ] From 11e1f27f9abae0ddfdd26d0371263c554159cbde Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 27 Feb 2018 16:13:00 -0800 Subject: [PATCH 007/431] mend --- ui/src/dashboards/components/DisplayOptions.js | 3 +++ ui/src/shared/components/RefreshingGraph.js | 15 +++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/ui/src/dashboards/components/DisplayOptions.js b/ui/src/dashboards/components/DisplayOptions.js index adf54b1f0..acdd03983 100644 --- a/ui/src/dashboards/components/DisplayOptions.js +++ b/ui/src/dashboards/components/DisplayOptions.js @@ -5,6 +5,7 @@ import GraphTypeSelector from 'src/dashboards/components/GraphTypeSelector' import GaugeOptions from 'src/dashboards/components/GaugeOptions' import SingleStatOptions from 'src/dashboards/components/SingleStatOptions' import AxesOptions from 'src/dashboards/components/AxesOptions' +import TableOptions from 'src/dashboards/components/TableOptions' import {buildDefaultYLabel} from 'shared/presenters' @@ -41,6 +42,8 @@ class DisplayOptions extends Component { return case 'single-stat': return + case 'table': + return default: return ( + ) + } + const displayOptions = { stepPlot: type === 'line-stepplot', stackedGraph: type === 'line-stacked', From b2819b6197978259b95047d23ef6f9aa359041fb Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 27 Feb 2018 16:21:44 -0800 Subject: [PATCH 008/431] WIP add TableOptions for cell editor overlay options --- ui/src/dashboards/components/TableOptions.js | 314 +++++++++++++++++++ 1 file changed, 314 insertions(+) create mode 100644 ui/src/dashboards/components/TableOptions.js diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js new file mode 100644 index 000000000..0a3fcc25d --- /dev/null +++ b/ui/src/dashboards/components/TableOptions.js @@ -0,0 +1,314 @@ +import React, {Component, PropTypes} from 'react' +import {connect} from 'react-redux' +import {bindActionCreators} from 'redux' + +import _ from 'lodash' +import uuid from 'node-uuid' + +import FancyScrollbar from 'shared/components/FancyScrollbar' +import Threshold from 'src/dashboards/components/Threshold' +import ColorDropdown from 'shared/components/ColorDropdown' +import Dropdown from 'shared/components/Dropdown' + +import { + GAUGE_COLORS, + DEFAULT_VALUE_MIN, + DEFAULT_VALUE_MAX, + MAX_THRESHOLDS, + SINGLE_STAT_BASE, + SINGLE_STAT_TEXT, + SINGLE_STAT_BG, +} from 'src/dashboards/constants/gaugeColors' + +import { + updateSingleStatType, + updateSingleStatColors, + updateAxes, +} from 'src/dashboards/actions/cellEditorOverlay' + +const formatColor = color => { + const {hex, name} = color + return {hex, name} +} + +class TableOptions extends Component { + handleToggleSingleStatType = newType => () => { + const {handleUpdateSingleStatType} = this.props + + handleUpdateSingleStatType(newType) + } + + handleAddThreshold = () => { + const { + singleStatColors, + singleStatType, + handleUpdateSingleStatColors, + } = this.props + + const randomColor = _.random(0, GAUGE_COLORS.length - 1) + + const maxValue = DEFAULT_VALUE_MIN + const minValue = DEFAULT_VALUE_MAX + + let randomValue = _.round(_.random(minValue, maxValue, true), 2) + + if (singleStatColors.length > 0) { + const colorsValues = _.mapValues(singleStatColors, 'value') + do { + randomValue = _.round(_.random(minValue, maxValue, true), 2) + } while (_.includes(colorsValues, randomValue)) + } + + const newThreshold = { + type: singleStatType, + id: uuid.v4(), + value: randomValue, + hex: GAUGE_COLORS[randomColor].hex, + name: GAUGE_COLORS[randomColor].name, + } + + handleUpdateSingleStatColors([...singleStatColors, newThreshold]) + } + + handleDeleteThreshold = threshold => () => { + const {handleUpdateSingleStatColors} = this.props + + const singleStatColors = this.props.singleStatColors.filter( + color => color.id !== threshold.id + ) + + handleUpdateSingleStatColors(singleStatColors) + } + + handleChooseColor = threshold => chosenColor => { + const {handleUpdateSingleStatColors} = this.props + + const singleStatColors = this.props.singleStatColors.map( + color => + color.id === threshold.id + ? {...color, hex: chosenColor.hex, name: chosenColor.name} + : color + ) + + handleUpdateSingleStatColors(singleStatColors) + } + + handleUpdateColorValue = (threshold, value) => { + const {handleUpdateSingleStatColors} = this.props + + const singleStatColors = this.props.singleStatColors.map( + color => (color.id === threshold.id ? {...color, value} : color) + ) + + handleUpdateSingleStatColors(singleStatColors) + } + + handleValidateColorValue = (threshold, targetValue) => { + const {singleStatColors} = this.props + const sortedColors = _.sortBy(singleStatColors, color => color.value) + + return !sortedColors.some(color => color.value === targetValue) + } + + handleUpdatePrefix = e => { + const {handleUpdateAxes, axes} = this.props + const newAxes = {...axes, y: {...axes.y, prefix: e.target.value}} + + handleUpdateAxes(newAxes) + } + + handleUpdateSuffix = e => { + const {handleUpdateAxes, axes} = this.props + const newAxes = {...axes, y: {...axes.y, suffix: e.target.value}} + + handleUpdateAxes(newAxes) + } + + render() { + const { + singleStatColors, + singleStatType, + // axes: {y: {prefix, suffix}}, + } = this.props + + const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS + + const sortedColors = _.sortBy(singleStatColors, color => color.value) + + return ( + +
+
Table Controls
+
+ + +
+ +
    +
  • + Vertical +
    • +
  • + Horizontal +
    • +
+ + +
    +
  • + Truncate +
    • +
  • + Wrap +
    • +
  • + Single Line +
    • +
+
+ + + + + + {sortedColors.map( + color => + color.id === SINGLE_STAT_BASE + ?
+
Base Color
+ +
+ : + )} + +
+ +
    +
  • + Background +
    • +
  • + Text +
    • +
+
+
+
+ + ) + } +} + +const {arrayOf, func, number, shape, string} = PropTypes + +TableOptions.defaultProps = { + colors: [], +} + +TableOptions.propTypes = { + singleStatType: string.isRequired, + singleStatColors: arrayOf( + shape({ + type: string.isRequired, + hex: string.isRequired, + id: string.isRequired, + name: string.isRequired, + value: number.isRequired, + }).isRequired + ), + handleUpdateSingleStatType: func.isRequired, + handleUpdateSingleStatColors: func.isRequired, + handleUpdateAxes: func.isRequired, + axes: shape({}).isRequired, +} + +const mapStateToProps = ({ + cellEditorOverlay: {singleStatType, singleStatColors, cell: {axes}}, +}) => ({ + singleStatType, + singleStatColors, + axes, +}) + +const mapDispatchToProps = dispatch => ({ + handleUpdateSingleStatType: bindActionCreators( + updateSingleStatType, + dispatch + ), + handleUpdateSingleStatColors: bindActionCreators( + updateSingleStatColors, + dispatch + ), + handleUpdateAxes: bindActionCreators(updateAxes, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(TableOptions) From c3410ea5857d2cbdbe483bf983db412cdd608019 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Tue, 27 Feb 2018 16:50:16 -0800 Subject: [PATCH 009/431] Pass dygraphSeries as prop to static-legend to improve update responsiveness while dediting queries --- ui/src/shared/components/Dygraph.js | 1 + ui/src/shared/components/StaticLegend.js | 11 ++++------- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/ui/src/shared/components/Dygraph.js b/ui/src/shared/components/Dygraph.js index f30d88826..74cf594f2 100644 --- a/ui/src/shared/components/Dygraph.js +++ b/ui/src/shared/components/Dygraph.js @@ -339,6 +339,7 @@ class Dygraph extends Component { /> {staticLegend && dygraph.attributes_.series_[l].options.color) - : [] + const labels = _.keys(dygraphSeries) + const colors = _.map(labels, l => dygraphSeries[l].color) const hoverEnabled = labels.length > 1 @@ -105,7 +102,7 @@ class StaticLegend extends Component { const {shape, func} = PropTypes StaticLegend.propTypes = { - sharedLegend: shape({}), + dygraphSeries: shape({}), dygraph: shape({}), handleReceiveStaticLegendHeight: func.isRequired, } From da43736602d6f393d102493c61b14f9530fc445b Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 27 Feb 2018 17:07:27 -0800 Subject: [PATCH 010/431] WIP adding controls into TableOptions --- ui/src/dashboards/components/TableOptions.js | 50 ++++++++++++-------- 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js index 0a3fcc25d..9abb25975 100644 --- a/ui/src/dashboards/components/TableOptions.js +++ b/ui/src/dashboards/components/TableOptions.js @@ -93,6 +93,14 @@ class TableOptions extends Component { handleUpdateSingleStatColors(singleStatColors) } + handleChooseSortBy = value => {} + + handleTimeFormatChange = format => {} + + handleToggleTimeAxis = axis => {} + + handleToggleTextWrapping = wrapType => {} + handleUpdateColorValue = (threshold, value) => { const {handleUpdateSingleStatColors} = this.props @@ -135,6 +143,8 @@ class TableOptions extends Component { const sortedColors = _.sortBy(singleStatColors, color => color.value) + const sortByOptions = ['hey', 'yo', 'what'].map(op => ({text: op})) + return (
@@ -158,7 +167,7 @@ class TableOptions extends Component { className={`${singleStatType === SINGLE_STAT_BG ? 'active' : ''}`} - // onClick={this.handleToggleSingleStatType(SINGLE_STAT_BG)} + onClick={this.handleToggleTimeAxis} > Vertical @@ -166,19 +175,31 @@ class TableOptions extends Component { className={`${singleStatType === SINGLE_STAT_TEXT ? 'active' : ''}`} - // onClick={this.handleToggleSingleStatType(SINGLE_STAT_TEXT)} + onClick={this.handleToggleTimeAxis} > Horizontal - +
+
+ + +
+
  • Truncate
    • @@ -186,7 +207,7 @@ class TableOptions extends Component { className={`${singleStatType === SINGLE_STAT_TEXT ? 'active' : ''}`} - // onClick={this.handleToggleSingleStatType(SINGLE_STAT_TEXT)} + onClick={this.handleToggleTextWrapping} > Wrap @@ -194,21 +215,13 @@ class TableOptions extends Component { className={`${singleStatType === SINGLE_STAT_BG ? 'active' : ''}`} - // onClick={this.handleToggleSingleStatType(SINGLE_STAT_BG)} + onClick={this.handleToggleTextWrapping} > Single Line
- - - + - {sortedColors.map(color => + {gaugeColors.map(color => )} diff --git a/ui/src/dashboards/components/Threshold.js b/ui/src/dashboards/components/Threshold.js index df274f6da..06de69016 100644 --- a/ui/src/dashboards/components/Threshold.js +++ b/ui/src/dashboards/components/Threshold.js @@ -29,6 +29,13 @@ class Threshold extends Component { handleBlur = () => { this.setState({workingValue: this.props.threshold.value, valid: true}) + this.props.onSortColors() + } + + handleKeyUp = e => { + if (e.key === 'Enter') { + this.thresholdInputRef.blur() + } } render() { @@ -87,6 +94,8 @@ class Threshold extends Component { type="number" onChange={this.handleChangeWorkingValue} onBlur={this.handleBlur} + onKeyUp={this.handleKeyUp} + ref={r => (this.thresholdInputRef = r)} /> Date: Tue, 27 Feb 2018 17:16:22 -0800 Subject: [PATCH 012/431] Ensure single stat base color is always first during sort --- ui/src/dashboards/constants/gaugeColors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/dashboards/constants/gaugeColors.js b/ui/src/dashboards/constants/gaugeColors.js index ad3d03a37..46c3e9663 100644 --- a/ui/src/dashboards/constants/gaugeColors.js +++ b/ui/src/dashboards/constants/gaugeColors.js @@ -111,7 +111,7 @@ export const DEFAULT_SINGLESTAT_COLORS = [ hex: GAUGE_COLORS[11].hex, id: SINGLE_STAT_BASE, name: GAUGE_COLORS[11].name, - value: 0, + value: -999999999999999999, }, ] From 02ad18dee5293a0d429365cc08239aec94304436 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 17:16:37 -0800 Subject: [PATCH 013/431] Remove commented out code --- ui/src/dashboards/components/GaugeOptions.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/ui/src/dashboards/components/GaugeOptions.js b/ui/src/dashboards/components/GaugeOptions.js index d0a2b8938..70e59d68e 100644 --- a/ui/src/dashboards/components/GaugeOptions.js +++ b/ui/src/dashboards/components/GaugeOptions.js @@ -151,16 +151,11 @@ class GaugeOptions extends Component { handleUpdateGaugeColors(sortedColors) } - // componentDidMount = () => { - // this.handleSortColors() - // } - render() { const {gaugeColors, axes: {y: {prefix, suffix}}} = this.props const disableMaxColor = gaugeColors.length > MIN_THRESHOLDS const disableAddThreshold = gaugeColors.length > MAX_THRESHOLDS - // const sortedColors = _.sortBy(gaugeColors, color => color.value) return ( Date: Tue, 27 Feb 2018 17:16:59 -0800 Subject: [PATCH 014/431] Prevent colors sorting when editing value --- .../components/SingleStatOptions.js | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/ui/src/dashboards/components/SingleStatOptions.js b/ui/src/dashboards/components/SingleStatOptions.js index 364795d45..121ef0248 100644 --- a/ui/src/dashboards/components/SingleStatOptions.js +++ b/ui/src/dashboards/components/SingleStatOptions.js @@ -67,18 +67,23 @@ class SingleStatOptions extends Component { name: GAUGE_COLORS[randomColor].name, } - handleUpdateSingleStatColors([...singleStatColors, newThreshold]) + const updatedColors = _.sortBy( + [...singleStatColors, newThreshold], + color => color.value + ) + + handleUpdateSingleStatColors(updatedColors) onResetFocus() } handleDeleteThreshold = threshold => () => { const {handleUpdateSingleStatColors, onResetFocus} = this.props - const singleStatColors = this.props.singleStatColors.filter( color => color.id !== threshold.id ) + const sortedColors = _.sortBy(singleStatColors, color => color.value) - handleUpdateSingleStatColors(singleStatColors) + handleUpdateSingleStatColors(sortedColors) onResetFocus() } @@ -126,6 +131,13 @@ class SingleStatOptions extends Component { handleUpdateAxes(newAxes) } + handleSortColors = () => { + const {singleStatColors, handleUpdateSingleStatColors} = this.props + const sortedColors = _.sortBy(singleStatColors, color => color.value) + + handleUpdateSingleStatColors(sortedColors) + } + render() { const { singleStatColors, @@ -135,8 +147,6 @@ class SingleStatOptions extends Component { const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS - const sortedColors = _.sortBy(singleStatColors, color => color.value) - return ( Add Threshold - {sortedColors.map( + {singleStatColors.map( color => color.id === SINGLE_STAT_BASE ?
@@ -172,6 +182,7 @@ class SingleStatOptions extends Component { onValidateColorValue={this.handleValidateColorValue} onUpdateColorValue={this.handleUpdateColorValue} onDeleteThreshold={this.handleDeleteThreshold} + onSortColors={this.handleSortColors} /> )}
From 3e040910f0fc4eabb5936e26c8ec3049a30b2d63 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 17:21:37 -0800 Subject: [PATCH 015/431] Updoot log of change --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 867172ed0..23353c8e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ 1. [#2850](https://github.com/influxdata/chronograf/pull/2850): Fix bug in which resizing any cell in a dashboard causes a Gauge cell to resize 1. [#2851] (https://github.com/influxdata/chronograf/pull/2851): Maintain y axis labels in dashboard cells 1. [#2819] (https://github.com/influxdata/chronograf/pull/2819): Deprecate --new-sources in CLI +1. [#2886](https://github.com/influxdata/chronograf/pull/2886): Don't sort Single Stat & Gauge thresholds when editing threshold values ## v1.4.1.3 [2018-02-14] ### Bug Fixes From 68c467592515cb09a36982bfbebe97f7e67fc89d Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 17:28:04 -0800 Subject: [PATCH 016/431] Format color palette --- ui/src/style/modules/influx-colors.scss | 138 ++++++++++++------------ 1 file changed, 69 insertions(+), 69 deletions(-) diff --git a/ui/src/style/modules/influx-colors.scss b/ui/src/style/modules/influx-colors.scss index cddc06934..76d7c7690 100644 --- a/ui/src/style/modules/influx-colors.scss +++ b/ui/src/style/modules/influx-colors.scss @@ -3,82 +3,82 @@ // -------------------------------------------------- // Nuetrals (Dark to Light) -$g0-obsidian: #0f0e15; -$g1-raven: #1c1c21; -$g2-kevlar: #202028; -$g3-castle: #292933; -$g4-onyx: #31313d; -$g5-pepper: #383846; -$g6-smoke: #434453; -$g7-graphite: #545667; -$g8-storm: #676978; -$g9-mountain: #757888; -$g10-wolf: #8e91a1; -$g11-sidewalk: #999dab; -$g12-forge: #a4a8b6; -$g13-mist: #bec2cc; -$g14-chromium: #c6cad3; -$g15-platinum: #d4d7dd; -$g16-pearl: #e7e8eb; -$g17-whisper: #eeeff2; -$g18-cloud: #f6f6f8; -$g19-ghost: #fafafc; -$g20-white: #ffffff; +$g0-obsidian: #0f0e15; +$g1-raven: #1c1c21; +$g2-kevlar: #202028; +$g3-castle: #292933; +$g4-onyx: #31313d; +$g5-pepper: #383846; +$g6-smoke: #434453; +$g7-graphite: #545667; +$g8-storm: #676978; +$g9-mountain: #757888; +$g10-wolf: #8e91a1; +$g11-sidewalk: #999dab; +$g12-forge: #a4a8b6; +$g13-mist: #bec2cc; +$g14-chromium: #c6cad3; +$g15-platinum: #d4d7dd; +$g16-pearl: #e7e8eb; +$g17-whisper: #eeeff2; +$g18-cloud: #f6f6f8; +$g19-ghost: #fafafc; +$g20-white: #ffffff; // Telegraf (Dark to Light) -$c-basalt: #2F1F29; -$c-ruby: #BF3D5E; -$c-fire: #DC4E58; -$c-fire-disabled: #6F3943; -$c-curacao: #F95F53; -$c-curacao-disabled: #EADAD8; -$c-dreamsicle: #FF8564; -$c-tungsten: #FFB6A0; -$c-marmelade: #FFDCCF; -$c-flan: #FFF7F4; +$c-basalt: #2F1F29; +$c-ruby: #BF3D5E; +$c-fire: #DC4E58; +$c-fire-disabled: #6F3943; +$c-curacao: #F95F53; +$c-curacao-disabled: #EADAD8; +$c-dreamsicle: #FF8564; +$c-tungsten: #FFB6A0; +$c-marmelade: #FFDCCF; +$c-flan: #FFF7F4; // InfluxDB (Dark to Light) -$c-abyss: #182838; -$c-sapphire: #326BBA; -$c-ocean: #4591ED; -$c-ocean-disabled: #32547F; -$c-pool: #22ADF6; -$c-pool-disabled: #C9E0ED; -$c-laser: #00C9FF; -$c-hydrogen: #6BDFFF; -$c-neutrino: #BEF0FF; -$c-yeti: #F0FCFF; +$c-abyss: #182838; +$c-sapphire: #326BBA; +$c-ocean: #4591ED; +$c-ocean-disabled: #32547F; +$c-pool: #22ADF6; +$c-pool-disabled: #C9E0ED; +$c-laser: #00C9FF; +$c-hydrogen: #6BDFFF; +$c-neutrino: #BEF0FF; +$c-yeti: #F0FCFF; // Chronograf (Dark to Light) -$c-shadow: #1F2039; -$c-void: #311F94; -$c-amethyst: #513CC6; -$c-amethyst-disabled: #484281; -$c-star: #7A65F2; -$c-star-disabled: #D6D5ED; -$c-comet: #9394FF; -$c-potassium: #B1B6FF; -$c-moonstone: #C9D0FF; -$c-twilight: #F2F4FF; +$c-shadow: #1F2039; +$c-void: #311F94; +$c-amethyst: #513CC6; +$c-amethyst-disabled: #484281; +$c-star: #7A65F2; +$c-star-disabled: #D6D5ED; +$c-comet: #9394FF; +$c-potassium: #B1B6FF; +$c-moonstone: #C9D0FF; +$c-twilight: #F2F4FF; // Kapacitor (Dark to Light) -$c-gypsy: #152B2D; -$c-emerald: #108174; -$c-viridian: #32B08C; -$c-viridian-disabled: #2B6058; -$c-rainforest: #4ED8A0; -$c-rainforest-disabled: #CFE6E1; -$c-honeydew: #7CE490; -$c-krypton: #A5F3B4; -$c-wasabi: #C6FFD0; -$c-mint: #F2FFF4; +$c-gypsy: #152B2D; +$c-emerald: #108174; +$c-viridian: #32B08C; +$c-viridian-disabled: #2B6058; +$c-rainforest: #4ED8A0; +$c-rainforest-disabled: #CFE6E1; +$c-honeydew: #7CE490; +$c-krypton: #A5F3B4; +$c-wasabi: #C6FFD0; +$c-mint: #F2FFF4; // Warnings (Dark to Light) -$c-oak: #3F241F; -$c-topaz: #E85B1C; -$c-tiger: #F48D38; -$c-pineapple: #FFB94A; -$c-thunder: #FFD255; -$c-sulfur: #FFE480; -$c-daisy: #FFF6B8; -$c-banana: #FFFDDE; \ No newline at end of file +$c-oak: #3F241F; +$c-topaz: #E85B1C; +$c-tiger: #F48D38; +$c-pineapple: #FFB94A; +$c-thunder: #FFD255; +$c-sulfur: #FFE480; +$c-daisy: #FFF6B8; +$c-banana: #FFFDDE; From 7d61cca144d0f1e5071c9c48c17734ce5e471837 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 27 Feb 2018 17:36:55 -0800 Subject: [PATCH 017/431] add inview to tableoption --- ui/src/shared/components/RefreshingGraph.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js index ba98d3cee..a73572c0c 100644 --- a/ui/src/shared/components/RefreshingGraph.js +++ b/ui/src/shared/components/RefreshingGraph.js @@ -90,6 +90,7 @@ const RefreshingGraph = ({ cellHeight={cellHeight} prefix={prefix} suffix={suffix} + inView={inView} /> ) } From 3f49af68938b339f7dd98d1370e6d7e6b658cf6c Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 17:51:33 -0800 Subject: [PATCH 018/431] Introduce Chronograf Theme Including 2 modules to start, more to come --- ui/src/style/chronograf.scss | 7 +- ui/src/style/modules/influx-colors.scss | 7 +- ui/src/style/modules/mixins.scss | 2 +- ui/src/style/modules/variables.scss | 75 ++++ ui/src/style/theme/buttons.scss | 425 +++++++++++++++++++++++ ui/src/style/theme/chronograf-theme.scss | 10 + ui/src/style/theme/typography.scss | 230 ++++++++++++ 7 files changed, 751 insertions(+), 5 deletions(-) create mode 100644 ui/src/style/theme/buttons.scss create mode 100644 ui/src/style/theme/chronograf-theme.scss create mode 100644 ui/src/style/theme/typography.scss diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index caf95e5e2..82042a0f2 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -1,3 +1,8 @@ +/* + Chronograf Styles + ----------------------------------------------------------------------------- +*/ + // Modules @import 'modules/influx-colors'; @import 'modules/variables'; @@ -7,7 +12,7 @@ @import 'fonts/fonts'; // Theme -@import 'theme/reset'; +@import 'theme/chronograf-theme'; @import 'theme/bootstrap-theme'; // Vendor diff --git a/ui/src/style/modules/influx-colors.scss b/ui/src/style/modules/influx-colors.scss index 76d7c7690..eefe761f1 100644 --- a/ui/src/style/modules/influx-colors.scss +++ b/ui/src/style/modules/influx-colors.scss @@ -1,6 +1,7 @@ -// -// Influx Color Palette -// -------------------------------------------------- +/* + Influx Color Palette + ----------------------------------------------------------------------------- +*/ // Nuetrals (Dark to Light) $g0-obsidian: #0f0e15; diff --git a/ui/src/style/modules/mixins.scss b/ui/src/style/modules/mixins.scss index ad8bb3775..1723b10db 100644 --- a/ui/src/style/modules/mixins.scss +++ b/ui/src/style/modules/mixins.scss @@ -115,7 +115,7 @@ $scrollbar-offset: 3px; cursor: default; } } -.no-user-select { +%no-user-select { user-select: none !important; -moz-user-select: none !important; -webkit-user-select: none !important; diff --git a/ui/src/style/modules/variables.scss b/ui/src/style/modules/variables.scss index 5b23ba75b..76985d2bc 100644 --- a/ui/src/style/modules/variables.scss +++ b/ui/src/style/modules/variables.scss @@ -1,5 +1,80 @@ +/* + Variables + ----------------------------------------------------------------------------- +*/ + $radius: 4px; $radius-small: 3px; $page-wrapper-padding: 60px; $page-wrapper-max-width: 1300px; $chronograf-page-header-height: 60px; + +$ix-marg-a: 4px; +$ix-marg-b: 8px; +$ix-marg-c: 16px; +$ix-marg-d: 32px; +$ix-marg-e: 64px; +$ix-marg-f: 128px; + +$ix-border: 2px; +$ix-radius: 4px; +$ix-radius-sm: 3px; + +$ix-scrollbar: 14px; + +$ix-link-default: $c-pool; +$ix-link-default-hover: $c-laser; +$ix-link-success: $c-rainforest; +$ix-link-success-hover: $c-honeydew; +$ix-link-warning: $c-star; +$ix-link-warning-hover: $c-comet; +$ix-link-danger: $c-curacao; +$ix-link-danger-hover: $c-dreamsicle; + +$ix-text-default: $g13-mist; +$ix-text-light: $g13-mist; +$ix-text-lighter: $g13-mist; +$ix-text-lightest: $g15-platinum; + +$ix-text-font: 'Roboto',Helvetica,Arial,Tahoma, Verdana, sans-serif; +$ix-text-selection-bg: $c-pool; +$ix-text-selection-color: $g20-white; +$ix-text-scale: 1.19; +$ix-icon-font: 'icomoon'; +$code-font: "Roboto Mono",monospace; + +$ix-text-tiny: 12.5px; +$ix-text-base: 14.5px; +$ix-text-base-1: (ceil($ix-text-base * $ix-text-scale)); +$ix-text-base-2: (ceil($ix-text-base * $ix-text-scale * $ix-text-scale)); +$ix-text-base-3: (ceil($ix-text-base * $ix-text-scale * $ix-text-scale * $ix-text-scale)); +$ix-text-base-4: (ceil($ix-text-base * $ix-text-scale * $ix-text-scale * $ix-text-scale * $ix-text-scale)); +$ix-text-base-5: (ceil($ix-text-base * $ix-text-scale * $ix-text-scale * $ix-text-scale * $ix-text-scale * $ix-text-scale)); + +$-ix-app-z: 2; + +$ix-sidebar-z: 10; +$ix-sidebar-width: 60px; + +$ix-sidebar-drawer-max: 270px; + +$ix-app-heading-z: 5; +$ix-app-heading-height: 60px; + +$ix-app-wrapper-z: 3; + +$form-xs-height: 22px; +$form-xs-padding: 7px; +$form-xs-font: 12px; + +$form-sm-height: 30px; +$form-sm-padding: 11px; +$form-sm-font: 13px; + +$form-md-height: 38px; +$form-md-padding: 14px; +$form-md-font: 15px; + +$form-lg-height: 46px; +$form-lg-padding: 17px; +$form-lg-font: 17px; diff --git a/ui/src/style/theme/buttons.scss b/ui/src/style/theme/buttons.scss new file mode 100644 index 000000000..723352666 --- /dev/null +++ b/ui/src/style/theme/buttons.scss @@ -0,0 +1,425 @@ +/* + Buttons + ----------------------------------------------------------------------------- +*/ + +.btn, +a.btn, +div.btn, +button.btn, +input.btn { + text-decoration: none; + box-shadow: none; + font-weight: 700; + border-style: solid; + margin: 0; + position: relative; + transition: + background-color 0.25s ease, + color 0.25s ease, + border-color 0.25s ease, + box-shadow 0.25s ease, + opacity 0.3s ease; + outline: none !important; + border-radius: 4px; + padding: 0 $form-md-padding; + height: $form-md-height; + line-height: $form-md-height; + font-size: $form-md-font; + + // Icons + > .icon { + margin: 0 4px 0 0; + font-size: 1em; + position: relative; + top: -1px; + } + // Square Modifier + &-square { + padding: 0 !important; + width: $form-md-height; + + .icon { + margin: 0 !important; + } + } + // Size Modifiers + &-xs { + border-radius: 3px; + padding: 0 $form-xs-padding; + height: $form-xs-height; + line-height: $form-xs-height; + font-size: $form-xs-font; + // Icons + > .icon { + margin-right: 3px; + } + &.btn-square { + width: $form-xs-height; + } + } + &-sm { + border-radius: 4px; + padding: 0 $form-sm-padding; + height: $form-sm-height; + line-height: $form-sm-height; + font-size: $form-sm-font; + // Icons + > .icon { + font-size: 1.125em; + top: 0px; + margin-right: 4px; + } + &.btn-square { + width: $form-sm-height; + } + } + &-md { + border-radius: 4px; + padding: 0 $form-md-padding; + height: $form-md-height; + line-height: $form-md-height; + font-size: $form-md-font; + // Icons + > .icon { + margin-right: 6px; + } + &.btn-square { + width: $form-md-height; + } + } + &-lg { + border-radius: 4px; + padding: 0 $form-lg-padding; + height: $form-lg-height; + line-height: $form-lg-height; + font-size: $form-lg-font; + // Icons + > .icon { + margin-right: 8px; + } + &.btn-square { + width: $form-lg-height; + } + } +} +// Button Size Modifiers +.btn-group-xs > .btn, +.btn.btn-xs { + padding: 0 $form-xs-padding; + height: $form-xs-height; + line-height: $form-xs-height; + font-size: $form-xs-font; +} +.btn-group-sm > .btn, +.btn.btn-sm { + padding: 0 $form-sm-padding; + height: $form-sm-height; + line-height: $form-sm-height; + font-size: $form-sm-font; +} +.btn-group-lg > .btn, +.btn.btn-lg { + padding: 0 $form-lg-padding; + height: $form-lg-height; + line-height: $form-lg-height; + font-size: $form-lg-font; +} + + +// Solid Button styles mixin +// ----------------------------------------------------------------------------- +@mixin btn-base-styles( + $bg-color, + $bg-color-hover, + $bg-color-press, + $text-color, + $text-color-hover + ) { + + // Default State + background-color: $bg-color; + color: $text-color; + text-shadow: none; + border-width: 0; + + // Focus State + &:focus { + background-color: $bg-color; + color: $text-color; + box-shadow: none; + } + + // Hover State + &:hover, + &:focus:hover { + background-color: $bg-color-hover; + color: $text-color-hover; + cursor: pointer; + } + // MouseDown State + &.active, + &.active:hover, + &:active, + &:active:hover, + &:focus:active, + &:focus:active:hover, + .dropdown.open &.dropdown-toggle { + background-color: $bg-color-press; + color: $text-color-hover; + cursor: pointer; + } + // Disabled State + &.disabled, + &[disabled], + fieldset[disabled] & { + opacity: 1; + font-style: italic; + background-color: $g5-pepper; + color: $g7-graphite; + box-shadow: none; + + &:hover, + &:active, + &:focus, + &.active, + &:active:focus { + opacity: 1; + background-color: $g5-pepper; + color: $g7-graphite; + cursor: not-allowed; + box-shadow: none; + } + &:after { + display: none; + } + } +} + +a.btn-default, +div.btn-default, +button.btn-default, +input.btn-default { + @include btn-base-styles( + $g5-pepper, + $g6-smoke, + $g7-graphite, + $g14-chromium, + $g18-cloud + ); +} +a.btn-primary, +div.btn-primary, +button.btn-primary, +input.btn-primary { + @include btn-base-styles( + $c-pool, + $c-laser, + $c-hydrogen, + $g20-white, + $g20-white + ); +} +a.btn-success, +div.btn-success, +button.btn-success, +input.btn-success { + @include btn-base-styles( + $c-rainforest, + $c-honeydew, + $c-krypton, + $g20-white, + $g20-white + ); +} +a.btn-info, +div.btn-info, +button.btn-info, +input.btn-info { + @include btn-base-styles( + $g7-graphite, + $g8-storm, + $g9-mountain, + $g16-pearl, + $g20-white + ); +} +a.btn-warning, +div.btn-warning, +button.btn-warning, +input.btn-warning { + @include btn-base-styles( + $c-star, + $c-comet, + $c-potassium, + $g20-white, + $g20-white + ); +} +a.btn-danger, +div.btn-danger, +button.btn-danger, +input.btn-danger { + @include btn-base-styles( + $c-curacao, + $c-dreamsicle, + $c-tungsten, + $g20-white, + $g20-white + ); +} +a.btn-alert, +div.btn-alert, +button.btn-alert, +input.btn-alert { + @include btn-base-styles( + $c-pineapple, + $c-thunder, + $c-sulfur, + $g20-white, + $g20-white + ); +} + + +// Outline Button styles mixin +// ----------------------------------------------------------------------------- +@mixin btn-outline-styles ( + $text-color, + $text-color-hover, + $border-color, + $border-color-hover, + $border-color-press + ) { + + // Adjusting line height in response to more borders + line-height: ($form-md-height - 4px); + &.btn-xs { + line-height: ($form-xs-height - 4px); + } + &.btn-sm { + line-height: ($form-sm-height - 4px); + } + &.btn-md { + line-height: ($form-md-height - 4px); + } + &.btn-lg { + line-height: ($form-lg-height - 4px); + } + + // Default State + border-width: 2px; + background-color: transparent; + border-color: $border-color; + color: $text-color; + &:focus { + border-width: 2px; + background-color: transparent; + border-color: $border-color; + color: $text-color; + } + + // Hover State + &:hover { + background-color: transparent; + border-color: $border-color-hover; + color: $text-color-hover; + } + + // MouseDown State + &.active, + &.active:hover, + &:active, + &:active:hover, + .open &.dropdown-toggle { + box-shadow: none; + background-color: transparent; + border-color: $border-color-press; + color: $text-color-hover; + } + + // Disabled State + &.disabled, + &[disabled], + fieldset[disabled] & { + opacity: 1; + background-color: transparent; + border-color: $g5-pepper; + color: $g7-graphite; + box-shadow: none; + font-style: italic; + + &:hover, + &:active, + &:focus, + &.active, + &:active:focus { + opacity: 1; + background-color: transparent; + border-color: $g5-pepper; + color: $g7-graphite; + cursor: not-allowed; + box-shadow: none; + } + &:after { + display: none; + } + } + +} + +a.btn-link, +div.btn-link, +button.btn-link { + @include btn-outline-styles( + $c-pool, + $c-laser, + $g5-pepper, + $g6-smoke, + $c-laser + ); +} +a.btn-link-success, +div.btn-link-success, +button.btn-link-success { + @include btn-outline-styles( + $c-rainforest, + $c-honeydew, + $g5-pepper, + $g6-smoke, + $c-honeydew + ); +} +a.btn-link-warning, +div.btn-link-warning, +button.btn-link-warning { + @include btn-outline-styles( + $c-star, + $c-comet, + $g5-pepper, + $g6-smoke, + $c-comet + ); +} +a.btn-link-danger, +div.btn-link-danger, +button.btn-link-danger { + @include btn-outline-styles( + $c-curacao, + $c-dreamsicle, + $g5-pepper, + $g6-smoke, + $c-dreamsicle + ); +} +a.btn-link-alert, +div.btn-link-alert, +button.btn-link-alert { + @include btn-outline-styles( + $c-pineapple, + $c-thunder, + $g5-pepper, + $g6-smoke, + $c-thunder + ); +} diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss new file mode 100644 index 000000000..86cc26743 --- /dev/null +++ b/ui/src/style/theme/chronograf-theme.scss @@ -0,0 +1,10 @@ +/* + Chronograf Theme + ----------------------------------------------------------------------------- + The theme covers app-wide styles and is intended to be overwritten on + a component basis +*/ + +@import 'theme/reset'; +@import 'theme/typography'; +@import 'theme/buttons'; diff --git a/ui/src/style/theme/typography.scss b/ui/src/style/theme/typography.scss new file mode 100644 index 000000000..9fc8c4f87 --- /dev/null +++ b/ui/src/style/theme/typography.scss @@ -0,0 +1,230 @@ +/* + Typography + ----------------------------------------------------------------------------- +*/ + +body { + font-family: $ix-text-font; + color: $ix-text-default; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +// Base Link Styles +// ----------------------------------------------------------------------------- +a:link, +a:visited { + color: $ix-link-default; + transition: color 0.2s ease; + text-decoration: none; + font-weight: 700; + + &.link-danger { + color: $ix-link-danger; + } + &.link-success { + color: $ix-link-success; + } + &.link-warning { + color: $ix-link-warning; + } +} +a:hover, +a:active { + color: $ix-link-default-hover; + text-decoration: none; + + &.link-danger { + color: $ix-link-danger-hover; + } + &.link-success { + color: $ix-link-success-hover; + } + &.link-warning { + color: $ix-link-warning-hover; + } +} + +// Selection Styles +// ----------------------------------------------------------------------------- +::selection { + background-color: $ix-text-selection-bg; + color: $ix-text-selection-color; /* WebKit/Blink Browsers */ +} +::-moz-selection { + background-color: $ix-text-selection-bg; + color: $ix-text-selection-color; /* Gecko Browsers */ +} + +// Typography Base Styles +// ----------------------------------------------------------------------------- + +%type-base-styles { + margin: $ix-marg-b 0 0.55em 0; +} +%type-small-styles { + small { + font-size: 0.8em; + font-weight: inherit; + color: $ix-text-lighter; + } +} + +// Typographic Elements +// ----------------------------------------------------------------------------- +p { + @extend %type-base-styles; + font-size: $ix-text-base; + line-height: 1.55em; + font-weight: 400; + + b,strong { + font-weight: 900; + } + + small { + color: $ix-text-light; + font-size: $ix-text-tiny; + font-weight: 500; + } +} + +h1 { + @extend %type-base-styles; + @extend %type-small-styles; + line-height: 1.25em; + font-size: $ix-text-base-5; + font-weight: 300; + letter-spacing: -1px; +} +h2 { + @extend %type-base-styles; + @extend %type-small-styles; + line-height: 1.25em; + font-size: $ix-text-base-4; + font-weight: 300; + letter-spacing: -1px; +} +h3 { + @extend %type-base-styles; + @extend %type-small-styles; + line-height: 1.25em; + font-size: $ix-text-base-3; + font-weight: 400; + small { + font-weight: 400; + } +} +h4 { + @extend %type-base-styles; + @extend %type-small-styles; + line-height: 1.25em; + font-size: $ix-text-base-2; + font-weight: 400; + small { + font-weight: 400; + } +} +h5 { + @extend %type-base-styles; + @extend %type-small-styles; + line-height: 1.25em; + font-size: $ix-text-base-1; + font-weight: 600; + small { + font-weight: 500; + } +} +h6 { + @extend %type-base-styles; + @extend %type-small-styles; + line-height: 1.25em; + font-size: $ix-text-base; + font-weight: 900; + small { + font-weight: 500; + } +} +ol,ul { + @extend %type-base-styles; + padding-left: $ix-marg-c; + font-size: $ix-text-base; + line-height: 1.55em; + font-weight: 500; +} +li { + margin: 0 0 $ix-marg-b 0; + padding-left: $ix-marg-b; + &:last-child { + margin-bottom: 0; + } +} +blockquote { + @extend %type-base-styles; + font-size: $ix-text-base; + line-height: 1.55em; + font-weight: 400; + border: 0; + padding: $ix-marg-b $ix-marg-c; + color: $ix-text-light; + font-style: italic; + position: relative; + + &:before, + &:after { + content: ''; + position: absolute; + width: $ix-marg-e; + height: $ix-marg-d; + border-style: solid; + border-color: $g5-pepper; + } + &:before { + top: 0; + left: 0; + border-width: $ix-border 0 0 $ix-border; + } + &:after { + bottom: 0; + right: 0; + border-width: 0 $ix-border $ix-border 0; + } + + b,strong { + font-weight: 900; + } +} +hr { + border:0; + height: 2px; + margin: $ix-marg-c 0 $ix-marg-d 0; + background-color: $g5-pepper; + border-radius: 1px; + &.dark { + background-color: $g3-castle; + } +} + +// Type Formatting +b,strong { + font-weight: 900; +} +mark { + background-color: $c-emerald; + color: $c-honeydew; + padding: $ix-border $ix-marg-a; + border-radius: $ix-radius-sm; +} + +// Text Selection Styling +::selection { + background-color: $c-pool; + color: $g20-white; +} +::-moz-selection { + background-color: $c-pool; + color: $g20-white; +} +br { + @extend %no-user-select; +} From 96e16f7a28bdff072cd6328294b6c28c851a78b3 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 17:55:26 -0800 Subject: [PATCH 019/431] Introduce Icon Font --- ui/src/style/chronograf.scss | 1 + ui/src/style/fonts/icon-font.scss | 140 ++++++++++++++++++++++++++++++ 2 files changed, 141 insertions(+) create mode 100644 ui/src/style/fonts/icon-font.scss diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index 82042a0f2..50c50c5d1 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -10,6 +10,7 @@ // Fonts @import 'fonts/fonts'; +@import 'fonts/icon-font'; // Theme @import 'theme/chronograf-theme'; diff --git a/ui/src/style/fonts/icon-font.scss b/ui/src/style/fonts/icon-font.scss new file mode 100644 index 000000000..2350bcdec --- /dev/null +++ b/ui/src/style/fonts/icon-font.scss @@ -0,0 +1,140 @@ +/* + Icon Font + ----------------------------------------------------------------------------- + Created using a tool called IcoMoon + See more at http://icomoon.io +*/ + +@font-face { + font-family: 'icomoon'; + src: url('icomoon.eot'); + src: url('icomoon.eot') format('embedded-opentype'), + url('icomoon.woff2') format('woff2'), + url('icomoon.ttf') format('truetype'), + url('icomoon.woff') format('woff'), + url('icomoon.svg') format('svg'); + font-weight: normal; + font-style: normal; +} + +.icon { + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + // Better Font Rendering + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + &.annotate-plus:before {content: "\e952";} + &.annotate:before {content: "\e953";} + &.maximize:before {content: "\e91f";} + &.minimize:before {content: "\e920";} + &.download:before {content: "\e91d";} + &.eye:before {content: "\e91e";} + &.checkmark:before {content: "\e918";} + &.search:before {content: "\e916";} + &.duplicate:before {content: "\e917";} + &.remove:before {content: "\e909";} + &.plus:before {content: "\e90a";} + &.arrow-up:before {content: "\e90b";} + &.arrow-left:before {content: "\e90c";} + &.arrow-down:before {content: "\e910";} + &.arrow-right:before {content: "\e911";} + &.caret-left:before {content: "\e900";} + &.caret-up:before {content: "\e901";} + &.caret-down:before {content: "\e902";} + &.caret-right:before {content: "\e903";} + &.trash-outline:before {content: "\e904";} + &.trash:before {content: "\e905";} + &.wrench:before {content: "\e912";} + &.wrenches:before {content: "\e913";} + &.user:before {content: "\e94d";} + &.cog-thick:before {content: "\e906";} + &.cog:before {content: "\e907";} + &.cubo:before {content: "\e908";} + &.flag:before {content: "\e90d";} + &.graphline:before {content: "\e90e";} + &.dash-a:before {content: "\e922";} + &.dash-b:before {content: "\e923";} + &.dash-c:before {content: "\e924";} + &.dash-d:before {content: "\e925";} + &.dash-e:before {content: "\e926";} + &.dash-f:before {content: "\e927";} + &.dash-g:before {content: "\e928";} + &.dash-h:before {content: "\e929";} + &.dash-i:before {content: "\e92a";} + &.dash-j:before {content: "\e92b";} + &.access-key:before {content: "\e921";} + &.crown2:before {content: "\e94b";} + &.crown:before {content: "\e90f";} + &.server2:before {content: "\e94c";} + &.server:before {content: "\e914";} + &.cpu:before {content: "\e915";} + &.cubo-node:before {content: "\e919";} + &.cubo-uniform:before {content: "\e91a";} + &.user-outline:before {content: "\e91c";} + &.refresh:before {content: "\e949";} + &.pause:before {content: "\e94a";} + &.clock:before {content: "\e91b";} + &.triangle:before {content: "\e92c";} + &.square:before {content: "\e93e";} + &.diamond:before {content: "\e93f";} + &.octagon:before {content: "\e92d";} + &.circle:before {content: "\e940";} + &.cube:before {content: "\e92e";} + &.component-e:before {content: "\e92f";} + &.component-d:before {content: "\e930";} + &.component-c:before {content: "\e931";} + &.component-b:before {content: "\e932";} + &.component-a:before {content: "\e933";} + &.pulse-a:before {content: "\e934";} + &.pulse-b:before {content: "\e935";} + &.pulse-c:before {content: "\e936";} + &.pulse-d:before {content: "\e937";} + &.pulse-e:before {content: "\e938";} + &.brush:before {content: "\e939";} + &.keynote:before {content: "\e93a";} + &.polaroid:before {content: "\e93b";} + &.alpha-a:before {content: "\e93c";} + &.alpha-b:before {content: "\e93d";} + &.export:before {content: "\e941";} + &.expand-b:before {content: "\e942";} + &.expand-c:before {content: "\e943";} + &.expand-a:before {content: "\e944";} + &.undo:before {content: "\e945";} + &.redo:before {content: "\e946";} + &.heroku:before {content: "\e947";} + &.heroku-simple:before {content: "\e948";} + &.oauth:before {content: "\e94f";} + &.authzero:before {content: "\e951";} + &.shuffle:before {content: "\e94e";} + &.disks:before {content: "\e950";} + &.alert-triangle:before {content: "\f02d";} + &.comment:before {content: "\f02b";} + &.comment-discussion:before {content: "\f04f";} + &.heart:before {content: "\2665";} + &.link:before {content: "\f05c";} + &.location:before {content: "\f060";} + &.octoface:before {content: "\f008";} + &.pencil:before {content: "\f058";} + &.star:before {content: "\f02a";} + &.stop:before {content: "\f08f";} + &.sync:before {content: "\f087";} + &.zap:before {content: "\26a1";} + &.google:before {content: "\ea88";} + &.google3:before {content: "\ea8a";} + &.google-plus:before {content: "\ea8b";} + &.facebook:before {content: "\ea90";} + &.facebook2:before {content: "\ea91";} + &.twitter:before {content: "\ea96";} + &.github:before {content: "\eab0";} + &.trello:before {content: "\eab3";} + &.linkedin:before {content: "\eac9";} + &.linkedin2:before {content: "\eaca";} + &.stackoverflow:before {content: "\ead0";} +} From 7b30f6d79fe77c63c32b31c458e83a78bbc3b586 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 18:02:22 -0800 Subject: [PATCH 020/431] Add Dropdown styles from bootstrap theme --- ui/src/style/theme/chronograf-theme.scss | 1 + ui/src/style/theme/dropdowns.scss | 476 +++++++++++++++++++++++ 2 files changed, 477 insertions(+) create mode 100644 ui/src/style/theme/dropdowns.scss diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss index 86cc26743..748c1654a 100644 --- a/ui/src/style/theme/chronograf-theme.scss +++ b/ui/src/style/theme/chronograf-theme.scss @@ -8,3 +8,4 @@ @import 'theme/reset'; @import 'theme/typography'; @import 'theme/buttons'; +@import 'theme/dropdowns'; diff --git a/ui/src/style/theme/dropdowns.scss b/ui/src/style/theme/dropdowns.scss new file mode 100644 index 000000000..3821822b0 --- /dev/null +++ b/ui/src/style/theme/dropdowns.scss @@ -0,0 +1,476 @@ +/* + Dropdowns + ----------------------------------------------------------------------------- +*/ + +// Default Theme Colors +$dropdown-default-bg: $c-pool; +$dropdown-default-dark: $c-ocean; +$dropdown-default-press: $c-sapphire; +$dropdown-default-hover: $c-laser; +$dropdown-default-text: $c-yeti; +$dropdown-default-text-hover: $g20-white; +$dropdown-default-header: $c-sapphire; + +// Green Theme Colors +$dropdown-green-bg: $c-pool; +$dropdown-green-dark: $c-viridian; +$dropdown-green-press: $c-emerald; +$dropdown-green-hover: $c-honeydew; +$dropdown-green-text: $c-mint; +$dropdown-green-text-hover: $g20-white; +$dropdown-green-header: $c-wasabi; + +// Purple Theme Colors +$dropdown-purple-bg: $c-pool; +$dropdown-purple-dark: $c-star; +$dropdown-purple-press: $c-amethyst; +$dropdown-purple-hover: $c-comet; +$dropdown-purple-text: $c-twilight; +$dropdown-purple-text-hover: $g20-white; +$dropdown-purple-header: $c-potassium; + +.dropdown { + display: inline-block; + position: relative; + width: auto; + + // Default Size + .dropdown-toggle { + width: 120px; + } + // Size Modifiers + &-80 .dropdown-toggle {width: 80px;} + &-90 .dropdown-toggle {width: 90px;} + &-100 .dropdown-toggle {width: 100px;} + &-110 .dropdown-toggle {width: 110px;} + &-120 .dropdown-toggle {width: 120px;} + &-130 .dropdown-toggle {width: 130px;} + &-140 .dropdown-toggle {width: 140px;} + &-150 .dropdown-toggle {width: 150px;} + &-160 .dropdown-toggle {width: 160px;} + &-170 .dropdown-toggle {width: 170px;} + &-180 .dropdown-toggle {width: 180px;} + &-190 .dropdown-toggle {width: 190px;} + &-200 .dropdown-toggle {width: 200px;} + &-210 .dropdown-toggle {width: 210px;} + &-220 .dropdown-toggle {width: 220px;} + &-230 .dropdown-toggle {width: 230px;} + &-240 .dropdown-toggle {width: 240px;} + &-250 .dropdown-toggle {width: 250px;} + &-260 .dropdown-toggle {width: 260px;} + &-270 .dropdown-toggle {width: 270px;} + &-280 .dropdown-toggle {width: 280px;} + &-290 .dropdown-toggle {width: 290px;} + &-300 .dropdown-toggle {width: 300px;} + &-310 .dropdown-toggle {width: 310px;} + &-320 .dropdown-toggle {width: 320px;} + &-330 .dropdown-toggle {width: 330px;} + &-340 .dropdown-toggle {width: 340px;} +} + +.dropdown:focus, +.dropdown.open, +.dropdown.open:focus { + outline: none; + + > .btn.dropdown-toggle, + > .btn.dropdown-toggle:hover, + > .btn.dropdown-toggle:hover:active, + > .btn.dropdown-toggle.active, + > .btn.dropdown-toggle.active:active, + > .btn.dropdown-toggle.active:active:hover { + box-shadow: 0 0 5px 3px $c-pool; + } +} + +// Positioning rules for elements inside a Dropdown Toggle +.dropdown-toggle { + position: relative; + text-align: left; + display: flex; + align-items: center; + + .caret { + position: absolute; + top: calc(50% + 1px); + right: $form-md-padding; + transform: translateY(-50%); + } + > .icon { + display: inline-block; + vertical-align: middle; + margin-right: 6px; + } + .dropdown-selected { + display: inline-block; + flex: 1 0 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: $form-md-padding; + } + + // Size Modifiers + &.btn-xs { + .caret {right: $form-xs-padding;} + .dropdown-selected {padding-right: $form-xs-padding;} + } + &.btn-sm { + .caret {right: $form-sm-padding;} + .dropdown-selected {padding-right: $form-sm-padding;} + } + &.btn-md { + .caret {right: $form-md-padding;} + .dropdown-selected {padding-right: $form-md-padding;} + } + &.btn-lg { + .caret {right: $form-lg-padding;} + .dropdown-selected {padding-right: $form-lg-padding;} + } +} + +/* + AutoComplete Field + ---------------------------------------------- +*/ +.dropdown-autocomplete { + position: relative; + padding: 0 !important; + + &.btn-xs {height: $form-xs-height;} + &.btn-sm {height: $form-sm-height;} + &.btn-md {height: $form-md-height;} + &.btn-lg {height: $form-lg-height;} +} +.dropdown-autocomplete--input { + position: absolute; + width: 100%; + height: 100%; + outline: none; + background-color: transparent; + border: 0; + color: $g20-white; + padding: 0; + font-weight: 500; + + .btn-xs & {padding: 0 ($form-xs-padding * 2) 0 $form-xs-padding; font-size: $form-xs-font;} + .btn-sm & {padding: 0 ($form-sm-padding * 2) 0 $form-sm-padding; font-size: $form-sm-font;} + .btn-md & {padding: 0 ($form-md-padding * 2) 0 $form-md-padding; font-size: $form-md-font;} + .btn-lg & {padding: 0 ($form-lg-padding * 2) 0 $form-lg-padding; font-size: $form-lg-font;} + + &::-webkit-input-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; } + &::-moz-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; } + &:-ms-input-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; } + &:-moz-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; } + + &:focus { + color: $g20-white; + } +} +.dropdown-empty { + padding: 7px 9px; + font-size: 13px; + line-height: 13px; + color: rgba(255,255,255,0.4); + font-weight: 500; + @extend %no-user-select; +} + +/* + Dropdown Menu + ---------------------------------------------- +*/ +.dropdown .dropdown-menu { + min-width: 100%; + box-shadow: 0 2px 5px 0.6px fadeout($g0-obsidian, 80%); + padding: 0; + margin-top: 0; + border: 0; + @include gradient-h($dropdown-default-dark,$dropdown-default-bg); + overflow: hidden; +} +// Dropdown Menu Item +.dropdown-menu li.dropdown-item { + position: relative; + width: 100%; + margin: 0; + padding: 0; + @extend %no-user-select; + + &:hover, + &.highlight, + &.highlight:hover { + @include gradient-h($dropdown-default-hover,$dropdown-default-bg); + } + > a { + font-size: 13px; + line-height: 13px; + transition: color 0.25s ease; + color: $dropdown-default-text; + font-weight: 500; + padding: 7px 9px; + outline: none; + overflow: hidden; + text-overflow: ellipsis; + + &, &:hover, &:focus { + background: none; + background-color: transparent; + } + &:hover { + color: $dropdown-default-text-hover; + } + &.active, + &.active:hover, + &:active, + &:active:hover, + &:focus:active, + &:focus:active:hover { + @include gradient-h($dropdown-default-press,$dropdown-default-bg); + color: $dropdown-default-text-hover; + } + } + &.active { + @include gradient-h($dropdown-default-press,$dropdown-default-bg); + color: $dropdown-default-text-hover; + } +} +// Dropown Menu Sub-Item +.dropdown-menu .dropdown-sub-item { + display: inline-block; + font-size: 12px; + line-height: 12px; + opacity: 0.66; + margin-top: 4px; + white-space: pre-wrap; + + &.dropdown-sub-item--success { + opacity: 1; + color: $c-krypton; + } + span.icon { + margin-right: 3px; + } +} +// Dropdown Item Actions +.dropdown .dropdown-menu .dropdown-actions { + position: absolute; + top: 50%; + right: 4px; + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: flex-end; + z-index: 2; + opacity: 0; +} +.dropdown .dropdown-menu li.dropdown-item:hover .dropdown-actions { + opacity: 1; +} +.dropdown .dropdown-menu .dropdown-action { + width: 20px; + height: 27px; + border: 0; + background-color: transparent; + outline: none; + color: $dropdown-default-header; + transition: color 0.25s ease; + text-align: center; + padding: 0; + margin: 0; + line-height: 27px; + + &:hover { + cursor: pointer; + color: $dropdown-default-text-hover; + } +} +// Dropdown Menu Header +.dropdown .dropdown-menu li.dropdown-header { + font-size: 13px; + line-height: 13px; + background-color: $dropdown-default-bg; + color: $dropdown-default-header; + font-weight: 600; + padding: 7px 9px; + margin: 0; + @extend %no-user-select; +} +// Dropdown Menu Divider +.dropdown .dropdown-menu li.dropdown-divider { + width: 100%; + margin: 0; + background-color: $dropdown-default-bg; + height: $ix-border; +} +/* + Dropdown Menu (only js highlighting, works with autocomplete feature) + ---------------------------------------------- +*/ +.dropdown .dropdown-menu.dropdown-menu--no-highlight { + li.dropdown-item:hover { + background: none; + background-color: transparent; + } + li.dropdown-item.highlight, + li.dropdown-item.highlight:hover { + @include gradient-h($dropdown-default-hover,$dropdown-default-bg); + } +} + +/* + Multi-Select Dropdowns + ---------------------------------------------- +*/ +.multi-select--item, +.multi-select--apply { + @extend %no-user-select; + padding: 7px 9px; + margin: 0; +} +.multi-select--checkbox { + width: 14px; + height: 14px; + border-radius: 3px; + margin-right: 7px; + background-color: $c-sapphire; + position: relative; + + &:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%) scale(2,2); + width: 6px; + height: 6px; + border-radius: 50%; + background-color: $g20-white; + opacity: 0; + transition: + transform 0.25s ease, + opacity 0.25s ease; + } +} +.multi-select--item { + color: $c-neutrino; + font-size: 13px; + line-height: 13px; + transition: + color 0.25s ease; + font-weight: 600; + display: flex; + align-items: center; + + > span { + width: calc(100% - 21px); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &:hover { + @include gradient-h($c-laser,$c-pool); + color: $g20-white; + cursor: pointer;; + } + &.checked { + color: $g20-white; + + .multi-select--checkbox:after { + opacity: 1; + transform: translate(-50%,-50%) scale(1,1); + } + } +} +.multi-select--apply { + .btn { + width: 100%; + } +} + + +/* + Kapacitor Theme Dropdowns +*/ +.dropdown .dropdown-menu.dropdown-malachite { + @include gradient-h($dropdown-green-dark,$dropdown-green-bg); + li.dropdown-item { + &:hover, + &.highlight, + &.highlight:hover {@include gradient-h($dropdown-green-hover,$dropdown-green-bg);} + > a { + color: $dropdown-green-text; + + &:hover { + color: $dropdown-green-text-hover; + } + &.active, + &.active:hover, + &:active, + &:active:hover, + &:focus:active, + &:focus:active:hover { + @include gradient-h($dropdown-green-press,$dropdown-green-bg); + color: $dropdown-green-text-hover; + } + } + .dropdown-action {color: $c-sapphire;} + .dropdown-action:hover {color: $dropdown-green-text-hover;} + &.active {@include gradient-h($dropdown-green-press,$dropdown-green-bg);} + } + li.dropdown-divider {@include gradient-h($dropdown-green-press,$c-ocean)} + li.dropdown-header { + @include gradient-h($dropdown-green-press,$c-ocean); + color: $dropdown-green-header; + } + &.dropdown-menu--no-highlight { + li.dropdown-item.highlight, + li.dropdown-item.highlight:hover { + @include gradient-h($dropdown-green-hover,$dropdown-green-bg); + } + } +} + +/* + Purple Theme Dropdowns +*/ +.dropdown .dropdown-menu.dropdown-astronaut { + @include gradient-h($dropdown-purple-dark,$dropdown-purple-bg); + li.dropdown-item { + &:hover, + &.highlight, + &.highlight:hover {@include gradient-h($dropdown-purple-hover,$dropdown-purple-bg);} + > a { + color: $dropdown-purple-text; + + &:hover { + color: $dropdown-purple-text-hover; + } + &.active, + &.active:hover, + &:active, + &:active:hover, + &:focus:active, + &:focus:active:hover { + @include gradient-h($dropdown-purple-press,$dropdown-purple-bg); + color: $dropdown-purple-text-hover; + } + } + &.active {@include gradient-h($dropdown-purple-press,$dropdown-purple-bg);} + .dropdown-action {color: $dropdown-purple-press;} + .dropdown-action:hover {color: $dropdown-purple-text-hover;} + } + li.dropdown-divider {@include gradient-h($dropdown-purple-press,$c-ocean);} + li.dropdown-header { + @include gradient-h($dropdown-purple-press,$c-ocean); + color: $dropdown-purple-header; + } + &.dropdown-menu--no-highlight { + li.dropdown-item.highlight, + li.dropdown-item.highlight:hover { + @include gradient-h($dropdown-purple-hover,$dropdown-purple-bg); + } + } +} From 0b9a5cf1172b8934118af97703d407c809ba5e03 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 18:17:20 -0800 Subject: [PATCH 021/431] Center container --- ui/src/style/layout/page.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/style/layout/page.scss b/ui/src/style/layout/page.scss index 1e88c5163..85e6ea910 100644 --- a/ui/src/style/layout/page.scss +++ b/ui/src/style/layout/page.scss @@ -34,6 +34,7 @@ align-items: stretch; } .container-fluid { + margin: 0 auto; padding: ($chronograf-page-header-height / 2) $page-wrapper-padding; max-width: $page-wrapper-max-width; From c148fd3d1a42a141aea434ed03f7e4ba298ef01e Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 18:18:38 -0800 Subject: [PATCH 022/431] Fix some problems with buttons --- ui/src/style/modules/variables.scss | 11 +++++------ ui/src/style/theme/buttons.scss | 4 ++++ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/ui/src/style/modules/variables.scss b/ui/src/style/modules/variables.scss index 76985d2bc..eb308125e 100644 --- a/ui/src/style/modules/variables.scss +++ b/ui/src/style/modules/variables.scss @@ -3,8 +3,8 @@ ----------------------------------------------------------------------------- */ -$radius: 4px; -$radius-small: 3px; +$radius: 4px; +$radius-small: 3px; $page-wrapper-padding: 60px; $page-wrapper-max-width: 1300px; $chronograf-page-header-height: 60px; @@ -36,12 +36,11 @@ $ix-text-light: $g13-mist; $ix-text-lighter: $g13-mist; $ix-text-lightest: $g15-platinum; -$ix-text-font: 'Roboto',Helvetica,Arial,Tahoma, Verdana, sans-serif; +$ix-text-font: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif; $ix-text-selection-bg: $c-pool; $ix-text-selection-color: $g20-white; $ix-text-scale: 1.19; $ix-icon-font: 'icomoon'; -$code-font: "Roboto Mono",monospace; $ix-text-tiny: 12.5px; $ix-text-base: 14.5px; @@ -65,11 +64,11 @@ $ix-app-wrapper-z: 3; $form-xs-height: 22px; $form-xs-padding: 7px; -$form-xs-font: 12px; +$form-xs-font: 13px; $form-sm-height: 30px; $form-sm-padding: 11px; -$form-sm-font: 13px; +$form-sm-font: 14px; $form-md-height: 38px; $form-md-padding: 14px; diff --git a/ui/src/style/theme/buttons.scss b/ui/src/style/theme/buttons.scss index 723352666..a7ecb5183 100644 --- a/ui/src/style/theme/buttons.scss +++ b/ui/src/style/theme/buttons.scss @@ -8,9 +8,12 @@ a.btn, div.btn, button.btn, input.btn { + display: block; text-decoration: none; + text-align: center; box-shadow: none; font-weight: 700; + font-family: $ix-text-font; border-style: solid; margin: 0; position: relative; @@ -26,6 +29,7 @@ input.btn { height: $form-md-height; line-height: $form-md-height; font-size: $form-md-font; + @extend %no-user-select; // Icons > .icon { From 9d6baa55c7530051de57e39aed5cad07109584ca Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 18:28:48 -0800 Subject: [PATCH 023/431] Fix some problems with dropdowns --- ui/src/style/theme/dropdowns.scss | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/ui/src/style/theme/dropdowns.scss b/ui/src/style/theme/dropdowns.scss index 3821822b0..a7c846359 100644 --- a/ui/src/style/theme/dropdowns.scss +++ b/ui/src/style/theme/dropdowns.scss @@ -85,7 +85,7 @@ $dropdown-purple-header: $c-potassium; } // Positioning rules for elements inside a Dropdown Toggle -.dropdown-toggle { +.dropdown > .dropdown-toggle { position: relative; text-align: left; display: flex; @@ -132,7 +132,7 @@ $dropdown-purple-header: $c-potassium; /* AutoComplete Field - ---------------------------------------------- + ---------------------------------------------------------------------------- */ .dropdown-autocomplete { position: relative; @@ -179,16 +179,26 @@ $dropdown-purple-header: $c-potassium; /* Dropdown Menu - ---------------------------------------------- + ---------------------------------------------------------------------------- */ .dropdown .dropdown-menu { min-width: 100%; - box-shadow: 0 2px 5px 0.6px fadeout($g0-obsidian, 80%); + box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8); + border-radius: 4px; padding: 0; - margin-top: 0; + margin: 0; border: 0; @include gradient-h($dropdown-default-dark,$dropdown-default-bg); overflow: hidden; + display: none; + position: absolute; + top: 100%; +} +.dropdown.open { + z-index: 9999; +} +.dropdown.open .dropdown-menu { + display: block; } // Dropdown Menu Item .dropdown-menu li.dropdown-item { @@ -306,7 +316,7 @@ $dropdown-purple-header: $c-potassium; } /* Dropdown Menu (only js highlighting, works with autocomplete feature) - ---------------------------------------------- + ---------------------------------------------------------------------------- */ .dropdown .dropdown-menu.dropdown-menu--no-highlight { li.dropdown-item:hover { @@ -321,7 +331,7 @@ $dropdown-purple-header: $c-potassium; /* Multi-Select Dropdowns - ---------------------------------------------- + ---------------------------------------------------------------------------- */ .multi-select--item, .multi-select--apply { From 3a0a3528ca6b11ec725b7591ae96ef970eaab7b5 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 18:32:02 -0800 Subject: [PATCH 024/431] Add more icon margin in buttons --- ui/src/style/theme/buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/style/theme/buttons.scss b/ui/src/style/theme/buttons.scss index a7ecb5183..ef0aa30a3 100644 --- a/ui/src/style/theme/buttons.scss +++ b/ui/src/style/theme/buttons.scss @@ -72,7 +72,7 @@ input.btn { > .icon { font-size: 1.125em; top: 0px; - margin-right: 4px; + margin-right: 6px; } &.btn-square { width: $form-sm-height; From 512a1036318655180cc5c594ed2dd7603ff22efc Mon Sep 17 00:00:00 2001 From: Luke Morris Date: Tue, 27 Feb 2018 19:30:43 -0800 Subject: [PATCH 025/431] Duplicate entries --- CHANGELOG.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dd2369255..fa963898b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,8 +11,6 @@ 1. [#2821](https://github.com/influxdata/chronograf/pull/2821): Save only selected template variable values into dashboards for non csv template variables 1. [#2842](https://github.com/influxdata/chronograf/pull/2842): Use Generic APIKey for Oauth2 group lookup 1. [#2850](https://github.com/influxdata/chronograf/pull/2850): Fix bug in which resizing any cell in a dashboard causes a Gauge cell to resize -1. [#2851] (https://github.com/influxdata/chronograf/pull/2851): Maintain y axis labels in dashboard cells -1. [#2819] (https://github.com/influxdata/chronograf/pull/2819): Deprecate --new-sources in CLI 1. [#2886](https://github.com/influxdata/chronograf/pull/2886): Don't sort Single Stat & Gauge thresholds when editing threshold values 1. [#2851](https://github.com/influxdata/chronograf/pull/2851): Maintain y axis labels in dashboard cells 1. [#2819](https://github.com/influxdata/chronograf/pull/2819): Deprecate --new-sources in CLI From 27cabfc08ccb5e0c9338d1589eed442e2319f057 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 19:39:12 -0800 Subject: [PATCH 026/431] Introduce tables from bootstrap theme --- ui/src/style/chronograf.scss | 1 + ui/src/style/modules/helpers.scss | 15 ++++ ui/src/style/theme/buttons.scss | 5 +- ui/src/style/theme/chronograf-theme.scss | 1 + ui/src/style/theme/tables.scss | 98 ++++++++++++++++++++++++ 5 files changed, 118 insertions(+), 2 deletions(-) create mode 100644 ui/src/style/modules/helpers.scss create mode 100644 ui/src/style/theme/tables.scss diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index 50c50c5d1..2cd05f511 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -7,6 +7,7 @@ @import 'modules/influx-colors'; @import 'modules/variables'; @import 'modules/mixins'; +@import 'modules/helpers'; // Fonts @import 'fonts/fonts'; diff --git a/ui/src/style/modules/helpers.scss b/ui/src/style/modules/helpers.scss new file mode 100644 index 000000000..33bea412a --- /dev/null +++ b/ui/src/style/modules/helpers.scss @@ -0,0 +1,15 @@ +/* + Helpers + ----------------------------------------------------------------------------- + So handy, much dandy +*/ + +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} diff --git a/ui/src/style/theme/buttons.scss b/ui/src/style/theme/buttons.scss index ef0aa30a3..df3b6d776 100644 --- a/ui/src/style/theme/buttons.scss +++ b/ui/src/style/theme/buttons.scss @@ -4,8 +4,6 @@ */ .btn, -a.btn, -div.btn, button.btn, input.btn { display: block; @@ -107,6 +105,9 @@ input.btn { } } } +a.btn { + display: inline-block; +} // Button Size Modifiers .btn-group-xs > .btn, .btn.btn-xs { diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss index 748c1654a..fa21dccbd 100644 --- a/ui/src/style/theme/chronograf-theme.scss +++ b/ui/src/style/theme/chronograf-theme.scss @@ -8,4 +8,5 @@ @import 'theme/reset'; @import 'theme/typography'; @import 'theme/buttons'; +@import 'theme/tables'; @import 'theme/dropdowns'; diff --git a/ui/src/style/theme/tables.scss b/ui/src/style/theme/tables.scss new file mode 100644 index 000000000..a620d6678 --- /dev/null +++ b/ui/src/style/theme/tables.scss @@ -0,0 +1,98 @@ +/* + Tables + ----------------------------------------------------------------------------- +*/ + +$table--border-color: $g5-pepper; +$table--highlight-color: $g4-onyx; + +.table { + width: 100%; + max-width: 100%; + border-spacing: 0; + border-collapse: collapse; + margin: 0; + + th, td { + font-size: 13px; + text-align: left; + + &.monotype { + font-family: $code-font; + letter-spacing: 0px; + } + + &.text-left {text-align: left;} + &.text-center {text-align: center;} + &.text-right {text-align: right;} + } + + // Header + > thead > tr > th, + > thead > tr > td, { + color: $g17-whisper; + font-weight: 600; + padding: 8px; + @extend %no-user-select; + border: 0px; + border-bottom: $ix-border solid $table--border-color; + } + + // Body + > tbody > tr > td, { + text-align: left; + color: $g13-mist; + font-weight: 500; + padding: 4px 8px; + border: 0px; + } +} + +.table.v-center { + td, + td > * { + vertical-align: middle; + } +} + +.table.table-bordered { + border: $ix-border solid $table--border-color; + + > thead, + > tbody { + > tr { + > th, + > td { + border: $ix-border solid $table--border-color; + } + } + } +} + +.table.table-striped { + > tbody > tr { + &:nth-child(odd) {background-color: $table--highlight-color;} + &:nth-child(even) {background-color: transparent;} + } +} + +.table.table-highlight > tbody > tr:hover {background-color: $table--highlight-color;} + +.table > tbody > tr .table--show-on-row-hover {visibility: hidden;} +.table > tbody > tr:hover .table--show-on-row-hover {visibility: visible;} + + +// For use in a Status column +.table-dot { + display: inline-block; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: $g17-whisper; + + &.dot-success {background-color: $c-rainforest;} + &.dot-primary {background-color: $c-pool;} + &.dot-warning {background-color: $c-pineapple;} + &.dot-danger {background-color: $c-dreamsicle;} + &.dot-critical {background-color: $c-fire;} +} From 548410e23c19264d9d4af7e6bbe36f90dcddc807 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 19:54:48 -0800 Subject: [PATCH 027/431] Introduce form elements --- ui/src/style/theme/chronograf-theme.scss | 11 +- ui/src/style/theme/form-elements.scss | 512 +++++++++++++++++++++++ 2 files changed, 518 insertions(+), 5 deletions(-) create mode 100644 ui/src/style/theme/form-elements.scss diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss index fa21dccbd..2d6d9719f 100644 --- a/ui/src/style/theme/chronograf-theme.scss +++ b/ui/src/style/theme/chronograf-theme.scss @@ -5,8 +5,9 @@ a component basis */ -@import 'theme/reset'; -@import 'theme/typography'; -@import 'theme/buttons'; -@import 'theme/tables'; -@import 'theme/dropdowns'; +@import 'reset'; +@import 'typography'; +@import 'buttons'; +@import 'tables'; +@import 'dropdowns'; +@import 'form-elements'; diff --git a/ui/src/style/theme/form-elements.scss b/ui/src/style/theme/form-elements.scss new file mode 100644 index 000000000..c3834def1 --- /dev/null +++ b/ui/src/style/theme/form-elements.scss @@ -0,0 +1,512 @@ +/* + Form Elements + ----------------------------------------------------------------------------- +*/ + +.form-control { + border: 2px solid $g5-pepper; + border-radius: $radius; + color: $g15-platinum; + background-color: $g2-kevlar; + font-weight: 500; + box-shadow: none; + outline: none; + transition: + color 0.25s ease, + background-color 0.25s ease, + border-color 0.4s ease, + box-shadow 0.4s ease; + + &:hover { + border-color: $g6-smoke; + } + &:focus { + border-color: $c-pool; + color: $g20-white; + box-shadow: 0 0 6px 0 $c-pool; + background-color: $g2-kevlar; + } + + // Disabled State + &[disabled], + &[readonly], + fieldset[disabled] &, + &.disabled { + &, &:hover { + border-color: $g5-pepper; + background-color: $g3-castle !important; + color: $g9-mountain !important; + @extend %no-user-select; + } + } + + .has-error &, + .has-success &, + .has-warning & { + box-shadow: none; + transition: + color 0.25s ease, + background-color 0.25s ease, + border-color 0.4s ease, + box-shadow 0.4s ease; + + &:focus { + background-color: $g2-kevlar; + } + } + + // Success State + .has-success & { + border-color: $c-rainforest; + &:focus { + border-color: $c-honeydew; + box-shadow: 0 0 8px $c-rainforest; + } + &::selection {background-color: $c-rainforest;} + &::-moz-selection {background-color: $c-rainforest;} + } + + // Error State + .has-error & { + background-color: $g2-kevlar; + border-color: $c-curacao; + &:focus { + background-color: $c-basalt; + border-color: $c-dreamsicle; + box-shadow: 0 0 8px $c-fire; + } + &::selection {background-color: $c-dreamsicle;} + &::-moz-selection {background-color: $c-dreamsicle;} + } + + // Warning State + .has-warning & { + border-color: $c-star; + &:focus { + border-color: $c-comet; + box-shadow: 0 0 8px $c-star; + } + &::selection {background-color: $c-comet;} + &::-moz-selection {background-color: $c-comet;} + } +} + +// Placeholder Text +// ---------------------------------------------------------------------------- +.form-control, +textarea, +input { + &::-webkit-input-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;} + &::-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;} + &:-ms-input-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;} + &:-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;} +} + +// Size Modifiers +// ---------------------------------------------------------------------------- +input.form-control { + &.input-xs { + height: $form-xs-height; + padding: 0 $form-xs-padding; + font-size: $form-xs-font; + } + &.input-sm { + height: $form-sm-height; + padding: 0 $form-sm-padding; + font-size: $form-sm-font; + } + &, &.input-md { + height: $form-md-height; + padding: 0 $form-md-padding; + font-size: $form-md-font; + } + &.input-lg { + height: $form-lg-height; + padding: 0 $form-lg-padding; + font-size: $form-lg-font; + } +} + +// Static Elements +// ---------------------------------------------------------------------------- +.form-control-static { + min-height: $form-md-height; + padding: ($ix-marg-b - 1px) ($ix-marg-b + 1px); + border: $ix-border solid $g5-pepper; + border-radius: 4px; + display: flex; + align-items: center; + flex-wrap: wrap; + + label { + font-size: 14px; + margin: 0; + @extend %no-user-select; + } +} + + +.panel form { + margin-left: -9px; + margin-right: -9px; + width: calc(100% + 18px); + display: inline-block; + + .alert { + margin-bottom: 0px; + } + &.form-inline { + padding-top: 0; + margin-left: 0; + margin-right: 0; + width: 100%; + } + &.form-horizontal { + margin-left: 0; + margin-right: 0; + width: 100%; + } +} +.panel-body:first-child > form { + padding-top: 15px; +} + +// Form Add-Ons +// ---------------------------------------------------------------------------- +.input-group-addon { + border: 2px solid $g5-pepper; + background-color: $g4-onyx; + color: $g10-wolf; + font-weight: 600; + padding-left: 13px; + padding-right: 13px; + @extend %no-user-select; + + // Error State + .has-error & { + background-color: $g4-onyx; + color: $c-dreamsicle; + border-color: $c-curacao; + } + + // Success State + .has-success & { + background-color: $g4-onyx; + color: $c-rainforest; + border-color: $c-rainforest; + } + + // Warning State + .has-warning & { + background-color: $g4-onyx; + color: $c-comet; + border-color: $c-star; + } +} + +// Form Groups +// ---------------------------------------------------------------------------- +.form-group { + margin-bottom: 8px; +} +.form-group > label { + font-size: 12px; + font-weight: 600; + color: $g11-sidewalk; + margin: 0 0 4px 0; + padding: 0 ($form-sm-padding + $ix-border); + @extend %no-user-select; +} +label.form-helper { + font-style: italic; + line-height: 16px; + @extend %no-user-select; +} + +// Checkboxes +// ---------------------------------------------------------------------------- +$form-control-checkbox: 16px; +$form-control-checkdot: 6px; +$form-control-checkbox-gap: 24px; + +.form-control-static { + input[type="checkbox"] { + position: relative; + left: -9999px; + visibility: hidden; + width: 0; + height: 0; + margin: 0; + } + input[type="checkbox"] + label { + transition: color 0.25s ease; + padding-left: $form-control-checkbox-gap; + position: relative; + color: $g11-sidewalk; + + // Checkbox + &:before { + content: ''; + display: block; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: $form-control-checkbox; + height: $form-control-checkbox; + border-radius: 3px; + border: $ix-border solid $g5-pepper; + background-color: $g2-kevlar; + transition: border-color 0.25s ease; + } + // Check Dot + &:after { + content: ''; + display: block; + position: absolute; + top: 50%; + left: ($form-control-checkbox / 2); + transform: translate(-50%,-50%) scale(2,2); + width: $form-control-checkdot; + height: $form-control-checkdot; + background-color: $c-pool; + border-radius: 50%; + transition: + transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), + opacity 0.25s ease; + opacity: 0; + } + // Hover State + &:hover { + color: $g18-cloud; + cursor: pointer; + + &:before {border-color: $g6-smoke;} + } + } + // Animate checked state + input[type="checkbox"]:checked + label { + color: $g18-cloud; + } + input[type="checkbox"]:checked + label:after { + opacity: 1; + transform: translate(-50%,-50%) scale(1,1); + } +} + +// Radio Buttons +// ---------------------------------------------------------------------------- +.form-control-static { + > .radio-item { + width: 100%; + } + input[type="radio"] { + position: relative; + left: -9999px; + visibility: hidden; + width: 0; + height: 0; + margin: 0; + } + input[type="radio"] + label { + transition: color 0.25s ease; + padding-left: $form-control-checkbox-gap; + position: relative; + color: $g11-sidewalk; + + // Radio Circle + &:before { + content: ''; + display: block; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: $form-control-checkbox; + height: $form-control-checkbox; + border-radius: 50%; + border: $ix-border solid $g5-pepper; + background-color: $g2-kevlar; + transition: border-color 0.25s ease; + } + // Radio Dot + &:after { + content: ''; + display: block; + position: absolute; + top: 50%; + left: ($form-control-checkbox / 2); + transform: translate(-50%,-50%) scale(2,2); + width: $form-control-checkdot; + height: $form-control-checkdot; + background-color: $c-pool; + border-radius: 50%; + transition: + transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), + opacity 0.25s ease; + opacity: 0; + } + // Hover State + &:hover { + color: $g18-cloud; + cursor: pointer; + + &:before {border-color: $g6-smoke;} + } + } + // Animate checked state + input[type="radio"]:checked + label { + color: $g18-cloud; + } + input[type="radio"]:checked + label:after { + opacity: 1; + transform: translate(-50%,-50%) scale(1,1); + } +} + + +// Themed Text Inputs +// ---------------------------------------------------------------------------- +input.form-control, +textarea.form-control { + // Blue + &.form-plutonium { + color: $c-pool; + &:focus {color: $g20-white;} + } + // Green + &.form-malachite { + color: $c-rainforest; + &:focus { + border-color: $c-rainforest; + color: $g20-white; + box-shadow: 0 0 8px $c-rainforest; + } + &::selection {background-color: $c-rainforest;} + &::-moz-selection {background-color: $c-rainforest;} + } + // Purple + &.form-astronaut { + color: $c-comet; + &:focus { + border-color: $c-star; + color: $g20-white; + box-shadow: 0 0 8px $c-star; + } + &::selection {background-color: $c-comet;} + &::-moz-selection {background-color: $c-comet;} + } + // Red + &.form-volcano { + color: $c-dreamsicle; + &:focus { + background-color: $c-basalt; + border-color: $c-dreamsicle; + color: $c-flan; + box-shadow: 0 0 8px $c-curacao; + } + &::selection {background-color: $c-curacao;} + &::-moz-selection {background-color: $c-curacao;} + } +} + + +// Monospace Inputs +// ---------------------------------------------------------------------------- +.form-control.monotype { + font-family: $code-font; +} + +// Generic Checkboxes +// ---------------------------------------------------------------------------- +.dark-checkbox { + input { + position: absolute; + left: -9999px; + visibility: hidden; + } + label { + display: inline-block; + width: 16px; + height: 16px; + background-color: $g1-raven; + border-radius: 3px; + position: relative; + vertical-align: middle; + margin: 0; + transition: background-color 0.25s ease; + } + label:hover { + cursor: pointer; + background-color: $g2-kevlar; + } + label:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 6px; + height: 6px; + background-color: $c-pool; + border-radius: 50%; + transform: translate(-50%,-50%) scale(2,2); + opacity: 0; + z-index: 3; + transition: + opacity 0.25s ease, + transform 0.25s ease; + } + input:checked + label:after { + opacity: 1; + transform: translate(-50%,-50%) scale(1,1); + } +} + +// Generic Radio Inputs +// ---------------------------------------------------------------------------- +.dark-radio { + input { + position: absolute; + left: -9999px; + visibility: hidden; + } + label { + display: inline-block; + width: 16px; + height: 16px; + background-color: $g1-raven; + border-radius: 50%; + position: relative; + vertical-align: middle; + margin: 0; + transition: background-color 0.25s ease; + } + label:hover { + cursor: pointer; + background-color: $g2-kevlar; + } + label:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 6px; + height: 6px; + background-color: $c-pool; + border-radius: 50%; + transform: translate(-50%,-50%) scale(2,2); + opacity: 0; + z-index: 3; + transition: + opacity 0.25s ease, + transform 0.25s ease; + } + input:checked + label:after { + opacity: 1; + transform: translate(-50%,-50%) scale(1,1); + } +} + +.form-group-submit { + margin-top: 30px; +} From 1d315acae8bd2e82643d29703269d0f7bb3f74b2 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 19:58:08 -0800 Subject: [PATCH 028/431] Introduce Alerts from bootstrap theme --- ui/src/style/theme/alerts.scss | 97 ++++++++++++++++++++++++ ui/src/style/theme/chronograf-theme.scss | 1 + 2 files changed, 98 insertions(+) create mode 100644 ui/src/style/theme/alerts.scss diff --git a/ui/src/style/theme/alerts.scss b/ui/src/style/theme/alerts.scss new file mode 100644 index 000000000..14c6ace12 --- /dev/null +++ b/ui/src/style/theme/alerts.scss @@ -0,0 +1,97 @@ +/* + Alerts + ----------------------------------------------------------------------------- +*/ + +.alert { + border-style: solid; + border-width: 0; + border-radius: $ix-radius; + position: relative; + padding: $ix-marg-c; + font-weight: 500; + @extend %no-user-select; + + button.close { + outline: none; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: ($ix-marg-c - $ix-marg-a); + font-size: $ix-text-base; + width: 20px; + height: 20px; + opacity: 0.25; + transition: + opacity 0.25s ease; + + &:hover { + opacity: 1; + } + } + + &-icon { + padding-left: ($ix-marg-e - $ix-marg-b); + + span.icon:not(.remove) { + position: absolute; + top: 50%; + left: $ix-marg-c; + transform: translateY(-50%); + width: ($ix-text-base-2 + 4px); + margin: 0; + font-size: $ix-text-base-2; + } + } +} + +// Mixin for Alert Themes +// ---------------------------------------------------------------------------- +@mixin alert-styles( + $bg-color, + $bg-color-2, + $text-color, + $link-color, + $link-hover) { + font-size: 16px; + + @include gradient-h($bg-color,$bg-color-2); + color: $text-color; + + a:link, + a:visited { + color: $link-color; + font-weight: 700; + text-decoration: underline; + transition: + color 0.25s ease; + } + a:hover { + color: $link-hover; + border-color: $link-hover; + } + span.icon { + color: $text-color; + } +} + +// Alert Themes +// ---------------------------------------------------------------------------- +.alert-success { + @include alert-styles($c-rainforest,$c-pool,$g20-white,$c-wasabi,$g20-white); +} +.alert-primary { + @include alert-styles($c-pool,$c-ocean,$g20-white,$c-neutrino,$g20-white); +} +.alert-warning { + @include alert-styles($c-star,$c-pool,$g20-white,$c-neutrino,$g20-white); +} +.alert-danger { + @include alert-styles($c-curacao,$c-star,$g20-white,$c-marmelade,$g20-white); +} +.alert-info { + @include alert-styles($g20-white,$g16-pearl,$g8-storm,$ix-link-default,$ix-link-default-hover); +} +.alert-dark { + @include alert-styles($c-sapphire,$c-shadow,$c-moonstone,$ix-link-default,$ix-link-default-hover); +} diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss index 2d6d9719f..039b7dd8e 100644 --- a/ui/src/style/theme/chronograf-theme.scss +++ b/ui/src/style/theme/chronograf-theme.scss @@ -11,3 +11,4 @@ @import 'tables'; @import 'dropdowns'; @import 'form-elements'; +@import 'alerts'; From f1da923864a67932ee39e88dd8ea8b2d6a94b93a Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:01:13 -0800 Subject: [PATCH 029/431] Namespace lower level stylesheets in theme --- ui/src/style/theme/{alerts.scss => _alerts.scss} | 0 ui/src/style/theme/{buttons.scss => _buttons.scss} | 0 ui/src/style/theme/{dropdowns.scss => _dropdowns.scss} | 0 ui/src/style/theme/{form-elements.scss => _form-elements.scss} | 0 ui/src/style/theme/{reset.scss => _reset.scss} | 0 ui/src/style/theme/{tables.scss => _tables.scss} | 0 ui/src/style/theme/{typography.scss => _typography.scss} | 0 7 files changed, 0 insertions(+), 0 deletions(-) rename ui/src/style/theme/{alerts.scss => _alerts.scss} (100%) rename ui/src/style/theme/{buttons.scss => _buttons.scss} (100%) rename ui/src/style/theme/{dropdowns.scss => _dropdowns.scss} (100%) rename ui/src/style/theme/{form-elements.scss => _form-elements.scss} (100%) rename ui/src/style/theme/{reset.scss => _reset.scss} (100%) rename ui/src/style/theme/{tables.scss => _tables.scss} (100%) rename ui/src/style/theme/{typography.scss => _typography.scss} (100%) diff --git a/ui/src/style/theme/alerts.scss b/ui/src/style/theme/_alerts.scss similarity index 100% rename from ui/src/style/theme/alerts.scss rename to ui/src/style/theme/_alerts.scss diff --git a/ui/src/style/theme/buttons.scss b/ui/src/style/theme/_buttons.scss similarity index 100% rename from ui/src/style/theme/buttons.scss rename to ui/src/style/theme/_buttons.scss diff --git a/ui/src/style/theme/dropdowns.scss b/ui/src/style/theme/_dropdowns.scss similarity index 100% rename from ui/src/style/theme/dropdowns.scss rename to ui/src/style/theme/_dropdowns.scss diff --git a/ui/src/style/theme/form-elements.scss b/ui/src/style/theme/_form-elements.scss similarity index 100% rename from ui/src/style/theme/form-elements.scss rename to ui/src/style/theme/_form-elements.scss diff --git a/ui/src/style/theme/reset.scss b/ui/src/style/theme/_reset.scss similarity index 100% rename from ui/src/style/theme/reset.scss rename to ui/src/style/theme/_reset.scss diff --git a/ui/src/style/theme/tables.scss b/ui/src/style/theme/_tables.scss similarity index 100% rename from ui/src/style/theme/tables.scss rename to ui/src/style/theme/_tables.scss diff --git a/ui/src/style/theme/typography.scss b/ui/src/style/theme/_typography.scss similarity index 100% rename from ui/src/style/theme/typography.scss rename to ui/src/style/theme/_typography.scss From 8a8874abad91f9135883f1da4ed35a51fb2bd26b Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:02:28 -0800 Subject: [PATCH 030/431] Cleanup --- ui/src/style/layout/flash-messages.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/style/layout/flash-messages.scss b/ui/src/style/layout/flash-messages.scss index d9ac7c272..ec1fcf5f1 100644 --- a/ui/src/style/layout/flash-messages.scss +++ b/ui/src/style/layout/flash-messages.scss @@ -1,6 +1,6 @@ /* - Styles for Flash Messages - ---------------------------------------------- + Flash Messages + ---------------------------------------------------------------------------- */ .flash-messages { position: fixed; From c07fe6b0d80730841db27a8148a7a4b7eea851eb Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:21:57 -0800 Subject: [PATCH 031/431] Introduce panels from bootstrap theme --- ui/src/style/theme/_panels.scss | 78 ++++++++++++++++++++++++ ui/src/style/theme/chronograf-theme.scss | 1 + 2 files changed, 79 insertions(+) create mode 100644 ui/src/style/theme/_panels.scss diff --git a/ui/src/style/theme/_panels.scss b/ui/src/style/theme/_panels.scss new file mode 100644 index 000000000..e96eae280 --- /dev/null +++ b/ui/src/style/theme/_panels.scss @@ -0,0 +1,78 @@ +/* + Panels + ----------------------------------------------------------------------------- +*/ + +$panel-gutter: 30px; + + +.panel { + display: flex; + flex-direction: column; + align-items: stretch; +} + +.panel-heading { + display: flex; + align-items: center; + justify-content: space-between; + padding: $panel-gutter 0; +} + +.panel-title { + font-weight: 400; + font-size: 19px; + color: $g12-forge; + letter-spacing: 0.015em; + margin: 0; + line-height: 1em; + @extend %no-user-select; +} + +.panel-body { + background-color: $g3-castle; + padding: $panel-gutter; + + .panel-heading + & { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + &:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + + > *:first-child { + margin-top: 0; + } + > *:last-child { + margin-bottom: 0; + } +} + +.panel-footer { + padding: 14px $panel-gutter; + border-radius: 0 0 4px 4px; + @include gradient-v($g2-kevlar,$g3-castle); + color: $g9-mountain; +} + +// Tables directly inside Panels +// ---------------------------------------------------------------------------- +.panel > .table { + border-top: $ix-border; + * { + border-color: $g19-ghost; + } +} +.panel-heading + .table { + border: none; +} +.panel > .table td:first-child, +.panel > .table th:first-child { + padding-left: $panel-gutter; +} +.panel > .table td:last-child, +.panel > .table th:last-child { + padding-right: $panel-gutter; +} diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss index 039b7dd8e..cde214ebc 100644 --- a/ui/src/style/theme/chronograf-theme.scss +++ b/ui/src/style/theme/chronograf-theme.scss @@ -12,3 +12,4 @@ @import 'dropdowns'; @import 'form-elements'; @import 'alerts'; +@import 'panels'; From 80e356b112f507278cbc255b58d988422de0fc38 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:23:17 -0800 Subject: [PATCH 032/431] Ensure panel body has rounded top corners when no panel heading present --- ui/src/style/theme/_panels.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/src/style/theme/_panels.scss b/ui/src/style/theme/_panels.scss index e96eae280..f1d0cbd67 100644 --- a/ui/src/style/theme/_panels.scss +++ b/ui/src/style/theme/_panels.scss @@ -33,7 +33,8 @@ $panel-gutter: 30px; background-color: $g3-castle; padding: $panel-gutter; - .panel-heading + & { + .panel-heading + &, + &:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } From a480c6c1ca1492ca701379740c3dc82aaff5aca0 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:24:55 -0800 Subject: [PATCH 033/431] Bring in some utilities from bootstrap theme --- ui/src/style/modules/helpers.scss | 62 +++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/ui/src/style/modules/helpers.scss b/ui/src/style/modules/helpers.scss index 33bea412a..44f09733c 100644 --- a/ui/src/style/modules/helpers.scss +++ b/ui/src/style/modules/helpers.scss @@ -13,3 +13,65 @@ .text-center { text-align: center; } + +// Flexbox Utilities +// ---------------------------------------------------------------------------- + +.u-flex { + display: flex; + flex-wrap: wrap; + + &.u-jc-flex-start { justify-content: flex-start; } + &.u-jc-flex-end { justify-content: flex-end; } + &.u-jc-center { justify-content: center; } + &.u-jc-space-between { justify-content: space-between; } + &.u-jc-space-around { justify-content: space-around; } + + &.u-ai-flex-start { align-items: flex-start; } + &.u-ai-flex-end { align-items: flex-end; } + &.u-ai-center { align-items: center; } + &.u-ai-stretch { align-items: stretch; } + &.u-ai-baseline { align-items: baseline; } + + &.u-ac-flex-start { align-content: flex-start; } + &.u-ac-flex-end { align-content: flex-end; } + &.u-ac-center { align-content: center; } + &.u-ac-stretch { align-content: stretch; } + &.u-ac-space-between { align-content: space-between; } + &.u-ac-space-around { align-content: space-around; } +} + +// Misc. Utilities +// ---------------------------------------------------------------------------- + +.margin-zero { + margin: 0 !important; +} +.margin-bottom-zero { + margin-bottom: 0 !important; +} +.margin-top-zero { + margin-top: 0 !important; +} +.margin-left-zero { + margin-left: 0 !important; +} +.margin-right-zero { + margin-right: 0 !important; +} + +.padding-zero { + padding: 0 !important; +} +.padding-bottom-zero { + padding-bottom: 0 !important; +} +.padding-top-zero { + padding-top: 0 !important; +} +.padding-left-zero { + padding-left: 0 !important; +} +.padding-right-zero { + padding-right: 0 !important; +} From a6a423dc38790acaba90626336fbba58fa78a7e0 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:29:33 -0800 Subject: [PATCH 034/431] Fix carets in dropdowns --- ui/src/style/theme/_dropdowns.scss | 33 ++++++++++++++++++++++-------- ui/src/style/theme/_panels.scss | 1 - 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/ui/src/style/theme/_dropdowns.scss b/ui/src/style/theme/_dropdowns.scss index a7c846359..d9a85af2a 100644 --- a/ui/src/style/theme/_dropdowns.scss +++ b/ui/src/style/theme/_dropdowns.scss @@ -84,7 +84,8 @@ $dropdown-purple-header: $c-potassium; } } -// Positioning rules for elements inside a Dropdown Toggle +// Elements inside a Dropdown Toggle +// ---------------------------------------------------------------------------- .dropdown > .dropdown-toggle { position: relative; text-align: left; @@ -96,12 +97,30 @@ $dropdown-purple-header: $c-potassium; top: calc(50% + 1px); right: $form-md-padding; transform: translateY(-50%); + width: 11px; + height: 16px; + + &:after { + content: "\e902"; + font-family: 'icomoon' !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: inherit; + display: inline; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-55%); + font-size: 11px; + } } + > .icon { display: inline-block; vertical-align: middle; margin-right: 6px; } + .dropdown-selected { display: inline-block; flex: 1 0 0; @@ -130,10 +149,8 @@ $dropdown-purple-header: $c-potassium; } } -/* - AutoComplete Field - ---------------------------------------------------------------------------- -*/ +// AutoComplete Field +// ---------------------------------------------------------------------------- .dropdown-autocomplete { position: relative; padding: 0 !important; @@ -177,10 +194,8 @@ $dropdown-purple-header: $c-potassium; @extend %no-user-select; } -/* - Dropdown Menu - ---------------------------------------------------------------------------- -*/ +// Dropdown Menu +// ---------------------------------------------------------------------------- .dropdown .dropdown-menu { min-width: 100%; box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8); diff --git a/ui/src/style/theme/_panels.scss b/ui/src/style/theme/_panels.scss index f1d0cbd67..db54b6d7b 100644 --- a/ui/src/style/theme/_panels.scss +++ b/ui/src/style/theme/_panels.scss @@ -5,7 +5,6 @@ $panel-gutter: 30px; - .panel { display: flex; flex-direction: column; From 62db0828ca7e136823abd37cb8d73e33ac181dc9 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:39:39 -0800 Subject: [PATCH 035/431] Introduce Radio Buttons (tab lists) --- ui/src/style/theme/_radio-buttons.scss | 104 +++++++++++++++++++++++ ui/src/style/theme/chronograf-theme.scss | 1 + 2 files changed, 105 insertions(+) create mode 100644 ui/src/style/theme/_radio-buttons.scss diff --git a/ui/src/style/theme/_radio-buttons.scss b/ui/src/style/theme/_radio-buttons.scss new file mode 100644 index 000000000..c090c8acb --- /dev/null +++ b/ui/src/style/theme/_radio-buttons.scss @@ -0,0 +1,104 @@ +/* + Radio Buttons + ----------------------------------------------------------------------------- +*/ + +.nav-tablist { + display: inline-flex; + align-items: stretch; + margin: 0; + padding: 0; + width: auto; + border: $ix-border solid $g5-pepper; + background-color: $g5-pepper; + height: $form-md-height; + border-radius: 4px; + overflow: hidden; + + > li { + @extend %no-user-select; + display: flex; + align-items: center; + padding: 0 $form-md-padding; + font-size: $form-md-font; + font-weight: 600; + margin: 0 2px 0 0; + background-color: $g2-kevlar; + color: $g11-sidewalk; + transition: + background-color 0.25s ease, + color 0.25s ease; + + &:hover { + background-color: $g4-onyx; + color: $g15-platinum; + cursor: pointer; + } + &.active { + background-color: $g5-pepper; + color: $g18-cloud; + } + &.disabled, + &[disabled="true"] { + &, &:hover { + background-color: $g2-kevlar; + font-style: italic; + color: $g7-graphite; + cursor: not-allowed; + } + } + &:last-child {margin-right: 0;} + } +} + +// Size Modifiers +// ---------------------------------------------------------------------------- +.nav-tablist.nav-tablist-lg { + height: $form-lg-height; + > li { + padding: 0 $form-lg-padding; + font-size: $form-lg-font; + } +} +.nav-tablist.nav-tablist-md { + height: $form-md-height; + > li { + padding: 0 $form-md-padding; + font-size: $form-md-font; + } +} +.nav-tablist.nav-tablist-sm { + height: $form-sm-height; + > li { + padding: 0 $form-sm-padding; + font-size: $form-sm-font; + } +} +.nav-tablist.nav-tablist-xs { + height: $form-xs-height; + > li { + padding: 0 $form-xs-padding; + font-size: $form-xs-font; + } +} + +// Theme Modifiers +// ---------------------------------------------------------------------------- +.nav-tablist.nav-tablist-malachite { + > li { + background-color: $g3-castle; + + &:hover {background-color: $g4-onyx;} + &.active { + background-color: $g5-pepper; + color: $c-rainforest; + } + &.disabled, + &[disabled="true"] { + &, &:hover { + background-color: $g3-castle; + color: $g7-graphite; + } + } + } +} diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss index cde214ebc..523e8647d 100644 --- a/ui/src/style/theme/chronograf-theme.scss +++ b/ui/src/style/theme/chronograf-theme.scss @@ -13,3 +13,4 @@ @import 'form-elements'; @import 'alerts'; @import 'panels'; +@import 'radio-buttons'; From be0a920e62d26f3f48720ff7a09a73dc61edb474 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:45:40 -0800 Subject: [PATCH 036/431] Move carets into misc stylesheet --- ui/src/style/theme/_dropdowns.scss | 19 ----------------- ui/src/style/theme/_misc.scss | 27 ++++++++++++++++++++++++ ui/src/style/theme/chronograf-theme.scss | 1 + 3 files changed, 28 insertions(+), 19 deletions(-) create mode 100644 ui/src/style/theme/_misc.scss diff --git a/ui/src/style/theme/_dropdowns.scss b/ui/src/style/theme/_dropdowns.scss index d9a85af2a..0ae7ae42f 100644 --- a/ui/src/style/theme/_dropdowns.scss +++ b/ui/src/style/theme/_dropdowns.scss @@ -93,26 +93,7 @@ $dropdown-purple-header: $c-potassium; align-items: center; .caret { - position: absolute; - top: calc(50% + 1px); right: $form-md-padding; - transform: translateY(-50%); - width: 11px; - height: 16px; - - &:after { - content: "\e902"; - font-family: 'icomoon' !important; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: inherit; - display: inline; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-55%); - font-size: 11px; - } } > .icon { diff --git a/ui/src/style/theme/_misc.scss b/ui/src/style/theme/_misc.scss new file mode 100644 index 000000000..621b7f577 --- /dev/null +++ b/ui/src/style/theme/_misc.scss @@ -0,0 +1,27 @@ +/* + Miscellaneous + ----------------------------------------------------------------------------- +*/ + +.caret { + position: absolute; + top: calc(50% + 1px); + right: $form-md-padding; + transform: translateY(-50%); + width: 11px; + height: 16px; + + &:after { + content: "\e902"; + font-family: 'icomoon' !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: inherit; + display: inline; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-55%); + font-size: 11px; + } +} diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss index 523e8647d..3800fe5e3 100644 --- a/ui/src/style/theme/chronograf-theme.scss +++ b/ui/src/style/theme/chronograf-theme.scss @@ -14,3 +14,4 @@ @import 'alerts'; @import 'panels'; @import 'radio-buttons'; +@import 'misc'; From 5a1fa835de09610a381c0e1167ff91939e07aad3 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:53:03 -0800 Subject: [PATCH 037/431] Introduce Code Styles from bootstrap theme --- ui/src/style/theme/_code-styles.scss | 160 +++++++++++++++++++++++ ui/src/style/theme/chronograf-theme.scss | 1 + 2 files changed, 161 insertions(+) create mode 100644 ui/src/style/theme/_code-styles.scss diff --git a/ui/src/style/theme/_code-styles.scss b/ui/src/style/theme/_code-styles.scss new file mode 100644 index 000000000..5ad9de188 --- /dev/null +++ b/ui/src/style/theme/_code-styles.scss @@ -0,0 +1,160 @@ +/* + Code Styles + ----------------------------------------------------------------------------- +*/ + + +$code-bg-color: $g2-kevlar; +$code-scrollbar: $c-pool; +$code-font-color: $c-pool; +$code-font-size: 11px; +$code-font-weight: 500; + +code { + font-weight: $code-font-weight; + background-color: $code-bg-color; + border: 0; + color: $code-font-color; + font-family: $code-font; + font-size: $code-font-size; + line-height: $code-font-size; + letter-spacing: 0.02em; + border-radius: 2px; + padding: 2.5px 5px; + margin: 0 1px 0 2px; + + /* Reset default tag styles */ + b,strong,i,em,mark,small,del,ins,sub,sup,u { + font-size: $code-font-size; + font-weight: $code-font-weight; + text-decoration: none; + font-style: normal; + background-color: inherit; + color: $code-font-color; + position: static; + top: 0; + bottom: 0; + padding: 0; + } + + sup, sub { + position: relative; + font-size: 85%; + margin-left: 2px; + color: inherit; + } + sup { + top: -4px; + } + sub { + top: 4px; + } + + b { color: $c-dreamsicle;} + i { color: $c-pool;} + u { color: $c-rainforest;} + + &.rainbow-highlighter { + text-shadow: none; + background-image: none; + } +} +pre { + font-size: $code-font-size; + line-height: 17px; + background-color: $code-bg-color; + border: 0; + color: $code-font-color; + white-space: normal; + border-radius: $ix-radius; + position: relative; + font-family: $code-font; + + code { + margin: 0; + border: none; + background-color: transparent; + background-image: none; + white-space: pre-wrap; + word-break: normal; + word-wrap: normal; + border-radius: 0; + } + @include custom-scrollbar($code-bg-color,$code-scrollbar); + + &.rainbow-highlighter { + background-image: none; + @include custom-scrollbar($g2-kevlar,$c-pool); + + code { + text-shadow: none; + } + } +} + +/* Code Highlighting */ +$code-highlight-a: $g10-wolf; +$code-highlight-b: $c-hydrogen; +$code-highlight-c: $c-pool; +$code-highlight-d: $c-viridian; +$code-highlight-e: $c-honeydew; +$code-highlight-f: $g20-white; +$code-highlight-g: $c-curacao; +$code-highlight-h: $c-tungsten; +$code-highlight-i: $c-honeydew; +$code-highlight-j: $c-comet; +$code-highlight-k: $g6-smoke; + +code, pre { + &.rainbow-highlighter { + color: $c-potassium; + border-color: $c-shadow; + + + + b { color: $code-highlight-a; } + strong { color: $code-highlight-b; } + i { color: $code-highlight-c; } + em { color: $code-highlight-d; } + mark { color: $code-highlight-e; } + small { color: $code-highlight-f; } + del { color: $code-highlight-g; } + ins { color: $code-highlight-h; } + sub { color: $code-highlight-i; } + sup { color: $code-highlight-j; } + + /* Literal highlighting */ + u { + color: $c-potassium; + background-color: $code-highlight-k; + padding: 2px 4px; + text-indent: -4px; + } + + sup,sub { + position: initial; + top: 0; + margin: 0; + font-size: 100%; + } + } +} + +/* Language Labels */ +pre:before { + display: inline-block; + width: 100%; + color: $g7-graphite; + font-weight: 700; + margin-bottom: $ix-marg-a; + text-transform: uppercase; +} +pre[data-lang="html"]:before { + content: 'HTML'; +} +pre[data-lang="css"]:before { + content: 'CSS'; +} +pre[data-lang="js"]:before { + content: 'Javascript'; +} diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss index 3800fe5e3..191dd1c6c 100644 --- a/ui/src/style/theme/chronograf-theme.scss +++ b/ui/src/style/theme/chronograf-theme.scss @@ -15,3 +15,4 @@ @import 'panels'; @import 'radio-buttons'; @import 'misc'; +@import 'code-styles'; From c74a0d47e67e024468b75e527183ecb9ac7bbee7 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 20:58:56 -0800 Subject: [PATCH 038/431] Adjust vertical alignment of icons inside small buttons --- ui/src/style/theme/_buttons.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/style/theme/_buttons.scss b/ui/src/style/theme/_buttons.scss index df3b6d776..ef8506edc 100644 --- a/ui/src/style/theme/_buttons.scss +++ b/ui/src/style/theme/_buttons.scss @@ -69,7 +69,6 @@ input.btn { // Icons > .icon { font-size: 1.125em; - top: 0px; margin-right: 6px; } &.btn-square { From 1a8c0e18dd96279e177712618e5ae4c2a38012dc Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 21:06:28 -0800 Subject: [PATCH 039/431] Adjust font size of small form elements --- ui/src/style/modules/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/style/modules/variables.scss b/ui/src/style/modules/variables.scss index eb308125e..9e4a2baf2 100644 --- a/ui/src/style/modules/variables.scss +++ b/ui/src/style/modules/variables.scss @@ -68,7 +68,7 @@ $form-xs-font: 13px; $form-sm-height: 30px; $form-sm-padding: 11px; -$form-sm-font: 14px; +$form-sm-font: 13px; $form-md-height: 38px; $form-md-padding: 14px; From 4aafefc66c01cb2f8b5da1338e20260d95266de6 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 21:57:27 -0800 Subject: [PATCH 040/431] Introduce bootstrap grid clone --- ui/src/style/theme/_buttons.scss | 3 + ui/src/style/theme/_form-elements.scss | 34 +--- ui/src/style/theme/_grid.scss | 222 +++++++++++++++++++++++ ui/src/style/theme/chronograf-theme.scss | 1 + 4 files changed, 230 insertions(+), 30 deletions(-) create mode 100644 ui/src/style/theme/_grid.scss diff --git a/ui/src/style/theme/_buttons.scss b/ui/src/style/theme/_buttons.scss index ef8506edc..1603aefe0 100644 --- a/ui/src/style/theme/_buttons.scss +++ b/ui/src/style/theme/_buttons.scss @@ -130,6 +130,9 @@ a.btn { font-size: $form-lg-font; } +.btn.btn-block { + width: 100%; +} // Solid Button styles mixin // ----------------------------------------------------------------------------- diff --git a/ui/src/style/theme/_form-elements.scss b/ui/src/style/theme/_form-elements.scss index c3834def1..5609b5e80 100644 --- a/ui/src/style/theme/_form-elements.scss +++ b/ui/src/style/theme/_form-elements.scss @@ -4,6 +4,7 @@ */ .form-control { + width: 100%; border: 2px solid $g5-pepper; border-radius: $radius; color: $g15-platinum; @@ -145,32 +146,6 @@ input.form-control { } } - -.panel form { - margin-left: -9px; - margin-right: -9px; - width: calc(100% + 18px); - display: inline-block; - - .alert { - margin-bottom: 0px; - } - &.form-inline { - padding-top: 0; - margin-left: 0; - margin-right: 0; - width: 100%; - } - &.form-horizontal { - margin-left: 0; - margin-right: 0; - width: 100%; - } -} -.panel-body:first-child > form { - padding-top: 15px; -} - // Form Add-Ons // ---------------------------------------------------------------------------- .input-group-addon { @@ -209,6 +184,9 @@ input.form-control { .form-group { margin-bottom: 8px; } +.form-group > .btn { + display: inline-block; +} .form-group > label { font-size: 12px; font-weight: 600; @@ -506,7 +484,3 @@ textarea.form-control { transform: translate(-50%,-50%) scale(1,1); } } - -.form-group-submit { - margin-top: 30px; -} diff --git a/ui/src/style/theme/_grid.scss b/ui/src/style/theme/_grid.scss new file mode 100644 index 000000000..a6703e801 --- /dev/null +++ b/ui/src/style/theme/_grid.scss @@ -0,0 +1,222 @@ +/* + 12 Column Grid + ----------------------------------------------------------------------------- + This more or less copies what Bootstrap uses +*/ + +$grid--gutter: 14px; +$grid--form-gutter: 6px; + +$grid--breakpoint-sm: 768px; +$grid--breakpoint-md: 992px; +$grid--breakpoint-lg: 1200px; + +$grid--col-1: 8.33333333%; +$grid--col-2: 16.66666667%; +$grid--col-3: 25%; +$grid--col-4: 33.33333333%; +$grid--col-5: 41.66666667%; +$grid--col-6: 50%; +$grid--col-7: 58.33333333%; +$grid--col-8: 66.66666667%; +$grid--col-9: 75%; +$grid--col-10: 83.33333333%; +$grid--col-11: 91.66666667%; +$grid--col-12: 100%; + +.row { + margin-left: -$grid--gutter; + margin-right: -$grid--gutter; + + &:before, + &:after { + display: table; + content: ' '; + } +} + +.panel-body form { + margin-left: -$grid--form-gutter; + margin-right: -$grid--form-gutter; + width: calc(100% + #{$grid--form-gutter * 2}); + display: inline-block; +} + +.form-group-submit { + margin-top: 30px; +} + +.col { + &-xs, + &-sm, + &-md, + &-lg { + &-12, + &-11, + &-10, + &-9, + &-8, + &-7, + &-6, + &-5, + &-4, + &-3, + &-2, + &-1 { + position: relative; + float: left; + min-height: 1px; + padding-left: $grid--gutter; + padding-right: $grid--gutter; + + &.form-group { + padding-left: $grid--form-gutter; + padding-right: $grid--form-gutter; + } + } + } +} + +// Extra Small Screen Grid +// ---------------------------------------------------------------------------- +.col-sm, +.col-md, +.col-lg { + &-12, + &-11, + &-10, + &-9, + &-8, + &-7, + &-6, + &-5, + &-4, + &-3, + &-2, + &-1 { + width: $grid--col-12; + } +} +.col-xs { + &-1 { width: $grid--col-1; } + &-2 { width: $grid--col-2; } + &-3 { width: $grid--col-3; } + &-4 { width: $grid--col-4; } + &-5 { width: $grid--col-5; } + &-6 { width: $grid--col-6; } + &-7 { width: $grid--col-7; } + &-8 { width: $grid--col-8; } + &-9 { width: $grid--col-9; } + &-10 { width: $grid--col-10; } + &-11 { width: $grid--col-11; } + &-12 { width: $grid--col-12; } +} +.col-xs-offset { + &-1 { margin-left: $grid--col-1; } + &-2 { margin-left: $grid--col-2; } + &-3 { margin-left: $grid--col-3; } + &-4 { margin-left: $grid--col-4; } + &-5 { margin-left: $grid--col-5; } + &-6 { margin-left: $grid--col-6; } + &-7 { margin-left: $grid--col-7; } + &-8 { margin-left: $grid--col-8; } + &-9 { margin-left: $grid--col-9; } + &-10 { margin-left: $grid--col-10; } + &-11 { margin-left: $grid--col-11; } +} + +// Small Screen Grid +// ---------------------------------------------------------------------------- +@media screen and (min-width: $grid--breakpoint-sm) { + .col-sm { + &-1 { width: $grid--col-1; } + &-2 { width: $grid--col-2; } + &-3 { width: $grid--col-3; } + &-4 { width: $grid--col-4; } + &-5 { width: $grid--col-5; } + &-6 { width: $grid--col-6; } + &-7 { width: $grid--col-7; } + &-8 { width: $grid--col-8; } + &-9 { width: $grid--col-9; } + &-10 { width: $grid--col-10; } + &-11 { width: $grid--col-11; } + &-12 { width: $grid--col-12; } + } + .col-sm-offset { + &-1 { margin-left: $grid--col-1; } + &-2 { margin-left: $grid--col-2; } + &-3 { margin-left: $grid--col-3; } + &-4 { margin-left: $grid--col-4; } + &-5 { margin-left: $grid--col-5; } + &-6 { margin-left: $grid--col-6; } + &-7 { margin-left: $grid--col-7; } + &-8 { margin-left: $grid--col-8; } + &-9 { margin-left: $grid--col-9; } + &-10 { margin-left: $grid--col-10; } + &-11 { margin-left: $grid--col-11; } + } +} + +// Medium Screen Grid +// ---------------------------------------------------------------------------- +@media screen and (min-width: $grid--breakpoint-md) { + .col-md { + &-1 { width: $grid--col-1; } + &-2 { width: $grid--col-2; } + &-3 { width: $grid--col-3; } + &-4 { width: $grid--col-4; } + &-5 { width: $grid--col-5; } + &-6 { width: $grid--col-6; } + &-7 { width: $grid--col-7; } + &-8 { width: $grid--col-8; } + &-9 { width: $grid--col-9; } + &-10 { width: $grid--col-10; } + &-11 { width: $grid--col-11; } + &-12 { width: $grid--col-12; } + } + .col-md-offset { + &-1 { margin-left: $grid--col-1; } + &-2 { margin-left: $grid--col-2; } + &-3 { margin-left: $grid--col-3; } + &-4 { margin-left: $grid--col-4; } + &-5 { margin-left: $grid--col-5; } + &-6 { margin-left: $grid--col-6; } + &-7 { margin-left: $grid--col-7; } + &-8 { margin-left: $grid--col-8; } + &-9 { margin-left: $grid--col-9; } + &-10 { margin-left: $grid--col-10; } + &-11 { margin-left: $grid--col-11; } + } +} + +// Large Screen Grid +// ---------------------------------------------------------------------------- +@media screen and (min-width: $grid--breakpoint-lg) { + .col-lg { + &-1 { width: $grid--col-1; } + &-2 { width: $grid--col-2; } + &-3 { width: $grid--col-3; } + &-4 { width: $grid--col-4; } + &-5 { width: $grid--col-5; } + &-6 { width: $grid--col-6; } + &-7 { width: $grid--col-7; } + &-8 { width: $grid--col-8; } + &-9 { width: $grid--col-9; } + &-10 { width: $grid--col-10; } + &-11 { width: $grid--col-11; } + &-12 { width: $grid--col-12; } + } + .col-lg-offset { + &-1 { margin-left: $grid--col-1; } + &-2 { margin-left: $grid--col-2; } + &-3 { margin-left: $grid--col-3; } + &-4 { margin-left: $grid--col-4; } + &-5 { margin-left: $grid--col-5; } + &-6 { margin-left: $grid--col-6; } + &-7 { margin-left: $grid--col-7; } + &-8 { margin-left: $grid--col-8; } + &-9 { margin-left: $grid--col-9; } + &-10 { margin-left: $grid--col-10; } + &-11 { margin-left: $grid--col-11; } + } +} diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss index 191dd1c6c..f04955190 100644 --- a/ui/src/style/theme/chronograf-theme.scss +++ b/ui/src/style/theme/chronograf-theme.scss @@ -6,6 +6,7 @@ */ @import 'reset'; +@import 'grid'; @import 'typography'; @import 'buttons'; @import 'tables'; From 68c434580de161be191730548b0c5986efb84631 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 22:10:08 -0800 Subject: [PATCH 041/431] Minor tweaks --- ui/src/style/theme/_form-elements.scss | 8 ++++---- ui/src/style/unsorted.scss | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/ui/src/style/theme/_form-elements.scss b/ui/src/style/theme/_form-elements.scss index 5609b5e80..7f9b6b943 100644 --- a/ui/src/style/theme/_form-elements.scss +++ b/ui/src/style/theme/_form-elements.scss @@ -97,10 +97,10 @@ .form-control, textarea, input { - &::-webkit-input-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;} - &::-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;} - &:-ms-input-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;} - &:-moz-placeholder { color: $g9-mountain; font-weight: 500 !important; font-style: italic;} + &::-webkit-input-placeholder { color: $g9-mountain; font-weight: 600 !important; font-style: italic;} + &::-moz-placeholder { color: $g9-mountain; font-weight: 600 !important; font-style: italic;} + &:-ms-input-placeholder { color: $g9-mountain; font-weight: 600 !important; font-style: italic;} + &:-moz-placeholder { color: $g9-mountain; font-weight: 600 !important; font-style: italic;} } // Size Modifiers diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index 9942d5b33..fde3f1601 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -273,6 +273,7 @@ $tick-script-overlay-margin: 30px; flex-wrap: nowrap; } .group-by-time--label { + white-space: nowrap; margin: 0; color: $g12-forge; padding: 0 6px; From 2f88798036186d2b2d40dc1c59ea73a5f9d23127 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 22:13:10 -0800 Subject: [PATCH 042/431] Add "solid" style panel --- ui/src/style/theme/_panels.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/ui/src/style/theme/_panels.scss b/ui/src/style/theme/_panels.scss index db54b6d7b..b109f0a43 100644 --- a/ui/src/style/theme/_panels.scss +++ b/ui/src/style/theme/_panels.scss @@ -76,3 +76,17 @@ $panel-gutter: 30px; .panel > .table th:last-child { padding-right: $panel-gutter; } + +// Solid Panels +// ---------------------------------------------------------------------------- +.panel.panel-solid { + background-color: $g3-castle; + border-radius: 4px; + + .panel-heading { + padding: $panel-gutter; + } + .panel-body { + background-color: transparent; + } +} From 04023c383893c0e7d20555da25a3f40074a2b55a Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 27 Feb 2018 22:20:16 -0800 Subject: [PATCH 043/431] Cleanup Removing references to unused classes --- ui/src/admin/components/DatabaseManager.js | 4 ++-- ui/src/admin/components/FilterBar.js | 2 +- ui/src/admin/components/QueriesTable.js | 2 +- ui/src/admin/components/RolesTable.js | 2 +- ui/src/admin/components/UsersTable.js | 2 +- ui/src/admin/components/chronograf/AllUsersTable.js | 4 ++-- .../admin/components/chronograf/AllUsersTableHeader.js | 2 +- .../admin/components/chronograf/OrganizationsTable.js | 6 +++--- ui/src/admin/components/chronograf/ProvidersTable.js | 6 +++--- ui/src/admin/components/chronograf/UsersTable.js | 4 ++-- ui/src/admin/components/chronograf/UsersTableHeader.js | 2 +- ui/src/alerts/components/AlertsTable.js | 4 ++-- ui/src/dashboards/components/DashboardsPageContents.js | 4 ++-- ui/src/hosts/components/HostsTable.js | 4 ++-- ui/src/kapacitor/components/AlertTabs.js | 4 ++-- ui/src/kapacitor/components/KapacitorForm.js | 8 ++++---- ui/src/kapacitor/components/KapacitorRules.js | 10 +++++----- ui/src/shared/components/NotFound.js | 2 +- ui/src/sources/components/InfluxTable.js | 4 ++-- ui/src/sources/containers/SourcePage.js | 2 +- 20 files changed, 39 insertions(+), 39 deletions(-) diff --git a/ui/src/admin/components/DatabaseManager.js b/ui/src/admin/components/DatabaseManager.js index 48dd5a89e..fa4f58f2d 100644 --- a/ui/src/admin/components/DatabaseManager.js +++ b/ui/src/admin/components/DatabaseManager.js @@ -25,8 +25,8 @@ const DatabaseManager = ({ onDeleteRetentionPolicy, }) => { return ( -
-
+
+

{databases.length === 1 ? '1 Database' diff --git a/ui/src/admin/components/FilterBar.js b/ui/src/admin/components/FilterBar.js index daac02524..b1cd483c8 100644 --- a/ui/src/admin/components/FilterBar.js +++ b/ui/src/admin/components/FilterBar.js @@ -26,7 +26,7 @@ class FilterBar extends Component { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() }) return ( -
+
-
+
diff --git a/ui/src/admin/components/RolesTable.js b/ui/src/admin/components/RolesTable.js index c3d7b4cb0..8c7c5f5c7 100644 --- a/ui/src/admin/components/RolesTable.js +++ b/ui/src/admin/components/RolesTable.js @@ -17,7 +17,7 @@ const RolesTable = ({ onUpdateRoleUsers, onUpdateRolePermissions, }) => -
+
-
+
+
@@ -99,7 +99,7 @@ class AllUsersTable extends Component { ) } return ( -
+
+

{numUsersString} across {numOrganizationsString}

diff --git a/ui/src/admin/components/chronograf/OrganizationsTable.js b/ui/src/admin/components/chronograf/OrganizationsTable.js index 848504357..9cf339180 100644 --- a/ui/src/admin/components/chronograf/OrganizationsTable.js +++ b/ui/src/admin/components/chronograf/OrganizationsTable.js @@ -45,7 +45,7 @@ class OrganizationsTable extends Component { if (!organizations.length) { return ( -
+
@@ -53,8 +53,8 @@ class OrganizationsTable extends Component { ) } return ( -
-
+
+

{tableTitle}

diff --git a/ui/src/admin/components/chronograf/ProvidersTable.js b/ui/src/admin/components/chronograf/ProvidersTable.js index 5644fa35f..e0f8d36a9 100644 --- a/ui/src/admin/components/chronograf/ProvidersTable.js +++ b/ui/src/admin/components/chronograf/ProvidersTable.js @@ -43,7 +43,7 @@ class ProvidersTable extends Component { if (isLoading) { return ( -
+
@@ -52,8 +52,8 @@ class ProvidersTable extends Component { } return ( -
-
+
+

{tableTitle}

diff --git a/ui/src/admin/components/chronograf/UsersTable.js b/ui/src/admin/components/chronograf/UsersTable.js index d0f026cee..a7f1555e8 100644 --- a/ui/src/admin/components/chronograf/UsersTable.js +++ b/ui/src/admin/components/chronograf/UsersTable.js @@ -48,7 +48,7 @@ class UsersTable extends Component { if (isLoading) { return ( -
+
@@ -56,7 +56,7 @@ class UsersTable extends Component { ) } return ( -
+
+

{panelTitle} in {organization.name}

diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js index 5b6bf832f..d72cd1eb5 100644 --- a/ui/src/alerts/components/AlertsTable.js +++ b/ui/src/alerts/components/AlertsTable.js @@ -220,8 +220,8 @@ class AlertsTable extends Component { : null}
- :
-
+ :
+

{this.props.alerts.length} Alerts

diff --git a/ui/src/dashboards/components/DashboardsPageContents.js b/ui/src/dashboards/components/DashboardsPageContents.js index 1adeef209..0e629342d 100644 --- a/ui/src/dashboards/components/DashboardsPageContents.js +++ b/ui/src/dashboards/components/DashboardsPageContents.js @@ -45,8 +45,8 @@ class DashboardsPageContents extends Component {
-
-
+
+

{tableHeader}

diff --git a/ui/src/hosts/components/HostsTable.js b/ui/src/hosts/components/HostsTable.js index 585f8877b..cd472fc17 100644 --- a/ui/src/hosts/components/HostsTable.js +++ b/ui/src/hosts/components/HostsTable.js @@ -99,8 +99,8 @@ class HostsTable extends Component { } return ( -
-
+
+

{hostsTitle}

diff --git a/ui/src/kapacitor/components/AlertTabs.js b/ui/src/kapacitor/components/AlertTabs.js index 6aac73d01..61e4d8ddb 100644 --- a/ui/src/kapacitor/components/AlertTabs.js +++ b/ui/src/kapacitor/components/AlertTabs.js @@ -271,8 +271,8 @@ class AlertTabs extends Component { } return (
-
-
+
+

Configure Alert Endpoints

diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js index c98326a4c..5df49f5f2 100644 --- a/ui/src/kapacitor/components/KapacitorForm.js +++ b/ui/src/kapacitor/components/KapacitorForm.js @@ -22,8 +22,8 @@ class KapacitorForm extends Component {
-
-
+
+

Connection Details

@@ -123,8 +123,8 @@ class KapacitorForm extends Component { } return ( -
-
+
+

Configure Alert Endpoints

diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index c89c9f418..ab1fd1e91 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/ui/src/kapacitor/components/KapacitorRules.js @@ -19,7 +19,7 @@ const KapacitorRules = ({ if (loading) { return ( -
+

Alert Rules