diff --git a/ui/src/App.js b/ui/src/App.js index 8ea5dee8e9..dfc50f7076 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -50,14 +50,12 @@ const App = React.createClass({ const {sourceID, base64ExplorerID} = this.props.params; return ( -
+
-
- {this.renderNotifications()} - {this.props.children && React.cloneElement(this.props.children, { - addFlashMessage: this.handleNotification, - })} -
+ {this.renderNotifications()} + {this.props.children && React.cloneElement(this.props.children, { + addFlashMessage: this.handleNotification, + })}
); }, diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js index 30b3e8dbec..9305ca7902 100644 --- a/ui/src/alerts/components/AlertsTable.js +++ b/ui/src/alerts/components/AlertsTable.js @@ -116,7 +116,7 @@ const SearchBar = React.createClass({ diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js index ed336c9119..7a3f3e9cb1 100644 --- a/ui/src/alerts/containers/AlertsApp.js +++ b/ui/src/alerts/containers/AlertsApp.js @@ -96,17 +96,17 @@ const AlertsApp = React.createClass({ return ( // I stole this from the Hosts page. // Perhaps we should create an abstraction? -
-
-
-
+
+
+
+

Alert History

-
+
diff --git a/ui/src/chronograf/components/RenamePanelModal.js b/ui/src/chronograf/components/RenamePanelModal.js index 8affd9c890..bffa495cca 100644 --- a/ui/src/chronograf/components/RenamePanelModal.js +++ b/ui/src/chronograf/components/RenamePanelModal.js @@ -40,7 +40,7 @@ const RenamePanelModal = React.createClass({
- +
diff --git a/ui/src/chronograf/containers/App.js b/ui/src/chronograf/containers/App.js index 6314243629..897b8f223d 100644 --- a/ui/src/chronograf/containers/App.js +++ b/ui/src/chronograf/containers/App.js @@ -35,7 +35,7 @@ const App = React.createClass({ const {base64ExplorerID} = this.props.params; return ( -
+
); diff --git a/ui/src/chronograf/containers/Header.js b/ui/src/chronograf/containers/Header.js index f0558ea08f..b4edf72c82 100644 --- a/ui/src/chronograf/containers/Header.js +++ b/ui/src/chronograf/containers/Header.js @@ -108,8 +108,8 @@ const Header = React.createClass({ {text: 'Delete', icon: 'trash', target: '#deleteExplorerModal', handler: this.openDeleteExplorerModal}, ]; return ( -
-
+
+

Exploration:

New Exploration
-
+

Source:

@@ -128,10 +128,6 @@ const Header = React.createClass({

Range:

- {/* Placeholder for export functionality - Export */} - {/* Placeholder for create graph functionality -   Create Graph */}
@@ -157,7 +153,7 @@ const DeleteExplorerModal = React.createClass({

Are you sure?

- +
@@ -203,7 +199,7 @@ const EditExplorerModal = React.createClass({
- +
diff --git a/ui/src/hosts/components/HostsTable.js b/ui/src/hosts/components/HostsTable.js index a60474fc1e..d6f96f5689 100644 --- a/ui/src/hosts/components/HostsTable.js +++ b/ui/src/hosts/components/HostsTable.js @@ -81,10 +81,19 @@ const HostsTable = React.createClass({ const hostCount = hosts.length; const {source} = this.props; + let hostsTitle; + if (hostCount === 1) { + hostsTitle = `${hostCount} Host`; + } else if (hostCount > 1) { + hostsTitle = `${hostCount} Hosts`; + } else { + hostsTitle = `Loading Hosts...`; + } + return (
-

{hostCount ? `${hostCount} Hosts` : ''}

+

{hostsTitle}

@@ -148,7 +157,7 @@ const SearchBar = React.createClass({ diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index b9f38147f7..9bdf25f5eb 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -133,20 +133,20 @@ export const HostPage = React.createClass({ const {layouts, timeRange} = this.state; return ( -
-
-
-
+
+
+
+

{hostID}

-
+

Range:

-
-
+
+
{ (layouts.length > 0) ? this.renderLayouts(layouts) : '' }
diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js index 91170fe3e4..a2a5bab7f7 100644 --- a/ui/src/hosts/containers/HostsPage.js +++ b/ui/src/hosts/containers/HostsPage.js @@ -44,17 +44,17 @@ export const HostsPage = React.createClass({ render() { return ( -
-
-
-
+
+
+
+

Host List

-
+
diff --git a/ui/src/kapacitor/components/AlertOutputs.js b/ui/src/kapacitor/components/AlertOutputs.js index 53dec96ec9..6e45bfa39f 100644 --- a/ui/src/kapacitor/components/AlertOutputs.js +++ b/ui/src/kapacitor/components/AlertOutputs.js @@ -101,12 +101,12 @@ const AlertOutputs = React.createClass({ } return ( -
-

Alert Endpoints

-
-
+
+
+

Configure Alert Endpoints

+
-
+
this.url = r} defaultValue={url || ''}> +
-
- - this.url = r} defaultValue={url || ''}> -
+
+ + this.room = r} defaultValue={room || ''}> +
-
- - this.room = r} defaultValue={room || ''}> -
+
+ + this.token = r} defaultValue={token || ''}> + +
-
- - this.token = r} defaultValue={token || ''}> - Note: a value of true indicates the HipChat token has been set -
- -
-
- -
-
- -
-
- -
-
+
+
+ this.global = r} /> +
-
-
-
- +
+
+ this.stateChangesOnly = r} /> +
+ +
+ +
); diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js index 24b65c75ae..824ba18706 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.js @@ -30,14 +30,14 @@ export const KapacitorRule = React.createClass({ const {chooseTrigger, updateRuleValues} = kapacitorActions; return ( -
+
-
+
diff --git a/ui/src/kapacitor/components/PagerDutyConfig.js b/ui/src/kapacitor/components/PagerDutyConfig.js index 77a36c03f7..dddd636bb6 100644 --- a/ui/src/kapacitor/components/PagerDutyConfig.js +++ b/ui/src/kapacitor/components/PagerDutyConfig.js @@ -30,44 +30,31 @@ const PagerDutyConfig = React.createClass({ const serviceKey = options['service-key']; return ( -
+

PagerDuty Alert


+

You can have alerts sent to PagerDuty by entering info below.

-
-
-

- You can have alerts sent to PagerDuty by entering info below. -

+
+ + this.serviceKey = r} defaultValue={serviceKey || ''}> + +
-
- - this.serviceKey = r} defaultValue={serviceKey || ''}> - Note: a value of true indicates the PagerDuty service key has been set -
- -
- - this.url = r} defaultValue={url || ''}> -
- -
-
- -
-
+
+ + this.url = r} defaultValue={url || ''}> +
+
+
+ this.global = r} /> +
-
-
-
- -
+
+
diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.js index c13125ae74..ebb116c290 100644 --- a/ui/src/kapacitor/components/RuleHeader.js +++ b/ui/src/kapacitor/components/RuleHeader.js @@ -44,12 +44,12 @@ export const RuleHeader = React.createClass({ render() { return ( -
-
-
+
+
+
{this.renderEditName()}
-
+
{this.renderSave()}
@@ -80,6 +80,7 @@ export const RuleHeader = React.createClass({ return (

{rule.name} +

); diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index db4caafea8..5f188a1462 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -52,7 +52,7 @@ export const RuleMessage = React.createClass({

Send this Alert to:

- +
diff --git a/ui/src/kapacitor/components/SMTPConfig.js b/ui/src/kapacitor/components/SMTPConfig.js index f8461bf72b..f68a8b89ba 100644 --- a/ui/src/kapacitor/components/SMTPConfig.js +++ b/ui/src/kapacitor/components/SMTPConfig.js @@ -32,48 +32,38 @@ const SMTPConfig = React.createClass({ const {host, port, from, username, password} = this.props.config.options; return ( -
+

SMTP Alert


+

You can have alerts sent to an email address by setting up an SMTP endpoint.

-
-
-

- You can have alerts sent to an email address by setting up an SMTP endpoint. -

- -
- - this.host = r} defaultValue={host || ''}> -
- -
- - this.port = r} defaultValue={port || ''}> -
- -
- - this.from = r} defaultValue={from || ''}> -
- -
- - this.username = r} defaultValue={username || ''}> -
- -
- - this.password = r} defaultValue={`${password}`}> -
-
+
+ + this.host = r} defaultValue={host || ''}>
-
-
-
- -
+
+ + this.port = r} defaultValue={port || ''}> +
+ +
+ + this.from = r} defaultValue={from || ''}> +
+ +
+ + this.username = r} defaultValue={username || ''}> +
+ +
+ + this.password = r} defaultValue={`${password}`}> +
+ +
+
diff --git a/ui/src/kapacitor/components/SensuConfig.js b/ui/src/kapacitor/components/SensuConfig.js index b5aa377650..c237436494 100644 --- a/ui/src/kapacitor/components/SensuConfig.js +++ b/ui/src/kapacitor/components/SensuConfig.js @@ -26,33 +26,23 @@ const SensuConfig = React.createClass({ const {source, addr} = this.props.config.options; return ( -
+

Sensu Alert


+

Have alerts sent to Sensu.

-
-
-

- Have alerts sent to Sensu -

- -
- - this.source = r} defaultValue={source || ''}> -
- -
- - this.addr = r} defaultValue={addr || ''}> -
-
+
+ + this.source = r} defaultValue={source || ''}>
-
-
-
- -
+
+ + this.addr = r} defaultValue={addr || ''}> +
+ +
+
diff --git a/ui/src/kapacitor/components/SlackConfig.js b/ui/src/kapacitor/components/SlackConfig.js index e9bc0185c2..88e91e1ca3 100644 --- a/ui/src/kapacitor/components/SlackConfig.js +++ b/ui/src/kapacitor/components/SlackConfig.js @@ -47,39 +47,25 @@ const SlackConfig = React.createClass({ const {url, channel} = this.props.config.options; return ( -
+

Slack Alert


+

Post alerts to a Slack channel.

-
-
-

- Post alerts to a Slack channel. -

- -
- - this.url = r} defaultValue={url || ''}> - Note: a value of true indicates that the Slack channel has been set -
- -
- - this.channel = r} defaultValue={channel || ''}> -
-
- -
- -
+
+ + this.url = r} defaultValue={url || ''}> +
-
+
+ + this.channel = r} defaultValue={channel || ''}> +
- diff --git a/ui/src/kapacitor/components/TelegramConfig.js b/ui/src/kapacitor/components/TelegramConfig.js index 1f72d18b0f..9c532e13fb 100644 --- a/ui/src/kapacitor/components/TelegramConfig.js +++ b/ui/src/kapacitor/components/TelegramConfig.js @@ -44,86 +44,65 @@ const TelegramConfig = React.createClass({ const stateChangesOnly = options['state-changes-only']; return ( -
+

Telegram Alert


+

You can have alerts sent to Telegram by entering info below.

-
-
-

- You can have alerts sent to Telegram by entering info below. -

+
+ + this.url = r} defaultValue={url || ''}> +
-
- - this.url = r} defaultValue={url || ''}> -
+
+ + this.token = r} defaultValue={token || ''}> + +
-
- - this.token = r} defaultValue={token || ''}> - Note: a value of true indicates the Telegram token has been set -
- -
- - this.chatID = r} defaultValue={chatID || ''}> -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
+ + this.chatID = r} defaultValue={chatID || ''}> +
+
+
+ this.parseMode = r} /> +
-
-
-
- +
+
+ this.disableWebPagePreview = r} /> +
+ +
+
+ this.disableNotification = r} /> + +
+
+ +
+
+ this.global = r} /> + +
+
+ +
+
+ this.stateChangesOnly = r} /> + +
+
+ +
+ +
); diff --git a/ui/src/kapacitor/components/ValuesSection.js b/ui/src/kapacitor/components/ValuesSection.js index e89ecf5d81..8e7cf51a12 100644 --- a/ui/src/kapacitor/components/ValuesSection.js +++ b/ui/src/kapacitor/components/ValuesSection.js @@ -101,8 +101,8 @@ const Threshold = React.createClass({

Send Alert where

{query.fields.length ? query.fields[0].field : 'Select a Metric'}

is

- - this.valueInput = r} defaultValue={value} onKeyUp={this.handleInputChange}> + + this.valueInput = r} defaultValue={value} onKeyUp={this.handleInputChange}>
); }, @@ -145,13 +145,13 @@ const Relative = React.createClass({ return (

Send Alert when

- +

compared to previous

- +

is

- + this.input = r} defaultValue={value} onKeyUp={this.handleInputChange} @@ -186,7 +186,7 @@ const Deadman = React.createClass({ return (

Send Alert if Data is missing for

- +
); }, diff --git a/ui/src/kapacitor/components/VictorOpsConfig.js b/ui/src/kapacitor/components/VictorOpsConfig.js index 8dff8272cb..5dfd3201a5 100644 --- a/ui/src/kapacitor/components/VictorOpsConfig.js +++ b/ui/src/kapacitor/components/VictorOpsConfig.js @@ -31,39 +31,29 @@ const VictorOpsConfig = React.createClass({ const {url} = options; return ( -
+

VictorOps Alert


+

Have alerts sent to VictorOps.

-
-
-

- Have alerts sent to VictorOps -

- -
- - this.apiKey = r} defaultValue={apiKey || ''}> - Note: a value of true indicates the VictorOps API key has been set -
- -
- - this.routingKey = r} defaultValue={routingKey || ''}> -
- -
- - this.url = r} defaultValue={url || ''}> -
-
+
+ + this.apiKey = r} defaultValue={apiKey || ''}> +
-
-
-
- -
+
+ + this.routingKey = r} defaultValue={routingKey || ''}> +
+ +
+ + this.url = r} defaultValue={url || ''}> +
+ +
+
diff --git a/ui/src/kapacitor/containers/KapacitorPage.js b/ui/src/kapacitor/containers/KapacitorPage.js index 39495e8737..569e3b5dd5 100644 --- a/ui/src/kapacitor/containers/KapacitorPage.js +++ b/ui/src/kapacitor/containers/KapacitorPage.js @@ -117,61 +117,62 @@ export const KapacitorPage = React.createClass({ const username = newUsername === undefined ? kapacitor && kapacitor.username || '' : newUsername; return ( -
-
-
-
+
+
+
+

Configure Kapacitor

+
+
+
+
+
+
+

+ Kapacitor is used as the monitoring and alerting agent. + This page will let you configure which Kapacitor to use and + set up alert end points like email, Slack, and others. +

+
+

Connection Details

+
+
+
+
+ + this.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}> +
+
+ + this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}> +
+
+ + this.kapacitorUser = r} className="form-control" id="username" value={username} onChange={this.updateUsername}> +
+
+ + this.kapacitorPassword = r} className="form-control" id="password" type="password"> +
+
-
-
-
-
-
-

- Kapacitor is used as the monitoring and alerting agent. - This page will let you configure which Kapacitor to use and - set up alert end points like email, Slack, and others. -

-
-

Connection Details

-
- -
-
- - this.kapacitorURL = r} className="form-control" id="connect-string" placeholder="http://localhost:9092" value={url} onChange={this.updateURL}> +
+
-
- - this.kapacitorName = r} className="form-control" id="name" placeholder="My Kapacitor" value={name} onChange={this.updateName}> -
-
- - this.kapacitorUser = r} className="form-control" id="username" value={username} onChange={this.updateUsername}> -
-
- - this.kapacitorPassword = r} className="form-control" id="password" type="password"> -
-
- -
- -
- + +
-
-
-
- {this.renderAlertOutputs()} +
+
+ {this.renderAlertOutputs()} +
@@ -186,8 +187,10 @@ export const KapacitorPage = React.createClass({ } return ( -
- Set your Kapacitor connection info to configure alerting endpoints. +
+
+

Set your Kapacitor connection info to configure alerting endpoints.

+
); }, diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js index ca92ddc3a4..937f88566e 100644 --- a/ui/src/kapacitor/containers/KapacitorRulesPage.js +++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js @@ -90,15 +90,15 @@ export const KapacitorRulesPage = React.createClass({ render() { return ( -
-
-
-
+
+
+
+

Kapacitor Rules

-
+
{this.renderSubComponent()}
diff --git a/ui/src/kubernetes/components/KubernetesDashboard.js b/ui/src/kubernetes/components/KubernetesDashboard.js index 813f8c477a..e2f4d3ab43 100644 --- a/ui/src/kubernetes/components/KubernetesDashboard.js +++ b/ui/src/kubernetes/components/KubernetesDashboard.js @@ -66,20 +66,20 @@ export const KubernetesPage = React.createClass({ ); return ( -
-
-
-
+
+
+
+

Kubernetes Dashboard

-
+

Range:

-
-
+
+
{layouts.length ? this.renderLayouts(layouts) : emptyState}
diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js index 05993a7756..178b842d50 100644 --- a/ui/src/shared/components/Dropdown.js +++ b/ui/src/shared/components/Dropdown.js @@ -51,7 +51,7 @@ const Dropdown = React.createClass({
    {items.map((item, i) => { return ( -
  • +
  • self.handleSelection(item)}> {item.text} diff --git a/ui/src/sources/containers/CreateSource.js b/ui/src/sources/containers/CreateSource.js index bee4ec8f3a..a2a73ba84e 100644 --- a/ui/src/sources/containers/CreateSource.js +++ b/ui/src/sources/containers/CreateSource.js @@ -41,16 +41,16 @@ export const CreateSource = React.createClass({ render() { return ( -
    +
    -
    +

    Welcome to Chronograf

    -

    Connect to a New Server

    +

    Connect to a New Source


    @@ -73,11 +73,11 @@ export const CreateSource = React.createClass({
    - + this.sourceTelegraf = r} className="form-control" id="telegraf" type="text" defaultValue="telegraf">
    -
    - +
    +
    diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js index dcb6ae04b7..b0221f1a24 100644 --- a/ui/src/sources/containers/ManageSources.js +++ b/ui/src/sources/containers/ManageSources.js @@ -64,53 +64,55 @@ export const ManageSources = React.createClass({ const sourcesTitle = `${numSources} ${numSources === 1 ? 'Source' : 'Sources'}`; return ( -
    -
    -
    -
    +
    +
    +
    +

    InfluxDB Sources

    -
    -
    -
    +
    +
    +
    +
    -
    -
    -

    {sourcesTitle}

    - Add New Source -
    -
    -
    - - - - - - - - - - - { - sources.map((source) => { - return ( - - - - - - - ); - }) - } - -
    NameHostKapacitor
    {source.name}{source.default ? Default : null}{source.url}{_.get(source, ['kapacitor', 'name'], '')} - Edit - Connect - -
    +
    +
    +

    {sourcesTitle}

    + Add New Source +
    +
    +
    + + + + + + + + + + + { + sources.map((source) => { + return ( + + + + + + + ); + }) + } + +
    NameHostKapacitor
    {source.name}{source.default ? Default : null}{source.url}{_.get(source, ['kapacitor', 'name'], '')} + + Connect + +
    +
    diff --git a/ui/src/sources/containers/SourceForm.js b/ui/src/sources/containers/SourceForm.js index 3731bfafad..13b7ed508a 100644 --- a/ui/src/sources/containers/SourceForm.js +++ b/ui/src/sources/containers/SourceForm.js @@ -82,58 +82,57 @@ export const SourceForm = React.createClass({ } return ( -
    -
    -
    -
    +
    +
    +
    +

    {editMode ? "Edit Source" : "Add a New Source"}

    -
    -
    -
    -
    -
    -

    Connection Details

    -
    +
    +
    +
    +
    +
    +
    +

    Connection Details

    +
    -
    -
    -
    + +
    this.sourceURL = r} className="form-control" id="connect-string" placeholder="http://localhost:8086" onChange={this.onInputChange} value={source.url || ''}>
    -
    +
    this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={this.onInputChange} value={source.name || ''}>
    -
    +
    this.sourceUsername = r} className="form-control" id="username" onChange={this.onInputChange} value={source.username || ''}>
    -
    +
    this.sourcePassword = r} className="form-control" id="password" onChange={this.onInputChange} value={source.password || ''}>
    -
    +
    this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={this.onInputChange} value={source.telegraf || 'telegraf'}>
    -
    +
    this.sourceDefault = r} />
    -
    - -
    - -
    - +
    + +
    + +
    diff --git a/ui/src/style/_SideNav.scss b/ui/src/style/_SideNav.scss index ff1872431c..a177122901 100644 --- a/ui/src/style/_SideNav.scss +++ b/ui/src/style/_SideNav.scss @@ -316,7 +316,7 @@ $sidebar-logo-color: $g8-storm; color: $g20-white; height: $sidebar-width; line-height: $sidebar-width; - font-size: 20px; + font-size: 17px; text-transform: uppercase; font-weight: 400; padding: 0px $sidebar-menu-gutter; diff --git a/ui/src/style/chronograf/components/_Explorer.scss b/ui/src/style/chronograf/components/_Explorer.scss index c4a15d6821..827533d803 100644 --- a/ui/src/style/chronograf/components/_Explorer.scss +++ b/ui/src/style/chronograf/components/_Explorer.scss @@ -137,20 +137,6 @@ .dropdown-toggle { width: 160px; - text-align: left; - position: relative; - - .caret { - position: absolute; - top: calc(50% + 1px); - right: 13px; - transform: translateY(-50%); - } - } - .dropdown-menu { - width: 100%; - min-width: 100%; - max-width: 100%; } } diff --git a/ui/src/style/chronograf/components/_Header.scss b/ui/src/style/chronograf/components/_Header.scss index ddc496430c..c6062c7c59 100644 --- a/ui/src/style/chronograf/components/_Header.scss +++ b/ui/src/style/chronograf/components/_Header.scss @@ -1,134 +1,20 @@ .sessions-dropdown { - margin: 0 0 0 4px !important; - - &__item { - position: relative; - - &:hover { - a { - background-color: $g7-graphite; - } - .dropdown-item__actions { - opacity: 1; - } - } - - > a { - padding: 8px 65px 8px 11px !important; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } + margin: 0 0 0 4px; .dropdown-toggle { - text-align: left; - position: relative; - width: 21em; - - .caret { - position: absolute; - top: calc(50% + 1px); - right: 13px; - transform: translateY(-50%); - } - } - .dropdown-menu { - width: 100%; - max-height: 450px; - overflow: auto; - - &::-webkit-scrollbar { - width: 16px; - background-color: $g3-castle; - border-radius: 8px; - } - &::-webkit-scrollbar-button { - background-color: $g3-castle; - } - &::-webkit-scrollbar-track { - background-color: $g3-castle; - border-radius: 8px; - } - &::-webkit-scrollbar-track-piece { - background-color: $g3-castle; - border-radius: 8px; - } - &::-webkit-scrollbar-thumb { - background-color: $g8-storm; - border: 4px solid $g3-castle; - border-radius: 8px; - } - &::-webkit-scrollbar-corner { - background-color: $g3-castle; - } - &::-webkit-resizer { - background-color: $g3-castle; - } - } - .dropdown-item__actions { - position: absolute; - top: 50%; - right: 11px; - transform: translateY(-50%); - display: flex; - justify-content: flex-end; - align-items: center; - transition: opacity 0.25s ease; - opacity: 0; - } - .dropdown-item__action { - border: 0; - margin-left: 4px; - border-radius: $radius; - width: 24px; - height: 24px; - background-color: transparent; - color: $g10-wolf; - transition: - background-color 0.25s ease, - color 0.25s ease; - - &:hover { - cursor: pointer; - color: $g20-white; - background-color: $g9-mountain; - } - - .icon { - font-size: 12px; - position: relative; - top: -2px; - } + width: 227px; + border-radius: 3px 0 0 3px; } } .sessions-dropdown__btn { - margin: 0 0 0 4px; + margin: 0; + border-radius: 0 3px 3px 0; } - -.group-by-time-dropdown { +.group-by-time-dropdown .dropdown-toggle { width: $group-by-time-dropdown-width; - - .caret { - position: absolute; - top: calc(50% + 1px); - right: 13px; - transform: translateY(-50%); - } - - .dropdown-toggle { - text-align: left; - width: 100%; - } - - .dropdown-menu { - width: $group-by-time-dropdown-width; - min-width: 2em; // Override bootstrap min-width - } } - .source-indicator { - padding: 4px 8px; + padding: 3px 9px; border: 2px solid $g5-pepper; background-color: $g5-pepper; color: $g13-mist; @@ -136,11 +22,11 @@ font-size: 12px; line-height: 1.5; border-radius: 3px; - margin-right: 18px; + margin-right: 16px; > .icon { display: inline-block; font-size: 16px; - margin: 0 5px 0 0; + margin: 0 4px 0 -2px; } -} +} \ No newline at end of file diff --git a/ui/src/style/enterprise_style/_enterprise-custom.scss b/ui/src/style/enterprise_style/_enterprise-custom.scss index 52ee45a8c8..13850c75d7 100644 --- a/ui/src/style/enterprise_style/_enterprise-custom.scss +++ b/ui/src/style/enterprise_style/_enterprise-custom.scss @@ -1,7 +1,9 @@ /* This is a bunch of stuff built on top of the bootstrap theme for the Chronograf app. */ - +html, body { + background-color: $g0-obsidian; +} body { display: flex; padding: 0; @@ -9,24 +11,18 @@ body { height: 100%; position: absolute; align-items: stretch; - /* Ensures sidebar and page-wrapper go full-height */ overflow: hidden; - background-color: $g0-obsidian; -} -/* - Chronograf Select Host Page - ---------------------------------------------- -*/ -body > #react-root { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; + > #react-root { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; - .container { - margin-top: 60px; + .container { + margin-top: 60px; + } } } @@ -34,76 +30,66 @@ body > #react-root { Layout ---------------------------------------------- */ - -.chronograf-wrapper { +.chronograf-root { + display: flex; + align-items: stretch; + position: absolute; width: 100%; - position: relative; - - > div { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - } - - &--flex { - display: flex; - align-items: stretch; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - } + height: 100%; + top: 0; + left: 0; + color: $g17-whisper; } - -.container-fluid { - /* Overriding left and right padding from the theme to be more spacious */ - padding-left: $page-wrapper-padding; - padding-right: $page-wrapper-padding; - max-width: $page-wrapper-max-width; -} -.page-wrapper, -.sidebar { - display: block; -} -.page-wrapper { +.page { position: relative; flex-grow: 1; overflow: hidden; - @include gradient-v($g18-cloud, $g19-ghost); } -.signup-flow-bg { - background-image: url(/assets/images/signup-bg.png); - background-position: center top; - background-repeat: no-repeat; - background-size: contain; -} - -.page-wrapper > div:not(.flash-messages):not(.page-spinner):not(.kapacitor-rule-page):not(.data-explorer-container) { +.page-contents { position: absolute; - top: 0; + top: $chronograf-page-header-height; left: 0; width: 100%; - height: 100%; + height: calc(100% - #{$chronograf-page-header-height}); overflow: auto; overflow-x: hidden; overflow-y: scroll; + @include custom-scrollbar($g2-kevlar,$c-pool); + @include gradient-v($g2-kevlar,$g0-obsidian); + + &--green-scrollbar { + @include custom-scrollbar($g2-kevlar,$c-rainforest); + } + &--purple-scrollbar { + @include custom-scrollbar($g2-kevlar,$c-comet); + } +} +.container-fluid { + padding: ($chronograf-page-header-height / 2) $page-wrapper-padding ($chronograf-page-header-height / 2) $page-wrapper-padding; + max-width: $page-wrapper-max-width; + + &.full-width { + max-width: 100%; + } } /* - Chronograf Page Header + Page Header ---------------------------------------------- */ -.chronograf-header { - background-color: $g20-white; +.page-header { height: $chronograf-page-header-height; - margin-bottom: 15px; + width: 100%; padding: 0 ($page-wrapper-padding + $scrollbar-width) 0 $page-wrapper-padding; display: flex; justify-content: center; align-items: center; + position: absolute; + top: 0; + left: 0; + background-color: $g0-obsidian; + border: none; + margin: 0; &__container { width: 100%; @@ -115,7 +101,7 @@ body > #react-root { } h1 { text-transform: uppercase; - font-size: 20px; + font-size: 17px; font-weight: 400; margin: 0; display: inline-block; @@ -140,42 +126,44 @@ body > #react-root { margin: 0 0 0 4px; } } + &.full-width .page-header__container { + max-width: 100%; + } } -.minimal-dropdown { - .dropdown-toggle { - font-size: 20px; - font-weight: 400; - background-color: transparent; - border: none; +/* + Custom Search Widget + ---------------------------------------------- +*/ +.users__search-widget { + position: relative; - &:hover { - .button-text { - color: $g10-wolf; - } - .caret { - color: $g10-wolf; - } + input.form-control { + position: relative; + width: 100%; + z-index: 1; + padding-left: 34px; + border-radius: 4px !important; + + &:focus + .input-group-addon { + color: $c-pool; } } - .button-text, - .caret { - display: inline-block; - vertical-align: middle; - } - .button-text { - transition: color 0.25s ease; - } - .caret { - transition: color 0.25s ease; - } - &.open { - .button-text { - color: $g10-wolf; - } - .caret { - color: $g10-wolf; - } + .input-group-addon { + padding: 0; + text-align: center; + line-height: 38px; + position: absolute; + color: $g10-wolf; + top: 0; + left: 0; + height: 100%; + z-index: 4; + border: 0; + width: 40px; + background-color: transparent; + transition: + color 0.25s ease; } } @@ -183,6 +171,33 @@ body > #react-root { Unsorted ---------------------------------------------- */ +.select-source-page { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: auto; + @include custom-scrollbar($g2-kevlar, $c-pool); + @include gradient-v($g2-kevlar, $g0-obsidian); +} +.text-right .btn { + margin: 0 0 0 4px; +} +.text-center .btn { + margin: 0 2px; +} +.default-source-label { + display: inline-block; + vertical-align: middle; + font-size: 13px; + font-weight: 500; + background-color: $g5-pepper; + color: $c-pool; + border-radius: 3px; + padding: 2px 6px; + margin-left: 4px; +} .progress-label { margin-bottom: 4px; color: $g11-sidewalk; @@ -193,31 +208,6 @@ body > #react-root { color: $g8-storm; } } -.flex-group { - margin: 0; - - .flex-space { - display: inline-block; - width: 20px; - } -} -.main { - margin-top: 60px; -} -.fake-panel-title { - margin-top: 25px; - margin-bottom: 25px; - &.match-search { - padding-top: 7px; - padding-bottom: 7px; - } -} -.modal#dbModal { - .modal-body { - width: 100%; - display: inline-block; - } -} .btn-block.dropdown-toggle { text-align: left; position: relative; @@ -233,9 +223,6 @@ body > #react-root { width: 100%; } } -.pointer { - cursor: pointer; -} .modal { form { padding: 0; @@ -251,146 +238,6 @@ body > #react-root { } } } -#accordion { - .panel-heading { - color: gray; - align-items: center; - - .progress { - width: 200px; - margin: 0 20px; - } - } -} - -.continuous-queries { - h1, h2, h3, h4, h5, h6 { - padding-bottom: 10px; - border-bottom: 1px solid whitesmoke; - } - pre code { - white-space: normal; - } - - &__empty { - text-align: center; - padding: 60px 0; - color: $g15-platinum; - - h1, h2, h3, h4, h5, h6 { - padding-bottom: 0; - border-bottom: none; - font-weight: 400; - } - - img { - width: 100px; - height: auto; - margin-bottom: 30px; - } - } -} - -.product-buttons { - margin-bottom: 20px; -} - - - -$telegraf: #f95f53; -$influxdb: #4591ED; -$kapacitor: #4ED8A0; -$chronograf: #C557FF; - -.influxdb-bg { - background-color: $influxdb; -} - -.telegraf-bg { - background-color: $telegraf; -} - -.chronograf-bg { - background-color: $chronograf; -} - -.kapacitor-bg { - background-color: $kapacitor; -} - -.btn-telegraf { - @extend .telegraf-bg; - - &.inactive { - background-color: lighten($telegraf, 25%); - color: #000000; - } -} - -.btn-influxdb { - @extend .influxdb-bg; - - &.inactive { - background-color: lighten($influxdb, 25%); - color: #000000; - } -} - -.btn-chronograf { - @extend .chronograf-bg; - - &.inactive { - background-color: lighten($chronograf, 25%); - color: #000000; - } -} - -.btn-kapacitor { - @extend .kapacitor-bg; - - &.inactive { - background-color: lighten($kapacitor, 25%); - color: #000000; - } -} - -.pinger { - color: #fff; -} - -.ping-pending { - color: yellow; - animation: blinker 1s linear infinite; -} - -.ping-success { - color: green; -} - -.ping-failure { - color: red; -} - -@keyframes blinker { - 50% { - opacity: 0.0; - } -} - -.profile-info { - color: #fff; - text-align: right; -} - -a { - &.btn { - color: #fff; - } -} - -.caret { - cursor: pointer; -} /* Custom Tabs @@ -436,55 +283,6 @@ a { } } -.flash-messages { - position: fixed; - left: 50%; - transform: translateX(-50%); - width: 570px; - top: 36px; - z-index: 9999; - - .alert { - font-size: 16px; - font-weight: 500; - border-width: 0; - color: $g20-white; - - &.alert-success { - background-color: $c-rainforest; - } - &.alert-primary { - background-color: $c-pool; - } - &.alert-warning { - background-color: $c-comet; - - } - &.alert-danger { - background-color: $c-dreamsicle; - } - - button.close { - position: absolute; - top: 50%; - right: 13px; - transform: translateY(-50%); - font-size: 16px; - text-shadow: none; - opacity: 0.6; - transition: opacity 0.25s ease; - - .icon { - color: $g20-white; - text-shadow: none; - } - &:hover { - opacity: 1; - } - } - } -} - /* Error Pages @@ -528,64 +326,6 @@ table.table.error-table { } } -/* - Database Manager polish - ---------------------------------------------- -*/ -.db-manager-stats { - display: flex; - align-items: center; - justify-content: space-between; - - h4 { - margin-bottom: 4px; - } - p { - color: $g12-forge; - } -} - -/* - Cluster Renaming UI - ---------------------------------------------- -*/ -.cluster-dropdown { - &__item { - position: relative; - - &:hover { - .cluster-dropdown__rename { - opacity: 1; - } - a { - background-color: $c-laser; - color: $g20-white; - } - } - } - &__rename { - z-index: 2; - opacity: 0; - position: absolute; - top: 50%; - right: 0; - width: 34px; - height: 100%; - transform: translateY(-50%); - border: 0; - background-color: transparent; - color: $c-hydrogen; - transition: - opacity 0.25s ease, - color 0.25s ease; - - &:hover { - color: $g20-white; - cursor: pointer; - } - } -} - /* Generic Empty State ---------------------------------------------- @@ -603,20 +343,16 @@ table.table.error-table { } } -.cluster-accounts > *:not(:last-child) { - margin-bottom: 12px; -} - /* Static Form Controls ---------------------------------------------- */ +$form-static-checkbox-size: 16px; .form-control-static { - border: 2px solid $g17-whisper; - height: 40px; + border: 2px solid $g5-pepper; + height: auto; border-radius: 4px; - padding: 0 18px; - line-height: 36px; + padding: 7px 12px; position: relative; input[type="checkbox"] { @@ -629,8 +365,13 @@ table.table.error-table { // Faux Checkbox & + label { + font-size: 14px !important; + line-height: 16px; + color: $g11-sidewalk; + font-weight: 500; transition: color 0.25s ease; - margin-left: 24px; + margin: 0; + padding: 0 0 0 (12px + $form-static-checkbox-size + 6px); user-select: none; -ms-user-select: none; -moz-user-selct: none; @@ -640,22 +381,22 @@ table.table.error-table { content: ''; position: absolute; top: 50%; - left: 18px; + left: 12px; transform: translateY(-50%); - width: 16px; - height: 16px; - background-color: $g18-cloud; - border: 2px solid $g17-whisper; + width: $form-static-checkbox-size; + height: $form-static-checkbox-size; + background-color: $g2-kevlar; + border: 2px solid $g5-pepper; border-radius: 3px; z-index: 2; transition: - background-color 0.25s ease; + border-color 0.25s ease; } &:after { content: ''; position: absolute; top: 50%; - left: (18px + (16px / 2)); + left: (12px + ($form-static-checkbox-size / 2)); transform: translate(-50%,-50%) scale(2,2); opacity: 0; width: 6px; @@ -669,15 +410,16 @@ table.table.error-table { } &:hover { cursor: pointer; + color: $g20-white; &:before { - background-color: $g20-white; + border-color: $g6-smoke; } } } // Faux Checkbox (Checked) &:checked + label { - color: $c-pool; + color: $g20-white; &:after { opacity: 1; @@ -686,15 +428,6 @@ table.table.error-table { } } } -/* - Button alignment in tables - ---------------------------------------------- -*/ - -table .text-right .btn { - margin: 0 0 0 6px; -} - /* Stuff for making Tables of Data more readable @@ -731,20 +464,6 @@ table .monotype { } } -/* - Sources / Kapacitor Config Pages - ---------------------------------------------- -*/ - -#source-form-page, -#manage-sources-page, -.kapacitor { - .chronograf-header { - margin-bottom: 45px; - } -} - - /* Empty State for Tables ---------------------------------------------- @@ -766,4 +485,4 @@ table .monotype { margin-bottom: 75px; } } -} +} \ No newline at end of file diff --git a/ui/src/style/enterprise_style/application.scss b/ui/src/style/enterprise_style/application.scss index e54de474c4..2784be6eb6 100644 --- a/ui/src/style/enterprise_style/application.scss +++ b/ui/src/style/enterprise_style/application.scss @@ -4,14 +4,14 @@ @import 'font-awesome'; @import 'fonts'; @import 'theme'; +@import 'theme-dark'; @import 'tasks'; @import 'users'; -@import 'sub-page'; @import 'roles'; @import 'retention-policies'; @import 'signup'; -@import 'modals'; @import 'enterprise-custom'; +@import 'flash-messages'; @import 'dygraph-override'; @import 'auth-page'; @import 'hosts'; diff --git a/ui/src/style/enterprise_style/flash-messages.scss b/ui/src/style/enterprise_style/flash-messages.scss new file mode 100644 index 0000000000..2564cf61a9 --- /dev/null +++ b/ui/src/style/enterprise_style/flash-messages.scss @@ -0,0 +1,52 @@ +/* + Styles for Flash Messages + ---------------------------------------------- +*/ +.flash-messages { + position: fixed; + left: 50%; + transform: translateX(-50%); + width: 570px; + top: 36px; + z-index: 9999; + + .alert { + font-size: 16px; + font-weight: 500; + border-width: 0; + color: $g20-white; + + &.alert-success { + background-color: $c-rainforest; + } + &.alert-primary { + background-color: $c-pool; + } + &.alert-warning { + background-color: $c-comet; + + } + &.alert-danger { + background-color: $c-dreamsicle; + } + + button.close { + position: absolute; + top: 50%; + right: 13px; + transform: translateY(-50%); + font-size: 16px; + text-shadow: none; + opacity: 0.6; + transition: opacity 0.25s ease; + + .icon { + color: $g20-white; + text-shadow: none; + } + &:hover { + opacity: 1; + } + } + } +} \ No newline at end of file diff --git a/ui/src/style/enterprise_style/hosts.scss b/ui/src/style/enterprise_style/hosts.scss index 2904a531fb..7a5d164c6c 100644 --- a/ui/src/style/enterprise_style/hosts.scss +++ b/ui/src/style/enterprise_style/hosts.scss @@ -1,146 +1,7 @@ /* - Hosts Dashboard + Styles for Hosts List & Host View ---------------------------------------------- */ -.kapacitor-rules-page, -.hosts-page { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden !important; - @include gradient-v($g2-kevlar,$g0-obsidian); - color: $g17-whisper; - - .chronograf-header { - position: absolute; - top: 0; - width: 100%; - margin: 0; - background-color: $g0-obsidian; - } - .hosts-page-scroll-container { - position: absolute; - top: $chronograf-page-header-height; - left: 0; - width: 100%; - height: calc(100% - #{$chronograf-page-header-height}); - overflow: auto; - overflow-x: hidden; - overflow-y: scroll; - @include custom-scrollbar($g2-kevlar,$c-pool); - - .container-fluid { - padding-bottom: ($chronograf-page-header-height / 2); - } - } - - .panel-minimal { - border: 0; - - .panel-title { - color: $g17-whisper !important; - } - .panel-body { - padding: 30px; - background-color: $g3-castle; - border: 0; - color: $g17-whisper; - - > *:first-child { - margin-top: 0; - } - > *:last-child { - margin-bottom: 0; - } - - table { - th,td { - border-color: $g5-pepper; - } - th { - color: $g17-whisper; - } - td { - color: $g14-chromium; - } - tbody tr:last-child td { - border-bottom: 2px solid $g5-pepper; - } - } - } - } - - .users__search-widget { - position: relative; - - input.form-control { - position: relative; - width: 100%; - z-index: 1; - background-color: $g2-kevlar; - border-color: $g5-pepper; - color: $g17-whisper; - border-radius: 4px; - padding-left: 34px; - - &:focus { - border-color: $c-pool !important; - color: $c-pool; - - &::-webkit-input-placeholder { - color: $c-pool; - } - &::-moz-placeholder { - color: $c-pool; - } - &:-ms-input-placeholder { - color: $c-pool; - } - &:-moz-placeholder { - color: $c-pool; - } - - & + .input-group-addon { - color: $c-pool; - } - } - &::-webkit-input-placeholder { - color: $g11-sidewalk; - } - &::-moz-placeholder { - color: $g11-sidewalk; - } - &:-ms-input-placeholder { - color: $g11-sidewalk; - } - &:-moz-placeholder { - color: $g11-sidewalk; - } - } - .input-group-addon { - padding: 0; - text-align: center; - line-height: 38px; - position: absolute; - top: 0; - left: 0; - height: 100%; - z-index: 2; - border: 0; - width: 40px; - background-color: transparent; - transition: - color 0.25s ease; - } - } -} -.hosts-dashboard { - max-width: 100%; - padding-top: 30px; - padding-bottom: 30px; -} .graph-panel__graph-container.hosts-graph { padding: 8px 16px; } @@ -155,26 +16,6 @@ color: $g14-chromium; border-radius: 4px 4px 0 0; } -.hosts-dashboard-header { - .chronograf-header__container { - max-width: 100%; - } - .chronograf-header__left { - flex-direction: row; - align-items: center; - - > * { - margin-right: 15px; - &:last-child { - margin-right: 0; - } - } - } - .chronograf-header__right { - font-size: inherit; - } -} - .host-list--active-source { text-transform: uppercase; font-size: 15px; @@ -233,7 +74,6 @@ } } } - .host-table-header { display: flex; align-items: center; diff --git a/ui/src/style/enterprise_style/kapacitor.scss b/ui/src/style/enterprise_style/kapacitor.scss index 2afcf89c44..04a09d6ca7 100644 --- a/ui/src/style/enterprise_style/kapacitor.scss +++ b/ui/src/style/enterprise_style/kapacitor.scss @@ -21,38 +21,6 @@ $kap-dot-color: $c-rainforest; $kapacitor-font-sm: 13px; -.kapacitor-rule-page { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; - @include gradient-v($g2-kevlar,$g0-obsidian); - color: $g17-whisper; - - .chronograf-header { - background-color: $g0-obsidian; - position: absolute; - top: 0; - left: 0; - width: 100%; - margin: 0; - } -} -.rule-builder-wrapper { - position: absolute; - top: $chronograf-page-header-height; - left: 0; - width: 100%; - height: calc(100% - #{$chronograf-page-header-height}); - overflow: auto; - @include custom-scrollbar($g0-obsidian,$kapacitor-accent); - - .container-fluid { - padding-bottom: $chronograf-page-header-height; - } -} .rule-builder { width: 100%; display: flex; @@ -204,6 +172,10 @@ div.query-editor.kapacitor-metric-selector { border-radius: $kap-radius-lg $kap-radius-lg 0 0; border: 0; padding: $kap-padding-md $kap-padding-lg; + + code { + line-height: 1.5em; + } } // Tabs @@ -553,8 +525,7 @@ div.query-editor.kapacitor-metric-selector { .rule-builder { input[type="text"] { background-color: $kapacitor-graphic-color; - color: $kapacitor-accent; - border-color: $g5-pepper; + color: $kapacitor-accent !important; font-weight: 600; font-size: $kapacitor-font-sm; font-family: Consolas, "Lucida Console", Monaco, monospace; @@ -564,7 +535,7 @@ div.query-editor.kapacitor-metric-selector { border-color: $kapacitor-accent; outline: none; box-shadow: none; - color: $g20-white; + color: $g20-white !important; } } .dropdown-toggle, @@ -615,40 +586,6 @@ div.query-editor.kapacitor-metric-selector { .size-49 { width: 49px; } - - .dropdown-menu { - width: 100%; - min-width: 100%; - padding: 0; - margin: 0; - border-radius: 4px; - @include gradient-v($c-viridian,$c-ocean); - - > li { - width: 100%; - } - > li > a { - text-transform: capitalize; - font-size: $kapacitor-font-sm; - padding: ($kap-padding-sm / 2) $kap-padding-sm; - font-weight: 600; - color: transparentize($g20-white, 0.25); - border-radius: 0; - - &:hover { - background-color: $c-rainforest; - color: $g20-white; - } - } - > li:first-child > a { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - } - > li:last-child > a { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - } } .chronograf-header__editable { @@ -656,6 +593,13 @@ div.query-editor.kapacitor-metric-selector { &:hover { color: $g13-mist; + cursor: text !important; + } + .icon { + cursor: inherit; + margin-left: 5px; + position: relative; + top: -1.5px; } } .chronograf-header__editing { diff --git a/ui/src/style/enterprise_style/modals.scss b/ui/src/style/enterprise_style/modals.scss deleted file mode 100644 index 24aedee1c9..0000000000 --- a/ui/src/style/enterprise_style/modals.scss +++ /dev/null @@ -1,11 +0,0 @@ -#welcomeModal { - .modal-header, - .modal-footer, { - display: flex; - justify-content: center; - } -} - -.modal-error { - color: red; -} diff --git a/ui/src/style/enterprise_style/sub-page.scss b/ui/src/style/enterprise_style/sub-page.scss deleted file mode 100644 index 1c25baff92..0000000000 --- a/ui/src/style/enterprise_style/sub-page.scss +++ /dev/null @@ -1,24 +0,0 @@ -.panel-group.sub-page { - - .panel { - margin-bottom: 16px; - } - .panel-collapse > .panel-body { - border-top: 2px solid $g19-ghost; - } - .panel-heading { - padding: 10px 30px; - - .panel-title a[data-toggle="collapse"] { - font-weight: 400; - } - - p { - margin: 0 20px 0 0; - font-size: 14px; - display: inline-block; - vertical-align: middle; - } - } -} - diff --git a/ui/src/style/enterprise_style/theme-dark.scss b/ui/src/style/enterprise_style/theme-dark.scss new file mode 100644 index 0000000000..dcbc0efac1 --- /dev/null +++ b/ui/src/style/enterprise_style/theme-dark.scss @@ -0,0 +1,357 @@ +/* + Dark Theme Styles + ---------------------------------------------- + This stylesheet has overrides for the theme, so you are + going to see al ot of !important =( + + This is design debt. One day the theme will not have to be overrided +*/ + + +/* + Dark Panel Styles + ---------------------------------------------- +*/ +.row:only-child .panel, +.row:last-child .panel { + margin-bottom: 0; +} +.panel hr { + background-color: $g5-pepper; +} +.panel-minimal { + border: 0; + + .panel-title { + color: $g10-wolf !important; + } + + .panel-body { + padding: 30px; + background-color: $g3-castle; + border: 0; + color: $g13-mist; + + > *:first-child { + margin-top: 0; + } + > *:last-child { + margin-bottom: 0; + } + + table { + th,td { + border-color: $g5-pepper; + } + th { + color: $g17-whisper; + } + td { + color: $g14-chromium; + } + tbody tr:last-child td { + border-bottom: 2px solid $g5-pepper; + } + } + } +} + + + +/* + Dark Buttons + ---------------------------------------------- +*/ +.btn { + border: 0; + transition: + background-color 0.25s ease, + color 0.25s ease, + box-shadow 0.25s ease; +} +.btn.btn-sm { + font-size: 13px; + line-height: 30px !important; + height: 30px !important; + padding: 0 9px !important; +} +.btn.btn-xs .icon { + position: relative; + top: -1px; +} + +/* + Dark Inputs + ---------------------------------------------- +*/ +.form-group { + margin-bottom: 9px; +} +.form-group label { + font-size: 12px; + line-height: 12px; + font-weight: 600; + margin-bottom: 4px; + padding: 0 13px; +} +.form-control { + padding: 0 13px; + background-color: $g2-kevlar !important; + border-color: $g5-pepper !important; + color: $g15-platinum !important; + + &::-webkit-input-placeholder { color: $g10-wolf; } + &::-moz-placeholder { color: $g10-wolf; } + &:-ms-input-placeholder { color: $g10-wolf; } + &:-moz-placeholder { color: $g10-wolf; } + + &:hover { + border-color: $g6-smoke !important; + } + + &:focus { + border-color: $c-pool !important; + box-shadow: 0 0 6px 0px $c-pool !important; + color: $g20-white !important; + } + + &--green:focus { + border-color: $c-rainforest !important; + box-shadow: 0 0 6px 0px $c-rainforest !important; + } +} +.form-helper { + margin: 4px 0 !important; + font-weight: 400 !important; + font-style: italic; + line-height: 16px !important; +} +.form-group-submit { + margin-top: 30px; +} + + + + + +/* + Dark Dropdowns + ---------------------------------------------- +*/ +.dropdown-toggle { + position: relative; + text-align: left; + + .caret { + position: absolute; + top: calc(50% + 1px); + right: 8px; + transform: translateY(-50%); + } +} +.dropdown-menu { + float: none !important; + width: 100%; + min-width: 100%; + max-width: 100%; + margin: 0 !important; + padding: 0 !important; + min-height: 70px; + max-height: 290px; + overflow: auto; + @include custom-scrollbar($c-pool,$c-laser); + @include gradient-h($c-ocean,$c-pool); + box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8); + + > li { + width: 100%; + font-size: 0px; + + &:hover { + @include gradient-h($c-laser,$c-pool); + } + } + > li > a { + width: 100%; + border-radius: 0 !important; + display: inline-block; + padding: 7px 9px; + font-size: 13px; + line-height: 15px; + font-weight: 500; + color: $c-yeti !important; + background-color: transparent; + transition: + color 0.25s ease; + + &:hover { + cursor: pointer; + background-color: transparent; + color: $g20-white !important; + } + } + > li:last-child a { + border-radius: 0 0 3px 3px; + } + > li:first-child a { + border-radius: 3px 3px 0 0; + } +} +.dropdown.dropdown-kapacitor .dropdown-menu { + @include custom-scrollbar($c-rainforest,$c-honeydew); + @include gradient-h($c-pool,$c-rainforest); + + > li:hover { + @include gradient-h($c-laser,$c-rainforest); + } + > li > a { + color: $c-mint !important; + &:hover { + color: $g20-white !important; + } + } +} +.dropdown.dropdown-chronograf .dropdown-menu { + @include custom-scrollbar($c-comet,$c-potassium); + @include gradient-h($c-ocean,$c-comet); + + > li:hover { + @include gradient-h($c-laser,$c-comet); + } + > li > a { + color: $c-cremedeviolette !important; + &:hover { + color: $g20-white !important; + } + } +} + +/* Dropdown Actions */ +.dropdown-item { + position: relative; + + > a { + position: relative; + z-index: 1; + } +} +.dropdown-item__actions { + z-index: 2; + position: absolute; + top: 0; + right: 3px; + height: 100%; + width: auto; + display: flex; + align-items: center; + justify-content: flex-end; +} +.dropdown-item__action { + padding: 0; + margin: 0; + width: 24px; + height: 24px; + border-radius: 2px; + background-color: transparent; + border: none !important; + font-size: 13px; + transition: + text-shadow 0.25s ease, + color 0.25s ease; + color: $c-sapphire; + + &[data-target="#deleteExplorerModal"] .icon { + position: relative; + right: -1px; + } + + &:hover { + color: $g20-white; + text-shadow: + 0 0 2px $c-hydrogen, + 0 0 3px $c-laser, + 0 0 6px $c-ocean; + background-color: transparent; + } +} + +/* + Dark Code Samples + ---------------------------------------------- +*/ + +code { + display: inline-block; + background-color: $g0-obsidian; + color: $c-comet; + border: 0 !important; + border-radius: 2px; + padding: 2.5px 5px 2.5px 4px; + margin: 0 1px 0 2px; + line-height: 11px; +} + + +/* + Dark Modals + ---------------------------------------------- +*/ + +.modal-backdrop { + background: $c-pool; + background: -moz-linear-gradient(-45deg, $c-pool 0%, $c-comet 100%); + background: -webkit-linear-gradient(-45deg, $c-pool 0%,$c-comet 100%); + background: linear-gradient(135deg, $c-pool 0%,$c-comet 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$c-pool', endColorstr='$c-comet',GradientType=1 ); +} + +.modal-content { + background-color: $g3-castle; +} +.modal-header, +.modal-body, +.modal-footer { + background-color: transparent; + color: $g13-mist; + padding-left: ($sidebar-width / 2); + padding-right: ($sidebar-width / 2); +} +.modal-body { + padding-top: 0; + padding-bottom: 0; +} +.modal-title { + color: $g18-cloud !important; +} +.modal-header .close { + transition: none; + outline: none; + + &:before, + &:after { + display: block; + content: ''; + width: 20px; + height: 2px; + border-radius: 1px; + background-color: $g7-graphite; + transition: background-color 0.25s ease; + position: absolute; + top: 50%; + left: 50%; + } + &:before { transform: translate(-50%,-50%) rotate(45deg); } + &:after { transform: translate(-50%,-50%) rotate(-45deg); } + + &:hover { + cursor: pointer; + + &:before, + &:after { + background-color: $g13-mist; + } + } + span { + display: none; + } +} \ No newline at end of file