fix: primevue breadcrum styling for current route (#118)

* fix styling for breadcrum with current route * fix format
bcgov · Nov 8, 2023 · e31de69 · e31de69
1 parent 812cd97
commit e31de69
Showing 1 changed file with 28 additions and 19 deletions.
diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss
@@ -1004,64 +1004,73 @@ label {
 .#{variables.$primevue-prefix}-breadcrumb
     .#{variables.$primevue-prefix}-breadcrumb-list
     .#{variables.$primevue-prefix}-menuitem {
-    display: inline-flex !important;
-    align-items: center;
+        display: inline-flex !important;
+        align-items: center;
 }
 
 .#{variables.$primevue-prefix}-breadcrumb
     .#{variables.$primevue-prefix}-breadcrumb-list
     .#{variables.$primevue-prefix}-menuitem
     .#{variables.$primevue-prefix}-menuitem-link {
-    padding: 0.2rem;
-    border-radius: 0;
+        padding: 0.2rem;
+        border-radius: 0;
 }
 
 .#{variables.$primevue-prefix}-breadcrumb
     .#{variables.$primevue-prefix}-breadcrumb-list
     .#{variables.$primevue-prefix}-menuitem
     .#{variables.$primevue-prefix}-menuitem-link:focus {
-    box-shadow: inset 0 0px 0px 0.063rem
-        map.get(lightTheme.$light-theme, 'focus') !important;
+        box-shadow: inset 0 0px 0px 0.063rem
+            map.get(lightTheme.$light-theme,'focus') !important;
+}
+
+.#{variables.$primevue-prefix}-breadcrumb
+    .#{variables.$primevue-prefix}-breadcrumb-list
+    .#{variables.$primevue-prefix}-menuitem:last-child
+    .#{variables.$primevue-prefix}-menuitem-link {
+        box-shadow:none !important;
+        pointer-events: none;
 }
 
 .#{variables.$primevue-prefix}-breadcrumb
     .#{variables.$primevue-prefix}-breadcrumb-list
     .#{variables.$primevue-prefix}-menuitem
     .#{variables.$primevue-prefix}-menuitem-link
     .#{variables.$primevue-prefix}-menuitem-text:hover {
-    color: map.get(lightTheme.$light-theme, 'link-primary-hover') !important;
+        color: map.get(lightTheme.$light-theme, 'link-primary-hover') !important;
 }
 
 .#{variables.$primevue-prefix}-breadcrumb
     .#{variables.$primevue-prefix}-breadcrumb-list
-    .#{variables.$primevue-prefix}-menuitem::after {
-    color: map.get(lightTheme.$light-theme, 'text-primary');
-    content: '/';
-    margin: 0 0.5rem;
+    .#{variables.$primevue-prefix}-menuitem:not(:last-child)::after {
+        color: map.get(lightTheme.$light-theme, 'text-primary');
+        content: '/';
+        margin: 0 0.5rem;
 }
 
 .#{variables.$primevue-prefix}-breadcrumb
-    .#{variables.$primevue-prefix}-breadcrumb-list
-    li
-    .#{variables.$primevue-prefix}-menuitem-text,
+    .#{variables.$primevue-prefix}-breadcrumb-list li
+    .#{variables.$primevue-prefix}-menuitem-text {
+        color: map.get(lightTheme.$light-theme, 'link-primary') !important;
+}
+
 .#{variables.$primevue-prefix}-breadcrumb
-    .#{variables.$primevue-prefix}-breadcrumb-list
-    li:last-child
+    .#{variables.$primevue-prefix}-breadcrumb-list li:last-child
     .#{variables.$primevue-prefix}-menuitem-text {
-    color: map.get(lightTheme.$light-theme, 'link-primary') !important;
+        color: map.get(lightTheme.$light-theme, 'text-primary') !important;
 }
 
 .#{variables.$primevue-prefix}-breadcrumb
     .#{variables.$primevue-prefix}-breadcrumb-list
     li.#{variables.$primevue-prefix}-menuitem-separator {
-    margin: 0;
+        margin: 0;
 }
 
 .#{variables.$primevue-prefix}-breadcrumb
     .#{variables.$primevue-prefix}-breadcrumb-list
     li.#{variables.$primevue-prefix}-menuitem-separator
     svg {
-    display: none;
+        display: none;
 }
 
 @media (min-width: 768px) {