Last active
August 29, 2015 14:20
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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