Skip to content

Instantly share code, notes, and snippets.

@rgkimball
Last active August 29, 2015 14:20
Show Gist options
  • Save rgkimball/2813a0ee04d478fd407f to your computer and use it in GitHub Desktop.
Save rgkimball/2813a0ee04d478fd407f to your computer and use it in GitHub Desktop.
Sets progress bar visual based on which nth-child the active class is w/ a @for loop
$number-of-steps: 6;
.stage {
// etc.
&.active {
// Accents current stage's title.
.stage-title {
-webkit-box-shadow:-2px 2px 5px -1px darken($brand-blue,11%) inset;
-moz-box-shadow:-2px 2px 5px -1px darken($brand-blue,11%) inset;
box-shadow:-2px 2px 5px -1px darken($brand-blue,11%) inset;
}
// All subsequent stages are gray.
~ .stage .stage-title {
background: $lpq-gray-med;
}
// By default (0% progress), the bar is gray.
~ :last-child:after {
background: $lpq-gray-med;
}
// Depending on which nth-child .stage.active is, decide how much % the progress bar is complete using i-1/n-1 to find midpoint.
@for $i from 2 through ($number-of-steps - 1) {
$prog: ($i - 1)/($number-of-steps - 1) * 100;
$p: $prog + '%';
$p2: $prog + 0.001 + '%'; // using an imperceptibly small increment to render a line instead of a gradient.
&:nth-child(#{$i}n) ~ :last-child:after {
background: -webkit-linear-gradient(left, $brand-blue 0%,$brand-blue #{$p},$lpq-gray-med #{$p2},$lpq-gray-med 100%); // Chrome10+,Safari5.1+
background: -moz-linear-gradient(left, $brand-blue 0%, $brand-blue #{$p}, $lpq-gray-med #{$p2}, $lpq-gray-med 100%); // FF3.6+
background: -ms-linear-gradient(left, $brand-blue 0%,$brand-blue #{$p},$lpq-gray-med #{$p2},$lpq-gray-med 100%); // IE10+
background: -o-linear-gradient(left, $brand-blue 0%,$brand-blue #{$p},$lpq-gray-med #{$p2},$lpq-gray-med 100%); // Opera 11.10+
background: -webkit-gradient(linear, left top, right top, color-stop(0%,$brand-blue), color-stop(#{$p},$brand-blue), color-stop(#{$p2},$lpq-gray-med), color-stop(100%,$lpq-gray-med)); // Chrome,Safari4+
background: linear-gradient(to right, $brand-blue 0%,$brand-blue $p,$lpq-gray-med $p2,$lpq-gray-med 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$brand-blue', endColorstr='$lpq-gray-med',GradientType=1 ); // IE6-9
}
}
// If active item is the last child, progress bar is 100% blue.
&:last-child:after {
background: $brand-blue;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment