diff --git a/ui/assets/images/cursor-default.png b/ui/assets/images/cursor-default.png new file mode 100644 index 0000000000..eb3e522ea0 Binary files /dev/null and b/ui/assets/images/cursor-default.png differ diff --git a/ui/assets/images/cursor-ew-resize.png b/ui/assets/images/cursor-ew-resize.png new file mode 100644 index 0000000000..51dce4eea2 Binary files /dev/null and b/ui/assets/images/cursor-ew-resize.png differ diff --git a/ui/assets/images/cursor-invert.png b/ui/assets/images/cursor-invert.png new file mode 100644 index 0000000000..9810a9184f Binary files /dev/null and b/ui/assets/images/cursor-invert.png differ diff --git a/ui/assets/images/cursor-move.png b/ui/assets/images/cursor-move.png new file mode 100644 index 0000000000..d1677bbcde Binary files /dev/null and b/ui/assets/images/cursor-move.png differ diff --git a/ui/assets/images/cursor-nesw-resize.png b/ui/assets/images/cursor-nesw-resize.png new file mode 100644 index 0000000000..653fd5ce93 Binary files /dev/null and b/ui/assets/images/cursor-nesw-resize.png differ diff --git a/ui/assets/images/cursor-ns-resize.png b/ui/assets/images/cursor-ns-resize.png new file mode 100644 index 0000000000..8f236bf573 Binary files /dev/null and b/ui/assets/images/cursor-ns-resize.png differ diff --git a/ui/assets/images/cursor-nwse-resize.png b/ui/assets/images/cursor-nwse-resize.png new file mode 100644 index 0000000000..662b16dced Binary files /dev/null and b/ui/assets/images/cursor-nwse-resize.png differ diff --git a/ui/assets/images/cursor-pointer.png b/ui/assets/images/cursor-pointer.png new file mode 100644 index 0000000000..691a3ec4a8 Binary files /dev/null and b/ui/assets/images/cursor-pointer.png differ diff --git a/ui/assets/images/cursor-text.png b/ui/assets/images/cursor-text.png new file mode 100644 index 0000000000..0469da82c1 Binary files /dev/null and b/ui/assets/images/cursor-text.png differ diff --git a/ui/src/hosts/components/HostsTable.js b/ui/src/hosts/components/HostsTable.js index 94f6fd8a66..fc09ed8b3b 100644 --- a/ui/src/hosts/components/HostsTable.js +++ b/ui/src/hosts/components/HostsTable.js @@ -121,9 +121,9 @@ const HostsTable = React.createClass({ this.updateSort('name')} className={this.sortableClasses('name')}>Hostname - this.updateSort('deltaUptime')} className={this.sortableClasses('deltaUptime')}>Status - this.updateSort('cpu')} className={this.sortableClasses('cpu')}>CPU - this.updateSort('load')} className={this.sortableClasses('load')}>Load + this.updateSort('deltaUptime')} className={this.sortableClasses('deltaUptime')} style={{width: '74px'}}>Status + this.updateSort('cpu')} className={this.sortableClasses('cpu')} style={{width: '70px'}}>CPU + this.updateSort('load')} className={this.sortableClasses('load')} style={{width: '68px'}}>Load Apps @@ -176,9 +176,9 @@ const HostRow = React.createClass({ return ( {name} -
- {isNaN(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`} - {isNaN(load) ? 'N/A' : `${load.toFixed(2)}`} +
+ {isNaN(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`} + {isNaN(load) ? 'N/A' : `${load.toFixed(2)}`} {apps.map((app, index) => { return ( diff --git a/ui/src/shared/components/LineGraph.js b/ui/src/shared/components/LineGraph.js index 247570c2be..221bb679b3 100644 --- a/ui/src/shared/components/LineGraph.js +++ b/ui/src/shared/components/LineGraph.js @@ -105,7 +105,7 @@ export default React.createClass({ return (
{isRefreshing ? this.renderSpinner() : null} diff --git a/ui/src/shared/components/SourceIndicator.js b/ui/src/shared/components/SourceIndicator.js index 83bcbeeed6..a8782a4959 100644 --- a/ui/src/shared/components/SourceIndicator.js +++ b/ui/src/shared/components/SourceIndicator.js @@ -12,7 +12,7 @@ const SourceIndicator = React.createClass({ } return (
- + {sourceName}
); diff --git a/ui/src/side_nav/components/SideNav.js b/ui/src/side_nav/components/SideNav.js index 9c51c4df42..6fb1a9eb87 100644 --- a/ui/src/side_nav/components/SideNav.js +++ b/ui/src/side_nav/components/SideNav.js @@ -42,7 +42,7 @@ const SideNav = React.createClass({ Alert History Kapacitor Rules - + diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index 63c863f54d..60d373e726 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -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'; \ No newline at end of file diff --git a/ui/src/style/components/dygraphs.scss b/ui/src/style/components/dygraphs.scss index 7487559283..a2ed1ab34e 100644 --- a/ui/src/style/components/dygraphs.scss +++ b/ui/src/style/components/dygraphs.scss @@ -1,5 +1,12 @@ // Overrides default Dygraphs styles +.dygraph { + &:hover { + cursor: $cc-invert; + } +} + + .graph-vertical-marker { top: 0; bottom: 0; diff --git a/ui/src/style/components/input-tag-list.scss b/ui/src/style/components/input-tag-list.scss index 43cd070915..f7d6f23808 100644 --- a/ui/src/style/components/input-tag-list.scss +++ b/ui/src/style/components/input-tag-list.scss @@ -27,6 +27,6 @@ $input-tag-item-height: 24px; &:hover { color: $c-dreamsicle; - cursor: pointer; + cursor: $cc-pointer; } } diff --git a/ui/src/style/components/resizer.scss b/ui/src/style/components/resizer.scss index 9de7e84706..3d60e4ab15 100644 --- a/ui/src/style/components/resizer.scss +++ b/ui/src/style/components/resizer.scss @@ -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; diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss index a98b38de57..14f1d68b6d 100644 --- a/ui/src/style/components/tables.scss +++ b/ui/src/style/components/tables.scss @@ -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; diff --git a/ui/src/style/external/fixed-data-table-base.scss b/ui/src/style/external/fixed-data-table-base.scss index f00badda94..eecda97013 100644 --- a/ui/src/style/external/fixed-data-table-base.scss +++ b/ui/src/style/external/fixed-data-table-base.scss @@ -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; diff --git a/ui/src/style/external/fixed-data-table.scss b/ui/src/style/external/fixed-data-table.scss index cc66d901a1..967fa46de2 100644 --- a/ui/src/style/external/fixed-data-table.scss +++ b/ui/src/style/external/fixed-data-table.scss @@ -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; diff --git a/ui/src/style/fonts/icomoon.eot b/ui/src/style/fonts/icomoon.eot index 689d779b4e..2814393d69 100755 Binary files a/ui/src/style/fonts/icomoon.eot and b/ui/src/style/fonts/icomoon.eot differ diff --git a/ui/src/style/fonts/icomoon.svg b/ui/src/style/fonts/icomoon.svg index e2d9e06bf8..c941603a4a 100755 --- a/ui/src/style/fonts/icomoon.svg +++ b/ui/src/style/fonts/icomoon.svg @@ -84,6 +84,8 @@ + + diff --git a/ui/src/style/fonts/icomoon.ttf b/ui/src/style/fonts/icomoon.ttf index 8ac3dfcb34..25dfd5b1ef 100755 Binary files a/ui/src/style/fonts/icomoon.ttf and b/ui/src/style/fonts/icomoon.ttf differ diff --git a/ui/src/style/fonts/icomoon.woff b/ui/src/style/fonts/icomoon.woff index ba0308d9cd..38b1b5e8c7 100755 Binary files a/ui/src/style/fonts/icomoon.woff and b/ui/src/style/fonts/icomoon.woff differ diff --git a/ui/src/style/fonts/icomoon.woff2 b/ui/src/style/fonts/icomoon.woff2 index fae3be9966..22e7a79907 100755 Binary files a/ui/src/style/fonts/icomoon.woff2 and b/ui/src/style/fonts/icomoon.woff2 differ diff --git a/ui/src/style/layout/page.scss b/ui/src/style/layout/page.scss index 0034b3e96a..ec70465b82 100644 --- a/ui/src/style/layout/page.scss +++ b/ui/src/style/layout/page.scss @@ -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 { diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss index e93b9d85a5..d63cfcd0bf 100644 --- a/ui/src/style/layout/sidebar.scss +++ b/ui/src/style/layout/sidebar.scss @@ -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; diff --git a/ui/src/style/mixins/mixins.scss b/ui/src/style/mixins/mixins.scss index 66f4332e7c..4d3646f72d 100644 --- a/ui/src/style/mixins/mixins.scss +++ b/ui/src/style/mixins/mixins.scss @@ -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; diff --git a/ui/src/style/modules/custom-cursors.scss b/ui/src/style/modules/custom-cursors.scss new file mode 100644 index 0000000000..169768052b --- /dev/null +++ b/ui/src/style/modules/custom-cursors.scss @@ -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; +} \ No newline at end of file diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss index eadc07bc71..9fccdad137 100644 --- a/ui/src/style/pages/dashboards.scss +++ b/ui/src/style/pages/dashboards.scss @@ -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; +} \ No newline at end of file diff --git a/ui/src/style/pages/data-explorer/query-builder.scss b/ui/src/style/pages/data-explorer/query-builder.scss index 6b026b0a0d..79b9e32231 100644 --- a/ui/src/style/pages/data-explorer/query-builder.scss +++ b/ui/src/style/pages/data-explorer/query-builder.scss @@ -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; } \ No newline at end of file diff --git a/ui/src/style/pages/data-explorer/query-editor.scss b/ui/src/style/pages/data-explorer/query-editor.scss index 990a2936c2..39f5830761 100644 --- a/ui/src/style/pages/data-explorer/query-editor.scss +++ b/ui/src/style/pages/data-explorer/query-editor.scss @@ -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; diff --git a/ui/src/style/pages/data-explorer/raw-text.scss b/ui/src/style/pages/data-explorer/raw-text.scss index 4419924728..5999f752ef 100644 --- a/ui/src/style/pages/data-explorer/raw-text.scss +++ b/ui/src/style/pages/data-explorer/raw-text.scss @@ -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, diff --git a/ui/src/style/pages/data-explorer/visualization.scss b/ui/src/style/pages/data-explorer/visualization.scss index 7c4c8494e3..34aea0466e 100644 --- a/ui/src/style/pages/data-explorer/visualization.scss +++ b/ui/src/style/pages/data-explorer/visualization.scss @@ -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, diff --git a/ui/src/style/pages/kapacitor.scss b/ui/src/style/pages/kapacitor.scss index 1e85c98700..590347e4f8 100644 --- a/ui/src/style/pages/kapacitor.scss +++ b/ui/src/style/pages/kapacitor.scss @@ -467,7 +467,7 @@ div.qeditor.kapacitor-metric-selector { &:hover { color: $c-rainforest; - cursor: pointer; + cursor: $cc-pointer; } } } diff --git a/ui/src/style/theme/bootstrap-theme.scss b/ui/src/style/theme/bootstrap-theme.scss index ed76d44443..cfafe87c7d 100755 --- a/ui/src/style/theme/bootstrap-theme.scss +++ b/ui/src/style/theme/bootstrap-theme.scss @@ -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, diff --git a/ui/src/style/theme/bootstrap.scss b/ui/src/style/theme/bootstrap.scss index bffeab149f..b3cff6aad7 100644 --- a/ui/src/style/theme/bootstrap.scss +++ b/ui/src/style/theme/bootstrap.scss @@ -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; diff --git a/ui/src/style/theme/theme-dark.scss b/ui/src/style/theme/theme-dark.scss index beef5ea109..21d869ed0f 100644 --- a/ui/src/style/theme/theme-dark.scss +++ b/ui/src/style/theme/theme-dark.scss @@ -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 {