From 2d334b699c3986d6ff414318c1b1e9859aed607e Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Mon, 28 Jan 2019 22:36:24 -0500 Subject: [PATCH] Prepare local nav styles for K7 (#29457) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Breadcrumbs and Title on their own line - Menu on the left, datepicker on the right * Fixed up usages of kuiLocalTitle * Fix alignment if main menu doesn’t exist * Remove some extraneous classes --- packages/kbn-ui-framework/dist/kui_dark.css | 82 ++++++++++--------- packages/kbn-ui-framework/dist/kui_light.css | 82 ++++++++++--------- .../src/components/local_nav/_index.scss | 4 +- .../local_nav/_local_breadcrumbs.scss | 7 +- .../components/local_nav/_local_dropdown.scss | 2 - .../src/components/local_nav/_local_menu.scss | 25 +++--- .../src/components/local_nav/_local_nav.scss | 11 --- .../components/local_nav/_local_title.scss | 11 ++- .../kibana/public/context/app.html | 27 +++--- .../dashboard/top_nav/show_options_popover.js | 2 - .../kibana/public/discover/index.html | 8 +- .../core_plugins/kibana/public/doc/index.html | 20 ++--- .../public/visualize/editor/editor.html | 5 +- .../public/visualize/wizard/step_2.html | 1 + .../core_plugins/timelion/public/index.html | 4 +- .../public/partials/sheet_options.html | 2 +- src/ui/public/_index.scss | 2 + .../header_global_nav/_header_global_nav.scss | 8 +- src/ui/public/kbn_top_nav/_index.scss | 1 + src/ui/public/kbn_top_nav/_kbn_top_nav.scss | 31 +++++++ src/ui/public/kbn_top_nav/kbn_top_nav.html | 53 ++++++------ .../public/share/show_share_context_menu.tsx | 2 - src/ui/public/styles/bootstrap/variables.less | 2 +- .../plugins/graph/public/templates/index.html | 14 ++-- 24 files changed, 220 insertions(+), 186 deletions(-) create mode 100644 src/ui/public/kbn_top_nav/_index.scss create mode 100644 src/ui/public/kbn_top_nav/_kbn_top_nav.scss diff --git a/packages/kbn-ui-framework/dist/kui_dark.css b/packages/kbn-ui-framework/dist/kui_dark.css index a6ff66630647..55233e7cb527 100644 --- a/packages/kbn-ui-framework/dist/kui_dark.css +++ b/packages/kbn-ui-framework/dist/kui_dark.css @@ -1003,9 +1003,17 @@ main { -webkit-align-items: center; -ms-flex-align: center; align-items: center; - padding-left: 10px; + padding: 12px 8px; /* 1 */ - height: 100%; } + border-bottom: 1px solid #333; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + background-color: #222; } .kuiLocalBreadcrumb { font-size: 14px; @@ -1100,8 +1108,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0; - box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0; + -webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px transparent, 0 0 0 2px #4DA1C0; /* 3 */ color: #DDD; /* 1 */ } @@ -1147,8 +1155,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0; - box-shadow: 0 0 0 1px #242424, 0 0 0 2px #4DA1C0; + -webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #4DA1C0; + box-shadow: 0 0 0 1px transparent, 0 0 0 2px #4DA1C0; /* 3 */ color: #DDD; /* 1 */ } @@ -1170,10 +1178,8 @@ main { .kuiLocalDropdown { position: relative; - padding: 10px 10px 14px; - background-color: #242424; - border-bottom: solid 1px #333; - border-top: solid 1px #333; + padding: 10px 8px 14px; + background-color: transparent; margin-bottom: 10px; line-height: 20px; } @@ -1308,7 +1314,9 @@ main { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; - align-items: stretch; } + align-items: stretch; + padding-top: 8px; + padding-bottom: 8px; } .kuiLocalMenuItem { display: -webkit-box; @@ -1319,32 +1327,29 @@ main { -webkit-align-items: center; -ms-flex-align: center; align-items: center; - height: 100%; - padding: 0 10px; + padding: 2px 8px; font-size: 14px; background-color: transparent; color: #DDD; border: 0; cursor: pointer; - border-right: solid 1px transparent; - border-left: solid 1px transparent; } + border-bottom: solid 2px transparent; } .kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus { - background-color: #4DA1C0; - color: #242424; } + background-color: rgba(77, 161, 192, 0.15); + text-decoration: underline; } .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { - background-color: #242424; - border-color: #333; - height: calc(100% + 1px); - z-index: 2; - color: #4DA1C0; } + color: #4DA1C0; + background-color: transparent; + border-color: #4DA1C0; + z-index: 2; } .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus { - color: #4DA1C0; } + text-decoration: none; } .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled { opacity: 0.5; cursor: not-allowed; } .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { background-color: transparent; - color: #DDD; } + text-decoration: none; } .kuiLocalMenuItem__icon { margin-right: 5px; @@ -1390,11 +1395,7 @@ main { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; - justify-content: space-between; - min-height: 29px; - /* 1 */ - line-height: 29px; - /* 1 */ } + justify-content: space-between; } .kuiLocalNavRow__section { display: -webkit-box; @@ -1414,7 +1415,7 @@ main { * of this container using padding. */ .kuiLocalNavRow--secondary { - padding: 0 10px; + padding: 0 8px; /* 1 */ -webkit-box-align: start; -webkit-align-items: flex-start; @@ -1422,11 +1423,6 @@ main { align-items: flex-start; /* 1 */ } -.kuiLocalNav__popover { - height: 100%; } - .kuiLocalNav__popover .kuiLocalNav__popoverAnchor { - height: 100%; } - .kuiLocalSearch { display: -webkit-box; display: -webkit-flex; @@ -1632,9 +1628,21 @@ main { -ms-flex-align: center; align-items: center; height: 100%; - padding-left: 10px; + padding: 12px 8px; font-size: 14px; - font-weight: bold; } + font-weight: bold; + border-bottom: 1px solid #333; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + background-color: #222; } + .kuiLocalTitle:empty { + padding: 0; + display: none; } /** * 1. Allow class to be applied to `ul` and `ol` elements diff --git a/packages/kbn-ui-framework/dist/kui_light.css b/packages/kbn-ui-framework/dist/kui_light.css index defffab19bdb..5c1deeb12026 100644 --- a/packages/kbn-ui-framework/dist/kui_light.css +++ b/packages/kbn-ui-framework/dist/kui_light.css @@ -1003,9 +1003,17 @@ main { -webkit-align-items: center; -ms-flex-align: center; align-items: center; - padding-left: 10px; + padding: 12px 8px; /* 1 */ - height: 100%; } + border-bottom: 1px solid #D3DAE6; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + background-color: #FFF; } .kuiLocalBreadcrumb { font-size: 14px; @@ -1100,8 +1108,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4; + -webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4; /* 3 */ color: #2D2D2D; /* 1 */ } @@ -1147,8 +1155,8 @@ main { /* 1 */ outline: none !important; /* 2 */ - -webkit-box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4; - box-shadow: 0 0 0 1px #F5F7FA, 0 0 0 2px #006BB4; + -webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4; + box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4; /* 3 */ color: #2D2D2D; /* 1 */ } @@ -1170,10 +1178,8 @@ main { .kuiLocalDropdown { position: relative; - padding: 10px 10px 14px; - background-color: #F5F7FA; - border-bottom: solid 1px #D3DAE6; - border-top: solid 1px #D3DAE6; + padding: 10px 8px 14px; + background-color: transparent; margin-bottom: 10px; line-height: 20px; } @@ -1308,7 +1314,9 @@ main { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; - align-items: stretch; } + align-items: stretch; + padding-top: 8px; + padding-bottom: 8px; } .kuiLocalMenuItem { display: -webkit-box; @@ -1319,32 +1327,29 @@ main { -webkit-align-items: center; -ms-flex-align: center; align-items: center; - height: 100%; - padding: 0 10px; + padding: 2px 8px; font-size: 14px; background-color: transparent; color: #2D2D2D; border: 0; cursor: pointer; - border-right: solid 1px transparent; - border-left: solid 1px transparent; } + border-bottom: solid 2px transparent; } .kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus { - background-color: #006BB4; - color: #F5F7FA; } + background-color: rgba(0, 107, 180, 0.15); + text-decoration: underline; } .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { - background-color: #F5F7FA; - border-color: #D3DAE6; - height: calc(100% + 1px); - z-index: 2; - color: #006BB4; } + color: #006BB4; + background-color: transparent; + border-color: #006BB4; + z-index: 2; } .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus { - color: #006BB4; } + text-decoration: none; } .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled { opacity: 0.5; cursor: not-allowed; } .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { background-color: transparent; - color: #2D2D2D; } + text-decoration: none; } .kuiLocalMenuItem__icon { margin-right: 5px; @@ -1390,11 +1395,7 @@ main { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; - justify-content: space-between; - min-height: 29px; - /* 1 */ - line-height: 29px; - /* 1 */ } + justify-content: space-between; } .kuiLocalNavRow__section { display: -webkit-box; @@ -1414,7 +1415,7 @@ main { * of this container using padding. */ .kuiLocalNavRow--secondary { - padding: 0 10px; + padding: 0 8px; /* 1 */ -webkit-box-align: start; -webkit-align-items: flex-start; @@ -1422,11 +1423,6 @@ main { align-items: flex-start; /* 1 */ } -.kuiLocalNav__popover { - height: 100%; } - .kuiLocalNav__popover .kuiLocalNav__popoverAnchor { - height: 100%; } - .kuiLocalSearch { display: -webkit-box; display: -webkit-flex; @@ -1632,9 +1628,21 @@ main { -ms-flex-align: center; align-items: center; height: 100%; - padding-left: 10px; + padding: 12px 8px; font-size: 14px; - font-weight: bold; } + font-weight: bold; + border-bottom: 1px solid #D3DAE6; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + background-color: #FFF; } + .kuiLocalTitle:empty { + padding: 0; + display: none; } /** * 1. Allow class to be applied to `ul` and `ol` elements diff --git a/packages/kbn-ui-framework/src/components/local_nav/_index.scss b/packages/kbn-ui-framework/src/components/local_nav/_index.scss index 8ada90f15c90..761865d34c11 100644 --- a/packages/kbn-ui-framework/src/components/local_nav/_index.scss +++ b/packages/kbn-ui-framework/src/components/local_nav/_index.scss @@ -5,7 +5,7 @@ $localNavButtonTextColor: $kuiTextColor; $localNavButtonTextColor-isHover: $kuiColorLightestGray; $localNavButtonBackgroundColor: transparent; $localNavButtonBackgroundColor-isHover: $kuiColorBlue; -$localNavButtonBackgroundColor-isSelected: $kuiColorLightestGray; +$localNavButtonBackgroundColor-isSelected: transparent; $localNavBreadcrumbDelimiterColor: $euiBorderColor; $localSearchBackgroundColor: $euiColorGhost; $localSearchBorderColor-isInvalid: $euiColorDanger; @@ -22,7 +22,7 @@ $localDatePickerCellSelectedBackgroundColor: $euiColorDarkShade; $localDatePickerCellSelectedTextColor: $euiTextColor; // Spacing -$localNavSideSpacing: 10px; +$localNavSideSpacing: $euiSizeS; $localSearchHeight: 32px; $localDatePickerBottomSpacing: 4px; $localDatePickerButtonPadding: 3px 6px; diff --git a/packages/kbn-ui-framework/src/components/local_nav/_local_breadcrumbs.scss b/packages/kbn-ui-framework/src/components/local_nav/_local_breadcrumbs.scss index a5b7b357ddb2..48cffd02a437 100644 --- a/packages/kbn-ui-framework/src/components/local_nav/_local_breadcrumbs.scss +++ b/packages/kbn-ui-framework/src/components/local_nav/_local_breadcrumbs.scss @@ -5,8 +5,11 @@ .kuiLocalBreadcrumbs { display: flex; align-items: center; - padding-left: $localNavSideSpacing; /* 1 */ - height: 100%; + padding: ($localNavSideSpacing * 1.5) $localNavSideSpacing; /* 1 */ + border-bottom: $euiBorderThin; + flex-grow: 1; + flex-basis: 100%; + background-color: $euiColorEmptyShade; } .kuiLocalBreadcrumb { diff --git a/packages/kbn-ui-framework/src/components/local_nav/_local_dropdown.scss b/packages/kbn-ui-framework/src/components/local_nav/_local_dropdown.scss index 66373733fced..405d4f32df9a 100644 --- a/packages/kbn-ui-framework/src/components/local_nav/_local_dropdown.scss +++ b/packages/kbn-ui-framework/src/components/local_nav/_local_dropdown.scss @@ -2,8 +2,6 @@ position: relative; padding: 10px $localNavSideSpacing 14px; background-color: $localDropdownBackgroundColor; - border-bottom: solid 1px $kuiColorLightGray; - border-top: solid 1px $kuiColorLightGray; margin-bottom: 10px; line-height: 20px; } diff --git a/packages/kbn-ui-framework/src/components/local_nav/_local_menu.scss b/packages/kbn-ui-framework/src/components/local_nav/_local_menu.scss index 10c05427cddc..4feb5225d5b3 100644 --- a/packages/kbn-ui-framework/src/components/local_nav/_local_menu.scss +++ b/packages/kbn-ui-framework/src/components/local_nav/_local_menu.scss @@ -1,35 +1,34 @@ .kuiLocalMenu { display: flex; align-items: stretch; + padding-top: $euiSizeS; + padding-bottom: $euiSizeS; } .kuiLocalMenuItem { display: flex; align-items: center; - height: 100%; - padding: 0 $localNavSideSpacing; + padding: ($localNavSideSpacing * .25) $localNavSideSpacing; font-size: $kuiFontSize; background-color: $localNavButtonBackgroundColor; color: $localNavButtonTextColor; border: 0; cursor: pointer; - border-right: solid 1px transparent; - border-left: solid 1px transparent; + border-bottom: solid 2px transparent; &:hover, &:focus { - background-color: $localNavButtonBackgroundColor-isHover; - color: $localNavButtonTextColor-isHover; + background-color: rgba($localNavButtonBackgroundColor-isHover, .15); + text-decoration: underline; } &.kuiLocalMenuItem-isSelected { - background-color: $localNavButtonBackgroundColor-isSelected; - border-color: $kuiColorLightGray; - height: calc(100% + 1px); // Cheat the border when opened - z-index: 2; color: $kuiColorBlue; + background-color: $localNavButtonBackgroundColor-isSelected; + border-color: $euiColorPrimary; + z-index: 2; &:hover, &:focus { - color: $kuiColorBlue; + text-decoration: none; } } @@ -38,8 +37,8 @@ cursor: not-allowed; &:hover { - background-color: $localNavButtonBackgroundColor; - color: $localNavButtonTextColor; + background-color: transparent; + text-decoration: none; } } } diff --git a/packages/kbn-ui-framework/src/components/local_nav/_local_nav.scss b/packages/kbn-ui-framework/src/components/local_nav/_local_nav.scss index d8614956f0ec..a945c0169e81 100644 --- a/packages/kbn-ui-framework/src/components/local_nav/_local_nav.scss +++ b/packages/kbn-ui-framework/src/components/local_nav/_local_nav.scss @@ -20,8 +20,6 @@ display: flex; align-items: stretch; justify-content: space-between; - min-height: 29px; /* 1 */ - line-height: 29px; /* 1 */ } .kuiLocalNavRow__section { @@ -40,12 +38,3 @@ padding: 0 $localNavSideSpacing; /* 1 */ align-items: flex-start; /* 1 */ } - -.kuiLocalNav__popover { - height: 100%; - - .kuiLocalNav__popoverAnchor { - height: 100%; - } -} - diff --git a/packages/kbn-ui-framework/src/components/local_nav/_local_title.scss b/packages/kbn-ui-framework/src/components/local_nav/_local_title.scss index a0e2421e631b..bb105c84a772 100644 --- a/packages/kbn-ui-framework/src/components/local_nav/_local_title.scss +++ b/packages/kbn-ui-framework/src/components/local_nav/_local_title.scss @@ -2,7 +2,16 @@ display: flex; align-items: center; height: 100%; - padding-left: $localNavSideSpacing; + padding: ($localNavSideSpacing * 1.5) $localNavSideSpacing; font-size: $kuiFontSize; font-weight: bold; + border-bottom: $euiBorderThin; + flex-grow: 1; + flex-basis: 100%; + background-color: $euiColorEmptyShade; + + &:empty { + padding: 0; + display: none; + } } diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html index 022e343df0a7..9bdd538b850b 100644 --- a/src/legacy/core_plugins/kibana/public/context/app.html +++ b/src/legacy/core_plugins/kibana/public/context/app.html @@ -1,18 +1,15 @@ -
-
-
-
-
-
+
+
+
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_options_popover.js b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_options_popover.js index 46c2aaac7a8a..d472413b0c1d 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_options_popover.js +++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_options_popover.js @@ -54,8 +54,6 @@ export function showOptionsPopover({ const element = (
-

- +

+   +

+
{{(hits || 0) | number:0}} -

+
diff --git a/src/legacy/core_plugins/kibana/public/doc/index.html b/src/legacy/core_plugins/kibana/public/doc/index.html index 604ff03f7668..590b8699b312 100644 --- a/src/legacy/core_plugins/kibana/public/doc/index.html +++ b/src/legacy/core_plugins/kibana/public/doc/index.html @@ -1,14 +1,10 @@
-
-
-
-
-
-
+
+
@@ -63,7 +59,7 @@
diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html index 5a31a97c5696..3e19b4dd0fc7 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html +++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html @@ -6,6 +6,7 @@ -