From 092d968f68fe47ed45396225bd1d33c9c078e6f9 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 21 Sep 2018 00:09:50 -0700
Subject: [PATCH 1/6] ml less to sass

add in new css compile system

selector protect kibana from ml

introduce ML variables

timeseries explorer

forecasting modal

import job wizard sass files correctly

missing import for event rate chart

more feedback fixes

fix for chart overflow

ml code cleanup

code cleanup

more review

forgot to delete some less files

feedback

remove last of less files

bad import
---
 x-pack/plugins/ml/public/_app.scss            |  30 +
 x-pack/plugins/ml/public/_hacks.scss          |  60 ++
 x-pack/plugins/ml/public/_variables.scss      |  11 +
 x-pack/plugins/ml/public/app.js               |   1 -
 .../main.less => _anomalies_table.scss}       |  22 +-
 .../components/anomalies_table/_index.scss    |   1 +
 .../components/anomalies_table/index.js       |   3 +-
 .../{styles/main.less => _chart_tooltip.scss} |  20 +-
 .../components/chart_tooltip/_index.scss      |   1 +
 .../public/components/chart_tooltip/index.js  |   3 +-
 .../confirm_modal/_confirm_modal.scss         |  25 +
 .../components/confirm_modal/_index.scss      |   1 +
 .../public/components/confirm_modal/index.js  |   1 -
 .../components/confirm_modal/styles/main.less |  24 -
 .../{styles/main.less => _controls.scss}      |   8 +-
 .../ml/public/components/controls/_index.scss |   3 +
 .../main.less => _controls_select.scss}       |  27 +-
 .../controls/controls_select/_index.scss      |   1 +
 .../controls/controls_select/index.js         |   1 -
 .../ml/public/components/controls/index.js    |   1 -
 .../controls/select_severity/_index.scss      |   1 +
 .../main.less => _select_severity.scss}       |   1 +
 .../select_severity/select_severity.js        |   2 -
 .../main.less => _data_recognizer.scss}       |   4 +-
 .../components/data_recognizer/_index.scss    |   1 +
 .../components/data_recognizer/index.js       |   1 -
 .../_documentation_help_link.scss             |   6 +
 .../documentation_help_link/_index.scss       |   1 +
 .../documentation_help_link.js                |   2 -
 .../documentation_help_link/styles/main.less  |   5 -
 .../main.less => _field_data_card.scss}       |  22 +-
 .../components/field_data_card/_index.scss    |   1 +
 .../components/field_data_card/index.js       |   1 -
 .../metric_distribution_chart_directive.js    |   2 +-
 .../field_title_bar/_field_title_bar.scss     |  22 +
 .../components/field_title_bar/_index.scss    |   1 +
 .../components/field_title_bar/index.js       |   3 +-
 .../field_title_bar/styles/main.less          |  23 -
 .../main.less => _field_type_icon.scss}       |   2 +-
 .../components/field_type_icon/_index.scss    |   1 +
 .../components/field_type_icon/index.js       |   1 -
 .../main.less => _form_filter_input.scss}     |  16 +-
 .../components/form_filter_input/_index.scss  |   1 +
 .../components/form_filter_input/index.js     |   1 -
 .../{styles/main.less => _form_label.scss}    |   2 +
 .../public/components/form_label/_index.scss  |   1 +
 .../components/form_label/form_label.js       |   2 -
 .../ml/public/components/form_label/index.js  |   3 +-
 .../components/influencers_list/_index.scss   |   1 +
 .../influencers_list/_influencers_list.scss   | 106 ++++
 .../components/influencers_list/index.js      |   3 +-
 .../influencers_list/styles/main.less         | 104 ----
 .../public/components/item_select/_index.scss |   1 +
 .../components/item_select/_item_select.scss  |  52 ++
 .../ml/public/components/item_select/index.js |   3 +-
 .../components/item_select/styles/main.less   |  47 --
 .../public/components/items_grid/_index.scss  |   1 +
 .../components/items_grid/_items_grid.scss    |   3 +
 .../components/items_grid/items_grid.js       |   2 -
 .../components/items_grid/styles/main.less    |   3 -
 .../components/job_group_select/_index.scss   |   1 +
 .../main.less => _job_group_select.scss}      |  11 +-
 .../components/job_group_select/index.js      |   3 +-
 .../components/job_select_list/_index.scss    |   1 +
 .../main.less => _job_select_list.scss}       |  19 +
 .../components/job_select_list/index.js       |   3 +-
 .../components/json_tooltip/_index.scss       |   1 +
 .../{styles/main.less => _json_tooltip.scss}  |  13 +-
 .../components/json_tooltip/json_tooltip.js   |   2 -
 .../components/loading_indicator/_index.scss  |   1 +
 .../main.less => _loading_indicator.scss}     |   2 +
 .../loading_indicator/loading_indicator.js    |   2 -
 .../loading_indicator_directive.js            |   2 -
 .../public/components/messagebar/_index.scss  |   1 +
 .../components/messagebar/_messagebar.scss    |  35 ++
 .../components/messagebar/messagebar.js       |   1 -
 .../components/messagebar/styles/main.less    |  31 -
 .../components/paginated_table/_index.scss    |   1 +
 .../paginated_table/_paginated_table.scss     |  52 ++
 .../paginated_table/paginated_table.js        | 111 ++++
 .../public/components/rule_editor/_index.scss |   3 +
 .../{styles/main.less => _rule_editor.scss}   |  38 +-
 ...n.less => _detector_description_list.scss} |   4 +-
 .../detector_description_list/_index.scss     |   1 +
 .../detector_description_list.js              |   2 -
 .../rule_editor/rule_editor_flyout.js         |   2 -
 .../main.less => _datavisualizer.scss}        |  65 +-
 .../ml/public/datavisualizer/_index.scss      |   1 +
 .../plugins/ml/public/datavisualizer/index.js |   1 -
 .../{styles/main.less => _explorer.scss}      | 157 ++---
 x-pack/plugins/ml/public/explorer/_index.scss |   2 +
 .../explorer_charts/_explorer_chart.scss      | 113 ++++
 .../_explorer_charts_container.scss           | 112 ++++
 .../explorer/explorer_charts/_index.scss      |   2 +
 .../explorer_chart_single_metric.js           |   2 -
 .../explorer_charts_container_directive.js    |   2 -
 x-pack/plugins/ml/public/explorer/index.js    |   1 -
 x-pack/plugins/ml/public/index.scss           |  48 +-
 x-pack/plugins/ml/public/jobs/_index.scss     |   5 +
 .../main.less => _custom_url_editor.scss}     |   7 +-
 .../components/custom_url_editor/_index.scss  |   1 +
 .../components/custom_url_editor/editor.js    |   2 -
 .../_custom_url_editor.scss                   |  43 ++
 .../custom_url_editor_old/_index.scss         |   1 +
 .../components/job_timepicker_modal/index.js  |   1 -
 x-pack/plugins/ml/public/jobs/index.js        |   1 -
 .../ml/public/jobs/jobs_list/_index.scss      |  11 +
 .../ml/public/jobs/jobs_list/_jobs_list.scss  |   7 +
 .../create_watch_flyout/styles/main.less      |   0
 .../main.less => _edit_job_flyout.scss}       |   2 +-
 .../components/edit_job_flyout/_index.scss    |   1 +
 .../edit_job_flyout/edit_job_flyout.js        |   2 -
 .../edit_job_flyout/tabs/custom_urls.js       |   2 -
 .../edit_job_flyout/tabs/datafeed.js          |   1 -
 .../edit_job_flyout/tabs/detectors.js         |   1 -
 .../edit_job_flyout/tabs/job_details.js       |   1 -
 .../components/job_details/_index.scss        |   2 +
 .../{styles/main.less => _job_details.scss}   |  23 +-
 .../forecasts_table/_forcasts_table.scss      |  32 +
 .../job_details/forecasts_table/_index.scss   |   1 +
 .../forecasts_table/forecasts_table.js        |   1 -
 .../forecasts_table/styles/main.less          |  30 -
 .../components/job_details/job_details.js     |   2 -
 .../components/job_filter_bar/_index.scss     |   1 +
 .../job_filter_bar/_job_filter_bar.scss       |  23 +
 .../job_filter_bar/job_filter_bar.js          |   3 +-
 .../job_filter_bar/styles/main.less           |  22 -
 .../components/job_group/_index.scss          |   1 +
 .../{styles/main.less => _job_group.scss}     |   4 +-
 .../components/job_group/job_group.js         |   3 +-
 .../components/jobs_list/_index.scss          |   1 +
 .../{styles/main.less => _jobs_list.scss}     |  16 +-
 .../components/jobs_list/jobs_list.js         |   1 -
 .../components/jobs_list_view/_index.scss     |   1 +
 .../main.less => _jobs_list_view.scss}        |   3 +-
 .../jobs_list_view/jobs_list_view.js          |   1 -
 .../components/jobs_stats_bar/_index.scss     |   1 +
 .../main.less => _jobs_stats_bar.scss}        |   8 +-
 .../jobs_stats_bar/jobs_stats_bar.js          |   1 -
 .../components/multi_job_actions/_index.scss  |   2 +
 .../main.less => _multi_job_actions.scss}     |   7 +-
 .../main.less => _group_selector.scss}        |   5 +-
 .../group_selector/_index.scss                |   3 +
 .../{styles/main.less => _group_list.scss}    |  13 +-
 .../group_selector/group_list/_index.scss     |   1 +
 .../group_selector/group_list/group_list.js   |   2 -
 .../group_selector/group_selector.js          |   1 -
 .../new_group_input/_index.scss               |   1 +
 .../main.less => _new_group_input.scss}       |   2 +-
 .../new_group_input/new_group_input.js        |   1 -
 .../multi_job_actions/multi_job_actions.js    |   7 +-
 .../new_job_button/new_job_button.js          |   3 +-
 .../new_job_button/styles/main.less           |   5 -
 .../start_datafeed_modal/_index.scss          |   1 +
 .../start_datafeed_modal/styles/main.less     |   0
 .../time_range_selector/_index.scss           |   1 +
 .../main.less => _time_range_selector.scss}   |  23 +-
 .../time_range_selector.js                    |   2 -
 .../ml/public/jobs/jobs_list_old/_index.scss  |   7 +
 .../jobs/jobs_list_old/_jobs_list_old.scss    | 147 +++++
 .../_create_watch_modal.scss                  |  14 +
 .../create_watch_modal/_index.scss            |   1 +
 .../delete_job_modal/_delete_job_modal.scss   |  25 +
 .../delete_job_modal/_index.scss              |   1 +
 .../edit_job_modal/_edit_job_modal.scss       |  88 +++
 .../jobs_list_old/edit_job_modal/_index.scss  |   1 +
 .../edit_job_modal_controller.js              | 451 ++++++++++++++
 .../expanded_row/_expanded_row.scss           | 127 ++++
 .../jobs_list_old/expanded_row/_index.scss    |   3 +
 .../forecasts_table/_forecasts_table.scss     |  44 ++
 .../expanded_row/forecasts_table/_index.scss  |   1 +
 .../ml/public/jobs/jobs_list_old/index.js     |  17 +
 .../job_timepicker_modal/_index.scss          |   1 +
 .../_job_timepicker_modal.scss                |  92 +++
 .../ml/public/jobs/new_job/_index.scss        |   3 +
 .../{styles/main.less => _advanced.scss}      | 110 ++--
 .../public/jobs/new_job/advanced/_index.scss  |   4 +
 .../main.less => _detector_filter_modal.scss} |  36 +-
 .../detector_filter_modal/_index.scss         |   1 +
 .../advanced/detector_filter_modal/index.js   |   1 -
 .../main.less => _detector_modal.scss}        |  14 +-
 .../advanced/detector_modal/_index.scss       |   1 +
 .../new_job/advanced/detector_modal/index.js  |   1 -
 .../ml/public/jobs/new_job/advanced/index.js  |   1 -
 .../advanced/save_status_modal/_index.scss    |   1 +
 .../save_status_modal/_save_status_modal.scss |  14 +
 .../advanced/save_status_modal/index.js       |   1 -
 .../save_status_modal/styles/main.less        |  13 -
 .../ml/public/jobs/new_job/simple/_index.scss |  14 +
 .../main.less => _bucket_span_estimator.scss} |   3 +-
 .../bucket_span_estimator/_index.scss         |   1 +
 .../components/bucket_span_estimator/index.js |   1 -
 .../main.less => _bucket_span_selector.scss}  |   2 +-
 .../bucket_span_selection/_index.scss         |   1 +
 .../components/bucket_span_selection/index.js |   3 +-
 .../main.less => _event_rate_chart.scss}      |  27 +-
 .../components/event_rate_chart/_index.scss   |   1 +
 .../components/event_rate_chart/index.js      |   3 +-
 .../main.less => _fields_selection.scss}      |  29 +-
 .../components/fields_selection/_index.scss   |   1 +
 .../components/fields_selection/index.js      |   3 +-
 .../fields_selection_population/_index.scss   |   1 +
 ....less => _index_selection_population.scss} |  31 +-
 .../fields_selection_population/index.js      |   1 -
 .../main.less => _general_job_details.scss}   |  46 +-
 .../general_job_details/_index.scss           |   1 +
 .../components/general_job_details/index.js   |   3 +-
 .../influencers_selection/_index.scss         |   1 +
 .../main.less => _influencers_selection.scss} |   7 +-
 .../components/influencers_selection/index.js |   1 -
 .../components/post_save_options/_index.scss  |   1 +
 .../main.less => _post_save_options.scss}     |   2 +-
 .../components/post_save_options/index.js     |   1 -
 .../simple/components/watcher/_index.scss     |   1 +
 .../{styles/main.less => _watcher.scss}       |  40 +-
 .../simple/components/watcher/index.js        |   1 -
 .../new_job/simple/multi_metric/_index.scss   |   1 +
 .../{styles/main.less => _create_job.scss}    | 504 +++++++--------
 .../multi_metric/create_job/_index.scss       |   1 +
 .../simple/multi_metric/create_job/index.js   |   1 -
 .../new_job/simple/population/_index.scss     |   1 +
 .../{styles/main.less => _create_job.scss}    | 578 +++++++++---------
 .../simple/population/create_job/_index.scss  |   1 +
 .../population/create_job/create_job.html     |   2 +-
 .../simple/population/create_job/index.js     |   1 -
 .../jobs/new_job/simple/recognize/_index.scss |   1 +
 .../{styles/main.less => _create_jobs.scss}   | 385 ++++++------
 .../simple/recognize/create_job/_index.scss   |   1 +
 .../simple/recognize/create_job/index.js      |   1 -
 .../new_job/simple/single_metric/_index.scss  |   1 +
 .../{styles/main.less => _create_job.scss}    | 413 +++++++------
 .../single_metric/create_job/_index.scss      |   1 +
 .../simple/single_metric/create_job/index.js  |   1 -
 .../ml/public/jobs/new_job/wizard/_index.scss |   1 +
 .../wizard/{styles/main.less => _wizard.scss} |  30 +-
 .../ml/public/jobs/new_job/wizard/index.js    |   1 -
 .../plugins/ml/public/jobs/styles/main.less   |   6 -
 x-pack/plugins/ml/public/settings/_index.scss |   3 +
 .../plugins/ml/public/settings/_settings.scss |  20 +
 .../styles/main.less => _filter_lists.scss}   |   9 +-
 .../public/settings/filter_lists/_index.scss  |   2 +
 .../edit/{styles/main.less => _edit.scss}     |  12 +-
 .../settings/filter_lists/edit/_index.scss    |   1 +
 .../settings/filter_lists/edit/index.js       |   3 +-
 .../ml/public/settings/filter_lists/index.js  |   3 +-
 .../settings/filter_lists/list/index.js       |   1 -
 .../settings/filter_lists/styles/main.less    |   4 -
 x-pack/plugins/ml/public/settings/index.js    |   1 -
 .../settings/scheduled_events/_index.scss     |   6 +
 .../main.less => _calendars_list.scss}        |  10 +-
 .../calendars_list/_index.scss                |   1 +
 .../scheduled_events/calendars_list/index.js  |   1 -
 .../components/events_list/_events_list.scss  |  19 +
 .../components/events_list/_index.scss        |   1 +
 .../components/events_list/index.js           |   1 -
 .../components/events_list/styles/main.less   |  21 -
 .../main.less => _import_events_modal.scss}   |   8 +-
 .../import_events_modal/_index.scss           |   1 +
 .../components/import_events_modal/index.js   |   1 -
 .../components/new_event_modal/_index.scss    |   1 +
 .../main.less => _new_event_modal.scss}       |  19 +-
 .../components/new_event_modal/index.js       |   1 -
 .../scheduled_events/new_calendar/_index.scss |   1 +
 .../new_calendar/_new_calendar.scss           |  21 +
 .../scheduled_events/new_calendar/index.js    |   1 -
 .../new_calendar/styles/main.less             |  18 -
 x-pack/plugins/ml/public/styles/icons.less    |  27 -
 x-pack/plugins/ml/public/styles/main.less     |  27 -
 .../plugins/ml/public/styles/ui-select.less   |  30 -
 .../ml/public/timeseriesexplorer/_index.scss  |   2 +
 .../main.less => _timeseriesexplorer.scss}    | 121 ++--
 .../main.less => _forecasting_modal.scss}     |   3 +-
 .../forecasting_modal/_index.scss             |   1 +
 .../forecasting_modal/index.js                |   3 +-
 .../ml/public/timeseriesexplorer/index.js     |   1 -
 275 files changed, 3691 insertions(+), 1993 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/_app.scss
 create mode 100644 x-pack/plugins/ml/public/_hacks.scss
 create mode 100644 x-pack/plugins/ml/public/_variables.scss
 rename x-pack/plugins/ml/public/components/anomalies_table/{styles/main.less => _anomalies_table.scss} (75%)
 create mode 100644 x-pack/plugins/ml/public/components/anomalies_table/_index.scss
 rename x-pack/plugins/ml/public/components/chart_tooltip/{styles/main.less => _chart_tooltip.scss} (51%)
 create mode 100644 x-pack/plugins/ml/public/components/chart_tooltip/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/confirm_modal/_confirm_modal.scss
 create mode 100644 x-pack/plugins/ml/public/components/confirm_modal/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/components/confirm_modal/styles/main.less
 rename x-pack/plugins/ml/public/components/controls/{styles/main.less => _controls.scss} (51%)
 create mode 100644 x-pack/plugins/ml/public/components/controls/_index.scss
 rename x-pack/plugins/ml/public/components/controls/controls_select/{styles/main.less => _controls_select.scss} (52%)
 create mode 100644 x-pack/plugins/ml/public/components/controls/controls_select/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/controls/select_severity/_index.scss
 rename x-pack/plugins/ml/public/components/controls/select_severity/{styles/main.less => _select_severity.scss} (73%)
 rename x-pack/plugins/ml/public/components/data_recognizer/{styles/main.less => _data_recognizer.scss} (69%)
 create mode 100644 x-pack/plugins/ml/public/components/data_recognizer/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/documentation_help_link/_documentation_help_link.scss
 create mode 100644 x-pack/plugins/ml/public/components/documentation_help_link/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/components/documentation_help_link/styles/main.less
 rename x-pack/plugins/ml/public/components/field_data_card/{styles/main.less => _field_data_card.scss} (84%)
 create mode 100644 x-pack/plugins/ml/public/components/field_data_card/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/field_title_bar/_field_title_bar.scss
 create mode 100644 x-pack/plugins/ml/public/components/field_title_bar/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/components/field_title_bar/styles/main.less
 rename x-pack/plugins/ml/public/components/field_type_icon/{styles/main.less => _field_type_icon.scss} (77%)
 create mode 100644 x-pack/plugins/ml/public/components/field_type_icon/_index.scss
 rename x-pack/plugins/ml/public/components/form_filter_input/{styles/main.less => _form_filter_input.scss} (70%)
 create mode 100644 x-pack/plugins/ml/public/components/form_filter_input/_index.scss
 rename x-pack/plugins/ml/public/components/form_label/{styles/main.less => _form_label.scss} (66%)
 create mode 100644 x-pack/plugins/ml/public/components/form_label/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/influencers_list/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/influencers_list/_influencers_list.scss
 delete mode 100644 x-pack/plugins/ml/public/components/influencers_list/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/components/item_select/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/item_select/_item_select.scss
 delete mode 100644 x-pack/plugins/ml/public/components/item_select/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/components/items_grid/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/items_grid/_items_grid.scss
 delete mode 100644 x-pack/plugins/ml/public/components/items_grid/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/components/job_group_select/_index.scss
 rename x-pack/plugins/ml/public/components/job_group_select/{styles/main.less => _job_group_select.scss} (52%)
 create mode 100644 x-pack/plugins/ml/public/components/job_select_list/_index.scss
 rename x-pack/plugins/ml/public/components/job_select_list/{styles/main.less => _job_select_list.scss} (90%)
 create mode 100644 x-pack/plugins/ml/public/components/json_tooltip/_index.scss
 rename x-pack/plugins/ml/public/components/json_tooltip/{styles/main.less => _json_tooltip.scss} (50%)
 create mode 100644 x-pack/plugins/ml/public/components/loading_indicator/_index.scss
 rename x-pack/plugins/ml/public/components/loading_indicator/{styles/main.less => _loading_indicator.scss} (88%)
 create mode 100644 x-pack/plugins/ml/public/components/messagebar/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/messagebar/_messagebar.scss
 delete mode 100644 x-pack/plugins/ml/public/components/messagebar/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/components/paginated_table/_index.scss
 create mode 100644 x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss
 create mode 100644 x-pack/plugins/ml/public/components/paginated_table/paginated_table.js
 create mode 100644 x-pack/plugins/ml/public/components/rule_editor/_index.scss
 rename x-pack/plugins/ml/public/components/rule_editor/{styles/main.less => _rule_editor.scss} (58%)
 rename x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/{styles/main.less => _detector_description_list.scss} (73%)
 create mode 100644 x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/_index.scss
 rename x-pack/plugins/ml/public/datavisualizer/{styles/main.less => _datavisualizer.scss} (56%)
 rename x-pack/plugins/ml/public/explorer/{styles/main.less => _explorer.scss} (66%)
 create mode 100644 x-pack/plugins/ml/public/explorer/_index.scss
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart.scss
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_charts_container.scss
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/_index.scss
 rename x-pack/plugins/ml/public/jobs/components/custom_url_editor/{styles/main.less => _custom_url_editor.scss} (58%)
 create mode 100644 x-pack/plugins/ml/public/jobs/components/custom_url_editor/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_custom_url_editor.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/_jobs_list.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/create_watch_flyout/styles/main.less
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/{styles/main.less => _edit_job_flyout.scss} (83%)
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_index.scss
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/{styles/main.less => _job_details.scss} (70%)
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/_forcasts_table.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/_job_filter_bar.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/_index.scss
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/{styles/main.less => _job_group.scss} (68%)
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/_index.scss
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/{styles/main.less => _jobs_list.scss} (84%)
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_index.scss
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/{styles/main.less => _jobs_list_view.scss} (87%)
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_index.scss
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/{styles/main.less => _jobs_stats_bar.scss} (53%)
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/_index.scss
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/{styles/main.less => _multi_job_actions.scss} (77%)
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/{styles/main.less => _group_selector.scss} (60%)
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/_index.scss
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/{styles/main.less => _group_list.scss} (55%)
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/_index.scss
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/{styles/main.less => _new_group_input.scss} (95%)
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/new_job_button/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/_index.scss
 rename x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/{styles/main.less => _time_range_selector.scss} (59%)
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_delete_job_modal.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/edit_job_modal_controller.js
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_forecasts_table.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/index.js
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/advanced/{styles/main.less => _advanced.scss} (54%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/advanced/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/{styles/main.less => _detector_filter_modal.scss} (57%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/{styles/main.less => _detector_modal.scss} (54%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/_save_status_modal.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/{styles/main.less => _bucket_span_estimator.scss} (69%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/{styles/main.less => _bucket_span_selector.scss} (97%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/{styles/main.less => _event_rate_chart.scss} (71%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/{styles/main.less => _fields_selection.scss} (69%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/{styles/main.less => _index_selection_population.scss} (69%)
 rename x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/{styles/main.less => _general_job_details.scss} (62%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/{styles/main.less => _influencers_selection.scss} (57%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/{styles/main.less => _post_save_options.scss} (56%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/{styles/main.less => _watcher.scss} (52%)
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/{styles/main.less => _create_job.scss} (68%)
 mode change 100755 => 100644
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/population/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/{styles/main.less => _create_job.scss} (70%)
 mode change 100755 => 100644
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/recognize/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/{styles/main.less => _create_jobs.scss} (54%)
 mode change 100755 => 100644
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/{styles/main.less => _create_job.scss} (71%)
 mode change 100755 => 100644
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_index.scss
 create mode 100644 x-pack/plugins/ml/public/jobs/new_job/wizard/_index.scss
 rename x-pack/plugins/ml/public/jobs/new_job/wizard/{styles/main.less => _wizard.scss} (53%)
 delete mode 100644 x-pack/plugins/ml/public/jobs/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/settings/_index.scss
 create mode 100644 x-pack/plugins/ml/public/settings/_settings.scss
 rename x-pack/plugins/ml/public/settings/filter_lists/{list/styles/main.less => _filter_lists.scss} (57%)
 create mode 100644 x-pack/plugins/ml/public/settings/filter_lists/_index.scss
 rename x-pack/plugins/ml/public/settings/filter_lists/edit/{styles/main.less => _edit.scss} (69%)
 create mode 100644 x-pack/plugins/ml/public/settings/filter_lists/edit/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/settings/filter_lists/styles/main.less
 create mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/_index.scss
 rename x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/{styles/main.less => _calendars_list.scss} (58%)
 create mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/_index.scss
 create mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/_events_list.scss
 create mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/styles/main.less
 rename x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/{styles/main.less => _import_events_modal.scss} (51%)
 create mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/_index.scss
 create mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/_index.scss
 rename x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/{styles/main.less => _new_event_modal.scss} (67%)
 create mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/_index.scss
 create mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/_new_calendar.scss
 delete mode 100644 x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/styles/main.less
 delete mode 100644 x-pack/plugins/ml/public/styles/icons.less
 delete mode 100644 x-pack/plugins/ml/public/styles/main.less
 delete mode 100644 x-pack/plugins/ml/public/styles/ui-select.less
 create mode 100644 x-pack/plugins/ml/public/timeseriesexplorer/_index.scss
 rename x-pack/plugins/ml/public/timeseriesexplorer/{styles/main.less => _timeseriesexplorer.scss} (64%)
 rename x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/{styles/main.less => _forecasting_modal.scss} (80%)
 create mode 100644 x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/_index.scss

diff --git a/x-pack/plugins/ml/public/_app.scss b/x-pack/plugins/ml/public/_app.scss
new file mode 100644
index 0000000000000..5022d08553405
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/_hacks.scss b/x-pack/plugins/ml/public/_hacks.scss
new file mode 100644
index 0000000000000..68aa3e075ffc6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/_variables.scss b/x-pack/plugins/ml/public/_variables.scss
new file mode 100644
index 0000000000000..37c8ffbc6e2ad
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/app.js b/x-pack/plugins/ml/public/app.js
index 1af1b28286b98..5b645e0425f85 100644
--- a/x-pack/plugins/ml/public/app.js
+++ b/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';
diff --git a/x-pack/plugins/ml/public/components/anomalies_table/styles/main.less b/x-pack/plugins/ml/public/components/anomalies_table/_anomalies_table.scss
similarity index 75%
rename from x-pack/plugins/ml/public/components/anomalies_table/styles/main.less
rename to x-pack/plugins/ml/public/components/anomalies_table/_anomalies_table.scss
index 7469f1b529100..dd5d3d597f5c9 100644
--- a/x-pack/plugins/ml/public/components/anomalies_table/styles/main.less
+++ b/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;
 
diff --git a/x-pack/plugins/ml/public/components/anomalies_table/_index.scss b/x-pack/plugins/ml/public/components/anomalies_table/_index.scss
new file mode 100644
index 0000000000000..20e40e840a4bf
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/anomalies_table/_index.scss
@@ -0,0 +1 @@
+@import 'anomalies_table';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/anomalies_table/index.js b/x-pack/plugins/ml/public/components/anomalies_table/index.js
index f9fb2bc0dafa0..e2750dff9ee62 100644
--- a/x-pack/plugins/ml/public/components/anomalies_table/index.js
+++ b/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';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/chart_tooltip/styles/main.less b/x-pack/plugins/ml/public/components/chart_tooltip/_chart_tooltip.scss
similarity index 51%
rename from x-pack/plugins/ml/public/components/chart_tooltip/styles/main.less
rename to x-pack/plugins/ml/public/components/chart_tooltip/_chart_tooltip.scss
index be51f28a38f89..f30220eed2513 100644
--- a/x-pack/plugins/ml/public/components/chart_tooltip/styles/main.less
+++ b/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;
   }
 }
diff --git a/x-pack/plugins/ml/public/components/chart_tooltip/_index.scss b/x-pack/plugins/ml/public/components/chart_tooltip/_index.scss
new file mode 100644
index 0000000000000..11b36a0a21001
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/chart_tooltip/_index.scss
@@ -0,0 +1 @@
+@import 'chart_tooltip';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/chart_tooltip/index.js b/x-pack/plugins/ml/public/components/chart_tooltip/index.js
index 7bc2781a62bb4..dce4cc44e2526 100644
--- a/x-pack/plugins/ml/public/components/chart_tooltip/index.js
+++ b/x-pack/plugins/ml/public/components/chart_tooltip/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './chart_tooltip';
-import './styles/main.less';
+import './chart_tooltip';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/confirm_modal/_confirm_modal.scss b/x-pack/plugins/ml/public/components/confirm_modal/_confirm_modal.scss
new file mode 100644
index 0000000000000..55ab91b0381f5
--- /dev/null
+++ b/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;
+	}
+  
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/confirm_modal/_index.scss b/x-pack/plugins/ml/public/components/confirm_modal/_index.scss
new file mode 100644
index 0000000000000..61d12ba2a52d3
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/confirm_modal/_index.scss
@@ -0,0 +1 @@
+@import 'confirm_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/confirm_modal/index.js b/x-pack/plugins/ml/public/components/confirm_modal/index.js
index ff61dbe181f8e..8a28055bcd478 100644
--- a/x-pack/plugins/ml/public/components/confirm_modal/index.js
+++ b/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';
diff --git a/x-pack/plugins/ml/public/components/confirm_modal/styles/main.less b/x-pack/plugins/ml/public/components/confirm_modal/styles/main.less
deleted file mode 100644
index bd5d2f55af21f..0000000000000
--- a/x-pack/plugins/ml/public/components/confirm_modal/styles/main.less
+++ /dev/null
@@ -1,24 +0,0 @@
-.confirm-modal {
-  padding:20px;
-  cursor: auto;
-
-	h3 {
-		margin-top: 0px;
-	}
-
-	.modal-title {
-		font-weight: bold;
-		padding-bottom: 20px;
-	}
-
-	.modal-body {
-		padding: 0px;
-		padding-bottom: 20px;
-	}
-	
-	.modal-footer {
-		padding: 0px;
-		padding-top: 20px;
-	}
-  
-}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/controls/styles/main.less b/x-pack/plugins/ml/public/components/controls/_controls.scss
similarity index 51%
rename from x-pack/plugins/ml/public/components/controls/styles/main.less
rename to x-pack/plugins/ml/public/components/controls/_controls.scss
index 3a4dacb750c96..2b46e2d2cd35d 100644
--- a/x-pack/plugins/ml/public/components/controls/styles/main.less
+++ b/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;
   }
 }
diff --git a/x-pack/plugins/ml/public/components/controls/_index.scss b/x-pack/plugins/ml/public/components/controls/_index.scss
new file mode 100644
index 0000000000000..7bb8b08c65859
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/controls/_index.scss
@@ -0,0 +1,3 @@
+@import 'controls';
+@import 'controls_select/index';
+@import 'select_severity/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/controls/controls_select/styles/main.less b/x-pack/plugins/ml/public/components/controls/controls_select/_controls_select.scss
similarity index 52%
rename from x-pack/plugins/ml/public/components/controls/controls_select/styles/main.less
rename to x-pack/plugins/ml/public/components/controls/controls_select/_controls_select.scss
index 5fb992081e0bc..fc489d18feb05 100644
--- a/x-pack/plugins/ml/public/components/controls/controls_select/styles/main.less
+++ b/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;
   }
 }
diff --git a/x-pack/plugins/ml/public/components/controls/controls_select/_index.scss b/x-pack/plugins/ml/public/components/controls/controls_select/_index.scss
new file mode 100644
index 0000000000000..4d58129f311b2
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/controls/controls_select/_index.scss
@@ -0,0 +1 @@
+@import 'controls_select';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/controls/controls_select/index.js b/x-pack/plugins/ml/public/components/controls/controls_select/index.js
index 99398c1b766a1..06074fc5219af 100644
--- a/x-pack/plugins/ml/public/components/controls/controls_select/index.js
+++ b/x-pack/plugins/ml/public/components/controls/controls_select/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './styles/main.less';
 import './controls_select_directive.js';
diff --git a/x-pack/plugins/ml/public/components/controls/index.js b/x-pack/plugins/ml/public/components/controls/index.js
index 1ae5706692585..1b9348db9c516 100644
--- a/x-pack/plugins/ml/public/components/controls/index.js
+++ b/x-pack/plugins/ml/public/components/controls/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import './checkbox_showcharts';
 import './controls_select';
 import './select_interval';
diff --git a/x-pack/plugins/ml/public/components/controls/select_severity/_index.scss b/x-pack/plugins/ml/public/components/controls/select_severity/_index.scss
new file mode 100644
index 0000000000000..f238b65c9b955
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/controls/select_severity/_index.scss
@@ -0,0 +1 @@
+@import 'select_severity';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/controls/select_severity/styles/main.less b/x-pack/plugins/ml/public/components/controls/select_severity/_select_severity.scss
similarity index 73%
rename from x-pack/plugins/ml/public/components/controls/select_severity/styles/main.less
rename to x-pack/plugins/ml/public/components/controls/select_severity/_select_severity.scss
index 564fed3084e4d..2edfe612183d0 100644
--- a/x-pack/plugins/ml/public/components/controls/select_severity/styles/main.less
+++ b/x-pack/plugins/ml/public/components/controls/select_severity/_select_severity.scss
@@ -1,3 +1,4 @@
+// SASSTODO: Should be removed
 .ml-select-severity {
   .euiFormControlLayoutClearButton {
     display: none;
diff --git a/x-pack/plugins/ml/public/components/controls/select_severity/select_severity.js b/x-pack/plugins/ml/public/components/controls/select_severity/select_severity.js
index 03c608082b982..217b6a361a1f0 100644
--- a/x-pack/plugins/ml/public/components/controls/select_severity/select_severity.js
+++ b/x-pack/plugins/ml/public/components/controls/select_severity/select_severity.js
@@ -20,8 +20,6 @@ import {
   EuiText,
 } from '@elastic/eui';
 
-import './styles/main.less';
-
 import { getSeverityColor } from '../../../../common/util/anomaly_utils';
 
 const OPTIONS = [
diff --git a/x-pack/plugins/ml/public/components/data_recognizer/styles/main.less b/x-pack/plugins/ml/public/components/data_recognizer/_data_recognizer.scss
similarity index 69%
rename from x-pack/plugins/ml/public/components/data_recognizer/styles/main.less
rename to x-pack/plugins/ml/public/components/data_recognizer/_data_recognizer.scss
index cab0706e04b1c..a91dd699032b1 100644
--- a/x-pack/plugins/ml/public/components/data_recognizer/styles/main.less
+++ b/x-pack/plugins/ml/public/components/data_recognizer/_data_recognizer.scss
@@ -1,5 +1,5 @@
 ml-data-recognizer {
   .ml-data-recognizer-logo {
-    width: 32px;
+    width: $euiSizeXL;
   }
-}
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/data_recognizer/_index.scss b/x-pack/plugins/ml/public/components/data_recognizer/_index.scss
new file mode 100644
index 0000000000000..67cc4372ea622
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/data_recognizer/_index.scss
@@ -0,0 +1 @@
+@import 'data_recognizer';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/data_recognizer/index.js b/x-pack/plugins/ml/public/components/data_recognizer/index.js
index ae6ec19674234..68952807d4240 100644
--- a/x-pack/plugins/ml/public/components/data_recognizer/index.js
+++ b/x-pack/plugins/ml/public/components/data_recognizer/index.js
@@ -8,4 +8,3 @@
 
 import './data_recognizer_directive';
 import './data_recognizer';
-import './styles/main.less';
diff --git a/x-pack/plugins/ml/public/components/documentation_help_link/_documentation_help_link.scss b/x-pack/plugins/ml/public/components/documentation_help_link/_documentation_help_link.scss
new file mode 100644
index 0000000000000..cf14dfcc0d3b1
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/documentation_help_link/_documentation_help_link.scss
@@ -0,0 +1,6 @@
+// SASSTODO: Make a defined selector
+.documentation-help-link {
+	i {
+		margin-left: $euiSizeXS;
+	}
+}
diff --git a/x-pack/plugins/ml/public/components/documentation_help_link/_index.scss b/x-pack/plugins/ml/public/components/documentation_help_link/_index.scss
new file mode 100644
index 0000000000000..762af88c62e58
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/documentation_help_link/_index.scss
@@ -0,0 +1 @@
+@import 'documentation_help_link';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/documentation_help_link/documentation_help_link.js b/x-pack/plugins/ml/public/components/documentation_help_link/documentation_help_link.js
index 7faf675199879..8762a4d4c18f5 100644
--- a/x-pack/plugins/ml/public/components/documentation_help_link/documentation_help_link.js
+++ b/x-pack/plugins/ml/public/components/documentation_help_link/documentation_help_link.js
@@ -9,8 +9,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import './styles/main.less';
-
 import { metadata } from 'ui/metadata';
 
 import { uiModules } from 'ui/modules';
diff --git a/x-pack/plugins/ml/public/components/documentation_help_link/styles/main.less b/x-pack/plugins/ml/public/components/documentation_help_link/styles/main.less
deleted file mode 100644
index 6fadf49376ce0..0000000000000
--- a/x-pack/plugins/ml/public/components/documentation_help_link/styles/main.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.documentation-help-link {
-	i {
-		margin-left: 4px;
-	}
-}
diff --git a/x-pack/plugins/ml/public/components/field_data_card/styles/main.less b/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss
similarity index 84%
rename from x-pack/plugins/ml/public/components/field_data_card/styles/main.less
rename to x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss
index 1776afe87fec1..ee125cd392d18 100644
--- a/x-pack/plugins/ml/public/components/field_data_card/styles/main.less
+++ b/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss
@@ -1,3 +1,6 @@
+// SASSTODO: This entire sass file needs to be rewritten, using a color blind viz palette and proper vars.
+// This will need to be done in a more thorough cleanup. 
+
 .ml-field-data-card {
   width: 360px;
   height: 435px;
@@ -38,12 +41,12 @@
     background-color: #bfa180;
   }
 
+  // Use euiPanel styling
+  @include euiPanel($selector: 'card-contents');
+
   .card-contents {
     height: 393px;
-    border-color: #d9d9d9;
-    border-style: solid;
-    border-width: 0px 1px 1px 1px;
-    border-radius: 0px 0px 5px 5px;
+    border-radius: 0px 0px $euiBorderRadius $euiBorderRadius;
     overflow: hidden;
   }
 
@@ -78,7 +81,7 @@
   }
 
   .text-code {
-    font-family: "Lucida Console", Monaco, monospace;
+    font-family: $euiCodeFontFamily;
   }
 
   .details-select {
@@ -93,10 +96,10 @@
 
   svg {
     font-size: 11px;
-    font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial;
+    font-family: $euiFontFamily;
 
     text {
-      fill: #555555;
+      fill: $euiColorDarkShade;
     }
 
     .info-text {
@@ -146,12 +149,11 @@
     font-size: 13px;
 
     .field-label {
+      @include euiTextTruncate;
+
       display: inline-block;
       width: 100px;
       text-align: right;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
 
     .count-label {
diff --git a/x-pack/plugins/ml/public/components/field_data_card/_index.scss b/x-pack/plugins/ml/public/components/field_data_card/_index.scss
new file mode 100644
index 0000000000000..c39be8d5f17df
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/field_data_card/_index.scss
@@ -0,0 +1 @@
+@import 'field_data_card';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/field_data_card/index.js b/x-pack/plugins/ml/public/components/field_data_card/index.js
index 076bb3f5817e3..ab3668f1f1fbc 100644
--- a/x-pack/plugins/ml/public/components/field_data_card/index.js
+++ b/x-pack/plugins/ml/public/components/field_data_card/index.js
@@ -10,7 +10,6 @@ import './document_count_chart_directive';
 import './field_data_card_directive';
 import './metric_distribution_chart_directive';
 import './top_values_directive';
-import './styles/main.less';
 import 'plugins/ml/components/field_title_bar';
 import 'plugins/ml/components/field_type_icon';
 import 'plugins/ml/components/chart_tooltip';
diff --git a/x-pack/plugins/ml/public/components/field_data_card/metric_distribution_chart_directive.js b/x-pack/plugins/ml/public/components/field_data_card/metric_distribution_chart_directive.js
index 515ae410a32ee..e51f635b4c78e 100644
--- a/x-pack/plugins/ml/public/components/field_data_card/metric_distribution_chart_directive.js
+++ b/x-pack/plugins/ml/public/components/field_data_card/metric_distribution_chart_directive.js
@@ -255,7 +255,7 @@ module.directive('mlMetricDistributionChart', function () {
           contents = `${bar.percent}% of documents have<br>a value of ${minValFormatted}`;
         }
 
-        contents = `<div class='centered-text'>${contents}</div>`;
+        contents = `<div class='eui-textCenter'>${contents}</div>`;
 
         if (path.length && path[0].length) {
           mlChartTooltipService.show(contents, path[0][0], {
diff --git a/x-pack/plugins/ml/public/components/field_title_bar/_field_title_bar.scss b/x-pack/plugins/ml/public/components/field_title_bar/_field_title_bar.scss
new file mode 100644
index 0000000000000..8df5880d80fe5
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/field_title_bar/_field_title_bar.scss
@@ -0,0 +1,22 @@
+.ml-field-title-bar {
+  color: $euiColorEmptyShade;
+  font-size: $euiFontSizeL;
+  text-align: center;
+  border-radius: $euiBorderRadius $euiBorderRadius 0px 0px;
+  padding: $euiSizeXS $euiSizeS;
+
+  .field-type-icon {
+    vertical-align: middle;
+    padding-right: $euiSizeXS;
+    display: inline-block;
+  }
+
+  .field-name {
+    @include euiTextTruncate;
+
+    vertical-align: middle;
+    padding-right: $euiSizeS;
+    max-width: 290px; // SASSTODO: Calculate value
+    display: inline-block;
+  }
+}
diff --git a/x-pack/plugins/ml/public/components/field_title_bar/_index.scss b/x-pack/plugins/ml/public/components/field_title_bar/_index.scss
new file mode 100644
index 0000000000000..d12cf5d008c44
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/field_title_bar/_index.scss
@@ -0,0 +1 @@
+@import 'field_title_bar';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/field_title_bar/index.js b/x-pack/plugins/ml/public/components/field_title_bar/index.js
index c9a1953aa4bfc..0fb644de342fc 100644
--- a/x-pack/plugins/ml/public/components/field_title_bar/index.js
+++ b/x-pack/plugins/ml/public/components/field_title_bar/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './field_title_bar_directive';
-import './styles/main.less';
+import './field_title_bar_directive';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/field_title_bar/styles/main.less b/x-pack/plugins/ml/public/components/field_title_bar/styles/main.less
deleted file mode 100644
index 5d7b2b74ed356..0000000000000
--- a/x-pack/plugins/ml/public/components/field_title_bar/styles/main.less
+++ /dev/null
@@ -1,23 +0,0 @@
-.ml-field-title-bar {
-  color: #ffffff;
-  font-size: 18px;
-  text-align: center;
-  border-radius: 5px 5px 0px 0px;
-  padding: 5px 6px;
-
-  .field-type-icon {
-    vertical-align: middle;
-    padding-right: 4px;
-    display: inline-block;
-  }
-
-  .field-name {
-    vertical-align: middle;
-    padding-right: 8px;
-    max-width: 290px;
-    display: inline-block;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-}
diff --git a/x-pack/plugins/ml/public/components/field_type_icon/styles/main.less b/x-pack/plugins/ml/public/components/field_type_icon/_field_type_icon.scss
similarity index 77%
rename from x-pack/plugins/ml/public/components/field_type_icon/styles/main.less
rename to x-pack/plugins/ml/public/components/field_type_icon/_field_type_icon.scss
index 13e8da8ccb0c0..ba318057bcae1 100644
--- a/x-pack/plugins/ml/public/components/field_type_icon/styles/main.less
+++ b/x-pack/plugins/ml/public/components/field_type_icon/_field_type_icon.scss
@@ -2,7 +2,7 @@
   display: inline !important;
 
   .field-type-icon {
-    padding-right: 2px;
+    padding-right: $euiSizeXS / 2;
     display: inline !important;
   }
 }
diff --git a/x-pack/plugins/ml/public/components/field_type_icon/_index.scss b/x-pack/plugins/ml/public/components/field_type_icon/_index.scss
new file mode 100644
index 0000000000000..afd1cb353edb4
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/field_type_icon/_index.scss
@@ -0,0 +1 @@
+@import 'field_type_icon';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/field_type_icon/index.js b/x-pack/plugins/ml/public/components/field_type_icon/index.js
index c3ba787e6dd45..93f2f659b52d5 100644
--- a/x-pack/plugins/ml/public/components/field_type_icon/index.js
+++ b/x-pack/plugins/ml/public/components/field_type_icon/index.js
@@ -7,6 +7,5 @@
 
 
 import './field_type_icon_directive';
-import './styles/main.less';
 
 export { FieldTypeIcon } from './field_type_icon';
diff --git a/x-pack/plugins/ml/public/components/form_filter_input/styles/main.less b/x-pack/plugins/ml/public/components/form_filter_input/_form_filter_input.scss
similarity index 70%
rename from x-pack/plugins/ml/public/components/form_filter_input/styles/main.less
rename to x-pack/plugins/ml/public/components/form_filter_input/_form_filter_input.scss
index a6883e5556e10..c5056e914b3bf 100644
--- a/x-pack/plugins/ml/public/components/form_filter_input/styles/main.less
+++ b/x-pack/plugins/ml/public/components/form_filter_input/_form_filter_input.scss
@@ -5,27 +5,30 @@ ml-form-filter-input {
   position: relative;
   line-height: 0;
 
+  // SASSTODO: Make a real selector
   input[type="text"] {
     background-color: transparent;
 
     max-width: 400px;
     width: 100%;
-    padding-right: 30px;
+    padding-right: $euiSizeXL;
   }
 
+  // SASSTODO: This likely should no be removed
   input[type="text"]::-ms-clear {
       display: none;
   }
 
   .ml-filter-input-left-icon {
-    padding-left: 30px;
+    padding-left: $euiSizeXL;
   }
 
+  // SASSTODO: Rewrite this selector completely
   .fa.fa-search {
     position: absolute;
     top: 6px;
     left: 8px;
-    color: #CCCCCC;
+    color: $euiColorLightShade;
     width: 18px;
     height: 18px;
     margin-top: 10px;
@@ -34,18 +37,19 @@ ml-form-filter-input {
     line-height: 0;
   }
 
+  // SASSTODO: Rewrite this selector completely
   .ml-filter-progress-icon {
     position: absolute;
     top: 6px;
     right: 6px;
-    color: #999DA0;
+    color: $euiColorMediumShade;
     width: 18px;
     height: 18px;
     margin-top: 10px;
     margin-right: 0px;
 
     a {
-      color: #CCCCCC;
+      color: $euiColorLightShade;
 
       .fa.fa-times-circle {
         font-size: 1.4em;
@@ -54,7 +58,7 @@ ml-form-filter-input {
     }
 
     a:hover {
-      color: #999DA0;
+      color: $euiColorMediumShade;
     }
 
     .fa.fa-spinner {
diff --git a/x-pack/plugins/ml/public/components/form_filter_input/_index.scss b/x-pack/plugins/ml/public/components/form_filter_input/_index.scss
new file mode 100644
index 0000000000000..9457a23f6de34
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/form_filter_input/_index.scss
@@ -0,0 +1 @@
+@import 'form_filter_input';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/form_filter_input/index.js b/x-pack/plugins/ml/public/components/form_filter_input/index.js
index b35d17a2c9c17..078f7ec320b6a 100644
--- a/x-pack/plugins/ml/public/components/form_filter_input/index.js
+++ b/x-pack/plugins/ml/public/components/form_filter_input/index.js
@@ -6,6 +6,5 @@
 
 
 
-import './styles/main.less';
 import './form_filter_input_directive';
 
diff --git a/x-pack/plugins/ml/public/components/form_label/styles/main.less b/x-pack/plugins/ml/public/components/form_label/_form_label.scss
similarity index 66%
rename from x-pack/plugins/ml/public/components/form_label/styles/main.less
rename to x-pack/plugins/ml/public/components/form_label/_form_label.scss
index 4965ef14d18b2..6cecd46ef3daa 100644
--- a/x-pack/plugins/ml/public/components/form_label/styles/main.less
+++ b/x-pack/plugins/ml/public/components/form_label/_form_label.scss
@@ -1,10 +1,12 @@
 ml-form-label {
   display: inline-flex;
 
+  // SASSTODO: Apply a real selector
   span[ml-info-icon] {
     margin-top: 0px;
   }
 
+  // SASSTODO: Apply a real selector
   span[ml-info-icon],
   label {
     display: block;
diff --git a/x-pack/plugins/ml/public/components/form_label/_index.scss b/x-pack/plugins/ml/public/components/form_label/_index.scss
new file mode 100644
index 0000000000000..916046a266204
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/form_label/_index.scss
@@ -0,0 +1 @@
+@import 'form_label';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/form_label/form_label.js b/x-pack/plugins/ml/public/components/form_label/form_label.js
index efdbf6b392651..7ba488d3d061c 100644
--- a/x-pack/plugins/ml/public/components/form_label/form_label.js
+++ b/x-pack/plugins/ml/public/components/form_label/form_label.js
@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './styles/main.less';
-
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
diff --git a/x-pack/plugins/ml/public/components/form_label/index.js b/x-pack/plugins/ml/public/components/form_label/index.js
index f850e7b7a2fd2..4d4a0f7703a91 100644
--- a/x-pack/plugins/ml/public/components/form_label/index.js
+++ b/x-pack/plugins/ml/public/components/form_label/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './form_label_directive';
-import './styles/main.less';
+import './form_label_directive';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/influencers_list/_index.scss b/x-pack/plugins/ml/public/components/influencers_list/_index.scss
new file mode 100644
index 0000000000000..90ff743d162f0
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/influencers_list/_index.scss
@@ -0,0 +1 @@
+@import 'influencers_list';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/influencers_list/_influencers_list.scss b/x-pack/plugins/ml/public/components/influencers_list/_influencers_list.scss
new file mode 100644
index 0000000000000..c3e3bee2ab9a7
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/influencers_list/_influencers_list.scss
@@ -0,0 +1,106 @@
+.ml-influencers-list {
+  line-height: 1.45; // SASSTODO: Calc proper value
+
+  .field-label {
+    font-size: $euiFontSizeXS;
+    text-align: left;
+
+    .field-value {
+      @include euiTextTruncate;
+
+      max-width: calc(100% - 34px); // SASSTODO: Calc proper value
+      display: inline-block;
+      vertical-align: bottom;
+    }
+  }
+
+  .progress {
+    display:inline-block;
+    width: calc(100% - 34px); // SASSTODO: Calc porper value
+    height: 22px;
+    min-width: 70px;
+    margin-bottom: 0px;
+    color: $euiColorDarkShade;
+    background-color : transparent;
+
+    .progress-bar-holder {
+      width: calc(100% - 28px); // SASSTODO: Calc porper value
+    }
+
+    .progress-bar {
+      height: $euiSizeXS / 2;
+      margin-top: $euiSizeS;
+      text-align: right;
+      line-height: 18px; // SASSTODO: Calc porper value
+      display: inline-block;
+      transition: none;
+    }
+  }
+
+  // SASSTODO: This range of color is too large, needs to be rewritten and variablized
+  .progress.critical {
+    .progress-bar {
+      background-color: $mchColorCritical;
+    }
+    .score-label {
+      border-color: $mchColorCritical;
+    }
+  }
+
+  .progress.major {
+    .progress-bar {
+      background-color: $mchColorMajor;
+    }
+    .score-label {
+      border-color: $mchColorMajor;
+    }
+  }
+
+  .progress.minor {
+    .progress-bar {
+      background-color: $mchColorMinor;
+    }
+    .score-label {
+      border-color: $mchColorMinor;
+    }
+  }
+
+  .progress.warning {
+    .progress-bar {
+      background-color: $mchColorWarning;
+    }
+    .score-label {
+      border-color: $mchColorWarning;
+    }
+  }
+
+  .score-label {
+    text-align: center;
+    line-height: 14px;
+    white-space: nowrap;
+    font-size: $euiFontSizeXS;
+    display: inline;
+    margin-left: $euiSizeXS;
+  }
+
+  // SASSTODO: Brittle sizing
+  .total-score-label {
+    width: $euiSizeXL;
+    vertical-align: top;
+    text-align: center;
+    color: $euiColorDarkShade;
+    font-size: 11px;
+    line-height: 14px;
+    border-radius: $euiBorderRadius;
+    padding: $euiSizeXS / 2;
+    margin-top: 1px;
+    display: inline-block;
+    border: $euiBorderThin;
+  }
+}
+
+  // SASSTODO: Can .eui-textBreakAll
+.ml-influencers-list-tooltip {
+  word-break: break-all;
+}
+
diff --git a/x-pack/plugins/ml/public/components/influencers_list/index.js b/x-pack/plugins/ml/public/components/influencers_list/index.js
index ab50fbb57f37a..daa351ca90f68 100644
--- a/x-pack/plugins/ml/public/components/influencers_list/index.js
+++ b/x-pack/plugins/ml/public/components/influencers_list/index.js
@@ -5,5 +5,4 @@
  */
 
 
-import './influencers_list_directive';
-import './styles/main.less';
+import './influencers_list_directive';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/influencers_list/styles/main.less b/x-pack/plugins/ml/public/components/influencers_list/styles/main.less
deleted file mode 100644
index d1fd0f14ebb9b..0000000000000
--- a/x-pack/plugins/ml/public/components/influencers_list/styles/main.less
+++ /dev/null
@@ -1,104 +0,0 @@
-.ml-influencers-list {
-  line-height: 1.45;
-
-  .field-label {
-    font-size: 12px;
-    text-align: left;
-
-    .field-value {
-      max-width: calc(~"100% - 34px");
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      display: inline-block;
-      vertical-align: bottom;
-    }
-  }
-
-  .progress {
-    display:inline-block;
-    width: calc(~"100% - 34px");
-    height: 22px;
-    min-width: 70px;
-    margin-bottom: 0px;
-    color: #555;
-    background-color : transparent;
-
-    .progress-bar-holder {
-      width: calc(~"100% - 28px");
-    }
-
-    .progress-bar {
-      height: 2px;
-      margin-top: 8px;
-      text-align: right;
-      line-height: 18px;
-      display: inline-block;
-      transition: none;
-    }
-  }
-
-  .progress.critical {
-    .progress-bar {
-      background-color: #fe5050;
-    }
-    .score-label {
-      border-color: #fe5050;
-    }
-  }
-
-  .progress.major {
-    .progress-bar {
-      background-color: #fba740;
-    }
-    .score-label {
-      border-color: #fba740;
-    }
-  }
-
-  .progress.minor {
-    .progress-bar {
-      background-color: #ffdd00;
-    }
-    .score-label {
-      border-color: #ffdd00;
-    }
-  }
-
-  .progress.warning {
-    .progress-bar {
-      background-color: #8bc8fb;
-    }
-    .score-label {
-      border-color: #8bc8fb;
-    }
-  }
-
-  .score-label {
-    text-align: center;
-    line-height: 14px;
-    white-space: nowrap;
-    font-size: 12px;
-    display: inline;
-    margin-left: 4px;
-  }
-
-  .total-score-label {
-    width: 32px;
-    vertical-align: top;
-    text-align: center;
-    color: #555;
-    font-size: 11px;
-    line-height: 14px;
-    border-radius: 4px;
-    padding: 2px;
-    margin-top: 1px;
-    display: inline-block;
-    border: 1px solid #bbbbbb;
-  }
-}
-
-.ml-influencers-list-tooltip {
-  word-break: break-all;
-}
-
diff --git a/x-pack/plugins/ml/public/components/item_select/_index.scss b/x-pack/plugins/ml/public/components/item_select/_index.scss
new file mode 100644
index 0000000000000..1e899a58e7b1b
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/item_select/_index.scss
@@ -0,0 +1 @@
+@import 'item_select';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/item_select/_item_select.scss b/x-pack/plugins/ml/public/components/item_select/_item_select.scss
new file mode 100644
index 0000000000000..543d9e85eff41
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/item_select/_item_select.scss
@@ -0,0 +1,52 @@
+// This file contains a lot of additive hacks on top of bootstrap.
+.ml-item-select {
+  .ui-select-container {
+    .ui-select-choices-group-label {
+      color: $euiColorMediumShade;
+    }
+
+    small {
+      font-size: $euiFontSizeXS;
+      margin-top: $euiSizeXS / 2;
+      font-style: italic;
+      color: $euiColorMediumShade;
+    }
+
+    .ui-select-choices-row.active {
+      small {
+        color: $euiColorMediumShade;
+      }
+    }
+  }
+
+  // SASSTODO: Brittle sizing matches other Kibana hacks
+  .ui-select-multiple.ui-select-bootstrap {
+    padding: 3px 5px 0px !important;
+  }
+}
+
+// SASSTODO: This is overwriting core behavior, needs a proper selector
+.ui-select-bootstrap.open {
+  z-index: $euiZComboBox;
+}
+
+.ui-select-container {
+  .ui-select-choices-group-label {
+    color: $euiColorMediumShade;
+  }
+
+  // SASSTODO: Needs to be a proper selector
+  small {
+    font-size: $euiFontSizeXS;
+    margin-top: $euiSizeXS / 2;
+    font-style: italic;
+    color: $euiColorDarkShade;
+  }
+
+  .ui-select-choices-row.active {
+    // SASSTODO: Needs to be a proper selector
+    small {
+      color:$euiColorEmptyShade;
+    }
+  }
+}
diff --git a/x-pack/plugins/ml/public/components/item_select/index.js b/x-pack/plugins/ml/public/components/item_select/index.js
index 79e9e94df086d..e9e84a6962db0 100644
--- a/x-pack/plugins/ml/public/components/item_select/index.js
+++ b/x-pack/plugins/ml/public/components/item_select/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './item_select';
-import './styles/main.less';
+import './item_select';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/item_select/styles/main.less b/x-pack/plugins/ml/public/components/item_select/styles/main.less
deleted file mode 100644
index 1da45d80785d6..0000000000000
--- a/x-pack/plugins/ml/public/components/item_select/styles/main.less
+++ /dev/null
@@ -1,47 +0,0 @@
-.ml-item-select {
-  .ui-select-container {
-    .ui-select-choices-group-label {
-      color: #999999;
-    }
-
-    small {
-      font-size: 12px;
-      margin-top: 2px;
-      font-style: italic;
-      color: #999999;
-    }
-
-    .ui-select-choices-row.active {
-      small {
-        color: #ffffff;
-      }
-    }
-  }
-
-  .ui-select-multiple.ui-select-bootstrap {
-    padding: 3px 5px 0px !important;
-  }
-}
-
-body > .ui-select-bootstrap.open {
-  z-index: 1050;
-}
-
-body > .ui-select-container {
-  .ui-select-choices-group-label {
-    color: #999999;
-  }
-
-  small {
-    font-size: 12px;
-    margin-top: 2px;
-    font-style: italic;
-    color: #999999;
-  }
-
-  .ui-select-choices-row.active {
-    small {
-      color: #ffffff;
-    }
-  }
-}
diff --git a/x-pack/plugins/ml/public/components/items_grid/_index.scss b/x-pack/plugins/ml/public/components/items_grid/_index.scss
new file mode 100644
index 0000000000000..243c80da52918
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/items_grid/_index.scss
@@ -0,0 +1 @@
+@import 'items_grid';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/items_grid/_items_grid.scss b/x-pack/plugins/ml/public/components/items_grid/_items_grid.scss
new file mode 100644
index 0000000000000..c3bd6b115bbd6
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/items_grid/_items_grid.scss
@@ -0,0 +1,3 @@
+.ml-items-grid-page-size-menu {
+  width: 140px; // SASSTODO: Needs a proper calc
+}
diff --git a/x-pack/plugins/ml/public/components/items_grid/items_grid.js b/x-pack/plugins/ml/public/components/items_grid/items_grid.js
index c653479a125b4..e5c9099cc8627 100644
--- a/x-pack/plugins/ml/public/components/items_grid/items_grid.js
+++ b/x-pack/plugins/ml/public/components/items_grid/items_grid.js
@@ -22,8 +22,6 @@ import {
 
 import { ItemsGridPagination } from './items_grid_pagination';
 
-import './styles/main.less';
-
 export function ItemsGrid({
   numberColumns,
   totalItemCount,
diff --git a/x-pack/plugins/ml/public/components/items_grid/styles/main.less b/x-pack/plugins/ml/public/components/items_grid/styles/main.less
deleted file mode 100644
index f38cd62e98543..0000000000000
--- a/x-pack/plugins/ml/public/components/items_grid/styles/main.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.ml-items-grid-page-size-menu {
-  width: 140px;
-}
diff --git a/x-pack/plugins/ml/public/components/job_group_select/_index.scss b/x-pack/plugins/ml/public/components/job_group_select/_index.scss
new file mode 100644
index 0000000000000..863a95cdf013b
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/job_group_select/_index.scss
@@ -0,0 +1 @@
+@import 'job_group_select';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/job_group_select/styles/main.less b/x-pack/plugins/ml/public/components/job_group_select/_job_group_select.scss
similarity index 52%
rename from x-pack/plugins/ml/public/components/job_group_select/styles/main.less
rename to x-pack/plugins/ml/public/components/job_group_select/_job_group_select.scss
index 33ba31bf5b4c2..06d6aa222814c 100644
--- a/x-pack/plugins/ml/public/components/job_group_select/styles/main.less
+++ b/x-pack/plugins/ml/public/components/job_group_select/_job_group_select.scss
@@ -1,28 +1,33 @@
+// SASSTODO: More specific selector, this is a bad cascade
 .ml-job-group-select {
   .ui-select-container {
     .ui-select-choices-group-label {
-      color: #999999;
+      color: $euiColorMediumShade;
     }
 
+    // SASSTODO: More specific selector
     small {
       font-size: 12px;
       margin-top: 2px;
       font-style: italic;
-      color: #999999;
+      color: $euiColorMediumShade;
     }
 
     .ui-select-choices-row.active {
+      // SASSTODO: More specific selector
       small {
-        color: #ffffff;
+        color: $euiColorEmptyShade;
       }
     }
   }
 
   .ui-select-multiple.ui-select-bootstrap {
+    // SASSTODO: Needs proper variables
     padding: 3px 5px 0px !important;
   }
 }
 
+// SASSTODO: More specific selector, this is a dangerous overwrite
 body > .ui-select-bootstrap.open {
   z-index: 1050;
 }
diff --git a/x-pack/plugins/ml/public/components/job_group_select/index.js b/x-pack/plugins/ml/public/components/job_group_select/index.js
index 4c2ab3951f62f..ae7894b6f29c0 100644
--- a/x-pack/plugins/ml/public/components/job_group_select/index.js
+++ b/x-pack/plugins/ml/public/components/job_group_select/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './job_group_select';
-import './styles/main.less';
+import './job_group_select';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/job_select_list/_index.scss b/x-pack/plugins/ml/public/components/job_select_list/_index.scss
new file mode 100644
index 0000000000000..800524055a68c
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/job_select_list/_index.scss
@@ -0,0 +1 @@
+@import 'job_select_list';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/job_select_list/styles/main.less b/x-pack/plugins/ml/public/components/job_select_list/_job_select_list.scss
similarity index 90%
rename from x-pack/plugins/ml/public/components/job_select_list/styles/main.less
rename to x-pack/plugins/ml/public/components/job_select_list/_job_select_list.scss
index b028336d868e4..271acc16bf4a7 100644
--- a/x-pack/plugins/ml/public/components/job_select_list/styles/main.less
+++ b/x-pack/plugins/ml/public/components/job_select_list/_job_select_list.scss
@@ -1,8 +1,15 @@
+// SASSTODO: This file needs a rewrite. Needs to be variablized and have actual calculations rather than pixels.
+// Lots of custom colors in here need to be replaced.
+
+// SASSTODO: EXTREMELY DANGEROUS OVERWRITE
+// Little worried about touching it now
 navbar {
   padding: 10px;
   background-color: #EFF0F1;
 }
 
+// SASSTODO: EXTREMELY DANGEROUS OVERWRITE
+// Little worried about touching it now
 navbar button[disabled] {
   color: #FFF;
   background-color: #0079a5;
@@ -36,15 +43,18 @@ navbar button[disabled] {
     }
   }
 
+  // SASSTODO: Replace with proper selector
   hr {
     margin: 2px 0px;
   }
 
+  // SASSTODO: Replace with proper selector
   label {
     margin-bottom: 0px;
     font-weight: normal;
   }
 
+  // SASSTODO: Replace with proper selector
   input {
     margin-right: 4px;
     margin-left: 4px;
@@ -55,6 +65,8 @@ navbar button[disabled] {
     position: absolute;
     right: 16px;
     bottom: 12px;
+
+    // SASSTODO: Replace with proper selector
     input {
       margin-right: 0px;
     }
@@ -114,6 +126,7 @@ navbar button[disabled] {
         padding: 0px;
         line-height: 20px;
 
+        // SASSTODO: Replace with proper selector
         & > label > div {
           width: 280px;
           display: inline-block;
@@ -128,6 +141,8 @@ navbar button[disabled] {
             color: #cccccc;
           }
         }
+
+        // SASSTODO: Replace with proper selector
         & > label > div:nth-child(2) {
           width: 310px;
           border-left: 1px solid #eee;
@@ -158,6 +173,7 @@ navbar button[disabled] {
         border-radius: 2px;
       }
 
+      // SASSTODO: This needs to be rebuilt
       .gant-bar-running {
         background-image:-webkit-gradient(linear,
           0 100%, 100% 0,
@@ -218,6 +234,7 @@ navbar button[disabled] {
         margin-bottom: -16px;
         padding-top: 9px;
 
+        // SASSTODO: Needs a poper selector
         div {
           height: 1px;
           border-top: 1px dashed #d6d6d6;
@@ -226,6 +243,8 @@ navbar button[disabled] {
     }
     .job-row:hover {
       .job-row-inner {
+
+        // SASSTODO: Needs a poper selector
         & > label > div {
           background-color: #f2f2f2;
         }
diff --git a/x-pack/plugins/ml/public/components/job_select_list/index.js b/x-pack/plugins/ml/public/components/job_select_list/index.js
index f2cdc43dcc01e..b826021fe85f1 100644
--- a/x-pack/plugins/ml/public/components/job_select_list/index.js
+++ b/x-pack/plugins/ml/public/components/job_select_list/index.js
@@ -9,5 +9,4 @@
 
 import './job_select_list_directive';
 import './job_select_button_directive.js';
-import './job_select_service.js';
-import './styles/main.less';
+import './job_select_service.js';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/json_tooltip/_index.scss b/x-pack/plugins/ml/public/components/json_tooltip/_index.scss
new file mode 100644
index 0000000000000..5c2fb69a4d842
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/json_tooltip/_index.scss
@@ -0,0 +1 @@
+@import 'json_tooltip';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/json_tooltip/styles/main.less b/x-pack/plugins/ml/public/components/json_tooltip/_json_tooltip.scss
similarity index 50%
rename from x-pack/plugins/ml/public/components/json_tooltip/styles/main.less
rename to x-pack/plugins/ml/public/components/json_tooltip/_json_tooltip.scss
index 3e913533d458c..af0384240582e 100644
--- a/x-pack/plugins/ml/public/components/json_tooltip/styles/main.less
+++ b/x-pack/plugins/ml/public/components/json_tooltip/_json_tooltip.scss
@@ -1,8 +1,9 @@
 .ml-info-icon {
-  color: #888;
-  margin: 0 4px;
-  transition: color 0.15s;
+  color: $euiColorMediumShade;
+  margin: 0 $euiSizeXS;
+  transition: color 0.15s; // SASSTODO: Variablize
 
+  // SASSTODO: This needs to be removed
   /* hard-coded euiIcon size because EuiIconTip doesn't pass on the size attribute to EuiIcon */
   .euiIcon {
     width: 12px;
@@ -15,6 +16,6 @@
 }
 
 .ml-info-icon:hover {
-  color: #444;
-  transition: color 0.15s 0.15s;
-}
+  color: $euiColorDarkestShade;
+  transition: color 0.15s 0.15s;  // SASSTODO: Variablize
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/json_tooltip/json_tooltip.js b/x-pack/plugins/ml/public/components/json_tooltip/json_tooltip.js
index 7eb9712398176..3b49c39161b0f 100644
--- a/x-pack/plugins/ml/public/components/json_tooltip/json_tooltip.js
+++ b/x-pack/plugins/ml/public/components/json_tooltip/json_tooltip.js
@@ -9,8 +9,6 @@
 // component for placing an icon with a popover tooltip anywhere on a page
 // the id will match an entry in tooltips.json
 import tooltips from './tooltips.json';
-import './styles/main.less';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/x-pack/plugins/ml/public/components/loading_indicator/_index.scss b/x-pack/plugins/ml/public/components/loading_indicator/_index.scss
new file mode 100644
index 0000000000000..aaab50ac5763f
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/loading_indicator/_index.scss
@@ -0,0 +1 @@
+@import 'loading_indicator';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/loading_indicator/styles/main.less b/x-pack/plugins/ml/public/components/loading_indicator/_loading_indicator.scss
similarity index 88%
rename from x-pack/plugins/ml/public/components/loading_indicator/styles/main.less
rename to x-pack/plugins/ml/public/components/loading_indicator/_loading_indicator.scss
index addb8a931248b..7bbe1d18987b2 100644
--- a/x-pack/plugins/ml/public/components/loading_indicator/styles/main.less
+++ b/x-pack/plugins/ml/public/components/loading_indicator/_loading_indicator.scss
@@ -1,3 +1,5 @@
+// SASSTODO: This needs to be replaced with EuiLoadingSpinner
+
 /* angular */
 ml-loading-indicator {
   .loading-indicator {
diff --git a/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator.js b/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator.js
index a363771c77b69..42d0e7e8f4c4b 100644
--- a/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator.js
+++ b/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator.js
@@ -6,8 +6,6 @@
 
 
 
-import './styles/main.less';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator_directive.js b/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator_directive.js
index b0d34178a00cb..e607b8a9af64f 100644
--- a/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator_directive.js
+++ b/x-pack/plugins/ml/public/components/loading_indicator/loading_indicator_directive.js
@@ -5,8 +5,6 @@
  */
 
 
-
-import './styles/main.less';
 import template from './loading_indicator.html';
 
 import { uiModules } from 'ui/modules';
diff --git a/x-pack/plugins/ml/public/components/messagebar/_index.scss b/x-pack/plugins/ml/public/components/messagebar/_index.scss
new file mode 100644
index 0000000000000..55e87d2640465
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/messagebar/_index.scss
@@ -0,0 +1 @@
+@import 'messagebar';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/messagebar/_messagebar.scss b/x-pack/plugins/ml/public/components/messagebar/_messagebar.scss
new file mode 100644
index 0000000000000..a4d48ff64ad6b
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/messagebar/_messagebar.scss
@@ -0,0 +1,35 @@
+
+ml-message-bar {
+  font-size: $euiFontSizeS;
+
+  // SASSTODO: Needs proper selector
+  div {
+    padding: $euiSizeXS;
+  }
+
+  .ml-message {
+    border-bottom: 1px solid $euiColorEmptyShade;
+    color: $euiColorEmptyShade;
+    margin: 0px;
+    border-radius: $euiBorderRadius;
+    padding: $euiSizeXS $euiSizeS;
+
+    // SASSTODO: Needs proper selector
+    a {
+      color: $euiColorEmptyShade;
+      float: right;
+    }
+  }
+
+  // SASSTODO: Needs proper variables
+  .ml-message-info {
+    background-color: #858585;
+  }
+  .ml-message-warning {
+    background-color: #FF7800;
+  }
+  .ml-message-error {
+    background-color: #e74c3c;
+  }
+
+}
diff --git a/x-pack/plugins/ml/public/components/messagebar/messagebar.js b/x-pack/plugins/ml/public/components/messagebar/messagebar.js
index ade1f5da19d7b..293b0bc507b29 100644
--- a/x-pack/plugins/ml/public/components/messagebar/messagebar.js
+++ b/x-pack/plugins/ml/public/components/messagebar/messagebar.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import template from './messagebar.html';
 
 import { mlMessageBarService } from 'plugins/ml/components/messagebar/messagebar_service';
diff --git a/x-pack/plugins/ml/public/components/messagebar/styles/main.less b/x-pack/plugins/ml/public/components/messagebar/styles/main.less
deleted file mode 100644
index 2156330a048f3..0000000000000
--- a/x-pack/plugins/ml/public/components/messagebar/styles/main.less
+++ /dev/null
@@ -1,31 +0,0 @@
-
-ml-message-bar {
-  font-size: 14px;
-  div {
-    padding: 5px;
-  }
-
-  .ml-message {
-    border-bottom: 1px solid #FFFFFF;
-    color: #FFFFFF;
-    margin: 0px;
-    border-radius: 2px;
-    padding: 5px 10px 5px 10px;
-
-    a {
-      color: #FFFFFF;
-      float: right;
-    }
-  }
-
-  .ml-message-info {
-    background-color: #858585;
-  }
-  .ml-message-warning {
-    background-color: #FF7800;
-  }
-  .ml-message-error {
-    background-color: #e74c3c;
-  }
-
-}
diff --git a/x-pack/plugins/ml/public/components/paginated_table/_index.scss b/x-pack/plugins/ml/public/components/paginated_table/_index.scss
new file mode 100644
index 0000000000000..f55bedcccf3d0
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/paginated_table/_index.scss
@@ -0,0 +1 @@
+@import 'paginated_table';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss b/x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss
new file mode 100644
index 0000000000000..411ed148269be
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss
@@ -0,0 +1,52 @@
+ml-paginated-table {
+
+  .col-expand-arrow {
+    width: 10px;
+  }
+
+  .table-header-button {
+    border: none;
+    background: none;
+    padding: 0;
+  }
+
+  // SASSTODO: Needs proper selector
+  table th {
+    font-weight: $euiFontWeightBold;
+    text-align: left;
+  }
+
+  // SASSTODO: Needs proper selector
+  table th button.fa-sort {
+    color: $euiColorLightShade;
+  }
+
+  tr.row-expand td:hover,
+  tr.row-expand td:hover td {
+    background-color: $euiColorEmptyShade;
+  }
+
+  .discover-table-open-button {
+    background-color: $euiColorEmptyShade;
+    border: none;
+    min-width: 20px;
+  }
+  .discover-table-open-button:focus {
+  	outline: none;
+  }
+
+  paginate-controls {
+
+    // SASSTODO: Looks like an EUI overwrite, pixels values need a proper calc
+    button.euiPaginationButton {
+      padding: 1px 7px 2px;
+    }
+
+  // SASSTODO: Needs proper selector
+    label {
+      @include euiFontSizeXS;
+
+      font-weight: $euiFontWeightBold;
+    }
+  }
+}
diff --git a/x-pack/plugins/ml/public/components/paginated_table/paginated_table.js b/x-pack/plugins/ml/public/components/paginated_table/paginated_table.js
new file mode 100644
index 0000000000000..a1aed2ca2acbd
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/paginated_table/paginated_table.js
@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+
+// copy of Kibana's ui/public/paginated_table/paginated_table.js
+// but with the one-time binding removed from the scope columns object
+// in the paginated_table.html template, to allow dynamic changes to
+// the list of columns shown in the table.
+
+import './row';
+
+import 'ui/directives/paginate';
+import 'ui/styles/pagination.less';
+import _ from 'lodash';
+import template from './paginated_table.html';
+
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml');
+
+module.directive('mlPaginatedTable', function ($filter) {
+  const orderBy = $filter('orderBy');
+
+  return {
+    restrict: 'E',
+    template,
+    transclude: true,
+    scope: {
+      rows: '=',
+      columns: '=',
+      perPage: '=?',
+      sortHandler: '=?',
+      showSelector: '=?'
+    },
+    controllerAs: 'mlPaginatedTable',
+    controller: function ($scope) {
+      const self = this;
+      self.sort = {
+        columnIndex: null,
+        direction: null
+      };
+
+      self.sortColumn = function (colIndex) {
+        const col = $scope.columns[colIndex];
+
+        if (!col) return;
+        if (col.sortable === false) return;
+
+        let sortDirection;
+
+        if (self.sort.columnIndex !== colIndex) {
+          sortDirection = 'asc';
+        } else {
+          const directions = {
+            null: 'asc',
+            'asc': 'desc',
+            'desc': null
+          };
+          sortDirection = directions[self.sort.direction];
+        }
+
+        self.sort.columnIndex = colIndex;
+        self.sort.direction = sortDirection;
+        self._setSortGetter(colIndex);
+      };
+
+      self._setSortGetter = function (index) {
+        if (_.isFunction($scope.sortHandler)) {
+          // use custom sort handler
+          self.sort.getter = $scope.sortHandler(index);
+        } else {
+          // use generic sort handler
+          self.sort.getter = function (row) {
+            const value = row[index];
+            if (value && value.value !== undefined && value.value !== null) {
+              if (typeof value.value === 'function') {
+                return value.value();
+              } else {
+                return value.value;
+              }
+            } else {
+              return value;
+            }
+          };
+        }
+      };
+
+      // update the sortedRows result
+      $scope.$watchMulti([
+        'rows',
+        'columns',
+        '[]mlPaginatedTable.sort'
+      ], function resortRows() {
+        if (!$scope.rows || !$scope.columns) {
+          $scope.sortedRows = false;
+          return;
+        }
+
+        const sort = self.sort;
+        if (sort.direction == null) {
+          $scope.sortedRows = $scope.rows.slice(0);
+        } else {
+          $scope.sortedRows = orderBy($scope.rows, sort.getter, sort.direction === 'desc');
+        }
+      });
+    }
+  };
+});
diff --git a/x-pack/plugins/ml/public/components/rule_editor/_index.scss b/x-pack/plugins/ml/public/components/rule_editor/_index.scss
new file mode 100644
index 0000000000000..cff43ee98bc08
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/rule_editor/_index.scss
@@ -0,0 +1,3 @@
+@import 'rule_editor';
+
+@import 'components/detector_description_list/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/rule_editor/styles/main.less b/x-pack/plugins/ml/public/components/rule_editor/_rule_editor.scss
similarity index 58%
rename from x-pack/plugins/ml/public/components/rule_editor/styles/main.less
rename to x-pack/plugins/ml/public/components/rule_editor/_rule_editor.scss
index b3770f9b31c97..d033a255a3d16 100644
--- a/x-pack/plugins/ml/public/components/rule_editor/styles/main.less
+++ b/x-pack/plugins/ml/public/components/rule_editor/_rule_editor.scss
@@ -1,17 +1,19 @@
+// SASSTODO: This file needs a rewrite. It is overwriting EUI in very dangerous / brittle ways.
 .ml-rule-editor-flyout {
-  font-size: 14px;
+  font-size: $euiFontSizeS;
 
   .select-rule-action .rule-detector-description-list {
-    padding-left: 16px;
+    padding-left: $euiSize;
   }
 
   .select-rule-action-panel {
-    padding:10px 0px;
+    padding: $euiSizeS 0px;
 
+    // SASSTODO: Dangerous EUI overwrite
     .euiDescriptionList {
       .euiDescriptionList__title {
         flex-basis: 15%;
-        padding: 0px 16px;
+        padding: 0px $euiSize;
       }
 
       .euiDescriptionList__description {
@@ -20,34 +22,37 @@
 
       .euiDescriptionList__title:nth-child(1),
       .euiDescriptionList__description:nth-child(2) {
-        color: #1a1a1a;
-        font-weight: 600;
-        border-bottom : 1px solid #d9d9d9;
-        padding-bottom: 12px;
+        color: $euiTitleColor;
+        font-weight: $euiFontWeightBold;
+        border-bottom: $euiBorderThin;
+        padding-bottom: $euiSizeM;
       }
 
       .euiDescriptionList__title:nth-child(3),
       .euiDescriptionList__description:nth-child(4) {
-        padding-top: 6px;
+        padding-top: $euiSizeS;
       }
     }
 
+    // SASSTODO: Dangerous EUI overwrite
     .euiDescriptionList.euiDescriptionList--column > * {
-      margin-top: 5px;
+      margin-top: $euiSizeXS;
     }
   }
 
+  // SASSTODO: Dangerous EUI overwrite
   .scope-enable-checkbox {
     .euiCheckbox__input[disabled] ~ .euiCheckbox__label {
       color: inherit;
     }
   }
 
+  // SASSTODO: Dangerous EUI overwrite
   .scope-field-checkbox {
-    margin-right: 2px;
+    margin-right: $euiSizeXS / 2;
 
     .euiCheckbox {
-      margin-top: 6px;
+      margin-top: $euiSizeXS;
     }
   }
 
@@ -57,10 +62,11 @@
   }
 
   .scope-edit-filter-link {
-    line-height: 32px;
-    font-size: 12px;
+    line-height: $euiSizeXL;
+    font-size: $euiFontSizeXS;
   }
 
+  // SASSTODO: Needs proper calculated values
   .condition-edit-value-field {
     width: 170px;
     height: 28px;
@@ -76,12 +82,12 @@
 
     .euiExpressionButton__value,
     .euiExpressionButton__description {
-      color: #c5c5c5;
+      color: $euiColorLightShade;
     }
   }
 
   .text-highlight {
-    font-weight: bold;
+    font-weight: $euiFontWeightBold;
   }
 
 }
diff --git a/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/styles/main.less b/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/_detector_description_list.scss
similarity index 73%
rename from x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/styles/main.less
rename to x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/_detector_description_list.scss
index 74deb0de3e5c5..7ecfe765c4443 100644
--- a/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/styles/main.less
+++ b/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/_detector_description_list.scss
@@ -1,3 +1,4 @@
+// SASSTODO: Dangerous EUI overwrites
 .euiDescriptionList.euiDescriptionList--column.rule-detector-description-list {
   .euiDescriptionList__title {
     flex-basis: 15%;
@@ -8,6 +9,7 @@
   }
 }
 
+// SASSTODO: Dangerous EUI overwrites
 .euiDescriptionList.euiDescriptionList--column.rule-detector-description-list > * {
-  margin-top: 4px;
+  margin-top: $euiSizeXS;
 }
diff --git a/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/_index.scss b/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/_index.scss
new file mode 100644
index 0000000000000..2754bc45053dc
--- /dev/null
+++ b/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/_index.scss
@@ -0,0 +1 @@
+@import 'detector_description_list';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/detector_description_list.js b/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/detector_description_list.js
index 55c63be42fe32..c8a293e134489 100644
--- a/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/detector_description_list.js
+++ b/x-pack/plugins/ml/public/components/rule_editor/components/detector_description_list/detector_description_list.js
@@ -19,8 +19,6 @@ import {
 
 import { formatValue } from '../../../../formatters/format_value';
 
-import './styles/main.less';
-
 export function DetectorDescriptionList({
   job,
   detector,
diff --git a/x-pack/plugins/ml/public/components/rule_editor/rule_editor_flyout.js b/x-pack/plugins/ml/public/components/rule_editor/rule_editor_flyout.js
index f58a18b6e95b4..4f751e98a6749 100644
--- a/x-pack/plugins/ml/public/components/rule_editor/rule_editor_flyout.js
+++ b/x-pack/plugins/ml/public/components/rule_editor/rule_editor_flyout.js
@@ -53,8 +53,6 @@ import { mlJobService } from '../../services/job_service';
 import { ml } from '../../services/ml_api_service';
 import { metadata } from 'ui/metadata';
 
-import './styles/main.less';
-
 // metadata.branch corresponds to the version used in documentation links.
 const docsUrl = `https://www.elastic.co/guide/en/elastic-stack-overview/${metadata.branch}/ml-rules.html`;
 
diff --git a/x-pack/plugins/ml/public/datavisualizer/styles/main.less b/x-pack/plugins/ml/public/datavisualizer/_datavisualizer.scss
similarity index 56%
rename from x-pack/plugins/ml/public/datavisualizer/styles/main.less
rename to x-pack/plugins/ml/public/datavisualizer/_datavisualizer.scss
index b5d85f8228826..8c5e22fca2525 100644
--- a/x-pack/plugins/ml/public/datavisualizer/styles/main.less
+++ b/x-pack/plugins/ml/public/datavisualizer/_datavisualizer.scss
@@ -1,29 +1,24 @@
-@import (reference) "~ui/styles/variables";
-
 .data-visualizer-container {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
-  padding: 10px 20px;
-  background-color: #f5f5f5;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
+  padding: $euiSizeS $euiSize;
+  background-color: $euiColorLightestShade;
   flex: 1 0 auto;
 
   .kuiVerticalRhythm + .kuiVerticalRhythm {
-    margin-top: 20px;
+    margin-top: $euiSizeL;
   }
 
   .title-container {
-    padding-bottom: 10px;
-    padding-right: 6px;
+    padding-bottom: $euiSize;
+    padding-right: $euiSizeS;
   }
 
   .main-container {
-    width: calc(~"100% - 300px");
+    width: calc(100% - 300px);
     display: inline-block;
-    padding-right: 10px;
+    padding-right: $euiSizeS;
   }
   .no-sidebar {
     width: 100%;
@@ -36,28 +31,30 @@
   }
 
   .datavisualizer-panel {
-    padding: 10px 15px;
-    background-color: #ffffff;
+    padding: $euiSizeS $euiSize;
+    background-color: $euiColorEmptyShade;
   }
 
   .datavisualizer-panel.card-panel {
-    padding-right: 5px;
+    padding-right: $euiSizeXS;
   }
 
   .query-bar-form {
-    padding-top: 5px;
+    padding-top: $euiSizeXS;
   }
 
   .document-count-container {
-    padding-top: 10px;
+    padding-top: $euiSizeS;
 
+    // SASSTODO: Make a proper selector
     label {
-      font-weight: normal;
+      font-weight: $euiFontWeightRegular;
     }
 
+    // SASSTODO: Make a proper selector
     .fa-info-circle {
-      color: #555;
-      font-size: 13px;
+      color: $euiColorDarkShade;
+      font-size: $euiFontSizeS;
     }
   }
 
@@ -75,6 +72,7 @@
       margin-left: 10px;
     }
 
+    // SASSTODO: Make a proper selector
     label {
       display: inline;
     }
@@ -83,33 +81,33 @@
   .field-filter-controls {
     margin-bottom: 0px;
     min-width: 400px;
-    padding-bottom: 30px;
-    padding-right: 10px;
+    padding-bottom: $euiSizeXL;
+    padding-right: $euiSizeS;
 
     .type-input {
       float: left;
-      margin-right: 5px;
+      margin-right: $euiSizeXS;
     }
 
   }
 
   .field-emphasis {
-    font-weight: 700;
+    font-weight: $euiFontWeightBold;
   }
 
   .card-container {
     display: inline-grid;
     display: -ms-inline-grid;
-    padding: 0px 10px 10px 0px;
+    padding: 0px $euiSize $euiSize 0px;
   }
 
   .create-job-content {
-    padding-bottom: 5px;
+    padding-bottom: $euiSizeXS;
 
     .synopsisTitle {
-      font-size: 16px;
-      font-weight: normal;
-      color: #0079a5;
+      font-size: $euiFontSizeM;
+      font-weight: $euiFontWeightRegular;
+      color: $euiColorPrimary;
     }
 
     .synopsis:hover {
@@ -121,20 +119,21 @@
     }
 
     .synopsisIcon {
-      padding-top: 8px;
+      padding-top: $euiSizeS;
     }
 
     .recognized-job-content {
-      margin-bottom: 40px;
+      margin-bottom: $euiSizeXXL;
 
       .recognizer-result {
-        margin-top: 10px;
+        margin-top: $euiSizeS;
         margin-bottom: 0px;
       }
     }
   }
 
+  // SASSTODO: Make a proper selector
   p {
-    margin-bottom: 10px;
+    margin-bottom: $euiSize;
   }
 }
diff --git a/x-pack/plugins/ml/public/datavisualizer/_index.scss b/x-pack/plugins/ml/public/datavisualizer/_index.scss
index af259ce363a56..bb9e75eeca96d 100644
--- a/x-pack/plugins/ml/public/datavisualizer/_index.scss
+++ b/x-pack/plugins/ml/public/datavisualizer/_index.scss
@@ -1 +1,2 @@
 @import './selector/index';
+@import 'datavisualizer';
diff --git a/x-pack/plugins/ml/public/datavisualizer/index.js b/x-pack/plugins/ml/public/datavisualizer/index.js
index 6d5d234989988..119ca18812160 100644
--- a/x-pack/plugins/ml/public/datavisualizer/index.js
+++ b/x-pack/plugins/ml/public/datavisualizer/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import './selector';
 import './datavisualizer_controller';
 import 'plugins/ml/components/data_recognizer';
diff --git a/x-pack/plugins/ml/public/explorer/styles/main.less b/x-pack/plugins/ml/public/explorer/_explorer.scss
similarity index 66%
rename from x-pack/plugins/ml/public/explorer/styles/main.less
rename to x-pack/plugins/ml/public/explorer/_explorer.scss
index 462343bfcde34..c152e0a0c8bcf 100644
--- a/x-pack/plugins/ml/public/explorer/styles/main.less
+++ b/x-pack/plugins/ml/public/explorer/_explorer.scss
@@ -1,9 +1,10 @@
 .ml-explorer {
   width: 100%;
   display: inline-block;
-  color: #555;
+  color: $euiColorDarkShade;
 
   .visualize-error {
+    // SASSTODO: Make a proper selector, use a proper calc
     h4 {
       margin-top: 50px;
     }
@@ -11,141 +12,145 @@
 
   .no-results-container {
     text-align: center;
-    font-size: 17px;
+    font-size: $euiFontSizeL;
+
+    // SASSTODO: Use a proper calc
     padding-top: 60px;
 
     .no-results {
-      background-color: aliceblue;
-      border: 1px solid #DDEFFF;
-      padding: 15px;
-      border-radius: 4px;
+      background-color: $euiFocusBackgroundColor;
+      padding: $euiSize;
+      border-radius: $euiBorderRadius;
       display: inline-block;
 
+    // SASSTODO: Make a proper selector
       i {
-        color: #5a9bd6;
-        margin-right: 5px;
+        color: $euiColorPrimary;
+        margin-right: $euiSizeXS;
       }
 
+
+      // SASSTODO: Make a proper selector
       div:nth-child(2) {
-        margin-top: 10px;
-        font-size: 13px;
+        margin-top: $euiSizeXS;
+        font-size: $euiFontSizeXS;
       }
     }
   }
 
   .results-container {
+    padding: $euiSize 0px $euiSize 0px;
 
+      // SASSTODO: Overwrite of bootstrap
     .col-xs-12 {
-      width: calc(~"100% - 30px");
-      padding-left: 10px;
+      width: calc(100% - #{$euiSizeXL});
+      padding-left: $euiSize;
     }
 
-    padding: 15px 0px 15px 0px;
-
     .no-influencers-warning {
       float: left;
-      padding-top: 2px;
-      padding-left: 15px;
-      color: #7b8a8b;
-      font-size: 14px;
+      padding-top: $euiSizeXS;
+      padding-left: $euiSize;
+      color: $euiColorDarkShade;
+      font-size: $euiFontSizeS;
     }
 
     .panel-title {
-      color: #7b8a8b;
+      color: $euiColorDarkShade;
       display: inline-block;
-      padding-bottom: 5px;
+      padding-bottom: $euiSizeXS;
     }
 
     .panel-sub-title {
-      color: #7b8a8b;
+      color: $euiColorDarkShade;
       display: inline-block;
-      font-size: 12px;
+      font-size: $euiFontSizeXS;
     }
   }
 
   .ml-controls {
-    padding-bottom: 10px;
+    padding-bottom: $euiSizeS;
 
+      // SASSTODO: Make a proper selector
     label {
-      font-size: 12px;
-      padding: 0px 5px 5px 5px;
+      font-size: $euiFontSizeXS;
+      padding: $euiSizeXS;
+      padding-top: 0;
     }
 
     .kuiButtonGroup {
-      padding: 0px 5px 0px 0px;
+      padding: 0px $euiSizeXS 0px 0px;
       position: relative;
       display: inline-block;
     }
 
     button.dropdown-toggle {
+      // SASSTODO: Make a proper calc
       min-width: 160px;
       text-align: left;
-      margin-bottom: 3px;
+      margin-bottom: $euiSizeXS;
 
+      // SASSTODO: Make a proper selector
       span {
-        font-size: 13px;
+        font-size: $euiFontSizeXS;
       }
     }
 
+    // SASSTODO: Make a proper calc
     button.dropdown-toggle.dropdown-toggle-narrow {
       min-width: 60px;
     }
 
     button.dropdown-toggle:hover,
     button.dropdown-toggle:focus {
-      color: #444444;
+      color: $euiColorDarkShade;
     }
 
     .dropdown-menu {
-      font-size: 13px;
+      font-size: $euiFontSizeXS;
     }
 
+      // SASSTODO: Make a proper selector
     .dropdown-menu > li > a {
-      color: #444444;
+      color: $euiColorDarkShade;
       text-decoration: none;
     }
 
     .dropdown-menu > li > a:hover,
     .dropdown-menu > li > a:active,
     .dropdown-menu > li > a:focus {
-      color: #ffffff;
+      color: $euiColorEmptyShade;
       box-shadow: none;
     }
   }
 
   .ml-anomalies-controls {
-    padding-top: 5px;
-
-    .ml-select-severity.euiComboBox {
-      // Overrides .euiComboBox z-index to ensure it appears below the job picker.
-      z-index: 0;
-    }
+    padding-top: $euiSizeXS;
 
     #show_charts_checkbox_control {
-      padding-top: 28px;
+      padding-top: $euiSizeL;
     }
   }
 
+  // SASSTODO: This entire selector needs to be rewritten. 
+  // It looks extremely brittle with very specific sizing units
   .ml-explorer-swimlane {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-
-    padding: 0px 0px 0px 0px;
-    margin-bottom: 10px;
+    user-select: none;
+    padding: 0;
+    margin-bottom: $euiSizeS;
 
     ml-explorer-swimlane {
+      width: 100%;
+      height: 250px;
+
       & > .title {
-        background-color: #9c9fa6;
-        color: white;
-        font-weight: bold;
+        background-color: $euiColorMediumShade;
+        color: $euiColorEmptyShade;
+        font-weight: $euiFontWeightBold;
         margin-top: 0px;
-        border-radius: 2px;
-        margin-bottom: 5px;
+        border-radius: $euiSizeXS/ 2;
+        margin-bottom: $euiSizeXS;
       }
-
-      width: 100%;
-      height: 250px;
     }
 
     ml-explorer-swimlane.ml-dragselect-dragging {
@@ -166,7 +171,7 @@
                 opacity: 1;
               }
               .sl-cell-inner.sl-cell-inner-selected {
-                border-width: 2px;
+                border-width: $euiSizeXS / 2;
               }
               .sl-cell-inner.sl-cell-inner-masked {
                 opacity: 0.2;
@@ -195,7 +200,7 @@
           cursor: default;
 
           i {
-            color: #777777;
+            color: $euiColorDarkShade;
           }
         }
         .sl-cell-hover {
@@ -238,24 +243,24 @@
         }
 
         div.cells-container {
-          border: 1px solid #e6e6e6;
+          border: $euiBorderThin;
           border-right: 0px;
           display: inline-block;
           height: 30px;
           vertical-align: middle;
-          background-color: #FFFFFF;
+          background-color: $euiColorEmptyShade;
 
           .sl-cell {
-            color: #FFF;
+            color: $euiColorEmptyShade;
             cursor: default;
             display: inline-block;
             height: 29px;
-            border-right: 1px solid #e6e6e6;
+            border-right: $euiBorderThin;
             vertical-align: top;
             position: relative;
             .sl-cell-inner, .sl-cell-inner-dragselect {
               height: 26px;
-              margin:1px 1px 1px 1px;
+              margin: 1px;
               border-radius: 2px;
               text-align: center;
             }
@@ -264,12 +269,12 @@
             }
             .sl-cell-inner.sl-cell-inner-selected,
             .sl-cell-inner-dragselect.sl-cell-inner-selected {
-              border: 2px solid #6B6B6B;
+              border: 2px solid $euiColorMediumShade;
             }
 
             .sl-cell-inner.sl-cell-inner-selected.sl-cell-inner-masked,
             .sl-cell-inner-dragselect.sl-cell-inner-selected.sl-cell-inner-masked {
-              border: 2px solid #000000;
+              border: 2px solid $euiColorFullShade;
               opacity: 0.4;
             }
           }
@@ -282,28 +287,26 @@
           .sl-cell.ds-selected {
             .sl-cell-inner,
             .sl-cell-inner-dragselect {
-              border: 2px solid #6B6B6B;
+              border: 2px solid $euiColorMediumShade;
               border-radius: 2px;
               opacity: 1;
             }
           }
 
         }
-
       }
 
       div.lane:last-child {
         div.cells-container {
           .sl-cell {
-            border-bottom: 1px solid #e6e6e6;
+            border-bottom: $euiBorderThin;
           }
-
         }
       }
 
       .time-tick-labels {
         height: 25px;
-        margin-top: 2px;
+        margin-top: $euiSizeXS / 2;
         margin-left: 175px;
         /* hide d3's domain line */
         path.domain {
@@ -315,15 +318,15 @@
         }
         /* override d3's default tick styles */
         g.tick text {
-          font-size:11px;
-          fill: #555;
+          font-size: 11px;
+          fill: $euiColorMediumShade;
         }
       }
     }
 
     line.gridLine {
-      stroke: #e6e6e6;
-      fill : none;
+      stroke: $euiBorderColor;
+      fill: none;
       shape-rendering : crispEdges;
       stroke-width : 1px;
     }
@@ -333,20 +336,20 @@
     }
 
     rect.hovered {
-      stroke: #565656;
-      stroke-width:2px;
+      stroke: $euiColorDarkShade;
+      stroke-width: 2px;
     }
 
     text.laneLabel {
       font-size: 9pt;
-      font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
-      fill: #545454;
+      font-family: $euiFontFamily;
+      fill: $euiColorDarkShade;
     }
 
     text.timeLabel {
       font-size: 8pt;
-      font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
-      fill: #7a7a7a;
+      font-family: $euiFontFamily;
+      fill: $euiColorDarkShade;
     }
   }
 
diff --git a/x-pack/plugins/ml/public/explorer/_index.scss b/x-pack/plugins/ml/public/explorer/_index.scss
new file mode 100644
index 0000000000000..4afbcda2f616c
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/_index.scss
@@ -0,0 +1,2 @@
+@import 'explorer';
+@import 'explorer_charts/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart.scss b/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart.scss
new file mode 100644
index 0000000000000..3afeb197b2fb5
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart.scss
@@ -0,0 +1,113 @@
+// SASSTODO: This file has a lot of very specific colors and sizing that should be calculated
+ml-explorer-chart,
+.ml-explorer-chart-container {
+  display: block;
+  padding-bottom: $euiSize;
+
+  .ml-explorer-chart-svg {
+    font-size: $euiSizeXS;
+    font-family: $euiFontFamily;
+
+    .line-chart {
+      rect {
+        fill: $euiColorEmptyShade;
+        opacity: 1;
+      }
+
+      rect.selected-interval {
+        fill: rgba(200, 200, 200, 0.1);
+        stroke: $euiColorDarkShade;
+        stroke-width: $euiSizeXS / 2;
+        stroke-opacity: 0.8;
+      }
+
+      rect.scheduled-event-marker {
+        stroke-width: 1px;
+        stroke: $euiColorMediumShade;
+        fill: $euiColorLightShade;
+        pointer-events: none;
+      }
+    }
+  }
+
+  .axis path, .axis line {
+    fill: none;
+    stroke: $euiBorderColor;
+    shape-rendering: crispEdges;
+  }
+
+  .axis .tick line.ml-tick-emphasis {
+    stroke: rgba(0, 0, 0, 0.2);
+  }
+
+  .axis text {
+    fill: $euiColorDarkShade;
+  }
+
+  .axis .tick line {
+    stroke: rgba(0, 0, 0, 0.05);
+    stroke-width: 1px;
+  }
+
+  .values-line {
+    fill: none;
+    stroke: #32a7c2;
+    stroke-width: 2;
+  }
+
+  .values-dots circle {
+    fill: #32a7c2;
+    stroke-width: 0;
+  }
+
+  .metric-value {
+    opacity: 1;
+    fill: #32a7c2;
+  }
+
+  circle.metric-value {
+    opacity: 1;
+    fill: transparent;
+    stroke: #32a7c2;
+    stroke-width: 0px;
+  }
+
+  circle.anomaly-marker {
+    stroke-width: 1px;
+    stroke: #aaaaaa;
+  }
+
+  circle.anomaly-marker:hover {
+    stroke-width: 6px;
+    stroke: #32a7c2;
+  }
+
+  circle.metric-value.critical {
+    fill: $mchColorCritical;
+  }
+
+  circle.metric-value.major {
+    fill: $mchColorMajor;
+  }
+
+  circle.metric-value.minor {
+    fill: $mchColorMinor;
+  }
+
+  circle.metric-value.warning {
+    fill: $mchColorWarning;
+  }
+
+  circle.metric-value.low {
+    fill: #d2e9f7; // SASSTODO: Variablize
+  }
+
+  circle.metric-value:hover {
+    stroke-width: 6px;
+    stroke-opacity: 0.65;
+  }
+}
+
+.ml-explorer-chart-content-wrapper {
+  height: 215px;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_charts_container.scss b/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_charts_container.scss
new file mode 100644
index 0000000000000..e2bc6973b278d
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_charts_container.scss
@@ -0,0 +1,112 @@
+// SASSTODO: There is a lot of very specific sizing in here that look brittle to touch
+.explorer-charts {
+
+   ml-explorer-charts-container {
+
+    .row {
+      padding: 10px;
+    }
+
+    label {
+      font-size: $euiFontSizeXS;
+    }
+
+    select {
+      font-size: $euiFontSizeS;
+      font-style: $euiFontWeightRegular;
+    }
+
+    .chart-controls {
+      label {
+        padding: 0px 0px 10px 0px;
+      }
+    }
+
+    .no-results-item {
+      text-align: center;
+      padding-top: 10px;
+    }
+
+    .kuiButton.dropdown-toggle,
+    .open > .dropdown-toggle.kuiButton--primary:hover,
+    .open > .dropdown-toggle.kuiButton--primary:focus {
+      background: transparent;
+      border: none;
+      color: #444444;
+      padding: 0px 50px 0px 0px;
+    }
+
+    .dropdown-menu {
+      min-width: 120px;
+      font-size: 13px;
+    }
+
+    .dropdown-menu > li > a {
+      color: $euiTextColor;
+      text-decoration: none;
+    }
+
+    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:active {
+      color: $euiColorEmptyShade;
+    }
+
+    button.dropdown-toggle {
+      width: 110px;
+      text-align: left;
+      margin-bottom: 3px;
+
+      span {
+        font-size: $euiFontSizeS;
+      }
+    }
+
+    button.dropdown-toggle:hover,
+    button.dropdown-toggle:focus {
+      color: $euiTextColor;
+    }
+
+    .ml-anomaly-interim-result {
+      font-style: italic;
+      padding-bottom: 3px;
+    }
+
+    .ml-tablerow-expanded {
+      width: 100%;
+      padding: 5px 20px;
+      overflow: hidden;
+      font-size: $euiFontSizeXS;
+
+      td {
+        padding: 0px 0px 2px 0px;
+      }
+
+      table tr>td:first-child {
+        padding-left: 2px;
+        vertical-align: top;
+      }
+
+      td:first-child {
+        width: 140px;
+      }
+
+      td:nth-child(2) {
+        padding-left: 5px;
+      }
+
+      // Hide filtering icons until that functionality is available.
+      i.fa-search-plus, i.fa-search-minus {
+        display: none;
+      }
+
+    }
+
+  }
+}
+
+/* wrapper class for the top right alert icon and view button */
+.ml-explorer-chart-icons {
+  float:right;
+  padding-left: 5px;
+  /* counter-margin for EuiButtonEmpty's padding */
+  margin: 2px -8px 0 0;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/_index.scss b/x-pack/plugins/ml/public/explorer/explorer_charts/_index.scss
new file mode 100644
index 0000000000000..749e7fe7491b0
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/_index.scss
@@ -0,0 +1,2 @@
+@import 'explorer_chart';
+@import 'explorer_charts_container';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_single_metric.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_single_metric.js
index f6212e766b79a..359c28d58bddb 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_single_metric.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_single_metric.js
@@ -9,8 +9,6 @@
  * the Machine Learning Explorer dashboard.
  */
 
-import './styles/explorer_chart.less';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_directive.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_directive.js
index 2a905827c1c43..6fc44b854c078 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_directive.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_directive.js
@@ -11,8 +11,6 @@
  * anomalies in the raw data in the Machine Learning Explorer dashboard.
  */
 
-import './styles/explorer_charts_container.less';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 
diff --git a/x-pack/plugins/ml/public/explorer/index.js b/x-pack/plugins/ml/public/explorer/index.js
index 3fe0b96bf2900..372e46fdb120c 100644
--- a/x-pack/plugins/ml/public/explorer/index.js
+++ b/x-pack/plugins/ml/public/explorer/index.js
@@ -9,7 +9,6 @@
 import 'plugins/ml/explorer/explorer_controller';
 import 'plugins/ml/explorer/explorer_dashboard_service';
 import 'plugins/ml/explorer/explorer_swimlane_directive';
-import 'plugins/ml/explorer/styles/main.less';
 import 'plugins/ml/explorer/explorer_charts';
 import 'plugins/ml/explorer/select_limit';
 import 'plugins/ml/components/job_select_list';
diff --git a/x-pack/plugins/ml/public/index.scss b/x-pack/plugins/ml/public/index.scss
index 455cf50b22183..b07593e571110 100644
--- a/x-pack/plugins/ml/public/index.scss
+++ b/x-pack/plugins/ml/public/index.scss
@@ -5,8 +5,48 @@
 @import '@elastic/eui/src/components/panel/variables';
 @import '@elastic/eui/src/components/panel/mixins';
 
-@import '@elastic/eui/src/global_styling/variables/size';
+// ML has it's own variables for coloring
+@import 'variables';
 
-@import 'datavisualizer/index';
-@import 'file_datavisualizer/index';
-@import 'components/nav_menu/index';
+// Protect the rest of Kibana from ML generic namespacing
+// SASSTODO: Prefix ml selectors instead
+#ml-app {
+
+  // App level
+  @import 'app';
+
+  // Sub applications
+  @import 'datavisualizer/index';
+  @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
+  @import 'file_datavisualizer/index';
+  @import 'jobs/index'; // SASSTODO: This collection of sass files has multiple problems
+  @import 'settings/index';
+  @import 'timeseriesexplorer/index';
+
+  // Components
+  @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly
+  @import 'components/chart_tooltip/index';
+  @import 'components/confirm_modal/index';
+  @import 'components/controls/index';
+  @import 'components/data_recognizer/index';
+  @import 'components/documentation_help_link/index';
+  @import 'components/field_data_card/index'; // SASSTODO: This file needs to be rewritten
+  @import 'components/field_title_bar/index';
+  @import 'components/field_type_icon/index';
+  @import 'components/form_filter_input/index'; // SASSTODO: This file needs to be rewritten
+  @import 'components/form_label/index';
+  @import 'components/influencers_list/index';
+  @import 'components/item_select/index'; // SASSTODO: This file does some dangerous overwrites
+  @import 'components/items_grid/index';
+  @import 'components/job_group_select/index'; // SASSTODO: This file does some dangerous overwrites
+  @import 'components/job_select_list/index'; // SASSTODO: This file does EXTREMELY DANGEROUS overwrites
+  @import 'components/json_tooltip/index'; // SASSTODO: This file overwrites EUI directly
+  @import 'components/loading_indicator/index'; // SASSTODO: This component should be replaced with EuiLoadingSpinner
+  @import 'components/messagebar/index';
+  @import 'components/nav_menu/index';
+  @import 'components/paginated_table/index'; // SASSTODO: This file overwrites EUI directly
+  @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
+
+  // Hacks are last so they can ovwerite anything above if needed
+  @import 'hacks';
+}
diff --git a/x-pack/plugins/ml/public/jobs/_index.scss b/x-pack/plugins/ml/public/jobs/_index.scss
new file mode 100644
index 0000000000000..2601b72829431
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/_index.scss
@@ -0,0 +1,5 @@
+@import 'components/custom_url_editor/index';
+@import 'components/custom_url_editor_old/index';
+@import 'jobs_list/index'; // SASSTODO: Various EUI overwrites throughout this folder
+@import 'jobs_list_old/index';
+@import 'new_job/index'; // SASSTODO: Lots of files need rewrites in here
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/components/custom_url_editor/styles/main.less b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/_custom_url_editor.scss
similarity index 58%
rename from x-pack/plugins/ml/public/jobs/components/custom_url_editor/styles/main.less
rename to x-pack/plugins/ml/public/jobs/components/custom_url_editor/_custom_url_editor.scss
index 0a853ce2bfc1e..ef3ca6b0044e8 100644
--- a/x-pack/plugins/ml/public/jobs/components/custom_url_editor/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/_custom_url_editor.scss
@@ -1,16 +1,19 @@
 .ml-edit-url-form {
   .url-label {
+    // SASSTODO: Proper calc
     width: 250px;
   }
 
   .url-link-to-radio {
+    // SASSTODO: This overwrites EUI
     .euiRadio {
       display: inline-block;
-      padding-right: 20px;
+      padding-right: $euiSizeL;
     }
   }
 
   .url-time-range {
+    // SASSTODO: Proper calc
     width: 150px;
   }
-}
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/components/custom_url_editor/_index.scss b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/_index.scss
new file mode 100644
index 0000000000000..4f1904c9539db
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/_index.scss
@@ -0,0 +1 @@
+@import 'custom_url_editor';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/components/custom_url_editor/editor.js b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/editor.js
index 863887ac8ddb7..b7f729eff2350 100644
--- a/x-pack/plugins/ml/public/jobs/components/custom_url_editor/editor.js
+++ b/x-pack/plugins/ml/public/jobs/components/custom_url_editor/editor.js
@@ -31,8 +31,6 @@ import {
 import { isValidCustomUrlSettingsTimeRange } from '../../../jobs/components/custom_url_editor/utils';
 import { isValidLabel } from '../../../util/custom_url_utils';
 
-import './styles/main.less';
-
 import {
   TIME_RANGE_TYPE,
   URL_TYPE
diff --git a/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_custom_url_editor.scss b/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_custom_url_editor.scss
new file mode 100644
index 0000000000000..3bfb728a374cb
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_custom_url_editor.scss
@@ -0,0 +1,43 @@
+// SASSTODO: Some specific sizing in here looks dangerous to touch
+.ml-custom-url-manager {
+  .add-url-input {
+    display: block;
+  }
+
+  select {
+    width: 100%;
+  }
+
+  .link-to-label {
+    padding-right: 20px;
+  }
+
+  label.disabled {
+    color: $euiColorLightShade;
+  }
+
+  .entity-input {
+    display: inline-block;
+    margin-bottom: 5px;
+  }
+
+  .custom-url, .add-url-time-range {
+    display: flex;
+    position: relative;
+    padding-right: 30px;
+    button.remove-button {
+      top: 27px;
+      position: absolute;
+      right: 6px;
+    }
+
+    select {
+      height: $euiSizeXXL;
+    }
+
+    .form-group {
+      margin-right: 10px;
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_index.scss b/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_index.scss
new file mode 100644
index 0000000000000..4f1904c9539db
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_index.scss
@@ -0,0 +1 @@
+@import 'custom_url_editor';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/index.js b/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/index.js
index 2dea7ffe6dff9..b79a888c52243 100644
--- a/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/index.js
+++ b/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/index.js
@@ -8,5 +8,4 @@
 
 import './datafeed_service';
 import './job_timepicker_modal_controller';
-import './styles/main.less';
 import 'plugins/ml/jobs/new_job/simple/components/watcher';
diff --git a/x-pack/plugins/ml/public/jobs/index.js b/x-pack/plugins/ml/public/jobs/index.js
index cedf7d0455d30..cc1aeb85b8b59 100644
--- a/x-pack/plugins/ml/public/jobs/index.js
+++ b/x-pack/plugins/ml/public/jobs/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import './jobs_list';
 import './new_job/advanced';
 import './new_job/simple/single_metric';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/_index.scss
new file mode 100644
index 0000000000000..a215ff2d1a835
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/_index.scss
@@ -0,0 +1,11 @@
+@import 'jobs_list';
+
+@import 'components/edit_job_flyout/index';
+@import 'components/job_details/index'; // SASSTODO: Dangerous EUI overwrites
+@import 'components/job_filter_bar/index'; // SASSTODO: Dangerous EUI overwrites
+@import 'components/job_group/index';
+@import 'components/jobs_list/index'; // SASSTODO: Dangerous EUI overwrites
+@import 'components/jobs_list_view/index';
+@import 'components/jobs_stats_bar/index';
+@import 'components/multi_job_actions/index';  // SASSTODO: Dangerous EUI overwrites
+@import 'components/start_datafeed_modal/index';  // SASSTODO: Needs a rewrite
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/_jobs_list.scss b/x-pack/plugins/ml/public/jobs/jobs_list/_jobs_list.scss
new file mode 100644
index 0000000000000..d94bb5d678279
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/_jobs_list.scss
@@ -0,0 +1,7 @@
+.job-management {
+  padding: $euiSizeL;
+}
+
+.new-job-button-container {
+  float: right;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/create_watch_flyout/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/create_watch_flyout/styles/main.less
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/_edit_job_flyout.scss
similarity index 83%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/_edit_job_flyout.scss
index 38343aed2985c..a625b1274c9b4 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/_edit_job_flyout.scss
@@ -2,7 +2,7 @@
   .close-editor-button {
     position: relative;
     float: right;
-    top: -5px;
+    top: -$euiSizeXS;
     right: 0px;
   }
 }
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/_index.scss
new file mode 100644
index 0000000000000..2fdf5a9671be3
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/_index.scss
@@ -0,0 +1 @@
+@import 'edit_job_flyout';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js
index 49da9beb51e24..734e38844bd73 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js
@@ -23,8 +23,6 @@ import {
   EuiTabbedContent,
 } from '@elastic/eui';
 
-import './styles/main.less';
-
 import { JobDetails, Detectors, Datafeed, CustomUrls } from './tabs';
 import { saveJob } from './edit_utils';
 import { loadFullJob } from '../utils';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.js
index ec732c6ae8300..1a8e36b539099 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.js
@@ -37,8 +37,6 @@ import {
   loadIndexPatterns,
 } from '../edit_utils';
 
-import '../styles/main.less';
-
 const MAX_NUMBER_DASHBOARDS = 1000;
 const MAX_NUMBER_INDEX_PATTERNS = 1000;
 
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/datafeed.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/datafeed.js
index 09586793e23f4..4d1dca27389ad 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/datafeed.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/datafeed.js
@@ -18,7 +18,6 @@ import {
   EuiFieldNumber,
 } from '@elastic/eui';
 
-import '../styles/main.less';
 import { calculateDatafeedFrequencyDefaultSeconds } from 'plugins/ml/../common/util/job_utils';
 import { newJobDefaults } from 'plugins/ml/jobs/new_job/utils/new_job_defaults';
 import { parseInterval } from 'plugins/ml/../common/util/parse_interval';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/detectors.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/detectors.js
index 559da710eb8d1..06fe88fcd8714 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/detectors.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/detectors.js
@@ -17,7 +17,6 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import '../styles/main.less';
 import { mlJobService } from 'plugins/ml/services/job_service';
 import { detectorToString } from 'plugins/ml/util/string_utils';
 
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/job_details.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/job_details.js
index 95cc2c352a800..56153c9ff9427 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/job_details.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/job_details.js
@@ -18,7 +18,6 @@ import {
   EuiComboBox,
 } from '@elastic/eui';
 
-import '../styles/main.less';
 import { ml } from 'plugins/ml/services/ml_api_service';
 
 export class JobDetails extends Component {
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_index.scss
new file mode 100644
index 0000000000000..ae8b160f3f532
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_index.scss
@@ -0,0 +1,2 @@
+@import 'job_details';
+@import 'forecasts_table/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss
similarity index 70%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss
index 237eee0bb163c..f5cb7aef87d9c 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss
@@ -1,22 +1,29 @@
+
 .tab-contents {
-  margin: -8px;
-  padding: 8px;
-  background-color: #FFFFFF;
+  margin: -$euiSizeS;
+  padding: $euiSizeS;
+  background-color: $euiColorEmptyShade;
 
+    // SASSTODO: Need to remove bootstrap grid
   .col-md-6:nth-child(1) {
+    // SASSTODO: Why is this 7?
     padding-right: 7px;
   }
+
+  // SASSTODO: Need to remove bootstrap grid
   .col-md-6:nth-child(2) {
+    // SASSTODO: Why is this 7?
     padding-left: 7px;
   }
 
+  // SASSTODO: This needs to be rewriten. Tons of EUI overwrites
   .job-section {
     overflow: auto;
     padding: 5px 15px;
     background-color: #FBFBFB;
     border: 1px solid #ecf0f1;
-    border-radius: 3px;
-    margin: 4px 0px;
+    border-radius: $euiBorderRadius;
+    margin: $euiSizeXS 0px;
 
     .euiTable {
       background-color: transparent;
@@ -58,10 +65,12 @@
     }
   }
 
+    // SASSTODO: This needs a proper calc
   .json-textarea {
     height: 500px;
   }
 
+    // SASSTODO: This needs to be rewritten. A lot of this should be done with the JS props
   .job-messages-table {
     max-height: 500px;
     overflow: auto;
@@ -70,7 +79,7 @@
       font-size: 12px;
 
       th:nth-child(1) {
-        width: 32px;
+        width: $euiSizeXL;
       }
       th:nth-child(2) {
         width: 150px;
@@ -88,7 +97,7 @@
       }
 
       .euiTableRowCell {
-        background-color: #FFFFFF;
+        background-color: $euiColorEmptyShade;
       }
     }
   }
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/_forcasts_table.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/_forcasts_table.scss
new file mode 100644
index 0000000000000..137e3a18fb272
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/_forcasts_table.scss
@@ -0,0 +1,32 @@
+// SASSTODO: This has dangerous EUI overrides and should be removed. Some of it should just use the JS props
+.forecasts-table {
+  .euiTable {
+     font-size: 12px;
+ 
+     th:last-child {
+       width: 60px;
+     }
+ 
+     td {
+       .euiTableCellContent {
+         padding-top: 4px;
+         padding-bottom: 4px;
+       }
+     }
+   }
+ 
+   .view-forecast-btn {
+     width: 35px;
+     min-width: 35px;
+     height: 24px;
+ 
+     .euiButton__content {
+       padding: 0px 8px;
+     }
+   }
+ 
+   .euiLink {
+     font-family: inherit;
+   }
+ }
+ 
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/_index.scss
new file mode 100644
index 0000000000000..d928a326026b0
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/_index.scss
@@ -0,0 +1 @@
+@import 'forcasts_table';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
index ed58e884162cd..157bc9ae71981 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
@@ -22,7 +22,6 @@ import {
   EuiLink,
   EuiLoadingSpinner
 } from '@elastic/eui';
-import './styles/main.less';
 import { formatDate, formatNumber } from '@elastic/eui/lib/services/format';
 import chrome from 'ui/chrome';
 
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/styles/main.less
deleted file mode 100644
index f4d77f5f84ff8..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/forecasts_table/styles/main.less
+++ /dev/null
@@ -1,30 +0,0 @@
-.forecasts-table {
- .euiTable {
-    font-size: 12px;
-
-    th:last-child {
-      width: 60px;
-    }
-
-    td {
-      .euiTableCellContent {
-        padding-top: 4px;
-        padding-bottom: 4px;
-      }
-    }
-  }
-
-  .view-forecast-btn {
-    width: 35px;
-    min-width: 35px;
-    height: 24px;
-
-    .euiButton__content {
-      padding: 0px 8px;
-    }
-  }
-
-  .euiLink {
-    font-family: inherit;
-  }
-}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js
index 7d6fcff7e4299..e51d352b10665 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js
@@ -15,8 +15,6 @@ import {
   EuiLoadingSpinner,
 } from '@elastic/eui';
 
-import './styles/main.less';
-
 import { extractJobDetails } from './extract_job_details';
 import { JsonPane } from './json_tab';
 import { DatafeedPreviewPane } from './datafeed_preview_tab';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/_index.scss
new file mode 100644
index 0000000000000..bd0e4ba6a9d45
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/_index.scss
@@ -0,0 +1 @@
+@import 'job_filter_bar';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/_job_filter_bar.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/_job_filter_bar.scss
new file mode 100644
index 0000000000000..c6e6689a01ac1
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/_job_filter_bar.scss
@@ -0,0 +1,23 @@
+.mchJobFilterBar {
+  // SASSTODO: Dangerou EUI overwrites
+  .euiFilterGroup {
+    .euiPopover .euiPanel {
+      .group-item {
+        padding: $euiSizeS $euiSize;
+      }
+
+      .inline-group {
+        border: 1px solid $euiColorEmptyShade;
+        border-radius: $euiBorderRadius;
+      }
+
+      .euiFilterSelectItem:hover, .euiFilterSelectItem:focus {
+        text-decoration: none;
+        .inline-group {
+          border: 1px solid $euiColorDarkShade;
+          box-shadow: 0px 1px 2px $euiColorMediumShade;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/job_filter_bar.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/job_filter_bar.js
index e2624df92b368..99c7e2487e5f7 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/job_filter_bar.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/job_filter_bar.js
@@ -13,8 +13,6 @@ import React, {
 import { ml } from 'plugins/ml/services/ml_api_service';
 import { JobGroup } from '../job_group';
 
-import './styles/main.less';
-
 import {
   EuiSearchBar,
   EuiCallOut,
@@ -132,6 +130,7 @@ export class JobFilterBar extends Component {
             }}
             filters={filters}
             onChange={this.onChange}
+            className="mchJobFilterBar"
           />
         </EuiFlexItem>
         { this.renderError() || ''}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/styles/main.less
deleted file mode 100644
index 18259dfd675f1..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/styles/main.less
+++ /dev/null
@@ -1,22 +0,0 @@
-.euiFilterGroup {
-  max-width: 500px;
-
-  .euiPopover .euiPanel {
-    .group-item {
-      padding: 6px 12px;
-    }
-
-    .inline-group {
-      border: 1px solid #FFFFFF;
-      border-radius: 3px;
-    }
-
-    .euiFilterSelectItem:hover, .euiFilterSelectItem:focus {
-      text-decoration: none;
-      .inline-group {
-        border: 1px solid #555555;
-        box-shadow: 0px 1px 2px #999;
-      }
-    }
-  }
-}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/_index.scss
new file mode 100644
index 0000000000000..361f78b08fcc9
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/_index.scss
@@ -0,0 +1 @@
+@import 'job_group';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/_job_group.scss
similarity index 68%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/_job_group.scss
index 333dd78a266c2..665f0a746e4a2 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/_job_group.scss
@@ -1,10 +1,10 @@
 .inline-group {
   font-size: 12px;
-  background-color: #D9D9D9;
+  background-color: $euiColorLightShade;
   padding: 2px 5px;
   border-radius: 2px;
   display: inline-block;
   margin: 0px 3px;
-  color: #FFFFFF;
+  color: $euiColorEmptyShade;
   vertical-align: text-top;
 }
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/job_group.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/job_group.js
index cf60ea1be5791..60d9b78bcab09 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/job_group.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_group/job_group.js
@@ -8,8 +8,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import './styles/main.less';
-
+// This should import the colors directly from EUI's palette service rather than be hard coded
 const COLORS = [
   '#00B3A4', // euiColorVis0
   '#3185FC', // euiColorVis1
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/_index.scss
new file mode 100644
index 0000000000000..4ab0359d3a50a
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/_index.scss
@@ -0,0 +1 @@
+@import 'jobs_list';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/_jobs_list.scss
similarity index 84%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/_jobs_list.scss
index 18067f7258da4..421aa28cb9bf9 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/_jobs_list.scss
@@ -1,3 +1,4 @@
+// SASSTODO: Rewrite this, can use props for most of it.
 .jobs-list-table > div > .euiTable {
   & > thead {
     th {
@@ -71,33 +72,36 @@
          white-space: nowrap;
        }
        .euiContextMenuItem:last-child:not(.euiContextMenuItem-isDisabled) {
-        color: #A30000
+        color: $euiColorDanger;
       }
     }
 
     .results-button {
-      margin-right: 10px;
+      margin-right: $euiSizeXS;
+      // SASSTODO: Proper calc
       width: 18px;
     }
 
     .euiContextMenuItem .euiIcon {
-      margin-right: 8px;
+      margin-right: $euiSizeXS;
     }
   }
 
   .actions-border {
+    // SASSTODO: Proper calc
     height: 20px;
-    border-right: 1px solid #D9D9D9;
+    border-right: $euiBorderThin;
     width: 1px;
     display: inline-block;
     vertical-align: middle;
-    margin: 0px 5px;
+    margin: 0px $euiSizeXS;
   }
 
   .job-description {
     display: inline-block;
   }
 
+  // SASSTODO: Use eui-textCenter
   .job-loading-spinner {
     text-align: center;
   }
@@ -105,7 +109,7 @@
 
 .jobs-list-table.jobs-selected {
   .results-button {
-    color: silver;
+    color: $euiColorLightShade;
     pointer-events: none;
   }
 }
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js
index 4744d6402c606..0165b26095b16 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js
@@ -17,7 +17,6 @@ import { toLocaleString } from '../../../../util/string_utils';
 import { ResultLinks, actionsMenuContent } from '../job_actions';
 import { JobDescription } from './job_description';
 import { JobIcon } from '../job_message_icon';
-import './styles/main.less';
 
 import {
   EuiBasicTable,
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_index.scss
new file mode 100644
index 0000000000000..c1d8b70a054a2
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_index.scss
@@ -0,0 +1 @@
+@import 'jobs_list_view';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss
similarity index 87%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss
index 8ab4345fb99f8..76ee25f2f25dd 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss
@@ -1,3 +1,4 @@
+// SASSTODO: Proper calcs
 .actions-bar {
   min-height: 60px;
   display: flex;
@@ -5,8 +6,6 @@
   & > div:nth-child(1) {
     width: 300px;
   }
-  & > div:nth-child(2) {
-  }
 }
 
 .job-management {
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
index b6f5971907434..76c1dab50e122 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
@@ -5,7 +5,6 @@
  */
 
 
-import './styles/main.less';
 import { timefilter } from 'ui/timefilter';
 
 import { ml } from 'plugins/ml/services/ml_api_service';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_index.scss
new file mode 100644
index 0000000000000..995478bc0966c
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_index.scss
@@ -0,0 +1 @@
+@import 'jobs_stats_bar';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss
similarity index 53%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss
index 8af32911e05fe..63a1bc01c94ae 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/_jobs_stats_bar.scss
@@ -1,12 +1,12 @@
 .jobs-stats-bar {
-
+  // SASSTODO: proper calcs
   height: 42px;
   padding: 14px;
-  background-color: #EFF0F1;
+  background-color: $euiColorLightestShade;
 
   .stat {
-    margin-right: 10px;
-    .stat-label {}
+    margin-right: $euiSizeS;
+
     .stat-value {
       font-weight: bold
     }
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js
index 85bb66fca34f6..79cc8bf8ee861 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_stats_bar/jobs_stats_bar.js
@@ -5,7 +5,6 @@
  */
 
 
-import './styles/main.less';
 import { JOB_STATE, DATAFEED_STATE } from 'plugins/ml/../common/constants/states';
 
 import PropTypes from 'prop-types';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/_index.scss
new file mode 100644
index 0000000000000..86d19824f235a
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/_index.scss
@@ -0,0 +1,2 @@
+@import 'multi_job_actions';
+@import 'group_selector/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/_multi_job_actions.scss
similarity index 77%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/_multi_job_actions.scss
index ca42b710d99f6..e8bd1a45d9766 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/_multi_job_actions.scss
@@ -1,8 +1,10 @@
+  // SASSTODO: This looks like it needs some rewriting for all the pixel values
 .multi-select-actions {
   padding: 10px 0px;
   display: inline-block;
   white-space: nowrap;
 
+  // SASSTODO: This looks like it should just be an EUI title
   .jobs-selected-title {
     display: inline-block;
     font-weight: normal;
@@ -18,7 +20,7 @@
 
   .actions-border, .actions-border-large {
     height: 20px;
-    border-right: 1px solid #D9D9D9;
+    border-right: $euiBorderThin;
     width: 1px;
     display: inline-block;
     vertical-align: middle;
@@ -35,13 +37,14 @@
     margin-right: 5px;
   }
 
+  // SASSTODO: Dangerous EUI overwrites
   .euiContextMenuPanel {
     .euiContextMenuItem__text {
       white-space: nowrap;
     }
 
     .euiContextMenuItem:last-child:not(.euiContextMenuItem-isDisabled) {
-      color: #A30000
+      color: $euiColorDanger;
     }
   }
 
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/_group_selector.scss
similarity index 60%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/_group_selector.scss
index b6b6af0a27a6d..419effffe4155 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/_group_selector.scss
@@ -2,7 +2,6 @@
   max-width: 300px;
 
   .euiPopoverTitle {
-    margin-bottom: 8px !important;
+    margin-bottom: $euiSizeS !important;
   }
-}
-
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/_index.scss
new file mode 100644
index 0000000000000..1663397bf2128
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/_index.scss
@@ -0,0 +1,3 @@
+@import 'group_selector';
+@import 'group_list/index';
+@import 'new_group_input/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_group_list.scss
similarity index 55%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_group_list.scss
index caab88afdd169..a0d4ed68fa323 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_group_list.scss
@@ -1,3 +1,4 @@
+  // SASSTODO: proper calcs all through this. Replace shadows
 .group-list {
   max-height: 350px;
   overflow: auto;
@@ -5,7 +6,7 @@
   .group-item {
     line-height: 18px;
     padding: 6px 0px;
-    border-bottom: 1px solid #eee;
+    border-bottom: $euiBorderThin;
     cursor: pointer;
 
     &:focus {
@@ -14,19 +15,21 @@
     }
 
     .check {
+    // SASSTODO: proper calc
       width: 20px;
       display: inline-block;
     }
 
     .inline-group {
-      border: 1px solid #FFFFFF;
-      border-radius: 3px;
+      border: 1px solid $euiColorEmptyShade;
+      border-radius: $euiBorderRadius;
     }
   }
   .group-item:hover {
     .inline-group {
-      border: 1px solid #555555;
-      box-shadow: 0px 1px 2px #999;
+      border: 1px solid $euiColorDarkShade;
+    // SASSTODO: Replace with eui shadow mixin
+      box-shadow: 0px 1px 2px $euiColorMediumShade;
     }
   }
 
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_index.scss
new file mode 100644
index 0000000000000..e1925dbb6d862
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_index.scss
@@ -0,0 +1 @@
+@import 'group_list';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/group_list.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/group_list.js
index b40bf7f8ad0de..6006929e8b6ee 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/group_list.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/group_list.js
@@ -15,8 +15,6 @@ import {
   keyCodes,
 } from '@elastic/eui';
 
-import './styles/main.less';
-
 import { JobGroup } from '../../../job_group';
 
 function Check({ group, selectedGroups }) {
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_selector.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_selector.js
index 3afb0dc55a550..7e56c30b7df90 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_selector.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_selector.js
@@ -25,7 +25,6 @@ import {
 
 import { cloneDeep } from 'lodash';
 
-import './styles/main.less';
 import { ml } from '../../../../../services/ml_api_service';
 import { GroupList } from './group_list';
 import { NewGroupInput } from './new_group_input';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/_index.scss
new file mode 100644
index 0000000000000..5b05387414fe7
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/_index.scss
@@ -0,0 +1 @@
+@import 'new_group_input';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/_new_group_input.scss
similarity index 95%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/_new_group_input.scss
index 9e8f223068093..943fc78a9d0fa 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/_new_group_input.scss
@@ -1,3 +1,3 @@
 .new-group-input {
   padding-bottom: 0px;
-}
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/new_group_input.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/new_group_input.js
index 102544ee49f26..29167b7fd2200 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/new_group_input.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/new_group_input/new_group_input.js
@@ -19,7 +19,6 @@ import {
   keyCodes,
 } from '@elastic/eui';
 
-import './styles/main.less';
 import { validateGroupNames } from '../../../validate_job';
 
 export class NewGroupInput extends Component {
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/multi_job_actions.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/multi_job_actions.js
index 39e1d7e0154c3..4089b2b3e5881 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/multi_job_actions.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/multi_job_actions.js
@@ -7,13 +7,12 @@
 
 import PropTypes from 'prop-types';
 import React, {
-  Component
+  Component, Fragment
 } from 'react';
 
 import { ResultLinks } from '../job_actions';
 import { MultiJobActionsMenu } from './actions_menu';
 import { GroupSelector } from './group_selector';
-import './styles/main.less';
 
 export class MultiJobActions extends Component {
   constructor(props) {
@@ -28,7 +27,7 @@ export class MultiJobActions extends Component {
     return (
       <div className={`multi-select-actions${jobsSelected ? '' : '-no-display'}`}>
         {jobsSelected &&
-          <React.Fragment>
+          <Fragment>
             <span className="jobs-selected-title">{this.props.selectedJobs.length} job{s} selected</span>
             <div className="actions-border-large" />
             <ResultLinks jobs={this.props.selectedJobs} />
@@ -45,7 +44,7 @@ export class MultiJobActions extends Component {
               showDeleteJobModal={this.props.showDeleteJobModal}
               refreshJobs={this.props.refreshJobs}
             />
-          </React.Fragment>
+          </Fragment>
         }
       </div>
     );
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/new_job_button/new_job_button.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/new_job_button/new_job_button.js
index e61dc94fd0b16..df61ddf6decdb 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/new_job_button/new_job_button.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/new_job_button/new_job_button.js
@@ -10,7 +10,6 @@ import { checkPermission } from 'plugins/ml/privilege/check_privilege';
 import { mlNodesAvailable } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
 
 import React from 'react';
-import './styles/main.less';
 
 import {
   EuiButton,
@@ -28,8 +27,8 @@ export function NewJobButton() {
       size="s"
       disabled={(buttonEnabled === false)}
       fill
+      iconType="plusInCircle"
     >
-      <i className="new-job-button fa fa-plus" />
       Create new job
     </EuiButton>
   );
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/new_job_button/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/new_job_button/styles/main.less
deleted file mode 100644
index ebab0b05847e6..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/new_job_button/styles/main.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.new-job-button {
-  margin-right: 3px;
-}
-
-
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/_index.scss
new file mode 100644
index 0000000000000..7e753f89ee2f2
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/_index.scss
@@ -0,0 +1 @@
+@import 'time_range_selector/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/styles/main.less
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/_index.scss
new file mode 100644
index 0000000000000..86b12074fda0a
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/_index.scss
@@ -0,0 +1 @@
+@import 'time_range_selector';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/_time_range_selector.scss
similarity index 59%
rename from x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/styles/main.less
rename to x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/_time_range_selector.scss
index 5763bcd1c6114..ac20a6abcc694 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/_time_range_selector.scss
@@ -1,15 +1,16 @@
+// SASSTODO: Looks like this could use a rewrite. Needs selectors
 .time-range-selector {
   .time-range-section-container {
     display: flex;
   }
   .time-range-section-title {
     font-weight: bold;
-    margin-bottom: 10px;
+    margin-bottom: $euiSizeS;
   }
   .time-range-section {
     flex: 50%;
-    padding: 0px 10px;
-    border-right: 1px solid #D9D9D9;
+    padding: 0px $euiSizeS;
+    border-right: $euiBorderThin;
   }
 
   .tab-stack {
@@ -21,16 +22,16 @@
       float: none;
       position: relative;
       display: block;
-      margin-bottom: 4px;
+      margin-bottom: $euiSizeXS;
 
       & > a {
         position: relative;
         display: block;
-        padding: 10px 15px;
-        border-radius: 4px;
+        padding: $euiSizeS $euiSize;
+        border-radius: $euiSizeXS;
       }
       & > a:hover {
-        background-color: #D9D9D9;
+        background-color: $euiColorLightestShade;
       }
       .body {
         display: none;
@@ -38,8 +39,8 @@
     }
     & > li.active {
       & > a {
-        color: #FFF;
-        background-color: #0079a5;
+        color: $euiColorEmptyShade;
+        background-color: $euiColorPrimary;
 
       }
       .body {
@@ -48,10 +49,10 @@
     }
     & > li.has-body.active  {
       & > a {
-        border-radius: 4px 4px 0px 0px;
+        border-radius: $euiBorderRadius $euiBorderRadius 0px 0px;
       }
       .react-datepicker {
-        border-radius: 0px 0px 4px 4px;
+        border-radius: 0px 0px $euiBorderRadius $euiBorderRadius;
         border-top: none;
       }
     }
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js
index 7219743434702..d3b815ac253d5 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js
@@ -14,8 +14,6 @@ import {
   EuiDatePicker,
 } from '@elastic/eui';
 
-import './styles/main.less';
-
 import moment from 'moment';
 
 const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss
new file mode 100644
index 0000000000000..391b79762b840
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss
@@ -0,0 +1,7 @@
+@import 'jobs_list_old'; // SASSTODO: Needs work, standardize sizing, breakbpoints
+
+@import 'create_watch_modal/index';
+@import 'delete_job_modal/index';
+@import 'edit_job_modal/index'; // SASSTODO: Needs work, standarize sizing
+@import 'expanded_row/index'; // SASSTODO: Dangerous EUI overwrites
+@import 'job_timepicker_modal/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss
new file mode 100644
index 0000000000000..27f8c2fdc015e
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss
@@ -0,0 +1,147 @@
+ml-config-jobs {
+  font-size: $euiFontSizeS;
+
+  // SASSTODO: Make real selection
+  header {
+    margin: $euiSize 0;
+  }
+
+  .jobs-container {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: $euiSize;
+    padding-right: $euiSize;
+
+    .euiCallOut--warning {
+      .fa-exclamation-triangle {
+        color: $euiColorWarning;
+      }
+    }
+  }
+
+  .jobs-stats-bar {
+
+    padding: $euiSize;
+    background-color: $euiColorLightestShade;
+
+    .stat {
+      margin-right: 10px;
+      .stat-value {
+        font-weight: bold
+      }
+    }
+  }
+
+  ml-paginated-table {
+
+    .job-system-info, .job-info, .job-warning, .job-error {
+      text-shadow: 1px 1px 1px $euiColorLightShade;
+      font-size: $euiFontSizeM;
+    }
+
+    .job-warning-small {
+      font-size: inherit;
+      margin-left: $euiSizeXS / 2;
+    }
+
+    .job-system-info {
+      color: $euiColorDarkShade;
+    }
+    .job-info {
+      color: $euiColorPrimary;
+    }
+    .job-warning {
+      color: $euiColorWarning;
+    }
+    .job-error {
+      color: $euiColorDanger;
+    }
+
+    // SASSTODO: Proper calc
+    .col-bucketspan {
+      width: 120px;
+    }
+
+    .col-info {
+      width: $euiSizeL;
+    }
+
+    // SASSTODO: Proper calc
+    .col-action {
+      width: 175px;
+    }
+    .actions {
+      white-space: nowrap;
+    }
+
+    .col-align-right {
+      text-align: right;
+      padding-right: $euiSizeL;
+    }
+
+    th.col-align-right {
+      padding-right: $euiSizeL !important;
+    }
+
+    // SASSTODO: Proper selector
+    i.job-tab-icon {
+      margin-left: $euiSizeXS;
+    }
+  }
+
+  // SASSTODO: Variabilize
+  .ml-mark {
+    background-color: $mchColorMinor;
+  }
+
+  .no-jobs-warning {
+    text-align: center;
+    font-size: $euiFontSizeM;
+  }
+
+  // SASSTODO: Proper calc
+  .jobs-count {
+    margin-top: -50px;
+  }
+
+  .ml-pre, .job-audit-list-container {
+    max-height: 500px; // SASSTODO: Proper calc
+    overflow: auto;
+    padding: $euiSizeS $euiSize;
+    font-size: $euiSizeXS;
+    line-height: 1.42857143; // SASSTODO: Huh?
+    color: $euiColorDarkShade;
+    background-color: $euiColorEmptyShade;
+    background-image: none;
+    border: $euiBorderThick;
+    border-radius: $euiBorderRadius;
+  }
+
+    // SASSTODO: Replace with EUI breakpoints
+  .ml-pre {
+    display: block;
+    unicode-bidi: embed;
+    font-family: monospace;
+    white-space: pre;
+
+    @media (min-width: 830px) {
+      max-width: 650px;
+    }
+    @media (min-width: 1030px) {
+      max-width: 850px;
+    }
+    @media (min-width: 1230px) {
+      max-width: 1050px;
+    }
+    @media (min-width: 1430px) {
+      max-width: 1250px;
+    }
+    @media (min-width: 1630px) {
+      max-width: 1450px;
+    }
+    @media (min-width: 1830px) {
+      max-width: 1550px;
+    }
+  }
+}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss
new file mode 100644
index 0000000000000..4770d853b3fda
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss
@@ -0,0 +1,14 @@
+.create-watch-modal {
+  font-size: $euiFontSizeS;
+  padding: $euiSizeL;
+  cursor: auto;
+
+  // SASSTODO: Replace with proper selector
+  h3 {
+    margin-top: 0px;
+  }
+
+  .create-watch {
+    padding-bottom: 0px;
+  }
+}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_index.scss
new file mode 100644
index 0000000000000..94985b0264e70
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_index.scss
@@ -0,0 +1 @@
+@import 'create_watch_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_delete_job_modal.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_delete_job_modal.scss
new file mode 100644
index 0000000000000..e3fdf1af1e5df
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_delete_job_modal.scss
@@ -0,0 +1,25 @@
+.delete-job-modal {
+  padding: $euiSizeL;
+  cursor: auto;
+
+  // SASSTODO: Replace with proper selector
+  h3 {
+    margin-top: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .status-item-list {
+    margin-bottom: $euiSize;
+
+    .status-item {
+      padding-top: $euiSizeS;
+      font-weight: $euiFontWeightBold;
+    }
+  }
+
+  .validation-error {
+    color: $euiColorDanger;
+    font-size: $euiFontSizeXS;
+  }
+}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_index.scss
new file mode 100644
index 0000000000000..5aed0c75efe1b
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_index.scss
@@ -0,0 +1 @@
+@import 'delete_job_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss
new file mode 100644
index 0000000000000..a166ffd33f041
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss
@@ -0,0 +1,88 @@
+.edit-job-modal {
+  font-size: $euiFontSizeS;
+  padding: $euiSizeL;
+
+  // SASSTODO: Use a proper selector
+  h3 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-bottom: $euiSizeS;
+
+    // SASSTODO: Use a proper selector
+    span[ml-info-icon] {
+      font-size: $euiFontSizeS;
+    }
+ 	}
+
+  .tab_contents{
+    padding-top: $euiFontSizeL;
+
+    .detector_field_form {
+      background-color: $euiColorEmptyShade;
+      border: none;
+
+      // SASSTODO: Use a proper selector
+       & > div.field-cols {
+        flex: 1 1 1%;
+        margin-right: $euiSizeXS;
+      }
+    }
+
+    .custom-url {
+      display: flex;
+      position: relative;
+
+      // SASSTODO: Proper calcs
+      button.remove-button {
+        top: 19px;
+        position: absolute;
+        right: 6px;
+      }
+
+      .field-cols {
+        flex: 1 1 1%;
+      }
+
+      .form-group {
+        margin-right: $euiSizeXS;
+      }
+
+      // SASSTODO: Proper calcs
+      .time-input {
+        width: 90px;
+      }
+
+      // SASSTODO: Proper calcs, proper selector
+      textarea {
+        height: 60px;
+      }
+    }
+
+    // SASSTODO: Proper calcs
+    .custom-url {
+      padding-right: 60px;
+
+      button.test-url-button {
+        top: 19px;
+        position: absolute;
+        right: 36px;
+      }
+    }
+
+    .custom-url-editor {
+      border: $euiBorderColor;
+      border-radius: $euiBorderRadius;
+      padding: $euiSize;
+    }
+
+    div.validation-error {
+      color: $euiColorDanger;
+      font-size: $euiFontSizeXS;
+    }
+
+    // SASSTODO: Proper selector
+    small {
+      font-style: italic;
+    }
+  }
+}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_index.scss
new file mode 100644
index 0000000000000..02ff715f1006c
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_index.scss
@@ -0,0 +1 @@
+@import 'edit_job_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/edit_job_modal_controller.js b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/edit_job_modal_controller.js
new file mode 100644
index 0000000000000..a7fe5ef4bc801
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/edit_job_modal_controller.js
@@ -0,0 +1,451 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+
+import _ from 'lodash';
+import 'plugins/ml/jobs/new_job/advanced/detectors_list_directive';
+import angular from 'angular';
+import numeral from '@elastic/numeral';
+
+import { calculateDatafeedFrequencyDefaultSeconds } from 'plugins/ml/../common/util/job_utils';
+import { parseInterval } from 'plugins/ml/../common/util/parse_interval';
+import { customUrlEditorService } from 'plugins/ml/jobs/components/custom_url_editor_old/custom_url_editor_service';
+import { isWebUrl } from 'plugins/ml/util/string_utils';
+import { newJobLimits } from 'plugins/ml/jobs/new_job/utils/new_job_defaults';
+import { mlJobService } from 'plugins/ml/services/job_service';
+import { mlMessageBarService } from 'plugins/ml/components/messagebar/messagebar_service';
+
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml');
+
+module.controller('MlEditJobModal', function (
+  $scope,
+  $modalInstance,
+  $modal,
+  $window,
+  params) {
+  const msgs = mlMessageBarService;
+  msgs.clear();
+  $scope.saveLock = false;
+  const refreshJob = params.pscope.refreshJob;
+
+  $scope.job = angular.copy(params.job);
+
+  const CUSTOM_URL_TIME_RANGE_AUTO = 'auto';
+
+  const bucketSpan = parseInterval($scope.job.analysis_config.bucket_span);
+  const jobLimits = newJobLimits();
+
+  $scope.ui = {
+    title: 'Edit ' + $scope.job.job_id,
+    currentTab: 0,
+    tabs: [
+      { index: 0, title: 'Job Details', hidden: false },
+      { index: 1, title: 'Detectors', hidden: false },
+      { index: 2, title: 'Datafeed', hidden: true },
+      { index: 3, title: 'Custom URLs', hidden: false }
+    ],
+    changeTab: function (tab) {
+      $scope.ui.currentTab = tab.index;
+    },
+    isDatafeed: false,
+    datafeedStopped: false,
+    datafeed: {
+      scrollSizeDefault: 1000,
+      queryDelayDefault: '60s',
+      frequencyDefault: calculateDatafeedFrequencyDefaultSeconds(bucketSpan.asSeconds()) + 's',
+    },
+    stoppingDatafeed: false,
+    validation: {
+      tabs: [{
+        index: 0,
+        valid: true,
+        checks: {
+          categorizationFilters: { valid: true },
+          modelMemoryLimit: { valid: true }
+        }
+      }]
+    },
+    editingNewCustomUrl: false,
+    modelMemoryLimitDefault: null
+  };
+
+  // extract datafeed settings
+  if ($scope.job.datafeed_config) {
+    const datafeedConfig = $scope.job.datafeed_config;
+    $scope.ui.isDatafeed = true;
+    $scope.ui.tabs[2].hidden = false;
+    $scope.ui.datafeedStopped = (!$scope.job.datafeed_config || $scope.job.datafeed_config.state === 'stopped');
+
+    $scope.ui.datafeed.queryText = angular.toJson(datafeedConfig.query, true);
+    $scope.ui.datafeed.queryDelayText = datafeedConfig.query_delay;
+    $scope.ui.datafeed.frequencyText = datafeedConfig.frequency;
+    $scope.ui.datafeed.scrollSizeText = datafeedConfig.scroll_size;
+  }
+
+  // Add an 'auto' time for any URLs created before the time_range setting was added.
+  if ($scope.job.custom_settings && $scope.job.custom_settings.custom_urls) {
+    $scope.job.custom_settings.custom_urls.forEach((customUrl) => {
+      if (customUrl.time_range === undefined) {
+        customUrl.time_range = CUSTOM_URL_TIME_RANGE_AUTO;
+      }
+    });
+  }
+
+  // if the job is old, it may not have analysis_limit
+  // so create an empty version
+  if ($scope.job.analysis_limits === undefined) {
+    $scope.job.analysis_limits  = {};
+  } else {
+    if ($scope.job.analysis_limits.model_memory_limit !== undefined) {
+      // otherwise, set the default mml to the job's current mml
+      $scope.ui.modelMemoryLimitDefault = $scope.job.analysis_limits.model_memory_limit;
+
+      // if there is a max mml set for the node, make sure the default mml is not greater than it.
+      if (jobLimits.max_model_memory_limit !== undefined) {
+        const maxBytes = numeral(jobLimits.max_model_memory_limit.toUpperCase()).value();
+        const mmlBytes = numeral($scope.job.analysis_limits.model_memory_limit.toUpperCase()).value();
+        if (mmlBytes > maxBytes) {
+          $scope.ui.modelMemoryLimitDefault = `${(maxBytes / numeral('1MB').value())}MB`;
+        }
+      }
+    }
+  }
+
+  $scope.editNewCustomUrl = function () {
+    $scope.ui.editingNewCustomUrl = true;
+  };
+
+  $scope.addCustomUrl = function (customUrl) {
+    if (!$scope.job.custom_settings) {
+      $scope.job.custom_settings = {};
+    }
+    if (!$scope.job.custom_settings.custom_urls) {
+      $scope.job.custom_settings.custom_urls = [];
+    }
+
+    $scope.job.custom_settings.custom_urls.push(customUrl);
+
+    $scope.ui.editingNewCustomUrl = false;
+  };
+
+  $scope.removeCustomUrl = function (index) {
+    $scope.job.custom_settings.custom_urls.splice(index, 1);
+  };
+
+  $scope.customUrlTimeRangeChanged = function (index) {
+    const customUrl = $scope.job.custom_settings.custom_urls[index];
+    const timeRange = customUrl.time_range;
+    const interval = parseInterval(timeRange);
+    customUrl.timeRangeError = (interval === null && timeRange !== CUSTOM_URL_TIME_RANGE_AUTO);
+  };
+
+  $scope.showTestLinkForCustomUrl = function (index) {
+    return isWebUrl($scope.job.custom_settings.custom_urls[index].url_value);
+  };
+
+  $scope.testCustomUrl = function (index) {
+    customUrlEditorService.getTestUrl(
+      $scope.job,
+      $scope.job.custom_settings.custom_urls[index])
+      .then((testUrl) => {
+        $window.open(testUrl, '_blank');
+      })
+      .catch((resp) => {
+        console.log('testCustomUrl() - error obtaining URL for test:', resp);
+      });
+  };
+
+  // add new categorization filter
+  $scope.addCategorizationFilter = function () {
+    if ($scope.job.analysis_config) {
+      if (!$scope.job.analysis_config.categorization_filters) {
+        $scope.job.analysis_config.categorization_filters = [];
+      }
+
+      $scope.job.analysis_config.categorization_filters.push('');
+    }
+  };
+
+  // remove selected categorization filter
+  $scope.removeCategorizationFilter = function (index) {
+    if ($scope.job.analysis_config && $scope.job.analysis_config.categorization_filters) {
+      $scope.job.analysis_config.categorization_filters.splice(index, 1);
+    }
+  };
+
+  // convenient function to stop the datafeed from inside the edit dialog
+  $scope.stopDatafeed = function () {
+    const datafeedId = $scope.job.datafeed_config.datafeed_id;
+    const jobId = $scope.job.job_id;
+    $scope.ui.stoppingDatafeed = true;
+    mlJobService.stopDatafeed(datafeedId, jobId)
+      .then((resp) => {
+        if (resp.stopped === true) {
+          $scope.ui.datafeedStopped = true;
+        }
+      });
+  };
+
+  function validateJob() {
+    let valid = true;
+    const tabs = $scope.ui.validation.tabs;
+    // reset validations
+    _.each(tabs,  (tab) => {
+      tab.valid = true;
+      _.each(tab.checks, (check, c) => {
+        tab.checks[c].valid = true;
+        tab.checks[c].message = '';
+      });
+    });
+
+    if ($scope.job.analysis_config.categorization_filters) {
+      let v = true;
+      _.each($scope.job.analysis_config.categorization_filters, (d) => {
+        try {
+          new RegExp(d);
+        } catch (e) {
+          v = false;
+        }
+
+        if (d === '' || v === false) {
+          tabs[0].checks.categorization_filters.valid = false;
+          valid = false;
+        }
+      });
+    }
+
+    const mml = $scope.job.analysis_limits.model_memory_limit;
+    const maxMml = jobLimits.max_model_memory_limit;
+    if (maxMml !== undefined && (mml !== undefined || mml !== '')) {
+      const maxBytes = numeral(maxMml.toUpperCase()).value();
+      const mmlBytes = numeral(mml.toUpperCase()).value();
+      if (mmlBytes > maxBytes) {
+        tabs[0].checks.modelMemoryLimit.valid = false;
+        const msg = `Model memory limit cannot be higher than the maximum value of ${maxMml}`;
+        tabs[0].checks.modelMemoryLimit.message = msg;
+        valid = false;
+      }
+    }
+    return valid;
+  }
+
+  $scope.save = function () {
+    msgs.clear();
+
+    if (validateJob() === false) {
+      return;
+    }
+
+    $scope.saveLock = true;
+
+    const jobId = $scope.job.job_id;
+    const jobData = {};
+    const datafeedData = {};
+
+    // if the job description has changed, add it to the jobData json
+    if ($scope.job.description !== params.job.description) {
+      jobData.description = $scope.job.description;
+    }
+
+    // if groups exist, add it to the jobData json
+    if (Array.isArray($scope.job.groups)) {
+      jobData.groups = $scope.job.groups;
+    }
+
+    // if the job's model_memory_limit has changed, add it to the jobData json
+    if ($scope.job.analysis_limits.model_memory_limit !== undefined) {
+      let mml = $scope.job.analysis_limits.model_memory_limit;
+      // if the user has wiped the mml, use the default value which is
+      // displayed greyed out in the field
+      if (mml === '') {
+        mml = $scope.ui.modelMemoryLimitDefault;
+      }
+
+      // has the data changed, did analysis_limits never exist for this job
+      if (params.job.analysis_limits === undefined ||
+        mml !== params.job.analysis_limits.model_memory_limit) {
+        jobData.analysis_limits = {
+          model_memory_limit: mml
+        };
+      }
+    }
+
+    // check each detector. if the description or filters have changed, add it to the jobData json
+    _.each($scope.job.analysis_config.detectors, (d, i) => {
+      let changes = 0;
+
+      const obj = {
+        detector_index: i,
+      };
+
+      if (d.detector_description !== params.job.analysis_config.detectors[i].detector_description) {
+        obj.description = d.detector_description;
+        changes++;
+      }
+
+      if (changes > 0) {
+        if (jobData.detectors === undefined) {
+          jobData.detectors = [];
+        }
+        jobData.detectors.push(obj);
+      }
+    });
+
+    // check each categorization filter. if any have changed, add all to the jobData json
+    if ($scope.job.analysis_config.categorization_filters) {
+      let doUpdate = false;
+
+      // array lengths are different
+      if ($scope.job.analysis_config.categorization_filters.length !== params.job.analysis_config.categorization_filters.length) {
+        doUpdate = true;
+      }
+
+      _.each($scope.job.analysis_config.categorization_filters, (d, i) => {
+        if (d !== params.job.analysis_config.categorization_filters[i]) {
+          doUpdate = true;
+        }
+      });
+
+      if (doUpdate) {
+        jobData.categorization_filters = $scope.job.analysis_config.categorization_filters;
+      }
+    }
+
+    // check custom settings
+    if ($scope.job.custom_settings) {
+      if ($scope.job.custom_settings.custom_urls &&
+         $scope.job.custom_settings.custom_urls.length) {
+
+        let doUpdate = false;
+
+        if (!params.job.custom_settings ||
+           !params.job.custom_settings.custom_urls ||
+           !params.job.custom_settings.custom_urls.length) {
+          // custom urls did not originally exist
+          doUpdate = true;
+        }
+        else if ($scope.job.custom_settings.custom_urls.length !== params.job.custom_settings.custom_urls.length) {
+          // if both existed but now have different lengths
+          doUpdate = true;
+        } else {
+          // if lengths are the same, check the contents match.
+          _.each($scope.job.custom_settings.custom_urls, (url, i) => {
+            if (url.url_name !== params.job.custom_settings.custom_urls[i].url_name ||
+               url.url_value !== params.job.custom_settings.custom_urls[i].url_value ||
+               url.time_range !== params.job.custom_settings.custom_urls[i].time_range) {
+              doUpdate = true;
+            }
+          });
+        }
+
+        if (doUpdate) {
+          jobData.custom_settings = $scope.job.custom_settings;
+          // Clear any error properties as these are just used by the modal.
+          $scope.job.custom_settings.custom_urls.forEach((customUrl) => {
+            delete customUrl.timeRangeError;
+          });
+        }
+      } else {
+        if (params.job.custom_settings ||
+           params.job.custom_settings.custom_urls ||
+           params.job.custom_settings.custom_urls.length) {
+          // if urls originally existed, but now don't
+          // clear the custom settings completely
+          jobData.custom_settings = {};
+        }
+      }
+    }
+
+    // check datafeed
+    if ($scope.job.datafeed_config && $scope.ui.datafeedStopped) {
+      const sch = $scope.ui.datafeed;
+
+      // set query text
+      if (sch.queryText === '') {
+        sch.queryText = '{"match_all":{}}';
+      }
+      let query = sch.queryText;
+      try {
+        query = JSON.parse(query);
+      } catch (e) {
+        console.log('save(): could not parse query JSON');
+      }
+
+      const originalQueryText = angular.toJson($scope.job.datafeed_config.query, true);
+      // only update if it has changed from the original
+      if (originalQueryText !== sch.queryText) {
+        datafeedData.query = query;
+      }
+
+      // only update fields if they have changed from the original
+      if (sch.queryDelayText !== $scope.job.datafeed_config.query_delay) {
+        datafeedData.query_delay = ((sch.queryDelayText === '' || sch.queryDelayText === null || sch.queryDelayText === undefined)
+          ? sch.queryDelayDefault : sch.queryDelayText);
+      }
+
+      if (sch.frequencyText !== $scope.job.datafeed_config.frequency) {
+        datafeedData.frequency = ((sch.frequencyText === '' || sch.frequencyText === null || sch.frequencyText === undefined)
+          ? sch.frequencyDefault : sch.frequencyText);
+      }
+
+      if (sch.scrollSizeText !== $scope.job.datafeed_config.scroll_size) {
+        datafeedData.scroll_size = ((sch.scrollSizeText === '' || sch.scrollSizeText === null || sch.scrollSizeText === undefined)
+          ? sch.scrollSizeDefault : sch.scrollSizeText);
+      }
+    }
+
+    // if anything has changed, post the changes
+    if (Object.keys(jobData).length) {
+      mlJobService.updateJob(jobId, jobData)
+        .then((resp) => {
+          if (resp.success) {
+            saveDatafeed();
+          } else {
+            saveFail(resp);
+          }
+        });
+    } else {
+      saveDatafeed();
+    }
+
+    function saveDatafeed() {
+      if (Object.keys(datafeedData).length) {
+        const datafeedId = $scope.job.datafeed_config.datafeed_id;
+        mlJobService.updateDatafeed(datafeedId, datafeedData)
+          .then((resp) => {
+            if (resp.success) {
+              saveComplete();
+            } else {
+              saveFail(resp);
+            }
+          });
+      } else {
+        saveComplete();
+      }
+    }
+
+    function saveComplete() {
+      $scope.saveLock = false;
+      msgs.clear();
+      refreshJob(jobId);
+
+      $modalInstance.close();
+    }
+
+    function saveFail(resp) {
+      $scope.saveLock = false;
+      msgs.error(resp.message);
+    }
+
+  };
+
+  $scope.cancel = function () {
+    msgs.clear();
+    $modalInstance.close();
+  };
+});
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss
new file mode 100644
index 0000000000000..89b5844a75c66
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss
@@ -0,0 +1,127 @@
+ml-job-list-expanded-row {
+  // SASSTODO: Proper selector
+  & > div {
+    padding: $euiSizeS;
+  }
+
+  // SASSTODO: Remove KUI
+  .kuiButton {
+    margin-top: $euiSizeS;
+    margin-bottom: $euiSizeS;
+  }
+
+  .tab_contents {
+    border: $euiBorderThin;
+    border-top: none;
+    padding: $euiSizeS;
+    border-bottom-right-radius: $euiBorderRadius;
+    border-bottom-left-radius: $euiBorderRadius;
+
+  // SASSTODO: Proper calc
+    .json-textarea {
+      height: 500px;
+    }
+  }
+
+  .job-audit-list-container {
+  // SASSTODO: Proper selectors
+    table {
+      td,th {
+        padding: $euiSizeXS / 2;
+        padding-right: $euiSizeS;
+      }
+    }
+  }
+
+  ml-job-item {
+    .ml_job_row {
+      border-bottom: $euiBorderThin;
+
+      // SASSTODO: Proper selectors
+      & > div {
+        padding: $euiSizeXS;
+      }
+
+      // SASSTODO: Proper selectors
+      & > div:nth-child(1) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      // SASSTODO: Proper selectors
+      & > div:nth-child(2) {
+        word-break: break-all;
+      }
+    }
+  }
+
+      // SASSTODO: Proper selectors
+  .col-md-6:nth-child(1) {
+    padding-right: $euiSizeS;
+  }
+
+  // SASSTODO: Proper selectors
+  .col-md-6:nth-child(2) {
+    padding-left: $euiSizeS;
+  }
+
+  .ml_sub_heading {
+    font-weight: $euiFontWeightBold;
+    padding-left: $euiSizeXS;
+  }
+
+  .ml_job_section_container {
+    overflow: auto;
+    padding: $euiSizeXS $euiSize;
+    background-color: $euiColorLightestShade;
+    border: $euiBorderThick;
+    border-radius: $euiBorderRadius;
+    margin: $euiSizeXS;
+
+    // SASSTODO: Proper selectors
+    & > div {
+      margin-left: $euiSize;
+      margin-right: $euiSize;
+    }
+
+    .button-wrapper {
+      margin-left: -$euiSizeXL;
+      padding-left: $euiSizeXL;
+    }
+
+    // SASSTODO: Dangerous EUI overwrites
+    table.euiTable {
+      background-color: transparent;
+
+      .euiTableRow:first-child {
+        .euiTableRowCell {
+          border-top: 0px;
+        }
+      }
+
+      .euiTableRow:last-child {
+        .euiTableRowCell {
+          border-bottom: 0px;
+        }
+      }
+
+      tr.euiTableRow {
+        .euiTableRowCell {
+          background-color: transparent;
+          vertical-align: top;
+          border-bottom: 1px solid $euiColorLightestShade;
+
+          .euiTableCellContent__text {
+            word-wrap: break-word;
+          }
+        }
+      }
+    }
+  }
+
+  ml-job-item:last-child {
+    .ml_job_row {
+      border-bottom: none;
+    }
+  }
+}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_index.scss
new file mode 100644
index 0000000000000..c6d214f527dd8
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_index.scss
@@ -0,0 +1,3 @@
+@import 'expanded_row';
+
+@import 'forecasts_table/index'; // SASSTODO: Dangerous EUI overwrites
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_forecasts_table.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_forecasts_table.scss
new file mode 100644
index 0000000000000..6c26f8bfaf93d
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_forecasts_table.scss
@@ -0,0 +1,44 @@
+ml-forecasts-table {
+  // SASSTODO: Dangerous EUI overwrites
+  .euiTable {
+    // Remove this whole block when Jobs List is all EUI.
+    font-size: $euiFontSizeXS;
+ 
+     th {
+       span {
+         font-size: $euiFontSizeXS;
+         font-family: $euiFontFamily;
+         font-weight: $euiFontWeightBold;
+       }
+ 
+     }
+ 
+     tr {
+       td {
+         .euiTableCellContent {
+           padding-top: $euiSizeXS;
+           padding-bottom: $euiSizeXS;
+         }
+       }
+     }
+   }
+ 
+   // SASSTODO: Proper calcs
+   table tr th:last-child,
+   table tr td:last-child {
+     width: 60px;
+   }
+ 
+ 
+   // SASSTODO: Dangerous EUI overwrites
+   .view-forecast-btn {
+     width: 35px;
+     min-width: 35px;
+     height: $euiSizeXL;
+ 
+     .euiButton__content {
+       padding: 0px $euiSizeS;
+     }
+   }
+ }
+ 
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_index.scss
new file mode 100644
index 0000000000000..501a031cab8d0
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_index.scss
@@ -0,0 +1 @@
+@import 'forecasts_table';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/index.js b/x-pack/plugins/ml/public/jobs/jobs_list_old/index.js
new file mode 100644
index 0000000000000..e1046c49efedf
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+
+import './jobs_list_controller';
+import './edit_job_modal';
+import './job_timepicker_modal';
+import './delete_job_modal';
+import './create_watch_modal';
+import './expanded_row';
+import 'ui/directives/confirm_click';
+import 'plugins/ml/components/paginated_table';
+import 'plugins/ml/components/validate_job';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_index.scss
new file mode 100644
index 0000000000000..6703e43a4e371
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_index.scss
@@ -0,0 +1 @@
+@import 'job_timepicker_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss
new file mode 100644
index 0000000000000..0c6d85bb01c3f
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss
@@ -0,0 +1,92 @@
+.job-timepicker-modal {
+  font-size: $euiFontSizeS;
+  padding: $euiSizeL;
+  cursor: auto;
+
+  // SASSTODO: Proper selector
+  h3 {
+    @include euiTextTruncate;
+  }
+
+  // SASSTODO: Proper calc
+  .date_container {
+    width: 200px;
+    display: inline-block;
+  }
+
+  .ml-timepicker-contents {
+    margin-top: $euiSizeXS;
+
+    // SASSTODO: Variabilize this coloring, replace with an EUI button
+    .btn-info.active, .kuiButton--primary.active {
+      color: $euiColorEmptyShade;
+      background-color: #154751;
+      border-color: #134049;
+
+      // SASSTODO: Proper selector
+      span {
+        color: $euiColorEmptyShade;
+      }
+    }
+
+    .btn-default, .kuiButton--basic {
+      background: transparent;
+      color: $euiColorDarkShade;
+      border: 0px;
+      box-shadow: none;
+      text-shadow: none;
+    }
+
+    // SASSTODO: Proper selector
+    [ml-time-input] {
+      text-align: center;
+    }
+
+    // SASSTODO: Proper selector
+    label {
+      display: block;
+    }
+  }
+
+  .ml-timepicker-modes {
+    text-transform: capitalize;
+  }
+
+  // SASSTODO: Needs proper calcs throughout 
+  .ml-timepicker-section {
+    float: left;
+    padding: 0px $euiSize;
+    width: 50%;
+    border-left: 1px solid $euiColorEmptyShade;
+    border-right: 1px solid $euiColorEmptyShade;
+
+    .ml-timepicker {
+      padding: 13px;
+      padding-top: none;
+      border: $euiBorderThick;
+      border-radius: $euiBorderRadius;
+      border-radius: $euiBorderRadius;
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+      border-top: none;
+
+      .btn, .kuiButton {
+        padding-left: $euiSizeS;
+        padding-right: $euiSizeS;
+      }
+    }
+
+    .ml-timepicker-radio-bottom {
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+  }
+
+  .ml-timepicker-left-border {
+    border-left: $euiBorderThin;
+  }
+
+  .ml-timepicker-right-border {
+    border-right: $euiBorderThin;
+  }
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/_index.scss
new file mode 100644
index 0000000000000..d56d10f0cb6a9
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/_index.scss
@@ -0,0 +1,3 @@
+@import 'advanced/index';
+@import 'simple/index';
+@import 'wizard/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/advanced/_advanced.scss
similarity index 54%
rename from x-pack/plugins/ml/public/jobs/new_job/advanced/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/advanced/_advanced.scss
index 308e566f33ec0..8a3783b1f7d10 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/_advanced.scss
@@ -1,46 +1,38 @@
-@import (reference) "~ui/styles/theme";
-@import (reference) '~ui/styles/variables/colors';
-@import (reference) "~ui/styles/variables";
-
 .ml-new-job {
   display: block;
 }
 
+// SASSTODO: Proper calcs. This looks too brittle to touch quickly
 .detector {
   position: relative;
   display: inline-block;
-  background-color: #f8fbff;
+  background-color: $euiColorLightestShade;
   padding: 10px;
   padding-right: 60px;
   margin-bottom: 5px;
   border-radius: 3px;
-  border: 1px solid lightsteelblue;
+  border: $euiBorderThin;
   min-width: 360px;
 
   & > .button-container {
     position: absolute;
-    top: 8px;
-    right: 8px;
-  }
-
-  .detector-fields {
-    // border-bottom: 1px solid lightsteelblue;
-    // margin-bottom: 4px;
-    // padding-bottom: 4px;
+    top: $euiSizeS;
+    right: $euiSizeS;
   }
 
   .filter-list {
-    border-bottom: 1px solid lightsteelblue;
-    margin: 5px 0px;
+    border-bottom: $euiBorderThin;
+    margin: $euiSizeXS 0px;
 
+    // SASSTODO: Proper calcs
     .filter {
       height: 22px;
-      margin: 4px 0px;
+      margin: $euiSizeXS 0px;
       font-style: italic;
 
       .button-container {
         float: right;
-        margin-left: 10px;
+        margin-left: $euiSizeS;
       }
     }
     .filter:last-child {
@@ -53,6 +45,7 @@
   }
 }
 
+// SASSTODO: Proper calcs
 .detector-edit-mode {
   padding-right: 10px;
 
@@ -62,45 +55,48 @@
 }
 
 .help-pane {
-  background-color: aliceblue;
-  border: 1px solid #DDEFFF;
-  padding: 15px;
-  border-radius: 3px;
+  background-color: $euiFocusBackgroundColor;
+  border: 1px solid darken($euiFocusBackgroundColor, 5%);
+  padding: $euiSize;
+  border-radius: $euiSizeXS;
 }
 
 ml-new-job {
-  font-size: 14px;
+  font-size: $euiFontSizeS;
 
   .ml_json_tab, .ml_data_preview_tab {
+
+    // SASSTODO: Proper calcs
     .json-textarea {
       height: 500px;
     }
 
     .json-textarea[readonly] {
-      background-color: #ffffff;
+      background-color: $euiColorEmptyShade;
     }
 
     .note {
-      font-size: 12px;
-      padding-top: 10px;
+      font-size: $euiFontSizeXS;
+      padding-top: $euiSizeS;
       font-style: italic;
-      color: @gray6
+      color: $euiColorDarkShade;
     }
   }
 
   i.validation-error {
-    color: #fe5050;
-    text-shadow: 1px 1px 1px #BBBBBB;
+    color: $euiColorDanger;
+    text-shadow: 1px 1px 1px $euiColorLightestShade;
   }
 
   div.validation-error {
-    color: #fe5050;
-    font-size: 12px;
+    color: $euiColorDanger;
+    font-size: $euiFontSizeXS;
   }
 
   .tab_contents {
-    padding-top:20px;
+    padding-top: $euiSize;
 
+    // SASSTODO: Proper calcs
     .date_container {
       width: 200px;
       display: inline-block;
@@ -110,6 +106,7 @@ ml-new-job {
       text-transform: lowercase;
     }
 
+    // SASSTODO: Proper calcs
     .custom-url, .categorization-filter {
       display: flex;
       position: relative;
@@ -136,29 +133,34 @@ ml-new-job {
       }
     }
 
+    // SASSTODO: Proper calcs
     .influencer-list-container {
+      @include euiFontSizeXS;
+
       max-height: 500px;
       overflow: auto;
-      padding: 10px 15px;
-      font-size: 13px;
-      line-height: 1.42857143;
-      color: #444444;
-      background-color: #ffffff;
+      padding: $euiSizeS $euiSize;
+      color: $euiColorDarkShade;
+      background-color: $euiColorEmptyShade;
       background-image: none;
-      border: 2px solid #ecf0f1;
-      border-radius: 4px;
+      border: $euiBorderThick;
+      border-radius: $euiBorderRadius;
     }
 
     .influencer-list-container {
       .custom-influencer {
-        margin-top: 10px;
+        margin-top: $euiSize;
+
+        // SASSTODO: Proper calcs and selector
         input[type='text'] {
           width:200px;
           float:left;
         }
+
+        // SASSTODO: Proper selector
         button {
-          margin-top:4px;
-          margin-left:4px;
+          margin-top: $euiSizeXS;
+          margin-left: $euiSizeXS;
         }
       }
 
@@ -174,25 +176,25 @@ ml-new-job {
   }
 
   .time-example {
-    color: #999999;
-    font-size: 12px;
-    margin-top: 5px;
-    margin-left: 5px;
+    color: $euiColorMediumShade;
+    font-size: $euiFontSizeXS;
+    margin-top: $euiSizeXS;
+    margin-left: $euiSizeXS;
     font-style: italic;
   }
 
   .ml-pre {
+    @include euiFontSizeXS;
+
     max-height: 500px;
     overflow: auto;
-    padding: 5px 15px;
-    font-size: 13px;
-    font-family: monospace;
-    line-height: 1.42857143;
-    color: #444444;
-    background-color: #ffffff;
+    padding: $euiSizeS $euiSize;
+    font-family: $euiCodeFontFamily;
+    color: $euiColorDarkShade;
+    background-color: $euiColorEmptyShade;
     background-image: none;
-    border: 2px solid #ecf0f1;
-    border-radius: 4px;
+    border: $euiBorderThick;
+    border-radius: $euiBorderRadius;
     display: block;
     unicode-bidi: embed;
     white-space: pre;
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/advanced/_index.scss
new file mode 100644
index 0000000000000..3c0cb16bb836e
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/_index.scss
@@ -0,0 +1,4 @@
+@import 'advanced';
+@import 'detector_filter_modal/index';
+@import 'detector_modal/index';
+@import 'save_status_modal/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/_detector_filter_modal.scss
similarity index 57%
rename from x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/_detector_filter_modal.scss
index 6f89b34a3b954..046151c4a0991 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/_detector_filter_modal.scss
@@ -1,66 +1,76 @@
 .detector-filter-modal {
-  padding:20px;
+  padding: $euiSizeL;
 
+  // SASSTODO: Proper selector
   h3 {
 		margin-top: 0px;
-	}
+  }
+
   small {
     font-style: italic;
   }
 
   .filter-field-form {
-    background-color: #FFFFFF;
+    background-color: $euiColorEmptyShade;
     border: none;
 
      & > div.field-cols {
       flex: 1 1 1%;
-      margin-right: 5px;
+      margin-right: $euiSizeXS;
     }
   }
 
   .target-container {
-    border-bottom: 1px solid #CCCCCC;
+    border-bottom: $euiBorderThin;
   }
 
   .conditions-list-container {
+
+    // SASSTODO: Proper selector
     .title {
-      font-weight:bold;
+      font-weight: $euiFontWeightBold;
     }
 
-    margin-top: 5px;
-    padding-top: 5px;
+    margin-top: $euiSizeXS;
+    padding-top: $euiSizeXS;
     display: table;
     border-collapse: collapse;
     width: 100%;
 
     .table-title, .rule-condition {
       display: table-row;
-      // border-top: 5px solid transparent;
 
+      // SASSTODO: Proper selector
       & > div {
         vertical-align: top;
         display: table-cell;
-        padding-right: 5px;
+        padding-right: $euiSizeXS;
       }
+
+      // SASSTODO: Proper selector
       & > div:last-child {
         padding-right: 0px;
+
         button {
-          margin-top: 3px;
+          margin-top: $euiSizeXS;
         }
       }
+
       div.conditions-connective {
         display: block;
         text-transform: lowercase;
         font-style: italic;
       }
     }
+
+    // SASSTODO: Proper selector
     .title {
-      border-bottom: 5px solid transparent;
+      border-bottom: $euiSizeXS solid transparent;
     }
 
   }
 
   button.add-new {
-    margin: 10px 0px;
+    margin: $euiSizeXS 0px;
   }
 }
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/_index.scss
new file mode 100644
index 0000000000000..2fe332ea661a1
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/_index.scss
@@ -0,0 +1 @@
+@import 'detector_filter_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/index.js b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/index.js
index aa070c000997b..a39e50c4a955f 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_filter_modal/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './styles/main.less';
 import './detector_filter_modal_controller';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/_detector_modal.scss
similarity index 54%
rename from x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/_detector_modal.scss
index a2ab1acf449ce..ad591dbece9cd 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/_detector_modal.scss
@@ -1,25 +1,27 @@
 .detector-modal {
-  font-size: 14px;
-  padding:20px;
+  font-size: $euiFontSizeS;
+  padding: $euiSizeL;
 
+  // SASSTODO: Proper selector
   h3 {
 		margin-top: 0px;
-	}
+  }
+
   small {
     font-style: italic;
   }
 
   .detector_field_form {
-    background-color: #FFFFFF;
+    background-color: $euiColorEmptyShade;
     border: none;
     display: flex;
 
      & > div.field-cols {
       flex: 1 1 1%;
-      margin-right: 5px;
+      margin-right: $euiSizeXS;
 
       select {
-        -webkit-appearance:none;
+        -webkit-appearance: none;
       }
     }
   }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/_index.scss
new file mode 100644
index 0000000000000..98518ceba6341
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/_index.scss
@@ -0,0 +1 @@
+@import 'detector_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/index.js b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/index.js
index 1c068287b1d9e..03ba6183d25b4 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/detector_modal/index.js
@@ -6,6 +6,5 @@
 
 
 
-import './styles/main.less';
 import './detector_modal_controller';
 import 'plugins/ml/components/documentation_help_link';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/index.js b/x-pack/plugins/ml/public/jobs/new_job/advanced/index.js
index 1e03ccde621df..376ca85b394a5 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import './new_job_controller';
 import './detectors_list_directive';
 import './save_status_modal';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/_index.scss
new file mode 100644
index 0000000000000..8bcc808d30b88
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/_index.scss
@@ -0,0 +1 @@
+@import 'save_status_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/_save_status_modal.scss b/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/_save_status_modal.scss
new file mode 100644
index 0000000000000..4f8457d2b937a
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/_save_status_modal.scss
@@ -0,0 +1,14 @@
+.save-status-modal {
+  padding: $euiSizeL;
+  cursor: auto;
+
+  // SASSTODO: Proper selector
+	h3 {
+		margin-top: 0px;
+	}
+
+  .status-item {
+  	padding-top: $euiSizeS;
+  	font-weight: $euiFontWeightBold;
+  }
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/index.js b/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/index.js
index 2e27445835699..8f8c0d3c233c5 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './styles/main.less';
 import './save_status_modal_controller';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/styles/main.less
deleted file mode 100644
index 005f5a071a5c6..0000000000000
--- a/x-pack/plugins/ml/public/jobs/new_job/advanced/save_status_modal/styles/main.less
+++ /dev/null
@@ -1,13 +0,0 @@
-.save-status-modal {
-  padding:20px;
-  cursor: auto;
-
-	h3 {
-		margin-top: 0px;
-	}
-
-  .status-item {
-  	padding-top:8px;
-  	font-weight: bold;
-  }
-}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/_index.scss
new file mode 100644
index 0000000000000..6cd73f18ec608
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/_index.scss
@@ -0,0 +1,14 @@
+@import 'components/bucket_span_estimator/index'; // SASSTODO: Needs some rewriting
+@import 'components/bucket_span_selection/index';
+@import 'components/event_rate_chart/index'; // SASSTODO: Needs some rewriting
+@import 'components/fields_selection/index'; // SASSTODO: Needs a rewrite
+@import 'components/fields_selection_population/index'; // SASSTODO: Needs a rewrite
+@import 'components/general_job_details/index'; // SASSTODO: Needs a rewrite
+@import 'components/influencers_selection/index';
+@import 'components/post_save_options/index';
+@import 'components/watcher/index'; // SASSTODO: Needs calc changes
+
+@import 'multi_metric/index'; // SASSTODO: Needs some rewriting
+@import 'population/index'; // SASSTODO: Needs some rewriting
+@import 'recognize/index'; // SASSTODO: Needs some rewriting
+@import 'single_metric/index'; // SASSTODO: Needs some rewriting
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/_bucket_span_estimator.scss
similarity index 69%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/_bucket_span_estimator.scss
index eee1a2eb943ec..484ca68514b95 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/_bucket_span_estimator.scss
@@ -1,10 +1,11 @@
+// SASSTODO: Proper calcs, this looks to brittle to change
 .bucket-span-estimator {
   float: right;
   margin-right: 5px;
   margin-top: -27px;
 
   button.euiButton.euiButton--small {
-    font-size: 12px;
+    font-size: $euiFontSizeS;
     height: 22px;
 
     .euiButton__content {
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/_index.scss
new file mode 100644
index 0000000000000..c9c96afec94c1
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/_index.scss
@@ -0,0 +1 @@
+@import 'bucket_span_estimator';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/index.js
index dadd9182f2e1a..4f56c5de2a6e6 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_estimator/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './styles/main.less';
 import './bucket_span_estimator_directive.js';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/_bucket_span_selector.scss
similarity index 97%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/_bucket_span_selector.scss
index 2d26d3df00ba1..8cb5558e1dbb4 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/_bucket_span_selector.scss
@@ -2,4 +2,4 @@
   .bucket-span-input {
     float: left;
   }
-}
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/_index.scss
new file mode 100644
index 0000000000000..d76ab211ee01a
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/_index.scss
@@ -0,0 +1 @@
+@import 'bucket_span_selector';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/index.js
index 295fa48025caf..9a1074cfd194b 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/bucket_span_selection/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './bucket_span_selection_directive';
-import './styles/main.less';
+import './bucket_span_selection_directive';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/_event_rate_chart.scss
similarity index 71%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/_event_rate_chart.scss
index d9bc03fa87578..fba7df107f02d 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/_event_rate_chart.scss
@@ -1,26 +1,27 @@
 ml-event-rate-chart {
   svg {
-    font-size: 12px;
-    font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial;
-    margin-top: -20px;
+    font-size: $euiSizeXS;
+    font-family: $euiFontFamily;
+    margin-top: -20px; // SASSTODO: Proper calc
   }
 
   .bar {
     transition: opacity 0.5s ;
-    stroke: #FFFFFF;
+    stroke: $euiColorEmptyShade;
   }
+
   .bar:hover {
     opacity: 1;
   }
 
   .axis path, .axis line {
     fill: none;
-    stroke: #cccccc;
+    stroke: $euiBorderColor;
     shape-rendering: crispEdges;
   }
 
   .axis text {
-    fill: #000;
+    fill: $euiTextColor;
   }
 
   .axis .tick line {
@@ -33,27 +34,31 @@ ml-event-rate-chart {
   }
 
   .area.bounds {
+    // SASSTODO: Variabilize
     fill: rgba(50, 167, 194, 0.25);
   }
 
   .values-line {
     fill: none;
+    // SASSTODO: Variabilize
     stroke: #32a7c2;
     stroke-width: 2;
   }
 
   .metric-value {
     opacity: 1;
+    // SASSTODO: Variabilize
     fill: #32a7c2;
   }
 
   .context-chart .axis text {
+    // SASSTODO: Variabilize
     font-size: 10px;
-    fill: #333333;
+    fill: $euiTextColor;
   }
 
   .area.context {
-    fill: #e4e4e4;
+    fill: $euiColorLightestShade;
   }
 
   .swimlane .axis text {
@@ -77,17 +82,18 @@ ml-event-rate-chart {
   }
 
   .brush .extent {
-    stroke: #fff;
+    stroke: $euiColorEmptyShade;
     fill-opacity: .125;
     shape-rendering: crispEdges;
   }
 
+    // SASSTODO: Proper calcs
   .progress {
     display: inline-block;
     min-width: 70px;
     margin-bottom: -5px;
     margin-left: 49px;
-    background-color: #FFFFFF;
+    background-color: $euiColorEmptyShade;
     height: 2px;
     border-radius: 0px;
   }
@@ -96,6 +102,7 @@ ml-event-rate-chart {
     text-align: right;
     line-height: 18px;
     transition: none;
+    // SASSTODO: Variabilize
     background-color: #32a7c2;
   }
 }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/_index.scss
new file mode 100644
index 0000000000000..5f43a677d02ca
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/_index.scss
@@ -0,0 +1 @@
+@import 'event_rate_chart';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/index.js
index 799f818b63b4f..cdd3519f6c185 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './event_rate_chart_directive';
-import './styles/main.less';
+import './event_rate_chart_directive';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_fields_selection.scss
similarity index 69%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_fields_selection.scss
index 3892ddacf226e..9a9fb2b3e0b09 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_fields_selection.scss
@@ -1,22 +1,23 @@
+// SASSTODO: This has a lot of manual calcs in it. Needs to be rewritten.
+
 .fields-selection {
   .selection-list-container {
     max-height: 250px;
     overflow: auto;
-    padding: 5px 8px;
-    font-size: 13px;
-    line-height: 1.42857143;
-    color: #444444;
-    background-color: #ffffff;
+    padding: $euiSizeXS $euiSizeS;
+    @include euiFontSizeXS;
+    color: $euiColorDarkShade;
+    background-color: $euiColorEmptyShade;
     background-image: none;
-    border: 2px solid #ecf0f1;
-    border-radius: 4px;
+    border: $euiBorderThick;
+    border-radius: $euiBorderRadius;
 
     .field-row {
       display: flex;
       flex-direction: row;
 
       label.kuiCheckBoxLabel {
-        padding-left: 2px !important;
+        padding-left: $euiSizeXS / 2 !important;
         flex: auto;
         white-space: nowrap;
         overflow: hidden;
@@ -28,7 +29,7 @@
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
-          margin-left: 4px;
+          margin-left: $euiSizeXS;
           vertical-align: middle;
         }
       }
@@ -51,10 +52,10 @@
           height: 0;
           margin-left: 2px;
           vertical-align: middle;
-          border-top: 4px dashed;
-          border-top: 4px solid #000;
-          border-right: 4px solid transparent;
-          border-left: 4px solid transparent;
+          border-top: $euiSizeXS dashed;
+          border-top: $euiSizeXS solid $euiColorFullShade;
+          border-right: $euiSizeXS solid transparent;
+          border-left: $euiSizeXS solid transparent;
           right: 10px;
           top: 14px;
           pointer-events: none;
@@ -62,7 +63,7 @@
       }
     }
     .field-row:first-child {
-      border-bottom: 1px dashed #CCCCCC;
+      border-bottom: 1px dashed $euiBorderColor;
       padding-bottom: 5px;
       margin-top: 5px;
       span {
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_index.scss
new file mode 100644
index 0000000000000..91d543ecf37ba
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_index.scss
@@ -0,0 +1 @@
+@import 'fields_selection';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/index.js
index 4fe2b4b7ac6d6..3749313194992 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './fields_selection_directive';
-import './styles/main.less';
+import './fields_selection_directive';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index.scss
new file mode 100644
index 0000000000000..4126423bb855a
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index.scss
@@ -0,0 +1 @@
+@import 'index_selection_population';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index_selection_population.scss
similarity index 69%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index_selection_population.scss
index b2fdbe8a6d1cc..84fef12286482 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index_selection_population.scss
@@ -1,38 +1,41 @@
+// SASSTODO: This has a lot of manual calcs in it. Needs to be rewritten.
+
 .fields-selection-population {
   .selection-list-container {
     max-height: 250px;
     overflow: auto;
-    padding: 5px 8px;
-    font-size: 13px;
-    line-height: 1.42857143;
-    color: #444444;
-    background-color: #ffffff;
+    padding: $euiSizeXS $euiSizeS;
+    @include euiFontSizeXS;
+    color: $euiColorDarkShade;
+    background-color: $euiColorEmptyShade;
     background-image: none;
-    border: 2px solid #ecf0f1;
-    border-radius: 4px;
+    border: $euiBorderThick;
+    border-radius: $euiBorderRadius;
 
     .field-row {
       display: flex;
       flex-direction: row;
 
       .field {
-        padding-left: 2px;
+        padding-left: $euiSizeXS / 2;
         flex: auto;
         white-space: nowrap;
         overflow: hidden;
         input {
+          // SASSTODO: Proper calc
           min-width: 13px !important;
         }
         span {
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
-          margin-left: 4px;
+          margin-left: $euiSizeXS;
         }
       }
 
       .agg-type {
         float: right;
+        // SASSTODO: Proper calc
         width: 162px;
         flex-grow: 0;
         white-space: nowrap;
@@ -55,12 +58,12 @@
             position: absolute;
             width: 0;
             height: 0;
-            margin-left: 2px;
+            margin-left: $euiSizeXS / 2;
             vertical-align: middle;
-            border-top: 4px dashed;
-            border-top: 4px solid #000;
-            border-right: 4px solid transparent;
-            border-left: 4px solid transparent;
+            border-top: $euiSizeXS dashed;
+            border-top: $euiSizeXS solid $euiColorFullShade;
+            border-right: $euiSizeXS solid transparent;
+            border-left: $euiSizeXS solid transparent;
             right: 43px;
             top: 14px;
             pointer-events: none;
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/index.js
index c6a25a491620e..c061df6092cc4 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/index.js
@@ -7,5 +7,4 @@
 
 
 import './fields_selection_directive';
-import './styles/main.less';
 import 'plugins/ml/components/field_type_icon';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_general_job_details.scss
similarity index 62%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_general_job_details.scss
index 2d7a1bdd47942..1babc5b117680 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_general_job_details.scss
@@ -1,8 +1,12 @@
+// SASSTODO: This file needs a rewrite. Needs proper calcs
+
 .general-job-details {
   .advanced-button {
     min-width: 23px;
   }
   .advanced-button-container {
+
+    // SASSTODO: Needs a proper selector
     label {
       cursor: pointer;
       display: inline-block;
@@ -10,36 +14,42 @@
   }
   .advanced-group {
     padding: 10px;
-    background-color: #F9F9F9;
+    background-color: $euiColorLightestShade;
+
+    // SASSTODO: Needs a proper selector
     label {
-      font-weight: normal;
+      font-weight: $euiFontWeightRegular;
     }
   }
 }
 
 .charts-container {
   transition: transform 0.2s ;
+
   .chart-list-panel {
     margin: 0px;
     padding: 10px;
     overflow: hidden;
+  }
 
+  .chart-list-panel-population {
+    padding: 10px 0px;
   }
 
   .card {
-    background-color: #FFFFFF;
-    border-radius: 3px;
-    border: 1px solid #CCCCCC;
+    background-color: $euiColorEmptyShade;
+    border-radius: $euiBorderRadius;
+    border: $euiBorderThin;
     z-index: 10;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 
     .card-title {
-      color: steelblue;
-      font-weight: bold;
+      color: $euiColorPrimary;
+      font-weight: $euiFontWeightBold;
       margin-left: 10px;
       margin-top: 1px;
       margin-bottom: 5px;
-      border-bottom: 1px solid #CCCCCC;
+      border-bottom: $euiBorderThin;
       padding-bottom: 5px;
     }
     .chart {
@@ -62,43 +72,43 @@
     }
   }
   .card-behind-0 {
-    width: calc(~"100% - 32px");
+    width: calc(100% - 36px);
     margin-left: 0px;
   }
   .card-behind-1 {
-    width: calc(~"100% - 44px");
+    width: calc(100% - 44px);
     margin-left: 5px;
   }
   .card-behind-2 {
-    width: calc(~"100% - 53px");
+    width: calc(100% - 53px);
     margin-left: 9.5px;
   }
   .card-behind-3 {
-    width: calc(~"100% - 61px");
+    width: calc(100% - 61px);
     margin-left: 13.5px;
   }
   .card-behind-4 {
-    width: calc(~"100% - 68px");
+    width: calc(100% - 68px);
     margin-left: 17px;
   }
   .card-behind-5 {
-    width: calc(~"100% - 74px");
+    width: calc(100% - 74px);
     margin-left: 20px;
   }
   .card-behind-6 {
-    width: calc(~"100% - 79px");
+    width: calc(100% - 79px);
     margin-left: 22.5px;
   }
   .card-behind-7 {
-    width: calc(~"100% - 83px");
+    width: calc(100% - 83px);
     margin-left: 24.5px;
   }
   .card-behind-8 {
-    width: calc(~"100% - 86px");
+    width: calc(100% - 86px);
     margin-left: 26px;
   }
   .card-behind-9 {
-    width: calc(~"100% - 88px");
+    width: calc(100% - 88px);
     margin-left: 27px;
   }
 
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_index.scss
new file mode 100644
index 0000000000000..713563fbe401b
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_index.scss
@@ -0,0 +1 @@
+@import 'general_job_details';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/index.js
index 6eaeb9112acfa..fee5c486f4566 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './general_job_details_directive';
-import './styles/main.less';
+import './general_job_details_directive';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/_index.scss
new file mode 100644
index 0000000000000..4cd9c31f54ac3
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/_index.scss
@@ -0,0 +1 @@
+@import 'influencers_selection';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/_influencers_selection.scss
similarity index 57%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/_influencers_selection.scss
index 8f8ddd417e6c6..cdf92313c3dac 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/_influencers_selection.scss
@@ -1,15 +1,16 @@
 .influencers-selection {
   .ui-select-container[disabled] {
-    background-color:  #D9D9D9 !important;
+    background-color: $euiColorLightestShade !important;
   }
   .ui-select-match-item[disabled]:hover,
   .ui-select-match-item[disabled]:focus {
-    background-color: #ffffff;
-    border-color: #D9D9D9;
+    background-color: $euiColorEmptyShade;
+    border-color: $euiBorderColor;
   }
 }
 
 .default-influencer {
   font-style: italic;
+  // SASSTODO: Variabilize
   color: #acb6c0;
 }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/index.js
index 1cb4162aedeea..455261a9db6ec 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/influencers_selection/index.js
@@ -7,5 +7,4 @@
 
 
 import './influencers_selection_directive';
-import './styles/main.less';
 import 'plugins/ml/components/field_type_icon';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/_index.scss
new file mode 100644
index 0000000000000..c1241466690e3
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/_index.scss
@@ -0,0 +1 @@
+@import 'post_save_options';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/_post_save_options.scss
similarity index 56%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/_post_save_options.scss
index 33fb73fde4e37..412db3b6b1941 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/_post_save_options.scss
@@ -1,5 +1,5 @@
 .post-save-options {
   .disabled {
-    color: #CCC;
+    color: $euiColorLightShade;
   }
 }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/index.js
index a9c9c8891e955..717232daf32a9 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/post_save_options/index.js
@@ -6,6 +6,5 @@
 
 
 
-import './styles/main.less';
 import './post_save_options_directive.js';
 import 'plugins/ml/jobs/new_job/simple/components/watcher';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/_index.scss
new file mode 100644
index 0000000000000..737d80dfb6082
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/_index.scss
@@ -0,0 +1 @@
+@import 'watcher';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/_watcher.scss
similarity index 52%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/_watcher.scss
index ec7cbd09e68bc..f89673d0ea5c4 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/_watcher.scss
@@ -1,13 +1,13 @@
 .create-watch {
-  font-size: 14px;
-  padding: 10px;
+  font-size: $euiFontSizeS;
+  padding: $euiSizeS;
 
   .sub-form-group {
     display: inline-block;
-    margin-right: 10px;
+    margin-right: $euiSizeS;
 
     .interval {
-      width: 65px;
+      width: 65px; // SASSTODO: Proper calc 
     }
   }
 
@@ -18,18 +18,18 @@
   .sub-form-group:first-child {
     .euiFormControlLayout {
       display: inline-block;
-      width: 70px;
+      width: 70px; // SASSTODO: Proper calc
     }
   }
 
   .email-section {
-    padding: 10px;
+    padding: $euiSizeS;
     padding-left: 0px;
-    padding-bottom: 5px
+    padding-bottom: $euiSizeXS;
   }
 
   .form-group:last-child {
-    margin-bottom: 0px
+    margin-bottom: 0px;
   }
 
   .dropdown-group {
@@ -42,34 +42,38 @@
     cursor: pointer;
   }
   button.dropdown-toggle {
-    width: 120px;
+    width: 120px; // SASSTODO: Proper calc
     text-align: left;
-    margin-bottom: 3px;
-
+    margin-bottom: $euiSizeXS;
+    
+    // SASSTODO: Proper calc
     span {
-      font-size: 13px;
+      font-size: $euiFontSizeXS;
     }
   }
 
   .dropdown-menu {
-    min-width: 120px;
-    font-size: 13px;
+    min-width: 120px; // SASSTODO: Proper calc
+    font-size: $euiFontSizeXS;
 
+    // SASSTODO: Proper selector
     li > a {
-      color: #444444;
+      color: $euiColorDarkShade;
       text-decoration: none;
       box-shadow: none;
     }
+
+    // SASSTODO: Proper selector
     li > a:hover, li > a:active, li > a:focus {
-      color: #ffffff;
+      color: $euiColorEmptyShade;
     }
   }
 
   .watch-exists-warning {
-    color: #fe5050;
+    color: $euiColorWarning;
   }
 }
 
 .create-watch-embedded {
-  background-color: #F9F9F9;
+  background-color: $euiColorLightestShade;
 }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/index.js
index e5c48efa71721..97e62ff2da013 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/watcher/index.js
@@ -6,6 +6,5 @@
 
 
 
-import './styles/main.less';
 import './create_watch_directive.js';
 import './create_watch_service.js';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/_index.scss
new file mode 100644
index 0000000000000..e75c986b33fbc
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/_index.scss
@@ -0,0 +1 @@
+@import 'create_job/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
old mode 100755
new mode 100644
similarity index 68%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
index ac4a6789e3dd7..c94cd1989d572
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
@@ -1,247 +1,257 @@
-@import (reference) "~ui/styles/variables";
-
-.multi-metric-job-container {
-  font-size: 14px;
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
-
-
-  .job-state-info {
-    margin-bottom: 10px;
-  }
-
-  .form-controls, .charts-container {
-    margin: 0px;
-    margin-right: -10px;
-
-    & > div {
-      border: 1px solid #E4E4E3;
-      border-top: 0px;
-    }
-
-    & > h4 {
-      margin-top: 0px;
-      margin-bottom: 0px;
-      padding: 10px;
-      background-color: @kibanaBlue3;
-      color: #FFFFFF;
-    }
-
-    .btn-load-vis {
-      border-radius: 4px !important;
-      margin-top: -2px;
-    }
-
-    .remove-split {
-      height: 22px;
-      font-size: 12px;
-      line-height: 12px;
-      margin-left: 10px;
-      min-width: 100px;
-    }
-  }
-
-  .charts-container {
-      margin-left: -10px;
-
-      label {
-        margin-bottom: 15px;
-      }
-   }
-
-  .form-section {
-    margin: 0px 0px 0px 0px;
-    border-bottom: 1px solid #E4E4E3;
-    padding: 10px;
-    overflow: hidden;
-
-    &.form-section-overflow {
-      overflow: visible;
-
-      .ui-select-bootstrap .ui-select-toggle > a.btn {
-        margin-top: 0;
-        border: 0;
-      }
-    }
-
-    h4, h5 {
-      margin-top: 0px;
-      display: inline-block;
-    }
-    .form-group:last-child {
-      margin-bottom: 0px;
-    }
-
-    .help-text {
-      border: 1px solid #e8e8e8;
-      padding: 5px;
-      background-color: #f1f1f1;
-      border-radius: 3px;
-      font-size: 12px;
-    }
-  }
-
-  .form-section:last-of-type {
-      margin: 0px;
-      border-bottom: 0px solid #E4E4E3;
-    }
-
-  .form-section-collapsed {
-    height: 46px;
-  }
-
-  div.validation-error {
-    color: #fe5050;
-    font-size: 12px;
-  }
-}
-
-.chart-container {
-  .chart-loader {
-    border: 1px solid #e5e5e5;
-    margin-left: 49px;
-    display: flex;
-    margin-bottom: 25px;
-    position: relative;
-    background-color: rgba(255, 255, 255, 0.75);
-    transition: opacity 0.5s ;
-
-    .status-label {
-      width: 50%;
-      text-align: center;
-      margin: auto;
-
-      .no-results {
-        color: #555;
-
-        i {
-          color: #5a9bd6
-        }
-        h2, h4 {
-          margin-top: 0px;
-        }
-      }
-    }
-  }
-
-  .event-rate-chart-loader {
-    margin-left: 0px;
-    border: none;
-  }
-}
-
-ml-multi-metric-job-chart {
-  svg {
-    font-size: 12px;
-    font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial;
-    margin-top: -20px;
-  }
-
-  .bar {
-    transition: opacity 0.5s ;
-    stroke: #FFFFFF;
-  }
-  .bar:hover {
-    opacity: 1;
-  }
-
-  .axis path, .axis line {
-    fill: none;
-    stroke: #cccccc;
-    shape-rendering: crispEdges;
-  }
-
-  .axis text {
-    fill: #000;
-  }
-
-  .axis .tick line {
-    stroke: rgba(0, 0, 0, 0.1);
-    stroke-width: 0px;
-  }
-
-  .area {
-    stroke-width: 1;
-  }
-
-  .area.bounds {
-    fill: rgba(50, 167, 194, 0.25);
-  }
-
-  .values-line {
-    fill: none;
-    stroke: #32a7c2;
-    stroke-width: 2;
-  }
-
-  .values-dots circle {
-    fill: #32a7c2;
-    stroke-width: 0;
-  }
-
-  .metric-value {
-    opacity: 1;
-    fill: #32a7c2;
-  }
-
-  .context-chart .axis text {
-    font-size: 10px;
-    fill: #333333;
-  }
-
-  .area.context {
-    fill: #e4e4e4;
-  }
-
-  .swimlane .axis text {
-    display: none;
-  }
-
-  .swimlane rect.swimlane-cell-hidden {
-    display: none;
-  }
-
-  .bottom-swimlane .axis .tick line {
-    stroke-width: 1px;
-  }
-
-  .swimlane-cells {
-    transition: opacity 0.5s;
-  }
-
-  .swimlane-cell:hover {
-    opacity: 1;
-  }
-
-  .brush .extent {
-    stroke: #fff;
-    fill-opacity: .125;
-    shape-rendering: crispEdges;
-  }
-
-  .progress {
-    display: inline-block;
-    min-width: 70px;
-    margin-bottom: -5px;
-    margin-left: 49px;
-    background-color: #FFFFFF;
-    height: 2px;
-    border-radius: 0px;
-  }
-
-  .progress-bar {
-    text-align: right;
-    line-height: 18px;
-    transition: none;
-    background-color: #32a7c2;
-  }
-}
-
-// hide the default es loading indicator bar as it can't be switched off
-// for standard es searches using the http header.
-.loadingIndicator__bar {
-  display: none;
-}
+// SASSTODO: This file needs works with calcs and variables
+.multi-metric-job-container {
+  font-size: $euiFontSizeS;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: $euiSize;
+  padding-right: $euiSize;
+
+
+  .job-state-info {
+    margin-bottom: $euiSizeS;
+  }
+
+  .form-controls, .charts-container {
+    margin: 0px;
+    margin-right: -$euiSizeS;
+
+    // SASSTODO: Proper selector
+    & > div {
+      border: 1px solid $euiColorLightestShade;
+      border-top: 0px;
+    }
+
+    // SASSTODO: Proper selector
+    & > h4 {
+      margin-top: 0px;
+      margin-bottom: 0px;
+      padding: $euiSizeS;
+      background-color: $euiColorPrimary;
+      color: $euiColorEmptyShade;
+    }
+
+    .btn-load-vis {
+      border-radius: $euiBorderRadius !important;
+      margin-top: -2px;
+    }
+
+    // SASSTODO: Proper calcs, too brittle to change
+    .remove-split {
+      height: 22px;
+      font-size: 12px;
+      line-height: 12px;
+      margin-left: 10px;
+      min-width: 100px;
+    }
+  }
+
+  .charts-container {
+      margin-left: -$euiSizeS;
+
+      label {
+        margin-bottom: $euiSize;
+      }
+   }
+
+  .form-section {
+    margin: 0px 0px 0px 0px;
+    border-bottom: 1px solid $euiColorLightestShade;
+    padding: $euiSizeS;
+    overflow: hidden;
+
+    &.form-section-overflow {
+      overflow: visible;
+
+      .ui-select-bootstrap .ui-select-toggle > a.btn {
+        margin-top: 0;
+        border: 0;
+      }
+    }
+
+    // SASSTODO: Proper selectors
+    h4, h5 {
+      margin-top: 0px;
+      display: inline-block;
+    }
+
+    .form-group:last-child {
+      margin-bottom: 0px;
+    }
+
+    .help-text {
+      border: 1px solid $euiColorLightestShade;
+      padding: $euiSizeXS;
+      background-color: $euiColorEmptyShade;
+      border-radius: $euiBorderRadius;
+      font-size: $euiFontSizeXS;
+    }
+  }
+
+  .form-section:last-of-type {
+      margin: 0px;
+      border-bottom: 0px solid $euiColorLightestShade;
+    }
+
+  // SASSTODO: Proper calcs
+  .form-section-collapsed {
+    height: 46px;
+  }
+
+  div.validation-error {
+    color: $euiColorDanger;
+    font-size: $euiFontSizeXS;
+  }
+}
+
+.chart-container {
+  // SASSTODO: Proper calcs
+  .chart-loader {
+    border: 1px solid $euiColorLightestShade;
+    margin-left: 49px;
+    display: flex;
+    margin-bottom: 25px;
+    position: relative;
+    background-color: rgba(255, 255, 255, 0.75);
+    transition: opacity 0.5s ;
+
+    .status-label {
+      width: 50%;
+      text-align: center;
+      margin: auto;
+
+      .no-results {
+        color: $euiColorDarkShade;
+
+        // SASSTODO: Proper selector
+        i {
+          color: $euiColorPrimary;
+        }
+
+        // SASSTODO: Proper selector
+        h2, h4 {
+          margin-top: 0px;
+        }
+      }
+    }
+  }
+
+  .event-rate-chart-loader {
+    margin-left: 0px;
+    border: none;
+  }
+}
+
+ml-multi-metric-job-chart {
+  svg {
+    font-size: $euiFontSizeXS;
+    font-family: $euiFontFamily;
+    // SASSTODO: Proper calc
+    margin-top: -20px;
+  }
+
+  .bar {
+    transition: opacity 0.5s ;
+    stroke: $euiColorEmptyShade;
+  }
+  .bar:hover {
+    opacity: 1;
+  }
+
+  .axis path, .axis line {
+    fill: none;
+    stroke: $euiBorderColor;
+    shape-rendering: crispEdges;
+  }
+
+  .axis text {
+    fill: $euiTextColor;
+  }
+
+  .axis .tick line {
+    stroke: rgba(0, 0, 0, 0.1);
+    stroke-width: 0px;
+  }
+
+  .area {
+    stroke-width: 1;
+  }
+
+  .area.bounds {
+    fill: rgba(50, 167, 194, 0.25);
+  }
+
+  .values-line {
+    fill: none;
+    stroke: #32a7c2;
+    stroke-width: 2;
+  }
+
+  .values-dots circle {
+    fill: #32a7c2;
+    stroke-width: 0;
+  }
+
+  .metric-value {
+    opacity: 1;
+    fill: #32a7c2;
+  }
+
+  .context-chart .axis text {
+    font-size: 10px;
+    fill: #333333;
+  }
+
+  .area.context {
+    fill: #e4e4e4;
+  }
+
+  .swimlane .axis text {
+    display: none;
+  }
+
+  .swimlane rect.swimlane-cell-hidden {
+    display: none;
+  }
+
+  .bottom-swimlane .axis .tick line {
+    stroke-width: 1px;
+  }
+
+  .swimlane-cells {
+    transition: opacity 0.5s;
+  }
+
+  .swimlane-cell:hover {
+    opacity: 1;
+  }
+
+  .brush .extent {
+    stroke: $euiColorEmptyShade;
+    fill-opacity: .125;
+    shape-rendering: crispEdges;
+  }
+
+  .progress {
+    display: inline-block;
+    min-width: 70px;
+    margin-bottom: -5px;
+    margin-left: 49px;
+    background-color: #FFFFFF;
+    height: 2px;
+    border-radius: 0px;
+  }
+
+  .progress-bar {
+    text-align: right;
+    line-height: 18px;
+    transition: none;
+    background-color: #32a7c2;
+  }
+}
+
+// hide the default es loading indicator bar as it can't be switched off
+// for standard es searches using the http header.
+.loadingIndicator__bar {
+  display: none;
+}
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_index.scss
new file mode 100644
index 0000000000000..db63a0bf13dfb
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_index.scss
@@ -0,0 +1 @@
+@import 'create_job';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/index.js
index be0543676feda..93ed828599bde 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import './create_job_controller';
 import './create_job_service';
 import './create_job_chart_directive';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/population/_index.scss
new file mode 100644
index 0000000000000..e75c986b33fbc
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/_index.scss
@@ -0,0 +1 @@
+@import 'create_job/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
old mode 100755
new mode 100644
similarity index 70%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
index d07c23a3b1c91..894f3ab645ba9
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
@@ -1,285 +1,293 @@
-@import (reference) "~ui/styles/variables";
-
-.population-job-container {
-  font-size: 14px;
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
-
-
-  .job-state-info {
-    margin-bottom: 10px;
-  }
-
-  .form-controls, .charts-container {
-    margin: 0px;
-    margin-right: -10px;
-
-    & > div {
-      border: 1px solid #E4E4E3;
-      border-top: 0px;
-    }
-
-    & > h4 {
-      margin-top: 0px;
-      margin-bottom: 0px;
-      padding: 10px;
-      background-color: @kibanaBlue3;
-      color: #FFFFFF;
-    }
-
-    .btn-load-vis {
-      border-radius: 4px !important;
-      margin-top: -2px;
-    }
-  }
-
-  .charts-container {
-      margin-left: -10px;
-
-      label {
-        margin-bottom: 15px;
-      }
-   }
-
-  .form-section {
-    margin: 0px 0px 0px 0px;
-    border-bottom: 1px solid #E4E4E3;
-    padding: 10px;
-    overflow: hidden;
-
-    &.form-section-overflow {
-      overflow: visible;
-
-      .ui-select-bootstrap .ui-select-toggle > a.btn {
-        margin-top: 0;
-        border: 0;
-      }
-    }
-
-    h4, h5 {
-      margin-top: 0px;
-      display: inline-block;
-    }
-    .form-group:last-child {
-      margin-bottom: 0px;
-    }
-
-    .help-text {
-      border: 1px solid #e8e8e8;
-      padding: 5px;
-      background-color: #f1f1f1;
-      border-radius: 3px;
-      font-size: 12px;
-    }
-  }
-
-  .form-section:last-of-type {
-      margin: 0px;
-      border-bottom: 0px solid #E4E4E3;
-    }
-
-  .form-section-collapsed {
-    height: 46px;
-  }
-
-
-  .charts-container {
-
-    .chart {
-      label {
-        display: block;
-      }
-      .split-controls {
-        height: 45px;
-
-        .split-field-container {
-          width: 255px;
-          display: inline-block;
-          .split-field-select {
-            width: 250px;
-            display: inline-block;
-            overflow: hidden;
-          }
-        }
-        .split-align {
-          vertical-align: top;
-          margin-top: 7px;
-          display: inline-block;
-        }
-        .remove-split {
-          height: 22px;
-          font-size: 12px;
-          line-height: 12px;
-          margin-top: 6px;
-          min-width: 100px;
-        }
-      }
-    }
-
-    .card {
-      label {
-        margin-bottom: 10px;
-      }
-    }
-
-    .split-select {
-      width: auto;
-    }
-  }
-
-  div.validation-error {
-    color: #fe5050;
-    font-size: 12px;
-  }
-}
-
-.chart-container {
-  .chart-loader {
-    border: 1px solid #e5e5e5;
-    margin-left: 49px;
-    display: flex;
-    margin-bottom: 25px;
-    position: relative;
-    background-color: rgba(255, 255, 255, 0.75);
-    transition: opacity 0.5s ;
-
-    .status-label {
-      width: 50%;
-      text-align: center;
-      margin: auto;
-
-      .no-results {
-        color: #555;
-
-        i {
-          color: #5a9bd6
-        }
-        h2, h4 {
-          margin-top: 0px;
-        }
-      }
-    }
-  }
-
-  .event-rate-chart-loader {
-    margin-left: 0px;
-    border: none;
-  }
-}
-
-ml-population-job-chart {
-  svg {
-    font-size: 12px;
-    font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial;
-    margin-top: -20px;
-  }
-
-  .bar {
-    transition: opacity 0.5s ;
-    stroke: #FFFFFF;
-  }
-  .bar:hover {
-    opacity: 1;
-  }
-
-  .axis path, .axis line {
-    fill: none;
-    stroke: #cccccc;
-    shape-rendering: crispEdges;
-  }
-
-  .axis text {
-    fill: #000;
-  }
-
-  .axis .tick line {
-    stroke: rgba(0, 0, 0, 0.1);
-    stroke-width: 0px;
-  }
-
-  .area {
-    stroke-width: 1;
-  }
-
-  .area.bounds {
-    fill: rgba(50, 167, 194, 0.25);
-  }
-
-  .values-line {
-    fill: none;
-    stroke: #32a7c2;
-    stroke-width: 2;
-  }
-
-  .values-dots circle {
-    fill: #32a7c2;
-    stroke-width: 0;
-    fill-opacity: 0.5;
-  }
-
-  .metric-value {
-    opacity: 1;
-    fill: #32a7c2;
-  }
-
-  .context-chart .axis text {
-    font-size: 10px;
-    fill: #333333;
-  }
-
-  .area.context {
-    fill: #e4e4e4;
-  }
-
-  .swimlane .axis text {
-    display: none;
-  }
-
-  .swimlane rect.swimlane-cell-hidden {
-    display: none;
-  }
-
-  .bottom-swimlane .axis .tick line {
-    stroke-width: 1px;
-  }
-
-  .swimlane-cells {
-    transition: opacity 0.5s;
-  }
-
-  .swimlane-cell:hover {
-    opacity: 1;
-  }
-
-  .brush .extent {
-    stroke: #fff;
-    fill-opacity: .125;
-    shape-rendering: crispEdges;
-  }
-
-  .progress {
-    display: inline-block;
-    min-width: 70px;
-    margin-bottom: -5px;
-    margin-left: 49px;
-    background-color: #FFFFFF;
-    height: 2px;
-    border-radius: 0px;
-  }
-
-  .progress-bar {
-    text-align: right;
-    line-height: 18px;
-    transition: none;
-    background-color: #32a7c2;
-  }
-}
-
-// hide the default es loading indicator bar as it can't be switched off
-// for standard es searches using the http header.
-.loadingIndicator__bar {
-  display: none;
-}
+// SASSTODO: This file needs an overwrite. It needs more variables and size calcs
+.population-job-container {
+  font-size: $euiFontSizeS;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: $euiSize;
+  padding-right: $euiSize;
+
+
+  .job-state-info {
+    margin-bottom: $euiSizeS;
+  }
+
+  .form-controls, .charts-container {
+    margin: 0px;
+    margin-right: -$euiSizeS;
+
+    // SASSTODO: Proper selector
+    & > div {
+      border: $euiBorderThin;
+      border-top: 0px;
+    }
+
+    // SASSTODO: Proper selector
+    & > h4 {
+      margin-top: 0px;
+      margin-bottom: 0px;
+      padding: $euiSizeS;
+      background-color: $euiColorPrimary;
+      color: $euiColorEmptyShade;
+    }
+
+    .btn-load-vis {
+      border-radius: $euiBorderRadius !important;
+      margin-top: -2px;
+    }
+  }
+
+  .charts-container {
+      margin-left: -$euiSizeS;
+
+      label {
+        margin-bottom: $euiSize;
+      }
+   }
+
+  .form-section {
+    margin: 0px 0px 0px 0px;
+    border-bottom: 1px solid $euiColorLightestShade;
+    padding: 10px;
+    overflow: hidden;
+
+    &.form-section-overflow {
+      overflow: visible;
+
+      .ui-select-bootstrap .ui-select-toggle > a.btn {
+        margin-top: 0;
+        border: 0;
+      }
+    }
+
+    // SASSTODO: Proper selector
+    h4, h5 {
+      margin-top: 0px;
+      display: inline-block;
+    }
+    .form-group:last-child {
+      margin-bottom: 0px;
+    }
+
+    .help-text {
+      border: 1px solid $euiColorLightestShade;
+      padding: $euiSizeXS;
+      background-color: $euiColorEmptyShade;
+      border-radius: $euiBorderRadius;
+      font-size: $euiFontSizeXS;
+    }
+  }
+
+  .form-section:last-of-type {
+      margin: 0px;
+      border-bottom: 0px solid $euiColorLightestShade;
+    }
+
+  // SASSTODO: Proper calc
+  .form-section-collapsed {
+    height: 46px;
+  }
+
+
+  .charts-container {
+
+    .chart {
+      // SASSTODO: Proper selector
+      label {
+        display: block;
+      }
+      .split-controls {
+        height: 45px;
+
+        .split-field-container {
+          width: 255px;
+          display: inline-block;
+          .split-field-select {
+            width: 250px;
+            display: inline-block;
+            overflow: hidden;
+          }
+        }
+        .split-align {
+          vertical-align: top;
+          margin-top: 7px;
+          display: inline-block;
+        }
+        .remove-split {
+          height: 22px;
+          font-size: $euiFontSizeXS;
+          line-height: $euiFontSizeXS;
+          margin-top: 6px;
+          min-width: 100px;
+        }
+      }
+    }
+
+    .card {
+      // SASSTODO: Proper selector
+      label {
+        margin-bottom: $euiSizeS;
+      }
+    }
+
+    .split-select {
+      width: auto;
+    }
+  }
+
+  div.validation-error {
+    color: $euiColorDanger;
+    font-size: $euiFontSizeXS;
+  }
+}
+
+.chart-container {
+  .chart-loader {
+    border: 1px solid $euiColorLightestShade;
+    margin-left: 49px;
+    display: flex;
+    margin-bottom: 25px;
+    position: relative;
+    background-color: rgba(255, 255, 255, 0.75);
+    transition: opacity 0.5s ;
+
+    .status-label {
+      width: 50%;
+      text-align: center;
+      margin: auto;
+
+      .no-results {
+        color: $euiColorDarkShade;
+
+        // SASSTODO: Proper selector
+        i {
+          color: $euiColorPrimary;
+        }
+
+        // SASSTODO: Proper selector
+        h2, h4 {
+          margin-top: 0px;
+        }
+      }
+    }
+  }
+
+  .event-rate-chart-loader {
+    margin-left: 0px;
+    border: none;
+  }
+}
+
+ml-population-job-chart {
+  svg {
+    font-size: $euiFontSizeXS;
+    font-family: $euiFontFamily;
+    margin-top: -20px;
+  }
+
+  .bar {
+    transition: opacity 0.5s ;
+    stroke: $euiColorEmptyShade;
+  }
+  .bar:hover {
+    opacity: 1;
+  }
+
+  .axis path, .axis line {
+    fill: none;
+    stroke: $euiBorderColor;
+    shape-rendering: crispEdges;
+  }
+
+  .axis text {
+    fill: $euiTextColor;
+  }
+
+  .axis .tick line {
+    stroke: rgba(0, 0, 0, 0.1);
+    stroke-width: 0px;
+  }
+
+  .area {
+    stroke-width: 1;
+  }
+
+  .area.bounds {
+    fill: rgba(50, 167, 194, 0.25);
+  }
+
+  .values-line {
+    fill: none;
+    stroke: #32a7c2;
+    stroke-width: 2;
+  }
+
+  .values-dots circle {
+    fill: #32a7c2;
+    stroke-width: 0;
+    fill-opacity: 0.5;
+  }
+
+  .metric-value {
+    opacity: 1;
+    fill: #32a7c2;
+  }
+
+  .context-chart .axis text {
+    font-size: 10px;
+    fill: #333333;
+  }
+
+  .area.context {
+    fill: #e4e4e4;
+  }
+
+  .swimlane .axis text {
+    display: none;
+  }
+
+  .swimlane rect.swimlane-cell-hidden {
+    display: none;
+  }
+
+  .bottom-swimlane .axis .tick line {
+    stroke-width: 1px;
+  }
+
+  .swimlane-cells {
+    transition: opacity 0.5s;
+  }
+
+  .swimlane-cell:hover {
+    opacity: 1;
+  }
+
+  .brush .extent {
+    stroke: $euiColorEmptyShade;
+    fill-opacity: .125;
+    shape-rendering: crispEdges;
+  }
+
+  .progress {
+    display: inline-block;
+    min-width: 70px;
+    margin-bottom: -5px;
+    margin-left: 49px;
+    background-color: $euiColorEmptyShade;
+    height: 2px;
+    border-radius: 0px;
+  }
+
+  .progress-bar {
+    text-align: right;
+    line-height: 18px;
+    transition: none;
+    background-color: #32a7c2;
+  }
+}
+
+// hide the default es loading indicator bar as it can't be switched off
+// for standard es searches using the http header.
+.loadingIndicator__bar {
+  display: none;
+}
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_index.scss
new file mode 100644
index 0000000000000..db63a0bf13dfb
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_index.scss
@@ -0,0 +1 @@
+@import 'create_job';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html
index 620e16060bda3..3582600935309 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html
@@ -230,7 +230,7 @@ <h4 class="euiTitle euiTitle--small"><i class="fa fa-info-circle"></i> No result
 
             </div>
             <div ng-repeat='(id, chart) in chartData.detectors track by id'>
-              <div class='chart-list-panel detector-container card-{{id}}' ng-show='ui.showFieldCharts'>
+              <div class='chart-list-panel chart-list-panel-population detector-container card-{{id}}' ng-show='ui.showFieldCharts'>
                 <div class='card-front'>
                   <div class="card-title"></div>
                   <div class='chart' style='height: {{ui.chartHeight + 90}}px;'>
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/index.js
index b374fb744635d..1ce06a35202b6 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import './create_job_controller';
 import './create_job_service';
 import './create_job_chart_directive';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/_index.scss
new file mode 100644
index 0000000000000..e04ae3b356559
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/_index.scss
@@ -0,0 +1 @@
+@import 'create_job/index'
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss
old mode 100755
new mode 100644
similarity index 54%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss
index 384638bdf8e18..e9acadb297803
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss
@@ -1,192 +1,193 @@
-@import (reference) "~ui/styles/variables";
-
-.recognizer-job-container {
-  font-size: 14px;
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
-
-
-  .job-state-info {
-    margin-bottom: 10px;
-  }
-
-  .form-controls, .charts-container {
-    margin: 0px;
-    margin-right: -10px;
-
-    & > div {
-      border: 1px solid #E4E4E3;
-      border-top: 0px;
-    }
-
-    & > h4 {
-      margin-top: 0px;
-      margin-bottom: 0px;
-      padding: 10px;
-      background-color: @kibanaBlue3;
-      color: #FFFFFF;
-    }
-
-    .btn-load-vis {
-      border-radius: 4px !important;
-      margin-top: -2px;
-    }
-  }
-
-  .advanced-button {
-    min-width: 23px;
-  }
-  .advanced-button-container {
-    label {
-      cursor: pointer;
-      display: inline-block;
-    }
-  }
-  .advanced-group {
-    padding: 10px;
-    background-color: #F9F9F9;
-    label {
-      font-weight: normal;
-    }
-  }
-
-  .charts-container {
-    margin-left: -10px;
-    margin-bottom: 10px;
-    margin-right: 0px;
-    line-height: 20px;
-
-    .jobs-list, .save-objects-list {
-      padding: 5px;
-
-      .job-container {
-        border: 1px solid #D9D9D9;
-        // padding: 5px;
-        margin: 5px;
-        border-radius: 3px;
-        display: flex;
-
-        .labels {
-          flex: auto;
-          margin: 5px;
-          .title {
-            color: #0079a5;
-            // font-size: 16px;
-          }
-         .exists {
-           color: #999999;
-           font-style: italic;
-           span {
-             font-size: 12px;
-           }
-          }
-          .sub-title {
-            color: #999999;
-            font-size: 12px;
-            margin-top: 2px;
-            font-style: italic;
-          }
-        }
-        .results {
-          flex-grow: 0;
-          flex-shrink: 0;
-          // width: 200px;
-          border-left: 1px solid #D9D9D9;
-          background-color: #F9F9F9;
-          // padding: 10px;
-          padding-top: 4px;
-
-          opacity: 0;
-          transition: opacity 0.5s;
-
-          .result-box {
-            display: inline-block;
-            vertical-align: middle;
-            text-align: center;
-
-            width: 50px;
-
-            .result-box-title {
-              color: #999999;
-              font-size: 12px;
-              font-style: italic;
-              margin-bottom: 3px;
-            }
-
-            .result-box-inner {
-              // border: 1px solid #D9D9D9;
-              // background-color: #efefef;
-              // border-radius: 3px;
-              // font-size: 20px;
-              // width: 40px;
-              // height: 40px;
-              width: 20px;
-              height: 20px;
-              font-size: 15px;
-              margin: 0px;
-              align-items: center;
-              justify-content: center;
-              display: inline-flex;
-              vertical-align: top;
-            }
-          }
-        }
-      }
-    }
-    .jobs-list {
-      .result-box {
-        margin-right: 10px;
-      }
-    }
-  }
-
-  .form-section {
-    margin: 0px 0px 0px 0px;
-    border-bottom: 1px solid #E4E4E3;
-    padding: 10px;
-    overflow: hidden;
-
-    & > h4, & > h5 {
-      margin-top: 0px;
-      display: inline-block;
-    }
-    .form-group:last-child {
-      margin-bottom: 0px;
-    }
-
-    .help-text {
-      border: 1px solid #e8e8e8;
-      padding: 5px;
-      background-color: #f1f1f1;
-      border-radius: 3px;
-      font-size: 12px;
-    }
-
-
-  }
-
-  .form-section:last-of-type {
-    margin: 0px;
-    border-bottom: 0px solid #E4E4E3;
-  }
-
-  .form-section-collapsed {
-    height: 46px;
-  }
-
-
-  div.validation-error {
-    color: #fe5050;
-    font-size: 12px;
-  }
-}
-
-
-// hide the default es loading indicator bar as it can't be switched off
-// for standard es searches using the http header.
-.loadingIndicator__bar {
-  display: none;
-}
+// SASSTODO: This file needs to be rewritten for proper variable usage and size calcs
+.recognizer-job-container {
+  font-size: $euiFontSizeS;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: $euiSize;
+  padding-right: $euiSize;
+
+
+  .job-state-info {
+    margin-bottom: $euiSize;
+  }
+
+  .form-controls, .charts-container {
+    margin: 0px;
+    margin-right: -$euiSize;
+
+    // SASSTODO: Proper selector
+    & > div {
+      border: 1px solid $euiColorLightestShade;
+      border-top: 0px;
+    }
+
+    // SASSTODO: Proper selector
+    & > h4 {
+      margin-top: 0px;
+      margin-bottom: 0px;
+      padding: 10px;
+      background-color: $euiColorPrimary;
+      color: $euiColorEmptyShade;
+    }
+
+    .btn-load-vis {
+      border-radius: $euiBorderRadius !important;
+      margin-top: -2px;
+    }
+  }
+
+  // SASSTODO: Proper calc
+  .advanced-button {
+    min-width: 23px;
+  }
+
+  .advanced-button-container {
+    // SASSTODO: Proper selector
+    label {
+      cursor: pointer;
+      display: inline-block;
+    }
+  }
+
+  .advanced-group {
+    padding: 10px;
+    background-color: $euiColorLightestShade;
+
+    // SASSTODO: Proper selector
+    label {
+      font-weight: $euiFontWeightRegular;
+    }
+  }
+
+  .charts-container {
+    margin-left: -$euiSizeS;
+    margin-bottom: $euiSizeS;
+    margin-right: 0px;
+    line-height: 20px;
+
+    .jobs-list, .save-objects-list {
+      padding: $euiSizeXS;
+
+      .job-container {
+        border: 1px solid $euiColorLightestShade;
+        // padding: 5px;
+        margin: $euiSizeXS;
+        border-radius: $euiBorderRadius;
+        display: flex;
+
+        .labels {
+          flex: auto;
+          margin: $euiBorderRadius;
+          .title {
+            color: $euiColorPrimary;
+          }
+         .exists {
+           color: $euiColorMediumShade;
+           font-style: italic;
+
+           // SASSTODO: Proper selector
+           span {
+             font-size: $euiSizeXS;
+           }
+          }
+          .sub-title {
+            color: $euiColorDarkShade;
+            font-size: $euiFontSizeXS;
+            margin-top: 2px;
+            font-style: italic;
+          }
+        }
+
+        .results {
+          flex-grow: 0;
+          flex-shrink: 0;
+          border-left: 1px solid $euiColorLightShade;
+          background-color: $euiColorLightestShade;
+          padding-top: $euiSizeXS;
+
+          opacity: 0;
+          transition: opacity 0.5s;
+
+          .result-box {
+            display: inline-block;
+            vertical-align: middle;
+            text-align: center;
+           // SASSTODO: Proper calc
+            width: 50px;
+
+            .result-box-title {
+              color: $euiColorMediumShade;
+              font-size: $euiFontSizeXS;
+              font-style: italic;
+              margin-bottom: $euiSizeXS;
+            }
+
+            .result-box-inner {
+              width: 20px;
+              height: 20px;
+              font-size: $euiFontSizeM;
+              margin: 0px;
+              align-items: center;
+              justify-content: center;
+              display: inline-flex;
+              vertical-align: top;
+            }
+          }
+        }
+      }
+    }
+    .jobs-list {
+      .result-box {
+        margin-right: $euiSizeS;
+      }
+    }
+  }
+
+  .form-section {
+    margin: 0px 0px 0px 0px;
+    border-bottom: 1px solid $euiColorLightestShade;
+    padding: $euiSizeS;
+    overflow: hidden;
+
+    // SASSTODO: Proper selector
+    & > h4, & > h5 {
+      margin-top: 0px;
+      display: inline-block;
+    }
+    .form-group:last-child {
+      margin-bottom: 0px;
+    }
+
+    // SASSTODO: Proper selector
+    .help-text {
+      border: 1px solid $euiColorLightestShade;
+      padding: 5px;
+      background-color: $euiColorEmptyShade;
+      border-radius: $euiSizeXS;
+      font-size: $euiFontSizeXS;
+    }
+  }
+
+  .form-section:last-of-type {
+    margin: 0px;
+    border-bottom: 0px solid $euiColorLightestShade;
+  }
+
+  .form-section-collapsed {
+    height: 46px;
+  }
+
+
+  div.validation-error {
+    color: $euiColorDanger;
+    font-size: $euiFontSizeXS;
+  }
+}
+
+
+// hide the default es loading indicator bar as it can't be switched off
+// for standard es searches using the http header.
+.loadingIndicator__bar {
+  display: none;
+}
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_index.scss
new file mode 100644
index 0000000000000..ea8b32f6673b1
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_index.scss
@@ -0,0 +1 @@
+@import 'create_jobs';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/index.js
index 1c5958eecd323..96b3791f4558c 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import './create_job_controller';
 import './create_job_service';
 import 'plugins/ml/services/mapping_service';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/_index.scss
new file mode 100644
index 0000000000000..e75c986b33fbc
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/_index.scss
@@ -0,0 +1 @@
+@import 'create_job/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
old mode 100755
new mode 100644
similarity index 71%
rename from x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
index f8425eaa0c288..726c88ca04f45
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
@@ -1,203 +1,210 @@
-.single-metric-job-container {
-  font-size: 14px;
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
-
-
-  .job-state-info {
-    margin-bottom: 10px;
-  }
-
-  .validation-error {
-    color: #fe5050;
-    font-size: 12px;
-  }
-
-  .form-controls {
-    .bucket-span-container {
-      white-space: nowrap;
-      width: calc(~"100% - 40px");
-      margin-bottom: 2px;
-
-      .bucket-span-input {
-        background-color: transparent;
-        float: left;
-      }
-
-      .bucket-span-input:disabled {
-        background-color: #D9D9D9;
-      }
-
-      .validation-error  {
-        margin-bottom: -25px;
-      }
-    }
-
-    .btn-load-vis {
-      border-radius: 4px !important;
-      margin-left: 5px;
-      min-width: 35px;
-    }
-  }
-
-  .advanced-button {
-    min-width: 23px;
-  }
-  .advanced-button-container {
-    label {
-      cursor: pointer;
-      display: inline-block;
-    }
-  }
-
-  .advanced-group {
-    padding: 10px;
-    background-color: #F9F9F9;
-    label {
-      font-weight: normal;
-    }
-  }
-
-  .chart-container {
-    margin-bottom: 20px;
-
-    .chart-loader {
-      border: 1px solid #e5e5e5;
-      margin-left: 49px;
-      display: flex;
-      margin-bottom: 52px;
-      position: relative;
-      background-color: rgba(255, 255, 255, 0.75);
-
-      .status-label {
-        width: 50%;
-        text-align: center;
-        margin: auto;
-
-
-        .no-results {
-          color: #555;
-          background-color: aliceblue;
-          border: 1px solid #DDEFFF;
-          padding: 25px;
-          border-radius: 4px;
-          display: inline-block;
-
-          i {
-            color: #5a9bd6
-          }
-          h2, h4 {
-            margin-top: 0px;
-          }
-        }
-      }
-    }
-
-    ml-single-metric-job-chart {
-      svg {
-        font-size: 12px;
-        font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial;
-      }
-
-      .axis path, .axis line {
-        fill: none;
-        stroke: #cccccc;
-        shape-rendering: crispEdges;
-      }
-
-      .axis text {
-        fill: #000;
-      }
-
-      .axis .tick line {
-        stroke: rgba(0, 0, 0, 0.1);
-        stroke-width: 0px;
-      }
-
-      .area {
-        stroke-width: 1;
-      }
-
-      .area.bounds {
-        fill: rgba(50, 167, 194, 0.25);
-      }
-
-      .values-line {
-        fill: none;
-        stroke: #32a7c2;
-        stroke-width: 2;
-      }
-
-      .values-dots circle {
-        fill: #32a7c2;
-        stroke-width: 0;
-      }
-
-      .metric-value {
-        opacity: 1;
-        fill: #32a7c2;
-      }
-
-      .context-chart .axis text {
-        font-size: 10px;
-        fill: #333333;
-      }
-
-      .area.context {
-        fill: #e4e4e4;
-      }
-
-      .swimlane .axis text {
-        display: none;
-      }
-
-      .swimlane rect.swimlane-cell-hidden {
-        display: none;
-      }
-
-      .model-chart, .swimlane {
-        transition: opacity 0.5s ;
-      }
-
-      .bottom-swimlane .axis .tick line {
-        stroke-width: 1px;
-      }
-
-      .swimlane-cell:hover {
-        opacity: 1;
-      }
-
-      .brush .extent {
-        stroke: #fff;
-        fill-opacity: .125;
-        shape-rendering: crispEdges;
-      }
-
-      .progress {
-        display: inline-block;
-        min-width: 70px;
-        margin-bottom: -5px;
-        margin-left: 49px;
-        background-color: #FFFFFF;
-        height: 2px;
-        border-radius: 0px;
-      }
-
-      .progress-bar {
-        text-align: right;
-        line-height: 18px;
-        transition: none;
-        background-color: #32a7c2;
-      }
-    }
-  }
-}
-
-// hide the default es loading indicator bar as it can't be switched off
-// for standard es searches using the http header.
-.loadingIndicator__bar {
-  display: none;
-}
+// SASSTODO: Thie file needs a rewrite to add proper variables and sizing
+.single-metric-job-container {
+  font-size: $euiFontSizeS;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: $euiSize;
+  padding-right: $euiSize;
+
+
+  .job-state-info {
+    margin-bottom: $euiSizeS;
+  }
+
+  .validation-error {
+    color: $euiColorDanger;
+    font-size: 12px;
+  }
+
+  .form-controls {
+    .bucket-span-container {
+      white-space: nowrap;
+      width: calc(100% - 40px);
+      margin-bottom: 2px;
+
+      .bucket-span-input {
+        background-color: transparent;
+        float: left;
+      }
+
+      .bucket-span-input:disabled {
+        background-color: $euiColorLightShade;
+      }
+
+      .validation-error  {
+        margin-bottom: -$euiSizeL;
+      }
+    }
+
+    .btn-load-vis {
+      border-radius: $euiBorderRadius !important;
+      margin-left: $euiSizeXS;
+      min-width: 35px; // SASSTODO: Proper calc
+    }
+  }
+
+  // SASSTODO: Proper calc
+  .advanced-button {
+    min-width: 23px;
+  }
+
+  .advanced-button-container {
+    // SASSTODO: Proper selector
+    label {
+      cursor: pointer;
+      display: inline-block;
+    }
+  }
+
+  .advanced-group {
+    padding: $euiSizeS;
+    background-color: $euiColorLightestShade;
+    label {
+      font-weight: normal;
+    }
+  }
+
+  .chart-container {
+    margin-bottom: 20px;
+
+    .chart-loader {
+      border: 1px solid $euiColorLightestShade;
+      margin-left: 49px;
+      display: flex;
+      margin-bottom: 52px;
+      position: relative;
+      background-color: rgba(255, 255, 255, 0.75);
+
+      .status-label {
+        width: 50%;
+        text-align: center;
+        margin: auto;
+
+
+        .no-results {
+          color: $euiColorDarkShade;
+          background-color: $euiColorLightestShade;
+          border: $euiBorderColor;
+          padding: $euiSizeL;
+          border-radius: $euiSizeXS;
+          display: inline-block;
+
+          // SASSTODO: Proper selector
+          i {
+            color: $euiColorPrimary;
+          }
+
+          // SASSTODO: Proper selector
+          h2, h4 {
+            margin-top: 0px;
+          }
+        }
+      }
+    }
+
+    ml-single-metric-job-chart {
+      svg {
+        font-size: $euiSizeXS;
+        font-family: $euiFontFamily;
+      }
+
+      .axis path, .axis line {
+        fill: none;
+        stroke: $euiBorderColor;
+        shape-rendering: crispEdges;
+      }
+
+      .axis text {
+        fill: $euiTextColor;
+      }
+
+      .axis .tick line {
+        stroke: rgba(0, 0, 0, 0.1);
+        stroke-width: 0px;
+      }
+
+      .area {
+        stroke-width: 1;
+      }
+
+      .area.bounds {
+        fill: rgba(50, 167, 194, 0.25);
+      }
+
+      .values-line {
+        fill: none;
+        stroke: #32a7c2;
+        stroke-width: 2;
+      }
+
+      .values-dots circle {
+        fill: #32a7c2;
+        stroke-width: 0;
+      }
+
+      .metric-value {
+        opacity: 1;
+        fill: #32a7c2;
+      }
+
+      .context-chart .axis text {
+        font-size: 10px;
+        fill: #333333;
+      }
+
+      .area.context {
+        fill: #e4e4e4;
+      }
+
+      .swimlane .axis text {
+        display: none;
+      }
+
+      .swimlane rect.swimlane-cell-hidden {
+        display: none;
+      }
+
+      .model-chart, .swimlane {
+        transition: opacity 0.5s ;
+      }
+
+      .bottom-swimlane .axis .tick line {
+        stroke-width: 1px;
+      }
+
+      .swimlane-cell:hover {
+        opacity: 1;
+      }
+
+      .brush .extent {
+        stroke: $euiColorEmptyShade;
+        fill-opacity: .125;
+        shape-rendering: crispEdges;
+      }
+
+      .progress {
+        display: inline-block;
+        min-width: 70px;
+        margin-bottom: -5px;
+        margin-left: 49px;
+        background-color: $euiColorEmptyShade;
+        height: 2px;
+        border-radius: 0px;
+      }
+
+      .progress-bar {
+        text-align: right;
+        line-height: 18px;
+        transition: none;
+        background-color: #32a7c2;
+      }
+    }
+  }
+}
+
+// hide the default es loading indicator bar as it can't be switched off
+// for standard es searches using the http header.
+.loadingIndicator__bar {
+  display: none;
+}
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_index.scss
new file mode 100644
index 0000000000000..db63a0bf13dfb
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_index.scss
@@ -0,0 +1 @@
+@import 'create_job';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/index.js b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/index.js
index 5d97c601cae5f..d2d922840b98e 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import './create_job_controller';
 import './create_job_service';
 import './create_job_chart_directive';
diff --git a/x-pack/plugins/ml/public/jobs/new_job/wizard/_index.scss b/x-pack/plugins/ml/public/jobs/new_job/wizard/_index.scss
new file mode 100644
index 0000000000000..ae17bd2da3479
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/new_job/wizard/_index.scss
@@ -0,0 +1 @@
+@import 'wizard';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/new_job/wizard/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/wizard/_wizard.scss
similarity index 53%
rename from x-pack/plugins/ml/public/jobs/new_job/wizard/styles/main.less
rename to x-pack/plugins/ml/public/jobs/new_job/wizard/_wizard.scss
index 61fa2adbb6c48..bea387d781983 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/wizard/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/new_job/wizard/_wizard.scss
@@ -1,40 +1,28 @@
-@import (reference) '~ui/styles/variables/colors';
-@import (reference) "~ui/styles/variables";
-
 .job-type-gallery {
   width: 100%;
-  padding-right: 10px;
-  padding-left: 10px;
-  background-color: @globalColorLightestGray;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
+  padding-right: $euiSizeS;
+  padding-left: $euiSizeS;
+  background-color: $euiColorLightestShade;
   flex: 1 0 auto;
 
   .job-types-content {
-    max-width: 1200px;
+    max-width: 1200px; // SASSTODO: Proper calc
     margin-right: auto;
     margin-left: auto;
   }
 
   .synopsis {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
     flex-grow: 1;
 
     .synopsisTitle {
-      font-size: 16px;
+      font-size: $euiFontSize;
       font-weight: normal;
-      color: #0079a5;
+      color: $euiColorPrimary;
     }
 
     .synopsisIcon {
-      padding-top: 8px;
+      padding-top: $euiSizeS;
     }
   }
 
@@ -54,12 +42,12 @@
     pointer-events: none;
 
     .synopsisTitle {
-      color: grey;
+      color: $euiColorDarkShade;
     }
   }
 
   .index-warning {
-    border: 1px solid #d9d9d9;
+    border: $euiBorderThin;
   }
 }
 
diff --git a/x-pack/plugins/ml/public/jobs/new_job/wizard/index.js b/x-pack/plugins/ml/public/jobs/new_job/wizard/index.js
index 2fc3cb33d6772..c2fb464630669 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/wizard/index.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/wizard/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 // SASS TODO: Import wizard.scss instead
 // import 'plugins/kibana/visualize/wizard/wizard.less';
 import './steps/index_or_search';
diff --git a/x-pack/plugins/ml/public/jobs/styles/main.less b/x-pack/plugins/ml/public/jobs/styles/main.less
deleted file mode 100644
index 506d8b7087a37..0000000000000
--- a/x-pack/plugins/ml/public/jobs/styles/main.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import (reference) "~ui/styles/theme";
-@import (reference) "~ui/styles/variables";
-
-.modal {
-  cursor: default;
-}
diff --git a/x-pack/plugins/ml/public/settings/_index.scss b/x-pack/plugins/ml/public/settings/_index.scss
new file mode 100644
index 0000000000000..fa32ea3cbff34
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/_index.scss
@@ -0,0 +1,3 @@
+@import 'settings';
+@import 'filter_lists/index';
+@import 'scheduled_events/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/_settings.scss b/x-pack/plugins/ml/public/settings/_settings.scss
new file mode 100644
index 0000000000000..86bd894461cee
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/_settings.scss
@@ -0,0 +1,20 @@
+.disabled {
+  color: $euiColorMediumShade;
+  cursor: pointer;
+}
+
+ml-settings {
+  .management-panel {
+    .management-panel__link {
+      font-size: $euiFontSizeM;
+      line-height: $euiSizeXL;
+      margin-left: $euiSizeXS;
+    }
+
+    .disabled {
+      color: $euiColorMediumShade;
+    }
+  }
+}
+
+
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/list/styles/main.less b/x-pack/plugins/ml/public/settings/filter_lists/_filter_lists.scss
similarity index 57%
rename from x-pack/plugins/ml/public/settings/filter_lists/list/styles/main.less
rename to x-pack/plugins/ml/public/settings/filter_lists/_filter_lists.scss
index 961b748d54f11..80dd1c495b092 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/list/styles/main.less
+++ b/x-pack/plugins/ml/public/settings/filter_lists/_filter_lists.scss
@@ -1,9 +1,14 @@
+.ml-filter-lists {
+  background: $euiColorLightestShade;
+  min-height: 100vh;
+}
+
 .ml-list-filter-lists {
 
   .ml-list-filter-lists-content {
     max-width: 1100px;
-    margin-top: 16px;
-    margin-bottom: 16px;
+    margin-top: $euiSize;
+    margin-bottom: $euiSize;
   }
 
   .ml-filter-lists-table {
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/_index.scss b/x-pack/plugins/ml/public/settings/filter_lists/_index.scss
new file mode 100644
index 0000000000000..049d1f4cde5d5
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/filter_lists/_index.scss
@@ -0,0 +1,2 @@
+@import 'filter_lists';
+@import 'edit/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/edit/styles/main.less b/x-pack/plugins/ml/public/settings/filter_lists/edit/_edit.scss
similarity index 69%
rename from x-pack/plugins/ml/public/settings/filter_lists/edit/styles/main.less
rename to x-pack/plugins/ml/public/settings/filter_lists/edit/_edit.scss
index 1fc0c0e190b13..55978f1fb704a 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/edit/styles/main.less
+++ b/x-pack/plugins/ml/public/settings/filter_lists/edit/_edit.scss
@@ -2,8 +2,8 @@
   .ml-edit-filter-lists-content {
     max-width: 1100px;
     width: 100%;
-    margin-top: 16px;
-    margin-bottom: 16px;
+    margin-top: $euiSize;
+    margin-bottom: $euiSize;
   }
 
   .ml-filter-list-usage > div {
@@ -12,11 +12,11 @@
 
   .ml-filter-list-usage {
     .euiButtonEmpty.euiButtonEmpty--small {
-      padding-bottom: 3px;
+      padding-bottom: $euiSizeXS;
     }
 
     .euiButtonEmpty .euiButtonEmpty__content {
-      padding: 0px 4px;
+      padding: 0px $euiSizeXS;
     }
   }
 }
@@ -24,12 +24,12 @@
 .ml-add-filter-item-popover {
   .euiFormRow {
     width: 300px;
-    padding-bottom: 4px;
+    padding-bottom: $euiSizeXS;
   }
 }
 
 .ml-filter-list-usage-popover {
   li {
-    line-height: 24px;
+    line-height: $euiSizeL;
   }
 }
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/edit/_index.scss b/x-pack/plugins/ml/public/settings/filter_lists/edit/_index.scss
new file mode 100644
index 0000000000000..4272742ff49b1
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/filter_lists/edit/_index.scss
@@ -0,0 +1 @@
+@import 'edit';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/edit/index.js b/x-pack/plugins/ml/public/settings/filter_lists/edit/index.js
index bdbb6120391f3..5913b7ef60495 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/edit/index.js
+++ b/x-pack/plugins/ml/public/settings/filter_lists/edit/index.js
@@ -5,5 +5,4 @@
  */
 
 
-import './directive';
-import './styles/main.less';
+import './directive';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/index.js b/x-pack/plugins/ml/public/settings/filter_lists/index.js
index 5fb5e06aa5aa9..3e610e6e8ddf0 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/index.js
+++ b/x-pack/plugins/ml/public/settings/filter_lists/index.js
@@ -6,5 +6,4 @@
 
 
 import './edit';
-import './list';
-import './styles/main.less';
+import './list';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/list/index.js b/x-pack/plugins/ml/public/settings/filter_lists/list/index.js
index 4bbbfcae5dc20..fd75a9ceb9b49 100644
--- a/x-pack/plugins/ml/public/settings/filter_lists/list/index.js
+++ b/x-pack/plugins/ml/public/settings/filter_lists/list/index.js
@@ -7,4 +7,3 @@
 
 
 import './directive';
-import './styles/main.less';
diff --git a/x-pack/plugins/ml/public/settings/filter_lists/styles/main.less b/x-pack/plugins/ml/public/settings/filter_lists/styles/main.less
deleted file mode 100644
index b4a4918152987..0000000000000
--- a/x-pack/plugins/ml/public/settings/filter_lists/styles/main.less
+++ /dev/null
@@ -1,4 +0,0 @@
-.ml-filter-lists {
-  background: #F5F5F5;
-  min-height: 100vh;
-}
diff --git a/x-pack/plugins/ml/public/settings/index.js b/x-pack/plugins/ml/public/settings/index.js
index dda643fce713b..414587ae8d9ce 100644
--- a/x-pack/plugins/ml/public/settings/index.js
+++ b/x-pack/plugins/ml/public/settings/index.js
@@ -6,7 +6,6 @@
 
 
 
-import './styles/main.less';
 import './settings_controller';
 import './scheduled_events';
 import './filter_lists';
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/_index.scss b/x-pack/plugins/ml/public/settings/scheduled_events/_index.scss
new file mode 100644
index 0000000000000..a5db98c4b1229
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/_index.scss
@@ -0,0 +1,6 @@
+@import 'calendars_list/index';
+@import 'new_calendar/index';
+
+@import 'components/events_list/index';
+@import 'components/import_events_modal/index';
+@import 'components/new_event_modal/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/styles/main.less b/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/_calendars_list.scss
similarity index 58%
rename from x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/styles/main.less
rename to x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/_calendars_list.scss
index 1b94cdf1367f1..963c9d0e2cd54 100644
--- a/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/styles/main.less
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/_calendars_list.scss
@@ -1,17 +1,19 @@
 ml-calendars-list{
-  font-size: 14px;
+  font-size: $euiFontSizeS;
+
   header {
-    margin: 15px 0;
+    margin: $euiSize 0;
   }
   .calendars-list-container {
     width: 100%;
     margin-right: auto;
     margin-left: auto;
-    padding-left: 15px;
-    padding-right: 15px;
+    padding-left: $euiSize;
+    padding-right: $euiSize;
   }
 
   .actions-col {
+    // SASSTODO: Proper calcs
     width: 150px;
     min-width: 150px;
   }
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/_index.scss b/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/_index.scss
new file mode 100644
index 0000000000000..98af83f633806
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/_index.scss
@@ -0,0 +1 @@
+@import 'calendars_list';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/index.js b/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/index.js
index 63a9810203dce..6a6382516e06f 100644
--- a/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/index.js
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './styles/main.less';
 import './calendars_list_controller';
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/_events_list.scss b/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/_events_list.scss
new file mode 100644
index 0000000000000..b5d4b9056f1ec
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/_events_list.scss
@@ -0,0 +1,19 @@
+.events-list {
+  .actions-col {
+    width: 90px;
+    min-width: 90px;
+  }
+  .asterisk {
+    color: $euiColorDanger;
+    font-weight: $euiFontWeightBold;
+    cursor: default;
+  }
+
+  .footer-cell {
+    border-top: $euiBorderThin;
+    padding: $euiSizeS;
+    font-size: $euiFontSizeS;
+    font-style: italic;
+    text-align: right;
+  }
+}
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/_index.scss b/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/_index.scss
new file mode 100644
index 0000000000000..d5d95b9d63ccc
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/_index.scss
@@ -0,0 +1 @@
+@import 'events_list';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/index.js b/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/index.js
index 135f08ceadd30..f6bfb42f65aed 100644
--- a/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/index.js
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './styles/main.less';
 import './events_list_directive';
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/styles/main.less b/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/styles/main.less
deleted file mode 100644
index e3e4cef98ada5..0000000000000
--- a/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/styles/main.less
+++ /dev/null
@@ -1,21 +0,0 @@
-@import (reference) "~ui/styles/variables";
-
-.events-list {
-  .actions-col {
-    width: 90px;
-    min-width: 90px;
-  }
-  .asterisk {
-    color: @kibanaRed1;
-    font-weight: bold;
-    cursor: default;
-  }
-
-  .footer-cell {
-    border-top: 1px solid @globalColorLightGray;
-    padding: 7px 8px 8px;
-    font-size: 12px;
-    font-style: italic;
-    text-align: right;
-  }
-}
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/styles/main.less b/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/_import_events_modal.scss
similarity index 51%
rename from x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/styles/main.less
rename to x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/_import_events_modal.scss
index 14cfe5e64c057..c827578661e60 100644
--- a/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/styles/main.less
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/_import_events_modal.scss
@@ -1,8 +1,6 @@
-@import (reference) "~ui/styles/variables";
-
 .import-events-modal {
-  font-size: 14px;
-  padding:20px;
+  font-size: $euiFontSizeS;
+  padding: $euiSizeL;
   cursor: auto;
 
   .no-shadow {
@@ -10,6 +8,6 @@
   }
 
   .recurring-warning {
-    color: @kibanaRed1;
+    color: $euiColorDanger;
   }
 }
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/_index.scss b/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/_index.scss
new file mode 100644
index 0000000000000..b7a72ef464dda
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/_index.scss
@@ -0,0 +1 @@
+@import 'import_events_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/index.js b/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/index.js
index 20e86d1124b90..e0cb4cf7a574b 100644
--- a/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/index.js
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/components/import_events_modal/index.js
@@ -6,6 +6,5 @@
 
 
 
-import './styles/main.less';
 import './import_events_service';
 import './import_events_modal_controller';
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/_index.scss b/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/_index.scss
new file mode 100644
index 0000000000000..a9f6e72195d72
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/_index.scss
@@ -0,0 +1 @@
+@import 'new_event_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/styles/main.less b/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/_new_event_modal.scss
similarity index 67%
rename from x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/styles/main.less
rename to x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/_new_event_modal.scss
index 344f0a33292ce..71f770c3e89df 100644
--- a/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/styles/main.less
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/_new_event_modal.scss
@@ -1,6 +1,6 @@
 .new-event-modal {
-  font-size: 14px;
-  padding:20px;
+  font-size: $euiFontSizeS;
+  padding: $euiSizeL;
   cursor: auto;
 
   .date_container {
@@ -9,16 +9,17 @@
   }
 
   .ml-new-event-contents {
-    margin-top: 5px;
+    margin-top: $euiSizeXS;
 
     .main-container {
       display: flex;
       .tabs-container {
+        // SASSTODO: Proper selectors
         ul {
           padding: 0px;
           li {
             a {
-              border-radius: 4px 0px 0px 4px;
+              border-radius: $euiSizeXS 0px 0px $euiSizeXS;
               white-space: nowrap;
             }
           }
@@ -26,10 +27,11 @@
       }
 
       .calendar-container {
-        border: 2px solid #0079a5;
+        border: 2px solid $euiColorPrimary;
         flex-grow: 1;
-        border-radius: 4px;
+        border-radius: $euiBorderRadius;
 
+        // SASSTODO: Proper calcs
         .calendar {
           width: 235px;
           margin: 20px;
@@ -38,7 +40,7 @@
             margin-right: -33px;
           }
           .partition {
-            border-right: 1px solid #0079a5;
+            border-right: 1px solid $euiColorPrimary;
             position: absolute;
             height: 275px;
             left: 270px;
@@ -50,7 +52,8 @@
         }
       }
       .top-tab-selected {
-        border-radius: 0px 4px 4px 4px;
+        border-radius: 0 $euiSizeXS $euiSizeXS $euiSizeXS;
+
       }
     }
   }
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/index.js b/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/index.js
index de6ebcc9a33a3..9bda4b44c1189 100644
--- a/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/index.js
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/components/new_event_modal/index.js
@@ -6,6 +6,5 @@
 
 
 
-import './styles/main.less';
 import './new_event_service';
 import './new_event_modal_controller';
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/_index.scss b/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/_index.scss
new file mode 100644
index 0000000000000..dc8fbb6efc0f5
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/_index.scss
@@ -0,0 +1 @@
+@import 'new_calendar';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/_new_calendar.scss b/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/_new_calendar.scss
new file mode 100644
index 0000000000000..fc393ce56ce75
--- /dev/null
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/_new_calendar.scss
@@ -0,0 +1,21 @@
+ml-new-calendar{
+  font-size: $euiFontSizeS;
+
+  // SASSTODO: Proper selector
+  h3 {
+    margin-top: 0px;
+  }
+
+  .new-calendar-container {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: $euiSize;
+    padding-right: $euiSize;
+
+    .validation-error {
+      color: $euiColorDanger;
+      font-size: $euiFontSizeXS;
+    }
+  }
+}
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/index.js b/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/index.js
index 66c2ccd0e560e..6dd769aa0aa23 100644
--- a/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/index.js
+++ b/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './styles/main.less';
 import './create_calendar_controller';
diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/styles/main.less b/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/styles/main.less
deleted file mode 100644
index e080af6af7642..0000000000000
--- a/x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/styles/main.less
+++ /dev/null
@@ -1,18 +0,0 @@
-ml-new-calendar{
-  font-size: 14px;
-  h3 {
-    margin-top: 0px;
-  }
-  .new-calendar-container {
-    width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    padding-left: 15px;
-    padding-right: 15px;
-
-    .validation-error {
-      color: #fe5050;
-      font-size: 12px;
-    }
-  }
-}
diff --git a/x-pack/plugins/ml/public/styles/icons.less b/x-pack/plugins/ml/public/styles/icons.less
deleted file mode 100644
index b7fdf41ecebef..0000000000000
--- a/x-pack/plugins/ml/public/styles/icons.less
+++ /dev/null
@@ -1,27 +0,0 @@
-.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 #BBBBBB;
-}
-
-.ml-icon-severity-critical {
-  color: #fe5050;
-}
-
-.ml-icon-severity-major {
-  color: #fba740;
-}
-
-.ml-icon-severity-minor {
-  color: #fdec25;
-}
-
-.ml-icon-severity-warning {
-  color: #8bc8fb;
-}
-
-.ml-icon-severity-unknown {
-  color: #c0c0c0;
-}
diff --git a/x-pack/plugins/ml/public/styles/main.less b/x-pack/plugins/ml/public/styles/main.less
deleted file mode 100644
index 4a84463f92dd7..0000000000000
--- a/x-pack/plugins/ml/public/styles/main.less
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "./icons";
-@import "./ui-select";
-
-// Hacks. These need to be removed when ML converts to EUI.
-.tab-jobs,
-.edit-job-modal,
-.create-watch-modal {
-  label {
-    display: inline-block;
-  }
-
-  .validation-error {
-    margin-top: 5px;
-  }
-}
-
-.button-wrapper {
-  display: inline;
-}
-
-.button-wrapper.disabled .kuiButton[disabled] {
-  pointer-events: none;
-}
-
-.button-wrapper.disabled {
-  cursor: not-allowed;
-}
diff --git a/x-pack/plugins/ml/public/styles/ui-select.less b/x-pack/plugins/ml/public/styles/ui-select.less
deleted file mode 100644
index 51d2cfd046d9a..0000000000000
--- a/x-pack/plugins/ml/public/styles/ui-select.less
+++ /dev/null
@@ -1,30 +0,0 @@
-@import (reference) "~ui/styles/variables";
-
-// overriding the style of the ui-select element when disabled. To make it look the same all other standard selects
-
-.ui-select-match {
-  .btn-default[disabled],
-  .btn-default[disabled]:hover,
-  .btn-default[disabled]:focus {
-    background-color: @input-bg-disabled;
-    border-color: @input-bg-disabled;
-    opacity: 1;
-
-    .ui-select-placeholder {
-      color: @kibanaGray1;
-    }
-  }
- }
-
- .ui-select-container input[type="search"] {
-   padding-left: 15px;
-   padding-top: 4px;
-  }
-
-.ui-select-container input[type="search"]::placeholder {
-  color: @input-color-placeholder;
-}
-
-.ui-select-container input[type="search"]:focus {
-  box-shadow: none;
-}
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/_index.scss b/x-pack/plugins/ml/public/timeseriesexplorer/_index.scss
new file mode 100644
index 0000000000000..22707a81d66fe
--- /dev/null
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/_index.scss
@@ -0,0 +1,2 @@
+@import 'timeseriesexplorer';
+@import 'forecasting_modal/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/styles/main.less b/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss
similarity index 64%
rename from x-pack/plugins/ml/public/timeseriesexplorer/styles/main.less
rename to x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss
index 1900000c6bd4b..81544596f7e52 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/styles/main.less
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss
@@ -1,54 +1,53 @@
 .ml-time-series-explorer {
   width: 100%;
   display: inline-block;
-  color: #555;
+  color: $euiColorDarkShade;
 
   .no-results-container {
     text-align: center;
-    font-size: 17px;
-    padding-top: 60px;
+    font-size: $euiFontSizeL;
+    padding-top: 60px; // SASSTODO: variabalize
 
     .no-results {
-      background-color: aliceblue;
-      border: 1px solid #DDEFFF;
-      padding: 15px;
-      border-radius: 4px;
+      background-color: $euiFocusBackgroundColor;
+      padding: $euiSize;
+      border-radius: $euiBorderRadius;
       display: inline-block;
 
       i {
-        color: #5a9bd6;
-        margin-right: 5px;
+        color: $euiColorPrimary;
+        margin-right: $euiSizeXS;
       }
 
       div:nth-child(2) {
-        margin-top: 10px;
-        font-size: 13px;
+        margin-top: $euiSizeS;
+        font-size: $euiFontSizeXS;
       }
     }
   }
 
   .results-container {
-    padding: 15px;
+    padding: $euiSize;
 
     .panel-title {
-      color: #7b8a8b;
+      color: $euiTitleColor;
     }
 
     .entity-count-text {
-      color: #7b8a8b;
-      font-size: 13px;
+      color: $euiColorSecondary;
+      font-size: $euiFontSizeS;
     }
   }
 
   .series-controls {
-    padding: 15px 15px 0px 15px;
+    padding: $euiSize $euiSize 0px $euiSize;
 
     div.entity-controls {
       display: inline-block;
-      padding-left: 10px;
+      padding-left: $euiSize;
 
       input.entity-input-blank {
-        border-color: red;
+        border-color: $euiColorDanger;
       }
 
       .entity-input {
@@ -57,7 +56,7 @@
     }
 
     button {
-      margin-left: 5px;
+      margin-left: $euiSizeXS;
     }
   }
 
@@ -68,12 +67,12 @@
 
     div {
       display: inline;
-      padding-left: 15px;
+      padding-left: $euiSize;
     }
 
     .kuiCheckBoxLabel {
       display: inline-block;
-      font-size: 12px;
+      font-size: $euiFontSizeXS;
     }
   }
 
@@ -82,23 +81,23 @@
   }
 
   .ml-anomalies-controls {
-    padding-top: 5px;
+    padding-top: $euiSizeXS;
   }
 
   .ml-timeseries-chart {
     svg {
-      font-size: 12px;
-      font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial;
+      font-size: $euiFontSizeXS;
+      font-family: $euiFontFamily;
     }
 
     .axis path, .axis line {
       fill: none;
-      stroke: #cccccc;
+      stroke: $euiBorderColor;
       shape-rendering: crispEdges;
     }
 
     .axis text {
-      fill: #000;
+      fill: $euiTextColor;
     }
 
     .axis .tick line {
@@ -106,14 +105,14 @@
     }
 
     .chart-border {
-      stroke: #cccccc;
+      stroke: $euiBorderColor;
       fill: none;
       stroke-width: 1;
       shape-rendering: crispEdges;
     }
 
     .chart-border-highlight {
-      stroke: #6A6A6A;
+      stroke: $euiColorDarkShade;
       stroke-width: 2;
     }
     .chart-border-highlight:hover {
@@ -125,21 +124,21 @@
     }
 
     .area.bounds {
-      fill: rgba(50, 167, 194, 0.25);
+      fill: rgba(50, 167, 194, 0.25); // Needs variable
     }
 
     .values-line {
       fill: none;
-      stroke: #32a7c2;
+      stroke: #32a7c2; // Needs variable
       stroke-width: 2;
     }
 
     .values-line.forecast {
-      stroke: #cca300;
+      stroke: #cca300; // Needs variable
     }
 
     .values-dots circle {
-      fill: #32a7c2;
+      fill: #32a7c2; // Needs variable
       stroke-width: 0;
     }
 
@@ -148,7 +147,7 @@
     }
 
     .area.forecast {
-      fill: rgba(204, 163, 0, 0.25);
+      fill: rgba(204, 163, 0, 0.25); // Needs variable
     }
 
     .metric-value {
@@ -160,27 +159,27 @@
 
     .anomaly-marker {
       stroke-width: 1px;
-      stroke: #aaaaaa;
+      stroke: #aaaaaa; // Needs variable
     }
 
-    .anomaly-marker.critical {
-      fill: #fe5050;
+    .metric-value.critical {
+      fill: $mchColorCritical;
     }
 
-    .anomaly-marker.major {
-      fill: #ff7e00;
+    .metric-value.major {
+      fill: $mchColorMajor;
     }
 
-    .anomaly-marker.minor {
-      fill: #ffdd00;
+    .metric-value.minor {
+      fill: $mchColorMinor;
     }
 
-    .anomaly-marker.warning {
-      fill: #8bc8fb;
+    .metric-value.warning {
+      fill: $mchColorWarning;
     }
 
-    .anomaly-marker.low {
-      fill: #d2e9f7;
+    .metric-value.low {
+      fill: #d2e9f7; // Needs variable
     }
 
     .metric-value:hover,
@@ -193,8 +192,8 @@
 
     rect.scheduled-event-marker {
       stroke-width: 1px;
-      stroke: #999999;
-      fill: #cccccc;
+      stroke: $euiColorMediumShade;
+      fill: $euiColorLightShade;
       pointer-events: none;
     }
 
@@ -210,20 +209,20 @@
         line {
           fill: none;
           shape-rendering: crispEdges;
-          stroke: #cccccc;
+          stroke: $euiColorLightestShade;
         }
 
         rect {
-          fill: #f1f1f1;
+          fill: $euiColorLightestShade;
         }
       }
 
       .focus-zoom {
-        fill: #555555;
+        fill: $euiColorDarkShade;
 
         a {
           text {
-            fill: #328caa;
+            fill: $euiColorPrimary;
             cursor: pointer;
           }
         }
@@ -242,11 +241,11 @@
 
       .axis text {
         font-size: 10px;
-        fill: #333333;
+        fill: $euiTextColor;
       }
 
       .area.context {
-        fill: rgba(50, 167, 194, 0.25);
+        fill: rgba(50, 167, 194, 0.25); // Needs variable
       }
 
       .values-line {
@@ -254,7 +253,7 @@
       }
 
       .area.context.forecast {
-        fill: rgba(204, 163, 0, 0.25);
+        fill: rgba(204, 163, 0, 0.25); // Needs variable
       }
 
       .mask {
@@ -294,7 +293,7 @@
     }
 
     .brush .extent {
-      stroke: #6A6A6A;
+      stroke: $euiColorDarkShade;
       stroke-width: 2;
       cursor: move;
     }
@@ -304,7 +303,7 @@
     }
 
     .top-border {
-      fill: #FFFFFF;
+      fill: $euiColorEmptyShade;
     }
 
     foreignObject.brush-handle {
@@ -313,8 +312,8 @@
     }
 
     div.brush-handle-inner {
-      border: 1px solid #6A6A6A;
-      background-color: #CCCCCC;
+      border: 1px solid $euiColorDarkShade;
+      background-color: $euiColorLightShade;
       height: 70px;
       width: 10px;
       text-align: center;
@@ -327,16 +326,16 @@
     }
 
     div.brush-handle-inner-left {
-      border-radius: 4px 0px 0px 4px;
+      border-radius: $euiBorderRadius 0px 0px $euiBorderRadius;
     }
     div.brush-handle-inner-right {
-      border-radius: 0px 4px 4px 0px;
+      border-radius: 0px $euiBorderRadius $euiBorderRadius 0px;
     }
 
     rect.brush-handle {
       stroke-width: 1;
-      stroke: #6A6A6A;
-      fill: #CCCCCC;
+      stroke: $euiColorDarkShade;
+      fill: $euiColorLightShade;
       pointer-events: none;
     }
 
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/styles/main.less b/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/_forecasting_modal.scss
similarity index 80%
rename from x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/styles/main.less
rename to x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/_forecasting_modal.scss
index 549d2fff654ca..fe969a5800c57 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/styles/main.less
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/_forecasting_modal.scss
@@ -6,13 +6,14 @@
     width: 60px;
   }
 
+  // SASSTODO: Proper calcs
   .view-forecast-btn {
     width: 35px;
     min-width: 35px;
     height: 24px;
 
     .euiButton__content {
-      padding: 0px 8px;
+      padding: 0px $euiSizeS;
     }
   }
 }
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/_index.scss b/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/_index.scss
new file mode 100644
index 0000000000000..67985187665bd
--- /dev/null
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/_index.scss
@@ -0,0 +1 @@
+@import 'forecasting_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/index.js b/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/index.js
index 1231d3f205d6f..7f8ea9db3b501 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/index.js
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/forecasting_modal/index.js
@@ -6,5 +6,4 @@
 
 
 
-import './forecasting_modal_directive';
-import './styles/main.less';
+import './forecasting_modal_directive';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/index.js b/x-pack/plugins/ml/public/timeseriesexplorer/index.js
index 912b514c4b0c1..d291275bc9141 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/index.js
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/index.js
@@ -10,6 +10,5 @@ import './forecasting_modal';
 import './timeseriesexplorer_controller.js';
 import './timeseries_search_service.js';
 import './timeseries_chart_directive';
-import './styles/main.less';
 import 'plugins/ml/components/job_select_list';
 import 'plugins/ml/components/chart_tooltip';

From 8128f0aab6589348131a5c74e16601dabdef8f74 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 13 Nov 2018 14:07:44 -0800
Subject: [PATCH 2/6] replace and reworks less file changes in the gap period
 between original PR and master

---
 .../explorer_charts/_explorer_chart.scss      |  41 +++---
 ...ltip.less => _explorer_chart_tooltip.scss} |  12 +-
 .../explorer/explorer_charts/_index.scss      |   2 +
 ..._label.less => _explorer_chart_label.scss} |   0
 ....less => _explorer_chart_label_badge.scss} |   2 +-
 .../explorer_chart_label/_index.scss          |   2 +
 .../explorer_chart_label.js                   |   2 -
 .../explorer_chart_label_badge.js             |   2 -
 .../explorer_chart_distribution.js            |   2 -
 .../explorer_chart_info_tooltip.js            |   2 -
 .../styles/explorer_chart.less                | 124 ------------------
 .../styles/explorer_charts_container.less     | 110 ----------------
 x-pack/plugins/ml/public/jobs/_index.scss     |   1 +
 .../job_timepicker_modal/_index.scss          |   1 +
 .../main.less => _job_timepicker_modal.scss}  |  22 ++--
 .../_general_job_details.scss                 |   2 +-
 .../multi_metric/create_job/_create_job.scss  |  10 +-
 .../population/create_job/_create_job.scss    |   8 +-
 .../recognize/create_job/_create_jobs.scss    |  12 +-
 .../single_metric/create_job/_create_job.scss |   2 +-
 .../plugins/ml/public/settings/_settings.scss |   8 +-
 .../ml/public/settings/styles/main.less       |  22 ----
 22 files changed, 70 insertions(+), 319 deletions(-)
 rename x-pack/plugins/ml/public/explorer/explorer_charts/{styles/explorer_chart_info_tooltip.less => _explorer_chart_tooltip.scss} (75%)
 rename x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/{styles/explorer_chart_label.less => _explorer_chart_label.scss} (100%)
 rename x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/{styles/explorer_chart_label_badge.less => _explorer_chart_label_badge.scss} (98%)
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
 delete mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
 create mode 100644 x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_index.scss
 rename x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/{styles/main.less => _job_timepicker_modal.scss} (78%)
 delete mode 100644 x-pack/plugins/ml/public/settings/styles/main.less

diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart.scss b/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart.scss
index 3afeb197b2fb5..f354ed1ccf5ec 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart.scss
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart.scss
@@ -1,8 +1,5 @@
-// SASSTODO: This file has a lot of very specific colors and sizing that should be calculated
-ml-explorer-chart,
 .ml-explorer-chart-container {
-  display: block;
-  padding-bottom: $euiSize;
+  overflow: hidden;
 
   .ml-explorer-chart-svg {
     font-size: $euiSizeXS;
@@ -55,59 +52,73 @@ ml-explorer-chart,
     stroke-width: 2;
   }
 
-  .values-dots circle {
+  .values-dots circle,
+  .values-dots-circle {
     fill: #32a7c2;
     stroke-width: 0;
   }
 
+  .values-dots circle.values-dots-circle-blur {
+    fill: #aaa;
+  }
+
   .metric-value {
     opacity: 1;
     fill: #32a7c2;
   }
 
-  circle.metric-value {
+  .metric-value {
     opacity: 1;
     fill: transparent;
     stroke: #32a7c2;
     stroke-width: 0px;
   }
 
-  circle.anomaly-marker {
+  .anomaly-marker {
     stroke-width: 1px;
     stroke: #aaaaaa;
   }
 
-  circle.anomaly-marker:hover {
+  .anomaly-marker:hover {
     stroke-width: 6px;
     stroke: #32a7c2;
   }
 
-  circle.metric-value.critical {
+  .anomaly-marker.critical {
     fill: $mchColorCritical;
   }
 
-  circle.metric-value.major {
+  .anomaly-marker.major {
     fill: $mchColorMajor;
   }
 
-  circle.metric-value.minor {
+  .anomaly-marker.minor {
     fill: $mchColorMinor;
   }
 
-  circle.metric-value.warning {
+  .anomaly-marker.warning {
     fill: $mchColorWarning;
   }
 
-  circle.metric-value.low {
-    fill: #d2e9f7; // SASSTODO: Variablize
+  .anomaly-marker.low {
+    fill: #d2e9f7;
   }
 
-  circle.metric-value:hover {
+  .metric-value:hover,
+  .anomaly-marker:hover {
     stroke-width: 6px;
     stroke-opacity: 0.65;
   }
 }
 
+.ml-explorer-chart {
+  overflow: hidden;
+}
+
 .ml-explorer-chart-content-wrapper {
   height: 215px;
 }
+
+.ml-explorer-chart-axis-emphasis {
+  font-weight: bold;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart_info_tooltip.less b/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart_tooltip.scss
similarity index 75%
rename from x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart_info_tooltip.less
rename to x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart_tooltip.scss
index 0139ae1259478..d291ff3d3cade 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart_info_tooltip.less
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart_tooltip.scss
@@ -3,7 +3,7 @@
 }
 
 .ml-explorer-chart-description {
-  font-size: 12px;
+  font-size: $euiFontSizeXS;
   font-style: italic;
 }
 
@@ -16,18 +16,18 @@
   grid-template-columns: max-content auto;
 
   .mlDescriptionList__title {
-    color: #fff;
-    font-size: 12px;
+    color: $euiColorGhost;
+    font-size: $euiFontSizeXS;
     font-weight: normal;
     white-space: nowrap;
     grid-column-start: 1;
   }
 
   .mlDescriptionList__description {
-    color: #fff;
-    font-size: 12px;
+    color: $euiColorGhost;
+    font-size: $euiFontSizeXS;
     font-weight: bold;
-    padding-left: 8px;
+    padding-left: $euiSizeS;
     max-width: 256px;
     grid-column-start: 2;
   }
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/_index.scss b/x-pack/plugins/ml/public/explorer/explorer_charts/_index.scss
index 749e7fe7491b0..dfa03861e32f3 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/_index.scss
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/_index.scss
@@ -1,2 +1,4 @@
+@import 'components/explorer_chart_label/index';
 @import 'explorer_chart';
+@import 'explorer_chart_tooltip';
 @import 'explorer_charts_container';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label.scss
similarity index 100%
rename from x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
rename to x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label.scss
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss
similarity index 98%
rename from x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less
rename to x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss
index 80a8faa3af65e..b540efd6c77f7 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss
@@ -1,4 +1,4 @@
-/* 
+/*
   Resets the badge's default strong font-weight so it's possible
   to put custom emphasis inside the badge only on a part of it.
   Used in the Explorer Chart label badge to display an entity's
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/_index.scss b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/_index.scss
new file mode 100644
index 0000000000000..d112b834f09ad
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/_index.scss
@@ -0,0 +1,2 @@
+@import 'explorer_chart_label';
+@import 'explorer_chart_label_badge';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
index b62c219edbfc7..bea2a69329d81 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './styles/explorer_chart_label.less';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
index 133005c2226f4..c33dc2e8fa168 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './styles/explorer_chart_label_badge.less';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_distribution.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_distribution.js
index 2ab0d9ccf4b05..a443f72784527 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_distribution.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_distribution.js
@@ -9,8 +9,6 @@
  * the Machine Learning Explorer dashboard.
  */
 
-import './styles/explorer_chart.less';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_info_tooltip.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_info_tooltip.js
index 5cd4551f68af2..8c937767e215f 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_info_tooltip.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_info_tooltip.js
@@ -5,8 +5,6 @@
  */
 
 
-import './styles/explorer_chart_info_tooltip.less';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
deleted file mode 100644
index ab7452a3c0796..0000000000000
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
+++ /dev/null
@@ -1,124 +0,0 @@
-.ml-explorer-chart-container {
-  overflow: hidden;
-
-  .ml-explorer-chart-svg {
-    font-size: 12px;
-    font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial;
-
-    .line-chart {
-      rect {
-        fill: #FFFFFF;
-        opacity: 1;
-      }
-
-      rect.selected-interval {
-        fill: rgba(200, 200, 200, 0.1);
-        stroke: #6b6b6b;
-        stroke-width: 2px;
-        stroke-opacity: 0.8;
-      }
-
-      rect.scheduled-event-marker {
-        stroke-width: 1px;
-        stroke: #999999;
-        fill: #cccccc;
-        pointer-events: none;
-      }
-    }
-  }
-
-  .axis path, .axis line {
-    fill: none;
-    stroke: #cccccc;
-    shape-rendering: crispEdges;
-  }
-
-  .axis .tick line.ml-tick-emphasis {
-    stroke: rgba(0, 0, 0, 0.2);
-  }
-
-  .axis text {
-    fill: #888;
-  }
-
-  .axis .tick line {
-    stroke: rgba(0, 0, 0, 0.05);
-    stroke-width: 1px;
-  }
-
-  .values-line {
-    fill: none;
-    stroke: #32a7c2;
-    stroke-width: 2;
-  }
-
-  .values-dots circle,
-  .values-dots-circle {
-    fill: #32a7c2;
-    stroke-width: 0;
-  }
-
-  .values-dots circle.values-dots-circle-blur {
-    fill: #aaa;
-  }
-
-  .metric-value {
-    opacity: 1;
-    fill: #32a7c2;
-  }
-
-  .metric-value {
-    opacity: 1;
-    fill: transparent;
-    stroke: #32a7c2;
-    stroke-width: 0px;
-  }
-
-  .anomaly-marker {
-    stroke-width: 1px;
-    stroke: #aaaaaa;
-  }
-
-  .anomaly-marker:hover {
-    stroke-width: 6px;
-    stroke: #32a7c2;
-  }
-
-  .anomaly-marker.critical {
-    fill: #fe5050;
-  }
-
-  .anomaly-marker.major {
-    fill: #ff7e00;
-  }
-
-  .anomaly-marker.minor {
-    fill: #ffdd00;
-  }
-
-  .anomaly-marker.warning {
-    fill: #8bc8fb;
-  }
-
-  .anomaly-marker.low {
-    fill: #d2e9f7;
-  }
-
-  .metric-value:hover,
-  .anomaly-marker:hover {
-    stroke-width: 6px;
-    stroke-opacity: 0.65;
-  }
-}
-
-.ml-explorer-chart {
-  overflow: hidden;
-}
-
-.ml-explorer-chart-content-wrapper {
-  height: 215px;
-}
-
-.ml-explorer-chart-axis-emphasis {
-  font-weight: bold;
-}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
deleted file mode 100644
index 36f23bff87bf4..0000000000000
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
+++ /dev/null
@@ -1,110 +0,0 @@
-.explorer-charts {
-
-   ml-explorer-charts-container {
-
-    .row {
-      padding: 10px;
-    }
-
-    label {
-      font-size: 12px;
-    }
-
-    select {
-      font-size: 13px;
-      font-style: normal;
-    }
-
-    .chart-controls {
-      label {
-        padding: 0px 0px 10px 0px;
-      }
-    }
-
-    .no-results-item {
-      text-align: center;
-      padding-top: 10px;
-    }
-
-    .kuiButton.dropdown-toggle,
-    .open > .dropdown-toggle.kuiButton--primary:hover,
-    .open > .dropdown-toggle.kuiButton--primary:focus {
-      background: transparent;
-      border: none;
-      color: #444444;
-      padding: 0px 50px 0px 0px;
-    }
-
-    .dropdown-menu {
-      min-width: 120px;
-      font-size: 13px;
-    }
-
-    .dropdown-menu > li > a {
-      color: #444444;
-      text-decoration: none;
-    }
-
-    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:active {
-      color: #ffffff;
-    }
-
-    button.dropdown-toggle {
-      width: 110px;
-      text-align: left;
-      margin-bottom: 3px;
-
-      span {
-        font-size: 13px;
-      }
-    }
-
-    button.dropdown-toggle:hover,
-    button.dropdown-toggle:focus {
-      color: #444444;
-    }
-
-    .ml-anomaly-interim-result {
-      font-style:italic;
-      padding-bottom: 3px;
-    }
-
-    .ml-tablerow-expanded {
-      width: 100%;
-      padding: 5px 20px;
-      overflow: hidden;
-      font-size: 12px;
-
-      td {
-        padding: 0px 0px 2px 0px;
-      }
-
-      table tr>td:first-child {
-        padding-left: 2px;
-        vertical-align: top;
-      }
-
-      td:first-child {
-        width: 140px;
-      }
-
-      td:nth-child(2) {
-        padding-left: 5px;
-      }
-
-      // Hide filtering icons until that functionality is available.
-      i.fa-search-plus, i.fa-search-minus {
-        display: none;
-      }
-
-    }
-
-  }
-}
-
-/* wrapper class for the top right alert icon and view button */
-.ml-explorer-chart-icons {
-  padding-left: 5px;
-  /* counter-margin for EuiButtonEmpty's padding */
-  margin: 2px -8px 0 0;
-}
diff --git a/x-pack/plugins/ml/public/jobs/_index.scss b/x-pack/plugins/ml/public/jobs/_index.scss
index 2601b72829431..170c287e3d52d 100644
--- a/x-pack/plugins/ml/public/jobs/_index.scss
+++ b/x-pack/plugins/ml/public/jobs/_index.scss
@@ -1,5 +1,6 @@
 @import 'components/custom_url_editor/index';
 @import 'components/custom_url_editor_old/index';
+@import 'components/job_timepicker_modal/index';
 @import 'jobs_list/index'; // SASSTODO: Various EUI overwrites throughout this folder
 @import 'jobs_list_old/index';
 @import 'new_job/index'; // SASSTODO: Lots of files need rewrites in here
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_index.scss b/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_index.scss
new file mode 100644
index 0000000000000..6703e43a4e371
--- /dev/null
+++ b/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_index.scss
@@ -0,0 +1 @@
+@import 'job_timepicker_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/styles/main.less b/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_job_timepicker_modal.scss
similarity index 78%
rename from x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/styles/main.less
rename to x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_job_timepicker_modal.scss
index 53ee2b22bd73d..65c3eea2ebc69 100644
--- a/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/styles/main.less
+++ b/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_job_timepicker_modal.scss
@@ -1,6 +1,6 @@
 .job-timepicker-modal {
-  font-size: 14px;
-  padding:20px;
+  font-size: $euiFontSizeS;
+  padding:$euiSizeL;
   cursor: auto;
 
   h3 {
@@ -14,20 +14,20 @@
   }
 
   .ml-timepicker-contents {
-    margin-top: 5px;
+    margin-top: $euiSizeXS;
 
     .btn-info.active, .kuiButton--primary.active {
-      color: #ffffff;
+      color: $euiColorGhost;
       background-color: #154751;
       border-color: #134049;
       span {
-        color: #ffffff;
+        color: $euiColorGhost;
       }
     }
 
     .btn-default, .kuiButton--basic {
       background: transparent;
-      color: #444444;
+      color: $euiTextColor;
       border: 0px;
       box-shadow: none;
       text-shadow: none;
@@ -50,13 +50,13 @@
     padding: 0px 15px;
     min-width: 294px;
     width: 294px;
-    border-left: 1px solid #FFFFFF;
-    border-right: 1px solid #FFFFFF;
+    border-left: 1px solid $euiColorGhost;
+    border-right: 1px solid $euiColorGhost;
 
     .ml-timepicker {
       padding: 13px;
       padding-top: none;
-      border: 2px solid #ecf0f1;
+      border: $euiBorderThick;
       border-radius: 4px;
       border-radius: 4px;
       border-top-left-radius: 0px;
@@ -76,10 +76,10 @@
   }
 
   .ml-timepicker-left-border {
-    border-left: 1px solid #ecf0f1;
+    border-left: $euiBorderThin;
   }
 
   .ml-timepicker-right-border {
-    border-right: 1px solid #ecf0f1;
+    border-right: $euiBorderThin;
   }
 }
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_general_job_details.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_general_job_details.scss
index 1babc5b117680..02f9b519c1c3e 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_general_job_details.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/_general_job_details.scss
@@ -33,7 +33,7 @@
   }
 
   .chart-list-panel-population {
-    padding: 10px 0px;
+    padding: 10px;
   }
 
   .card {
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
index c94cd1989d572..0b85a380ff921 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
@@ -18,7 +18,7 @@
 
     // SASSTODO: Proper selector
     & > div {
-      border: 1px solid $euiColorLightestShade;
+      border: 1px solid $euiBorderColor;
       border-top: 0px;
     }
 
@@ -56,7 +56,7 @@
 
   .form-section {
     margin: 0px 0px 0px 0px;
-    border-bottom: 1px solid $euiColorLightestShade;
+    border-bottom: 1px solid $euiBorderColor;
     padding: $euiSizeS;
     overflow: hidden;
 
@@ -80,7 +80,7 @@
     }
 
     .help-text {
-      border: 1px solid $euiColorLightestShade;
+      border: 1px solid $euiBorderColor;
       padding: $euiSizeXS;
       background-color: $euiColorEmptyShade;
       border-radius: $euiBorderRadius;
@@ -90,7 +90,7 @@
 
   .form-section:last-of-type {
       margin: 0px;
-      border-bottom: 0px solid $euiColorLightestShade;
+      border-bottom: 0px solid $euiBorderColor;
     }
 
   // SASSTODO: Proper calcs
@@ -107,7 +107,7 @@
 .chart-container {
   // SASSTODO: Proper calcs
   .chart-loader {
-    border: 1px solid $euiColorLightestShade;
+    border: 1px solid $euiBorderColor;
     margin-left: 49px;
     display: flex;
     margin-bottom: 25px;
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
index 894f3ab645ba9..4ad173c432437 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
@@ -47,7 +47,7 @@
 
   .form-section {
     margin: 0px 0px 0px 0px;
-    border-bottom: 1px solid $euiColorLightestShade;
+    border-bottom: $euiBorderThin;
     padding: 10px;
     overflow: hidden;
 
@@ -70,7 +70,7 @@
     }
 
     .help-text {
-      border: 1px solid $euiColorLightestShade;
+      border: $euiBorderThin;
       padding: $euiSizeXS;
       background-color: $euiColorEmptyShade;
       border-radius: $euiBorderRadius;
@@ -80,7 +80,7 @@
 
   .form-section:last-of-type {
       margin: 0px;
-      border-bottom: 0px solid $euiColorLightestShade;
+      border-bottom: 0px solid $euiBorderColor;
     }
 
   // SASSTODO: Proper calc
@@ -143,7 +143,7 @@
 
 .chart-container {
   .chart-loader {
-    border: 1px solid $euiColorLightestShade;
+    border: $euiBorderThin;
     margin-left: 49px;
     display: flex;
     margin-bottom: 25px;
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss
index e9acadb297803..100acd586ea37 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss
@@ -18,7 +18,7 @@
 
     // SASSTODO: Proper selector
     & > div {
-      border: 1px solid $euiColorLightestShade;
+      border: 1px solid $euiBorderColor;
       border-top: 0px;
     }
 
@@ -70,7 +70,7 @@
       padding: $euiSizeXS;
 
       .job-container {
-        border: 1px solid $euiColorLightestShade;
+        border: 1px solid $euiBorderColor;
         // padding: 5px;
         margin: $euiSizeXS;
         border-radius: $euiBorderRadius;
@@ -102,7 +102,7 @@
         .results {
           flex-grow: 0;
           flex-shrink: 0;
-          border-left: 1px solid $euiColorLightShade;
+          border-left: 1px solid $euiBorderColor;
           background-color: $euiColorLightestShade;
           padding-top: $euiSizeXS;
 
@@ -146,7 +146,7 @@
 
   .form-section {
     margin: 0px 0px 0px 0px;
-    border-bottom: 1px solid $euiColorLightestShade;
+    border-bottom: 1px solid $euiBorderColor;
     padding: $euiSizeS;
     overflow: hidden;
 
@@ -161,7 +161,7 @@
 
     // SASSTODO: Proper selector
     .help-text {
-      border: 1px solid $euiColorLightestShade;
+      border: 1px solid $euiBorderColor;
       padding: 5px;
       background-color: $euiColorEmptyShade;
       border-radius: $euiSizeXS;
@@ -171,7 +171,7 @@
 
   .form-section:last-of-type {
     margin: 0px;
-    border-bottom: 0px solid $euiColorLightestShade;
+    border-bottom: 0px solid $euiBorderColor;
   }
 
   .form-section-collapsed {
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
index 726c88ca04f45..25fdcee21bb11 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
@@ -69,7 +69,7 @@
     margin-bottom: 20px;
 
     .chart-loader {
-      border: 1px solid $euiColorLightestShade;
+      border: 1px solid $euiBorderColor;
       margin-left: 49px;
       display: flex;
       margin-bottom: 52px;
diff --git a/x-pack/plugins/ml/public/settings/_settings.scss b/x-pack/plugins/ml/public/settings/_settings.scss
index 86bd894461cee..281e1156b79e1 100644
--- a/x-pack/plugins/ml/public/settings/_settings.scss
+++ b/x-pack/plugins/ml/public/settings/_settings.scss
@@ -4,8 +4,8 @@
 }
 
 ml-settings {
-  .management-panel {
-    .management-panel__link {
+  .mgtPanel {
+    .mgtPanel__link {
       font-size: $euiFontSizeM;
       line-height: $euiSizeXL;
       margin-left: $euiSizeXS;
@@ -15,6 +15,4 @@ ml-settings {
       color: $euiColorMediumShade;
     }
   }
-}
-
-
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/settings/styles/main.less b/x-pack/plugins/ml/public/settings/styles/main.less
deleted file mode 100644
index 2af8fb0ebdb8a..0000000000000
--- a/x-pack/plugins/ml/public/settings/styles/main.less
+++ /dev/null
@@ -1,22 +0,0 @@
-@import (reference) "~ui/styles/theme";
-@import (reference) "~ui/styles/variables";
-
-.disabled {
-  color: #999;
-  cursor: pointer;
-}
-
-ml-settings {
-  .mgtPanel {
-    .mgtPanel__link {
-      font-size: 17px;
-      line-height: 32px;
-      margin-left: 6px;
-    }
-    .disabled {
-      color: silver;
-    }
-  }
-}
-
-

From 7d3c9379ab491b1acac9617c0cbc3efa43a85182 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 13 Nov 2018 14:20:29 -0800
Subject: [PATCH 3/6] remove jobs list old content

---
 x-pack/plugins/ml/public/jobs/_index.scss     |   1 -
 .../ml/public/jobs/jobs_list_old/_index.scss  |   7 -
 .../jobs/jobs_list_old/_jobs_list_old.scss    | 147 ------
 .../_create_watch_modal.scss                  |  14 -
 .../create_watch_modal/_index.scss            |   1 -
 .../delete_job_modal/_delete_job_modal.scss   |  25 -
 .../delete_job_modal/_index.scss              |   1 -
 .../edit_job_modal/_edit_job_modal.scss       |  88 ----
 .../jobs_list_old/edit_job_modal/_index.scss  |   1 -
 .../edit_job_modal_controller.js              | 451 ------------------
 .../expanded_row/_expanded_row.scss           | 127 -----
 .../jobs_list_old/expanded_row/_index.scss    |   3 -
 .../forecasts_table/_forecasts_table.scss     |  44 --
 .../expanded_row/forecasts_table/_index.scss  |   1 -
 .../ml/public/jobs/jobs_list_old/index.js     |  17 -
 .../job_timepicker_modal/_index.scss          |   1 -
 .../_job_timepicker_modal.scss                |  92 ----
 17 files changed, 1021 deletions(-)
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_delete_job_modal.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/edit_job_modal_controller.js
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_forecasts_table.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/index.js
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss

diff --git a/x-pack/plugins/ml/public/jobs/_index.scss b/x-pack/plugins/ml/public/jobs/_index.scss
index 170c287e3d52d..2f0e5b64ee1a8 100644
--- a/x-pack/plugins/ml/public/jobs/_index.scss
+++ b/x-pack/plugins/ml/public/jobs/_index.scss
@@ -2,5 +2,4 @@
 @import 'components/custom_url_editor_old/index';
 @import 'components/job_timepicker_modal/index';
 @import 'jobs_list/index'; // SASSTODO: Various EUI overwrites throughout this folder
-@import 'jobs_list_old/index';
 @import 'new_job/index'; // SASSTODO: Lots of files need rewrites in here
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss
deleted file mode 100644
index 391b79762b840..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'jobs_list_old'; // SASSTODO: Needs work, standardize sizing, breakbpoints
-
-@import 'create_watch_modal/index';
-@import 'delete_job_modal/index';
-@import 'edit_job_modal/index'; // SASSTODO: Needs work, standarize sizing
-@import 'expanded_row/index'; // SASSTODO: Dangerous EUI overwrites
-@import 'job_timepicker_modal/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss
deleted file mode 100644
index 27f8c2fdc015e..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-ml-config-jobs {
-  font-size: $euiFontSizeS;
-
-  // SASSTODO: Make real selection
-  header {
-    margin: $euiSize 0;
-  }
-
-  .jobs-container {
-    width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    padding-left: $euiSize;
-    padding-right: $euiSize;
-
-    .euiCallOut--warning {
-      .fa-exclamation-triangle {
-        color: $euiColorWarning;
-      }
-    }
-  }
-
-  .jobs-stats-bar {
-
-    padding: $euiSize;
-    background-color: $euiColorLightestShade;
-
-    .stat {
-      margin-right: 10px;
-      .stat-value {
-        font-weight: bold
-      }
-    }
-  }
-
-  ml-paginated-table {
-
-    .job-system-info, .job-info, .job-warning, .job-error {
-      text-shadow: 1px 1px 1px $euiColorLightShade;
-      font-size: $euiFontSizeM;
-    }
-
-    .job-warning-small {
-      font-size: inherit;
-      margin-left: $euiSizeXS / 2;
-    }
-
-    .job-system-info {
-      color: $euiColorDarkShade;
-    }
-    .job-info {
-      color: $euiColorPrimary;
-    }
-    .job-warning {
-      color: $euiColorWarning;
-    }
-    .job-error {
-      color: $euiColorDanger;
-    }
-
-    // SASSTODO: Proper calc
-    .col-bucketspan {
-      width: 120px;
-    }
-
-    .col-info {
-      width: $euiSizeL;
-    }
-
-    // SASSTODO: Proper calc
-    .col-action {
-      width: 175px;
-    }
-    .actions {
-      white-space: nowrap;
-    }
-
-    .col-align-right {
-      text-align: right;
-      padding-right: $euiSizeL;
-    }
-
-    th.col-align-right {
-      padding-right: $euiSizeL !important;
-    }
-
-    // SASSTODO: Proper selector
-    i.job-tab-icon {
-      margin-left: $euiSizeXS;
-    }
-  }
-
-  // SASSTODO: Variabilize
-  .ml-mark {
-    background-color: $mchColorMinor;
-  }
-
-  .no-jobs-warning {
-    text-align: center;
-    font-size: $euiFontSizeM;
-  }
-
-  // SASSTODO: Proper calc
-  .jobs-count {
-    margin-top: -50px;
-  }
-
-  .ml-pre, .job-audit-list-container {
-    max-height: 500px; // SASSTODO: Proper calc
-    overflow: auto;
-    padding: $euiSizeS $euiSize;
-    font-size: $euiSizeXS;
-    line-height: 1.42857143; // SASSTODO: Huh?
-    color: $euiColorDarkShade;
-    background-color: $euiColorEmptyShade;
-    background-image: none;
-    border: $euiBorderThick;
-    border-radius: $euiBorderRadius;
-  }
-
-    // SASSTODO: Replace with EUI breakpoints
-  .ml-pre {
-    display: block;
-    unicode-bidi: embed;
-    font-family: monospace;
-    white-space: pre;
-
-    @media (min-width: 830px) {
-      max-width: 650px;
-    }
-    @media (min-width: 1030px) {
-      max-width: 850px;
-    }
-    @media (min-width: 1230px) {
-      max-width: 1050px;
-    }
-    @media (min-width: 1430px) {
-      max-width: 1250px;
-    }
-    @media (min-width: 1630px) {
-      max-width: 1450px;
-    }
-    @media (min-width: 1830px) {
-      max-width: 1550px;
-    }
-  }
-}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss
deleted file mode 100644
index 4770d853b3fda..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.create-watch-modal {
-  font-size: $euiFontSizeS;
-  padding: $euiSizeL;
-  cursor: auto;
-
-  // SASSTODO: Replace with proper selector
-  h3 {
-    margin-top: 0px;
-  }
-
-  .create-watch {
-    padding-bottom: 0px;
-  }
-}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_index.scss
deleted file mode 100644
index 94985b0264e70..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'create_watch_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_delete_job_modal.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_delete_job_modal.scss
deleted file mode 100644
index e3fdf1af1e5df..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_delete_job_modal.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.delete-job-modal {
-  padding: $euiSizeL;
-  cursor: auto;
-
-  // SASSTODO: Replace with proper selector
-  h3 {
-    margin-top: 0px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .status-item-list {
-    margin-bottom: $euiSize;
-
-    .status-item {
-      padding-top: $euiSizeS;
-      font-weight: $euiFontWeightBold;
-    }
-  }
-
-  .validation-error {
-    color: $euiColorDanger;
-    font-size: $euiFontSizeXS;
-  }
-}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_index.scss
deleted file mode 100644
index 5aed0c75efe1b..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'delete_job_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss
deleted file mode 100644
index a166ffd33f041..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-.edit-job-modal {
-  font-size: $euiFontSizeS;
-  padding: $euiSizeL;
-
-  // SASSTODO: Use a proper selector
-  h3 {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-bottom: $euiSizeS;
-
-    // SASSTODO: Use a proper selector
-    span[ml-info-icon] {
-      font-size: $euiFontSizeS;
-    }
- 	}
-
-  .tab_contents{
-    padding-top: $euiFontSizeL;
-
-    .detector_field_form {
-      background-color: $euiColorEmptyShade;
-      border: none;
-
-      // SASSTODO: Use a proper selector
-       & > div.field-cols {
-        flex: 1 1 1%;
-        margin-right: $euiSizeXS;
-      }
-    }
-
-    .custom-url {
-      display: flex;
-      position: relative;
-
-      // SASSTODO: Proper calcs
-      button.remove-button {
-        top: 19px;
-        position: absolute;
-        right: 6px;
-      }
-
-      .field-cols {
-        flex: 1 1 1%;
-      }
-
-      .form-group {
-        margin-right: $euiSizeXS;
-      }
-
-      // SASSTODO: Proper calcs
-      .time-input {
-        width: 90px;
-      }
-
-      // SASSTODO: Proper calcs, proper selector
-      textarea {
-        height: 60px;
-      }
-    }
-
-    // SASSTODO: Proper calcs
-    .custom-url {
-      padding-right: 60px;
-
-      button.test-url-button {
-        top: 19px;
-        position: absolute;
-        right: 36px;
-      }
-    }
-
-    .custom-url-editor {
-      border: $euiBorderColor;
-      border-radius: $euiBorderRadius;
-      padding: $euiSize;
-    }
-
-    div.validation-error {
-      color: $euiColorDanger;
-      font-size: $euiFontSizeXS;
-    }
-
-    // SASSTODO: Proper selector
-    small {
-      font-style: italic;
-    }
-  }
-}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_index.scss
deleted file mode 100644
index 02ff715f1006c..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'edit_job_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/edit_job_modal_controller.js b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/edit_job_modal_controller.js
deleted file mode 100644
index a7fe5ef4bc801..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/edit_job_modal_controller.js
+++ /dev/null
@@ -1,451 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-
-
-import _ from 'lodash';
-import 'plugins/ml/jobs/new_job/advanced/detectors_list_directive';
-import angular from 'angular';
-import numeral from '@elastic/numeral';
-
-import { calculateDatafeedFrequencyDefaultSeconds } from 'plugins/ml/../common/util/job_utils';
-import { parseInterval } from 'plugins/ml/../common/util/parse_interval';
-import { customUrlEditorService } from 'plugins/ml/jobs/components/custom_url_editor_old/custom_url_editor_service';
-import { isWebUrl } from 'plugins/ml/util/string_utils';
-import { newJobLimits } from 'plugins/ml/jobs/new_job/utils/new_job_defaults';
-import { mlJobService } from 'plugins/ml/services/job_service';
-import { mlMessageBarService } from 'plugins/ml/components/messagebar/messagebar_service';
-
-import { uiModules } from 'ui/modules';
-const module = uiModules.get('apps/ml');
-
-module.controller('MlEditJobModal', function (
-  $scope,
-  $modalInstance,
-  $modal,
-  $window,
-  params) {
-  const msgs = mlMessageBarService;
-  msgs.clear();
-  $scope.saveLock = false;
-  const refreshJob = params.pscope.refreshJob;
-
-  $scope.job = angular.copy(params.job);
-
-  const CUSTOM_URL_TIME_RANGE_AUTO = 'auto';
-
-  const bucketSpan = parseInterval($scope.job.analysis_config.bucket_span);
-  const jobLimits = newJobLimits();
-
-  $scope.ui = {
-    title: 'Edit ' + $scope.job.job_id,
-    currentTab: 0,
-    tabs: [
-      { index: 0, title: 'Job Details', hidden: false },
-      { index: 1, title: 'Detectors', hidden: false },
-      { index: 2, title: 'Datafeed', hidden: true },
-      { index: 3, title: 'Custom URLs', hidden: false }
-    ],
-    changeTab: function (tab) {
-      $scope.ui.currentTab = tab.index;
-    },
-    isDatafeed: false,
-    datafeedStopped: false,
-    datafeed: {
-      scrollSizeDefault: 1000,
-      queryDelayDefault: '60s',
-      frequencyDefault: calculateDatafeedFrequencyDefaultSeconds(bucketSpan.asSeconds()) + 's',
-    },
-    stoppingDatafeed: false,
-    validation: {
-      tabs: [{
-        index: 0,
-        valid: true,
-        checks: {
-          categorizationFilters: { valid: true },
-          modelMemoryLimit: { valid: true }
-        }
-      }]
-    },
-    editingNewCustomUrl: false,
-    modelMemoryLimitDefault: null
-  };
-
-  // extract datafeed settings
-  if ($scope.job.datafeed_config) {
-    const datafeedConfig = $scope.job.datafeed_config;
-    $scope.ui.isDatafeed = true;
-    $scope.ui.tabs[2].hidden = false;
-    $scope.ui.datafeedStopped = (!$scope.job.datafeed_config || $scope.job.datafeed_config.state === 'stopped');
-
-    $scope.ui.datafeed.queryText = angular.toJson(datafeedConfig.query, true);
-    $scope.ui.datafeed.queryDelayText = datafeedConfig.query_delay;
-    $scope.ui.datafeed.frequencyText = datafeedConfig.frequency;
-    $scope.ui.datafeed.scrollSizeText = datafeedConfig.scroll_size;
-  }
-
-  // Add an 'auto' time for any URLs created before the time_range setting was added.
-  if ($scope.job.custom_settings && $scope.job.custom_settings.custom_urls) {
-    $scope.job.custom_settings.custom_urls.forEach((customUrl) => {
-      if (customUrl.time_range === undefined) {
-        customUrl.time_range = CUSTOM_URL_TIME_RANGE_AUTO;
-      }
-    });
-  }
-
-  // if the job is old, it may not have analysis_limit
-  // so create an empty version
-  if ($scope.job.analysis_limits === undefined) {
-    $scope.job.analysis_limits  = {};
-  } else {
-    if ($scope.job.analysis_limits.model_memory_limit !== undefined) {
-      // otherwise, set the default mml to the job's current mml
-      $scope.ui.modelMemoryLimitDefault = $scope.job.analysis_limits.model_memory_limit;
-
-      // if there is a max mml set for the node, make sure the default mml is not greater than it.
-      if (jobLimits.max_model_memory_limit !== undefined) {
-        const maxBytes = numeral(jobLimits.max_model_memory_limit.toUpperCase()).value();
-        const mmlBytes = numeral($scope.job.analysis_limits.model_memory_limit.toUpperCase()).value();
-        if (mmlBytes > maxBytes) {
-          $scope.ui.modelMemoryLimitDefault = `${(maxBytes / numeral('1MB').value())}MB`;
-        }
-      }
-    }
-  }
-
-  $scope.editNewCustomUrl = function () {
-    $scope.ui.editingNewCustomUrl = true;
-  };
-
-  $scope.addCustomUrl = function (customUrl) {
-    if (!$scope.job.custom_settings) {
-      $scope.job.custom_settings = {};
-    }
-    if (!$scope.job.custom_settings.custom_urls) {
-      $scope.job.custom_settings.custom_urls = [];
-    }
-
-    $scope.job.custom_settings.custom_urls.push(customUrl);
-
-    $scope.ui.editingNewCustomUrl = false;
-  };
-
-  $scope.removeCustomUrl = function (index) {
-    $scope.job.custom_settings.custom_urls.splice(index, 1);
-  };
-
-  $scope.customUrlTimeRangeChanged = function (index) {
-    const customUrl = $scope.job.custom_settings.custom_urls[index];
-    const timeRange = customUrl.time_range;
-    const interval = parseInterval(timeRange);
-    customUrl.timeRangeError = (interval === null && timeRange !== CUSTOM_URL_TIME_RANGE_AUTO);
-  };
-
-  $scope.showTestLinkForCustomUrl = function (index) {
-    return isWebUrl($scope.job.custom_settings.custom_urls[index].url_value);
-  };
-
-  $scope.testCustomUrl = function (index) {
-    customUrlEditorService.getTestUrl(
-      $scope.job,
-      $scope.job.custom_settings.custom_urls[index])
-      .then((testUrl) => {
-        $window.open(testUrl, '_blank');
-      })
-      .catch((resp) => {
-        console.log('testCustomUrl() - error obtaining URL for test:', resp);
-      });
-  };
-
-  // add new categorization filter
-  $scope.addCategorizationFilter = function () {
-    if ($scope.job.analysis_config) {
-      if (!$scope.job.analysis_config.categorization_filters) {
-        $scope.job.analysis_config.categorization_filters = [];
-      }
-
-      $scope.job.analysis_config.categorization_filters.push('');
-    }
-  };
-
-  // remove selected categorization filter
-  $scope.removeCategorizationFilter = function (index) {
-    if ($scope.job.analysis_config && $scope.job.analysis_config.categorization_filters) {
-      $scope.job.analysis_config.categorization_filters.splice(index, 1);
-    }
-  };
-
-  // convenient function to stop the datafeed from inside the edit dialog
-  $scope.stopDatafeed = function () {
-    const datafeedId = $scope.job.datafeed_config.datafeed_id;
-    const jobId = $scope.job.job_id;
-    $scope.ui.stoppingDatafeed = true;
-    mlJobService.stopDatafeed(datafeedId, jobId)
-      .then((resp) => {
-        if (resp.stopped === true) {
-          $scope.ui.datafeedStopped = true;
-        }
-      });
-  };
-
-  function validateJob() {
-    let valid = true;
-    const tabs = $scope.ui.validation.tabs;
-    // reset validations
-    _.each(tabs,  (tab) => {
-      tab.valid = true;
-      _.each(tab.checks, (check, c) => {
-        tab.checks[c].valid = true;
-        tab.checks[c].message = '';
-      });
-    });
-
-    if ($scope.job.analysis_config.categorization_filters) {
-      let v = true;
-      _.each($scope.job.analysis_config.categorization_filters, (d) => {
-        try {
-          new RegExp(d);
-        } catch (e) {
-          v = false;
-        }
-
-        if (d === '' || v === false) {
-          tabs[0].checks.categorization_filters.valid = false;
-          valid = false;
-        }
-      });
-    }
-
-    const mml = $scope.job.analysis_limits.model_memory_limit;
-    const maxMml = jobLimits.max_model_memory_limit;
-    if (maxMml !== undefined && (mml !== undefined || mml !== '')) {
-      const maxBytes = numeral(maxMml.toUpperCase()).value();
-      const mmlBytes = numeral(mml.toUpperCase()).value();
-      if (mmlBytes > maxBytes) {
-        tabs[0].checks.modelMemoryLimit.valid = false;
-        const msg = `Model memory limit cannot be higher than the maximum value of ${maxMml}`;
-        tabs[0].checks.modelMemoryLimit.message = msg;
-        valid = false;
-      }
-    }
-    return valid;
-  }
-
-  $scope.save = function () {
-    msgs.clear();
-
-    if (validateJob() === false) {
-      return;
-    }
-
-    $scope.saveLock = true;
-
-    const jobId = $scope.job.job_id;
-    const jobData = {};
-    const datafeedData = {};
-
-    // if the job description has changed, add it to the jobData json
-    if ($scope.job.description !== params.job.description) {
-      jobData.description = $scope.job.description;
-    }
-
-    // if groups exist, add it to the jobData json
-    if (Array.isArray($scope.job.groups)) {
-      jobData.groups = $scope.job.groups;
-    }
-
-    // if the job's model_memory_limit has changed, add it to the jobData json
-    if ($scope.job.analysis_limits.model_memory_limit !== undefined) {
-      let mml = $scope.job.analysis_limits.model_memory_limit;
-      // if the user has wiped the mml, use the default value which is
-      // displayed greyed out in the field
-      if (mml === '') {
-        mml = $scope.ui.modelMemoryLimitDefault;
-      }
-
-      // has the data changed, did analysis_limits never exist for this job
-      if (params.job.analysis_limits === undefined ||
-        mml !== params.job.analysis_limits.model_memory_limit) {
-        jobData.analysis_limits = {
-          model_memory_limit: mml
-        };
-      }
-    }
-
-    // check each detector. if the description or filters have changed, add it to the jobData json
-    _.each($scope.job.analysis_config.detectors, (d, i) => {
-      let changes = 0;
-
-      const obj = {
-        detector_index: i,
-      };
-
-      if (d.detector_description !== params.job.analysis_config.detectors[i].detector_description) {
-        obj.description = d.detector_description;
-        changes++;
-      }
-
-      if (changes > 0) {
-        if (jobData.detectors === undefined) {
-          jobData.detectors = [];
-        }
-        jobData.detectors.push(obj);
-      }
-    });
-
-    // check each categorization filter. if any have changed, add all to the jobData json
-    if ($scope.job.analysis_config.categorization_filters) {
-      let doUpdate = false;
-
-      // array lengths are different
-      if ($scope.job.analysis_config.categorization_filters.length !== params.job.analysis_config.categorization_filters.length) {
-        doUpdate = true;
-      }
-
-      _.each($scope.job.analysis_config.categorization_filters, (d, i) => {
-        if (d !== params.job.analysis_config.categorization_filters[i]) {
-          doUpdate = true;
-        }
-      });
-
-      if (doUpdate) {
-        jobData.categorization_filters = $scope.job.analysis_config.categorization_filters;
-      }
-    }
-
-    // check custom settings
-    if ($scope.job.custom_settings) {
-      if ($scope.job.custom_settings.custom_urls &&
-         $scope.job.custom_settings.custom_urls.length) {
-
-        let doUpdate = false;
-
-        if (!params.job.custom_settings ||
-           !params.job.custom_settings.custom_urls ||
-           !params.job.custom_settings.custom_urls.length) {
-          // custom urls did not originally exist
-          doUpdate = true;
-        }
-        else if ($scope.job.custom_settings.custom_urls.length !== params.job.custom_settings.custom_urls.length) {
-          // if both existed but now have different lengths
-          doUpdate = true;
-        } else {
-          // if lengths are the same, check the contents match.
-          _.each($scope.job.custom_settings.custom_urls, (url, i) => {
-            if (url.url_name !== params.job.custom_settings.custom_urls[i].url_name ||
-               url.url_value !== params.job.custom_settings.custom_urls[i].url_value ||
-               url.time_range !== params.job.custom_settings.custom_urls[i].time_range) {
-              doUpdate = true;
-            }
-          });
-        }
-
-        if (doUpdate) {
-          jobData.custom_settings = $scope.job.custom_settings;
-          // Clear any error properties as these are just used by the modal.
-          $scope.job.custom_settings.custom_urls.forEach((customUrl) => {
-            delete customUrl.timeRangeError;
-          });
-        }
-      } else {
-        if (params.job.custom_settings ||
-           params.job.custom_settings.custom_urls ||
-           params.job.custom_settings.custom_urls.length) {
-          // if urls originally existed, but now don't
-          // clear the custom settings completely
-          jobData.custom_settings = {};
-        }
-      }
-    }
-
-    // check datafeed
-    if ($scope.job.datafeed_config && $scope.ui.datafeedStopped) {
-      const sch = $scope.ui.datafeed;
-
-      // set query text
-      if (sch.queryText === '') {
-        sch.queryText = '{"match_all":{}}';
-      }
-      let query = sch.queryText;
-      try {
-        query = JSON.parse(query);
-      } catch (e) {
-        console.log('save(): could not parse query JSON');
-      }
-
-      const originalQueryText = angular.toJson($scope.job.datafeed_config.query, true);
-      // only update if it has changed from the original
-      if (originalQueryText !== sch.queryText) {
-        datafeedData.query = query;
-      }
-
-      // only update fields if they have changed from the original
-      if (sch.queryDelayText !== $scope.job.datafeed_config.query_delay) {
-        datafeedData.query_delay = ((sch.queryDelayText === '' || sch.queryDelayText === null || sch.queryDelayText === undefined)
-          ? sch.queryDelayDefault : sch.queryDelayText);
-      }
-
-      if (sch.frequencyText !== $scope.job.datafeed_config.frequency) {
-        datafeedData.frequency = ((sch.frequencyText === '' || sch.frequencyText === null || sch.frequencyText === undefined)
-          ? sch.frequencyDefault : sch.frequencyText);
-      }
-
-      if (sch.scrollSizeText !== $scope.job.datafeed_config.scroll_size) {
-        datafeedData.scroll_size = ((sch.scrollSizeText === '' || sch.scrollSizeText === null || sch.scrollSizeText === undefined)
-          ? sch.scrollSizeDefault : sch.scrollSizeText);
-      }
-    }
-
-    // if anything has changed, post the changes
-    if (Object.keys(jobData).length) {
-      mlJobService.updateJob(jobId, jobData)
-        .then((resp) => {
-          if (resp.success) {
-            saveDatafeed();
-          } else {
-            saveFail(resp);
-          }
-        });
-    } else {
-      saveDatafeed();
-    }
-
-    function saveDatafeed() {
-      if (Object.keys(datafeedData).length) {
-        const datafeedId = $scope.job.datafeed_config.datafeed_id;
-        mlJobService.updateDatafeed(datafeedId, datafeedData)
-          .then((resp) => {
-            if (resp.success) {
-              saveComplete();
-            } else {
-              saveFail(resp);
-            }
-          });
-      } else {
-        saveComplete();
-      }
-    }
-
-    function saveComplete() {
-      $scope.saveLock = false;
-      msgs.clear();
-      refreshJob(jobId);
-
-      $modalInstance.close();
-    }
-
-    function saveFail(resp) {
-      $scope.saveLock = false;
-      msgs.error(resp.message);
-    }
-
-  };
-
-  $scope.cancel = function () {
-    msgs.clear();
-    $modalInstance.close();
-  };
-});
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss
deleted file mode 100644
index 89b5844a75c66..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-ml-job-list-expanded-row {
-  // SASSTODO: Proper selector
-  & > div {
-    padding: $euiSizeS;
-  }
-
-  // SASSTODO: Remove KUI
-  .kuiButton {
-    margin-top: $euiSizeS;
-    margin-bottom: $euiSizeS;
-  }
-
-  .tab_contents {
-    border: $euiBorderThin;
-    border-top: none;
-    padding: $euiSizeS;
-    border-bottom-right-radius: $euiBorderRadius;
-    border-bottom-left-radius: $euiBorderRadius;
-
-  // SASSTODO: Proper calc
-    .json-textarea {
-      height: 500px;
-    }
-  }
-
-  .job-audit-list-container {
-  // SASSTODO: Proper selectors
-    table {
-      td,th {
-        padding: $euiSizeXS / 2;
-        padding-right: $euiSizeS;
-      }
-    }
-  }
-
-  ml-job-item {
-    .ml_job_row {
-      border-bottom: $euiBorderThin;
-
-      // SASSTODO: Proper selectors
-      & > div {
-        padding: $euiSizeXS;
-      }
-
-      // SASSTODO: Proper selectors
-      & > div:nth-child(1) {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      // SASSTODO: Proper selectors
-      & > div:nth-child(2) {
-        word-break: break-all;
-      }
-    }
-  }
-
-      // SASSTODO: Proper selectors
-  .col-md-6:nth-child(1) {
-    padding-right: $euiSizeS;
-  }
-
-  // SASSTODO: Proper selectors
-  .col-md-6:nth-child(2) {
-    padding-left: $euiSizeS;
-  }
-
-  .ml_sub_heading {
-    font-weight: $euiFontWeightBold;
-    padding-left: $euiSizeXS;
-  }
-
-  .ml_job_section_container {
-    overflow: auto;
-    padding: $euiSizeXS $euiSize;
-    background-color: $euiColorLightestShade;
-    border: $euiBorderThick;
-    border-radius: $euiBorderRadius;
-    margin: $euiSizeXS;
-
-    // SASSTODO: Proper selectors
-    & > div {
-      margin-left: $euiSize;
-      margin-right: $euiSize;
-    }
-
-    .button-wrapper {
-      margin-left: -$euiSizeXL;
-      padding-left: $euiSizeXL;
-    }
-
-    // SASSTODO: Dangerous EUI overwrites
-    table.euiTable {
-      background-color: transparent;
-
-      .euiTableRow:first-child {
-        .euiTableRowCell {
-          border-top: 0px;
-        }
-      }
-
-      .euiTableRow:last-child {
-        .euiTableRowCell {
-          border-bottom: 0px;
-        }
-      }
-
-      tr.euiTableRow {
-        .euiTableRowCell {
-          background-color: transparent;
-          vertical-align: top;
-          border-bottom: 1px solid $euiColorLightestShade;
-
-          .euiTableCellContent__text {
-            word-wrap: break-word;
-          }
-        }
-      }
-    }
-  }
-
-  ml-job-item:last-child {
-    .ml_job_row {
-      border-bottom: none;
-    }
-  }
-}
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_index.scss
deleted file mode 100644
index c6d214f527dd8..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'expanded_row';
-
-@import 'forecasts_table/index'; // SASSTODO: Dangerous EUI overwrites
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_forecasts_table.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_forecasts_table.scss
deleted file mode 100644
index 6c26f8bfaf93d..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_forecasts_table.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-ml-forecasts-table {
-  // SASSTODO: Dangerous EUI overwrites
-  .euiTable {
-    // Remove this whole block when Jobs List is all EUI.
-    font-size: $euiFontSizeXS;
- 
-     th {
-       span {
-         font-size: $euiFontSizeXS;
-         font-family: $euiFontFamily;
-         font-weight: $euiFontWeightBold;
-       }
- 
-     }
- 
-     tr {
-       td {
-         .euiTableCellContent {
-           padding-top: $euiSizeXS;
-           padding-bottom: $euiSizeXS;
-         }
-       }
-     }
-   }
- 
-   // SASSTODO: Proper calcs
-   table tr th:last-child,
-   table tr td:last-child {
-     width: 60px;
-   }
- 
- 
-   // SASSTODO: Dangerous EUI overwrites
-   .view-forecast-btn {
-     width: 35px;
-     min-width: 35px;
-     height: $euiSizeXL;
- 
-     .euiButton__content {
-       padding: 0px $euiSizeS;
-     }
-   }
- }
- 
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_index.scss
deleted file mode 100644
index 501a031cab8d0..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'forecasts_table';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/index.js b/x-pack/plugins/ml/public/jobs/jobs_list_old/index.js
deleted file mode 100644
index e1046c49efedf..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-
-
-import './jobs_list_controller';
-import './edit_job_modal';
-import './job_timepicker_modal';
-import './delete_job_modal';
-import './create_watch_modal';
-import './expanded_row';
-import 'ui/directives/confirm_click';
-import 'plugins/ml/components/paginated_table';
-import 'plugins/ml/components/validate_job';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_index.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_index.scss
deleted file mode 100644
index 6703e43a4e371..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'job_timepicker_modal';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss b/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss
deleted file mode 100644
index 0c6d85bb01c3f..0000000000000
--- a/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-.job-timepicker-modal {
-  font-size: $euiFontSizeS;
-  padding: $euiSizeL;
-  cursor: auto;
-
-  // SASSTODO: Proper selector
-  h3 {
-    @include euiTextTruncate;
-  }
-
-  // SASSTODO: Proper calc
-  .date_container {
-    width: 200px;
-    display: inline-block;
-  }
-
-  .ml-timepicker-contents {
-    margin-top: $euiSizeXS;
-
-    // SASSTODO: Variabilize this coloring, replace with an EUI button
-    .btn-info.active, .kuiButton--primary.active {
-      color: $euiColorEmptyShade;
-      background-color: #154751;
-      border-color: #134049;
-
-      // SASSTODO: Proper selector
-      span {
-        color: $euiColorEmptyShade;
-      }
-    }
-
-    .btn-default, .kuiButton--basic {
-      background: transparent;
-      color: $euiColorDarkShade;
-      border: 0px;
-      box-shadow: none;
-      text-shadow: none;
-    }
-
-    // SASSTODO: Proper selector
-    [ml-time-input] {
-      text-align: center;
-    }
-
-    // SASSTODO: Proper selector
-    label {
-      display: block;
-    }
-  }
-
-  .ml-timepicker-modes {
-    text-transform: capitalize;
-  }
-
-  // SASSTODO: Needs proper calcs throughout 
-  .ml-timepicker-section {
-    float: left;
-    padding: 0px $euiSize;
-    width: 50%;
-    border-left: 1px solid $euiColorEmptyShade;
-    border-right: 1px solid $euiColorEmptyShade;
-
-    .ml-timepicker {
-      padding: 13px;
-      padding-top: none;
-      border: $euiBorderThick;
-      border-radius: $euiBorderRadius;
-      border-radius: $euiBorderRadius;
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
-      border-top: none;
-
-      .btn, .kuiButton {
-        padding-left: $euiSizeS;
-        padding-right: $euiSizeS;
-      }
-    }
-
-    .ml-timepicker-radio-bottom {
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-  }
-
-  .ml-timepicker-left-border {
-    border-left: $euiBorderThin;
-  }
-
-  .ml-timepicker-right-border {
-    border-right: $euiBorderThin;
-  }
-}
\ No newline at end of file

From 5a21ff88de3987588ab51c9245f579323d4943c6 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 14 Nov 2018 12:25:46 -0800
Subject: [PATCH 4/6] remove paginated table

---
 .../components/paginated_table/_index.scss    |   1 -
 .../paginated_table/_paginated_table.scss     |  52 --------
 .../paginated_table/paginated_table.js        | 111 ------------------
 x-pack/plugins/ml/public/index.scss           |   1 -
 4 files changed, 165 deletions(-)
 delete mode 100644 x-pack/plugins/ml/public/components/paginated_table/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss
 delete mode 100644 x-pack/plugins/ml/public/components/paginated_table/paginated_table.js

diff --git a/x-pack/plugins/ml/public/components/paginated_table/_index.scss b/x-pack/plugins/ml/public/components/paginated_table/_index.scss
deleted file mode 100644
index f55bedcccf3d0..0000000000000
--- a/x-pack/plugins/ml/public/components/paginated_table/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'paginated_table';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss b/x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss
deleted file mode 100644
index 411ed148269be..0000000000000
--- a/x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-ml-paginated-table {
-
-  .col-expand-arrow {
-    width: 10px;
-  }
-
-  .table-header-button {
-    border: none;
-    background: none;
-    padding: 0;
-  }
-
-  // SASSTODO: Needs proper selector
-  table th {
-    font-weight: $euiFontWeightBold;
-    text-align: left;
-  }
-
-  // SASSTODO: Needs proper selector
-  table th button.fa-sort {
-    color: $euiColorLightShade;
-  }
-
-  tr.row-expand td:hover,
-  tr.row-expand td:hover td {
-    background-color: $euiColorEmptyShade;
-  }
-
-  .discover-table-open-button {
-    background-color: $euiColorEmptyShade;
-    border: none;
-    min-width: 20px;
-  }
-  .discover-table-open-button:focus {
-  	outline: none;
-  }
-
-  paginate-controls {
-
-    // SASSTODO: Looks like an EUI overwrite, pixels values need a proper calc
-    button.euiPaginationButton {
-      padding: 1px 7px 2px;
-    }
-
-  // SASSTODO: Needs proper selector
-    label {
-      @include euiFontSizeXS;
-
-      font-weight: $euiFontWeightBold;
-    }
-  }
-}
diff --git a/x-pack/plugins/ml/public/components/paginated_table/paginated_table.js b/x-pack/plugins/ml/public/components/paginated_table/paginated_table.js
deleted file mode 100644
index a1aed2ca2acbd..0000000000000
--- a/x-pack/plugins/ml/public/components/paginated_table/paginated_table.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-
-
-// copy of Kibana's ui/public/paginated_table/paginated_table.js
-// but with the one-time binding removed from the scope columns object
-// in the paginated_table.html template, to allow dynamic changes to
-// the list of columns shown in the table.
-
-import './row';
-
-import 'ui/directives/paginate';
-import 'ui/styles/pagination.less';
-import _ from 'lodash';
-import template from './paginated_table.html';
-
-import { uiModules } from 'ui/modules';
-const module = uiModules.get('apps/ml');
-
-module.directive('mlPaginatedTable', function ($filter) {
-  const orderBy = $filter('orderBy');
-
-  return {
-    restrict: 'E',
-    template,
-    transclude: true,
-    scope: {
-      rows: '=',
-      columns: '=',
-      perPage: '=?',
-      sortHandler: '=?',
-      showSelector: '=?'
-    },
-    controllerAs: 'mlPaginatedTable',
-    controller: function ($scope) {
-      const self = this;
-      self.sort = {
-        columnIndex: null,
-        direction: null
-      };
-
-      self.sortColumn = function (colIndex) {
-        const col = $scope.columns[colIndex];
-
-        if (!col) return;
-        if (col.sortable === false) return;
-
-        let sortDirection;
-
-        if (self.sort.columnIndex !== colIndex) {
-          sortDirection = 'asc';
-        } else {
-          const directions = {
-            null: 'asc',
-            'asc': 'desc',
-            'desc': null
-          };
-          sortDirection = directions[self.sort.direction];
-        }
-
-        self.sort.columnIndex = colIndex;
-        self.sort.direction = sortDirection;
-        self._setSortGetter(colIndex);
-      };
-
-      self._setSortGetter = function (index) {
-        if (_.isFunction($scope.sortHandler)) {
-          // use custom sort handler
-          self.sort.getter = $scope.sortHandler(index);
-        } else {
-          // use generic sort handler
-          self.sort.getter = function (row) {
-            const value = row[index];
-            if (value && value.value !== undefined && value.value !== null) {
-              if (typeof value.value === 'function') {
-                return value.value();
-              } else {
-                return value.value;
-              }
-            } else {
-              return value;
-            }
-          };
-        }
-      };
-
-      // update the sortedRows result
-      $scope.$watchMulti([
-        'rows',
-        'columns',
-        '[]mlPaginatedTable.sort'
-      ], function resortRows() {
-        if (!$scope.rows || !$scope.columns) {
-          $scope.sortedRows = false;
-          return;
-        }
-
-        const sort = self.sort;
-        if (sort.direction == null) {
-          $scope.sortedRows = $scope.rows.slice(0);
-        } else {
-          $scope.sortedRows = orderBy($scope.rows, sort.getter, sort.direction === 'desc');
-        }
-      });
-    }
-  };
-});
diff --git a/x-pack/plugins/ml/public/index.scss b/x-pack/plugins/ml/public/index.scss
index b07593e571110..db496606f02ac 100644
--- a/x-pack/plugins/ml/public/index.scss
+++ b/x-pack/plugins/ml/public/index.scss
@@ -44,7 +44,6 @@
   @import 'components/loading_indicator/index'; // SASSTODO: This component should be replaced with EuiLoadingSpinner
   @import 'components/messagebar/index';
   @import 'components/nav_menu/index';
-  @import 'components/paginated_table/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
 
   // Hacks are last so they can ovwerite anything above if needed

From fb6c7b045676ba374ce9bbacdd1486f1b7d37329 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 14 Nov 2018 15:46:33 -0800
Subject: [PATCH 5/6] feedback

---
 .../components/jobs_list_view/_jobs_list_view.scss     |  1 +
 .../public/timeseriesexplorer/_timeseriesexplorer.scss | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss
index 76ee25f2f25dd..64ba582f30c03 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss
@@ -2,6 +2,7 @@
 .actions-bar {
   min-height: 60px;
   display: flex;
+  align-items: center;
 
   & > div:nth-child(1) {
     width: 300px;
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss b/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss
index 81544596f7e52..7b5b74ce1005f 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss
@@ -162,23 +162,23 @@
       stroke: #aaaaaa; // Needs variable
     }
 
-    .metric-value.critical {
+    .anomaly-marker.critical {
       fill: $mchColorCritical;
     }
 
-    .metric-value.major {
+    .anomaly-marker.major {
       fill: $mchColorMajor;
     }
 
-    .metric-value.minor {
+    .anomaly-marker-value.minor {
       fill: $mchColorMinor;
     }
 
-    .metric-value.warning {
+    .anomaly-marker.warning {
       fill: $mchColorWarning;
     }
 
-    .metric-value.low {
+    .anomaly-marker.low {
       fill: #d2e9f7; // Needs variable
     }
 

From 91c08fe1ee482902e0f1587c9ea15e1f99bed6d1 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 14 Nov 2018 18:06:44 -0800
Subject: [PATCH 6/6] modal fix

---
 .../components/job_timepicker_modal/_job_timepicker_modal.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_job_timepicker_modal.scss b/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_job_timepicker_modal.scss
index 65c3eea2ebc69..2c8158e27f197 100644
--- a/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_job_timepicker_modal.scss
+++ b/x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/_job_timepicker_modal.scss
@@ -1,6 +1,6 @@
 .job-timepicker-modal {
   font-size: $euiFontSizeS;
-  padding:$euiSizeL;
+  padding:$euiSize;
   cursor: auto;
 
   h3 {