From 191478f713b718410b9bb8b0aaac44dfbf4c3c3c Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 17 Jun 2020 11:04:57 +0200 Subject: [PATCH 01/29] Cleanup legacy scss, remove angular_ui_select.js since no longer used --- src/legacy/ui/public/angular_ui_select.js | 28 -- .../styles/_legacy/components/_config.scss | 11 - .../_legacy/components/_control_group.scss | 67 ---- .../styles/_legacy/components/_hintbox.scss | 59 --- .../styles/_legacy/components/_index.scss | 7 - .../styles/_legacy/components/_input.scss | 8 +- .../styles/_legacy/components/_kui_forms.scss | 21 -- .../styles/_legacy/components/_navbar.scss | 86 ----- .../styles/_legacy/components/_spinner.scss | 6 - .../styles/_legacy/components/_table.scss | 45 --- .../styles/_legacy/components/_truncate.scss | 3 - .../styles/_legacy/components/_ui_select.scss | 357 ------------------ .../discover/public/application/_mixins.scss | 27 -- .../angular/doc_table/_doc_table.scss | 74 ++++ .../common/layouts/preserve_layout.css | 1 - .../export_types/common/layouts/print.css | 1 - 16 files changed, 75 insertions(+), 726 deletions(-) delete mode 100644 src/legacy/ui/public/angular_ui_select.js delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_config.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_control_group.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_hintbox.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_navbar.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_spinner.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_truncate.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_ui_select.scss delete mode 100644 src/plugins/discover/public/application/_mixins.scss diff --git a/src/legacy/ui/public/angular_ui_select.js b/src/legacy/ui/public/angular_ui_select.js deleted file mode 100644 index 99f92587507c9..0000000000000 --- a/src/legacy/ui/public/angular_ui_select.js +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import 'jquery'; -import 'angular'; -// required for `ngSanitize` angular module -import 'angular-sanitize'; -import 'ui-select/dist/select'; - -import { uiModules } from 'ui/modules'; - -uiModules.get('kibana', ['ui.select', 'ngSanitize']); diff --git a/src/legacy/ui/public/styles/_legacy/components/_config.scss b/src/legacy/ui/public/styles/_legacy/components/_config.scss deleted file mode 100644 index b56826f1e7088..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_config.scss +++ /dev/null @@ -1,11 +0,0 @@ -// SASSTODO: Selector is so generic it's hard to find if it's actually used -.config { - @extend .navbar !optional; - @extend .navbar-default !optional; - border-bottom: 1px solid transparent; - - .container-fluid { - background-color: $euiPageBackgroundColor; - padding: $euiSizeS; - } -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_control_group.scss b/src/legacy/ui/public/styles/_legacy/components/_control_group.scss deleted file mode 100644 index ce958a9aae77f..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_control_group.scss +++ /dev/null @@ -1,67 +0,0 @@ -.control-group { - display: flex; - flex: 0 0 auto; - flex-direction: row; - flex-wrap: wrap; - align-items: stretch; - padding: $euiSizeXS $euiSize; - - > * { - padding-right: $euiSize; - flex: 0 0 auto; - - &:last-child { - padding-right: 0; - } - } - - // horizontal group of buttons/form elements - .inline-form .input-group { - margin-bottom: 0; - display: flex; - - > * { - border-radius: 0; - } - - > :first-child { - border-bottom-left-radius: $euiBorderRadius; - border-top-left-radius: $euiBorderRadius; - } - - > :last-child { - border-bottom-right-radius: $euiBorderRadius; - border-top-right-radius: $euiBorderRadius; - } - } - - .inline-form { - @include flex-parent(0, 0, auto); - display: flex; - - > .typeahead { - @include flex-parent(); - - > .input-group { - display: flex; - flex: 1 0 auto; - - > * { - float: none; - height: auto; - width: auto; - flex: 0 0 auto; - } - - input[type="text"] { - flex: 1 1 100%; - } - } - } - } - - // the element should take up an even share of available space - > .fill { - flex: 1 1 1%; - } -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_hintbox.scss b/src/legacy/ui/public/styles/_legacy/components/_hintbox.scss deleted file mode 100644 index 0c447031636ac..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_hintbox.scss +++ /dev/null @@ -1,59 +0,0 @@ -.hintbox { - padding: $euiSizeS $euiSizeM; - border-radius: $euiBorderRadius; - margin-bottom: $euiSizeS; - background-color: $euiColorLightShade; - line-height: $euiLineHeight; - - a { - color: $euiLinkColor !important; - - &:hover { - color: darken($euiLinkColor, 10%) !important; - } - } - - pre { - background-color: $euiColorEmptyShade; - } - - ul, ol { - padding-left: $euiSizeL; - } - - // inspired by Bootstrap alerts component - // https://github.com/twbs/bootstrap/blob/063c1b0780ea0240e4adce4c88d57fc23e099475/less/alerts.less#L27-L35 - > * { - margin: 0; - } - - > * + * { - margin-top: $euiSizeS; - } - - // https://github.com/twbs/bootstrap/blob/2aa102bfd40859d15790febed1939e0111a6fb1a/less/tables.less#L88-L106 - .table-bordered { - border: $euiBorderThin; - > thead, - > tbody, - > tfoot { - > tr { - > th, - > td { - border: $euiBorderThin; - } - } - } - > thead > tr { - > th, - > td { - border-bottom-width: 2px; - } - } - } -} - - .hintbox-label, - .hintbox-label[ng-click] { - cursor: help; - } diff --git a/src/legacy/ui/public/styles/_legacy/components/_index.scss b/src/legacy/ui/public/styles/_legacy/components/_index.scss index cfae0700bb71e..e78af634f88f2 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_index.scss +++ b/src/legacy/ui/public/styles/_legacy/components/_index.scss @@ -1,13 +1,6 @@ @import './ace_overrides'; -@import './control_group'; -@import './hintbox'; @import './input'; @import './kui_forms'; @import './list_group_menu'; -@import './navbar'; -@import './config'; @import './pagination'; -@import './spinner'; @import './table'; -@import './truncate'; -@import './ui_select'; diff --git a/src/legacy/ui/public/styles/_legacy/components/_input.scss b/src/legacy/ui/public/styles/_legacy/components/_input.scss index 13efc9646e820..de524174ad6d9 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_input.scss +++ b/src/legacy/ui/public/styles/_legacy/components/_input.scss @@ -1,10 +1,4 @@ -i.input-error { - position: absolute; - margin-left: -$euiSizeL; - color: $euiColorDanger; - margin-top: $euiSizeS; - z-index: 5; -} + select { color: $euiTextColor; diff --git a/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss b/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss index 2e1b814d647e3..f2a4a684ab535 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss +++ b/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss @@ -6,24 +6,3 @@ select.form-control { @include __legacySelectStyles__bad; } -.kuiFormSection { - margin-bottom: $euiSize; -} - -.kuiFormLabel { - @include __legacyLabelStyles__bad; - display: block; - margin-bottom: 5px; -} - -.kuiInputNote { - margin: $euiSizeXS 0 $euiSizeS; -} - -.kuiInputNote--danger { - color: $euiColorDanger; -} - -.kuiInputNote--warning { - color: $euiColorWarning; -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_navbar.scss b/src/legacy/ui/public/styles/_legacy/components/_navbar.scss deleted file mode 100644 index b06c655789a50..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_navbar.scss +++ /dev/null @@ -1,86 +0,0 @@ -navbar { - @extend .control-group; - - max-height: 340px; - margin-bottom: 0; - padding: 0 $euiSizeS $euiSizeXS; - color: $euiColorDarkShade; - background-color: $euiColorLightShade; - border: none; - z-index: $euiZLevel1; - - > * { - padding-right: $euiSizeS; - } - - .navbar-text { - margin-top: $euiSizeXS; - margin-bottom: $euiSizeXS; - } - - // the "brand" that is displayed, usually on the left of the navbar - > .name { - @include euiTextTruncate; - - align-self: center; - font-size: $euiFontSizeL; - } - - button { - color: $euiColorDarkShade; - background-color: transparent; - - &:hover, - &:focus { - color: $euiColorDarkShade; - background-color: transparent; - } - - &:active, &.active { - color: $euiColorDarkestShade; - background-color: transparent; - box-shadow: none; - - &:focus { - outline: none; - } - } - - &[disabled] { - color: $euiColorMediumShade; - background-color: transparent; - } - } - - .inline-form .input-group { - button { - color: $euiColorEmptyShade; - background-color: $euiColorDarkShade; - border: none; - } - } - - // responsive modifications - - // desktop - @include euiBreakpoint('l', 'xl') { - > .name { - // 500px is sort of arbitrary, not sure how to deal with lots of buttons - max-width: 500px; - } - } - - // tablets/phones - @include euiBreakpoint('xs', 's', 'm') { - > .fill { - flex: 1 1 map-get($euiBreakpoints, 'l'); - } - } - - // phones - @include euiBreakpoint('xs', 's') { - > .name { - max-width: 100%; - } - } -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_spinner.scss b/src/legacy/ui/public/styles/_legacy/components/_spinner.scss deleted file mode 100644 index 7b3b1bd615ae0..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_spinner.scss +++ /dev/null @@ -1,6 +0,0 @@ -.spinner.ng-hide { - visibility: hidden; - display: block !important; - opacity: 0; - transition-delay: 0.25s; -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_table.scss b/src/legacy/ui/public/styles/_legacy/components/_table.scss index d0ac9d6f79862..8b137891791fe 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_table.scss +++ b/src/legacy/ui/public/styles/_legacy/components/_table.scss @@ -1,46 +1 @@ -@import '../../../../../../plugins/discover/public/application/mixins'; -.table { - // Nesting - .table { - background-color: $euiColorEmptyShade; - } -} - -kbn-table, .kbn-table, tbody[kbn-rows] { - @include dscDocSourceStyle; - // sub tables should not have a leading border - .table .table { - margin-bottom: 0; - - tr:first-child > td { - border-top: none; - } - - td.field-name { - font-weight: $euiFontWeightBold; - } - } -} - -table { - th { - i.fa-sort { - color: $euiColorLightShade; - } - - button.fa-sort-asc, - button.fa-sort-down, - i.fa-sort-asc, - i.fa-sort-down { - color: $euiColorPrimary; - } - - button.fa-sort-desc, - button.fa-sort-up, - i.fa-sort-desc, - i.fa-sort-up { - color: $euiColorPrimary; - } - } -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_truncate.scss b/src/legacy/ui/public/styles/_legacy/components/_truncate.scss deleted file mode 100644 index 30ba5fea2a4ea..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_truncate.scss +++ /dev/null @@ -1,3 +0,0 @@ -.truncate-by-height { - overflow: hidden; -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_ui_select.scss b/src/legacy/ui/public/styles/_legacy/components/_ui_select.scss deleted file mode 100644 index 691ec17b5b967..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_ui_select.scss +++ /dev/null @@ -1,357 +0,0 @@ -/*! - * ui-select - * http://github.com/angular-ui/ui-select - * Version: 0.19.5 - 2016-10-24T23:13:59.551Z - * License: MIT - */ - -/* Style when highlighting a search. */ -.ui-select-highlight { - font-weight: bold; -} - -.ui-select-offscreen { - clip: rect(0 0 0 0) !important; - width: 1px !important; - height: 1px !important; - border: 0 !important; - margin: 0 !important; - padding: 0 !important; - overflow: hidden !important; - position: absolute !important; - outline: 0 !important; - left: 0px !important; - top: 0px !important; -} - -.ui-select-choices-row:hover { - background-color: $euiColorLightestShade; -} - -/* Select2 theme */ - -/* Mark invalid Select2 */ -.ng-dirty.ng-invalid > a.select2-choice { - border-color: $euiColorDanger; -} - -.select2-result-single { - padding-left: 0; -} - -.select2-locked > .select2-search-choice-close { - display: none; -} - -.select-locked > .ui-select-match-close { - display: none; -} - -body > .select2-container.open { - z-index: 9999; /* The z-index Select2 applies to the select2-drop */ -} - -/* Handle up direction Select2 */ -.ui-select-container[theme='select2'].direction-up .ui-select-match, -.ui-select-container.select2.direction-up .ui-select-match { - border-radius: 4px; /* FIXME hardcoded value :-/ */ - border-top-left-radius: 0; - border-top-right-radius: 0; -} -.ui-select-container[theme='select2'].direction-up .ui-select-dropdown, -.ui-select-container.select2.direction-up .ui-select-dropdown { - border-radius: 4px; /* FIXME hardcoded value :-/ */ - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - - border-top-width: 1px; /* FIXME hardcoded value :-/ */ - border-top-style: solid; - - box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25); - - margin-top: -4px; /* FIXME hardcoded value :-/ */ -} -.ui-select-container[theme='select2'].direction-up .ui-select-dropdown .select2-search, -.ui-select-container.select2.direction-up .ui-select-dropdown .select2-search { - margin-top: 4px; /* FIXME hardcoded value :-/ */ -} -.ui-select-container[theme='select2'].direction-up.select2-dropdown-open .ui-select-match, -.ui-select-container.select2.direction-up.select2-dropdown-open .ui-select-match { - border-bottom-color: $euiColorPrimary; -} - -.ui-select-container[theme='select2'] .ui-select-dropdown .ui-select-search-hidden, -.ui-select-container[theme='select2'] .ui-select-dropdown .ui-select-search-hidden input { - opacity: 0; - height: 0; - min-height: 0; - padding: 0; - margin: 0; - border: 0; -} - -/* Bootstrap theme */ - -/* Helper class to show styles when focus */ -.btn-default-focus { - color: $euiTextColor; - background-color: $euiColorEmptyShade; - border-color: $euiColorPrimary; - text-decoration: none; - outline: none; - box-shadow: none; -} - -.ui-select-bootstrap .ui-select-toggle { - @include __legacyInputStyles__bad; - @include __legacySelectStyles__bad; -} - -.ui-select-bootstrap .ui-select-toggle > .caret { - display: none; -} - -/* Fix Bootstrap dropdown position when inside a input-group */ -.input-group > .ui-select-bootstrap.dropdown { - /* Instead of relative */ - position: static; -} - -.input-group > .ui-select-bootstrap > input.ui-select-search.form-control { - border-radius: 4px; /* FIXME hardcoded value :-/ */ - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up { - border-radius: 4px !important; /* FIXME hardcoded value :-/ */ - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -.ui-select-bootstrap .ui-select-search-hidden { - opacity: 0; - height: 0; - min-height: 0; - padding: 0; - margin: 0; - border: 0; -} - -.ui-select-bootstrap > .ui-select-match > .btn { - @include __legacyInputStyles__bad; - @include __legacySelectStyles__bad; - text-align: left !important; // Instead of center because of .btn - - .ui-select-placeholder { - color: $euiColorMediumShade; - } - - &:focus, - &:active { - background-color: $euiColorEmptyShade; - color: $euiTextColor; - outline: none; - } -} - -.ui-select-bootstrap > .ui-select-match > .caret { - display: none; -} - -/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */ -.ui-select-bootstrap > .ui-select-choices, -.ui-select-bootstrap > .ui-select-no-choice { - width: 100%; - height: auto; - max-height: $euiSize * 14; - overflow-x: hidden; -} - -body > .ui-select-bootstrap.open { - z-index: $euiZContentMenu; -} - -.ui-select-multiple.ui-select-bootstrap { - height: auto; - padding: 3px 5px 2px; - border: $euiBorderThin; - background-color: $euiFormBackgroundColor; - - &.kuiInputError { - border-color: $euiColorDanger; - } -} - -.ui-select-multiple.ui-select-bootstrap input.ui-select-search { - background-color: transparent !important; /* To prevent double background when disabled */ - border: none; - outline: none; - height: 1.666666em; - margin-bottom: 3px; -} - -.ui-select-multiple.ui-select-bootstrap .ui-select-match .close { - font-size: 1.6em; - line-height: 0.75; -} - -.ui-select-multiple.ui-select-bootstrap .ui-select-match-item { - outline: 0; - margin: 0 3px 3px 0; -} - -.ui-select-multiple .ui-select-match-item { - position: relative; -} - -.ui-select-multiple .ui-select-match-item.dropping .ui-select-match-close { - pointer-events: none; -} - -.ui-select-multiple:hover .ui-select-match-item.dropping-before:before { - content: ''; - position: absolute; - top: 0; - right: 100%; - height: 100%; - margin-right: 2px; - border-left: 1px solid $euiColorPrimary; -} - -.ui-select-multiple:hover .ui-select-match-item.dropping-after:after { - content: ''; - position: absolute; - top: 0; - left: 100%; - height: 100%; - margin-left: 2px; - border-right: 1px solid $euiColorPrimary; -} - -.ui-select-bootstrap .ui-select-choices-row > span { - @include euiFontSizeS; - @include euiTextTruncate; - font-weight: inherit; - cursor: pointer; - display: block; - padding: $euiSizeXS $euiSize; - clear: both; - color: $euiTextColor; - white-space: nowrap; - - &:hover, - &:focus { - text-decoration: none; - color: $euiTextColor; - background-color: $euiFocusBackgroundColor; - } -} - -.ui-select-bootstrap .ui-select-choices-row.active > span { - color: $euiTextColor; - text-decoration: none; - outline: 0; - background-color: $euiFocusBackgroundColor; -} - -.ui-select-bootstrap .ui-select-choices-row.disabled > span, -.ui-select-bootstrap .ui-select-choices-row.active.disabled > span { - color: $euiButtonColorDisabled; - cursor: not-allowed; - background-color: transparent; -} - -/* fix hide/show angular animation */ -.ui-select-match.ng-hide-add, -.ui-select-search.ng-hide-add { - display: none !important; -} - -/* Mark invalid Bootstrap */ -.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match { - border-color: $euiColorDanger; -} - -/* Handle up direction Bootstrap */ -.ui-select-container[theme='bootstrap'].direction-up .ui-select-dropdown { - @include euiBottomShadowMedium; -} - -.ui-select-bootstrap .ui-select-match-text { - width: 100%; - padding-right: 1em; -} -.ui-select-bootstrap .ui-select-match-text span { - display: inline-block; - width: 100%; - overflow: hidden; -} -.ui-select-bootstrap .ui-select-toggle > a.btn { - position: absolute; - height: 10px; - right: 10px; - margin-top: -2px; -} - -/* Spinner */ -.ui-select-refreshing { - position: absolute; - right: 0; - padding: 8px 27px; - top: 1px; - display: inline-block; - font-family: 'Glyphicons Halflings'; - font-style: normal; - font-weight: normal; - line-height: 1; - -webkit-font-smoothing: antialiased; -} - -@-webkit-keyframes ui-select-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -@keyframes ui-select-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} - -.ui-select-spin { - -webkit-animation: ui-select-spin 2s infinite linear; - animation: ui-select-spin 2s infinite linear; -} - -.ui-select-refreshing.ng-animate { - -webkit-animation: none 0s; -} - -// Other Custom - -/** - * 1. Fix appearance of ui-select in the Filtering UI. - */ -.btn-default .ui-select-placeholder { - color: $euiColorMediumShade; /* 1 */ -} - -.uiSelectMatch--ellipsis { - @include euiTextTruncate; -} - -.ui-select-choices-group-label { - @include euiTitle('xxxs'); - @include euiTextTruncate; - padding: $euiSizeXS; -} diff --git a/src/plugins/discover/public/application/_mixins.scss b/src/plugins/discover/public/application/_mixins.scss deleted file mode 100644 index 100f81ae92bf0..0000000000000 --- a/src/plugins/discover/public/application/_mixins.scss +++ /dev/null @@ -1,27 +0,0 @@ -/** -* Style ES document _source in table view
key:
value
-* Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted -* row in the Context Log. -*/ -@mixin dscDocSourceStyle { - dl.source { - margin-bottom: 0; - line-height:2em; - word-break: break-word; - - dt, dd { - display: inline; - } - - dt { - background-color: transparentize(shade($euiColorPrimary, 20%), .9); - color: $euiTextColor; - padding: ($euiSizeXS / 2) $euiSizeXS; - margin-right: $euiSizeXS; - word-break: normal; - border-radius: $euiBorderRadius; - } - } -} - - diff --git a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss index 3e30214acd2a9..6dcd21ec26954 100644 --- a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss +++ b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss @@ -1,3 +1,28 @@ +/** +* Style ES document _source in table view
key:
value
+* Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted +* row in the Context Log. +*/ +@mixin dscDocSourceStyle { + dl.source { + margin-bottom: 0; + line-height:2em; + word-break: break-word; + + dt, dd { + display: inline; + } + + dt { + background-color: transparentize(shade($euiColorPrimary, 20%), .9); + color: $euiTextColor; + padding: ($euiSizeXS / 2) $euiSizeXS; + margin-right: $euiSizeXS; + word-break: normal; + border-radius: $euiBorderRadius; + } + } +} /** * 1. Stack content vertically so the table can scroll when its constrained by a fixed container height. */ @@ -80,3 +105,52 @@ doc-table { text-align: center; } +.truncate-by-height { + overflow: hidden; +} + +.table { + // Nesting + .table { + background-color: $euiColorEmptyShade; + } +} + +kbn-table, .kbn-table, tbody[kbn-rows] { + @include dscDocSourceStyle; + // sub tables should not have a leading border + .table .table { + margin-bottom: 0; + + tr:first-child > td { + border-top: none; + } + + td.field-name { + font-weight: $euiFontWeightBold; + } + } +} + +table { + th { + i.fa-sort { + color: $euiColorLightShade; + } + + button.fa-sort-asc, + button.fa-sort-down, + i.fa-sort-asc, + i.fa-sort-down { + color: $euiColorPrimary; + } + + button.fa-sort-desc, + button.fa-sort-up, + i.fa-sort-desc, + i.fa-sort-up { + color: $euiColorPrimary; + } + } +} + diff --git a/x-pack/plugins/reporting/server/export_types/common/layouts/preserve_layout.css b/x-pack/plugins/reporting/server/export_types/common/layouts/preserve_layout.css index 88e38d55e5784..1ee1b129e8057 100644 --- a/x-pack/plugins/reporting/server/export_types/common/layouts/preserve_layout.css +++ b/x-pack/plugins/reporting/server/export_types/common/layouts/preserve_layout.css @@ -36,7 +36,6 @@ filter-bar, discover-app .dscTimechart, discover-app .dscSidebar__container, discover-app .kbnCollapsibleSidebar__collapseButton, -discover-app navbar[name=discover-search], discover-app .discover-table-footer { display: none; } diff --git a/x-pack/plugins/reporting/server/export_types/common/layouts/print.css b/x-pack/plugins/reporting/server/export_types/common/layouts/print.css index ddd280c7b3f23..cdf72d6e82a6b 100644 --- a/x-pack/plugins/reporting/server/export_types/common/layouts/print.css +++ b/x-pack/plugins/reporting/server/export_types/common/layouts/print.css @@ -35,7 +35,6 @@ filter-bar, discover-app .dscTimechart, discover-app .dscSidebar__container, discover-app .kbnCollapsibleSidebar__collapseButton, -discover-app navbar[name="discover-search"], discover-app .discover-table-footer { display: none; } From 406fee24f34c90e9c0d7c06414e279d9c36fb3c3 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 17 Jun 2020 17:38:32 +0200 Subject: [PATCH 02/29] restore angular_ui_select.js --- src/legacy/ui/public/angular_ui_select.js | 28 +++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/legacy/ui/public/angular_ui_select.js diff --git a/src/legacy/ui/public/angular_ui_select.js b/src/legacy/ui/public/angular_ui_select.js new file mode 100644 index 0000000000000..99f92587507c9 --- /dev/null +++ b/src/legacy/ui/public/angular_ui_select.js @@ -0,0 +1,28 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import 'jquery'; +import 'angular'; +// required for `ngSanitize` angular module +import 'angular-sanitize'; +import 'ui-select/dist/select'; + +import { uiModules } from 'ui/modules'; + +uiModules.get('kibana', ['ui.select', 'ngSanitize']); From bc7110d110a385f1d014e71a216689b7b8650e44 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 23 Jun 2020 10:37:47 +0200 Subject: [PATCH 03/29] Further cleanup and no longer break build --- .../ui/public/styles/_legacy/_index.scss | 1 - .../ui/public/styles/_legacy/_mixins.scss | 54 ------------------- .../styles/_legacy/components/_kui_forms.scss | 36 ++++++++++++- .../application/angular/doc_table/index.scss | 2 - .../discover/public/application/index.scss | 1 - 5 files changed, 34 insertions(+), 60 deletions(-) delete mode 100644 src/legacy/ui/public/styles/_legacy/_mixins.scss diff --git a/src/legacy/ui/public/styles/_legacy/_index.scss b/src/legacy/ui/public/styles/_legacy/_index.scss index a0b1a98b09b7d..1bd344f3fe364 100644 --- a/src/legacy/ui/public/styles/_legacy/_index.scss +++ b/src/legacy/ui/public/styles/_legacy/_index.scss @@ -1,7 +1,6 @@ // // // // KIBANA THEME @import './base'; -@import './mixins'; // // Components @import './components/index'; diff --git a/src/legacy/ui/public/styles/_legacy/_mixins.scss b/src/legacy/ui/public/styles/_legacy/_mixins.scss deleted file mode 100644 index 2834f60555070..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/_mixins.scss +++ /dev/null @@ -1,54 +0,0 @@ -// These mixins are temporary helpers to consolidate styles of elements that -// are not yet converted to use EUI. - -// DO NOT CONTINUE TO USE THESE MIXINS - -@mixin __legacyInputStyles__bad { - &:not([type='range']) { - appearance: none; - } - display: block; - width: 100%; - height: $euiFormControlCompressedHeight; - padding: $euiSizeXS $euiSizeM; - @include euiFontSizeS; - border: $euiBorderThin; - background-color: $euiFormBackgroundColor; - color: $euiTextColor; - border-radius: $euiBorderRadius; - cursor: pointer; - - &:focus { - border-color: $euiColorPrimary; - outline: none; - box-shadow: none; - } -} - -@mixin __legacySelectStyles__bad { - // Makes the select arrow similar to EUI's arrowDown icon - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z'/%3E%3C/svg%3E"); - background-size: $euiSize; - background-repeat: no-repeat; - background-position: calc(100% - #{$euiSizeS}); - padding-right: $euiSizeXL; - - &::-ms-expand { - display: none; - } - - &:focus::-ms-value { - color: $euiTextColor; - background: transparent; - } -} - -@mixin __legacyLabelStyles__bad { - font-size: $euiFontSizeXS; - font-weight: $euiFontWeightSemiBold; - color: $euiTextColor; - - &[for] { - cursor: pointer; - } -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss b/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss index f2a4a684ab535..d7c549afc4e68 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss +++ b/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss @@ -1,8 +1,40 @@ .form-control { - @include __legacyInputStyles__bad; + &:not([type='range']) { + appearance: none; + } + display: block; + width: 100%; + height: $euiFormControlCompressedHeight; + padding: $euiSizeXS $euiSizeM; + @include euiFontSizeS; + border: $euiBorderThin; + background-color: $euiFormBackgroundColor; + color: $euiTextColor; + border-radius: $euiBorderRadius; + cursor: pointer; + + &:focus { + border-color: $euiColorPrimary; + outline: none; + box-shadow: none; + } } select.form-control { - @include __legacySelectStyles__bad; + // Makes the select arrow similar to EUI's arrowDown icon + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z'/%3E%3C/svg%3E"); + background-size: $euiSize; + background-repeat: no-repeat; + background-position: calc(100% - #{$euiSizeS}); + padding-right: $euiSizeXL; + + &::-ms-expand { + display: none; + } + + &:focus::-ms-value { + color: $euiTextColor; + background: transparent; + } } diff --git a/src/plugins/discover/public/application/angular/doc_table/index.scss b/src/plugins/discover/public/application/angular/doc_table/index.scss index 4e6cb83c5fe5a..3663d807851c4 100644 --- a/src/plugins/discover/public/application/angular/doc_table/index.scss +++ b/src/plugins/discover/public/application/angular/doc_table/index.scss @@ -1,4 +1,2 @@ -@import '../../mixins'; - @import 'doc_table'; @import 'components/index'; diff --git a/src/plugins/discover/public/application/index.scss b/src/plugins/discover/public/application/index.scss index aaec7ab387e96..39abbb7721d79 100644 --- a/src/plugins/discover/public/application/index.scss +++ b/src/plugins/discover/public/application/index.scss @@ -1,5 +1,4 @@ // Discover plugin styles -@import 'mixins'; @import 'discover'; @import 'hacks'; From 743c7a57485ad1fe213e663e4c97ddad2c3ec8ba Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 23 Jun 2020 11:17:01 +0200 Subject: [PATCH 04/29] Cleanup and merge scss files --- .../core_plugins/timelion/public/_app.scss | 1 + .../timelion/public/directives/_form.scss} | 21 +++++++------------ .../timelion/public/directives/_index.scss | 3 +++ .../directives/_saved_object_finder.scss} | 6 ++++-- .../ui/public/styles/_legacy/_base.scss | 6 ++++++ .../styles/_legacy/components/_index.scss | 4 ---- .../styles/_legacy/components/_input.scss | 6 ------ .../styles/_legacy/components/_table.scss | 1 - 8 files changed, 21 insertions(+), 27 deletions(-) rename src/legacy/{ui/public/styles/_legacy/components/_kui_forms.scss => core_plugins/timelion/public/directives/_form.scss} (74%) rename src/legacy/{ui/public/styles/_legacy/components/_list_group_menu.scss => core_plugins/timelion/public/directives/_saved_object_finder.scss} (85%) delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_input.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_table.scss diff --git a/src/legacy/core_plugins/timelion/public/_app.scss b/src/legacy/core_plugins/timelion/public/_app.scss index e44321f26e8dd..74360ead9b95a 100644 --- a/src/legacy/core_plugins/timelion/public/_app.scss +++ b/src/legacy/core_plugins/timelion/public/_app.scss @@ -22,3 +22,4 @@ font-weight: $euiFontWeightRegular; color: $euiColorMediumShade; } + diff --git a/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss b/src/legacy/core_plugins/timelion/public/directives/_form.scss similarity index 74% rename from src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss rename to src/legacy/core_plugins/timelion/public/directives/_form.scss index d7c549afc4e68..f5f63487bf49e 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_kui_forms.scss +++ b/src/legacy/core_plugins/timelion/public/directives/_form.scss @@ -1,18 +1,19 @@ .form-control { - &:not([type='range']) { - appearance: none; - } + @include euiFontSizeS; display: block; width: 100%; height: $euiFormControlCompressedHeight; padding: $euiSizeXS $euiSizeM; - @include euiFontSizeS; border: $euiBorderThin; background-color: $euiFormBackgroundColor; color: $euiTextColor; border-radius: $euiBorderRadius; cursor: pointer; + &:not([type='range']) { + appearance: none; + } + &:focus { border-color: $euiColorPrimary; outline: none; @@ -20,21 +21,13 @@ } } +// sass-lint:disable-block no-qualifying-elements select.form-control { // Makes the select arrow similar to EUI's arrowDown icon - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z'/%3E%3C/svg%3E"); + background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="#{hexToRGB($euiTextColor)}" d="M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z"/%3E%3C/svg%3E'); background-size: $euiSize; background-repeat: no-repeat; background-position: calc(100% - #{$euiSizeS}); padding-right: $euiSizeXL; - &::-ms-expand { - display: none; - } - - &:focus::-ms-value { - color: $euiTextColor; - background: transparent; - } } - diff --git a/src/legacy/core_plugins/timelion/public/directives/_index.scss b/src/legacy/core_plugins/timelion/public/directives/_index.scss index cd46a1a0a369e..a407c1dfabdeb 100644 --- a/src/legacy/core_plugins/timelion/public/directives/_index.scss +++ b/src/legacy/core_plugins/timelion/public/directives/_index.scss @@ -3,3 +3,6 @@ @import './timelion_expression_suggestions/index'; @import './timelion_help/index'; @import './timelion_interval/index'; +@import './saved_object_finder'; +@import './form'; + diff --git a/src/legacy/ui/public/styles/_legacy/components/_list_group_menu.scss b/src/legacy/core_plugins/timelion/public/directives/_saved_object_finder.scss similarity index 85% rename from src/legacy/ui/public/styles/_legacy/components/_list_group_menu.scss rename to src/legacy/core_plugins/timelion/public/directives/_saved_object_finder.scss index 3bac75cb19d9d..b97dace5e9e00 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_list_group_menu.scss +++ b/src/legacy/core_plugins/timelion/public/directives/_saved_object_finder.scss @@ -1,7 +1,7 @@ .list-group-menu { &.select-mode a { - outline: none; - color: tintOrShade($euiColorPrimary, 10%, 10%); + outline: none; + color: tintOrShade($euiColorPrimary, 10%, 10%); } .list-group-menu-item { @@ -12,9 +12,11 @@ font-weight: bold; background-color: $euiColorLightShade; } + &:hover { background-color: tintOrShade($euiColorPrimary, 90%, 90%); } + li { list-style: none; color: tintOrShade($euiColorPrimary, 10%, 10%); diff --git a/src/legacy/ui/public/styles/_legacy/_base.scss b/src/legacy/ui/public/styles/_legacy/_base.scss index 877ae033ae584..25429b9857921 100644 --- a/src/legacy/ui/public/styles/_legacy/_base.scss +++ b/src/legacy/ui/public/styles/_legacy/_base.scss @@ -151,3 +151,9 @@ input[type='checkbox'], .text-monospace { font-family: $euiCodeFontFamily; } + +select { + color: $euiTextColor; + background-color: $euiColorEmptyShade; +} + diff --git a/src/legacy/ui/public/styles/_legacy/components/_index.scss b/src/legacy/ui/public/styles/_legacy/components/_index.scss index e78af634f88f2..7fffdef850072 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_index.scss +++ b/src/legacy/ui/public/styles/_legacy/components/_index.scss @@ -1,6 +1,2 @@ @import './ace_overrides'; -@import './input'; -@import './kui_forms'; -@import './list_group_menu'; @import './pagination'; -@import './table'; diff --git a/src/legacy/ui/public/styles/_legacy/components/_input.scss b/src/legacy/ui/public/styles/_legacy/components/_input.scss deleted file mode 100644 index de524174ad6d9..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_input.scss +++ /dev/null @@ -1,6 +0,0 @@ - - -select { - color: $euiTextColor; - background-color: $euiColorEmptyShade; -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_table.scss b/src/legacy/ui/public/styles/_legacy/components/_table.scss deleted file mode 100644 index 8b137891791fe..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_table.scss +++ /dev/null @@ -1 +0,0 @@ - From c52a38c2ae6efea54bcde522d4c98d5693ddec7c Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 2 Jul 2020 11:44:26 +0200 Subject: [PATCH 05/29] Cleanup styles and move to kibana_legacy --- src/core/public/index.scss | 2 - src/legacy/ui/public/_index.scss | 2 +- .../ui/public/styles/_legacy/_index.scss | 6 - .../_legacy/components/_ace_overrides.scss | 205 ------------------ .../styles/_legacy/components/_index.scss | 2 - .../_legacy/components/_pagination.scss | 56 ----- src/plugins/dashboard/public/plugin.tsx | 1 + .../public/application/_discover.scss | 12 + src/plugins/discover/public/plugin.ts | 2 + src/plugins/kibana_legacy/public/plugin.ts | 7 + .../kibana_legacy/public/styles}/_base.scss | 60 ----- .../kibana_legacy/public/styles/_index.scss | 6 + .../public/styles/_paginate.scss | 57 +++++ .../kibana_legacy/public/styles/index.ts | 20 ++ src/plugins/visualize/public/plugin.ts | 1 + 15 files changed, 107 insertions(+), 332 deletions(-) delete mode 100644 src/legacy/ui/public/styles/_legacy/_index.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_ace_overrides.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_index.scss delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_pagination.scss rename src/{legacy/ui/public/styles/_legacy => plugins/kibana_legacy/public/styles}/_base.scss (68%) create mode 100644 src/plugins/kibana_legacy/public/styles/_index.scss create mode 100644 src/plugins/kibana_legacy/public/styles/_paginate.scss create mode 100644 src/plugins/kibana_legacy/public/styles/index.ts diff --git a/src/core/public/index.scss b/src/core/public/index.scss index 4be46899cff67..8675228a1f040 100644 --- a/src/core/public/index.scss +++ b/src/core/public/index.scss @@ -7,5 +7,3 @@ @import './overlays/index'; @import './rendering/index'; -// Global styles need to be migrated -@import '../../legacy/ui/public/styles/_legacy/_index'; diff --git a/src/legacy/ui/public/_index.scss b/src/legacy/ui/public/_index.scss index 323de2ea7d263..e05dcced15009 100644 --- a/src/legacy/ui/public/_index.scss +++ b/src/legacy/ui/public/_index.scss @@ -1,5 +1,5 @@ // Legacy styles to come before all -@import './styles/_legacy/index'; +@import 'src/plugins/kibana_legacy/public/styles/index'; // Prefix all styles with "kbn" to avoid conflicts. // Examples diff --git a/src/legacy/ui/public/styles/_legacy/_index.scss b/src/legacy/ui/public/styles/_legacy/_index.scss deleted file mode 100644 index 1bd344f3fe364..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -// // -// // KIBANA THEME -@import './base'; - -// // Components -@import './components/index'; diff --git a/src/legacy/ui/public/styles/_legacy/components/_ace_overrides.scss b/src/legacy/ui/public/styles/_legacy/components/_ace_overrides.scss deleted file mode 100644 index 2f0bc011f6a5c..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_ace_overrides.scss +++ /dev/null @@ -1,205 +0,0 @@ -@import '@elastic/eui/src/components/call_out/variables'; -@import '@elastic/eui/src/components/call_out/mixins'; - -// SASSTODO: Replace with an EUI editor -// Intentionally not using the EuiCodeBlock colors here because they actually change -// hue from light to dark theme. So some colors would change while others wouldn't. -// Seemed weird, so just hexing all the colors but using the `makeHighContrastColor()` -// function to ensure accessible contrast. - -// In order to override the TM (Textmate) theme of Ace/Brace, everywhere, -// it is being scoped by a known outer selector -.application { - .ace-tm { - $aceBackground: tintOrShade($euiColorLightShade, 50%, 0); - - background-color: $euiColorLightestShade; - color: $euiTextColor; - - .ace_scrollbar { - @include euiScrollBar; - } - - .ace_gutter-active-line, - .ace_marker-layer .ace_active-line { - background-color: transparentize($euiColorLightShade, .3); - } - - .ace_snippet-marker { - width: 100%; - background-color: $aceBackground; - border: none; - } - - .ace_indent-guide { - background: linear-gradient(to left, $euiColorMediumShade 0%, $euiColorMediumShade 1px, transparent 1px, transparent 100%); - } - - .ace_search { - z-index: $euiZLevel1 + 1; - } - - .ace_layer.ace_marker-layer { - overflow: visible; - } - - .ace_warning { - color: $euiColorDanger; - } - - .ace_method { - color: makeHighContrastColor(#DD0A73, $aceBackground); - } - - .ace_url, - .ace_start_triple_quote, - .ace_end_triple_quote { - color: makeHighContrastColor(#00A69B, $aceBackground); - } - - .ace_multi_string { - color: makeHighContrastColor(#009926, $aceBackground); - font-style: italic; - } - - .ace_gutter { - background-color: $euiColorEmptyShade; - color: $euiColorDarkShade; - border-left: 1px solid $aceBackground; - } - - .ace_print-margin { - width: 1px; - background: $euiColorLightShade; - } - - .ace_fold { - background-color: #6B72E6; - } - - .ace_cursor { - color: $euiColorFullShade; - } - - .ace_invisible { - color: $euiColorLightShade; - } - - .ace_storage, - .ace_keyword { - color: makeHighContrastColor(#0079A5, $aceBackground); - } - - .ace_constant { - color: makeHighContrastColor(#900, $aceBackground); - } - - .ace_constant.ace_buildin { - color: makeHighContrastColor(rgb(88, 72, 246), $aceBackground); - } - - .ace_constant.ace_language { - color: makeHighContrastColor(rgb(88, 92, 246), $aceBackground); - } - - .ace_constant.ace_library { - color: makeHighContrastColor(#009926, $aceBackground); - } - - .ace_invalid { - background-color: euiCallOutColor('danger', 'background'); - color: euiCallOutColor('danger', 'foreground'); - } - - .ace_support.ace_function { - color: makeHighContrastColor(rgb(60, 76, 114), $aceBackground); - } - - .ace_support.ace_constant { - color: makeHighContrastColor(#009926, $aceBackground); - } - - .ace_support.ace_type, - .ace_support.ace_class { - color: makeHighContrastColor(rgb(109, 121, 222), $aceBackground); - } - - .ace_keyword.ace_operator { - color: makeHighContrastColor($euiColorDarkShade, $aceBackground); - } - - .ace_string { - color: makeHighContrastColor(#009926, $aceBackground); - } - - .ace_comment { - color: makeHighContrastColor(rgb(76, 136, 107), $aceBackground); - } - - .ace_comment.ace_doc { - color: makeHighContrastColor(#0079A5, $aceBackground); - } - - .ace_comment.ace_doc.ace_tag { - color: makeHighContrastColor($euiColorMediumShade, $aceBackground); - } - - .ace_constant.ace_numeric { - color: makeHighContrastColor(#0079A5, $aceBackground); - } - - .ace_variable { - color: makeHighContrastColor(#0079A5, $aceBackground); - } - - .ace_xml-pe { - color: makeHighContrastColor($euiColorDarkShade, $aceBackground); - } - - .ace_entity.ace_name.ace_function { - color: makeHighContrastColor(#0000A2, $aceBackground); - } - - .ace_heading { - color: makeHighContrastColor(rgb(12, 7, 255), $aceBackground); - } - - .ace_list { - color: makeHighContrastColor(rgb(185, 6, 144), $aceBackground); - } - - .ace_meta.ace_tag { - color: makeHighContrastColor(rgb(0, 22, 142), $aceBackground); - } - - .ace_string.ace_regex { - color: makeHighContrastColor(rgb(255, 0, 0), $aceBackground); - } - - .ace_marker-layer .ace_selection { - background: tintOrShade($euiColorPrimary, 70%, 70%); - } - - &.ace_multiselect .ace_selection.ace_start { - box-shadow: 0 0 3px 0px $euiColorEmptyShade; - } - - .ace_marker-layer .ace_step { - background: tintOrShade($euiColorWarning, 80%, 80%); - } - - .ace_marker-layer .ace_stack { - background: tintOrShade($euiColorSuccess, 80%, 80%); - } - - .ace_marker-layer .ace_bracket { - margin: -1px 0 0 -1px; - border: $euiBorderThin; - } - - .ace_marker-layer .ace_selected-word { - background: $euiColorLightestShade; - border: $euiBorderThin; - } - } -} diff --git a/src/legacy/ui/public/styles/_legacy/components/_index.scss b/src/legacy/ui/public/styles/_legacy/components/_index.scss deleted file mode 100644 index 7fffdef850072..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './ace_overrides'; -@import './pagination'; diff --git a/src/legacy/ui/public/styles/_legacy/components/_pagination.scss b/src/legacy/ui/public/styles/_legacy/components/_pagination.scss deleted file mode 100644 index cf68f2ac8253f..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_pagination.scss +++ /dev/null @@ -1,56 +0,0 @@ -paginate { - display: block; - - paginate-controls { - display: flex; - align-items: center; - padding: $euiSizeXS $euiSizeXS $euiSizeS; - text-align: center; - - .pagination-other-pages { - flex: 1 0 auto; - display: flex; - justify-content: center; - } - - .pagination-other-pages-list { - flex: 0 0 auto; - display: flex; - justify-content: center; - padding: 0; - margin: 0; - list-style: none; - - > li { - flex: 0 0 auto; - user-select: none; - - a { - text-decoration: none; - background-color: $euiColorLightestShade; - margin-left: $euiSizeXS / 2; - padding: $euiSizeS $euiSizeM; - } - - a:hover { - text-decoration: underline; - } - - &.active a { - text-decoration: none !important; - font-weight: $euiFontWeightBold; - color: $euiColorDarkShade; - cursor: default; - } - } - } - - .pagination-size { - flex: 0 0 auto; - - input[type=number] { - width: 3em; - } - } - } -} diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index 041a02a251e8a..01627d29605f5 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -259,6 +259,7 @@ export class DashboardPlugin category: DEFAULT_APP_CATEGORIES.kibana, mount: async (params: AppMountParameters) => { const [coreStart, pluginsStart, dashboardStart] = await core.getStartServices(); + pluginsStart.kibanaLegacy.loadStyles(); this.currentHistory = params.history; appMounted(); const { diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 1aaa0a24357ed..69df2a75b8d75 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -103,3 +103,15 @@ discover-app { right: $euiSizeM; top: $euiSizeXS; } + +[fixed-scroll] { + overflow-x: auto; + padding-bottom: 0; + + + .fixed-scroll-scroller { + position: fixed; + bottom: 0; + overflow-x: auto; + overflow-y: hidden; + } +} diff --git a/src/plugins/discover/public/plugin.ts b/src/plugins/discover/public/plugin.ts index e97ac783c616f..4363eb6c5a50f 100644 --- a/src/plugins/discover/public/plugin.ts +++ b/src/plugins/discover/public/plugin.ts @@ -239,6 +239,7 @@ export class DiscoverPlugin defaultPath: '#/', category: DEFAULT_APP_CATEGORIES.kibana, mount: async (params: AppMountParameters) => { + const [, pluginsStart] = await core.getStartServices(); if (!this.initializeServices) { throw Error('Discover plugin method initializeServices is undefined'); } @@ -252,6 +253,7 @@ export class DiscoverPlugin plugins: { data: dataStart }, } = await this.initializeServices(); await this.initializeInnerAngular(); + pluginsStart.kibanaLegacy.loadStyles(); // make sure the index pattern list is up to date await dataStart.indexPatterns.clearCache(); diff --git a/src/plugins/kibana_legacy/public/plugin.ts b/src/plugins/kibana_legacy/public/plugin.ts index 59ce88c07f4f4..38ad2b90c4aea 100644 --- a/src/plugins/kibana_legacy/public/plugin.ts +++ b/src/plugins/kibana_legacy/public/plugin.ts @@ -129,6 +129,13 @@ export class KibanaLegacyPlugin { loadFontAwesome: async () => { await import('./font_awesome'); }, + /** + * Loads legacy styles. Should be removed once everything is cleaned up or migrated to plugins + * @deprecated + */ + loadStyles: async () => { + await import('./styles'); + }, /** * @deprecated * Just exported for wiring up with legacy platform, should not be used. diff --git a/src/legacy/ui/public/styles/_legacy/_base.scss b/src/plugins/kibana_legacy/public/styles/_base.scss similarity index 68% rename from src/legacy/ui/public/styles/_legacy/_base.scss rename to src/plugins/kibana_legacy/public/styles/_base.scss index 25429b9857921..6cb1f47066311 100644 --- a/src/legacy/ui/public/styles/_legacy/_base.scss +++ b/src/plugins/kibana_legacy/public/styles/_base.scss @@ -1,5 +1,3 @@ -@import '@elastic/eui/src/components/collapsible_nav/variables'; - // Forms // Angular form states @@ -11,7 +9,6 @@ select.ng-invalid { border-color: $euiColorDanger !important; } } - input[type='radio'], input[type='checkbox'], .radio, @@ -50,62 +47,10 @@ input[type='checkbox'], overflow: hidden; } -.application, .app-container { > * { position: relative; } - - > config { - z-index: 1; - } - - > navbar { - padding-bottom: $euiSizeS; - } - - > nav, - > navbar { - z-index: 2 !important; - } -} - -.application { - position: relative; - z-index: 0; - display: flex; - flex-grow: 1; - flex-shrink: 0; - flex-basis: auto; - flex-direction: column; - - > * { - flex-shrink: 0; - } -} - -[fixed-scroll] { - overflow-x: auto; - padding-bottom: 0; - - + .fixed-scroll-scroller { - position: fixed; - bottom: 0; - overflow-x: auto; - overflow-y: hidden; - } -} - -// Too overused in many places to be moved elsewhere - -.page-row { - padding: 0 $euiSize; - margin: $euiSize 0; -} - -.page-row-text { - color: $euiColorDarkShade; - font-size: $euiFontSizeS; } // We apply brute force focus states to anything not coming from Eui @@ -147,11 +92,6 @@ input[type='checkbox'], .smallest { font-size: 0.7em !important; } - -.text-monospace { - font-family: $euiCodeFontFamily; -} - select { color: $euiTextColor; background-color: $euiColorEmptyShade; diff --git a/src/plugins/kibana_legacy/public/styles/_index.scss b/src/plugins/kibana_legacy/public/styles/_index.scss new file mode 100644 index 0000000000000..05ff46ee09ed2 --- /dev/null +++ b/src/plugins/kibana_legacy/public/styles/_index.scss @@ -0,0 +1,6 @@ +// // +// // KIBANA THEME +@import 'src/plugins/kibana_legacy/public/styles/base'; + +// // Component +@import 'src/plugins/kibana_legacy/public/styles/paginate'; diff --git a/src/plugins/kibana_legacy/public/styles/_paginate.scss b/src/plugins/kibana_legacy/public/styles/_paginate.scss new file mode 100644 index 0000000000000..350f4f730c300 --- /dev/null +++ b/src/plugins/kibana_legacy/public/styles/_paginate.scss @@ -0,0 +1,57 @@ +aginate { + display: block; + + paginate-controls { + display: flex; + align-items: center; + padding: $euiSizeXS $euiSizeXS $euiSizeS; + text-align: center; + + .pagination-other-pages { + flex: 1 0 auto; + display: flex; + justify-content: center; + } + + .pagination-other-pages-list { + flex: 0 0 auto; + display: flex; + justify-content: center; + padding: 0; + margin: 0; + list-style: none; + + > li { + flex: 0 0 auto; + user-select: none; + + a { + text-decoration: none; + background-color: $euiColorLightestShade; + margin-left: $euiSizeXS / 2; + padding: $euiSizeS $euiSizeM; + } + + a:hover { + text-decoration: underline; + } + + &.active a { + text-decoration: none !important; + font-weight: $euiFontWeightBold; + color: $euiColorDarkShade; + cursor: default; + } + } + } + + .pagination-size { + flex: 0 0 auto; + + input[type=number] { + width: 3em; + } + } + } +} + diff --git a/src/plugins/kibana_legacy/public/styles/index.ts b/src/plugins/kibana_legacy/public/styles/index.ts new file mode 100644 index 0000000000000..093a4a20c0efd --- /dev/null +++ b/src/plugins/kibana_legacy/public/styles/index.ts @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import './_index.scss'; diff --git a/src/plugins/visualize/public/plugin.ts b/src/plugins/visualize/public/plugin.ts index fd9a67599414f..2213e0e46531c 100644 --- a/src/plugins/visualize/public/plugin.ts +++ b/src/plugins/visualize/public/plugin.ts @@ -121,6 +121,7 @@ export class VisualizePlugin mount: async (params: AppMountParameters) => { const [coreStart, pluginsStart] = await core.getStartServices(); this.currentHistory = params.history; + pluginsStart.kibanaLegacy.loadStyles(); // make sure the index pattern list is up to date pluginsStart.data.indexPatterns.clearCache(); From d9bc0b51ca9b8964ee3b1d351b9482eaeaa34c7a Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 2 Jul 2020 13:10:31 +0200 Subject: [PATCH 06/29] Adapt mocks.ts --- src/plugins/kibana_legacy/public/mocks.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/kibana_legacy/public/mocks.ts b/src/plugins/kibana_legacy/public/mocks.ts index a3cdb2106523c..cf527f45d75b3 100644 --- a/src/plugins/kibana_legacy/public/mocks.ts +++ b/src/plugins/kibana_legacy/public/mocks.ts @@ -38,6 +38,7 @@ const createStartContract = (): Start => ({ navigateToDefaultApp: jest.fn(), navigateToLegacyKibanaUrl: jest.fn(), loadFontAwesome: jest.fn(), + loadStyles: jest.fn(), }); export const kibanaLegacyPluginMock = { From 390b937e0587c50dbcf1f9ec8bf31ccac6ebfb17 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Mon, 6 Jul 2020 16:42:51 +0200 Subject: [PATCH 07/29] Migrate even more SCSS --- .../core_plugins/timelion/public/plugin.ts | 1 + src/legacy/ui/public/styles/_mixins.scss | 29 ++----------------- .../kibana_legacy/public/styles/_base.scss | 1 + .../kibana_legacy/public/styles/_mixins.scss | 24 +++++++++++++++ .../public/region_map_visualization.js | 1 + x-pack/plugins/graph/public/application.ts | 1 + x-pack/plugins/ml/public/application/app.tsx | 1 + x-pack/plugins/monitoring/public/plugin.ts | 1 + 8 files changed, 32 insertions(+), 27 deletions(-) create mode 100644 src/plugins/kibana_legacy/public/styles/_mixins.scss diff --git a/src/legacy/core_plugins/timelion/public/plugin.ts b/src/legacy/core_plugins/timelion/public/plugin.ts index 1f837303a2b3d..b7dedba749500 100644 --- a/src/legacy/core_plugins/timelion/public/plugin.ts +++ b/src/legacy/core_plugins/timelion/public/plugin.ts @@ -68,6 +68,7 @@ export class TimelionPlugin implements Plugin, void> { public start(core: CoreStart, { kibanaLegacy }: { kibanaLegacy: KibanaLegacyStart }) { kibanaLegacy.loadFontAwesome(); + kibanaLegacy.loadStyles(); } public stop(): void {} diff --git a/src/legacy/ui/public/styles/_mixins.scss b/src/legacy/ui/public/styles/_mixins.scss index c0dc456000dcc..c1b2734a83a05 100644 --- a/src/legacy/ui/public/styles/_mixins.scss +++ b/src/legacy/ui/public/styles/_mixins.scss @@ -1,28 +1,3 @@ -@mixin flex-parent($grow: 1, $shrink: 1, $basis: auto, $direction: column) { - flex: $grow $shrink $basis; - display: flex; - flex-direction: $direction; - - > * { - flex-shrink: 0; - } -} - -// EUITODO: Add this -@mixin kibanaCircleLogo() { - display: inline-block; - @include size($euiSizeXXL * 2); - line-height: $euiSizeXXL * 2; - text-align: center; - background-color: $euiColorEmptyShade; - border-radius: 100%; - padding: $euiSize; - - .euiIcon { - vertical-align: baseline; - } -} - // Standardizes the look and layout of resizable area handles @mixin kbnResizer($size: ($euiSizeM + 2px), $direction: horizontal) { position: relative; @@ -105,12 +80,12 @@ @keyframes kibanaFullScreenGraphics_FadeIn { from { opacity: 0; - transform: translateY(200px), scale(.75); + transform: translateY(200px) scale(.75); } to { opacity: 1; - transform: translateY(0), scale(1); + transform: translateY(0) scale(1); } } } diff --git a/src/plugins/kibana_legacy/public/styles/_base.scss b/src/plugins/kibana_legacy/public/styles/_base.scss index 6cb1f47066311..02892854ca2bf 100644 --- a/src/plugins/kibana_legacy/public/styles/_base.scss +++ b/src/plugins/kibana_legacy/public/styles/_base.scss @@ -1,3 +1,4 @@ +@import '@elastic/eui/src/components/collapsible_nav/variables'; // Forms // Angular form states diff --git a/src/plugins/kibana_legacy/public/styles/_mixins.scss b/src/plugins/kibana_legacy/public/styles/_mixins.scss new file mode 100644 index 0000000000000..e3c56cc196662 --- /dev/null +++ b/src/plugins/kibana_legacy/public/styles/_mixins.scss @@ -0,0 +1,24 @@ +@mixin flex-parent($grow: 1, $shrink: 1, $basis: auto, $direction: column) { + flex: $grow $shrink $basis; + display: flex; + flex-direction: $direction; + + > * { + flex-shrink: 0; + } +} + +// EUITODO: Add this +@mixin kibanaCircleLogo() { + display: inline-block; + @include size($euiSizeXXL * 2); + line-height: $euiSizeXXL * 2; + text-align: center; + background-color: $euiColorEmptyShade; + border-radius: 100%; + padding: $euiSize; + + .euiIcon { + vertical-align: baseline; + } +} diff --git a/src/plugins/region_map/public/region_map_visualization.js b/src/plugins/region_map/public/region_map_visualization.js index 002d020fcd568..4d4991562ee4e 100644 --- a/src/plugins/region_map/public/region_map_visualization.js +++ b/src/plugins/region_map/public/region_map_visualization.js @@ -39,6 +39,7 @@ export function createRegionMapVisualization({ async render(esResponse, visParams) { getKibanaLegacy().loadFontAwesome(); + getKibanaLegacy().loadStyles(); await super.render(esResponse, visParams); if (this._choroplethLayer) { await this._choroplethLayer.whenDataLoaded(); diff --git a/x-pack/plugins/graph/public/application.ts b/x-pack/plugins/graph/public/application.ts index 0969b80bc38b0..c82769d1df7b8 100644 --- a/x-pack/plugins/graph/public/application.ts +++ b/x-pack/plugins/graph/public/application.ts @@ -73,6 +73,7 @@ export interface GraphDependencies { export const renderApp = ({ appBasePath, element, kibanaLegacy, ...deps }: GraphDependencies) => { kibanaLegacy.loadFontAwesome(); + kibanaLegacy.loadStyles(); const graphAngularModule = createLocalAngularModule(deps.navigation); configureAppAngularModule( graphAngularModule, diff --git a/x-pack/plugins/ml/public/application/app.tsx b/x-pack/plugins/ml/public/application/app.tsx index 9d5125532e5b8..b7a6bccc2798c 100644 --- a/x-pack/plugins/ml/public/application/app.tsx +++ b/x-pack/plugins/ml/public/application/app.tsx @@ -100,6 +100,7 @@ export const renderApp = ( }); deps.kibanaLegacy.loadFontAwesome(); + deps.kibanaLegacy.loadStyles(); appMountParams.onAppLeave((actions) => actions.default()); diff --git a/x-pack/plugins/monitoring/public/plugin.ts b/x-pack/plugins/monitoring/public/plugin.ts index de8c8d59b78bf..52923501c330a 100644 --- a/x-pack/plugins/monitoring/public/plugin.ts +++ b/x-pack/plugins/monitoring/public/plugin.ts @@ -80,6 +80,7 @@ export class MonitoringPlugin }; pluginsStart.kibanaLegacy.loadFontAwesome(); + pluginsStart.kibanaLegacy.loadStyles(); this.setInitialTimefilter(deps); this.overrideAlertingEmailDefaults(deps); From 32572d930f4239bb68a7043d02a9cfba0311999a Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Mon, 6 Jul 2020 20:19:37 +0200 Subject: [PATCH 08/29] Add Karma mock for loadStyles --- src/legacy/ui/public/new_platform/new_platform.karma_mock.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/legacy/ui/public/new_platform/new_platform.karma_mock.js b/src/legacy/ui/public/new_platform/new_platform.karma_mock.js index 35380ada51a0a..82d1d20fdb879 100644 --- a/src/legacy/ui/public/new_platform/new_platform.karma_mock.js +++ b/src/legacy/ui/public/new_platform/new_platform.karma_mock.js @@ -380,6 +380,7 @@ export const npStart = { kibanaLegacy: { getForwards: () => [], loadFontAwesome: () => {}, + loadStyles: () => {}, config: { defaultAppId: 'home', }, From d498031979805525ba2879e55c9663233388417b Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 7 Jul 2020 08:00:42 +0200 Subject: [PATCH 09/29] Undo mixin extraction --- src/legacy/ui/public/styles/_mixins.scss | 24 +++++++++++++++++++ .../kibana_legacy/public/styles/_base.scss | 15 ++++++++++++ .../kibana_legacy/public/styles/_index.scss | 4 ++-- .../kibana_legacy/public/styles/_mixins.scss | 24 ------------------- 4 files changed, 41 insertions(+), 26 deletions(-) delete mode 100644 src/plugins/kibana_legacy/public/styles/_mixins.scss diff --git a/src/legacy/ui/public/styles/_mixins.scss b/src/legacy/ui/public/styles/_mixins.scss index c1b2734a83a05..fc9fbf9909619 100644 --- a/src/legacy/ui/public/styles/_mixins.scss +++ b/src/legacy/ui/public/styles/_mixins.scss @@ -1,3 +1,27 @@ +@mixin flex-parent($grow: 1, $shrink: 1, $basis: auto, $direction: column) { + flex: $grow $shrink $basis; + display: flex; + flex-direction: $direction; + + > * { + flex-shrink: 0; + } +} + +// EUITODO: Add this +@mixin kibanaCircleLogo() { + display: inline-block; + @include size($euiSizeXXL * 2); + line-height: $euiSizeXXL * 2; + text-align: center; + background-color: $euiColorEmptyShade; + border-radius: 100%; + padding: $euiSize; + + .euiIcon { + vertical-align: baseline; + } +} // Standardizes the look and layout of resizable area handles @mixin kbnResizer($size: ($euiSizeM + 2px), $direction: horizontal) { position: relative; diff --git a/src/plugins/kibana_legacy/public/styles/_base.scss b/src/plugins/kibana_legacy/public/styles/_base.scss index 02892854ca2bf..30a31e116acc3 100644 --- a/src/plugins/kibana_legacy/public/styles/_base.scss +++ b/src/plugins/kibana_legacy/public/styles/_base.scss @@ -48,12 +48,27 @@ input[type='checkbox'], overflow: hidden; } +.application, .app-container { > * { position: relative; } } +.application { + position: relative; + z-index: 0; + display: flex; + flex-grow: 1; + flex-shrink: 0; + flex-basis: auto; + flex-direction: column; + + > * { + flex-shrink: 0; + } +} + // We apply brute force focus states to anything not coming from Eui // which has focus states designed at the component level. // You can also use "kbn-resetFocusState" to not apply the default focus diff --git a/src/plugins/kibana_legacy/public/styles/_index.scss b/src/plugins/kibana_legacy/public/styles/_index.scss index 05ff46ee09ed2..353f900d84041 100644 --- a/src/plugins/kibana_legacy/public/styles/_index.scss +++ b/src/plugins/kibana_legacy/public/styles/_index.scss @@ -1,6 +1,6 @@ // // // // KIBANA THEME -@import 'src/plugins/kibana_legacy/public/styles/base'; +@import './base'; // // Component -@import 'src/plugins/kibana_legacy/public/styles/paginate'; +@import './paginate'; diff --git a/src/plugins/kibana_legacy/public/styles/_mixins.scss b/src/plugins/kibana_legacy/public/styles/_mixins.scss deleted file mode 100644 index e3c56cc196662..0000000000000 --- a/src/plugins/kibana_legacy/public/styles/_mixins.scss +++ /dev/null @@ -1,24 +0,0 @@ -@mixin flex-parent($grow: 1, $shrink: 1, $basis: auto, $direction: column) { - flex: $grow $shrink $basis; - display: flex; - flex-direction: $direction; - - > * { - flex-shrink: 0; - } -} - -// EUITODO: Add this -@mixin kibanaCircleLogo() { - display: inline-block; - @include size($euiSizeXXL * 2); - line-height: $euiSizeXXL * 2; - text-align: center; - background-color: $euiColorEmptyShade; - border-radius: 100%; - padding: $euiSize; - - .euiIcon { - vertical-align: baseline; - } -} From 66b9ee7cdce889eef9d86bf45a715072b823c505 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 8 Jul 2020 15:08:47 +0200 Subject: [PATCH 10/29] Adapt canvas code --- src/legacy/ui/public/styles/_mixins.scss | 1 + x-pack/plugins/canvas/kibana.json | 2 +- x-pack/plugins/canvas/public/plugin.tsx | 3 +++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/legacy/ui/public/styles/_mixins.scss b/src/legacy/ui/public/styles/_mixins.scss index fc9fbf9909619..03562d7115784 100644 --- a/src/legacy/ui/public/styles/_mixins.scss +++ b/src/legacy/ui/public/styles/_mixins.scss @@ -22,6 +22,7 @@ vertical-align: baseline; } } + // Standardizes the look and layout of resizable area handles @mixin kbnResizer($size: ($euiSizeM + 2px), $direction: horizontal) { position: relative; diff --git a/x-pack/plugins/canvas/kibana.json b/x-pack/plugins/canvas/kibana.json index 2d6ab43228aa1..715b1468f59a2 100644 --- a/x-pack/plugins/canvas/kibana.json +++ b/x-pack/plugins/canvas/kibana.json @@ -5,6 +5,6 @@ "configPath": ["xpack", "canvas"], "server": true, "ui": true, - "requiredPlugins": ["data", "embeddable", "expressions", "features", "home", "inspector", "uiActions"], + "requiredPlugins": ["data", "embeddable", "expressions", "features", "home", "inspector", "uiActions","kibanaLegacy"], "optionalPlugins": ["usageCollection"] } diff --git a/x-pack/plugins/canvas/public/plugin.tsx b/x-pack/plugins/canvas/public/plugin.tsx index 4829a94bb0db8..856ca0b307802 100644 --- a/x-pack/plugins/canvas/public/plugin.tsx +++ b/x-pack/plugins/canvas/public/plugin.tsx @@ -29,6 +29,7 @@ import { argTypeSpecs } from './expression_types/arg_types'; import { transitions } from './transitions'; import { getPluginApi, CanvasApi } from './plugin_api'; import { CanvasSrcPlugin } from '../canvas_plugin_src/plugin'; +import { KibanaLegacyStart } from '../../../../src/plugins/kibana_legacy/public'; export { CoreStart, CoreSetup }; /** @@ -48,6 +49,7 @@ export interface CanvasStartDeps { expressions: ExpressionsStart; inspector: InspectorStart; uiActions: UiActionsStart; + kibanaLegacy: KibanaLegacyStart; } /** @@ -126,6 +128,7 @@ export class CanvasPlugin public start(core: CoreStart, plugins: CanvasStartDeps) { this.srcPlugin.start(core, plugins); + plugins.kibanaLegacy.loadStyles(); initLoadingIndicator(core.http.addLoadingCountSource); } } From 8acbb82540b397664834269d7cf668fb79778fc8 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 8 Jul 2020 18:14:44 +0200 Subject: [PATCH 11/29] Adapt management code --- src/plugins/management/public/plugin.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/plugins/management/public/plugin.ts b/src/plugins/management/public/plugin.ts index dada4636e6add..b2b5e6f2b4e4f 100644 --- a/src/plugins/management/public/plugin.ts +++ b/src/plugins/management/public/plugin.ts @@ -29,11 +29,16 @@ import { } from '../../../core/public'; import { ManagementSectionsService } from './management_sections_service'; +import { KibanaLegacyStart } from '../../kibana_legacy/public'; interface ManagementSetupDependencies { home: HomePublicPluginSetup; } +interface ManagementStartDependencies { + kibanaLegacy: KibanaLegacyStart; +} + export class ManagementPlugin implements Plugin { private readonly managementSections = new ManagementSectionsService(); @@ -80,7 +85,8 @@ export class ManagementPlugin implements Plugin Date: Thu, 9 Jul 2020 11:24:58 +0200 Subject: [PATCH 12/29] Add kibanaLegacy to security --- x-pack/plugins/security/kibana.json | 2 +- x-pack/plugins/security/public/plugin.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/security/kibana.json b/x-pack/plugins/security/kibana.json index 7d1940e393bec..ce90f4744a9b6 100644 --- a/x-pack/plugins/security/kibana.json +++ b/x-pack/plugins/security/kibana.json @@ -3,7 +3,7 @@ "version": "8.0.0", "kibanaVersion": "kibana", "configPath": ["xpack", "security"], - "requiredPlugins": ["data", "features", "licensing"], + "requiredPlugins": ["data", "features", "licensing", "kibanaLegacy"], "optionalPlugins": ["home", "management"], "server": true, "ui": true diff --git a/x-pack/plugins/security/public/plugin.tsx b/x-pack/plugins/security/public/plugin.tsx index da69dd051c11d..fc67dfa619f49 100644 --- a/x-pack/plugins/security/public/plugin.tsx +++ b/x-pack/plugins/security/public/plugin.tsx @@ -32,6 +32,7 @@ import { AuthenticationService, AuthenticationServiceSetup } from './authenticat import { ConfigType } from './config'; import { ManagementService } from './management'; import { accountManagementApp } from './account_management'; +import { KibanaLegacyStart } from '../../../../src/plugins/kibana_legacy/public'; export interface PluginSetupDependencies { licensing: LicensingPluginSetup; @@ -43,6 +44,7 @@ export interface PluginStartDependencies { data: DataPublicPluginStart; features: FeaturesPluginStart; management?: ManagementStart; + kibanaLegacy?: KibanaLegacyStart; } export class SecurityPlugin @@ -136,9 +138,10 @@ export class SecurityPlugin }; } - public start(core: CoreStart, { management }: PluginStartDependencies) { + public start(core: CoreStart, { management, kibanaLegacy }: PluginStartDependencies) { this.sessionTimeout.start(); this.navControlService.start({ core }); + kibanaLegacy.loadStyles(); if (management) { this.managementService.start({ management }); From cb3e7a9649063294f05a315d6312844da59e4965 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 14 Jul 2020 08:30:57 +0200 Subject: [PATCH 13/29] Remove CSS transform --- src/legacy/ui/public/styles/_mixins.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/legacy/ui/public/styles/_mixins.scss b/src/legacy/ui/public/styles/_mixins.scss index 03562d7115784..e335ef88a01b5 100644 --- a/src/legacy/ui/public/styles/_mixins.scss +++ b/src/legacy/ui/public/styles/_mixins.scss @@ -105,12 +105,10 @@ @keyframes kibanaFullScreenGraphics_FadeIn { from { opacity: 0; - transform: translateY(200px) scale(.75); } to { opacity: 1; - transform: translateY(0) scale(1); } } } From 120385c448572ba5133b5d5607e86da0d5cd7370 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 14 Jul 2020 09:15:32 +0200 Subject: [PATCH 14/29] Undo security app modifications --- x-pack/plugins/security/kibana.json | 2 +- x-pack/plugins/security/public/plugin.tsx | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/security/kibana.json b/x-pack/plugins/security/kibana.json index 31397bd04686e..0daab9d5dbce3 100644 --- a/x-pack/plugins/security/kibana.json +++ b/x-pack/plugins/security/kibana.json @@ -3,7 +3,7 @@ "version": "8.0.0", "kibanaVersion": "kibana", "configPath": ["xpack", "security"], - "requiredPlugins": ["data", "features", "licensing", "kibanaLegacy"], + "requiredPlugins": ["data", "features", "licensing"], "optionalPlugins": ["home", "management"], "server": true, "ui": true, diff --git a/x-pack/plugins/security/public/plugin.tsx b/x-pack/plugins/security/public/plugin.tsx index fc67dfa619f49..da69dd051c11d 100644 --- a/x-pack/plugins/security/public/plugin.tsx +++ b/x-pack/plugins/security/public/plugin.tsx @@ -32,7 +32,6 @@ import { AuthenticationService, AuthenticationServiceSetup } from './authenticat import { ConfigType } from './config'; import { ManagementService } from './management'; import { accountManagementApp } from './account_management'; -import { KibanaLegacyStart } from '../../../../src/plugins/kibana_legacy/public'; export interface PluginSetupDependencies { licensing: LicensingPluginSetup; @@ -44,7 +43,6 @@ export interface PluginStartDependencies { data: DataPublicPluginStart; features: FeaturesPluginStart; management?: ManagementStart; - kibanaLegacy?: KibanaLegacyStart; } export class SecurityPlugin @@ -138,10 +136,9 @@ export class SecurityPlugin }; } - public start(core: CoreStart, { management, kibanaLegacy }: PluginStartDependencies) { + public start(core: CoreStart, { management }: PluginStartDependencies) { this.sessionTimeout.start(); this.navControlService.start({ core }); - kibanaLegacy.loadStyles(); if (management) { this.managementService.start({ management }); From 75a0a70b8d2899ca42ee16cb251b6ef516547399 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 14 Jul 2020 11:27:19 +0200 Subject: [PATCH 15/29] Remove unnecessary import --- src/legacy/ui/public/_index.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/legacy/ui/public/_index.scss b/src/legacy/ui/public/_index.scss index e05dcced15009..a441b773d4a4e 100644 --- a/src/legacy/ui/public/_index.scss +++ b/src/legacy/ui/public/_index.scss @@ -1,6 +1,3 @@ -// Legacy styles to come before all -@import 'src/plugins/kibana_legacy/public/styles/index'; - // Prefix all styles with "kbn" to avoid conflicts. // Examples // kbnChart From 750c71732ebcb70981e2f25ff44ef27fcdf87aa7 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 15 Jul 2020 09:35:33 +0200 Subject: [PATCH 16/29] Add missing p to aginate so it's paginate again --- src/plugins/kibana_legacy/public/styles/_paginate.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/kibana_legacy/public/styles/_paginate.scss b/src/plugins/kibana_legacy/public/styles/_paginate.scss index 350f4f730c300..e9c1acaf9ee0d 100644 --- a/src/plugins/kibana_legacy/public/styles/_paginate.scss +++ b/src/plugins/kibana_legacy/public/styles/_paginate.scss @@ -1,4 +1,4 @@ -aginate { +paginate { display: block; paginate-controls { From 988e4be3e8075fe5a6090ee8848f1c3b98c384ae Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 15 Jul 2020 10:08:00 +0200 Subject: [PATCH 17/29] Remove uiSelect classes from ML _hacks.scss --- .../plugins/ml/public/application/_hacks.scss | 36 ------------------- 1 file changed, 36 deletions(-) diff --git a/x-pack/plugins/ml/public/application/_hacks.scss b/x-pack/plugins/ml/public/application/_hacks.scss index 39740360d8a84..63fec4e74b796 100644 --- a/x-pack/plugins/ml/public/application/_hacks.scss +++ b/x-pack/plugins/ml/public/application/_hacks.scss @@ -18,42 +18,6 @@ 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; - } - } - - .btn { - border: 1px solid $euiColorLightShade; - background-color: $euiColorEmptyShade; - color: $euiColorDarkestShade; - } - } - -.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; From f0676bdfdae8da0991c256cfdb05ac7cbfb14713 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 09:07:30 +0200 Subject: [PATCH 18/29] Move base styles to src/core/public/styles --- src/core/public/index.scss | 1 + src/core/public/styles/_ace_overrides.scss | 202 ++++++++++++++++++ src/core/public/styles/_base.scss | 58 +++++ src/core/public/styles/_index.scss | 2 + .../{styles => paginate}/_paginate.scss | 0 .../kibana_legacy/public/paginate/paginate.js | 1 + .../kibana_legacy/public/styles/_base.scss | 86 +------- .../kibana_legacy/public/styles/_index.scss | 5 - .../timelion/public/directives/_form.scss | 33 +++ .../directives/_saved_object_finder.scss | 25 +++ 10 files changed, 326 insertions(+), 87 deletions(-) create mode 100644 src/core/public/styles/_ace_overrides.scss create mode 100644 src/core/public/styles/_base.scss create mode 100644 src/core/public/styles/_index.scss rename src/plugins/kibana_legacy/public/{styles => paginate}/_paginate.scss (100%) create mode 100644 src/plugins/timelion/public/directives/_form.scss create mode 100644 src/plugins/timelion/public/directives/_saved_object_finder.scss diff --git a/src/core/public/index.scss b/src/core/public/index.scss index cfce9eacccb13..c2ad2841d5a77 100644 --- a/src/core/public/index.scss +++ b/src/core/public/index.scss @@ -2,4 +2,5 @@ @import './chrome/index'; @import './overlays/index'; @import './rendering/index'; +@import './styles/index'; diff --git a/src/core/public/styles/_ace_overrides.scss b/src/core/public/styles/_ace_overrides.scss new file mode 100644 index 0000000000000..30acdbbc80975 --- /dev/null +++ b/src/core/public/styles/_ace_overrides.scss @@ -0,0 +1,202 @@ +// SASSTODO: Replace with an EUI editor +// Intentionally not using the EuiCodeBlock colors here because they actually change +// hue from light to dark theme. So some colors would change while others wouldn't. +// Seemed weird, so just hexing all the colors but using the `makeHighContrastColor()` +// function to ensure accessible contrast. + +// In order to override the TM (Textmate) theme of Ace/Brace, everywhere, +// it is being scoped by a known outer selector +.application { + .ace-tm { + $aceBackground: tintOrShade($euiColorLightShade, 50%, 0); + + background-color: $euiColorLightestShade; + color: $euiTextColor; + + .ace_scrollbar { + @include euiScrollBar; + } + + .ace_gutter-active-line, + .ace_marker-layer .ace_active-line { + background-color: transparentize($euiColorLightShade, .3); + } + + .ace_snippet-marker { + width: 100%; + background-color: $aceBackground; + border: none; + } + + .ace_indent-guide { + background: linear-gradient(to left, $euiColorMediumShade 0%, $euiColorMediumShade 1px, transparent 1px, transparent 100%); + } + + .ace_search { + z-index: $euiZLevel1 + 1; + } + + .ace_layer.ace_marker-layer { + overflow: visible; + } + + .ace_warning { + color: $euiColorDanger; + } + + .ace_method { + color: makeHighContrastColor(#DD0A73, $aceBackground); + } + + .ace_url, + .ace_start_triple_quote, + .ace_end_triple_quote { + color: makeHighContrastColor(#00A69B, $aceBackground); + } + + .ace_multi_string { + color: makeHighContrastColor(#009926, $aceBackground); + font-style: italic; + } + + .ace_gutter { + background-color: $euiColorEmptyShade; + color: $euiColorDarkShade; + border-left: 1px solid $aceBackground; + } + + .ace_print-margin { + width: 1px; + background: $euiColorLightShade; + } + + .ace_fold { + background-color: #6B72E6; + } + + .ace_cursor { + color: $euiColorFullShade; + } + + .ace_invisible { + color: $euiColorLightShade; + } + + .ace_storage, + .ace_keyword { + color: makeHighContrastColor(#0079A5, $aceBackground); + } + + .ace_constant { + color: makeHighContrastColor(#900, $aceBackground); + } + + .ace_constant.ace_buildin { + color: makeHighContrastColor(rgb(88, 72, 246), $aceBackground); + } + + .ace_constant.ace_language { + color: makeHighContrastColor(rgb(88, 92, 246), $aceBackground); + } + + .ace_constant.ace_library { + color: makeHighContrastColor(#009926, $aceBackground); + } + + .ace_invalid { + background-color: euiCallOutColor('danger', 'background'); + color: euiCallOutColor('danger', 'foreground'); + } + + .ace_support.ace_function { + color: makeHighContrastColor(rgb(60, 76, 114), $aceBackground); + } + + .ace_support.ace_constant { + color: makeHighContrastColor(#009926, $aceBackground); + } + + .ace_support.ace_type, + .ace_support.ace_class { + color: makeHighContrastColor(rgb(109, 121, 222), $aceBackground); + } + + .ace_keyword.ace_operator { + color: makeHighContrastColor($euiColorDarkShade, $aceBackground); + } + + .ace_string { + color: makeHighContrastColor(#009926, $aceBackground); + } + + .ace_comment { + color: makeHighContrastColor(rgb(76, 136, 107), $aceBackground); + } + + .ace_comment.ace_doc { + color: makeHighContrastColor(#0079A5, $aceBackground); + } + + .ace_comment.ace_doc.ace_tag { + color: makeHighContrastColor($euiColorMediumShade, $aceBackground); + } + + .ace_constant.ace_numeric { + color: makeHighContrastColor(#0079A5, $aceBackground); + } + + .ace_variable { + color: makeHighContrastColor(#0079A5, $aceBackground); + } + + .ace_xml-pe { + color: makeHighContrastColor($euiColorDarkShade, $aceBackground); + } + + .ace_entity.ace_name.ace_function { + color: makeHighContrastColor(#0000A2, $aceBackground); + } + + .ace_heading { + color: makeHighContrastColor(rgb(12, 7, 255), $aceBackground); + } + + .ace_list { + color: makeHighContrastColor(rgb(185, 6, 144), $aceBackground); + } + + .ace_meta.ace_tag { + color: makeHighContrastColor(rgb(0, 22, 142), $aceBackground); + } + + .ace_string.ace_regex { + color: makeHighContrastColor(rgb(255, 0, 0), $aceBackground); + } + + .ace_marker-layer .ace_selection { + background: tintOrShade($euiColorPrimary, 70%, 70%); + } + + &.ace_multiselect .ace_selection.ace_start { + box-shadow: 0 0 3px 0 $euiColorEmptyShade; + } + + .ace_marker-layer .ace_step { + background: tintOrShade($euiColorWarning, 80%, 80%); + } + + .ace_marker-layer .ace_stack { + background: tintOrShade($euiColorSuccess, 80%, 80%); + } + + .ace_marker-layer .ace_bracket { + margin: -1px 0 0 -1px; + border: $euiBorderThin; + } + + .ace_marker-layer .ace_selected-word { + background: $euiColorLightestShade; + border: $euiBorderThin; + } + } +} diff --git a/src/core/public/styles/_base.scss b/src/core/public/styles/_base.scss new file mode 100644 index 0000000000000..9b06b526fc7dd --- /dev/null +++ b/src/core/public/styles/_base.scss @@ -0,0 +1,58 @@ +@import '@elastic/eui/src/components/collapsible_nav/variables'; +// Application Layout + +// chrome-context +// TODO #64541 +// Delete this block +.chrHeaderWrapper:not(.headerWrapper) .content { + display: flex; + flex-flow: row nowrap; + width: 100%; + height: 100%; + overflow: hidden; +} + +.application, +.app-container { + > * { + position: relative; + } +} + +.application { + position: relative; + z-index: 0; + display: flex; + flex-grow: 1; + flex-shrink: 0; + flex-basis: auto; + flex-direction: column; + + > * { + flex-shrink: 0; + } +} + +// We apply brute force focus states to anything not coming from Eui +// which has focus states designed at the component level. +// You can also use "kbn-resetFocusState" to not apply the default focus +// state. This is useful when you've already hand crafted your own +// focus states in Kibana. +:focus { + &:not([class^='eui']):not(.kbn-resetFocusState) { + @include euiFocusRing; + } +} + +// A necessary hack so that the above focus policy doesn't pollute some EUI +// entrenched inputs. +.euiComboBox { + // :not() specificity needed to override the above + input:not([class^='eui']):focus { + animation: none !important; + } +} + +.euiBody--collapsibleNavIsDocked .euiBottomBar { + margin-left: $euiCollapsibleNavWidth; +} diff --git a/src/core/public/styles/_index.scss b/src/core/public/styles/_index.scss new file mode 100644 index 0000000000000..600414402c278 --- /dev/null +++ b/src/core/public/styles/_index.scss @@ -0,0 +1,2 @@ +@import './base'; +@import './ace_overrides'; diff --git a/src/plugins/kibana_legacy/public/styles/_paginate.scss b/src/plugins/kibana_legacy/public/paginate/_paginate.scss similarity index 100% rename from src/plugins/kibana_legacy/public/styles/_paginate.scss rename to src/plugins/kibana_legacy/public/paginate/_paginate.scss diff --git a/src/plugins/kibana_legacy/public/paginate/paginate.js b/src/plugins/kibana_legacy/public/paginate/paginate.js index ea93a969d08c7..f424c33ba7b02 100644 --- a/src/plugins/kibana_legacy/public/paginate/paginate.js +++ b/src/plugins/kibana_legacy/public/paginate/paginate.js @@ -19,6 +19,7 @@ import _ from 'lodash'; import { i18n } from '@kbn/i18n'; +import './_paginate.scss'; import paginateControlsTemplate from './paginate_controls.html'; export function PaginateDirectiveProvider($parse, $compile) { diff --git a/src/plugins/kibana_legacy/public/styles/_base.scss b/src/plugins/kibana_legacy/public/styles/_base.scss index 30a31e116acc3..fd17faae0d0e2 100644 --- a/src/plugins/kibana_legacy/public/styles/_base.scss +++ b/src/plugins/kibana_legacy/public/styles/_base.scss @@ -13,9 +13,7 @@ select.ng-invalid { input[type='radio'], input[type='checkbox'], .radio, -.radio-inline, -.checkbox, -.checkbox-inline { +.checkbox { &[disabled], fieldset[disabled] & { cursor: default; @@ -23,74 +21,9 @@ input[type='checkbox'], } } -.checkbox label { - display: flex; - align-items: center; - padding-left: 0 !important; - - input[type='checkbox'] { - float: none; - margin: 0 $euiSizeXS; - position: static; - } -} - -// Application Layout - -// chrome-context -// TODO #64541 -// Delete this block -.chrHeaderWrapper:not(.headerWrapper) .content { - display: flex; - flex-flow: row nowrap; - width: 100%; - height: 100%; - overflow: hidden; -} - -.application, -.app-container { - > * { - position: relative; - } -} - -.application { - position: relative; - z-index: 0; - display: flex; - flex-grow: 1; - flex-shrink: 0; - flex-basis: auto; - flex-direction: column; - - > * { - flex-shrink: 0; - } -} - -// We apply brute force focus states to anything not coming from Eui -// which has focus states designed at the component level. -// You can also use "kbn-resetFocusState" to not apply the default focus -// state. This is useful when you've already hand crafted your own -// focus states in Kibana. -:focus { - &:not([class^='eui']):not(.kbn-resetFocusState) { - @include euiFocusRing; - } -} - -// A necessary hack so that the above focus policy doesn't pollute some EUI -// entrenched inputs. -.euiComboBox { - // :not() specificity needed to override the above - input:not([class^='eui']):focus { - animation: none !important; - } -} - -.euiBody--collapsibleNavIsDocked .euiBottomBar { - margin-left: $euiCollapsibleNavWidth; +select { + color: $euiTextColor; + background-color: $euiColorEmptyShade; } // Utility classes @@ -102,14 +35,3 @@ input[type='checkbox'], .small { font-size: 0.9em !important; } -.smaller { - font-size: 0.8em !important; -} -.smallest { - font-size: 0.7em !important; -} -select { - color: $euiTextColor; - background-color: $euiColorEmptyShade; -} - diff --git a/src/plugins/kibana_legacy/public/styles/_index.scss b/src/plugins/kibana_legacy/public/styles/_index.scss index 353f900d84041..c8567498b42ec 100644 --- a/src/plugins/kibana_legacy/public/styles/_index.scss +++ b/src/plugins/kibana_legacy/public/styles/_index.scss @@ -1,6 +1 @@ -// // -// // KIBANA THEME @import './base'; - -// // Component -@import './paginate'; diff --git a/src/plugins/timelion/public/directives/_form.scss b/src/plugins/timelion/public/directives/_form.scss new file mode 100644 index 0000000000000..f5f63487bf49e --- /dev/null +++ b/src/plugins/timelion/public/directives/_form.scss @@ -0,0 +1,33 @@ +.form-control { + @include euiFontSizeS; + display: block; + width: 100%; + height: $euiFormControlCompressedHeight; + padding: $euiSizeXS $euiSizeM; + border: $euiBorderThin; + background-color: $euiFormBackgroundColor; + color: $euiTextColor; + border-radius: $euiBorderRadius; + cursor: pointer; + + &:not([type='range']) { + appearance: none; + } + + &:focus { + border-color: $euiColorPrimary; + outline: none; + box-shadow: none; + } +} + +// sass-lint:disable-block no-qualifying-elements +select.form-control { + // Makes the select arrow similar to EUI's arrowDown icon + background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="#{hexToRGB($euiTextColor)}" d="M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z"/%3E%3C/svg%3E'); + background-size: $euiSize; + background-repeat: no-repeat; + background-position: calc(100% - #{$euiSizeS}); + padding-right: $euiSizeXL; + +} diff --git a/src/plugins/timelion/public/directives/_saved_object_finder.scss b/src/plugins/timelion/public/directives/_saved_object_finder.scss new file mode 100644 index 0000000000000..b97dace5e9e00 --- /dev/null +++ b/src/plugins/timelion/public/directives/_saved_object_finder.scss @@ -0,0 +1,25 @@ +.list-group-menu { + &.select-mode a { + outline: none; + color: tintOrShade($euiColorPrimary, 10%, 10%); + } + + .list-group-menu-item { + list-style: none; + color: tintOrShade($euiColorPrimary, 10%, 10%); + + &.active { + font-weight: bold; + background-color: $euiColorLightShade; + } + + &:hover { + background-color: tintOrShade($euiColorPrimary, 90%, 90%); + } + + li { + list-style: none; + color: tintOrShade($euiColorPrimary, 10%, 10%); + } + } +} From cc714b1b92790163de0f66f8ddd35a8e8620a822 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 09:14:16 +0200 Subject: [PATCH 19/29] Undo canvas changes --- x-pack/plugins/canvas/public/plugin.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/x-pack/plugins/canvas/public/plugin.tsx b/x-pack/plugins/canvas/public/plugin.tsx index 856ca0b307802..4829a94bb0db8 100644 --- a/x-pack/plugins/canvas/public/plugin.tsx +++ b/x-pack/plugins/canvas/public/plugin.tsx @@ -29,7 +29,6 @@ import { argTypeSpecs } from './expression_types/arg_types'; import { transitions } from './transitions'; import { getPluginApi, CanvasApi } from './plugin_api'; import { CanvasSrcPlugin } from '../canvas_plugin_src/plugin'; -import { KibanaLegacyStart } from '../../../../src/plugins/kibana_legacy/public'; export { CoreStart, CoreSetup }; /** @@ -49,7 +48,6 @@ export interface CanvasStartDeps { expressions: ExpressionsStart; inspector: InspectorStart; uiActions: UiActionsStart; - kibanaLegacy: KibanaLegacyStart; } /** @@ -128,7 +126,6 @@ export class CanvasPlugin public start(core: CoreStart, plugins: CanvasStartDeps) { this.srcPlugin.start(core, plugins); - plugins.kibanaLegacy.loadStyles(); initLoadingIndicator(core.http.addLoadingCountSource); } } From 834bd5a20f66048ac496866318d4538480e5f924 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 09:16:10 +0200 Subject: [PATCH 20/29] Undo graph changes --- x-pack/plugins/graph/public/application.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/graph/public/application.ts b/x-pack/plugins/graph/public/application.ts index c82769d1df7b8..0969b80bc38b0 100644 --- a/x-pack/plugins/graph/public/application.ts +++ b/x-pack/plugins/graph/public/application.ts @@ -73,7 +73,6 @@ export interface GraphDependencies { export const renderApp = ({ appBasePath, element, kibanaLegacy, ...deps }: GraphDependencies) => { kibanaLegacy.loadFontAwesome(); - kibanaLegacy.loadStyles(); const graphAngularModule = createLocalAngularModule(deps.navigation); configureAppAngularModule( graphAngularModule, From 9f7da91b4c0d5b73e39e08ca2e3e32a1ec739f2d Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 09:17:34 +0200 Subject: [PATCH 21/29] Undo management changes --- src/plugins/management/public/plugin.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/plugins/management/public/plugin.ts b/src/plugins/management/public/plugin.ts index 3cbc734df9e9c..17d8cb4adc701 100644 --- a/src/plugins/management/public/plugin.ts +++ b/src/plugins/management/public/plugin.ts @@ -33,16 +33,11 @@ import { ManagementSectionsService, getSectionsServiceStartPrivate, } from './management_sections_service'; -import { KibanaLegacyStart } from '../../kibana_legacy/public'; interface ManagementSetupDependencies { home: HomePublicPluginSetup; } -interface ManagementStartDependencies { - kibanaLegacy: KibanaLegacyStart; -} - export class ManagementPlugin implements Plugin { private readonly managementSections = new ManagementSectionsService(); @@ -90,8 +85,7 @@ export class ManagementPlugin implements Plugin Date: Thu, 16 Jul 2020 09:25:38 +0200 Subject: [PATCH 22/29] Undo monitoring changes --- x-pack/plugins/monitoring/public/plugin.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/monitoring/public/plugin.ts b/x-pack/plugins/monitoring/public/plugin.ts index 5cbadaca42d0e..1b9ae75a0968e 100644 --- a/x-pack/plugins/monitoring/public/plugin.ts +++ b/x-pack/plugins/monitoring/public/plugin.ts @@ -93,7 +93,6 @@ export class MonitoringPlugin }; pluginsStart.kibanaLegacy.loadFontAwesome(); - pluginsStart.kibanaLegacy.loadStyles(); this.setInitialTimefilter(deps); const monitoringApp = new AngularApp(deps); From 3879c40f716ff798fb8c23985dbfc94a248cf8ee Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 09:30:50 +0200 Subject: [PATCH 23/29] Remove kibana_legacy dependency of canvas kibana.json --- x-pack/plugins/canvas/kibana.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/canvas/kibana.json b/x-pack/plugins/canvas/kibana.json index 84685cb1e4060..5f4ea5802cb13 100644 --- a/x-pack/plugins/canvas/kibana.json +++ b/x-pack/plugins/canvas/kibana.json @@ -5,7 +5,7 @@ "configPath": ["xpack", "canvas"], "server": true, "ui": true, - "requiredPlugins": ["data", "embeddable", "expressions", "features", "home", "inspector", "uiActions", "kibanaLegacy"], + "requiredPlugins": ["data", "embeddable", "expressions", "features", "home", "inspector", "uiActions"], "optionalPlugins": ["usageCollection"], "requiredBundles": ["kibanaReact", "maps", "lens", "visualizations", "kibanaUtils", "kibanaLegacy", "discover", "savedObjects", "reporting"] } From 4259724851f844997d93c48d08bec8c8e154749f Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 09:50:29 +0200 Subject: [PATCH 24/29] Improve discover plugin code --- .../public/{application => }/_hacks.scss | 0 src/plugins/discover/public/_mixins.scss | 25 +++++++++++++++++++ .../discover/public/application/_index.scss | 2 ++ .../angular/doc_table/_doc_table.scss | 25 ------------------- .../public/{application => }/index.scss | 9 ++----- src/plugins/discover/public/plugin.ts | 3 +-- 6 files changed, 30 insertions(+), 34 deletions(-) rename src/plugins/discover/public/{application => }/_hacks.scss (100%) create mode 100644 src/plugins/discover/public/_mixins.scss create mode 100644 src/plugins/discover/public/application/_index.scss rename src/plugins/discover/public/{application => }/index.scss (56%) diff --git a/src/plugins/discover/public/application/_hacks.scss b/src/plugins/discover/public/_hacks.scss similarity index 100% rename from src/plugins/discover/public/application/_hacks.scss rename to src/plugins/discover/public/_hacks.scss diff --git a/src/plugins/discover/public/_mixins.scss b/src/plugins/discover/public/_mixins.scss new file mode 100644 index 0000000000000..0b3f41bff5789 --- /dev/null +++ b/src/plugins/discover/public/_mixins.scss @@ -0,0 +1,25 @@ +/** +* Style ES document _source in table view
key:
value
+* Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted +* row in the Context Log. +*/ +@mixin dscDocSourceStyle { + dl.source { + margin-bottom: 0; + line-height:2em; + word-break: break-word; + + dt, dd { + display: inline; + } + + dt { + background-color: transparentize(shade($euiColorPrimary, 20%), .9); + color: $euiTextColor; + padding: ($euiSizeXS / 2) $euiSizeXS; + margin-right: $euiSizeXS; + word-break: normal; + border-radius: $euiBorderRadius; + } + } +} diff --git a/src/plugins/discover/public/application/_index.scss b/src/plugins/discover/public/application/_index.scss new file mode 100644 index 0000000000000..5aa353828274c --- /dev/null +++ b/src/plugins/discover/public/application/_index.scss @@ -0,0 +1,2 @@ +@import 'angular/index'; +@import 'discover'; diff --git a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss index 6dcd21ec26954..02311f3ec85aa 100644 --- a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss +++ b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss @@ -1,28 +1,3 @@ -/** -* Style ES document _source in table view
key:
value
-* Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted -* row in the Context Log. -*/ -@mixin dscDocSourceStyle { - dl.source { - margin-bottom: 0; - line-height:2em; - word-break: break-word; - - dt, dd { - display: inline; - } - - dt { - background-color: transparentize(shade($euiColorPrimary, 20%), .9); - color: $euiTextColor; - padding: ($euiSizeXS / 2) $euiSizeXS; - margin-right: $euiSizeXS; - word-break: normal; - border-radius: $euiBorderRadius; - } - } -} /** * 1. Stack content vertically so the table can scroll when its constrained by a fixed container height. */ diff --git a/src/plugins/discover/public/application/index.scss b/src/plugins/discover/public/index.scss similarity index 56% rename from src/plugins/discover/public/application/index.scss rename to src/plugins/discover/public/index.scss index 39abbb7721d79..81e13851a0784 100644 --- a/src/plugins/discover/public/application/index.scss +++ b/src/plugins/discover/public/index.scss @@ -1,12 +1,7 @@ // Discover plugin styles -@import 'discover'; -@import 'hacks'; - // Prefix all styles with "dsc" to avoid conflicts. // Examples // dscTable // dscTable__footer -// monChart__legend--small -// monChart__legend-isLoading - -@import 'angular/index'; +@import 'hacks'; +@import 'mixins'; diff --git a/src/plugins/discover/public/plugin.ts b/src/plugins/discover/public/plugin.ts index a6fd0954007ac..353cee0a328ae 100644 --- a/src/plugins/discover/public/plugin.ts +++ b/src/plugins/discover/public/plugin.ts @@ -21,6 +21,7 @@ import { i18n } from '@kbn/i18n'; import angular, { auto } from 'angular'; import { BehaviorSubject } from 'rxjs'; import { filter, map } from 'rxjs/operators'; +import './index.scss'; import { AppMountParameters, @@ -240,7 +241,6 @@ export class DiscoverPlugin defaultPath: '#/', category: DEFAULT_APP_CATEGORIES.kibana, mount: async (params: AppMountParameters) => { - const [, pluginsStart] = await core.getStartServices(); if (!this.initializeServices) { throw Error('Discover plugin method initializeServices is undefined'); } @@ -254,7 +254,6 @@ export class DiscoverPlugin plugins: { data: dataStart }, } = await this.initializeServices(); await this.initializeInnerAngular(); - pluginsStart.kibanaLegacy.loadStyles(); // make sure the index pattern list is up to date await dataStart.indexPatterns.clearCache(); From 4d526b1c2044315c76e76f82c195c5df28a883d0 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 09:57:04 +0200 Subject: [PATCH 25/29] Undo ML change --- x-pack/plugins/ml/public/application/app.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/ml/public/application/app.tsx b/x-pack/plugins/ml/public/application/app.tsx index 7a6c09562ef83..cf645404860f5 100644 --- a/x-pack/plugins/ml/public/application/app.tsx +++ b/x-pack/plugins/ml/public/application/app.tsx @@ -100,7 +100,6 @@ export const renderApp = ( }); deps.kibanaLegacy.loadFontAwesome(); - deps.kibanaLegacy.loadStyles(); appMountParams.onAppLeave((actions) => actions.default()); From 8bb8c90e084119b9f246cbe12fefa42a55ce88e9 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 10:19:53 +0200 Subject: [PATCH 26/29] Migrate utility classes --- src/plugins/kibana_legacy/public/styles/_base.scss | 10 ---------- src/plugins/timelion/public/_app.scss | 1 - src/plugins/timelion/public/directives/_form.scss | 3 +++ .../vis_type_table/public/agg_table/_agg_table.scss | 4 ++++ 4 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/plugins/kibana_legacy/public/styles/_base.scss b/src/plugins/kibana_legacy/public/styles/_base.scss index fd17faae0d0e2..d2024fe69be8f 100644 --- a/src/plugins/kibana_legacy/public/styles/_base.scss +++ b/src/plugins/kibana_legacy/public/styles/_base.scss @@ -25,13 +25,3 @@ select { color: $euiTextColor; background-color: $euiColorEmptyShade; } - -// Utility classes - -.fullWidth { - width: 100% !important; -} - -.small { - font-size: 0.9em !important; -} diff --git a/src/plugins/timelion/public/_app.scss b/src/plugins/timelion/public/_app.scss index 0b40969937e2a..3142e1d23cf10 100644 --- a/src/plugins/timelion/public/_app.scss +++ b/src/plugins/timelion/public/_app.scss @@ -22,4 +22,3 @@ font-weight: $euiFontWeightRegular; color: $euiColorMediumShade; } - diff --git a/src/plugins/timelion/public/directives/_form.scss b/src/plugins/timelion/public/directives/_form.scss index f5f63487bf49e..3fcf70700a864 100644 --- a/src/plugins/timelion/public/directives/_form.scss +++ b/src/plugins/timelion/public/directives/_form.scss @@ -29,5 +29,8 @@ select.form-control { background-repeat: no-repeat; background-position: calc(100% - #{$euiSizeS}); padding-right: $euiSizeXL; +} +.fullWidth { + width: 100%; } diff --git a/src/plugins/vis_type_table/public/agg_table/_agg_table.scss b/src/plugins/vis_type_table/public/agg_table/_agg_table.scss index 0fffb21eab0fb..4bbc4eb034f8d 100644 --- a/src/plugins/vis_type_table/public/agg_table/_agg_table.scss +++ b/src/plugins/vis_type_table/public/agg_table/_agg_table.scss @@ -36,3 +36,7 @@ kbn-agg-table-group { padding: 0; } } + +.small { + font-size: 0.9em !important; +} From fe7368e5163368d61b97274f065202d5fe1d14e4 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 12:53:57 +0200 Subject: [PATCH 27/29] Improve Discover styles --- src/plugins/discover/public/_hacks.scss | 4 --- src/plugins/discover/public/_mixins.scss | 25 -------------- .../angular/doc_table/_doc_table.scss | 34 ++++++++++++++++--- .../application/{_index.scss => index.scss} | 0 src/plugins/discover/public/index.scss | 7 ---- src/plugins/discover/public/plugin.ts | 1 - 6 files changed, 30 insertions(+), 41 deletions(-) delete mode 100644 src/plugins/discover/public/_hacks.scss delete mode 100644 src/plugins/discover/public/_mixins.scss rename src/plugins/discover/public/application/{_index.scss => index.scss} (100%) delete mode 100644 src/plugins/discover/public/index.scss diff --git a/src/plugins/discover/public/_hacks.scss b/src/plugins/discover/public/_hacks.scss deleted file mode 100644 index 9bbe9cd14fd91..0000000000000 --- a/src/plugins/discover/public/_hacks.scss +++ /dev/null @@ -1,4 +0,0 @@ -// SASSTODO: the classname is dynamically generated with ng-class -.tab-discover { - overflow: hidden; -} diff --git a/src/plugins/discover/public/_mixins.scss b/src/plugins/discover/public/_mixins.scss deleted file mode 100644 index 0b3f41bff5789..0000000000000 --- a/src/plugins/discover/public/_mixins.scss +++ /dev/null @@ -1,25 +0,0 @@ -/** -* Style ES document _source in table view
key:
value
-* Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted -* row in the Context Log. -*/ -@mixin dscDocSourceStyle { - dl.source { - margin-bottom: 0; - line-height:2em; - word-break: break-word; - - dt, dd { - display: inline; - } - - dt { - background-color: transparentize(shade($euiColorPrimary, 20%), .9); - color: $euiTextColor; - padding: ($euiSizeXS / 2) $euiSizeXS; - margin-right: $euiSizeXS; - word-break: normal; - border-radius: $euiBorderRadius; - } - } -} diff --git a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss index 02311f3ec85aa..7d05171622e7b 100644 --- a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss +++ b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss @@ -27,7 +27,6 @@ doc-table { } .kbnDocTable { - @include dscDocSourceStyle; font-size: $euiFontSizeXS; th { @@ -40,6 +39,35 @@ doc-table { } } +.kbn-table, +.kbnDocTable { + /** + * Style ES document _source in table view
key:
value
+ * Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted + * row in the Context Log. + */ + + dl.source { + margin-bottom: 0; + line-height: 2em; + word-break: break-word; + + dt, + dd { + display: inline; + } + + dt { + background-color: transparentize(shade($euiColorPrimary, 20%), 0.9); + color: $euiTextColor; + padding: ($euiSizeXS / 2) $euiSizeXS; + margin-right: $euiSizeXS; + word-break: normal; + border-radius: $euiBorderRadius; + } + } +} + .kbnDocTable__row { td { position: relative; @@ -91,8 +119,7 @@ doc-table { } } -kbn-table, .kbn-table, tbody[kbn-rows] { - @include dscDocSourceStyle; +.kbn-table { // sub tables should not have a leading border .table .table { margin-bottom: 0; @@ -128,4 +155,3 @@ table { } } } - diff --git a/src/plugins/discover/public/application/_index.scss b/src/plugins/discover/public/application/index.scss similarity index 100% rename from src/plugins/discover/public/application/_index.scss rename to src/plugins/discover/public/application/index.scss diff --git a/src/plugins/discover/public/index.scss b/src/plugins/discover/public/index.scss deleted file mode 100644 index 81e13851a0784..0000000000000 --- a/src/plugins/discover/public/index.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Discover plugin styles -// Prefix all styles with "dsc" to avoid conflicts. -// Examples -// dscTable -// dscTable__footer -@import 'hacks'; -@import 'mixins'; diff --git a/src/plugins/discover/public/plugin.ts b/src/plugins/discover/public/plugin.ts index 353cee0a328ae..20e13d204e0e9 100644 --- a/src/plugins/discover/public/plugin.ts +++ b/src/plugins/discover/public/plugin.ts @@ -21,7 +21,6 @@ import { i18n } from '@kbn/i18n'; import angular, { auto } from 'angular'; import { BehaviorSubject } from 'rxjs'; import { filter, map } from 'rxjs/operators'; -import './index.scss'; import { AppMountParameters, From 8ceb8bef952b3cd7c2342856f85ae0084f4aec49 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 16 Jul 2020 15:55:53 +0200 Subject: [PATCH 28/29] Remove loadStyles() since its no longer needed --- .../new_platform/new_platform.karma_mock.js | 1 - src/plugins/dashboard/public/plugin.tsx | 1 - src/plugins/kibana_legacy/public/mocks.ts | 1 - src/plugins/kibana_legacy/public/plugin.ts | 7 ----- .../kibana_legacy/public/styles/_base.scss | 27 ------------------- .../kibana_legacy/public/styles/_index.scss | 1 - .../kibana_legacy/public/styles/index.ts | 20 -------------- .../public/region_map_visualization.js | 1 - src/plugins/timelion/public/_base.scss | 19 +++++++++++++ src/plugins/timelion/public/index.scss | 1 + src/plugins/timelion/public/plugin.ts | 1 - src/plugins/visualize/public/plugin.ts | 1 - 12 files changed, 20 insertions(+), 61 deletions(-) delete mode 100644 src/plugins/kibana_legacy/public/styles/_base.scss delete mode 100644 src/plugins/kibana_legacy/public/styles/_index.scss delete mode 100644 src/plugins/kibana_legacy/public/styles/index.ts create mode 100644 src/plugins/timelion/public/_base.scss diff --git a/src/legacy/ui/public/new_platform/new_platform.karma_mock.js b/src/legacy/ui/public/new_platform/new_platform.karma_mock.js index 82d1d20fdb879..35380ada51a0a 100644 --- a/src/legacy/ui/public/new_platform/new_platform.karma_mock.js +++ b/src/legacy/ui/public/new_platform/new_platform.karma_mock.js @@ -380,7 +380,6 @@ export const npStart = { kibanaLegacy: { getForwards: () => [], loadFontAwesome: () => {}, - loadStyles: () => {}, config: { defaultAppId: 'home', }, diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx index 01627d29605f5..041a02a251e8a 100644 --- a/src/plugins/dashboard/public/plugin.tsx +++ b/src/plugins/dashboard/public/plugin.tsx @@ -259,7 +259,6 @@ export class DashboardPlugin category: DEFAULT_APP_CATEGORIES.kibana, mount: async (params: AppMountParameters) => { const [coreStart, pluginsStart, dashboardStart] = await core.getStartServices(); - pluginsStart.kibanaLegacy.loadStyles(); this.currentHistory = params.history; appMounted(); const { diff --git a/src/plugins/kibana_legacy/public/mocks.ts b/src/plugins/kibana_legacy/public/mocks.ts index cf527f45d75b3..a3cdb2106523c 100644 --- a/src/plugins/kibana_legacy/public/mocks.ts +++ b/src/plugins/kibana_legacy/public/mocks.ts @@ -38,7 +38,6 @@ const createStartContract = (): Start => ({ navigateToDefaultApp: jest.fn(), navigateToLegacyKibanaUrl: jest.fn(), loadFontAwesome: jest.fn(), - loadStyles: jest.fn(), }); export const kibanaLegacyPluginMock = { diff --git a/src/plugins/kibana_legacy/public/plugin.ts b/src/plugins/kibana_legacy/public/plugin.ts index 38ad2b90c4aea..59ce88c07f4f4 100644 --- a/src/plugins/kibana_legacy/public/plugin.ts +++ b/src/plugins/kibana_legacy/public/plugin.ts @@ -129,13 +129,6 @@ export class KibanaLegacyPlugin { loadFontAwesome: async () => { await import('./font_awesome'); }, - /** - * Loads legacy styles. Should be removed once everything is cleaned up or migrated to plugins - * @deprecated - */ - loadStyles: async () => { - await import('./styles'); - }, /** * @deprecated * Just exported for wiring up with legacy platform, should not be used. diff --git a/src/plugins/kibana_legacy/public/styles/_base.scss b/src/plugins/kibana_legacy/public/styles/_base.scss deleted file mode 100644 index d2024fe69be8f..0000000000000 --- a/src/plugins/kibana_legacy/public/styles/_base.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import '@elastic/eui/src/components/collapsible_nav/variables'; -// Forms - -// Angular form states -input.ng-invalid, -textarea.ng-invalid, -select.ng-invalid { - &.ng-dirty, - &.ng-touched { - border-color: $euiColorDanger !important; - } -} -input[type='radio'], -input[type='checkbox'], -.radio, -.checkbox { - &[disabled], - fieldset[disabled] & { - cursor: default; - opacity: 0.8; - } -} - -select { - color: $euiTextColor; - background-color: $euiColorEmptyShade; -} diff --git a/src/plugins/kibana_legacy/public/styles/_index.scss b/src/plugins/kibana_legacy/public/styles/_index.scss deleted file mode 100644 index c8567498b42ec..0000000000000 --- a/src/plugins/kibana_legacy/public/styles/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './base'; diff --git a/src/plugins/kibana_legacy/public/styles/index.ts b/src/plugins/kibana_legacy/public/styles/index.ts deleted file mode 100644 index 093a4a20c0efd..0000000000000 --- a/src/plugins/kibana_legacy/public/styles/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import './_index.scss'; diff --git a/src/plugins/region_map/public/region_map_visualization.js b/src/plugins/region_map/public/region_map_visualization.js index ac5407ada6be5..43959c367558f 100644 --- a/src/plugins/region_map/public/region_map_visualization.js +++ b/src/plugins/region_map/public/region_map_visualization.js @@ -41,7 +41,6 @@ export function createRegionMapVisualization({ async render(esResponse, visParams) { getKibanaLegacy().loadFontAwesome(); - getKibanaLegacy().loadStyles(); await super.render(esResponse, visParams); if (this._choroplethLayer) { await this._choroplethLayer.whenDataLoaded(); diff --git a/src/plugins/timelion/public/_base.scss b/src/plugins/timelion/public/_base.scss new file mode 100644 index 0000000000000..616ac9b3486e7 --- /dev/null +++ b/src/plugins/timelion/public/_base.scss @@ -0,0 +1,19 @@ +// Angular form states +.ng-invalid { + &.ng-dirty, + &.ng-touched { + border-color: $euiColorDanger; + } +} + +input[type='radio'], +input[type='checkbox'], +.radio, +.checkbox { + &[disabled], + fieldset[disabled] & { + cursor: default; + opacity: .8; + } +} + diff --git a/src/plugins/timelion/public/index.scss b/src/plugins/timelion/public/index.scss index cf2a7859a505d..6bf7133287c51 100644 --- a/src/plugins/timelion/public/index.scss +++ b/src/plugins/timelion/public/index.scss @@ -8,4 +8,5 @@ // timChart__legend-isLoading @import './app'; +@import './base'; @import './directives/index'; diff --git a/src/plugins/timelion/public/plugin.ts b/src/plugins/timelion/public/plugin.ts index facd3fefb1b8e..a92ced20cb6d1 100644 --- a/src/plugins/timelion/public/plugin.ts +++ b/src/plugins/timelion/public/plugin.ts @@ -124,7 +124,6 @@ export class TimelionPlugin implements Plugin { public start(core: CoreStart, { kibanaLegacy }: { kibanaLegacy: KibanaLegacyStart }) { kibanaLegacy.loadFontAwesome(); - kibanaLegacy.loadStyles(); } public stop(): void { diff --git a/src/plugins/visualize/public/plugin.ts b/src/plugins/visualize/public/plugin.ts index 2213e0e46531c..fd9a67599414f 100644 --- a/src/plugins/visualize/public/plugin.ts +++ b/src/plugins/visualize/public/plugin.ts @@ -121,7 +121,6 @@ export class VisualizePlugin mount: async (params: AppMountParameters) => { const [coreStart, pluginsStart] = await core.getStartServices(); this.currentHistory = params.history; - pluginsStart.kibanaLegacy.loadStyles(); // make sure the index pattern list is up to date pluginsStart.data.indexPatterns.clearCache(); From bbb07b1318027bf982ac7c9979705d098d6b6598 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Fri, 17 Jul 2020 10:16:53 +0200 Subject: [PATCH 29/29] Remove duplicates timelion files --- .../timelion/public/directives/_form.scss | 33 ------------------- .../directives/_saved_object_finder.scss | 25 -------------- 2 files changed, 58 deletions(-) delete mode 100644 src/legacy/core_plugins/timelion/public/directives/_form.scss delete mode 100644 src/legacy/core_plugins/timelion/public/directives/_saved_object_finder.scss diff --git a/src/legacy/core_plugins/timelion/public/directives/_form.scss b/src/legacy/core_plugins/timelion/public/directives/_form.scss deleted file mode 100644 index f5f63487bf49e..0000000000000 --- a/src/legacy/core_plugins/timelion/public/directives/_form.scss +++ /dev/null @@ -1,33 +0,0 @@ -.form-control { - @include euiFontSizeS; - display: block; - width: 100%; - height: $euiFormControlCompressedHeight; - padding: $euiSizeXS $euiSizeM; - border: $euiBorderThin; - background-color: $euiFormBackgroundColor; - color: $euiTextColor; - border-radius: $euiBorderRadius; - cursor: pointer; - - &:not([type='range']) { - appearance: none; - } - - &:focus { - border-color: $euiColorPrimary; - outline: none; - box-shadow: none; - } -} - -// sass-lint:disable-block no-qualifying-elements -select.form-control { - // Makes the select arrow similar to EUI's arrowDown icon - background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="#{hexToRGB($euiTextColor)}" d="M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z"/%3E%3C/svg%3E'); - background-size: $euiSize; - background-repeat: no-repeat; - background-position: calc(100% - #{$euiSizeS}); - padding-right: $euiSizeXL; - -} diff --git a/src/legacy/core_plugins/timelion/public/directives/_saved_object_finder.scss b/src/legacy/core_plugins/timelion/public/directives/_saved_object_finder.scss deleted file mode 100644 index b97dace5e9e00..0000000000000 --- a/src/legacy/core_plugins/timelion/public/directives/_saved_object_finder.scss +++ /dev/null @@ -1,25 +0,0 @@ -.list-group-menu { - &.select-mode a { - outline: none; - color: tintOrShade($euiColorPrimary, 10%, 10%); - } - - .list-group-menu-item { - list-style: none; - color: tintOrShade($euiColorPrimary, 10%, 10%); - - &.active { - font-weight: bold; - background-color: $euiColorLightShade; - } - - &:hover { - background-color: tintOrShade($euiColorPrimary, 90%, 90%); - } - - li { - list-style: none; - color: tintOrShade($euiColorPrimary, 10%, 10%); - } - } -}