breadcrumb styling

themes/grav/scss/preset.scss

@@ -1980,6 +1980,8 @@ body .bootstrap-datetimepicker-widget {
         }
     }
 
+
+
     .tags {
         .tag {
             margin: 0 .15rem;
@@ -2056,3 +2058,35 @@ body .bootstrap-datetimepicker-widget {
     }
 
 }
+
+// Flex Pages Breadcrumbs
+.breadcrumb-node {
+
+    &:hover span {
+        text-decoration: none;
+        color: $content-link;
+    }
+
+    & > i:not(.fa) {
+        background-color: #999;
+        box-shadow: 0px 0px 0px 1px #fff;
+
+        &.home {
+            background-color: $flat-blue-2;
+        }
+
+        &.visible {
+            background-color: $flat-blue-1;
+        }
+
+        &.lock {
+            background-color: $flat-orange-2;
+        }
+
+        &.modular {
+            background-color: $flat-purple-1;
+        }
+    }
+
+}
+

themes/grav/scss/template/_pages.scss

@@ -362,6 +362,55 @@
             bottom: -2px;
         }
     }
+
+    .breadcrumb-node {
+        display: inline-flex;
+        align-items: center;
+        font-size: 0.9rem;
+
+        &:hover span {
+            text-decoration: none;
+        }
+
+        & > i.fa {
+            margin: 0 0.4rem -4px;
+        }
+
+        & > i:not(.fa) {
+            position: relative;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            overflow: inherit;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            margin-right: 0.35rem;
+
+            &:before {
+                position: relative;
+                content: url('../images/icons/book-edit.svg');
+                flex: 1;
+                max-width: 10px;
+            }
+
+            &.modular:before {
+                content: url('../images/icons/module-four.svg');
+            }
+
+            &.home:before {
+                content: url('../images/icons/house.svg');
+            }
+
+            &.lock:before {
+                content: url('../images/icons/touchid-lock.svg');
+            }
+
+            &.badge-published:after, &.badge-unpublished:after {
+                content: '';
+            }
+        }
+    }
 }
 
 .pages-list {