feat: primevue breadcrumb component styling (#112)

* primevue breadcrumb component style * added responsiveness
bcgov · Oct 19, 2023 · 3a29122 · 3a29122
1 parent 9e55e3c
commit 3a29122
Showing 1 changed file with 95 additions and 0 deletions.
diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss
@@ -933,3 +933,98 @@ label {
     padding-top: 0.1rem;
     border-radius: 62.5rem;
 }
+
+/* ------------------------------------ Breadcrumb ----------------------------- */
+
+.#{variables.$primevue-prefix}-breadcrumb {
+    background-color: transparent;
+    font-size: 0.875rem;
+    line-height: 1.125rem; /* 128.571% */
+    letter-spacing: 0.01rem;
+    margin: 0.5rem 0 0;
+    padding: 0;
+    border-radius: 0;
+}
+
+.#{variables.$primevue-prefix}-breadcrumb
+.#{variables.$primevue-prefix}-breadcrumb-list
+.#{variables.$primevue-prefix}-menuitem {
+    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;
+}
+
+.#{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 1px map.get(
+        lightTheme.$light-theme,
+        'focus'
+    ) !important;
+}
+
+.#{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;
+}
+
+.#{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}-breadcrumb
+.#{variables.$primevue-prefix}-breadcrumb-list li
+.#{variables.$primevue-prefix}-menuitem-text,
+.#{variables.$primevue-prefix}-breadcrumb
+.#{variables.$primevue-prefix}-breadcrumb-list li:last-child
+.#{variables.$primevue-prefix}-menuitem-text {
+    color: map.get(
+        lightTheme.$light-theme,
+        'link-primary'
+    ) !important;
+}
+
+.#{variables.$primevue-prefix}-breadcrumb
+.#{variables.$primevue-prefix}-breadcrumb-list
+li.#{variables.$primevue-prefix}-menuitem-separator {
+    margin: 0;
+}
+
+.#{variables.$primevue-prefix}-breadcrumb
+.#{variables.$primevue-prefix}-breadcrumb-list
+li.#{variables.$primevue-prefix}-menuitem-separator svg {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .#{variables.$primevue-prefix}-breadcrumb {
+        display: none;
+    }
+}
+
+@media (max-width: 1024px) {
+    .#{variables.$primevue-prefix}-breadcrumb {
+        margin: 0;
+    }
+}