Machine learning convert Less to Scss

x-pack/plugins/ml/index.js

@@ -40,6 +40,7 @@ export const ml = (kibana) => {
         euiIconType: 'machineLearningApp',
         main: 'plugins/ml/app',
       },
+      styleSheetPaths: `${__dirname}/public/index.scss`,
       hacks: ['plugins/ml/hacks/toggle_app_link_in_nav'],
       home: ['plugins/ml/register_feature']
     },

x-pack/plugins/ml/public/_app.scss

@@ -0,0 +1,30 @@
+// ML has app specific coloring for it's various warning levels. 
+// These are used almost everywhere.
+
+.ml-icon-severity-critical,
+.ml-icon-severity-major,
+.ml-icon-severity-minor,
+.ml-icon-severity-warning,
+.ml-icon-severity-unknown {
+  text-shadow: 1px 1px 1px $euiColorLightShade;
+}
+
+.ml-icon-severity-critical {
+  color: $mchColorCriticalText;
+}
+
+.ml-icon-severity-major {
+  color: $mchColorMajorText;
+}
+
+.ml-icon-severity-minor {
+  color: $mchColorMinorText;
+}
+
+.ml-icon-severity-warning {
+  color: $mchColorWarningText;
+}
+
+.ml-icon-severity-unknown {
+  color: $mchColorUnknownText;
+}

x-pack/plugins/ml/public/_hacks.scss

@@ -0,0 +1,60 @@
+// These are hacks that were near ML's root. Unsure if they still need to be here.
+.tab-jobs,
+.edit-job-modal,
+.create-watch-modal {
+  label {
+    display: inline-block;
+  }
+
+  .validation-error {
+    margin-top: $euiSizeXS;
+  }
+}
+
+// ML specific bootstrap hacks
+.button-wrapper {
+  display: inline;
+}
+
+.button-wrapper.disabled .kuiButton[disabled] {
+  pointer-events: none;
+}
+
+.button-wrapper.disabled {
+  cursor: not-allowed;
+}
+
+// ML bootstrap-select hacks that sit on top of Kibana hacks that often fight with KUI
+// Should go away when EUI is fully adopted
+.ui-select-match {
+  .btn-default[disabled],
+  .btn-default[disabled]:hover,
+  .btn-default[disabled]:focus {
+    background-color: $euiColorLightShade;
+    border-color: $euiColorLightShade;
+    opacity: 1;
+
+    .ui-select-placeholder {
+      color: $euiColorDarkShade;
+    }
+  }
+ }
+
+.ui-select-container input[type="search"]::placeholder {
+  color: $euiColorDarkShade;
+}
+
+.ui-select-container input[type="search"]:focus {
+  box-shadow: none;
+}
+
+.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
+  font-size: $euiFontSizeS;
+  padding: 5px 10px; // Matches current padding hacks from other parts of Kibana
+}
+
+
+// SASSTODO: Remove all the floats
+.clear, .clearfix {
+  clear: both;
+}

x-pack/plugins/ml/public/_variables.scss

@@ -0,0 +1,11 @@
+$mchColorCritical: #fe5050;
+$mchColorMajor: #fba740;
+$mchColorMinor: #fdec25;
+$mchColorWarning: #8bc8fb;
+$mchColorUnknown: #c0c0c0;
+
+$mchColorCriticalText: makeHighContrastColor($mchColorCritical, $euiColorEmptyShade);
+$mchColorMajorText: makeHighContrastColor($mchColorMajor, $euiColorEmptyShade);
+$mchColorMinorText: makeHighContrastColor($mchColorMinor, $euiColorEmptyShade);
+$mchColorWarningText: makeHighContrastColor($mchColorWarning, $euiColorEmptyShade);
+$mchColorUnknownText: $euiColorDarkShade;

x-pack/plugins/ml/public/app.js

