// // General Settings // =====================================
// This helps balance spacing around inline-block elements $breadcrumb-context: “Breadcrumb”; $gap-inline-spacer: -0.25em; $icon-vertical-spacer: -0.2em;
$breadcrumb-gap: 1.5; $breadcrumb-icon-height: 2.5ex; $breadcrumb-icon-display-height: 2ex; $breadcrumb-icon-spacing: 0px;
$icon-breadcrumb-separator: (
"name": "usa-icons/navigate_next", "svg-height": 40, "svg-width": 40, "height": $breadcrumb-icon-display-height, "color": $theme-breadcrumb-separator-color,
);
$icon-breadcrumb-back: (
"name": "usa-icons/arrow_back", "svg-height": 40, "svg-width": 40, "height": $breadcrumb-icon-display-height, "color": $theme-breadcrumb-separator-color,
);
// Set default value for custom mixin exdent-icon() $breadcrumb-back-icon-aspect: (
map-get($icon-breadcrumb-back, "svg-width"), map-get($icon-breadcrumb-back, "svg-height")
);
// Defines spacing so back icon is optically placed @mixin exdent-icon($dim: $breadcrumb-back-icon-aspect) {
$aspect: nth($dim, 1) / nth($dim, 2); $icon-width: $breadcrumb-icon-display-height * $aspect; padding-left: calc(#{$icon-width} + #{$breadcrumb-icon-spacing}); text-indent: calc((#{$icon-width} + #{$breadcrumb-icon-spacing}) * -1);
}
.usa-breadcrumb {
@include typeset( $theme-breadcrumb-font-family, $theme-breadcrumb-font-size, 3 ); @include set-text-and-bg( $theme-breadcrumb-background-color, $context: $breadcrumb-context ); @include u-padding-x($theme-breadcrumb-padding-x); @include at-media($theme-breadcrumb-min-width) { @include u-padding-bottom($theme-breadcrumb-padding-bottom); @include u-padding-top($theme-breadcrumb-padding-top); } &:not(.usa-breadcrumb--wrap) { .usa-breadcrumb__list { @include at-media($theme-breadcrumb-min-width) { @include u-white-space("no-wrap"); text-overflow: ellipsis; overflow: hidden; } } }
}
.usa-breadcrumb__list {
@include unstyled-list; @include u-display("block"); @include u-padding($theme-focus-width); margin: units($theme-focus-width) * -1;
}
.usa-breadcrumb__list-item {
@include sr-only; @include u-display("inline"); @include u-white-space("no-wrap"); @include at-media-max($theme-breadcrumb-min-width) { @include u-white-space("wrap"); // If parent link only (mobile), only show parent of current link &:nth-last-child(2) { @include not-sr-only; .usa-breadcrumb__link { @include button-unstyled; @include exdent-icon; @include place-icon( $icon-breadcrumb-back, "before", 0, baseline, $theme-breadcrumb-background-color ); // Override link colors from button-unstyled() @include set-link-from-bg( $theme-breadcrumb-background-color, $theme-breadcrumb-link-color, $context: $breadcrumb-context ); @include u-display("inline-block"); @include u-padding-bottom($theme-breadcrumb-padding-bottom); @include u-padding-top($theme-breadcrumb-padding-top); &:before { bottom: $icon-vertical-spacer; // Magic number to center icon height: $breadcrumb-icon-display-height; position: relative; } // Prevent underline that extends beyond text &, &:hover, &:active { @include u-text("no-underline"); } span { @include u-text("underline"); } } // Override icon spacing from place-icon() with non-token value .usa-breadcrumb__link::before { margin-right: $breadcrumb-icon-spacing; } } } @include at-media($theme-breadcrumb-min-width) { @include not-sr-only; // Breadcrumb separator › &:not(:last-child) { @include place-icon( $icon-breadcrumb-separator, "after", 0, baseline, $theme-breadcrumb-background-color ); } // Style overrides for separator using non-token values &:not(:last-child)::after { // Magic number to center icon bottom: $icon-vertical-spacer; margin-left: $breadcrumb-icon-spacing; margin-right: $breadcrumb-icon-spacing; height: $breadcrumb-icon-display-height; position: relative; } }
}
.usa-breadcrumb__link {
@include set-link-from-bg( $theme-breadcrumb-background-color, $theme-breadcrumb-link-color, $context: $breadcrumb-context ); @include u-display("inline"); // Prevent underline that extends beyond text @include u-text("no-underline"); span { @include u-text("underline"); }
}
// ——————————— // Variations // ———————————
// Breadcrumb wrap .usa-breadcrumb–wrap {
@include at-media($theme-breadcrumb-min-width) { @include u-line-height($theme-breadcrumb-font-family, 4); } .usa-breadcrumb__list-item { @include u-display("inline-block"); }
}