diff --git a/src/core_plugins/kibana/_hacks.scss b/src/core_plugins/kibana/_hacks.scss deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/src/core_plugins/kibana/public/index.scss b/src/core_plugins/kibana/public/index.scss index 40423df3cfaf4..36774e9ae9bc9 100644 --- a/src/core_plugins/kibana/public/index.scss +++ b/src/core_plugins/kibana/public/index.scss @@ -10,6 +10,11 @@ @import './visualize/index'; @import 'ui/public/vis/index'; +// Also import Timelion in case of embedding chart into dashboard +// SASSTODO: Remove once the pipeline imports all compiled CSS files always +@import '../../timelion/public/directives/index'; +@import '../../timelion/public/vis/index'; + // Dashboard styles // MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS @import './dashboard/index'; diff --git a/src/core_plugins/timelion/index.js b/src/core_plugins/timelion/index.js index 66a082dfa0d2a..d9d8267b92d1a 100644 --- a/src/core_plugins/timelion/index.js +++ b/src/core_plugins/timelion/index.js @@ -27,6 +27,7 @@ export default function (kibana) { description: 'Time series expressions for everything', icon: 'plugins/timelion/icon.svg', main: 'plugins/timelion/app', + styleSheetPath: `${__dirname}/public/index.scss`, }, hacks: [ 'plugins/timelion/lib/panel_registry', diff --git a/src/core_plugins/timelion/public/_app.scss b/src/core_plugins/timelion/public/_app.scss new file mode 100644 index 0000000000000..591d1f801fef3 --- /dev/null +++ b/src/core_plugins/timelion/public/_app.scss @@ -0,0 +1,17 @@ + + +.timApp { + position: relative; + + [ng-click] { + cursor: pointer; + } +} + +.timApp__container { + margin: $euiSizeM; +} + +.timApp__stats { + font-weight: $euiFontWeightRegular; +} diff --git a/src/core_plugins/timelion/public/app.js b/src/core_plugins/timelion/public/app.js index 316a9704b5c3d..bfc4047294cc6 100644 --- a/src/core_plugins/timelion/public/app.js +++ b/src/core_plugins/timelion/public/app.js @@ -38,8 +38,6 @@ require('plugins/timelion/directives/timelion_expression_input'); require('plugins/timelion/directives/timelion_help/timelion_help'); require('plugins/timelion/directives/timelion_interval/timelion_interval'); -require('plugins/timelion/app.less'); - document.title = 'Timelion - Kibana'; const app = require('ui/modules').get('apps/timelion', []); diff --git a/src/core_plugins/timelion/public/app.less b/src/core_plugins/timelion/public/app.less deleted file mode 100644 index 1112fc01f6bb5..0000000000000 --- a/src/core_plugins/timelion/public/app.less +++ /dev/null @@ -1,210 +0,0 @@ -@import "~ui/styles/variables.less"; -@import (reference) "~ui/styles/mixins"; -@import './chart.less'; -@import './suggestions.less'; - -[chart] { - height: 100%; - width: 100%; - display: flex; - flex-direction: column; -} - -.timelion { - position: relative; - - .config .list-group-item .container-fluid { - background-color: transparent; - padding: 0; - } -} - -.timelionHelpKeyboardTipsSection { - &:last-child { - margin-bottom: 0; - } -} - -/** - * 1. Anchor suggestions beneath input. - * 2. Allow for option of positioning suggestions absolutely. - */ -.timelionExpressionInputContainer { - flex: 1 1 auto; - display: flex; - flex-direction: column; /* 1 */ - position: relative; /* 2 */ -} - -.timelionExpressionInput { - min-height: 65px; -} - -.timelion-container { - margin: 20px; -} - -.timelion-container-drawer { - position: fixed; - bottom: 0px; -} - -.timelion-container-drawer-tab { - width: 100%; - background-color: @gray-lighter; -} - -.timelion-subnav { - background-color: @gray-lighter; - margin: 0px -} - -.timelion-stats { - font-weight: normal; -} - -.timelion-buttons { - position: absolute; - right: 0px; - display: inline-block; - padding: 5px 20px; - background-color: @navbar-default-bg; - border-bottom-left-radius: @border-radius-base; - - a { - margin: 5px; - color: #000; - } -} - -[ng-click] { - cursor: pointer; -} - -.chart-container { - display: inline-block; - cursor: pointer; - position: relative; - box-sizing: border-box; - border: 2px dashed transparent; - padding-left: 0px !important; - padding-right: 0px !important; - margin-bottom: 10px; - - &.active { - border-color: #ccc; - } -} - -.chart-container.running { - opacity: 0.50; -} - -timelion-interval { - display: flex; -} - -.timelionFunctionsDropdownContent { - height: 310px; - overflow-y: auto; -} - -.timelionFunctionsTable { - background-color: white; -} - -.timelionFunctionsTableRow { - &:hover { - background-color: #f9f9f9; - } -} - -/** - * 1. Override bootstrap .table styles. - */ -.timelionFunctionDetailsTable { - background-color: #f9f9f9 !important; // 1 -} - -.doc-container-content { - position: relative; -} - -.doc-container-buttons { - position: relative; - text-align: center; - height: 40px; - - .btn-doc-prev { - position: absolute; - left: 0px; - } - - .btn-doc-next { - position: absolute; - right: 0px; - } -} - -.cell-actions { - position: absolute; - bottom:5px; - left:5px; - line-height: 10px; - - > .cell-action, - > .cell-id { - display: inline-block; - font-size: 10px; - text-align: center; - width: 20px; - height: 20px; - border-radius: 10px; - border: 1px solid #666; - padding: 3px; - font-weight: bold; - background-color: #ccc; - opacity: 0.50; - z-index: 10; - } - - .cell-action { - opacity: 0; - - &:focus { - opacity: 1; - } - } -} - -.chart-container:hover { - .cell-action { - opacity: 0.50; - &:hover { - opacity: 1; - } - } -} - -.legendLabel { - //max-width: 210px; - white-space: nowrap; - text-overflow: ellipsis; - overflow-x: hidden; - line-height: normal; -} - -.legendColorBox { - vertical-align: middle; -} - -.ngLegendValue:focus, -.ngLegendValue:hover { - text-decoration: underline; -} - -.ngLegendValueNumber { - margin-left: 5px; - margin-right: 5px; - font-weight: bold; -} diff --git a/src/core_plugins/timelion/public/chart.less b/src/core_plugins/timelion/public/chart.less deleted file mode 100644 index 97bb859d78901..0000000000000 --- a/src/core_plugins/timelion/public/chart.less +++ /dev/null @@ -1,35 +0,0 @@ -.chart-top-title { - flex: 0; - text-align: center; - font-weight: bold; - font-size: 11px; -} - -.chart-canvas { - min-width: 100%; - flex: 1; - overflow: hidden; -} - -.timelionLegendCaption { - padding: 0px; - color: #545454; - white-space: nowrap; - font-weight: bold; -} - -.tab-dashboard.theme-dark .timelionLegendCaption { - color: #aaaaaa; -} - -.tab-dashboard.theme-dark .ngLegendValue { - color: #aaaaaa; -} - -.tab-dashboard.theme-dark .flot-tick-label { - color: #aaaaaa; -} - -.timelionExpressionInput { - cursor: text !important; -} diff --git a/src/core_plugins/timelion/public/directives/_index.scss b/src/core_plugins/timelion/public/directives/_index.scss new file mode 100644 index 0000000000000..6ee2f81539032 --- /dev/null +++ b/src/core_plugins/timelion/public/directives/_index.scss @@ -0,0 +1,6 @@ +@import './timelion_expression_input'; +@import './cells/index'; +@import './chart/index'; +@import './timelion_expression_suggestions/index'; +@import './timelion_help/index'; +@import './timelion_interval/index'; diff --git a/src/core_plugins/timelion/public/directives/_timelion_expression_input.scss b/src/core_plugins/timelion/public/directives/_timelion_expression_input.scss new file mode 100644 index 0000000000000..571c7a109f967 --- /dev/null +++ b/src/core_plugins/timelion/public/directives/_timelion_expression_input.scss @@ -0,0 +1,16 @@ +/** + * 1. Anchor suggestions beneath input. + * 2. Allow for option of positioning suggestions absolutely. + */ + +.timExpressionInput__container { + flex: 1 1 auto; + display: flex; + flex-direction: column; /* 1 */ + position: relative; /* 2 */ +} + +.timExpressionInput { + cursor: text !important; + min-height: $euiSizeXL * 2; +} diff --git a/src/core_plugins/timelion/public/directives/cells/_cells.scss b/src/core_plugins/timelion/public/directives/cells/_cells.scss new file mode 100644 index 0000000000000..08a2423773d80 --- /dev/null +++ b/src/core_plugins/timelion/public/directives/cells/_cells.scss @@ -0,0 +1,62 @@ +.timCell { + display: inline-block; + cursor: pointer; + position: relative; + box-sizing: border-box; + border: 2px dashed transparent; + padding-left: 0px !important; + padding-right: 0px !important; + margin-bottom: $euiSizeM; + + &.active { + border-color: $euiColorLightShade; + } +} + +.timCell.running { + opacity: 0.50; +} + + +.timCell__actions { + position: absolute; + bottom: $euiSizeXS; + left: $euiSizeXS; + + > .timCell__action, + > .timCell__id { + @include euiFontSizeXS; + font-weight: $euiFontWeightBold; + color: $euiColorMediumShade; + display: inline-block; + text-align: center; + width: $euiSizeL; + height: $euiSizeL; + line-height: $euiSizeL; + border-radius: $euiSizeL/2; + border: $euiBorderThin; + background-color: $euiColorLightestShade; + z-index: $euiZLevel1; + } + + > .timCell__action { + opacity: 0; + + &:focus { + opacity: 1; + } + + &:hover, + &:focus { + color: $euiTextColor; + border-color: $euiColorMediumShade; + background-color: $euiColorLightShade; + } + } +} + +.timCell:hover { + .timCell__action { + opacity: 1; + } +} diff --git a/src/core_plugins/timelion/public/directives/cells/_index.scss b/src/core_plugins/timelion/public/directives/cells/_index.scss new file mode 100644 index 0000000000000..8611b4d8ba1d0 --- /dev/null +++ b/src/core_plugins/timelion/public/directives/cells/_index.scss @@ -0,0 +1 @@ +@import './cells'; diff --git a/src/core_plugins/timelion/public/directives/cells/cells.html b/src/core_plugins/timelion/public/directives/cells/cells.html index d1acf0e21b174..6f74580fe3513 100644 --- a/src/core_plugins/timelion/public/directives/cells/cells.html +++ b/src/core_plugins/timelion/public/directives/cells/cells.html @@ -5,7 +5,7 @@
-
-
-
{{$index + 1}}
+
+
+
{{$index + 1}}