Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Improve breadcrumb styles (#2403)

Browse Source
This commit is contained in:
Paweł Kuna
2025-05-27 23:56:04 +02:00
committed by GitHub
parent 666a296a62
commit a200d30f04
5 changed files with 37 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/nasty-camels-help.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": minor
---
Improve breadcrumb styles

2
core/package.json
View File

@@ -8,7 +8,7 @@
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri", "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
"clean": "shx rm -rf dist demo", "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": "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-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-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\"", "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\"",

1
core/scss/_bootstrap-components.scss
View File

@@ -14,7 +14,6 @@
@import "bootstrap/scss/nav"; @import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar"; @import "bootstrap/scss/navbar";
@import "bootstrap/scss/card"; @import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination"; @import "bootstrap/scss/pagination";
@import "bootstrap/scss/progress"; @import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group"; @import "bootstrap/scss/list-group";

31
core/scss/ui/_breadcrumbs.scss
View File

@@ -1,7 +1,23 @@
.breadcrumb { .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-active-font-weight: #{$breadcrumb-active-font-weight};
--#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color}; --#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
--#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-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; padding: 0;
margin: 0; margin: 0;
background: transparent; background: transparent;
@@ -21,6 +37,7 @@
.breadcrumb-item { .breadcrumb-item {
&.active { &.active {
color: var(--#{$prefix}breadcrumb-item-active-color);
font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight); font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
a { a {
@@ -41,6 +58,20 @@
pointer-events: none; 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 { @each $name, $symbol in $breadcrumb-variants {

4
core/scss/ui/_stars.scss
View File

@@ -7,7 +7,3 @@
margin-left: .25rem; margin-left: .25rem;
} }
} }
.star {
}