app/assets/stylesheets/_step-indicator.scss
@use 'uswds-core' as *;
$step-indicator-current-step-border-width: 3px;
$step-indicator-line-height: 4px;
.lg-step-indicator {
display: block;
border-bottom: 1px solid color('primary-light');
box-shadow: 0 2px 2px rgb(0 0 0 / 10%);
margin-bottom: units(4);
position: relative;
@include at-media('tablet') {
border-bottom: 0;
box-shadow: none;
}
@include at-media-max('tablet') {
&::before,
&::after {
bottom: 0;
content: '';
height: 100%;
position: absolute;
top: 0;
width: units(3);
}
&::before {
background: linear-gradient(
to right,
rgb(255 255 255 / 100%),
rgb(255 255 255 / 100%) 17%,
rgb(255 255 255 / 0%)
);
left: 0;
z-index: 1;
}
&::after {
background: linear-gradient(
to left,
rgb(255 255 255 / 100%),
rgb(255 255 255 / 100%) 17%,
rgb(255 255 255 / 0%)
);
right: 0;
}
}
> .usa-step-indicator__header {
@include at-media('tablet') {
display: none;
}
@include at-media-max('tablet') {
& .usa-step-indicator__heading-counter {
display: inline-block
}
& .usa-step-indicator__current-step {
width: 2rem;
height: 2rem;
padding: 0.3rem 0 0 0.1rem;
background-color: color('success');
}
& .usa-step-indicator__total-steps {
color: color('success')
}
& .usa-step-indicator__heading-text {
display: inline-block;
}
}
}
}
.step-indicator__scroller {
display: flex;
list-style-type: none;
margin: 0;
overflow: scroll;
padding: units(1) units(3) units(2);
scrollbar-width: none;
@include at-media('tablet') {
overflow: visible;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
&::after {
content: '';
flex: 0 0 units(3);
@include at-media('tablet') {
content: none;
}
}
&::-webkit-scrollbar {
display: none;
}
}
.step-indicator__step {
flex: 0 0 33.33%;
font-size: 0.75rem;
padding: 1.5rem 0.25rem 0;
position: relative;
text-align: center;
@include at-media('tablet') {
flex: 1 1 0%;
}
}
.step-indicator__step {
&::before {
background-color: color('base-lighter');
border-radius: 50%;
content: '';
height: 1rem;
left: 50%;
margin-left: -0.5rem;
position: absolute;
top: 0;
width: 1rem;
}
&:not(:last-child)::after {
background-color: color('base-lighter');
content: '';
height: $step-indicator-line-height;
left: calc(50% + 0.5rem + #{$step-indicator-line-height});
margin-top: -0.5 * $step-indicator-line-height;
position: absolute;
top: 0.5rem;
width: calc(100% - 1rem - #{$step-indicator-line-height * 2});
}
}
.step-indicator__step--current {
&::before {
background-color: color('white');
border: $step-indicator-current-step-border-width solid color('success');
}
}
.step-indicator__step--complete {
&::before {
background-color: color('white');
background-image: url('/alerts/success.svg');
}
&:not(:last-child)::after {
background-color: color('success');
}
}
.step-indicator__step--current .step-indicator__step-title {
font-weight: bold;
}
@include at-media-max('tablet') {
.step-indicator__step {
flex: 1 1 auto;
height: 0.5rem;
background-color: color('base-lighter');
padding: 0;
margin-right: 2px;
&::before, &::after {
display: none;
}
}
.step-indicator__step-title {
font-size: 0;
}
.step-indicator__step--complete {
background-color: color('success');
}
.step-indicator__step--current {
background-color: color('white');
border: 2px solid color('base');
}
.step-indicator__scroller::after {
display: none;
}
}