@@ -14,7 +14,6 @@ import 'ui-bootstrap';
 import 'ui/persisted_log';
 import 'ui/autoload/all';
 
-import 'plugins/ml/styles/main.less';
 import 'plugins/ml/access_denied';
 import 'plugins/ml/factories/listener_factory';
 import 'plugins/ml/factories/state_factory';

x-pack/plugins/ml/public/components/anomalies_table/styles/main.less → x-pack/plugins/ml/public/components/anomalies_table/_anomalies_table.scss

@@ -1,3 +1,4 @@
+  // SASSTODO: This file has several direct EUI overwrites that need to be removed
 .ml-anomalies-table {
   .ml-icon-severity-critical,
   .ml-icon-severity-major,
@@ -8,42 +9,43 @@
     text-shadow: none;
   }
 
-
+  // SASSTODO: Should only be three options, logic moved to the JS, where EuiIcon accepts a color
   .ml-icon-severity-critical {
     .euiIcon {
-      fill: #fe5050;
+      fill: $mchColorCriticalText;
     }
   }
 
   .ml-icon-severity-major {
     .euiIcon {
-      fill: #fba740;
+      fill: $mchColorMajorText;
     }
   }
 
   .ml-icon-severity-minor {
     .euiIcon {
-      fill: #fdec25;
+      fill: $mchColorMinorText;
     }
   }
 
   .ml-icon-severity-warning {
     .euiIcon {
-      fill: #8bc8fb;
+      fill: $mchColorWarningText;
     }
   }
 
   .ml-icon-severity-unknown {
     .euiIcon {
-      fill: #c0c0c0;
+      fill: $mchColorUnknownText;
     }
   }
 
   tr th:first-child,
   tr td:first-child {
-    width: 32px;
+    width: $euiSizeXL;
   }
 
