refactoring _breadcrumbs.sccs, removing '--last' modifier from .ouiBr…

…eadcrumb class, keeping it only in .ouiBreadcrumbWrapper class Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
BigSamu · Nov 5, 2023 · 4cb6024 · 4cb6024
1 parent a5ac107
commit 4cb6024
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -25,18 +25,15 @@
 
 .ouiBreadcrumb {
   display: inline-block;
+  // TODO: remove important: https://github.com/opensearch-project/oui/issues/376
+  color: $ouiBreadcrumbInactiveTextColor !important; // sass-lint:disable-line no-important
 
-  &:not(.ouiBreadcrumb--last) {
-    // TODO: remove important: https://github.com/opensearch-project/oui/issues/376
-    color: $ouiBreadcrumbInactiveTextColor !important; // sass-lint:disable-line no-important
-
-    &:hover {
-      color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
-    }
+  &:hover {
+    color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
   }
 }
 
-.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumb--last {
+.ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumbWrapper--last .ouiBreadcrumb {
   font-weight: $ouiFontWeightMedium;
 }
 
@@ -114,6 +111,15 @@
     margin-bottom: $ouiSizeXS; /* 1 */
     padding-left: $ouiSizeL - $ouiSizeXS + calc($ouiBreadcrumbSpacing / 2);
   }
+
+  // This targets the last breadcrumb wrapper and sets a different text color for the breadcrumb inside it.
+  &.ouiBreadcrumbWrapper--last .ouiBreadcrumb {
+    color: inherit !important; // sass-lint:disable-line no-important
+
+    &:hover {
+      color: inherit !important; // sass-lint:disable-line no-important
+    }
+  }
 }
 
 .ouiBreadcrumbWall {