Skip to content

Commit

Permalink
converting color stops back to percentages for bourbon compatibility
Browse files Browse the repository at this point in the history
  • Loading branch information
timhettler committed Jan 6, 2014
1 parent 893e99e commit e5fc3d9
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 21 deletions.
Expand Up @@ -35,7 +35,7 @@ $gradient-overlay-color-stops: (#000 0%, #fff 100%) !default;
$stop: percentage-to-decimal($stop);
$scale: percentage-to-decimal($scale);

@return $scale * $stop - (0.5 * ($scale - 1));
@return percentage($scale * $stop - (0.5 * ($scale - 1)));
}

// Convert percentage units to decimal units
Expand Down
32 changes: 12 additions & 20 deletions stylesheets/compass-photoshop-gradient-overlay.css
Expand Up @@ -28,104 +28,96 @@ body {

/* line 30, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--angle--0 {
background-image: -webkit-linear-gradient(180deg, #000000 0%, #ffffff 100%);
background-image: -moz-linear-gradient(180deg, #000000 0%, #ffffff 100%);
background-image: -o-linear-gradient(180deg, #000000 0%, #ffffff 100%);
background-image: -webkit-linear-gradient(180deg, #000000 0%, #ffffff 100%);
background-image: linear-gradient(-90deg, #000000 0%, #ffffff 100%);
}

/* line 35, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--angle--90 {
background-image: -webkit-linear-gradient(90deg, #000000 0%, #ffffff 100%);
background-image: -moz-linear-gradient(90deg, #000000 0%, #ffffff 100%);
background-image: -o-linear-gradient(90deg, #000000 0%, #ffffff 100%);
background-image: -webkit-linear-gradient(90deg, #000000 0%, #ffffff 100%);
background-image: linear-gradient(0deg, #000000 0%, #ffffff 100%);
}

/* line 40, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--angle--180 {
background-image: -webkit-linear-gradient(0deg, #000000 0%, #ffffff 100%);
background-image: -moz-linear-gradient(0deg, #000000 0%, #ffffff 100%);
background-image: -o-linear-gradient(0deg, #000000 0%, #ffffff 100%);
background-image: -webkit-linear-gradient(0deg, #000000 0%, #ffffff 100%);
background-image: linear-gradient(90deg, #000000 0%, #ffffff 100%);
}

/* line 45, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--angle--270 {
background-image: -webkit-linear-gradient(270deg, #000000 0%, #ffffff 100%);
background-image: -moz-linear-gradient(270deg, #000000 0%, #ffffff 100%);
background-image: -o-linear-gradient(270deg, #000000 0%, #ffffff 100%);
background-image: -webkit-linear-gradient(270deg, #000000 0%, #ffffff 100%);
background-image: linear-gradient(180deg, #000000 0%, #ffffff 100%);
}

/* line 52, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--scale--50 {
background-image: -webkit-linear-gradient(90deg, #000000 25%, #ffffff 75%);
background-image: -moz-linear-gradient(90deg, #000000 25%, #ffffff 75%);
background-image: -o-linear-gradient(90deg, #000000 25%, #ffffff 75%);
background-image: -webkit-linear-gradient(90deg, #000000 25%, #ffffff 75%);
background-image: linear-gradient(0deg, #000000 25%, #ffffff 75%);
}

/* line 57, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--scale--75 {
background-image: -webkit-linear-gradient(90deg, #000000 12.5%, #ffffff 87.5%);
background-image: -moz-linear-gradient(90deg, #000000 12.5%, #ffffff 87.5%);
background-image: -o-linear-gradient(90deg, #000000 12.5%, #ffffff 87.5%);
background-image: -webkit-linear-gradient(90deg, #000000 12.5%, #ffffff 87.5%);
background-image: linear-gradient(0deg, #000000 12.5%, #ffffff 87.5%);
}

/* line 62, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--scale--125 {
background-image: -webkit-linear-gradient(90deg, #000000 -12.5%, #ffffff 112.5%);
background-image: -moz-linear-gradient(90deg, #000000 -12.5%, #ffffff 112.5%);
background-image: -o-linear-gradient(90deg, #000000 -12.5%, #ffffff 112.5%);
background-image: -webkit-linear-gradient(90deg, #000000 -12.5%, #ffffff 112.5%);
background-image: linear-gradient(0deg, #000000 -12.5%, #ffffff 112.5%);
}

/* line 67, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--scale--150 {
background-image: -webkit-linear-gradient(90deg, #000000 -25%, #ffffff 125%);
background-image: -moz-linear-gradient(90deg, #000000 -25%, #ffffff 125%);
background-image: -o-linear-gradient(90deg, #000000 -25%, #ffffff 125%);
background-image: -webkit-linear-gradient(90deg, #000000 -25%, #ffffff 125%);
background-image: linear-gradient(0deg, #000000 -25%, #ffffff 125%);
}

/* line 74, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--stops--3 {
background-image: -webkit-linear-gradient(90deg, #ff0000 0%, #008000 50%, #0000ff 100%);
background-image: -moz-linear-gradient(90deg, #ff0000 0%, #008000 50%, #0000ff 100%);
background-image: -o-linear-gradient(90deg, #ff0000 0%, #008000 50%, #0000ff 100%);
background-image: -webkit-linear-gradient(90deg, #ff0000 0%, #008000 50%, #0000ff 100%);
background-image: linear-gradient(0deg, #ff0000 0%, #008000 50%, #0000ff 100%);
}

/* line 79, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--stops--4 {
background-image: -webkit-linear-gradient(90deg, #ff0000 0%, #ffff00 33.3333%, #008000 66.6666%, #0000ff 100%);
background-image: -moz-linear-gradient(90deg, #ff0000 0%, #ffff00 33.3333%, #008000 66.6666%, #0000ff 100%);
background-image: -o-linear-gradient(90deg, #ff0000 0%, #ffff00 33.3333%, #008000 66.6666%, #0000ff 100%);
background-image: -webkit-linear-gradient(90deg, #ff0000 0%, #ffff00 33.3333%, #008000 66.6666%, #0000ff 100%);
background-image: linear-gradient(0deg, #ff0000 0%, #ffff00 33.3333%, #008000 66.6666%, #0000ff 100%);
}

/* line 84, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--stops--5 {
background-image: -webkit-linear-gradient(90deg, #ff0000 0%, #ffa500 25%, #ffff00 50%, #008000 75%, #0000ff 100%);
background-image: -moz-linear-gradient(90deg, #ff0000 0%, #ffa500 25%, #ffff00 50%, #008000 75%, #0000ff 100%);
background-image: -o-linear-gradient(90deg, #ff0000 0%, #ffa500 25%, #ffff00 50%, #008000 75%, #0000ff 100%);
background-image: -webkit-linear-gradient(90deg, #ff0000 0%, #ffa500 25%, #ffff00 50%, #008000 75%, #0000ff 100%);
background-image: linear-gradient(0deg, #ff0000 0%, #ffa500 25%, #ffff00 50%, #008000 75%, #0000ff 100%);
}

/* line 89, ../sass/compass-photoshop-gradient-overlay.scss */
.gradient--stops--6 {
background-image: -webkit-linear-gradient(90deg, #ff0000 0%, #ffa500 20%, #ffff00 40%, #008000 60%, #0000ff 80%, #ee82ee 100%);
background-image: -moz-linear-gradient(90deg, #ff0000 0%, #ffa500 20%, #ffff00 40%, #008000 60%, #0000ff 80%, #ee82ee 100%);
background-image: -o-linear-gradient(90deg, #ff0000 0%, #ffa500 20%, #ffff00 40%, #008000 60%, #0000ff 80%, #ee82ee 100%);
background-image: -webkit-linear-gradient(90deg, #ff0000 0%, #ffa500 20%, #ffff00 40%, #008000 60%, #0000ff 80%, #ee82ee 100%);
background-image: linear-gradient(0deg, #ff0000 0%, #ffa500 20%, #ffff00 40%, #008000 60%, #0000ff 80%, #ee82ee 100%);
}

/* line 94, ../sass/compass-photoshop-gradient-overlay.scss */
.complex-gradient {
background-image: -webkit-linear-gradient(180deg, rgba(255, 0, 0, 0.75) 25%, rgba(255, 165, 0, 0.75) 35%, rgba(255, 255, 0, 0.75) 45%, rgba(0, 128, 0, 0.75) 55.0%, rgba(0, 0, 255, 0.75) 65%, rgba(238, 130, 238, 0.75) 75%);
background-image: -moz-linear-gradient(180deg, rgba(255, 0, 0, 0.75) 25%, rgba(255, 165, 0, 0.75) 35%, rgba(255, 255, 0, 0.75) 45%, rgba(0, 128, 0, 0.75) 55.0%, rgba(0, 0, 255, 0.75) 65%, rgba(238, 130, 238, 0.75) 75%);
background-image: -o-linear-gradient(180deg, rgba(255, 0, 0, 0.75) 25%, rgba(255, 165, 0, 0.75) 35%, rgba(255, 255, 0, 0.75) 45%, rgba(0, 128, 0, 0.75) 55.0%, rgba(0, 0, 255, 0.75) 65%, rgba(238, 130, 238, 0.75) 75%);
background-image: linear-gradient(-90deg, rgba(255, 0, 0, 0.75) 25%, rgba(255, 165, 0, 0.75) 35%, rgba(255, 255, 0, 0.75) 45%, rgba(0, 128, 0, 0.75) 55.0%, rgba(0, 0, 255, 0.75) 65%, rgba(238, 130, 238, 0.75) 75%);
}

0 comments on commit e5fc3d9

Please sign in to comment.