+  // SASSTODO: These need to be separate classes, not overrides
   .euiTableCellContent {
     .euiHealth {
       font-size: inherit;
@@ -65,13 +67,13 @@
     }
 
     .detector-rules-icon {
-      margin-left: 3px;
+      margin-left: $euiSizeXS;
       opacity: 0.5;
     }
   }
 
   .euiContextMenuItem {
-    min-width: 150px
+    min-width: 150px;
   }
 
   .category-example {
@@ -84,7 +86,7 @@
   }
 
   .ml-anomalies-table-details {
-    padding: 4px 32px;
+    padding: $euiSizeXS $euiSizeXL;
     max-height: 1000px;
     overflow-y: auto;
 

x-pack/plugins/ml/public/components/anomalies_table/_index.scss

@@ -0,0 +1 @@
+@import 'anomalies_table';

x-pack/plugins/ml/public/components/anomalies_table/index.js

@@ -6,5 +6,4 @@
 
 
 import './anomalies_table_directive';
-import './anomalies_table_service.js';
-import './styles/main.less';
+import './anomalies_table_service.js';

x-pack/plugins/ml/public/components/chart_tooltip/styles/main.less → x-pack/plugins/ml/public/components/chart_tooltip/_chart_tooltip.scss

@@ -1,12 +1,12 @@
 .ml-chart-tooltip {
   position: absolute;
-  border: 2px solid #303030;
+  border: 2px solid $euiColorDarkestShade;
   border-radius: 5px;
   padding: 7px 5px;
-  color: #ffffff;
-  background-color: #303030;
-  font-family: Roboto, Droid, Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-size: 12px;
+  color: $euiColorEmptyShade;
+  background-color: $euiColorDarkestShade;
+  font-family: $euiFontFamily;
+  font-size: $euiFontSizeXS;
   opacity: 0;
   display: none;
   white-space: nowrap;
@@ -18,14 +18,10 @@
   text-overflow: ellipsis;
 
   hr {
-    margin-top: 3px;
-    margin-bottom: 3px;
+    margin-top: $euiSizeXS;
+    margin-bottom: $euiSizeXS;
     border: none;
     height: 1px;
-    background-color: #95a5a6;
-  }
-
-  .centered-text {
-    text-align: center;
+    background-color: $euiColorMediumShade;
   }
 }

x-pack/plugins/ml/public/components/chart_tooltip/_index.scss

@@ -0,0 +1 @@
+@import 'chart_tooltip';

x-pack/plugins/ml/public/components/chart_tooltip/index.js

@@ -6,5 +6,4 @@
 
 
 
-import './chart_tooltip';
-import './styles/main.less';
+import './chart_tooltip';

x-pack/plugins/ml/public/components/confirm_modal/_confirm_modal.scss

@@ -0,0 +1,25 @@
+.confirm-modal {
+  padding: $euiSizeL;
+  cursor: auto;
+
+	// SASSTODO: Needs a proper selector
+	h3 {
+		margin-top: 0px;
+	}
+
+	.modal-title {
+		font-weight: $euiFontWeightBold;
+		padding-bottom: $euiSizeL;
+	}
+
+	.modal-body {
+		padding: 0px;
+		padding-bottom: $euiSizeL;
+	}
+
+	.modal-footer {
+		padding: 0px;
+		padding-top: $euiSizeL;
+	}
+
+}

x-pack/plugins/ml/public/components/confirm_modal/_index.scss

@@ -0,0 +1 @@
+@import 'confirm_modal';

x-pack/plugins/ml/public/components/confirm_modal/index.js

@@ -8,4 +8,3 @@
 
 import './confirm_modal_service';
 import './confirm_modal_controller';
-import './styles/main.less';

x-pack/plugins/ml/public/components/controls/styles/main.less → x-pack/plugins/ml/public/components/controls/_controls.scss

@@ -1,16 +1,16 @@
 .ml-table-controls {
   label {
-    font-size: 12px;
-    padding: 0px 0px 5px 5px;
+    font-size: $euiFontSizeXS;
+    padding: 0px 0px $euiSizeXS $euiSizeXS;
   }
 
   .ml-table-controls-element {
     display: inline-block;
-    padding-left: 15px;
+    padding-left: $euiSize;
   }
 
   select {
-    font-size: 13px;
+    font-size: $euiFontSizeXS;
     font-style: normal;
   }
 }

x-pack/plugins/ml/public/components/controls/_index.scss

@@ -0,0 +1,3 @@
+@import 'controls';
+@import 'controls_select/index';
+@import 'select_severity/index';

x-pack/plugins/ml/public/components/controls/controls_select/styles/main.less → x-pack/plugins/ml/public/components/controls/controls_select/_controls_select.scss

@@ -14,32 +14,31 @@ ml-controls-select {
 
   .dropdown-menu {
     min-width: 120px;
-    font-size: 13px;
-  }
+    font-size: $euiFontSizeXS;
 
-  .dropdown-menu > li > a {
-    color: #444444;
-    text-decoration: none;
-  }
+    > li > a {
+      color: $euiColorDarkestShade;;
+      text-decoration: none;
 
-  .dropdown-menu > li > a:hover,
-  .dropdown-menu > li > a:active,
-  .dropdown-menu > li > a:focus {
-    color: #ffffff;
-    box-shadow: none;
+      &:hover, &:active, &:focus {
+        color: $euiColorEmptyShade;
+        box-shadow: none;
+      }
+    }
   }
 
   button.dropdown-toggle {
     text-align: left;
-    margin-bottom: 3px;
+    margin-bottom: $euiSizeXS;
 
+    // SASSTODO: Needs more specific selectors
     span {
-      font-size: 13px;
+      font-size: $euiSizeXS;
     }
   }
 
   button.dropdown-toggle:hover,
   button.dropdown-toggle:focus {
-    color: #444444;
+    color: $euiColorDarkestShade;
   }
 }

x-pack/plugins/ml/public/components/controls/controls_select/_index.scss

@@ -0,0 +1 @@
+@import 'controls_select';