Add a percent-based test case for grid-backgrounds, remove unnecessary 0.001 increment.

This commit is contained in:
Chris Eppstein 2011-04-15 23:49:49 -07:00
parent 0a33bc14b2
commit 8a8d625a7d
3 changed files with 51 additions and 6 deletions

View File

@ -56,12 +56,8 @@ $grid-background-force-fluid : false !default;
// $z represents the end of a gutter, equal to $g plus one gutter-width // $z represents the end of a gutter, equal to $g plus one gutter-width
$z: $g + $gutter; $z: $g + $gutter;
// make sure we are building towards 100% @if (unit($a) == "%") and ($i == ($total - 1)) {
@if unit($a) == "%" { $z: 100%;
$a: $a + .001;
@if $i == ($total - 1) {
$z: 100%;
}
} }
// and we add this column/gutter pair to our grid // and we add this column/gutter pair to our grid

View File

@ -29,3 +29,35 @@
-o-background-size: 100% 1.5em, auto; -o-background-size: 100% 1.5em, auto;
background-size: 100% 1.5em, auto; background-size: 100% 1.5em, auto;
background-position: left top; } background-position: left top; }
.percent-baseline {
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
-moz-background-size: 100% 1.5em;
-webkit-background-size: 100% 1.5em;
-o-background-size: 100% 1.5em;
background-size: 100% 1.5em;
background-position: left top; }
.percent-columns {
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(11%, rgba(0, 0, 0, 0)), color-stop(11%, rgba(100, 100, 225, 0.25)), color-stop(16%, rgba(100, 100, 225, 0.25)), color-stop(16%, rgba(0, 0, 0, 0)), color-stop(17%, rgba(0, 0, 0, 0)), color-stop(17%, rgba(100, 100, 225, 0.25)), color-stop(22%, rgba(100, 100, 225, 0.25)), color-stop(22%, rgba(0, 0, 0, 0)), color-stop(23%, rgba(0, 0, 0, 0)), color-stop(23%, rgba(100, 100, 225, 0.25)), color-stop(28%, rgba(100, 100, 225, 0.25)), color-stop(28%, rgba(0, 0, 0, 0)), color-stop(29%, rgba(0, 0, 0, 0)), color-stop(29%, rgba(100, 100, 225, 0.25)), color-stop(34%, rgba(100, 100, 225, 0.25)), color-stop(34%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(100, 100, 225, 0.25)), color-stop(40%, rgba(100, 100, 225, 0.25)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(41%, rgba(0, 0, 0, 0)), color-stop(41%, rgba(100, 100, 225, 0.25)), color-stop(46%, rgba(100, 100, 225, 0.25)), color-stop(46%, rgba(0, 0, 0, 0)), color-stop(47%, rgba(0, 0, 0, 0)), color-stop(47%, rgba(100, 100, 225, 0.25)), color-stop(52%, rgba(100, 100, 225, 0.25)), color-stop(52%, rgba(0, 0, 0, 0)), color-stop(53%, rgba(0, 0, 0, 0)), color-stop(53%, rgba(100, 100, 225, 0.25)), color-stop(58%, rgba(100, 100, 225, 0.25)), color-stop(58%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(100, 100, 225, 0.25)), color-stop(64%, rgba(100, 100, 225, 0.25)), color-stop(64%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(100, 100, 225, 0.25)), color-stop(70%, rgba(100, 100, 225, 0.25)), color-stop(70%, rgba(0, 0, 0, 0)), color-stop(71%, rgba(0, 0, 0, 0)), color-stop(71%, rgba(100, 100, 225, 0.25)), color-stop(76%, rgba(100, 100, 225, 0.25)), color-stop(76%, rgba(0, 0, 0, 0)), color-stop(77%, rgba(0, 0, 0, 0)), color-stop(77%, rgba(100, 100, 225, 0.25)), color-stop(82%, rgba(100, 100, 225, 0.25)), color-stop(82%, rgba(0, 0, 0, 0)), color-stop(83%, rgba(0, 0, 0, 0)), color-stop(83%, rgba(100, 100, 225, 0.25)), color-stop(88%, rgba(100, 100, 225, 0.25)), color-stop(88%, rgba(0, 0, 0, 0)), color-stop(89%, rgba(0, 0, 0, 0)), color-stop(89%, rgba(100, 100, 225, 0.25)), color-stop(94%, rgba(100, 100, 225, 0.25)), color-stop(94%, rgba(0, 0, 0, 0)), color-stop(95%, rgba(0, 0, 0, 0)), color-stop(95%, rgba(100, 100, 225, 0.25)), color-stop(100%, rgba(100, 100, 225, 0.25)), color-stop(100%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 11%, rgba(100, 100, 225, 0.25) 11%, rgba(100, 100, 225, 0.25) 16%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 17%, rgba(100, 100, 225, 0.25) 17%, rgba(100, 100, 225, 0.25) 22%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 23%, rgba(100, 100, 225, 0.25) 23%, rgba(100, 100, 225, 0.25) 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 29%, rgba(100, 100, 225, 0.25) 29%, rgba(100, 100, 225, 0.25) 34%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 35%, rgba(100, 100, 225, 0.25) 35%, rgba(100, 100, 225, 0.25) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%, rgba(100, 100, 225, 0.25) 41%, rgba(100, 100, 225, 0.25) 46%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 47%, rgba(100, 100, 225, 0.25) 47%, rgba(100, 100, 225, 0.25) 52%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 53%, rgba(100, 100, 225, 0.25) 53%, rgba(100, 100, 225, 0.25) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 59%, rgba(100, 100, 225, 0.25) 59%, rgba(100, 100, 225, 0.25) 64%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 65%, rgba(100, 100, 225, 0.25) 65%, rgba(100, 100, 225, 0.25) 70%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%, rgba(100, 100, 225, 0.25) 71%, rgba(100, 100, 225, 0.25) 76%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 77%, rgba(100, 100, 225, 0.25) 77%, rgba(100, 100, 225, 0.25) 82%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0) 83%, rgba(100, 100, 225, 0.25) 83%, rgba(100, 100, 225, 0.25) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 89%, rgba(100, 100, 225, 0.25) 89%, rgba(100, 100, 225, 0.25) 94%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0) 95%, rgba(100, 100, 225, 0.25) 95%, rgba(100, 100, 225, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 11%, rgba(100, 100, 225, 0.25) 11%, rgba(100, 100, 225, 0.25) 16%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 17%, rgba(100, 100, 225, 0.25) 17%, rgba(100, 100, 225, 0.25) 22%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 23%, rgba(100, 100, 225, 0.25) 23%, rgba(100, 100, 225, 0.25) 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 29%, rgba(100, 100, 225, 0.25) 29%, rgba(100, 100, 225, 0.25) 34%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 35%, rgba(100, 100, 225, 0.25) 35%, rgba(100, 100, 225, 0.25) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%, rgba(100, 100, 225, 0.25) 41%, rgba(100, 100, 225, 0.25) 46%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 47%, rgba(100, 100, 225, 0.25) 47%, rgba(100, 100, 225, 0.25) 52%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 53%, rgba(100, 100, 225, 0.25) 53%, rgba(100, 100, 225, 0.25) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 59%, rgba(100, 100, 225, 0.25) 59%, rgba(100, 100, 225, 0.25) 64%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 65%, rgba(100, 100, 225, 0.25) 65%, rgba(100, 100, 225, 0.25) 70%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%, rgba(100, 100, 225, 0.25) 71%, rgba(100, 100, 225, 0.25) 76%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 77%, rgba(100, 100, 225, 0.25) 77%, rgba(100, 100, 225, 0.25) 82%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0) 83%, rgba(100, 100, 225, 0.25) 83%, rgba(100, 100, 225, 0.25) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 89%, rgba(100, 100, 225, 0.25) 89%, rgba(100, 100, 225, 0.25) 94%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0) 95%, rgba(100, 100, 225, 0.25) 95%, rgba(100, 100, 225, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 11%, rgba(100, 100, 225, 0.25) 11%, rgba(100, 100, 225, 0.25) 16%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 17%, rgba(100, 100, 225, 0.25) 17%, rgba(100, 100, 225, 0.25) 22%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 23%, rgba(100, 100, 225, 0.25) 23%, rgba(100, 100, 225, 0.25) 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 29%, rgba(100, 100, 225, 0.25) 29%, rgba(100, 100, 225, 0.25) 34%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 35%, rgba(100, 100, 225, 0.25) 35%, rgba(100, 100, 225, 0.25) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%, rgba(100, 100, 225, 0.25) 41%, rgba(100, 100, 225, 0.25) 46%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 47%, rgba(100, 100, 225, 0.25) 47%, rgba(100, 100, 225, 0.25) 52%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 53%, rgba(100, 100, 225, 0.25) 53%, rgba(100, 100, 225, 0.25) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 59%, rgba(100, 100, 225, 0.25) 59%, rgba(100, 100, 225, 0.25) 64%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 65%, rgba(100, 100, 225, 0.25) 65%, rgba(100, 100, 225, 0.25) 70%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%, rgba(100, 100, 225, 0.25) 71%, rgba(100, 100, 225, 0.25) 76%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 77%, rgba(100, 100, 225, 0.25) 77%, rgba(100, 100, 225, 0.25) 82%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0) 83%, rgba(100, 100, 225, 0.25) 83%, rgba(100, 100, 225, 0.25) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 89%, rgba(100, 100, 225, 0.25) 89%, rgba(100, 100, 225, 0.25) 94%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0) 95%, rgba(100, 100, 225, 0.25) 95%, rgba(100, 100, 225, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 11%, rgba(100, 100, 225, 0.25) 11%, rgba(100, 100, 225, 0.25) 16%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 17%, rgba(100, 100, 225, 0.25) 17%, rgba(100, 100, 225, 0.25) 22%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 23%, rgba(100, 100, 225, 0.25) 23%, rgba(100, 100, 225, 0.25) 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 29%, rgba(100, 100, 225, 0.25) 29%, rgba(100, 100, 225, 0.25) 34%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 35%, rgba(100, 100, 225, 0.25) 35%, rgba(100, 100, 225, 0.25) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%, rgba(100, 100, 225, 0.25) 41%, rgba(100, 100, 225, 0.25) 46%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 47%, rgba(100, 100, 225, 0.25) 47%, rgba(100, 100, 225, 0.25) 52%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 53%, rgba(100, 100, 225, 0.25) 53%, rgba(100, 100, 225, 0.25) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 59%, rgba(100, 100, 225, 0.25) 59%, rgba(100, 100, 225, 0.25) 64%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 65%, rgba(100, 100, 225, 0.25) 65%, rgba(100, 100, 225, 0.25) 70%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%, rgba(100, 100, 225, 0.25) 71%, rgba(100, 100, 225, 0.25) 76%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 77%, rgba(100, 100, 225, 0.25) 77%, rgba(100, 100, 225, 0.25) 82%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0) 83%, rgba(100, 100, 225, 0.25) 83%, rgba(100, 100, 225, 0.25) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 89%, rgba(100, 100, 225, 0.25) 89%, rgba(100, 100, 225, 0.25) 94%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0) 95%, rgba(100, 100, 225, 0.25) 95%, rgba(100, 100, 225, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-position: left top; }
.percent-combined {
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(11%, rgba(0, 0, 0, 0)), color-stop(11%, rgba(100, 100, 225, 0.25)), color-stop(16%, rgba(100, 100, 225, 0.25)), color-stop(16%, rgba(0, 0, 0, 0)), color-stop(17%, rgba(0, 0, 0, 0)), color-stop(17%, rgba(100, 100, 225, 0.25)), color-stop(22%, rgba(100, 100, 225, 0.25)), color-stop(22%, rgba(0, 0, 0, 0)), color-stop(23%, rgba(0, 0, 0, 0)), color-stop(23%, rgba(100, 100, 225, 0.25)), color-stop(28%, rgba(100, 100, 225, 0.25)), color-stop(28%, rgba(0, 0, 0, 0)), color-stop(29%, rgba(0, 0, 0, 0)), color-stop(29%, rgba(100, 100, 225, 0.25)), color-stop(34%, rgba(100, 100, 225, 0.25)), color-stop(34%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(100, 100, 225, 0.25)), color-stop(40%, rgba(100, 100, 225, 0.25)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(41%, rgba(0, 0, 0, 0)), color-stop(41%, rgba(100, 100, 225, 0.25)), color-stop(46%, rgba(100, 100, 225, 0.25)), color-stop(46%, rgba(0, 0, 0, 0)), color-stop(47%, rgba(0, 0, 0, 0)), color-stop(47%, rgba(100, 100, 225, 0.25)), color-stop(52%, rgba(100, 100, 225, 0.25)), color-stop(52%, rgba(0, 0, 0, 0)), color-stop(53%, rgba(0, 0, 0, 0)), color-stop(53%, rgba(100, 100, 225, 0.25)), color-stop(58%, rgba(100, 100, 225, 0.25)), color-stop(58%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(100, 100, 225, 0.25)), color-stop(64%, rgba(100, 100, 225, 0.25)), color-stop(64%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(100, 100, 225, 0.25)), color-stop(70%, rgba(100, 100, 225, 0.25)), color-stop(70%, rgba(0, 0, 0, 0)), color-stop(71%, rgba(0, 0, 0, 0)), color-stop(71%, rgba(100, 100, 225, 0.25)), color-stop(76%, rgba(100, 100, 225, 0.25)), color-stop(76%, rgba(0, 0, 0, 0)), color-stop(77%, rgba(0, 0, 0, 0)), color-stop(77%, rgba(100, 100, 225, 0.25)), color-stop(82%, rgba(100, 100, 225, 0.25)), color-stop(82%, rgba(0, 0, 0, 0)), color-stop(83%, rgba(0, 0, 0, 0)), color-stop(83%, rgba(100, 100, 225, 0.25)), color-stop(88%, rgba(100, 100, 225, 0.25)), color-stop(88%, rgba(0, 0, 0, 0)), color-stop(89%, rgba(0, 0, 0, 0)), color-stop(89%, rgba(100, 100, 225, 0.25)), color-stop(94%, rgba(100, 100, 225, 0.25)), color-stop(94%, rgba(0, 0, 0, 0)), color-stop(95%, rgba(0, 0, 0, 0)), color-stop(95%, rgba(100, 100, 225, 0.25)), color-stop(100%, rgba(100, 100, 225, 0.25)), color-stop(100%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 11%, rgba(100, 100, 225, 0.25) 11%, rgba(100, 100, 225, 0.25) 16%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 17%, rgba(100, 100, 225, 0.25) 17%, rgba(100, 100, 225, 0.25) 22%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 23%, rgba(100, 100, 225, 0.25) 23%, rgba(100, 100, 225, 0.25) 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 29%, rgba(100, 100, 225, 0.25) 29%, rgba(100, 100, 225, 0.25) 34%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 35%, rgba(100, 100, 225, 0.25) 35%, rgba(100, 100, 225, 0.25) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%, rgba(100, 100, 225, 0.25) 41%, rgba(100, 100, 225, 0.25) 46%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 47%, rgba(100, 100, 225, 0.25) 47%, rgba(100, 100, 225, 0.25) 52%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 53%, rgba(100, 100, 225, 0.25) 53%, rgba(100, 100, 225, 0.25) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 59%, rgba(100, 100, 225, 0.25) 59%, rgba(100, 100, 225, 0.25) 64%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 65%, rgba(100, 100, 225, 0.25) 65%, rgba(100, 100, 225, 0.25) 70%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%, rgba(100, 100, 225, 0.25) 71%, rgba(100, 100, 225, 0.25) 76%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 77%, rgba(100, 100, 225, 0.25) 77%, rgba(100, 100, 225, 0.25) 82%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0) 83%, rgba(100, 100, 225, 0.25) 83%, rgba(100, 100, 225, 0.25) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 89%, rgba(100, 100, 225, 0.25) 89%, rgba(100, 100, 225, 0.25) 94%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0) 95%, rgba(100, 100, 225, 0.25) 95%, rgba(100, 100, 225, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -moz-linear-gradient(left, rgba(0, 0, 0, 0) 11%, rgba(100, 100, 225, 0.25) 11%, rgba(100, 100, 225, 0.25) 16%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 17%, rgba(100, 100, 225, 0.25) 17%, rgba(100, 100, 225, 0.25) 22%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 23%, rgba(100, 100, 225, 0.25) 23%, rgba(100, 100, 225, 0.25) 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 29%, rgba(100, 100, 225, 0.25) 29%, rgba(100, 100, 225, 0.25) 34%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 35%, rgba(100, 100, 225, 0.25) 35%, rgba(100, 100, 225, 0.25) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%, rgba(100, 100, 225, 0.25) 41%, rgba(100, 100, 225, 0.25) 46%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 47%, rgba(100, 100, 225, 0.25) 47%, rgba(100, 100, 225, 0.25) 52%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 53%, rgba(100, 100, 225, 0.25) 53%, rgba(100, 100, 225, 0.25) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 59%, rgba(100, 100, 225, 0.25) 59%, rgba(100, 100, 225, 0.25) 64%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 65%, rgba(100, 100, 225, 0.25) 65%, rgba(100, 100, 225, 0.25) 70%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%, rgba(100, 100, 225, 0.25) 71%, rgba(100, 100, 225, 0.25) 76%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 77%, rgba(100, 100, 225, 0.25) 77%, rgba(100, 100, 225, 0.25) 82%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0) 83%, rgba(100, 100, 225, 0.25) 83%, rgba(100, 100, 225, 0.25) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 89%, rgba(100, 100, 225, 0.25) 89%, rgba(100, 100, 225, 0.25) 94%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0) 95%, rgba(100, 100, 225, 0.25) 95%, rgba(100, 100, 225, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), -o-linear-gradient(left, rgba(0, 0, 0, 0) 11%, rgba(100, 100, 225, 0.25) 11%, rgba(100, 100, 225, 0.25) 16%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 17%, rgba(100, 100, 225, 0.25) 17%, rgba(100, 100, 225, 0.25) 22%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 23%, rgba(100, 100, 225, 0.25) 23%, rgba(100, 100, 225, 0.25) 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 29%, rgba(100, 100, 225, 0.25) 29%, rgba(100, 100, 225, 0.25) 34%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 35%, rgba(100, 100, 225, 0.25) 35%, rgba(100, 100, 225, 0.25) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%, rgba(100, 100, 225, 0.25) 41%, rgba(100, 100, 225, 0.25) 46%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 47%, rgba(100, 100, 225, 0.25) 47%, rgba(100, 100, 225, 0.25) 52%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 53%, rgba(100, 100, 225, 0.25) 53%, rgba(100, 100, 225, 0.25) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 59%, rgba(100, 100, 225, 0.25) 59%, rgba(100, 100, 225, 0.25) 64%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 65%, rgba(100, 100, 225, 0.25) 65%, rgba(100, 100, 225, 0.25) 70%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%, rgba(100, 100, 225, 0.25) 71%, rgba(100, 100, 225, 0.25) 76%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 77%, rgba(100, 100, 225, 0.25) 77%, rgba(100, 100, 225, 0.25) 82%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0) 83%, rgba(100, 100, 225, 0.25) 83%, rgba(100, 100, 225, 0.25) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 89%, rgba(100, 100, 225, 0.25) 89%, rgba(100, 100, 225, 0.25) 94%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0) 95%, rgba(100, 100, 225, 0.25) 95%, rgba(100, 100, 225, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%), linear-gradient(left, rgba(0, 0, 0, 0) 11%, rgba(100, 100, 225, 0.25) 11%, rgba(100, 100, 225, 0.25) 16%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 17%, rgba(100, 100, 225, 0.25) 17%, rgba(100, 100, 225, 0.25) 22%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 23%, rgba(100, 100, 225, 0.25) 23%, rgba(100, 100, 225, 0.25) 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 29%, rgba(100, 100, 225, 0.25) 29%, rgba(100, 100, 225, 0.25) 34%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 35%, rgba(100, 100, 225, 0.25) 35%, rgba(100, 100, 225, 0.25) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 41%, rgba(100, 100, 225, 0.25) 41%, rgba(100, 100, 225, 0.25) 46%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0) 47%, rgba(100, 100, 225, 0.25) 47%, rgba(100, 100, 225, 0.25) 52%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 53%, rgba(100, 100, 225, 0.25) 53%, rgba(100, 100, 225, 0.25) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 59%, rgba(100, 100, 225, 0.25) 59%, rgba(100, 100, 225, 0.25) 64%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 65%, rgba(100, 100, 225, 0.25) 65%, rgba(100, 100, 225, 0.25) 70%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%, rgba(100, 100, 225, 0.25) 71%, rgba(100, 100, 225, 0.25) 76%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0) 77%, rgba(100, 100, 225, 0.25) 77%, rgba(100, 100, 225, 0.25) 82%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0) 83%, rgba(100, 100, 225, 0.25) 83%, rgba(100, 100, 225, 0.25) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 89%, rgba(100, 100, 225, 0.25) 89%, rgba(100, 100, 225, 0.25) 94%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0) 95%, rgba(100, 100, 225, 0.25) 95%, rgba(100, 100, 225, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
-moz-background-size: 100% 1.5em, auto;
-webkit-background-size: 100% 1.5em, auto;
-o-background-size: 100% 1.5em, auto;
background-size: 100% 1.5em, auto;
background-position: left top; }

View File

@ -11,3 +11,20 @@
.combined { .combined {
@include grid-background; @include grid-background;
} }
$grid-background-total-columns: 15;
$grid-background-offset: 11%;
$grid-background-column-width: 5%;
$grid-background-gutter-width: 1%;
.percent-baseline {
@include baseline-grid-background;
}
.percent-columns {
@include column-grid-background;
}
.percent-combined {
@include grid-background;
}