diff --git a/bower.json b/bower.json index ea876ab..f62deda 100644 --- a/bower.json +++ b/bower.json @@ -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": { diff --git a/skeleton/core/_config.scss b/skeleton/core/_config.scss index 5379048..ee6707b 100644 --- a/skeleton/core/_config.scss +++ b/skeleton/core/_config.scss @@ -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"; diff --git a/skeleton/themes/sphenoid/marrow/_private.scss b/skeleton/themes/sphenoid/marrow/_private.scss index f1378da..3992725 100644 --- a/skeleton/themes/sphenoid/marrow/_private.scss +++ b/skeleton/themes/sphenoid/marrow/_private.scss @@ -14,22 +14,26 @@ // 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); } } @@ -37,11 +41,14 @@ // _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; @@ -49,19 +56,23 @@ $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); } } diff --git a/skeleton/themes/sphenoid/marrow/_public.scss b/skeleton/themes/sphenoid/marrow/_public.scss index e430f69..c614c8e 100644 --- a/skeleton/themes/sphenoid/marrow/_public.scss +++ b/skeleton/themes/sphenoid/marrow/_public.scss @@ -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 @@ -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 ( ) @@ -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, diff --git a/skeleton_template.scss b/skeleton_template.scss index 2273387..cd5fa77 100644 --- a/skeleton_template.scss +++ b/skeleton_template.scss @@ -3,7 +3,7 @@ * @author Dennis Thompson * @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