diff --git a/frameworks/compass/stylesheets/compass/css3/_background-clip.scss b/frameworks/compass/stylesheets/compass/css3/_background-clip.scss index 24ec1355..86718eba 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background-clip.scss +++ b/frameworks/compass/stylesheets/compass/css3/_background-clip.scss @@ -24,19 +24,19 @@ $default-background-clip: padding-box !default; @if $clip == border-box { $deprecated: border; } // Support for webkit and mozilla's use of the deprecated short form @include experimental(background-clip, $deprecated, - $experimental-support-for-mozilla, - $experimental-support-for-webkit, - false, // opera - false, // microsoft - false, // khtml - false // official + -moz, + -webkit, + not -o, + not -ms, + not -khtml, + not official ); @include experimental(background-clip, $clip, - false, // mozilla - false, // webkit - $experimental-support-for-opera, - $experimental-support-for-microsoft, - $experimental-support-for-khtml, - true // official + not -moz, + not -webkit, + -o, + -ms, + -khtml, + official ); } diff --git a/frameworks/compass/stylesheets/compass/css3/_background-origin.scss b/frameworks/compass/stylesheets/compass/css3/_background-origin.scss index 4bd374e8..b02b3bf9 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background-origin.scss +++ b/frameworks/compass/stylesheets/compass/css3/_background-origin.scss @@ -23,19 +23,19 @@ $default-background-origin: content-box !default; // Support for webkit and mozilla's use of the deprecated short form @include experimental(background-origin, $deprecated, - $experimental-support-for-mozilla, - $experimental-support-for-webkit, - false, // opera - false, // microsoft - false, // khtml - false // official + -moz, + -webkit, + not -o, + not -ms, + not -khtml, + not official ); @include experimental(background-origin, $origin, - false, // mozilla - false, // webkit - $experimental-support-for-opera, - $experimental-support-for-microsoft, - $experimental-support-for-khtml, - true // official + not -moz, + not -webkit, + -o, + -ms, + -khtml, + official ); } diff --git a/frameworks/compass/stylesheets/compass/css3/_background-size.scss b/frameworks/compass/stylesheets/compass/css3/_background-size.scss index 5292cbe6..76dbf57b 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background-size.scss +++ b/frameworks/compass/stylesheets/compass/css3/_background-size.scss @@ -9,5 +9,5 @@ $default-background-size: 100% auto !default; // * percentages are relative to the background-origin (default = padding-box) // * mixin defaults to: `$default-background-size` @mixin background-size($size: $default-background-size) { - @include experimental(background-size, $size); + @include experimental(background-size, $size, -moz, -webkit, -o, not -ms, not -khtml); } diff --git a/frameworks/compass/stylesheets/compass/css3/_border-radius.scss b/frameworks/compass/stylesheets/compass/css3/_border-radius.scss index 249fc2c7..195f11e9 100644 --- a/frameworks/compass/stylesheets/compass/css3/_border-radius.scss +++ b/frameworks/compass/stylesheets/compass/css3/_border-radius.scss @@ -19,20 +19,20 @@ $default-border-radius: 5px !default; -webkit-border-#{$vert}-#{$horz}-radius: $radius; // Support for mozilla's syntax for specifying a corner @include experimental("border-radius-#{$vert}#{$horz}", $radius, - $experimental-support-for-mozilla, - false, // webkit - false, // opera - false, // microsoft - false, // khtml - false // official + -moz, + not -webkit, + not -o, + not -ms, + not -khtml, + not official ); @include experimental("border-#{$vert}-#{$horz}-radius", $radius, - false, // mozilla - $experimental-support-for-webkit, - $experimental-support-for-opera, - $experimental-support-for-microsoft, - $experimental-support-for-khtml, - true // official + not -moz, + -webkit, + -o, + -ms, + -khtml, + official ); } diff --git a/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss b/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss index c7aea1a0..cbf94019 100644 --- a/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss +++ b/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss @@ -27,8 +27,12 @@ $default-box-shadow-blur: 5px !default; $blur: $default-box-shadow-blur ) { @if $color == none { - @include experimental(box-shadow, none); + @include experimental(box-shadow, none, + -moz, -webkit, -o, not -ms, not -khtml, official + ); } @else { - @include experimental(box-shadow, $color $hoff $voff $blur); + @include experimental(box-shadow, $color $hoff $voff $blur, + -moz, -webkit, -o, not -ms, not -khtml, official + ); } } diff --git a/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss b/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss index 38bb4f46..5cdaa3c6 100644 --- a/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss +++ b/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss @@ -6,5 +6,7 @@ // [ content-box | border-box ] @mixin box-sizing($bs) { - @include experimental(box-sizing, $bs); + @include experimental(box-sizing, $bs, + -moz, -webkit, not -o, -ms, not -khtml, official + ); } diff --git a/frameworks/compass/stylesheets/compass/css3/_box.scss b/frameworks/compass/stylesheets/compass/css3/_box.scss index 47e471fe..8dd875ae 100644 --- a/frameworks/compass/stylesheets/compass/css3/_box.scss +++ b/frameworks/compass/stylesheets/compass/css3/_box.scss @@ -2,7 +2,9 @@ // display:box; must be used for any of the other flexbox mixins to work properly @mixin display-box { - @include experimental-value(display,box); + @include experimental-value(display, box, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); } // Default box orientation, assuming that the user wants something less block-like @@ -12,7 +14,9 @@ $default-box-orient: horizontal !default; @mixin box-orient( $orientation: $default-box-orient ) { - @include experimental(box-orient, $orientation); + @include experimental(box-orient, $orientation, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); } // Default box-align @@ -22,7 +26,9 @@ $default-box-align: stretch !default; @mixin box-align( $alignment: $default-box-align ) { - @include experimental(box-align, $alignment); + @include experimental(box-align, $alignment, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); } // Default box flex @@ -34,7 +40,9 @@ $default-box-flex: 0 !default; @mixin box-flex( $flex: $default-box-flex ) { - @include experimental(box-flex, $flex); + @include experimental(box-flex, $flex, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); display: block; } @@ -45,7 +53,9 @@ $default-box-flex-group: 1 !default; @mixin box-flex-group( $group: $default-box-flex-group ) { - @include experimental(box-flex-group, $group); + @include experimental(box-flex-group, $group, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); } // default for ordinal group @@ -55,7 +65,9 @@ $default-box-ordinal-group: 1 !default; @mixin box-ordinal-group( $group: $default-ordinal-flex-group ) { - @include experimental(box-ordinal-group, $group); + @include experimental(box-ordinal-group, $group, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); } // Box direction default value @@ -65,7 +77,9 @@ $default-box-direction: normal !default; @mixin box-direction( $direction: $default-box-direction ) { - @include experimental(box-direction, $direction); + @include experimental(box-direction, $direction, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); } // default for box lines @@ -75,7 +89,9 @@ $default-box-lines: single !default; @mixin box-lines( $lines: $default-box-lines ) { - @include experimental(box-lines, $lines); + @include experimental(box-lines, $lines, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); } // default for box pack @@ -85,5 +101,7 @@ $default-box-pack: start !default; @mixin box-pack( $pack: $default-box-pack ) { - @include experimental(box-pack, $pack); + @include experimental(box-pack, $pack, + -moz, -webkit, not -o, not -ms, not -khtml, official + ); } \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/css3/_columns.scss b/frameworks/compass/stylesheets/compass/css3/_columns.scss index 776f7b62..179087c4 100644 --- a/frameworks/compass/stylesheets/compass/css3/_columns.scss +++ b/frameworks/compass/stylesheets/compass/css3/_columns.scss @@ -1,29 +1,55 @@ @import "shared"; // Specify the number of columns -@mixin column-count($n) { @include experimental(column-count, $n); } +@mixin column-count($n) { + @include experimental(column-count, $n, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} // Specify the gap between columns e.g. `20px` -@mixin column-gap($u) { @include experimental(column-gap, $u); } +@mixin column-gap($u) { + @include experimental(column-gap, $u, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} // Specify the width of columns e.g. `100px` -@mixin column-width($u) { @include experimental(column-width, $u); } +@mixin column-width($u) { + @include experimental(column-width, $u, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} // Specify the width of the rule between columns e.g. `1px` -@mixin column-rule-width($w) { @include experimental(rule-width, $w); } +@mixin column-rule-width($w) { + @include experimental(rule-width, $w, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} // Specify the style of the rule between columns e.g. `dotted`. // This works like border-style. -@mixin column-rule-style($s) { @include experimental(rule-style, $s); } +@mixin column-rule-style($s) { + @include experimental(rule-style, $s, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} // Specify the style of the rule between columns e.g. `dotted`. // This works like border-color. -@mixin column-rule-color($c) { @include experimental(rule-color, $s); } +@mixin column-rule-color($c) { + @include experimental(rule-color, $s, + -moz, -webkit, -o, not -ms, not -khtml, official + ); +} // Mixin encompassing all column rule rules // For example: // +column-rule(1px, solid, #c00) @mixin column-rule($w, $s: solid, $c: black) { - @include experimental(column-rule, $w $s $c); + @include experimental(column-rule, $w $s $c, + -moz, -webkit, -o, not -ms, not -khtml, official + ); } diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss index fc8a9dbf..7c406550 100644 --- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss +++ b/frameworks/compass/stylesheets/compass/css3/_gradient.scss @@ -32,8 +32,13 @@ // Firefox's gradient api is nice. // Webkit's gradient api sucks -- hence these backflips: $end: grad-opposite-position($start); - background-image: -webkit-gradient(linear, #{grad-point($start)}, #{grad-point($end)}, #{grad-color-stops($color-stops)}); - background-image: -moz-linear-gradient(#{$start}, #{$color-stops}); } + @if $experimental-support-for-webkit { + background-image: -webkit-gradient(linear, #{grad-point($start)}, #{grad-point($end)}, #{grad-color-stops($color-stops)}); + } + @include experimental-value(background-image, linear-gradient(#{$start}, #{$color-stops}), + -moz, not -webkit, not -o, not -ms, not -khtml, not official + ) +} // Due to limitation's of webkit, the radial gradient mixin works best if you use // pixel-based color stops. @@ -55,5 +60,10 @@ @mixin radial-gradient($color-stops, $center-position: unquote("center center")) { $end-pos: grad-end-position($color-stops, true); - background-image: -webkit-gradient(radial, #{grad-point($center-position)}, 0, #{grad-point($center-position)}, #{$end-pos}, #{grad-color-stops($color-stops)}); - background-image: -moz-radial-gradient(#{$center-position}, circle, #{$color-stops}); } + @if $experimental-support-for-webkit { + background-image: -webkit-gradient(radial, #{grad-point($center-position)}, 0, #{grad-point($center-position)}, #{$end-pos}, #{grad-color-stops($color-stops)}); + } + @include experimental-value(background-image, radial-gradient(#{$center-position}, circle, #{$color-stops}), + -moz, not -webkit, not -o, not -ms, not -khtml, not official + ) +} \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/css3/_opacity.scss b/frameworks/compass/stylesheets/compass/css3/_opacity.scss index b8eb57fa..91bc8359 100644 --- a/frameworks/compass/stylesheets/compass/css3/_opacity.scss +++ b/frameworks/compass/stylesheets/compass/css3/_opacity.scss @@ -6,16 +6,26 @@ // A number between 0 and 1, where 0 is transparent and 1 is opaque. @mixin opacity($opacity) { + // XXX consider only using the official property. I think -moz, -webkit, and -o support it. @include experimental(opacity, $opacity, - $experimental-support-for-mozilla, - $experimental-support-for-webkit, - $experimental-support-for-opera, - false, // microsoft uses filters below instead - $experimental-support-for-khtml, - true // official + -moz, + -webkit, + -o, + not -ms, // microsoft uses the filters below instead + -khtml, + official ); - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})"; - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)}); + @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. + ); + } } // Make an element completely transparent. diff --git a/frameworks/compass/stylesheets/compass/css3/_shared.scss b/frameworks/compass/stylesheets/compass/css3/_shared.scss index 3b51e892..87cbf431 100644 --- a/frameworks/compass/stylesheets/compass/css3/_shared.scss +++ b/frameworks/compass/stylesheets/compass/css3/_shared.scss @@ -3,11 +3,11 @@ $experimental-support-for-mozilla : true !default; // Support for webkit in experimental css3 properties. $experimental-support-for-webkit : true !default; // Support for opera in experimental css3 properties. -$experimental-support-for-opera : false !default; +$experimental-support-for-opera : true !default; // Support for microsoft in experimental css3 properties. $experimental-support-for-microsoft : true !default; // Support for khtml in experimental css3 properties. -$experimental-support-for-khtml : false !default; +$experimental-support-for-khtml : true !default; // This mixin provides basic support for CSS3 properties and // their corresponding experimental CSS2 properties when @@ -21,12 +21,12 @@ $experimental-support-for-khtml : false !default; $khtml : $experimental-support-for-khtml, $official : true ) { - @if $moz { -moz-#{$property} : $value; } - @if $webkit { -webkit-#{$property} : $value; } - @if $o { -o-#{$property} : $value; } - @if $ms { -ms-#{$property} : $value; } - @if $khtml { -khtml-#{$property} : $value; } - @if $official { #{$property} : $value; } + @if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; } + @if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; } + @if $o and $experimental-support-for-opera { -o-#{$property} : $value; } + @if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; } + @if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; } + @if $official { #{$property} : $value; } } // Same as experimental(), but for cases when the property is the same and the value is vendorized @@ -38,10 +38,10 @@ $experimental-support-for-khtml : false !default; $khtml : $experimental-support-for-khtml, $official : true ) { - @if $moz { #{$property} : -moz-#{$value}; } - @if $webkit { #{$property} : -webkit-#{$value}; } - @if $o { #{$property} : -o-#{$value}; } - @if $ms { #{$property} : -ms-#{$value}; } - @if $khtml { #{$property} : -khtml-#{$value}; } - @if $official { #{$property} : #{$value}; } + @if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; } + @if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; } + @if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; } + @if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; } + @if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; } + @if $official { #{$property} : #{$value}; } } \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss b/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss index 38a7ffaf..3097f9a4 100644 --- a/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss +++ b/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss @@ -1,26 +1,25 @@ @import "shared"; -// Provides CSS text shadows. -// -// Arguments are color, horizontal offset, vertical offset, and blur - // These defaults make the arguments optional for this mixin -// // If you like, set different defaults in your project -$default-text-shadow-color: #aaaaaa !default; - -$default-text-shadow-h-offset: 1px !default; - -$default-text-shadow-v-offset: 1px !default; - -$default-text-shadow-blur: 1px !default; +$default-text-shadow-color: #aaa !default; +$default-text-shadow-h-offset: 1px !default; +$default-text-shadow-v-offset: 1px !default; +$default-text-shadow-blur: 1px !default; +// Provides CSS text shadows. +// Arguments are color, horizontal offset, vertical offset, and blur @mixin text-shadow( $color: $default-text-shadow-color, $hoff: $default-text-shadow-h-offset, $voff: $default-text-shadow-v-offset, $blur: $default-text-shadow-blur ) { - text-shadow: $color $hoff $voff $blur; + // XXX I'm surprised we don't need experimental support for this property. + @if $color == none { + text-shadow: none; + } @else { + text-shadow: $color $hoff $voff $blur; + } } diff --git a/frameworks/compass/stylesheets/compass/css3/_transform.scss b/frameworks/compass/stylesheets/compass/css3/_transform.scss index 271bdf17..9d566e45 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transform.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transform.scss @@ -5,13 +5,17 @@ // Apply a transform sent as a complete string. @mixin apply-transform($transform) { - @include experimental(transform, $transform); + @include experimental(transform, $transform, + -moz, -webkit, -o, not -ms, not -khtml, official + ); } // Apply a transform-origin sent as a complete string. @mixin apply-origin($origin) { - @include experimental(transform-origin, $origin); + @include experimental(transform-origin, $origin, + -moz, -webkit, -o, not -ms, not -khtml, official + ); } // transform-origin requires x and y coordinates diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss index cb9d2b60..5fe9b354 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transition.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss @@ -29,7 +29,9 @@ $default-transition-delay: false !default; // * also accepts "all" or "none" @mixin transition-property($properties: $default-transition-property) { - @include experimental(transition-property, $properties); + @include experimental(transition-property, $properties, + -moz, -webkit, -o, not -ms, not -khtml, official + ); } // One or more durations in seconds @@ -38,7 +40,9 @@ $default-transition-delay: false !default; // * these durations will affect the properties in the same list position @mixin transition-duration($duration: $default-transition-duration) { - @include experimental(transition-duration, $duration); + @include experimental(transition-duration, $duration, + -moz, -webkit, -o, not -ms, not -khtml, official + ); } // One or more timing functions @@ -48,7 +52,9 @@ $default-transition-delay: false !default; // * These functions will effect the properties in the same list position @mixin transition-timing-function($function: $default-transition-function) { - @include experimental(transition-timing-function, $function); + @include experimental(transition-timing-function, $function, + -moz, -webkit, -o, not -ms, not -khtml, official + ); } // One or more transition-delays in seconds @@ -57,7 +63,9 @@ $default-transition-delay: false !default; // * these delays will effect the properties in the same list position @mixin transition-delay($delay: $default-transition-delay) { - @include experimental(transition-delay, $delay); + @include experimental(transition-delay, $delay, + -moz, -webkit, -o, not -ms, not -khtml, official + ); } // Transition all-in-one shorthand