Index: lams_central/web/css/bootstrap/_breadcrumb.scss =================================================================== diff -u -r9f4482aa1d29f454f091420cc38d3b27a3f4cc8f -rb7c92dbcfdb0469dbc0144190a201757f398e529 --- lams_central/web/css/bootstrap/_breadcrumb.scss (.../_breadcrumb.scss) (revision 9f4482aa1d29f454f091420cc38d3b27a3f4cc8f) +++ lams_central/web/css/bootstrap/_breadcrumb.scss (.../_breadcrumb.scss) (revision b7c92dbcfdb0469dbc0144190a201757f398e529) @@ -1,28 +1,42 @@ +// stylelint-disable custom-property-empty-line-before + .breadcrumb { + // scss-docs-start breadcrumb-css-vars + --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; + --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; + --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; + @include rfs($breadcrumb-font-size, --#{$prefix}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}; + // scss-docs-end breadcrumb-css-vars + display: flex; flex-wrap: wrap; - padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: $breadcrumb-margin-bottom; - @include font-size($breadcrumb-font-size); + padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); + margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); + @include font-size(var(--#{$prefix}breadcrumb-font-size)); list-style: none; - background-color: $breadcrumb-bg; - @include border-radius($breadcrumb-border-radius); + background-color: var(--#{$prefix}breadcrumb-bg); + @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { - padding-left: $breadcrumb-item-padding-x; + padding-left: var(--#{$prefix}breadcrumb-item-padding-x); &::before { float: left; // Suppress inline spacings and underlining of the separator - padding-right: $breadcrumb-item-padding-x; - color: $breadcrumb-divider-color; - content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; + padding-right: var(--#{$prefix}breadcrumb-item-padding-x); + color: var(--#{$prefix}breadcrumb-divider-color); + content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; } } &.active { - color: $breadcrumb-active-color; + color: var(--#{$prefix}breadcrumb-item-active-color); } }