From a200d30f042c197bf42b396f8b36f5c8dc15a0f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Tue, 27 May 2025 23:56:04 +0200
Subject: [PATCH] Improve breadcrumb styles (#2403)

---
 .changeset/nasty-camels-help.md      |  5 +++++
 core/package.json                    |  2 +-
 core/scss/_bootstrap-components.scss |  1 -
 core/scss/ui/_breadcrumbs.scss       | 31 ++++++++++++++++++++++++++++
 core/scss/ui/_stars.scss             |  4 ----
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/nasty-camels-help.md

diff --git a/.changeset/nasty-camels-help.md b/.changeset/nasty-camels-help.md
new file mode 100644
index 000000000..bf2477e61
--- /dev/null
+++ b/.changeset/nasty-camels-help.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Improve breadcrumb styles
diff --git a/core/package.json b/core/package.json
index a0ad3d3c9..ae6a47922 100644
--- a/core/package.json
+++ b/core/package.json
@@ -8,7 +8,7 @@
     "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
     "clean": "shx rm -rf dist demo",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
-    "css-compile": "sass scss/:dist/css/ --no-source-map --load-path=node_modules",
+    "css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
     "css-banner": "node .build/add-banner.mjs",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
diff --git a/core/scss/_bootstrap-components.scss b/core/scss/_bootstrap-components.scss
index f1c420a85..9b3720774 100644
--- a/core/scss/_bootstrap-components.scss
+++ b/core/scss/_bootstrap-components.scss
@@ -14,7 +14,6 @@
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/navbar";
 @import "bootstrap/scss/card";
-@import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
diff --git a/core/scss/ui/_breadcrumbs.scss b/core/scss/ui/_breadcrumbs.scss
index 87dba8c75..d4135191f 100644
--- a/core/scss/ui/_breadcrumbs.scss
+++ b/core/scss/ui/_breadcrumbs.scss
@@ -1,7 +1,23 @@
 .breadcrumb {
+  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
+  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
+  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
+  --#{$prefix}breadcrumb-font-size: #{$breadcrumb-font-size};
+  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
+  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
+  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
+  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
   --#{$prefix}breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
   --#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
   --#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-color};
+
+  display: flex;
+  flex-wrap: wrap;
+  @include font-size(var(--#{$prefix}breadcrumb-font-size));
+  list-style: none;
+  background-color: var(--#{$prefix}breadcrumb-bg);
+  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
   padding: 0;
   margin: 0;
   background: transparent;
@@ -21,6 +37,7 @@
 
 .breadcrumb-item {
   &.active {
+    color: var(--#{$prefix}breadcrumb-item-active-color);
     font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
 
     a {
@@ -41,6 +58,20 @@
       pointer-events: none;
     }
   }
+
+  & + & {
+    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+
+    &::before {
+      float: left;
+      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+      color: var(--#{$prefix}breadcrumb-divider-color);
+      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
+      /*rtl:raw:
+      transform: scaleX(-1);
+      */
+    }
+  }
 }
 
 @each $name, $symbol in $breadcrumb-variants {
diff --git a/core/scss/ui/_stars.scss b/core/scss/ui/_stars.scss
index 66b2c3327..2ba53f673 100644
--- a/core/scss/ui/_stars.scss
+++ b/core/scss/ui/_stars.scss
@@ -7,7 +7,3 @@
     margin-left: .25rem;
   }
 }
-
-.star {
-
-}