$step-indicator-label-margin-top: 1; $step-indicator-margin-bottom: 4; $step-indicator-header-margin-top: 4; $step-indicator-header-margin-top-sm: 2; $step-indicator-segment-height-mobile: 1; $step-indicator-counter-size: 5; $step-indicator-counter-size-sm: 3;
.usa-step-indicator {
@include typeset( $theme-step-indicator-font-family, $theme-step-indicator-label-font-size, 2 ); background-color: color($step-indicator-background-color); margin-bottom: units($step-indicator-margin-bottom); margin-left: units($theme-step-indicator-segment-gap) / -2; margin-right: units($theme-step-indicator-segment-gap) / -2; @include at-media($theme-step-indicator-min-width) { @include u-margin-x(0); }
}
.usa-step-indicator__segments {
counter-reset: usa-step-indicator; display: flex; list-style: none; margin: 0; padding: 0;
}
.usa-step-indicator__segment {
@include u-flex("fill"); counter-increment: usa-step-indicator; margin-left: units($theme-step-indicator-segment-gap) / 2; margin-right: units($theme-step-indicator-segment-gap) / 2; max-width: units("card-lg"); min-height: units($theme-step-indicator-segment-height); position: relative; // Add segment &:after { background-color: color($theme-step-indicator-segment-color-pending); content: ""; display: block; // Use a fixed segment height for mobile regardless of settings height: units($step-indicator-segment-height-mobile); left: 0; position: absolute; right: 0; top: 0; @include at-media($theme-step-indicator-min-width) { height: units($theme-step-indicator-segment-height); } }
}
.usa-step-indicator__segment–complete {
&::after { background-color: color($theme-step-indicator-segment-color-complete); } .usa-step-indicator__segment-label { color: color($theme-step-indicator-segment-color-complete); }
}
.usa-step-indicator__segment–current {
&::after { background-color: color($theme-step-indicator-segment-color-current); } .usa-step-indicator__segment-label { color: color($theme-step-indicator-segment-color-current); font-weight: fw("bold"); }
}
.usa-step-indicator__segment-label {
display: none; // Show labels only at the min-width @include at-media($theme-step-indicator-min-width) { color: color($theme-step-indicator-text-pending-color); display: block; font-size: size( $theme-step-indicator-font-family, $theme-step-indicator-label-font-size ); // Add margin based on segment size margin-top: calc( #{units($theme-step-indicator-segment-height)} + #{units( $step-indicator-label-margin-top )} ); padding-right: units(4); text-align: left; }
}
.usa-step-indicator__header {
align-items: baseline; display: flex;
}
.usa-step-indicator__heading {
color: color($theme-step-indicator-heading-color); font-family: family($theme-step-indicator-heading-font-family); font-size: size( $theme-step-indicator-heading-font-family, $theme-step-indicator-heading-font-size-small ); font-weight: font-weight("bold"); margin: units($step-indicator-header-margin-top-sm) 0 0; @include at-media($theme-step-indicator-min-width) { font-size: size( $theme-step-indicator-heading-font-family, $theme-step-indicator-heading-font-size ); margin-top: units($step-indicator-header-margin-top); }
}
.usa-step-indicator__current-step {
$step-lh: lh($theme-step-indicator-heading-font-family, 2); @include u-circle($step-indicator-counter-size); @include u-text("normal", "tabular"); background-color: color($theme-step-indicator-segment-color-current); color: color($step-indicator-background-color); display: inline-block; // Magic number circle centering padding: calc( (#{units($step-indicator-counter-size)} - (2ex * #{$step-lh})) * 0.5 ); text-align: center;
}
.usa-step-indicator__total-steps {
@include u-text("normal", "tabular"); color: color($theme-step-indicator-segment-color-current); margin-right: units(1);
}
.usa-step-indicator–counters, .usa-step-indicator–counters-sm {
.usa-step-indicator__segment { @include at-media($theme-step-indicator-min-width) { $counter-lh: lh($theme-step-indicator-font-family, 1); // Remove segment gaps @include u-margin-x(0); // Add extra margin for counter @if $theme-step-indicator-counter-gap == 0 { margin-top: calc( ( ( #{units($step-indicator-counter-size)} - #{units($theme-step-indicator-segment-height)} ) / 2 ) ); } @else { margin-top: calc( ( ( #{units($step-indicator-counter-size)} - #{units($theme-step-indicator-segment-height)} ) / 2 ) + #{units($theme-step-indicator-counter-gap)} ); } // Add counter &:before { @include u-circle($step-indicator-counter-size); @include u-text("tabular"); background-color: color($step-indicator-background-color); box-shadow: inset 0 0 0 units($theme-step-indicator-counter-border-width) color($theme-step-indicator-segment-color-pending), 0 0 0 units($theme-step-indicator-counter-gap) color($step-indicator-background-color); color: color($theme-step-indicator-text-pending-color); content: counter(usa-step-indicator); display: block; font-weight: fw("bold"); left: 0; line-height: lh($theme-step-indicator-font-family, 1); // Magic number circle centering padding: calc( (#{units($step-indicator-counter-size)} - (2ex * #{$counter-lh})) * 0.5 ); // padding: 1.5ex; position: absolute; text-align: center; top: calc( ( #{units($step-indicator-counter-size)} - #{units( $theme-step-indicator-segment-height )} ) / -2 ); z-index: z(100); } &:last-child { // Don't show the last segment when counters appear &:after { display: none; } } } } .usa-step-indicator__segment--complete { &::before { background-color: color($theme-step-indicator-segment-color-complete); box-shadow: 0 0 0 units($theme-step-indicator-counter-gap) color($step-indicator-background-color); color: color($step-indicator-background-color); } } .usa-step-indicator__segment--current { &::before { background-color: color($theme-step-indicator-segment-color-current); box-shadow: 0 0 0 units($theme-step-indicator-counter-gap) color($step-indicator-background-color); color: color($step-indicator-background-color); } } .usa-step-indicator__segment-label { @include at-media($theme-step-indicator-min-width) { // Add counter margin margin-top: calc( ( ( #{units($step-indicator-counter-size)} + #{units( $theme-step-indicator-segment-height )} ) / 2 ) + #{units($step-indicator-label-margin-top)} ); } } // Adjust segments with centered variant &.usa-step-indicator--center { @include at-media($theme-step-indicator-min-width) { .usa-step-indicator__segment { &:first-child { &:after { left: 50%; right: 0; width: auto; } } &:last-child { &:after { display: block; left: 0; right: 50%; width: auto; } } } } }
}
.usa-step-indicator–counters-sm {
.usa-step-indicator__segment { @include at-media($theme-step-indicator-min-width) { $counter-lh: lh($theme-step-indicator-font-family, 1); // Add extra margin for counter @if $theme-step-indicator-counter-gap == 0 { margin-top: calc( ( ( #{units($step-indicator-counter-size-sm)} - #{units($theme-step-indicator-segment-height)} ) / 2 ) ); } @else { margin-top: calc( ( ( #{units($step-indicator-counter-size-sm)} - #{units($theme-step-indicator-segment-height)} ) / 2 ) + #{units($theme-step-indicator-counter-gap)} ); } // Add counter &:before { @include u-circle($step-indicator-counter-size-sm); @include u-font-size($theme-step-indicator-font-family, 3); padding: calc(#{units(0.5)} + 1px); top: calc( ( #{units($step-indicator-counter-size-sm)} - #{units( $theme-step-indicator-segment-height )} ) / -2 ); } &:last-child { // Don't show the last segment when counters appear &:after { display: none; } } } } .usa-step-indicator__segment-label { @include at-media($theme-step-indicator-min-width) { // Add counter margin margin-top: calc( ( ( #{units($step-indicator-counter-size-sm)} + #{units( $theme-step-indicator-segment-height )} ) / 2 ) + #{units($step-indicator-label-margin-top)} ); } }
}
.usa-step-indicator–no-labels {
margin-left: units($theme-step-indicator-segment-gap) / -2; margin-right: units($theme-step-indicator-segment-gap) / -2; .usa-step-indicator__segment { // Remove extra counter margin margin-top: 0; // Add gap between segments margin-left: units($theme-step-indicator-segment-gap) / 2; margin-right: units($theme-step-indicator-segment-gap) / 2; &:before { // Don't show counters display: none; } &:last-child { // Show last segment &:after { display: block; } } } .usa-step-indicator__heading { margin-top: units($step-indicator-header-margin-top-sm); }
}
.usa-step-indicator–no-labels {
.usa-step-indicator__segment-label { // Don't show labels, even if they exist display: none; }
}
.usa-step-indicator–center {
margin-left: units($theme-step-indicator-segment-gap) / -2; margin-right: units($theme-step-indicator-segment-gap) / -2; .usa-step-indicator__segment { margin-left: units($theme-step-indicator-segment-gap) / 2; margin-right: units($theme-step-indicator-segment-gap) / 2; &:before { @if $theme-step-indicator-counter-gap == 0 { left: calc(50% - ((#{units($step-indicator-counter-size)}) / 2)); } @else { left: calc( 50% - ( ( #{units($step-indicator-counter-size)} + #{units($theme-step-indicator-counter-gap)} ) / 2 ) ); } } } .usa-step-indicator__segment-label { // Balance label padding @include u-padding-x(1); // Center labels text-align: center; } &.usa-step-indicator--no-labels { .usa-step-indicator__segment { // Use full-width segments &:first-child { &:after { left: 0; } } &:last-child { &:after { right: 0; } } } } &.usa-step-indicator--counters-sm { .usa-step-indicator__segment { &:before { @if $theme-step-indicator-counter-gap == 0 { left: calc(50% - ((#{units($step-indicator-counter-size-sm)}) / 2)); } @else { left: calc( 50% - ( ( #{units($step-indicator-counter-size-sm)} + #{units($theme-step-indicator-counter-gap)} ) / 2 ) ); } } } }
}