diff --git a/x-pack/plugins/ml/index.js b/x-pack/plugins/ml/index.js index cca3e97bdcd8a..20e2b8fa65f5e 100644 --- a/x-pack/plugins/ml/index.js +++ b/x-pack/plugins/ml/index.js @@ -40,6 +40,7 @@ export const ml = (kibana) => { euiIconType: 'machineLearningApp', main: 'plugins/ml/app', }, + styleSheetPaths: `${__dirname}/public/index.scss`, hacks: ['plugins/ml/hacks/toggle_app_link_in_nav'], home: ['plugins/ml/register_feature'] }, 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 ad76c56cfdf19..a09cc99e393b3 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 a27b594f1aac2..0ad4c3206f223 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 @@ -19,8 +19,6 @@ import { EuiHealth, } from '@elastic/eui'; -import './styles/main.less'; - import { getSeverityColor } from 'plugins/ml/../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 740e82b3d976e..05b7678b63263 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
a value of ${minValFormatted}`; } - contents = `
${contents}
`; + contents = `
${contents}
`; 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/styles/main.less b/x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss similarity index 56% rename from x-pack/plugins/ml/public/components/paginated_table/styles/main.less rename to x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss index d9c93dabcaadc..411ed148269be 100644 --- a/x-pack/plugins/ml/public/components/paginated_table/styles/main.less +++ b/x-pack/plugins/ml/public/components/paginated_table/_paginated_table.scss @@ -1,5 +1,3 @@ -@import "~ui/styles/variables"; - ml-paginated-table { .col-expand-arrow { @@ -12,22 +10,24 @@ ml-paginated-table { padding: 0; } + // SASSTODO: Needs proper selector table th { - font-weight: bold; + font-weight: $euiFontWeightBold; text-align: left; } + // SASSTODO: Needs proper selector table th button.fa-sort { - color: @table-sort-color; + color: $euiColorLightShade; } tr.row-expand td:hover, tr.row-expand td:hover td { - background-color: #FFFFFF; + background-color: $euiColorEmptyShade; } .discover-table-open-button { - background-color: #FFFFFF; + background-color: $euiColorEmptyShade; border: none; min-width: 20px; } @@ -36,14 +36,17 @@ ml-paginated-table { } 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 { - line-height: 1.5; - font-size: 12px; - font-weight: bold; + @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 index 6aa1d2b7d6653..a1aed2ca2acbd 100644 --- a/x-pack/plugins/ml/public/components/paginated_table/paginated_table.js +++ b/x-pack/plugins/ml/public/components/paginated_table/paginated_table.js @@ -13,7 +13,6 @@ import './row'; -import './styles/main.less'; import 'ui/directives/paginate'; import 'ui/styles/pagination.less'; import _ from 'lodash'; 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 54% rename from x-pack/plugins/ml/public/datavisualizer/styles/main.less rename to x-pack/plugins/ml/public/datavisualizer/_datavisualizer.scss index 64595835e608d..fa3f161839c00 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; } .datavisualizer-sidebar { @@ -33,28 +28,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; } } @@ -72,6 +69,7 @@ margin-left: 10px; } + // SASSTODO: Make a proper selector label { display: inline; } @@ -80,32 +78,32 @@ .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; - 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 { @@ -117,20 +115,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 new file mode 100644 index 0000000000000..e93ea2846d5d5 --- /dev/null +++ b/x-pack/plugins/ml/public/datavisualizer/_index.scss @@ -0,0 +1 @@ +@import 'datavisualizer'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/datavisualizer/index.js b/x-pack/plugins/ml/public/datavisualizer/index.js index e94162faefcc6..c4b35e267d300 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 './datavisualizer_controller'; import 'plugins/ml/components/data_recognizer'; import 'plugins/ml/components/field_data_card'; 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..1b7d8b43044f1 --- /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: $euiEmptyShade; + 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.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js index c3cdd110a2e6e..d1963273c2b2f 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js +++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.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 45f2ae31cac2e..4834298e2b3a3 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 new file mode 100644 index 0000000000000..87db02f4ec455 --- /dev/null +++ b/x-pack/plugins/ml/public/index.scss @@ -0,0 +1,50 @@ +// Should import both the EUI constants and any Kibana ones that are considered global +@import 'ui/public/styles/styling_constants'; + +// ML needs EUI card styling till it fully adopts React components +@import '@elastic/eui/src/components/panel/variables'; +@import '@elastic/eui/src/components/panel/mixins'; + +// ML has it's own variables for coloring +@import 'variables'; + +// 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 '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/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..ee7b54e77861b --- /dev/null +++ b/x-pack/plugins/ml/public/jobs/_index.scss @@ -0,0 +1,6 @@ +@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/styles/main.less b/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_custom_url_editor.scss similarity index 80% rename from x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/styles/main.less rename to x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_custom_url_editor.scss index da350e8cab5b3..3bfb728a374cb 100644 --- a/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/styles/main.less +++ b/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/_custom_url_editor.scss @@ -1,5 +1,4 @@ -@import (reference) "~ui/styles/variables"; - +// SASSTODO: Some specific sizing in here looks dangerous to touch .ml-custom-url-manager { .add-url-input { display: block; @@ -14,7 +13,7 @@ } label.disabled { - color: @globalColorLightGray; + color: $euiColorLightShade; } .entity-input { @@ -33,7 +32,7 @@ } select { - height: 32px; + height: $euiSizeXXL; } .form-group { @@ -41,5 +40,4 @@ } } -} - +} \ 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/custom_url_editor_old/index.js b/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/index.js index 42ee1f0f53dde..ec8c56c080bde 100644 --- a/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/index.js +++ b/x-pack/plugins/ml/public/jobs/components/custom_url_editor_old/index.js @@ -7,5 +7,4 @@ -import './custom_url_editor_directive'; -import './styles/main.less'; +import './custom_url_editor_directive'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/jobs/index.js b/x-pack/plugins/ml/public/jobs/index.js index d1f7823802461..ef887ff0259b2 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 './jobs_list_old'; import './new_job/advanced'; 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/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/_jobs_list.scss similarity index 58% rename from x-pack/plugins/ml/public/jobs/jobs_list/styles/main.less rename to x-pack/plugins/ml/public/jobs/jobs_list/_jobs_list.scss index f203d785c603c..d94bb5d678279 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list/styles/main.less +++ b/x-pack/plugins/ml/public/jobs/jobs_list/_jobs_list.scss @@ -1,11 +1,7 @@ .job-management { - padding: 20px; + padding: $euiSizeL; } .new-job-button-container { float: right; -} - -.clear { - clear: both; -} +} \ 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 297a27c869384..7481df7cd0f59 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, } from '@elastic/eui'; @@ -101,6 +99,7 @@ export class JobFilterBar extends Component { }} filters={filters} onChange={this.onChange} + className="mchJobFilterBar" /> ); } 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 7687ac372308c..456809dfd0e99 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 77% 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 6ecb6002da3fa..6f67813a2a60d 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 { height: 60px; display: flex; @@ -5,6 +6,4 @@ & > div:nth-child(1) { width: 300px; } - & > div:nth-child(2) { - } } 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 d5594933cf86a..d2a1adccf9658 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 7f43d65bd1596..392a78629a588 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 75% 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 c298fdd70aea1..004deb285e3b8 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,7 +1,9 @@ + // SASSTODO: This looks like it needs some rewriting for all the pixel values .multi-select-actions { padding: 10px 0px; display: inline-block; + // SASSTODO: This looks like it should just be an EUI title .jobs-selected-title { display: inline-block; font-weight: normal; @@ -16,7 +18,7 @@ .actions-border, .actions-border-large { height: 20px; - border-right: 1px solid #D9D9D9; + border-right: $euiBorderThin; width: 1px; display: inline-block; vertical-align: middle; @@ -33,13 +35,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 51% 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 7990fbd273591..254b7317805da 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,23 +6,25 @@ .group-item { line-height: 18px; padding: 6px 0px; - border-bottom: 1px solid #eee; + border-bottom: $euiBorderThin; cursor: pointer; .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 51b1c573d9fd8..30f58aeabaa71 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 @@ -14,8 +14,6 @@ import { EuiIcon, } 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 fbaab1584fc5f..f83a9679c791f 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 @@ -24,7 +24,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 ae521f1a4f9dd..4e55173bc549e 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) { @@ -25,9 +24,9 @@ export class MultiJobActions extends Component { render() { const s = (this.props.selectedJobs.length > 1) ? 's' : ''; return ( -
+ {this.props.selectedJobs.length > 0 && - +
{this.props.selectedJobs.length} job{s} selected
@@ -44,9 +43,9 @@ export class MultiJobActions extends Component { showDeleteJobModal={this.props.showDeleteJobModal} refreshJobs={this.props.refreshJobs} /> - +
} -
+ ); } } 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" > - Create new job ); 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 b44f2ca1fc196..9bdd5fff6d8ec 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/jobs.js b/x-pack/plugins/ml/public/jobs/jobs_list/jobs.js index 7e3c8516030b2..1d913a54d3b49 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list/jobs.js +++ b/x-pack/plugins/ml/public/jobs/jobs_list/jobs.js @@ -5,7 +5,6 @@ */ -import './styles/main.less'; import { NewJobButton } from './components/new_job_button'; import { JobsListView } from './components/jobs_list_view'; import { JobStatsBar } from './components/jobs_stats_bar'; 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/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss similarity index 56% rename from x-pack/plugins/ml/public/jobs/jobs_list_old/styles/main.less rename to x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss index 3bff856017a7c..27f8c2fdc015e 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/styles/main.less +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/_jobs_list_old.scss @@ -1,32 +1,32 @@ ml-config-jobs { - font-size: 14px; + font-size: $euiFontSizeS; + // SASSTODO: Make real selection header { - margin: 15px 0; + margin: $euiSize 0; } .jobs-container { width: 100%; margin-right: auto; margin-left: auto; - padding-left: 15px; - padding-right: 15px; + padding-left: $euiSize; + padding-right: $euiSize; .euiCallOut--warning { .fa-exclamation-triangle { - color: #fba740; + color: $euiColorWarning; } } } .jobs-stats-bar { - padding: 14px; - background-color: #EFF0F1; + padding: $euiSize; + background-color: $euiColorLightestShade; .stat { margin-right: 10px; - .stat-label {} .stat-value { font-weight: bold } @@ -36,36 +36,38 @@ ml-config-jobs { ml-paginated-table { .job-system-info, .job-info, .job-warning, .job-error { - text-shadow: 1px 1px 1px #BBBBBB; - font-size: 16px; + text-shadow: 1px 1px 1px $euiColorLightShade; + font-size: $euiFontSizeM; } .job-warning-small { font-size: inherit; - margin-left:2px; + margin-left: $euiSizeXS / 2; } .job-system-info { - color: gray; + color: $euiColorDarkShade; } .job-info { - color: dodgerblue; + color: $euiColorPrimary; } .job-warning { - color: #fba740; + color: $euiColorWarning; } .job-error { - color: #fe5050; + color: $euiColorDanger; } + // SASSTODO: Proper calc .col-bucketspan { width: 120px; } .col-info { - width: 24px; + width: $euiSizeL; } + // SASSTODO: Proper calc .col-action { width: 175px; } @@ -75,44 +77,48 @@ ml-config-jobs { .col-align-right { text-align: right; - padding-right: 20px; + padding-right: $euiSizeL; } th.col-align-right { - padding-right: 25px !important; + padding-right: $euiSizeL !important; } + // SASSTODO: Proper selector i.job-tab-icon { - margin-left: 5px; + margin-left: $euiSizeXS; } } + // SASSTODO: Variabilize .ml-mark { - background-color: #fce571; + background-color: $mchColorMinor; } .no-jobs-warning { text-align: center; - font-size: 17px; + font-size: $euiFontSizeM; } + // SASSTODO: Proper calc .jobs-count { margin-top: -50px; } .ml-pre, .job-audit-list-container { - max-height: 500px; + max-height: 500px; // SASSTODO: Proper calc overflow: auto; - padding: 5px 15px; - font-size: 13px; - line-height: 1.42857143; - color: #444444; - background-color: #ffffff; + padding: $euiSizeS $euiSize; + font-size: $euiSizeXS; + line-height: 1.42857143; // SASSTODO: Huh? + color: $euiColorDarkShade; + background-color: $euiColorEmptyShade; background-image: none; - border: 2px solid #ecf0f1; - border-radius: 4px; + border: $euiBorderThick; + border-radius: $euiBorderRadius; } + // SASSTODO: Replace with EUI breakpoints .ml-pre { display: block; unicode-bidi: embed; diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss similarity index 56% rename from x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/styles/main.less rename to x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss index a0d9440fb587e..4770d853b3fda 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/styles/main.less +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/_create_watch_modal.scss @@ -1,8 +1,9 @@ .create-watch-modal { - font-size: 14px; - padding:20px; + font-size: $euiFontSizeS; + padding: $euiSizeL; cursor: auto; + // SASSTODO: Replace with proper selector h3 { margin-top: 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/create_watch_modal/index.js b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/index.js index 6f5a381c5bd75..aca8ba9bb5e6f 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/index.js +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/create_watch_modal/index.js @@ -6,6 +6,5 @@ -import './styles/main.less'; import './create_watch_modal_controller'; import 'plugins/ml/jobs/new_job/simple/components/watcher'; 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/delete_job_modal/index.js b/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/index.js index 91466952cea59..bc30dea869c68 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/index.js +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/index.js @@ -6,5 +6,4 @@ -import './styles/main.less'; import './delete_job_modal_controller'; diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/styles/main.less deleted file mode 100644 index 050e52fba8afa..0000000000000 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/delete_job_modal/styles/main.less +++ /dev/null @@ -1,24 +0,0 @@ -.delete-job-modal { - padding:20px; - cursor: auto; - - h3 { - margin-top: 0px; - overflow: hidden; - text-overflow: ellipsis; - } - - .status-item-list { - margin-bottom: 10px; - - .status-item { - padding-top:8px; - font-weight: bold; - } - } - - .validation-error { - color: #fe5050; - font-size: 12px; - } -} diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss similarity index 55% rename from x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/styles/main.less rename to x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss index d52dcdc4cef88..a166ffd33f041 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/styles/main.less +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/edit_job_modal/_edit_job_modal.scss @@ -1,26 +1,30 @@ .edit-job-modal { - font-size: 14px; - padding:20px; + font-size: $euiFontSizeS; + padding: $euiSizeL; + + // SASSTODO: Use a proper selector h3 { overflow: hidden; text-overflow: ellipsis; - padding-bottom: 10px; + padding-bottom: $euiSizeS; + // SASSTODO: Use a proper selector span[ml-info-icon] { - font-size: 14px; + font-size: $euiFontSizeS; } } .tab_contents{ - padding-top: 20px; + padding-top: $euiFontSizeL; .detector_field_form { - background-color: #FFFFFF; + background-color: $euiColorEmptyShade; border: none; + // SASSTODO: Use a proper selector & > div.field-cols { flex: 1 1 1%; - margin-right: 5px; + margin-right: $euiSizeXS; } } @@ -28,6 +32,7 @@ display: flex; position: relative; + // SASSTODO: Proper calcs button.remove-button { top: 19px; position: absolute; @@ -39,20 +44,24 @@ } .form-group { - margin-right: 5px; + 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; @@ -61,16 +70,17 @@ } .custom-url-editor { - border: 1px solid #d9d9d9; - border-radius: 4px; - padding: 10px; + border: $euiBorderColor; + border-radius: $euiBorderRadius; + padding: $euiSize; } div.validation-error { - color: #fe5050; - font-size: 12px; + 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 index 40f57592183c4..a7fe5ef4bc801 100644 --- 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 @@ -8,7 +8,6 @@ import _ from 'lodash'; import 'plugins/ml/jobs/new_job/advanced/detectors_list_directive'; -import './styles/main.less'; import angular from 'angular'; import numeral from '@elastic/numeral'; diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss similarity index 50% rename from x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/styles/main.less rename to x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss index 814457a84406a..89b5844a75c66 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/styles/main.less +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/_expanded_row.scss @@ -1,84 +1,95 @@ -@import (reference) '~ui/styles/variables/colors'; - ml-job-list-expanded-row { + // SASSTODO: Proper selector & > div { - padding: 10px; + padding: $euiSizeS; } + // SASSTODO: Remove KUI .kuiButton { - margin-top: 10px; - margin-bottom: 10px; + margin-top: $euiSizeS; + margin-bottom: $euiSizeS; } .tab_contents { - border: 1px solid @globalColorLightGray; + border: $euiBorderThin; border-top: none; - padding: 10px; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; + 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:2px 10px 2px 2px; + padding: $euiSizeXS / 2; + padding-right: $euiSizeS; } } } ml-job-item { .ml_job_row { - border-bottom: 1px solid #EEEEEE; + border-bottom: $euiBorderThin; + // SASSTODO: Proper selectors & > div { - padding: 3px; + 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: 7px; + padding-right: $euiSizeS; } + + // SASSTODO: Proper selectors .col-md-6:nth-child(2) { - padding-left: 7px; + padding-left: $euiSizeS; } .ml_sub_heading { - font-weight: bold; - padding-left: 3px; + font-weight: $euiFontWeightBold; + padding-left: $euiSizeXS; } .ml_job_section_container { overflow: auto; - padding: 5px 15px; - background-color: #FBFBFB; - border: 2px solid #ecf0f1; - border-radius: 4px; - margin: 4px; + padding: $euiSizeXS $euiSize; + background-color: $euiColorLightestShade; + border: $euiBorderThick; + border-radius: $euiBorderRadius; + margin: $euiSizeXS; + // SASSTODO: Proper selectors & > div { - margin-left:15px; - margin-right:15px; + margin-left: $euiSize; + margin-right: $euiSize; } .button-wrapper { - margin-left: -30px; - padding-left: 30px; + margin-left: -$euiSizeXL; + padding-left: $euiSizeXL; } + // SASSTODO: Dangerous EUI overwrites table.euiTable { background-color: transparent; @@ -98,7 +109,7 @@ ml-job-list-expanded-row { .euiTableRowCell { background-color: transparent; vertical-align: top; - border-bottom: 1px solid #EEEEEE; + border-bottom: 1px solid $euiColorLightestShade; .euiTableCellContent__text { word-wrap: break-word; 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/expanded_row/forecasts_table/index.js b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/index.js index 329ec362e81cf..55605b3cf6b81 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/index.js +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/index.js @@ -6,5 +6,4 @@ -import './forecasts_table_directive'; -import './styles/main.less'; +import './forecasts_table_directive'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/styles/main.less deleted file mode 100644 index d678d40fe9978..0000000000000 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/forecasts_table/styles/main.less +++ /dev/null @@ -1,44 +0,0 @@ -ml-forecasts-table { - .euiTable { - // Remove this whole block when Jobs List is all EUI. - font-size: 12px; - - th { - span { - font-size: 12px; - font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial; - font-weight: bold; - } - - } - - tr { - td { - .euiTableCellContent { - padding-top: 4px; - padding-bottom: 4px; - } - } - } - } - - table tr th:last-child, - table tr td:last-child { - width: 60px; - } - - - .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_old/expanded_row/index.js b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/index.js index dbd51afac0e1c..47073e9239956 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/index.js +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/expanded_row/index.js @@ -6,7 +6,6 @@ -import './styles/main.less'; import './expanded_row_directive'; import './forecasts_table'; import './tabs/tab_controller'; 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 index 75104c8d22bdc..e1046c49efedf 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/index.js +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/index.js @@ -6,7 +6,6 @@ -import './styles/main.less'; import './jobs_list_controller'; import './edit_job_modal'; import './job_timepicker_modal'; 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/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss similarity index 54% rename from x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/styles/main.less rename to x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss index 53ee2b22bd73d..0c6d85bb01c3f 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/styles/main.less +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/_job_timepicker_modal.scss @@ -1,42 +1,48 @@ .job-timepicker-modal { - font-size: 14px; - padding:20px; + font-size: $euiFontSizeS; + padding: $euiSizeL; cursor: auto; + // SASSTODO: Proper selector h3 { - overflow: hidden; - text-overflow: ellipsis; + @include euiTextTruncate; } + // SASSTODO: Proper calc .date_container { width: 200px; display: inline-block; } .ml-timepicker-contents { - margin-top: 5px; + margin-top: $euiSizeXS; + // SASSTODO: Variabilize this coloring, replace with an EUI button .btn-info.active, .kuiButton--primary.active { - color: #ffffff; + color: $euiColorEmptyShade; background-color: #154751; border-color: #134049; + + // SASSTODO: Proper selector span { - color: #ffffff; + color: $euiColorEmptyShade; } } .btn-default, .kuiButton--basic { background: transparent; - color: #444444; + 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; } @@ -45,27 +51,28 @@ .ml-timepicker-modes { text-transform: capitalize; } + + // SASSTODO: Needs proper calcs throughout .ml-timepicker-section { float: left; - padding: 0px 15px; - min-width: 294px; - width: 294px; - border-left: 1px solid #FFFFFF; - border-right: 1px solid #FFFFFF; + padding: 0px $euiSize; + width: 50%; + border-left: 1px solid $euiColorEmptyShade; + border-right: 1px solid $euiColorEmptyShade; .ml-timepicker { padding: 13px; padding-top: none; - border: 2px solid #ecf0f1; - border-radius: 4px; - border-radius: 4px; + 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: 8px; - padding-right: 8px; + padding-left: $euiSizeS; + padding-right: $euiSizeS; } } @@ -76,10 +83,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; } -} +} \ No newline at end of file diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/index.js b/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/index.js index 2dea7ffe6dff9..b79a888c52243 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list_old/job_timepicker_modal/index.js +++ b/x-pack/plugins/ml/public/jobs/jobs_list_old/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/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 7a578c274b1f6..eb0be472a39fa 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 40efd6826b477..c9c9944a777f8 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 14bf18a96fd81..7acf401323151 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 @@ -228,7 +228,7 @@

No result

-
+
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 9c4e1025daf39..2b51b3ca0359c 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/settings/styles/main.less b/x-pack/plugins/ml/public/settings/styles/main.less deleted file mode 100644 index edf655f96d406..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 { - .management-panel { - .management-panel__link { - font-size: 17px; - line-height: 32px; - margin-left: 6px; - } - .disabled { - color: silver; - } - } -} - - 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 99ffd2756ae2a..8ea80489ab4fd 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 } .metric-value.critical { - fill: #fe5050; + fill: $mchColorCritical; } .metric-value.major { - fill: #ff7e00; + fill: $mchColorMajor; } .metric-value.minor { - fill: #ffdd00; + fill: $mchColorMinor; } .metric-value.warning { - fill: #8bc8fb; + fill: $mchColorWarning; } .metric-value.low { - fill: #d2e9f7; + fill: #d2e9f7; // Needs variable } .metric-value:hover, @@ -199,15 +198,21 @@ rect.scheduled-event-marker { stroke-width: 1px; - stroke: #999999; - fill: #cccccc; + stroke: $euiColorMediumShade; + fill: $euiColorLightShade; pointer-events: none; } .forecast { +<<<<<<< HEAD:x-pack/plugins/ml/public/timeseriesexplorer/styles/main.less .metric-value, .metric-value:hover { stroke: #cca300; +======= + circle.metric-value, + circle.metric-value:hover { + stroke: #cca300; // Needs variable +>>>>>>> timeseries explorer:x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss } } @@ -216,20 +221,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; } } @@ -248,11 +253,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 { @@ -260,7 +265,7 @@ } .area.context.forecast { - fill: rgba(204, 163, 0, 0.25); + fill: rgba(204, 163, 0, 0.25); // Needs variable } .mask { @@ -300,7 +305,7 @@ } .brush .extent { - stroke: #6A6A6A; + stroke: $euiColorDarkShade; stroke-width: 2; cursor: move; } @@ -310,7 +315,7 @@ } .top-border { - fill: #FFFFFF; + fill: $euiColorEmptyShade; } foreignObject.brush-handle { @@ -319,8 +324,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; @@ -333,16 +338,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';