Adjust OuiSimplifiedBreadcrumbs alignment, colors, and tailing slash

Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Sep 13, 2024 · 135d567 · 135d567
1 parent 2e42a25
commit 135d567
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@
 
 - Fix `compressed` styling of OuiDatePickerRange ([#1380](https://github.com/opensearch-project/oui/pull/1380))
 - Make OuiSearchBar consume a provided `className` ([#1381](https://github.com/opensearch-project/oui/pull/1381))
+- Adjust OuiSimplifiedBreadcrumbs alignment, colors, and tailing slash ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 
 ### 🚞 Infrastructure
 

diff --git a/src/components/breadcrumbs/_breadcrumbs_simplified.scss b/src/components/breadcrumbs/_breadcrumbs_simplified.scss
@@ -11,18 +11,27 @@
 
 .ouiSimplifiedBreadcrumbs {
   @include ouiFontSizeS;
-  margin-bottom: -$ouiSizeXS; /* 1 */
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   min-width: 0; // Ensure it shrinks if the window is narrow
   margin-left: 0;
+
+  .euiLink.euiLink--text:focus {
+    animation: none;
+    background: none;
+  }
 }
 
 .ouiSimplifiedBreadcrumb {
   display: inline-block;
-  color: $ouiLinkColor !important; // sass-lint:disable-line no-important
   margin-right: $ouiBreadcrumbSpacing;
+
+  &.euiLink {
+    line-height: inherit;
+    font-weight: inherit;
+    color: $ouiLinkColor !important; // sass-lint:disable-line no-important
+  }
 }
 
 .ouiSimplifiedBreadcrumb--collapsed {
@@ -77,9 +86,8 @@
   transform: translateY(-1px) rotate(15deg);
   background: $ouiColorLightShade;
   color: $ouiColorDisabledText;
-}
 
-.euiLink.euiSimplifiedBreadcrumb {
-  line-height: inherit;
-  font-weight: inherit;
-}
+  &:last-child {
+    display: none;
+  }
+}