Merge pull request #589 from gselderslaghs/breadcrumb-variant

fix(Breadcrumb) allow basic variant without background color

sass/components/_breadcrumb.scss

@@ -0,0 +1,27 @@
+.breadcrumb-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+
+  i,
+  i.material-icons, i.material-symbols-outlined,
+  i.material-symbols-rounded, i.material-symbols-sharp,
+  &:before {
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+  }
+
+  &:before {
+    content: '\E5CC';
+    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
+  }
+
+  &:first-child:before {
+    visibility: hidden;
+  }
+}

sass/components/_global.scss

@@ -195,44 +195,6 @@ video.responsive-video {
   }
 }*/
 
-// Breadcrumbs
-.breadcrumb {
-  display: inline-block;
-  font-size: 18px;
-  color: var(--font-on-primary-color-medium);
-
-  i,
-  [class^="mdi-"], [class*="mdi-"],
-  i.material-icons, i.material-symbols-outlined,
-  i.material-symbols-rounded, i.material-symbols-sharp {
-    display: block;
-    float: left;
-    font-size: 24px;
-  }
-
-  &:before {
-    content: '\E5CC';
-    color: var(--font-on-primary-color-medium);
-    vertical-align: top;
-    display: inline-block;
-    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 25px;
-    margin: 0 10px 0 8px;
-    -webkit-font-smoothing: antialiased;
-    float: left;
-  }
-
-  &:first-child:before {
-    display: none;
-  }
-
-  &:last-child {
-    color:  var(--md-sys-color-on-primary);
-  }
-}
-
 // Parallax
 .parallax-container {
   position: relative;

sass/materialize.scss

@@ -46,4 +46,5 @@
 @import "components/pulse";
 @import "components/datepicker";
 @import "components/timepicker";
+@import "components/breadcrumb";
 @import "components/pagination";