diff --git a/src/core_plugins/kibana/public/management/app.html b/src/core_plugins/kibana/public/management/app.html index 0393bb27ea137..377d4dc2319ed 100644 --- a/src/core_plugins/kibana/public/management/app.html +++ b/src/core_plugins/kibana/public/management/app.html @@ -20,7 +20,7 @@ ng-if="sectionName" ng-repeat="item in section.visibleItems" class="kuiLocalTab" - ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-disabled': item.disabled || !item.url }" + ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-isDisabled': !item.active && (item.disabled || !item.url) }" kbn-href="{{::item.disabled ? '' : item.url}}" data-test-subj="{{::item.name}}" tooltip="{{::item.tooltip}}" diff --git a/ui_framework/components/local_nav/_local_tabs.scss b/ui_framework/components/local_nav/_local_tabs.scss index 7a5df8e0eb693..c711afcc00911 100644 --- a/ui_framework/components/local_nav/_local_tabs.scss +++ b/ui_framework/components/local_nav/_local_tabs.scss @@ -19,8 +19,8 @@ text-decoration: none; cursor: pointer; - &:hover, - &:active { + &:hover:not(.kuiLocalTab-isDisabled), + &:active:not(.kuiLocalTab-isDisabled) { color: $localTabTextColor-isHover; @include darkTheme { @@ -39,6 +39,15 @@ } } + /** + * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show + * a regular cursor instead of setting pointer-events: none. + */ + &.kuiLocalTab-isDisabled { + opacity: 0.5; + cursor: default; /* 1 */ + } + & + & { margin-left: 15px; } diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 83b97d057f7be..673a921e1801b 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1258,10 +1258,14 @@ body { color: #5a5a5a; border-bottom: 2px solid transparent; text-decoration: none; - cursor: pointer; } - .kuiLocalTab:hover, .kuiLocalTab:active { + cursor: pointer; + /** + * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show + * a regular cursor instead of setting pointer-events: none. + */ } + .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { color: #000000; } - .theme-dark .kuiLocalTab:hover, .theme-dark .kuiLocalTab:active { + .theme-dark .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .theme-dark .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { color: #ffffff; } .kuiLocalTab.kuiLocalTab-isSelected { color: #000000; @@ -1270,6 +1274,10 @@ body { .theme-dark .kuiLocalTab.kuiLocalTab-isSelected { color: #ffffff; border-bottom-color: #ffffff; } + .kuiLocalTab.kuiLocalTab-isDisabled { + opacity: 0.5; + cursor: default; + /* 1 */ } .kuiLocalTab + .kuiLocalTab { margin-left: 15px; } .theme-dark .kuiLocalTab { diff --git a/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html b/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html index f01076d3f95b5..21dc1637e5ef8 100644 --- a/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html +++ b/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html @@ -48,7 +48,7 @@ Your Documents - + Another Tab