breadcrumb: simplify appearance, improve extensibility

[patrickhlauke]

Closes #32053

Preview: https://deploy-preview-32249--twbs-bootstrap.netlify.app/docs/5.0/components/breadcrumb/

[XhmikosR]

Shouldn't we mention this change in migration?

[patrickhlauke]

ah, good point @XhmikosR ... doh

[patrickhlauke]

also, i just ripped out the padding stuff, but should it perhaps go for an explicit padding: 0 ?

[edit: decided to just go for it]

[MartijnCuppens]

We could nullify the variables instead of removing them.

https://markdotto.com/2019/08/30/null-sass-variables/

[patrickhlauke]

sigh...well, whichever, somebody make a decision :)

[MartijnCuppens]

If we set

$breadcrumb-padding-y:              0 !default;
$breadcrumb-padding-x:              0 !default;
$breadcrumb-bg:                     null !default;
$breadcrumb-border-radius:          null !default;

we'll still be able to adjust paddings,bg & radius with Sass variables and keep the result as is (in this PR).

[ffoodd]

Agreed, didn't think about this but it would even not be a breaking change I guess, since variables would still exist 👌

[patrickhlauke]

Right, done ... think it'd still be a breaking change if we change the default styles like this under people's feet though, so keeping this as v5 only at the moment

[ffoodd]

👌

[XhmikosR]

Let's wait for another approval from @mdo please :)

[mdo]

Pushed some content changes and the CSS custom property mention in #32053 (comment) along with @ffoodd's recommendation of the Sass fallback.

[XhmikosR]

Some notes:

1. some further characters are escaped in the snippets EDIT: NVM, it's the double quotes character around the base64 data
2. style="--bs-breadcrumb-divider: ;" doesn't seem to be valid. If we confirm it is valid, I could ask upstream for a fix. Using style="--bs-breadcrumb-divider: '';" seems to also work and it's valid

[XhmikosR]

@twbs/css-review so, does this still look good to merge?

[MartijnCuppens]

Now it does