Timelion less to sass (#23339) (#23405)

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';

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',

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;
+}

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', []);

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';

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;
+}

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;
+  }
+}

src/core_plugins/timelion/public/directives/cells/_index.scss

@@ -0,0 +1 @@
+@import './cells';