[UX] Restyle global breadcrumbs

src/core/public/_variables.scss

@@ -1,3 +1,6 @@
 @import "@elastic/eui/src/global_styling/variables/header";
 
 $osdHeaderOffset: $euiHeaderHeightCompensation;
+$osdHeaderBreadcrumbBlueBackground: #b9d9eb;
+$osdHeaderBreadcrumbGrayBackground: #d9e1e2;
+$osdHeaderBreadcrumbCollapsedLink: #002a3a;

src/core/public/chrome/ui/header/header_breadcrumbs.scss

@@ -0,0 +1,55 @@
+@import "../../../../public/variables";
+
+$firstBreadcrumbPolygon: polygon(
+ 0% 0%,
+ 100% 0%,
+ calc(100% - #{$euiSizeS}) 100%,
+ 0% 100%
+);
+$breadcrumbPolygon: polygon(
+ $euiSizeS 0%,
+ 100% 0%,
+ calc(100% - #{$euiSizeS}) 100%,
+ 0% 100%
+);
+
+.osdHeaderBreadcrumbs {
+ /*
+ filter defines a custom filter effect by grouping atomic filter primitives!
+ here we are using Gaussian filter with stdDeviation for applying
+ border-radius on clipped background.
+ */
+
+ filter: url("../../public/assets/round_filter.svg#round");
+
+ .osdBreadcrumbs {
+ clip-path: $breadcrumbPolygon;
+ background-color: $osdHeaderBreadcrumbGrayBackground;
+ padding: $euiSizeXS - 2.5 $euiSizeL - $euiSizeXS;
+
+ &:first-child {
+ clip-path: $firstBreadcrumbPolygon;
+ }
+
+ &:last-child {
+ background-color: $osdHeaderBreadcrumbBlueBackground;
+ }
+ }
+
+ .euiBreadcrumbSeparator {
+ display: none;
+ }
+
+ .euiBreadcrumb__collapsedLink {
+ color: $osdHeaderBreadcrumbCollapsedLink;
+ background: $euiColorEmptyShade;
+ }
+
+ .euiPopover__anchor {
+ padding: 0 $euiSizeS;
+ }
+
+ .euiBreadcrumb:not(.euiBreadcrumb:last-child) {
+ margin-right: 0;
+ }
+}

src/core/public/chrome/ui/header/header_breadcrumbs.tsx

@@ -35,6 +35,8 @@ import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeBreadcrumb } from '../../chrome_service';
 
+import './header_breadcrumbs.scss';
+
 interface Props {
  appTitle$: Observable<string>;
  breadcrumbs$: Observable<ChromeBreadcrumb[]>;
@@ -57,7 +59,15 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) {
  i === 0 && 'first',
  i === breadcrumbs.length - 1 && 'last'
  ),
+ className: classNames('osdBreadcrumbs'),
  }));
 
- return <EuiHeaderBreadcrumbs breadcrumbs={crumbs} max={10} data-test-subj="breadcrumbs" />;
+ return (
+ <EuiHeaderBreadcrumbs
+ breadcrumbs={crumbs}
+ max={10}
+ data-test-subj="breadcrumbs"
+ className="osdHeaderBreadcrumbs"
+ />
+ );
 }