Skip to content

Commit

Permalink
2.0.0-b12
Browse files Browse the repository at this point in the history 
Fixed a bunch of issues with the gradient mixins
  • Loading branch information
Dennis committed Jul 26, 2014
1 parent 444075c commit ecd0251
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 43 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "skeleton-sass",
"version": "2.0.0-b11",
"version": "2.0.0-b12",
"author": "Dennis Thompson",
"homepage": "http://atomicpages.github.io/skeleton-sass/",
"repository": {
Expand Down
2 changes: 1 addition & 1 deletion skeleton/core/_config.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,4 @@ $base-font-size: 10px !global; // the font size in the html element so we can us
@import "dependencies";
@import "functions";
@import "mixins";
// @import "../../_MYconfig.scss" !global;
// @import "../../_MYconfig.scss";
61 changes: 36 additions & 25 deletions skeleton/themes/sphenoid/marrow/_private.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,54 +14,65 @@

// needs multiple stop support
// needs center adjustment support
// _buildRadialGradient ( string $direction, color $start, color $stop, boolean $ie )
@mixin _buildRadialGradient($direction, $start, $stop, $ie) {
$direction: unquote($direction);
$webkitGradientDirection: null;
$linearGradientDirection: null;
@if($direction == radial or $direction == ellipse or $direction == center) {
background: $start;
background: -moz-radial-gradient(center, ellipse cover, $start, $stop);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0% #{$start}), color-stop(100% #{$stop}));
background: -webkit-radial-gradient(center, ellipse cover, $start, $stop);
background: -o-radial-gradient(center, ellipse cover, $start, $stop);
background: -ms-radial-gradient(center, ellipse cover, $start, $stop);
background: radial-gradient(ellipse at center, $start, $stop);
// _buildRadialGradient ( mixed $start, mixed $stop, boolean $ie )
@mixin _buildRadialGradient($start, $stop, $ie) {
@if type-of($start) != "list" {
$start: append($start, 0%, space);
}
@if($ie == true) {
@include filter-gradient($start, $stop, $direction);

@if type-of($stop) != "list" {
$stop: append($stop, 100%, space);
}

background: nth($start, 1);
background: -moz-radial-gradient(center, ellipse cover, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(nth($start, 2), nth($start, 1)), color-stop(nth($stop, 2), nth($stop, 1)));
background: -webkit-radial-gradient(center, ellipse cover, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));
background: -o-radial-gradient(center, ellipse cover, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));
background: -ms-radial-gradient(center, ellipse cover, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));
background: radial-gradient(ellipse at center, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));

@if($ie) {
@include filter-gradient($start, $stop, 1);
}
}

// needs multiple stop support
// _buildGradient ( string $direction, list $start, list $stop, boolean $ie )
@mixin _buildGradient($direction, $start, $stop, $ie) {
$direction: unquote($direction);
$webkitGradientDirection: null;
$linearGradientDirection: null;
$webkitGradientDirection: "";
$linearGradientDirection: "";
$ieDirection: 0;

@if($direction == left or $direction == horizontal) {
$webkitGradientDirection: linear, left top, right top;
$linearGradientDirection: to right;
$ieDirection: 1;
} @else if($direction == top or $direction == vertical) {
$webkitGradientDirection: linear, left top, left bottom;
$linearGradientDirection: to bottom;
} @else if($direction == left top) {
$direction: -45deg;
$webkitGradientDirection: linear, left top, right bottom;
$linearGradientDirection: 135deg;
$ieDirection: 1;
} @else if($direction == left bottom) {
$direction: 45deg;
$webkitGradientDirection: linear, left bottom, right top;
$linearGradientDirection: $direction;
$ieDirection: 1;
}

background: nth($start, 1);
background-image: -moz-linear-gradient($direction, $start, $stop);
background-image: -webkit-gradient($webkitGradientDirection, color-stop(nth($start, 1), nth($start, 2)), color-stop(nth($stop, 1), nth($stop, 2)));
background-image: -webkit-linear-gradient($direction, $start, $stop);
background-image: -o-linear-gradient($direction, $start, $stop);
background-image: -ms-linear-gradient($direction, $start, $stop);
background-image: linear-gradient($linearGradientDirection, $start, $stop);
@if($ie == true) {
@include filter-gradient(nth($start, 1), nth($stop, 1), vertical);
background: -moz-linear-gradient($direction, $start, $stop);
background: -webkit-gradient($webkitGradientDirection, color-stop(nth($start, 1), nth($start, 2)), color-stop(nth($stop, 1), nth($stop, 2)));
background: -webkit-linear-gradient($direction, $start, $stop);
background: -o-linear-gradient($direction, $start, $stop);
background: -ms-linear-gradient($direction, $start, $stop);
background: linear-gradient($linearGradientDirection, $start, $stop);

@if($ie) {
@include filter-gradient(nth($start, 1), nth($stop, 1), $ieDirection);
}
}
33 changes: 18 additions & 15 deletions skeleton/themes/sphenoid/marrow/_public.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,19 +130,16 @@
@include prefixer(transition, $transition, webkit moz ms o spec);
}

// @filter-gradient ( color $start, [ color $stop: false, [ string $direction: false ] ] )
@mixin filter-gradient($start, $stop: false, $direction: false) {
$direction: unquote($direction);
$type: false;
@if(unquote($start) != none) {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($stop)}');
} @else {
$stop: null;
$direction: null;
// see http://stackoverflow.com/questions/1768161/how-do-i-reset-or-override-ie-css-filters
filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
// @filter-gradient ( color $start, color $stop, [ number $direction: 0 ] )
@mixin filter-gradient($start, $stop, $direction) {
@if $direction < 0 or $direction > 1 {
@warn "Invalid value for $direction. Defaulting to 0";
$direction: 0;
}

*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($stop)}', gradientType='#{$direction}');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($stop)}', gradientType='#{$direction}');
}

// needs multiple stop support
Expand All @@ -158,9 +155,9 @@
@include _buildGradient($direction, $start, $stop, $ie);
}

// @radial-gradient ( string $direction, list $start, list $stop, [ boolean $ie: true ] )
@mixin radial-gradient($direction, $start, $stop, $ie: true) {
@include _buildRadialGradient($direction, $start, $stop, $ie);
// @radial-gradient ( mixed $start, mixed $stop, [ boolean $ie: true ] )
@mixin radial-gradient($start, $stop, $ie: true) {
@include _buildRadialGradient($start, $stop, $ie);
}

// @reset-box-model ( )
Expand Down Expand Up @@ -220,6 +217,12 @@
footer, header, hgroup, menu, nav, section { display: block; }
}

@mixin reset-filter-gradient {
// see http://stackoverflow.com/questions/1768161/how-do-i-reset-or-override-ie-css-filters
filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important;
}

// @global-reset ( )
@mixin global-reset {
html, body, div, span, applet, object, iframe,
Expand Down
2 changes: 1 addition & 1 deletion skeleton_template.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @author Dennis Thompson <http://www.atomicpages.net>
* @copyright Copyright (c) 2014 AtomicPages LLC
* @license MIT
* @version 2.0.0-b7
* @version 2.0.0-b12
*/

@import "skeleton/themes/loader"; // sass --update -C skeleton.scss:skeleton.css
Expand Down

0 comments on commit ecd0251

Please sign in to comment.