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

Merge pull request #1093 from influxdata/ui-polish 

Custom Cursors + Other Polish
pull/10616/head
Alex Paxton 2017-03-28 10:55:15 -07:00 committed by GitHub
parent 67c2b98f68 1cbe69e231
commit 6c4ceedcfa
38 changed files with 256 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ui/assets/images/cursor-default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
ui/assets/images/cursor-ew-resize.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
ui/assets/images/cursor-invert.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
ui/assets/images/cursor-move.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
ui/assets/images/cursor-nesw-resize.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
ui/assets/images/cursor-ns-resize.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
ui/assets/images/cursor-nwse-resize.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
ui/assets/images/cursor-pointer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
ui/assets/images/cursor-text.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

12
ui/src/hosts/components/HostsTable.js
View File

@ -121,9 +121,9 @@ const HostsTable = React.createClass({
<thead>
<tr>
<th onClick={() => this.updateSort('name')} className={this.sortableClasses('name')}>Hostname</th>
<th onClick={() => this.updateSort('deltaUptime')} className={this.sortableClasses('deltaUptime')}>Status</th>
<th onClick={() => this.updateSort('cpu')} className={this.sortableClasses('cpu')}>CPU</th>
<th onClick={() => this.updateSort('load')} className={this.sortableClasses('load')}>Load</th>
<th onClick={() => this.updateSort('deltaUptime')} className={this.sortableClasses('deltaUptime')} style={{width: '74px'}}>Status</th>
<th onClick={() => this.updateSort('cpu')} className={this.sortableClasses('cpu')} style={{width: '70px'}}>CPU</th>
<th onClick={() => this.updateSort('load')} className={this.sortableClasses('load')} style={{width: '68px'}}>Load</th>
<th>Apps</th>
</tr>
</thead>
@ -176,9 +176,9 @@ const HostRow = React.createClass({
return (
<tr>
<td className="monotype"><Link to={`/sources/${source.id}/hosts/${name}`}>{name}</Link></td>
<td className="text-center"><div className={stateStr}></div></td>
<td className="monotype">{isNaN(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`}</td>
<td className="monotype">{isNaN(load) ? 'N/A' : `${load.toFixed(2)}`}</td>
<td style={{width: '74px'}}><div className={stateStr}></div></td>
<td className="monotype" style={{width: '70px'}}>{isNaN(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`}</td>
<td className="monotype" style={{width: '68px'}}>{isNaN(load) ? 'N/A' : `${load.toFixed(2)}`}</td>
<td className="monotype">
{apps.map((app, index) => {
return (

2
ui/src/shared/components/LineGraph.js
View File

@ -105,7 +105,7 @@ export default React.createClass({
return (
<div
className={classNames({"graph--hasYLabel": !!(options.ylabel || options.y2label)})}
className={classNames("dygraph", {"graph--hasYLabel": !!(options.ylabel || options.y2label)})}
style={{height: '100%'}}
>
{isRefreshing ? this.renderSpinner() : null}

2
ui/src/shared/components/SourceIndicator.js
View File

@ -12,7 +12,7 @@ const SourceIndicator = React.createClass({
}
return (
<div className="source-indicator">
<span className="icon server"></span>
<span className="icon server2"></span>
{sourceName}
</div>
);

2
ui/src/side_nav/components/SideNav.js
View File

@ -42,7 +42,7 @@ const SideNav = React.createClass({
<NavListItem link={`${sourcePrefix}/alerts`}>Alert History</NavListItem>
<NavListItem link={`${sourcePrefix}/alert-rules`}>Kapacitor Rules</NavListItem>
</NavBlock>
<NavBlock icon="crown" link={`${sourcePrefix}/admin`}>
<NavBlock icon="crown2" link={`${sourcePrefix}/admin`}>
<NavHeader link={`${sourcePrefix}/admin`} title="Admin" />
</NavBlock>
<NavBlock icon="cog-thick" link={`${sourcePrefix}/manage-sources`}>

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

@ -1,6 +1,7 @@
// Modules
@import 'modules/influx-colors';
@import 'modules/variables';
@import 'modules/custom-cursors';
// Mixins
@import 'mixins/mixins';
@ -51,4 +52,4 @@
@import 'pages/admin';
// TODO
@import 'unsorted';
@import 'unsorted';

7
ui/src/style/components/dygraphs.scss
View File

@ -1,5 +1,12 @@
// Overrides default Dygraphs styles
.dygraph {
&:hover {
cursor: $cc-invert;
}
}
.graph-vertical-marker {
top: 0;
bottom: 0;

2
ui/src/style/components/input-tag-list.scss
View File

@ -27,6 +27,6 @@ $input-tag-item-height: 24px;
&:hover {
color: $c-dreamsicle;
cursor: pointer;
cursor: $cc-pointer;
}
}

2
ui/src/style/components/resizer.scss
View File

@ -59,7 +59,7 @@ $resizer-color-active: $c-pool;
background-color 0.19s ease;
}
&:hover {
cursor: ns-resize;
cursor: $cc-resize-ns;
&:before {
background-color: $resizer-color-hover;

4
ui/src/style/components/tables.scss
View File

@ -14,7 +14,7 @@ table {
font-weight: 500;
color: $g14-chromium !important;
border: 0 !important;
padding: 4px 8px !important;
padding: 6px 8px !important;
}
tbody tr:hover {
background-color: $g5-pepper;
@ -83,7 +83,7 @@ table .monotype {
}
&:hover {
cursor: pointer;
cursor: $cc-pointer;
color: $g19-ghost;
background-color: $g5-pepper;

4
ui/src/style/external/fixed-data-table-base.scss vendored
View File

@ -95,7 +95,7 @@
}
.fixedDataTableCellLayout_columnResizerContainer:hover {
cursor: ew-resize;
cursor: $cc-resize-ew;
}
.fixedDataTableCellLayout_columnResizerContainer:hover .fixedDataTableCellLayout_columnResizerKnob {
@ -120,7 +120,7 @@
*/
.fixedDataTableColumnResizerLineLayout_mouseArea {
cursor: ew-resize;
cursor: $cc-resize-ew;
position: absolute;
right: -5px;
width: 12px;

4
ui/src/style/external/fixed-data-table.scss vendored
View File

@ -95,7 +95,7 @@
}
.fixedDataTableCellLayout_columnResizerContainer:hover {
cursor: ew-resize;
cursor: $cc-resize-ew;
}
.fixedDataTableCellLayout_columnResizerContainer:hover .fixedDataTableCellLayout_columnResizerKnob {
@ -120,7 +120,7 @@
*/
.fixedDataTableColumnResizerLineLayout_mouseArea {
cursor: ew-resize;
cursor: $cc-resize-ew;
position: absolute;
right: -5px;
width: 12px;

BIN
ui/src/style/fonts/icomoon.eot
View File

Binary file not shown.

2
ui/src/style/fonts/icomoon.svg
View File

@ -84,6 +84,8 @@
<glyph unicode="&#xe948;" glyph-name="heroku-simple" d="M348.16-120.32l-166.4-133.12c-2.56-2.56-2.56-2.56-5.12-2.56s-2.56 0-5.12 0c-2.56 2.56-5.12 5.12-5.12 7.68v281.6c0 2.56 2.56 7.68 5.12 7.68 2.56 2.56 7.68 0 10.24-2.56l166.4-148.48c2.56-2.56 2.56-5.12 2.56-7.68 2.56 0 0-2.56-2.56-2.56zM857.6-245.76c0-5.12-5.12-10.24-10.24-10.24h-166.4c-5.12 0-10.24 5.12-10.24 10.24v391.68c0 30.72 0 64-20.48 81.92-17.92 15.36-53.76 20.48-102.4 12.8-66.56-10.24-140.8-28.16-207.36-48.64-5.12 0-7.68-2.56-10.24-2.56-5.12-2.56-10.24-2.56-15.36-5.12-2.56 0-7.68-2.56-10.24-2.56-5.12-2.56-10.24-2.56-12.8-5.12-2.56 0-7.68-2.56-10.24-2.56-5.12-2.56-7.68-2.56-12.8-5.12-2.56-2.56-7.68-2.56-10.24-5.12s-7.68-2.56-10.24-5.12c-5.12-2.56-7.68-2.56-12.8-5.12-2.56 0-5.12-2.56-7.68-2.56-5.12-2.56-7.68-5.12-12.8-7.68-2.56 0-2.56-2.56-5.12-2.56-5.12-2.56-7.68-5.12-12.8-7.68 0 0-2.56 0-2.56-2.56-5.12-2.56-7.68-5.12-12.8-7.68-2.56 0-2.56-2.56-5.12-2.56 0 0 0 0 0 0s0 0 0 0-2.56 0-2.56 0c0 0 0 0 0 0s0 0 0 0 0 0 0 0-2.56 2.56-2.56 2.56c0 0 0 0 0 2.56 0 0 0 0 0 0v629.76c0 5.12 5.12 10.24 10.24 10.24h166.4c5.12 0 10.24-5.12 10.24-10.24v-378.88c87.040 25.6 202.24 48.64 307.2 33.28 117.76-15.36 197.12-69.12 197.12-276.48v-378.88zM739.84 517.12c-2.56-2.56-5.12-5.12-7.68-5.12h-166.4c-2.56 0-7.68 2.56-7.68 5.12s-2.56 7.68 0 10.24c40.96 56.32 115.2 158.72 115.2 230.4 0 5.12 5.12 10.24 10.24 10.24h166.4c5.12 0 10.24-5.12 10.24-10.24-2.56-76.8-79.36-181.76-120.32-240.64z" />
<glyph unicode="&#xe949;" glyph-name="refresh" d="M417.28 442.88l-261.12 28.16c-15.36 2.56-25.6 15.36-25.6 30.72l28.16 261.12c0 7.68 10.24 10.24 17.92 5.12l248.32-307.2c5.12-10.24 0-20.48-7.68-17.92zM865.28-248.32l28.16 261.12c2.56 15.36-10.24 28.16-25.6 30.72l-261.12 28.16c-7.68 0-12.8-7.68-7.68-15.36l248.32-307.2c5.12-7.68 15.36-5.12 17.92 2.56zM834.56 578.56c-87.040 87.040-202.24 133.12-322.56 133.12-110.080 0-217.6-40.96-302.080-112.64l-10.24-10.24 58.88-58.88 10.24 7.68c84.48 74.24 199.68 104.96 314.88 81.92 51.2-10.24 99.84-30.72 143.36-61.44 130.56-94.72 186.88-253.44 145.92-404.48-5.12-20.48 5.12-43.52 23.040-51.2 5.12-2.56 10.24-2.56 17.92-2.56 5.12 0 12.8 2.56 17.92 5.12 10.24 5.12 20.48 15.36 23.040 28.16 43.52 161.28-2.56 327.68-120.32 445.44zM755.2-28.16c-84.48-74.24-199.68-104.96-314.88-81.92-51.2 10.24-99.84 30.72-143.36 61.44-130.56 94.72-186.88 250.88-145.92 404.48 5.12 20.48-5.12 43.52-23.040 51.2-10.24 5.12-23.040 5.12-35.84 0-10.24-5.12-17.92-15.36-20.48-25.6-46.080-161.28-2.56-327.68 117.76-445.44 87.040-87.040 202.24-133.12 322.56-133.12 110.080 0 217.6 40.96 302.080 112.64l10.24 10.24-58.88 58.88-10.24-12.8z" />
<glyph unicode="&#xe94a;" glyph-name="pause" d="M435.2-115.2c0-20.48-17.92-38.4-38.4-38.4h-153.6c-20.48 0-38.4 17.92-38.4 38.4v742.4c0 20.48 17.92 38.4 38.4 38.4h153.6c20.48 0 38.4-17.92 38.4-38.4v-742.4zM819.2-115.2c0-20.48-17.92-38.4-38.4-38.4h-153.6c-20.48 0-38.4 17.92-38.4 38.4v742.4c0 20.48 17.92 38.4 38.4 38.4h153.6c20.48 0 38.4-17.92 38.4-38.4v-742.4z" />
<glyph unicode="&#xe94b;" glyph-name="crown2" d="M882.4-64.4l135.2 523.4c2.2 8.4-7 15.2-14.4 10.4l-262.4-168.2c-10.4-6.6-24.2-3.8-31.2 6.4l-189.8 276.4c-3.8 5.6-12 5.6-15.8 0l-189.6-276.6c-7-10.2-20.8-13-31.2-6.4l-262.4 168.2c-7.4 4.6-16.6-2-14.4-10.4l135.2-523.4c2.8-11 12.8-18.8 24.2-18.8h692.6c11.2 0.2 21.2 8 24 19z" />
<glyph unicode="&#xe94c;" glyph-name="server2" d="M992.4 729.2h-960.8c-10.2 0-20.4-10.2-20.4-20.4v-203.8c0-10.2 10.2-20.4 20.4-20.4h960.6c10.2 0 20.4 10.2 20.4 20.4v203.8c0.2 10.2-10 20.4-20.2 20.4zM241.6 556.4c0-7.4-6-13.6-13.6-13.6h-101c-7.4 0-13.6 6-13.6 13.6v101c0 7.4 6 13.6 13.6 13.6h101c7.4 0 13.6-6 13.6-13.6v-101zM992.4 378.4h-960.8c-10.2 0-20.4-10.2-20.4-20.4v-204c0-10.2 10.2-20.4 20.4-20.4h960.6c10.2 0 20.4 10.2 20.4 20.4v204c0.2 10.2-10 20.4-20.2 20.4zM241.6 205.6c0-7.4-6-13.6-13.6-13.6h-101c-7.4 0-13.6 6-13.6 13.6v100.8c0 7.4 6 13.6 13.6 13.6h101c7.4 0 13.6-6 13.6-13.6v-100.8zM992.4 47.6h-960.8c-10.2 0-20.4-10.2-20.4-20.4v-203.8c0-10.2 10.2-20.4 20.4-20.4h960.6c10.2 0 20.4 10.2 20.4 20.4v203.8c0.2 10.2-10 20.4-20.2 20.4zM241.6-125.2c0-7.4-6-13.6-13.6-13.6h-101c-7.4 0-13.6 6-13.6 13.6v101c0 7.4 6 13.6 13.6 13.6h101c7.4 0 13.6-6 13.6-13.6v-101z" />
<glyph unicode="&#xea88;" glyph-name="google" d="M522.2 329.2v-175.6h290.4c-11.8-75.4-87.8-220.8-290.4-220.8-174.8 0-317.4 144.8-317.4 323.2s142.6 323.2 317.4 323.2c99.4 0 166-42.4 204-79l139 133.8c-89.2 83.6-204.8 134-343 134-283 0-512-229-512-512s229-512 512-512c295.4 0 491.6 207.8 491.6 500.2 0 33.6-3.6 59.2-8 84.8l-483.6 0.2z" />
<glyph unicode="&#xea8a;" glyph-name="google3" d="M512 768c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM519.6-128c-212.2 0-384 171.8-384 384s171.8 384 384 384c103.6 0 190.4-37.8 257.2-100.4l-104.2-100.4c-28.6 27.4-78.4 59.2-153 59.2-131.2 0-238-108.6-238-242.4s107-242.4 238-242.4c152 0 209 109.2 217.8 165.6h-217.8v131.6h362.6c3.2-19.2 6-38.4 6-63.6 0.2-219.4-146.8-375.2-368.6-375.2z" />
<glyph unicode="&#xea8b;" glyph-name="google-plus" d="M325.8 310.6v-111.8h184.8c-7.4-48-55.8-140.6-184.8-140.6-111.2 0-202 92.2-202 205.8s90.8 205.8 202 205.8c63.4 0 105.6-27 129.8-50.2l88.4 85.2c-56.8 53-130.4 85.2-218.2 85.2-180.2-0.2-325.8-145.8-325.8-326s145.6-325.8 325.8-325.8c188 0 312.8 132.2 312.8 318.4 0 21.4-2.4 37.8-5.2 54h-307.6zM1024 320h-96v96h-96v-96h-96v-96h96v-96h96v96h96z" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 72 KiB

BIN
ui/src/style/fonts/icomoon.ttf
View File

Binary file not shown.

BIN
ui/src/style/fonts/icomoon.woff
View File

Binary file not shown.

BIN
ui/src/style/fonts/icomoon.woff2
View File

Binary file not shown.

4
ui/src/style/layout/page.scss
View File

@ -244,7 +244,7 @@
background-color 0.25s ease;
&:hover {
cursor: pointer;
cursor: $cc-pointer;
background-color: $g18-cloud;
color: $g9-mountain;
}
@ -390,7 +390,7 @@ $form-static-checkbox-size: 16px;
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&:hover {
cursor: pointer;
cursor: $cc-pointer;
color: $g20-white;
&:before {

6
ui/src/style/layout/sidebar.scss
View File

@ -49,7 +49,7 @@ $sidebar-logo-color: $g8-storm;
&:hover {
background-color: $g9-mountain;
cursor: pointer;
cursor: $cc-pointer;
}
}
@ -121,7 +121,7 @@ $sidebar-logo-color: $g8-storm;
}
&:hover {
cursor: pointer;
cursor: $cc-pointer;
.sidebar__icon {
color: $sidebar-icon-hover;
@ -270,7 +270,7 @@ $sidebar-logo-color: $g8-storm;
transform: translate(-50%,-50%);
}
&:hover {
cursor: pointer;
cursor: $cc-pointer;
background-color: $sidebar-item-hover;
color: $sidebar-icon-hover;

8
ui/src/style/mixins/mixins.scss
View File

@ -22,10 +22,10 @@
}
@mixin gradient-diag-down($startColor, $endColor) {
background: $startColor;
background: -moz-linear-gradient(135deg, $startColor 0%, $endColor 100%);
background: -webkit-linear-gradient(135deg, $startColor 0%,$endColor 100%);
background: linear-gradient(135deg, $startColor 0%,$endColor 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 );
background: -moz-linear-gradient(135deg, $startColor 0%, $endColor 100%) !important;
background: -webkit-linear-gradient(135deg, $startColor 0%,$endColor 100%) !important;
background: linear-gradient(135deg, $startColor 0%,$endColor 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$startColor', endColorstr='$endColor',GradientType=1 ) !important;
}
@mixin gradient-r($startColor, $endColor) {
background: $startColor;

34
ui/src/style/modules/custom-cursors.scss Normal file
View File

@ -0,0 +1,34 @@
/*
Custom Mouse Cursors
----------------------------------------------
*/
$cc-default: url(assets/images/cursor-default.png), auto !important;
$cc-invert: url(assets/images/cursor-invert.png) 4 4, auto !important;
$cc-pointer: url(assets/images/cursor-pointer.png) 6 0, auto !important;
$cc-text: url(assets/images/cursor-text.png) 6 10, auto !important;
$cc-move: url(assets/images/cursor-move.png) 13 13, auto !important;
$cc-resize-ns: url(assets/images/cursor-ns-resize.png) 6 12, auto !important;
$cc-resize-ew: url(assets/images/cursor-ew-resize.png) 12 5, auto !important;
$cc-resize-nwse: url(assets/images/cursor-nwse-resize.png) 9 9, auto !important;
$cc-resize-nesw: url(assets/images/cursor-nesw-resize.png) 9 9, auto !important;
// Resetting defaults
body {
cursor: $cc-default;
}
a:link,
a:visited,
a:hover,
a:active {
cursor: $cc-pointer;
}
input[type="text"],
input[type="password"],
textarea,
code,
pre {
cursor: $cc-text;
}

191
ui/src/style/pages/dashboards.scss
View File

@ -69,10 +69,7 @@ $dash-graph-heading: 30px;
top: $dash-graph-heading;
left: 0;
padding: 0;
&:hover {
cursor: crosshair;
}
& > div:not(.graph-empty) {
position: absolute;
left: 0;
@ -116,7 +113,7 @@ $dash-graph-heading: 30px;
color 0.25s ease,
background-color 0.25s ease;
&:hover {
cursor: default;
cursor: $cc-default;
}
}
.dash-graph--name-edit,
@ -160,7 +157,7 @@ $dash-graph-heading: 30px;
}
&:hover {
cursor: text;
cursor: $cc-text;
color: $g20-white;
&:after {
@ -249,7 +246,7 @@ $dash-graph-options-arrow: 8px;
}
&:hover {
cursor: pointer;
cursor: $cc-pointer;
background-color: $g6-smoke;
color: $g20-white;
}
@ -295,94 +292,84 @@ $dash-graph-options-arrow: 8px;
Dashboard Edit Mode
------------------------------------------------------
*/
.dashboard.dashboard-edit {
.dash-graph--heading:hover {
background-color: $g4-onyx;
color: $g18-cloud;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.react-grid-placeholder {
@include gradient-diag-down($c-pool,$c-comet);
border: 0;
opacity: 0.3;
z-index: 2;
}
.react-grid-item {
&.resizing {
background-color: fade-out($g3-castle,0.09);
border-color: $c-pool;
border-image-slice: 3%;
border-image-repeat: initial;
border-image-outset: 0;
border-image-width: 2px;
border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTg0NjVDRkVGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTg0NjVDRkZGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODQ2NUNGQ0YwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODQ2NUNGREYwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpeetfIAAAMnSURBVHja7N1PatwwFMfxJ5NlKT1DIfQKWZfSA/Q0hexDL9McoOQAPUKglwhp6dZ9Ho/HfyTZs6l+b/E1GDm27IH5oH9Pyji9//7XfLtNZt88/eT722TzlvrFseXHaXFmypuO8vd5nmW6nyeNefrKfZv7i9f75blU/NzafXvns2dV7tl8zqsnT55+9f3Xjf/xwQ9+evou+xLB+N8Ydi4AX3z/6PnvOj94AEOGMV/rB4P00J2rKTC0GNOTPne0GWEwhv1NB0YYjNPWgREHI00gYMTAOIGAEQdjuKcDIw7GXGWBEQJjrLLACIORrFBlgaHDsG2VBYYWY1VlgaHHSH3WqIOhxLB1ow6GGmPRqIMRAeMMAkYUDFuGTsDQYwxP6MCIg1Hp9oKhwih0e8FQYthuLAuM5hj1WBYYEoxUjGWBIcOwrFEHQ4qxLiFgyDFOvSww4mCM8yFghMEoDgzB0GGk2owhGBoMq5UQMDQYxRIChg4ja0PA0GLYMrgIhh7jUkLAiIExV1lghMA4GBiC0RrjNIULRhyMysAQDBVGYWAIhhJjM6cOhhpjUULAiIAxr1wEIwTGPDAEIwTGWGWBEQajHu0FQ4JRjvaCIcPIo71gSDHW0V4w5Bj5SB0MKUZxoRwYOoxsPgQMLcZqPgQMPUaxUQdDh2HVcQgYEoxUHIeAIcPIqywwpBjrKgsMOcb8f+pghMDIwu9gaDFWI3Uw9Bg2N+pgRMA497LAiIJRXf0OhgajuPodDB3G1dFeMNpgXBXtBaMdxmG0F4y2GLvRXjDaY2wGhmCoMawU7QVDh5G20V4wtBjzwBCMEBiXVx6BEQPjsJcFRluM3V4WGO0xqr0sMDQYVuplgaHDWL1YEgw9hi17WWDoMVJ1ChcMCYYVp3DBkGFUl5KCocGw6deAwIiBYUfBRTDaYmTdXjC0GFYLLoKhwSj+cAAYOgzbBhfB0GKsgotg6DGuWrkIRjuMudsLRgiMsQ0BIwzG5ZVHYMTAmKqsVzBiYPj2Z+j2PoERAmM4/2MoIfe+v4Ahx3jx5H4AefYLd37q0Y9/g9EcY/jOHz11A3v+J8AA9wisahRCWTQAAAAASUVORK5CYII=);
z-index: 3;
// .dash-graph--heading:hover {
// background-color: $g4-onyx;
// color: $g18-cloud;
// cursor: $cc-move;
& > .react-resizable-handle {
&:before, &:after {
background-color: $c-comet;
}
}
}
&.react-draggable-dragging {
background-color: fade-out($g3-castle,0.09);
border-color: $c-pool;
border-image-slice: 3%;
border-image-repeat: initial;
border-image-outset: 0;
border-image-width: 2px;
border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTg0NjVDRkVGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTg0NjVDRkZGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODQ2NUNGQ0YwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODQ2NUNGREYwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpeetfIAAAMnSURBVHja7N1PatwwFMfxJ5NlKT1DIfQKWZfSA/Q0hexDL9McoOQAPUKglwhp6dZ9Ho/HfyTZs6l+b/E1GDm27IH5oH9Pyji9//7XfLtNZt88/eT722TzlvrFseXHaXFmypuO8vd5nmW6nyeNefrKfZv7i9f75blU/NzafXvns2dV7tl8zqsnT55+9f3Xjf/xwQ9+evou+xLB+N8Ydi4AX3z/6PnvOj94AEOGMV/rB4P00J2rKTC0GNOTPne0GWEwhv1NB0YYjNPWgREHI00gYMTAOIGAEQdjuKcDIw7GXGWBEQJjrLLACIORrFBlgaHDsG2VBYYWY1VlgaHHSH3WqIOhxLB1ow6GGmPRqIMRAeMMAkYUDFuGTsDQYwxP6MCIg1Hp9oKhwih0e8FQYthuLAuM5hj1WBYYEoxUjGWBIcOwrFEHQ4qxLiFgyDFOvSww4mCM8yFghMEoDgzB0GGk2owhGBoMq5UQMDQYxRIChg4ja0PA0GLYMrgIhh7jUkLAiIExV1lghMA4GBiC0RrjNIULRhyMysAQDBVGYWAIhhJjM6cOhhpjUULAiIAxr1wEIwTGPDAEIwTGWGWBEQajHu0FQ4JRjvaCIcPIo71gSDHW0V4w5Bj5SB0MKUZxoRwYOoxsPgQMLcZqPgQMPUaxUQdDh2HVcQgYEoxUHIeAIcPIqywwpBjrKgsMOcb8f+pghMDIwu9gaDFWI3Uw9Bg2N+pgRMA497LAiIJRXf0OhgajuPodDB3G1dFeMNpgXBXtBaMdxmG0F4y2GLvRXjDaY2wGhmCoMawU7QVDh5G20V4wtBjzwBCMEBiXVx6BEQPjsJcFRluM3V4WGO0xqr0sMDQYVuplgaHDWL1YEgw9hi17WWDoMVJ1ChcMCYYVp3DBkGFUl5KCocGw6deAwIiBYUfBRTDaYmTdXjC0GFYLLoKhwSj+cAAYOgzbBhfB0GKsgotg6DGuWrkIRjuMudsLRgiMsQ0BIwzG5ZVHYMTAmKqsVzBiYPj2Z+j2PoERAmM4/2MoIfe+v4Ahx3jx5H4AefYLd37q0Y9/g9EcY/jOHz11A3v+J8AA9wisahRCWTQAAAAASUVORK5CYII=);
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
&:hover {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
// .dash-graph--name {
// border-color: $g4-onyx;
// }
// }
.react-grid-placeholder {
@include gradient-diag-down($c-pool,$c-comet);
border: 0;
opacity: 0.3;
z-index: 2;
}
.react-grid-item {
&.resizing {
background-color: fade-out($g3-castle,0.09);
border-color: $c-pool;
border-image-slice: 3%;
border-image-repeat: initial;
border-image-outset: 0;
border-image-width: 2px;
border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTg0NjVDRkVGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTg0NjVDRkZGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODQ2NUNGQ0YwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODQ2NUNGREYwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpeetfIAAAMnSURBVHja7N1PatwwFMfxJ5NlKT1DIfQKWZfSA/Q0hexDL9McoOQAPUKglwhp6dZ9Ho/HfyTZs6l+b/E1GDm27IH5oH9Pyji9//7XfLtNZt88/eT722TzlvrFseXHaXFmypuO8vd5nmW6nyeNefrKfZv7i9f75blU/NzafXvns2dV7tl8zqsnT55+9f3Xjf/xwQ9+evou+xLB+N8Ydi4AX3z/6PnvOj94AEOGMV/rB4P00J2rKTC0GNOTPne0GWEwhv1NB0YYjNPWgREHI00gYMTAOIGAEQdjuKcDIw7GXGWBEQJjrLLACIORrFBlgaHDsG2VBYYWY1VlgaHHSH3WqIOhxLB1ow6GGmPRqIMRAeMMAkYUDFuGTsDQYwxP6MCIg1Hp9oKhwih0e8FQYthuLAuM5hj1WBYYEoxUjGWBIcOwrFEHQ4qxLiFgyDFOvSww4mCM8yFghMEoDgzB0GGk2owhGBoMq5UQMDQYxRIChg4ja0PA0GLYMrgIhh7jUkLAiIExV1lghMA4GBiC0RrjNIULRhyMysAQDBVGYWAIhhJjM6cOhhpjUULAiIAxr1wEIwTGPDAEIwTGWGWBEQajHu0FQ4JRjvaCIcPIo71gSDHW0V4w5Bj5SB0MKUZxoRwYOoxsPgQMLcZqPgQMPUaxUQdDh2HVcQgYEoxUHIeAIcPIqywwpBjrKgsMOcb8f+pghMDIwu9gaDFWI3Uw9Bg2N+pgRMA497LAiIJRXf0OhgajuPodDB3G1dFeMNpgXBXtBaMdxmG0F4y2GLvRXjDaY2wGhmCoMawU7QVDh5G20V4wtBjzwBCMEBiXVx6BEQPjsJcFRluM3V4WGO0xqr0sMDQYVuplgaHDWL1YEgw9hi17WWDoMVJ1ChcMCYYVp3DBkGFUl5KCocGw6deAwIiBYUfBRTDaYmTdXjC0GFYLLoKhwSj+cAAYOgzbBhfB0GKsgotg6DGuWrkIRjuMudsLRgiMsQ0BIwzG5ZVHYMTAmKqsVzBiYPj2Z+j2PoERAmM4/2MoIfe+v4Ahx3jx5H4AefYLd37q0Y9/g9EcY/jOHz11A3v+J8AA9wisahRCWTQAAAAASUVORK5CYII=);
z-index: 3;
& > .dash-graph--heading,
& > .dash-graph--heading:hover {
background-color: $g4-onyx;
color: $g18-cloud;
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
}
&.cssTransforms {
transition-property: transform, border-color, background-color;
}
& > .react-resizable-handle {
background-image: none;
cursor: nwse-resize;
&:before, &:after {
background-color: $c-comet;
}
}
}
&.react-draggable-dragging {
background-color: fade-out($g3-castle,0.09);
border-color: $c-pool;
border-image-slice: 3%;
border-image-repeat: initial;
border-image-outset: 0;
border-image-width: 2px;
border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTg0NjVDRkVGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTg0NjVDRkZGMEVFMTFFNkE0QjVFRTJGNEI1ODc0RDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxODQ2NUNGQ0YwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxODQ2NUNGREYwRUUxMUU2QTRCNUVFMkY0QjU4NzREMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpeetfIAAAMnSURBVHja7N1PatwwFMfxJ5NlKT1DIfQKWZfSA/Q0hexDL9McoOQAPUKglwhp6dZ9Ho/HfyTZs6l+b/E1GDm27IH5oH9Pyji9//7XfLtNZt88/eT722TzlvrFseXHaXFmypuO8vd5nmW6nyeNefrKfZv7i9f75blU/NzafXvns2dV7tl8zqsnT55+9f3Xjf/xwQ9+evou+xLB+N8Ydi4AX3z/6PnvOj94AEOGMV/rB4P00J2rKTC0GNOTPne0GWEwhv1NB0YYjNPWgREHI00gYMTAOIGAEQdjuKcDIw7GXGWBEQJjrLLACIORrFBlgaHDsG2VBYYWY1VlgaHHSH3WqIOhxLB1ow6GGmPRqIMRAeMMAkYUDFuGTsDQYwxP6MCIg1Hp9oKhwih0e8FQYthuLAuM5hj1WBYYEoxUjGWBIcOwrFEHQ4qxLiFgyDFOvSww4mCM8yFghMEoDgzB0GGk2owhGBoMq5UQMDQYxRIChg4ja0PA0GLYMrgIhh7jUkLAiIExV1lghMA4GBiC0RrjNIULRhyMysAQDBVGYWAIhhJjM6cOhhpjUULAiIAxr1wEIwTGPDAEIwTGWGWBEQajHu0FQ4JRjvaCIcPIo71gSDHW0V4w5Bj5SB0MKUZxoRwYOoxsPgQMLcZqPgQMPUaxUQdDh2HVcQgYEoxUHIeAIcPIqywwpBjrKgsMOcb8f+pghMDIwu9gaDFWI3Uw9Bg2N+pgRMA497LAiIJRXf0OhgajuPodDB3G1dFeMNpgXBXtBaMdxmG0F4y2GLvRXjDaY2wGhmCoMawU7QVDh5G20V4wtBjzwBCMEBiXVx6BEQPjsJcFRluM3V4WGO0xqr0sMDQYVuplgaHDWL1YEgw9hi17WWDoMVJ1ChcMCYYVp3DBkGFUl5KCocGw6deAwIiBYUfBRTDaYmTdXjC0GFYLLoKhwSj+cAAYOgzbBhfB0GKsgotg6DGuWrkIRjuMudsLRgiMsQ0BIwzG5ZVHYMTAmKqsVzBiYPj2Z+j2PoERAmM4/2MoIfe+v4Ahx3jx5H4AefYLd37q0Y9/g9EcY/jOHz11A3v+J8AA9wisahRCWTQAAAAASUVORK5CYII=);
cursor: $cc-move;
&:hover {
cursor: $cc-move;
}
&:before,
&:after {
content: '';
display: block;
position: absolute;
height: 2px;
background-color: $g6-smoke;
transition: background-color 0.25s ease;
top: 50%;
left: 50%;
}
&:before {
width: 20px;
transform: translate(-50%,-50%) rotate(-45deg);
}
&:after {
width: 12px;
transform: translate(-3px,2px) rotate(-45deg);
}
&:hover {
&:before, &:after {
background-color: $c-comet;
}
// & > .dash-graph--heading,
// & > .dash-graph--heading:hover {
// background-color: $g4-onyx;
// color: $g18-cloud;
// cursor: $cc-move;
// }
}
& > .react-resizable-handle {
background-image: none;
cursor: $cc-resize-nwse;
&:before,
&:after {
content: '';
display: block;
position: absolute;
height: 2px;
background-color: $g6-smoke;
transition: background-color 0.25s ease;
top: 50%;
left: 50%;
}
&:before {
width: 20px;
transform: translate(-50%,-50%) rotate(-45deg);
}
&:after {
width: 12px;
transform: translate(-3px,2px) rotate(-45deg);
}
&:hover {
&:before, &:after {
background-color: $c-comet;
}
}
}
@ -394,7 +381,7 @@ $dash-graph-options-arrow: 8px;
*/
$overlay-controls-height: 50px;
$overlay-controls-bg: $g2-kevlar;
$overlay-bg: rgba($g0-obsidian, 0.7);
$overlay-bg: rgba($c-pool, 0.7);
.overlay-technology {
position: absolute;
@ -475,3 +462,23 @@ $overlay-bg: rgba($g0-obsidian, 0.7);
}
}
}
/* Graph editing in Dashboards is a little smaller so the dash can be seen in the background */
.overlay-technology .page-contents {
background-image: none !important;
}
.overlay-technology .resize-bottom {
background-color: $g0-obsidian !important;
}
.overlay-technology .graph {
width: 70%;
left: 15%;
}
.overlay-technology .dash-graph--heading {
top: 0;
height: $dash-graph-heading;
}
.overlay-technology .dash-graph--container {
height: calc(100% - #{$dash-graph-heading});
top: $dash-graph-heading;
}

31
ui/src/style/pages/data-explorer/query-builder.scss
View File

@ -44,7 +44,7 @@
color: $g11-sidewalk;
background: transparent;
height: 30px;
cursor: pointer;
cursor: $cc-pointer;
padding: 0 8px 0 16px;
transition:
color 0.25s ease,
@ -142,7 +142,9 @@
Tab Contents
-------------------------------------------
*/
$query-builder--column-heading-height: 60px;
$query-builder--preview-height: 60px;
$query-builder--column-heading-height: 50px;
.query-builder--tab-contents {
width: 100%;
margin-top: $de-vertical-margin;
@ -159,11 +161,31 @@ $query-builder--column-heading-height: 60px;
width: calc(100% - 8px);
height: calc(100% - 8px);
}
.query-builder--query-preview {
position: relative;
pre {
display: block;
padding: 7px;
border: 2px solid $query-editor-tab-inactive;
background-color: $query-editor-tab-inactive;
color: $c-pool;
border-radius: $radius;
margin-bottom: 0;
overflow: auto;
height: ($query-builder--preview-height - 4px);
@include custom-scrollbar($query-editor-tab-inactive, $c-pool);
code {
margin: 0;
}
}
}
.query-builder--columns {
position: absolute;
width: 100%;
height: calc(100% - 60px);
top: 60px;
height: calc(100% - #{$query-builder--preview-height});
top: $query-builder--preview-height;
}
.query-builder--column-heading {
@include no-user-select();
@ -224,7 +246,6 @@ $query-builder--column-heading-height: 60px;
}
.alert.alert-rawquery {
border-color: $g5-pepper;
border-color: $g6-smoke;
color: $g12-forge;
}

29
ui/src/style/pages/data-explorer/query-editor.scss
View File

@ -6,29 +6,6 @@
*/
.query-builder--query-preview {
position: relative;
pre {
display: flex;
align-items: center;
padding: 9px;
border: 0;
background-color: $query-editor-tab-inactive;
color: $c-pool;
border-radius: $radius;
margin-bottom: 0;
overflow: auto;
height: 56px;
@include custom-scrollbar($query-editor-tab-inactive, $c-pool);
code {
white-space: pre-wrap;
line-height: 1.5em;
margin: 0;
}
}
}
// Tabs for switching between queries
.qeditor--tabs {
display: flex;
@ -66,7 +43,7 @@
background-color 0.25s ease;
&:hover {
cursor: pointer;
cursor: $cc-pointer;
color: $g20-white;
}
&.active {
@ -97,7 +74,7 @@
&:hover {
background-color: $g5-pepper;
color: $g15-platinum;
cursor: pointer;
cursor: $cc-pointer;
}
}
&-radio {
@ -171,7 +148,7 @@
}
.qeditor--list-header {
position: absolute;
top: 15px;
top: 7px;
right: 16px;
width: calc(50% - 16px);
height: 30px;

42
ui/src/style/pages/data-explorer/raw-text.scss
View File

@ -4,39 +4,39 @@
between builder / raw tabs
*/
.raw-text--field,
.qeditor--query-preview pre,
.qeditor--query-preview pre code {
.query-builder--query-preview pre,
.query-builder--query-preview pre code {
font-style: normal !important;
letter-spacing: 0.02em !important;
letter-spacing: 0 !important;
font-size: 12px !important;
font-variant: normal !important;
line-height: 14px !important;
font-family: $code-font !important;
font-weight: 600 !important;
word-wrap: break-word !important;
word-break: break-all !important;
white-space: pre-wrap !important;
-webkit-font-smoothing: antialiased;
}
$raw-text-color: $c-comet;
.raw-text {
border-bottom: 2px solid $g4-onyx;
}
.raw-text--field {
@include custom-scrollbar($g2-kevlar, $raw-text-color);
display: block;
width: 100%;
height: 56px;
background-color: $g2-kevlar;
border: 2px solid $g2-kevlar;
color: $raw-text-color;
padding: (9px - 2px);
border-radius: $radius;
line-height: 1.5em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
resize: none;
text-size-adjust: 100% !important;
text-shadow: none !important;
}
$raw-text-color: $c-comet;
.raw-text--field {
@include custom-scrollbar($g2-kevlar, $raw-text-color);
display: block;
width: 100%;
height: ($query-builder--preview-height - 4px);
background-color: $g2-kevlar;
border: 2px solid $g2-kevlar;
color: $raw-text-color;
padding: 7px;
border-radius: $radius;
margin: 0;
transition:
color 0.25s ease,

2
ui/src/style/pages/data-explorer/visualization.scss
View File

@ -184,7 +184,7 @@
line-height: 30px;
margin-right: 2px;
border-radius: 4px 4px 0 0;
cursor: pointer;
cursor: $cc-pointer;
padding: 0 10px;
transition:
color 0.25s ease,

2
ui/src/style/pages/kapacitor.scss
View File

@ -467,7 +467,7 @@ div.qeditor.kapacitor-metric-selector {
&:hover {
color: $c-rainforest;
cursor: pointer;
cursor: $cc-pointer;
}
}
}

24
ui/src/style/theme/bootstrap-theme.scss
View File

@ -248,9 +248,15 @@
.icon.access-key:before {
content: "\e921";
}
.icon.crown2:before {
content: "\e94b";
}
.icon.crown:before {
content: "\e90f";
}
.icon.server2:before {
content: "\e94c";
}
.icon.server:before {
content: "\e914";
}
@ -509,7 +515,7 @@ a:active.link-warning {
}
.btn:hover,
.btn:focus {
cursor: pointer;
cursor: $cc-pointer;
}
.btn-group-xs > .btn,
.btn.btn-xs {
@ -1469,7 +1475,7 @@ fieldset[disabled] .btn-link-success:active:focus {
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.panel-available:hover {
cursor: pointer;
cursor: $cc-pointer;
background-color: #f0fcff;
border-color: #bef0ff;
}
@ -2589,7 +2595,7 @@ a.badge:hover,
a.badge:focus {
color: #00c9ff;
text-decoration: none;
cursor: pointer;
cursor: $cc-pointer;
}
.sparkline {
display: inline-block;
@ -3195,7 +3201,7 @@ a.badge:focus {
border-radius: 4px;
}
.slider-plan-picker:hover {
cursor: pointer;
cursor: $cc-pointer;
}
.slider-plan-picker .slider-label,
.slider-plan-picker .slider-cell {
@ -3867,7 +3873,7 @@ table.table.icon-font-matrix tr > td strong {
-ms-flex-direction: column;
}
.docs-color-swatch:hover {
cursor: pointer;
cursor: $cc-pointer;
}
.docs-color-swatch.light-bg {
color: #676978;
@ -4142,7 +4148,7 @@ section.docs-section .page-header {
}
.nav-tablist > li > a:hover {
color: #676978;
cursor: pointer;
cursor: $cc-pointer;
background-color: #f6f6f8;
}
.nav-tablist > li:first-of-type > a {
@ -4248,7 +4254,7 @@ section.docs-section .page-header {
transform: translate(-50%, -50%) rotate(-45deg);
}
.microtabs-dismiss:hover {
cursor: pointer;
cursor: $cc-pointer;
}
.microtabs-dismiss:hover:after,
.microtabs-dismiss:hover:before {
@ -4287,7 +4293,7 @@ section.docs-section .page-header {
}
.nav-microtabs > li > a:hover {
color: #676978;
cursor: pointer;
cursor: $cc-pointer;
background-color: #fafafc;
}
.nav-microtabs > li:last-of-type > a {
@ -4497,7 +4503,7 @@ section.docs-section .page-header {
.nav-microtabs-summer .microtabs-dismiss:hover,
.nav-microtabs-fall .microtabs-dismiss:hover,
.nav-microtabs-winter .microtabs-dismiss:hover {
cursor: pointer;
cursor: $cc-pointer;
}
.nav-microtabs-spring .microtabs-dismiss:hover:after,
.nav-microtabs-summer .microtabs-dismiss:hover:after,

26
ui/src/style/theme/bootstrap.scss
View File

@ -155,12 +155,12 @@ html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
cursor: $cc-pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
cursor: $cc-default;
}
button::-moz-focus-inner,
@ -1504,7 +1504,7 @@ hr {
}
[role="button"] {
cursor: pointer;
cursor: $cc-pointer;
}
h1,
@ -3331,7 +3331,7 @@ input[type="search"] {
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
cursor: $cc-pointer;
}
.radio input[type="radio"],
@ -3356,7 +3356,7 @@ input[type="search"] {
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
cursor: $cc-pointer;
}
.radio-inline + .radio-inline,
@ -3764,7 +3764,7 @@ select[multiple].input-lg {
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
cursor: $cc-pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -4959,7 +4959,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #575e6b;
cursor: default;
cursor: $cc-default;
background-color: #fafbfc;
border: 1px solid #ddd;
border-bottom-color: transparent;
@ -5830,7 +5830,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
.pagination > .active > span:focus {
z-index: 3;
color: #fff;
cursor: default;
cursor: $cc-default;
background-color: #22adf6;
border-color: #22adf6;
}
@ -5947,7 +5947,7 @@ a.label:hover,
a.label:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
cursor: $cc-pointer;
}
.label:empty {
@ -6047,7 +6047,7 @@ a.badge:hover,
a.badge:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
cursor: $cc-pointer;
}
.list-group-item.active > .badge,
@ -6998,7 +6998,7 @@ button.list-group-item-danger.active:focus {
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
cursor: $cc-pointer;
filter: alpha(opacity = 50);
opacity: .5;
}
@ -7006,7 +7006,7 @@ button.list-group-item-danger.active:focus {
button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
cursor: $cc-pointer;
background: transparent;
border: 0;
}
@ -7633,7 +7633,7 @@ button.close {
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
cursor: $cc-pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;

12
ui/src/style/theme/theme-dark.scss
View File

@ -293,7 +293,7 @@ input {
color 0.25s ease;
&:hover {
cursor: pointer;
cursor: $cc-pointer;
background-color: transparent;
color: $g20-white !important;
}
@ -479,7 +479,7 @@ code {
&:after { transform: translate(-50%,-50%) rotate(-45deg); }
&:hover {
cursor: pointer;
cursor: $cc-pointer;
&:before,
&:after {
@ -528,7 +528,7 @@ $toggle-border: 2px;
color 0.25s;
&:hover {
cursor: pointer;
cursor: $cc-pointer;
color: $g14-chromium;
background-color: $g4-onyx;
}
@ -616,7 +616,7 @@ $form-static-checkbox-size: 16px;
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&:hover {
cursor: pointer;
cursor: $cc-pointer;
color: $g20-white;
&:before {
@ -693,7 +693,7 @@ $form-static-checkbox-size: 16px;
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&:hover {
cursor: pointer;
cursor: $cc-pointer;
color: $g20-white;
&:before {
@ -731,7 +731,7 @@ $form-static-checkbox-size: 16px;
transition: background-color 0.25s ease;
}
label:hover {
cursor: pointer;
cursor: $cc-pointer;
background-color: $g2-kevlar;
}
label:after {