added legacy support option for ie8, updated opacty and filter-gradient mixins to use legacy support settings

This commit is contained in:
Brandon Mathis 2010-12-10 18:10:05 -06:00
parent 2635f91049
commit 8d18a1b704
6 changed files with 35 additions and 24 deletions

View File

@ -1,17 +1,20 @@
// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
$legacy-support-for-ie: true !default;
// Setting this to false will result in smaller output, but no support for ie6
// Setting this to false will result in smaller output, but no support for ie6 hacks
$legacy-support-for-ie6: $legacy-support-for-ie !default;
// Setting this to false will result in smaller output, but no support for ie7
// Setting this to false will result in smaller output, but no support for ie7 hacks
$legacy-support-for-ie7: $legacy-support-for-ie !default;
// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
$legacy-support-for-ie8: $legacy-support-for-ie !default;
// @private
// The user can simply set $legacy-support-for-ie and 6 & 7 will be set accordingly,
// But in case the user set either of those explicitly, we need to sync the value of
// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
// But in case the user set each of those explicitly, we need to sync the value of
// this combined variable.
$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7;
$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
// Support for mozilla in experimental css3 properties.
$experimental-support-for-mozilla : true !default;

View File

@ -54,8 +54,12 @@
@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
@include has-layout;
$gradient-type: if($orientation == vertical, 0, 1);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
@if $legacy-support-for-ie8 {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
}
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
}
}

View File

@ -6,18 +6,13 @@
// A number between 0 and 1, where 0 is transparent and 1 is opaque.
@mixin opacity($opacity) {
opacity: $opacity;
@if $experimental-support-for-microsoft {
$value: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
@include experimental(filter, $value,
not -moz,
not -webkit,
not -o,
-ms,
not -khtml,
official // even though filter is not an official css3 property, IE 6/7 expect it.
);
@if $legacy-support-for-ie8 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})";
}
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
}
opacity: $opacity;
}
// Make an element completely transparent.

View File

@ -338,15 +338,15 @@
.ie-horizontal-filter {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000')"; }
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000'); }
.ie-vertical-filter {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000')"; }
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000'); }
.ie-alpha-filter {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF')"; }
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF'); }

View File

@ -0,0 +1,4 @@
div {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
opacity: 0.2; }

View File

@ -0,0 +1,5 @@
@import "compass/css3/opacity";
div {
@include opacity(.2);
}