Created
February 7, 2012 23:22
-
-
Save jacquescrocker/1762933 to your computer and use it in GitHub Desktop.
Compass Mini (just the css3 parts) 400ms vs 1700ms for @import "compass/css"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
///////////////////// | |
// compass/_support.scss | |
// | |
// 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 hacks | |
$legacy-support-for-ie6: $legacy-support-for-ie !default; | |
// 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, 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 or $legacy-support-for-ie8; | |
// Support for mozilla in experimental css3 properties (-moz). | |
$experimental-support-for-mozilla : true !default; | |
// Support for webkit in experimental css3 properties (-webkit). | |
$experimental-support-for-webkit : true !default; | |
// Support for webkit's original (non-standard) gradient syntax. | |
$support-for-original-webkit-gradients : true !default; | |
// Support for opera in experimental css3 properties (-o). | |
$experimental-support-for-opera : true !default; | |
// Support for microsoft in experimental css3 properties (-ms). | |
$experimental-support-for-microsoft : true !default; | |
// Support for khtml in experimental css3 properties (-khtml). | |
$experimental-support-for-khtml : false !default; | |
// Support for svg in experimental css3 properties. | |
// Setting this to true might add significant size to your | |
// generated stylesheets. | |
$experimental-support-for-svg : false !default; | |
// Support for CSS PIE in experimental css3 properties (-pie). | |
$experimental-support-for-pie : false !default; | |
///////////////////// | |
// compass/utilities/general/_hacks.scss | |
// | |
// The `zoom` approach generates less CSS but does not validate. | |
// Set this to `block` to use the display-property to hack the | |
// element to gain layout. | |
$default-has-layout-approach: zoom !default; | |
// This mixin causes an element matching the selector | |
// to gain the "hasLayout" property in internet explorer. | |
// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout). | |
@mixin has-layout($approach: $default-has-layout-approach) { | |
@if $legacy-support-for-ie { | |
@if $approach == zoom { | |
@include has-layout-zoom; | |
} @else if $approach == block { | |
@include has-layout-block; | |
} @else { | |
@warn "Unknown has-layout approach: #{$approach}"; | |
@include has-layout-zoom; | |
} | |
} | |
} | |
@mixin has-layout-zoom { | |
@if $legacy-support-for-ie { | |
*zoom: 1; | |
} | |
} | |
@mixin has-layout-block { | |
@if $legacy-support-for-ie { | |
// This makes ie6 get layout | |
display: inline-block; | |
// and this puts it back to block | |
& { display: block; } | |
} | |
} | |
// A hack to supply IE6 (and below) with a different property value. | |
// [Read more](http://www.cssportal.com/css-hacks/#in_css-important). | |
@mixin bang-hack($property, $value, $ie6-value) { | |
@if $legacy-support-for-ie6 { | |
#{$property}: #{$value} !important; | |
#{$property}: #{$ie6-value}; | |
} | |
} | |
///////////////////// | |
// compass/utilities/general/_clearfix.scss | |
// | |
// This basic method is preferred for the usual case, when positioned | |
// content will not show outside the bounds of the container. | |
// | |
// Recommendations include using this in conjunction with a width. | |
// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html) | |
@mixin clearfix { | |
overflow: hidden; | |
@include has-layout; | |
} | |
// This older method from Position Is Everything called | |
// [Easy Clearing](http://www.positioniseverything.net/easyclearing.html) | |
// has the advantage of allowing positioned elements to hang | |
// outside the bounds of the container at the expense of more tricky CSS. | |
@mixin legacy-pie-clearfix { | |
&:after { | |
content : "\0020"; | |
display : block; | |
height : 0; | |
clear : both; | |
overflow : hidden; | |
visibility : hidden; | |
} | |
@include has-layout; | |
} | |
// This is an updated version of the PIE clearfix method that reduces the amount of CSS output. | |
// If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead. | |
// | |
// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/) | |
@mixin pie-clearfix { | |
&:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
@include has-layout; | |
} | |
///////////////////// | |
// compass/css3/_shared.scss | |
// | |
// This mixin provides basic support for CSS3 properties and | |
// their corresponding experimental CSS2 properties when | |
// the implementations are identical except for the property | |
// prefix. | |
@mixin experimental($property, $value, | |
$moz : $experimental-support-for-mozilla, | |
$webkit : $experimental-support-for-webkit, | |
$o : $experimental-support-for-opera, | |
$ms : $experimental-support-for-microsoft, | |
$khtml : $experimental-support-for-khtml, | |
$official : true | |
) { | |
@if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; } | |
@if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; } | |
@if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; } | |
@if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; } | |
@if $o and $experimental-support-for-opera { -o-#{$property} : $value; } | |
@if $official { #{$property} : $value; } | |
} | |
// Same as experimental(), but for cases when the property is the same and the value is vendorized | |
@mixin experimental-value($property, $value, | |
$moz : $experimental-support-for-mozilla, | |
$webkit : $experimental-support-for-webkit, | |
$o : $experimental-support-for-opera, | |
$ms : $experimental-support-for-microsoft, | |
$khtml : $experimental-support-for-khtml, | |
$official : true | |
) { | |
@if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; } | |
@if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; } | |
@if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; } | |
@if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; } | |
@if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; } | |
@if $official { #{$property} : #{$value}; } | |
} | |
///////////////////// | |
// compass/css3/_images.scss | |
// | |
// Background property support for vendor prefixing within values. | |
@mixin background( | |
$background-1, | |
$background-2: false, | |
$background-3: false, | |
$background-4: false, | |
$background-5: false, | |
$background-6: false, | |
$background-7: false, | |
$background-8: false, | |
$background-9: false, | |
$background-10: false | |
) { | |
$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, | |
$background-6, $background-7, $background-8, $background-9, $background-10); | |
$mult-bgs: -compass-list-size($backgrounds) > 1; | |
$add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs; | |
@if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); } | |
@if $support-for-original-webkit-gradients and prefixed(-owg, $backgrounds) { background: -owg($backgrounds); } | |
@if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); } | |
@if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); } | |
@if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); } | |
@if $experimental-support-for-microsoft and prefixed(-ms, $backgrounds) { background: -ms($backgrounds); } | |
@if $experimental-support-for-pie and $add-pie-bg { -pie-background: -pie($backgrounds); } | |
background: $backgrounds ; | |
} | |
@mixin background-with-css2-fallback( | |
$background-1, | |
$background-2: false, | |
$background-3: false, | |
$background-4: false, | |
$background-5: false, | |
$background-6: false, | |
$background-7: false, | |
$background-8: false, | |
$background-9: false, | |
$background-10: false | |
) { | |
$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, | |
$background-6, $background-7, $background-8, $background-9, $background-10); | |
$mult-bgs: -compass-list-size($backgrounds) > 1; | |
$simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false); | |
@if not blank($simple-background) { background: $simple-background; } | |
@include background($background-1, $background-2, $background-3, $background-4, $background-5, | |
$background-6, $background-7, $background-8, $background-9, $background-10); | |
} | |
// Background image property support for vendor prefixing within values. | |
@mixin background-image( | |
$image-1, | |
$image-2: false, | |
$image-3: false, | |
$image-4: false, | |
$image-5: false, | |
$image-6: false, | |
$image-7: false, | |
$image-8: false, | |
$image-9: false, | |
$image-10: false | |
) { | |
$images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10); | |
$add-pie-bg: prefixed(-pie, $images) or -compass-list-size($images) > 1; | |
@if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; } | |
@if $support-for-original-webkit-gradients and prefixed(-owg, $images) { background-image: -owg($images); } | |
@if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); } | |
@if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); } | |
@if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); } | |
@if $experimental-support-for-microsoft and prefixed(-ms, $images) { background-image: -ms($images); } | |
@if $experimental-support-for-pie and $add-pie-bg { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." } | |
background-image: $images ; | |
} | |
// Emit a IE-Specific filters that renders a simple linear gradient. | |
// For use in IE 6 - 8. Best practice would have you apply this via a | |
// conditional IE stylesheet, but if you must, you should place this before | |
// any background-image properties that you have specified. | |
@mixin filter-gradient($start-color, $end-color, $orientation: vertical) { | |
@include has-layout; | |
$gradient-type: if($orientation == vertical, 0, 1); | |
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 { | |
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}'); | |
} | |
} | |
// Border image property support for vendor prefixing properties and values. | |
@mixin border-image($value) { | |
@if $experimental-support-for-mozilla { -moz-border-image: -moz(reject(-compass-list($value), fill)); } | |
@if $support-for-original-webkit-gradients { -webkit-border-image: -owg(reject(-compass-list($value), fill)); } | |
@if $experimental-support-for-webkit { -webkit-border-image: -webkit(reject(-compass-list($value), fill)); } | |
@if $experimental-support-for-opera { -o-border-image: -o(reject(-compass-list($value), fill)); } | |
@if $experimental-support-for-svg { border-image: -svg(reject(-compass-list($value), fill)); } | |
border-image: $value; | |
} | |
// List style image property support for vendor prefixing within values. | |
@mixin list-style-image($image) { | |
@if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); } | |
@if $support-for-original-webkit-gradients and prefixed(-owg, $image) { list-style-image: -owg($image); } | |
@if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); } | |
@if $experimental-support-for-opera and prefixed(-o, $image) { list-style-image: -o($image); } | |
@if $experimental-support-for-svg and prefixed(-svg, $image) { list-style-image: -svg($image); } | |
list-style-image: $image ; | |
} | |
// List style property support for vendor prefixing within values. | |
@mixin list-style($value) { | |
$value: -compass-list($value); | |
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); } | |
@if $support-for-original-webkit-gradients and prefixed(-owg, $value) { list-style-image: -owg($value); } | |
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); } | |
@if $experimental-support-for-opera and prefixed(-o, $value) { list-style-image: -o($value); } | |
@if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); } | |
list-style-image: $value ; | |
} | |
// content property support for vendor prefixing within values. | |
@mixin content($value) { | |
$value: -compass-list($value); | |
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); } | |
@if $support-for-original-webkit-gradients and prefixed(-owg, $value) { content: -owg($value); } | |
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); } | |
@if $experimental-support-for-opera and prefixed(-o, $value) { content: -o($value); } | |
@if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); } | |
content: $value ; | |
} | |
///////////////////// | |
// compass/css3/_border-radius.scss | |
// | |
$default-border-radius: 5px !default; | |
// Round all corners by a specific amount, defaults to value of `$default-border-radius`. | |
// | |
// When two values are passed, the first is the horizontal radius | |
// and the second is the vertical radius. | |
// | |
// Note: webkit does not support shorthand syntax for several corners at once. | |
// So in the case where you pass several values only the first will be passed to webkit. | |
// | |
// Examples: | |
// | |
// .simple { @include border-radius(4px, 4px); } | |
// .compound { @include border-radius(2px 5px, 3px 6px); } | |
// .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)} | |
// | |
// Which generates: | |
// | |
// .simple { | |
// -webkit-border-radius: 4px 4px; | |
// -moz-border-radius: 4px / 4px; | |
// -o-border-radius: 4px / 4px; | |
// -ms-border-radius: 4px / 4px; | |
// -khtml-border-radius: 4px / 4px; | |
// border-radius: 4px / 4px; } | |
// | |
// .compound { | |
// -webkit-border-radius: 2px 3px; | |
// -moz-border-radius: 2px 5px / 3px 6px; | |
// -o-border-radius: 2px 5px / 3px 6px; | |
// -ms-border-radius: 2px 5px / 3px 6px; | |
// -khtml-border-radius: 2px 5px / 3px 6px; | |
// border-radius: 2px 5px / 3px 6px; } | |
// | |
// .crazy { | |
// -webkit-border-radius: 1px 2px; | |
// -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; | |
// -o-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; | |
// -ms-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; | |
// -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; | |
// border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; } | |
@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) { | |
@if $vertical-radius { | |
// Webkit doesn't understand the official shorthand syntax for specifying | |
// a vertical radius unless so in case there's several we only take the first. | |
@include experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius), | |
not -moz, | |
-webkit, | |
not -o, | |
not -ms, | |
not -khtml, | |
not official | |
); | |
@include experimental("border-radius", $radius unquote("/") $vertical-radius, | |
-moz, | |
not -webkit, | |
-o, | |
-ms, | |
-khtml, | |
official | |
); | |
} | |
@else { | |
@include experimental(border-radius, $radius); | |
} | |
} | |
// Round radius at position by amount. | |
// | |
// * legal values for `$vert`: `top`, `bottom` | |
// * legal values for `$horz`: `left`, `right` | |
@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) { | |
// Support for mozilla's syntax for specifying a corner | |
@include experimental("border-radius-#{$vert}#{$horz}", $radius, | |
-moz, | |
not -webkit, | |
not -o, | |
not -ms, | |
not -khtml, | |
not official | |
); | |
@include experimental("border-#{$vert}-#{$horz}-radius", $radius, | |
not -moz, | |
-webkit, | |
-o, | |
-ms, | |
-khtml, | |
official | |
); | |
} | |
// Round top-left corner only | |
@mixin border-top-left-radius($radius: $default-border-radius) { | |
@include border-corner-radius(top, left, $radius); } | |
// Round top-right corner only | |
@mixin border-top-right-radius($radius: $default-border-radius) { | |
@include border-corner-radius(top, right, $radius); } | |
// Round bottom-left corner only | |
@mixin border-bottom-left-radius($radius: $default-border-radius) { | |
@include border-corner-radius(bottom, left, $radius); } | |
// Round bottom-right corner only | |
@mixin border-bottom-right-radius($radius: $default-border-radius) { | |
@include border-corner-radius(bottom, right, $radius); } | |
// Round both top corners by amount | |
@mixin border-top-radius($radius: $default-border-radius) { | |
@include border-top-left-radius($radius); | |
@include border-top-right-radius($radius); } | |
// Round both right corners by amount | |
@mixin border-right-radius($radius: $default-border-radius) { | |
@include border-top-right-radius($radius); | |
@include border-bottom-right-radius($radius); } | |
// Round both bottom corners by amount | |
@mixin border-bottom-radius($radius: $default-border-radius) { | |
@include border-bottom-left-radius($radius); | |
@include border-bottom-right-radius($radius); } | |
// Round both left corners by amount | |
@mixin border-left-radius($radius: $default-border-radius) { | |
@include border-top-left-radius($radius); | |
@include border-bottom-left-radius($radius); } | |
///////////////////// | |
// compass/css3/_inline-block.scss | |
// | |
// Provides a cross-browser method to implement `display: inline-block;` | |
@mixin inline-block { | |
@if $legacy-support-for-ie { | |
& { *display: inline; } | |
} | |
display: -moz-inline-box; | |
-moz-box-orient: vertical; | |
display: inline-block; | |
vertical-align: middle; | |
@if $legacy-support-for-ie { | |
*vertical-align: auto; | |
} | |
} | |
///////////////////// | |
// compass/css3/_opacity.scss | |
// | |
// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity. | |
// | |
// @param $opacity | |
// A number between 0 and 1, where 0 is transparent and 1 is opaque. | |
@mixin opacity($opacity) { | |
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 { | |
filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})"); | |
} | |
opacity: $opacity; | |
} | |
// Make an element completely transparent. | |
@mixin transparent { @include opacity(0); } | |
// Make an element completely opaque. | |
@mixin opaque { @include opacity(1); } | |
///////////////////// | |
// compass/css3/_box-shadow.scss | |
// | |
// The default color for box shadows | |
$default-box-shadow-color: #333333 !default; | |
// The default horizontal offset. Positive is to the right. | |
$default-box-shadow-h-offset: 0px !default; | |
// The default vertical offset. Positive is down. | |
$default-box-shadow-v-offset: 0px !default; | |
// The default blur length. | |
$default-box-shadow-blur: 5px !default; | |
// The default spread length. | |
$default-box-shadow-spread : false !default; | |
// The default shadow inset: inset or false (for standard shadow). | |
$default-box-shadow-inset : false !default; | |
// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box | |
// shadows are needed. | |
// Each shadow argument should adhere to the standard css3 syntax for the | |
// box-shadow property. | |
@mixin box-shadow( | |
$shadow-1 : default, | |
$shadow-2 : false, | |
$shadow-3 : false, | |
$shadow-4 : false, | |
$shadow-5 : false, | |
$shadow-6 : false, | |
$shadow-7 : false, | |
$shadow-8 : false, | |
$shadow-9 : false, | |
$shadow-10: false | |
) { | |
@if $shadow-1 == default { | |
$shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color)); | |
} | |
$shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10); | |
@include experimental(box-shadow, $shadow, | |
-moz, -webkit, not -o, not -ms, not -khtml, official | |
); | |
} | |
// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3. | |
// Includes default arguments for color, horizontal offset, vertical offset, blur length, spread length, and inset. | |
@mixin single-box-shadow( | |
$color : $default-box-shadow-color, | |
$hoff : $default-box-shadow-h-offset, | |
$voff : $default-box-shadow-v-offset, | |
$blur : $default-box-shadow-blur, | |
$spread : $default-box-shadow-spread, | |
$inset : $default-box-shadow-inset | |
) { | |
@if not ($inset == true or $inset == false or $inset == inset) { | |
@warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset"; | |
} | |
@if $color == none { | |
@include box-shadow(none); | |
} @else { | |
$full : $hoff $voff; | |
@if $blur { $full: $full $blur; } | |
@if $spread { $full: $full $spread; } | |
@if $color { $full: $full $color; } | |
@if $inset { $full: inset $full; } | |
@include box-shadow($full); | |
} | |
} | |
///////////////////// | |
// compass/css3/_text-shadow.scss | |
// | |
// These defaults make the arguments optional for this mixin | |
// If you like, set different defaults in your project | |
$default-text-shadow-color: #aaa !default; | |
$default-text-shadow-h-offset: 0px !default; | |
$default-text-shadow-v-offset: 0px !default; | |
$default-text-shadow-blur: 1px !default; | |
// Provides cross-browser text shadows when one or more shadows are needed. | |
// Each shadow argument should adhere to the standard css3 syntax for the | |
// text-shadow property. | |
@mixin text-shadow( | |
$shadow-1 : default, | |
$shadow-2 : false, | |
$shadow-3 : false, | |
$shadow-4 : false, | |
$shadow-5 : false, | |
$shadow-6 : false, | |
$shadow-7 : false, | |
$shadow-8 : false, | |
$shadow-9 : false, | |
$shadow-10: false | |
) { | |
@if $shadow-1 == default { | |
$shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur; | |
} | |
text-shadow: compact($shadow-1, $shadow-2, $shadow-3, | |
$shadow-4, $shadow-5, $shadow-6, | |
$shadow-7, $shadow-8, $shadow-9, $shadow-10); | |
} | |
// Provides a single cross-browser CSS text shadow. | |
// Includes default arguments for color, horizontal offset, vertical offset, and blur | |
@mixin single-text-shadow( | |
$color: $default-text-shadow-color, | |
$hoff: $default-text-shadow-h-offset, | |
$voff: $default-text-shadow-v-offset, | |
$blur: $default-text-shadow-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; | |
} | |
} | |
///////////////////// | |
// compass/css3/_columns.scss | |
// | |
// Specify the number of columns | |
@mixin column-count($count) { | |
@include experimental(column-count, $count, | |
-moz, -webkit, -o, not -ms, not -khtml, official | |
); | |
} | |
// Specify the gap between columns e.g. `20px` | |
@mixin column-gap($width) { | |
@include experimental(column-gap, $width, | |
-moz, -webkit, -o, not -ms, not -khtml, official | |
); | |
} | |
// Specify the width of columns e.g. `100px` | |
@mixin column-width($width) { | |
@include experimental(column-width, $width, | |
-moz, -webkit, -o, not -ms, not -khtml, official | |
); | |
} | |
// Specify the width of the rule between columns e.g. `1px` | |
@mixin column-rule-width($width) { | |
@include experimental(rule-width, $width, | |
-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($style) { | |
@include experimental(rule-style, unquote($style), | |
-moz, -webkit, -o, not -ms, not -khtml, official | |
); | |
} | |
// Specify the color of the rule between columns e.g. `blue`. | |
// This works like border-color. | |
@mixin column-rule-color($color) { | |
@include experimental(rule-color, $color, | |
-moz, -webkit, -o, not -ms, not -khtml, official | |
); | |
} | |
// Mixin encompassing all column rule properties | |
// For example: | |
// | |
// @include column-rule(1px, solid, #c00) | |
// | |
// Or the values can be space separated: | |
// | |
// @include column-rule(1px solid #c00) | |
@mixin column-rule($width, $style: false, $color: false) { | |
$full : -compass-space-list(compact($width, $style, $color)); | |
@include experimental(column-rule, $full, | |
-moz, -webkit, -o, not -ms, not -khtml, official | |
); | |
} | |
///////////////////// | |
// compass/css3/_box-sizing.scss | |
// | |
// Change the box model for Mozilla, Webkit, IE8 and the future | |
// | |
// @param $bs | |
// [ content-box | border-box ] | |
@mixin box-sizing($bs) { | |
$bs: unquote($bs); | |
@include experimental(box-sizing, $bs, | |
-moz, -webkit, not -o, not -ms, not -khtml, official | |
); | |
} | |
///////////////////// | |
// compass/css3/_box.scss | |
// | |
// display:box; must be used for any of the other flexbox mixins to work properly | |
@mixin display-box { | |
@include experimental-value(display, box, | |
-moz, -webkit, not -o, -ms, not -khtml, official | |
); | |
} | |
// Default box orientation, assuming that the user wants something less block-like | |
$default-box-orient: horizontal !default; | |
// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ] | |
@mixin box-orient( | |
$orientation: $default-box-orient | |
) { | |
$orientation : unquote($orientation); | |
@include experimental(box-orient, $orientation, | |
-moz, -webkit, not -o, -ms, not -khtml, official | |
); | |
} | |
// Default box-align | |
$default-box-align: stretch !default; | |
// Box align [ start | end | center | baseline | stretch ] | |
@mixin box-align( | |
$alignment: $default-box-align | |
) { | |
$alignment : unquote($alignment); | |
@include experimental(box-align, $alignment, | |
-moz, -webkit, not -o, -ms, not -khtml, official | |
); | |
} | |
// Default box flex | |
$default-box-flex: 0 !default; | |
// mixin which takes an int argument for box flex. Apply this to the children inside the box. | |
// | |
// For example: "div.display-box > div.child-box" would get the box flex mixin. | |
@mixin box-flex( | |
$flex: $default-box-flex | |
) { | |
@include experimental(box-flex, $flex, | |
-moz, -webkit, not -o, -ms, not -khtml, official | |
); | |
} | |
// Default flex group | |
$default-box-flex-group: 1 !default; | |
// mixin which takes an int argument for flexible grouping | |
@mixin box-flex-group( | |
$group: $default-box-flex-group | |
) { | |
@include experimental(box-flex-group, $group, | |
-moz, -webkit, not -o, -ms, not -khtml, official | |
); | |
} | |
// default for ordinal group | |
$default-box-ordinal-group: 1 !default; | |
// mixin which takes an int argument for ordinal grouping and rearranging the order | |
@mixin box-ordinal-group( | |
$group: $default-ordinal-flex-group | |
) { | |
@include experimental(box-ordinal-group, $group, | |
-moz, -webkit, not -o, -ms, not -khtml, official | |
); | |
} | |
// Box direction default value | |
$default-box-direction: normal !default; | |
// mixin for box-direction [ normal | reverse | inherit ] | |
@mixin box-direction( | |
$direction: $default-box-direction | |
) { | |
$direction: unquote($direction); | |
@include experimental(box-direction, $direction, | |
-moz, -webkit, not -o, -ms, not -khtml, official | |
); | |
} | |
// default for box lines | |
$default-box-lines: single !default; | |
// mixin for box lines [ single | multiple ] | |
@mixin box-lines( | |
$lines: $default-box-lines | |
) { | |
$lines: unquote($lines); | |
@include experimental(box-lines, $lines, | |
-moz, -webkit, not -o, -ms, not -khtml, official | |
); | |
} | |
// default for box pack | |
$default-box-pack: start !default; | |
// mixin for box pack [ start | end | center | justify ] | |
@mixin box-pack( | |
$pack: $default-box-pack | |
) { | |
$pack: unquote($pack); | |
@include experimental(box-pack, $pack, | |
-moz, -webkit, not -o, -ms, not -khtml, official | |
); | |
} | |
///////////////////// | |
// compass/css3/_gradient.scss | |
// | |
// The linear gradient mixin works best across browsers if you use percentage-based color stops. | |
// | |
// Examples: | |
// | |
// // This yields a linear gradient spanning from top to bottom | |
// +linear-gradient(color-stops(white, black)) | |
// | |
// // This yields a linear gradient spanning from bottom to top | |
// +linear-gradient(color-stops(white, black), bottom) | |
// | |
// // This yields a linear gradient spanning from left to right | |
// +linear-gradient(color-stops(white, black), left) | |
// | |
// // This yields a linear gradient starting at white passing | |
// // thru blue at 33% down and then to black | |
// +linear-gradient(color-stops(white, blue 33%, black)) | |
// | |
// // This yields a linear gradient starting at white passing | |
// // thru blue at 33% down and then to black at 67% until the end | |
// +linear-gradient(color-stops(white, blue 33%, black 67%)) | |
// | |
// // This yields a background image on top of the gradient; requires an image | |
// // with an alpha-layer. | |
// +linear-gradient(color_stops(white,black), top, image-url('noise.png')) | |
// | |
// Browsers Supported: | |
// | |
// - Chrome | |
// - Safari | |
// - Firefox 3.6 | |
// - Opera | |
// | |
// @deprecated Use the linear-gradient() function in conjunction with a | |
// property mixin like `background-image`. | |
@mixin linear-gradient($color-stops, $start: false, $image: false) { | |
@if $image { | |
@if $start { | |
@warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))"; | |
} @else { | |
@warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))"; | |
} | |
} @else { | |
@if $start { | |
@warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$start}, #{$color-stops}))"; | |
} @else { | |
@warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$color-stops}))"; | |
} | |
} | |
@if not $start { $start: top; } | |
@include background-image($image, linear-gradient($start, $color-stops)); | |
} | |
// Because of webkit's limitations, the radial gradient mixin works best if you use | |
// pixel-based color stops. | |
// | |
// Examples: | |
// | |
// // Defaults to a centered, 100px radius gradient | |
// +radial-gradient(color-stops(#c00, #00c)) | |
// | |
// // 100px radius gradient in the top left corner | |
// +radial-gradient(color-stops(#c00, #00c), top left) | |
// | |
// // Three colors, ending at 50px and passing thru #fff at 25px | |
// +radial-gradient(color-stops(#c00, #fff, #00c 50px)) | |
// | |
// // A background image on top of a 100px radius gradient; requires an image | |
// // with an alpha-layer. | |
// +radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png"))) | |
// | |
// Browsers Supported: | |
// | |
// - Chrome | |
// - Safari | |
// - Firefox 3.6 | |
// - Opera | |
// | |
// @deprecated Use the radial-gradient() function in conjunction with a | |
// property mixin like `background-image`. | |
@mixin radial-gradient($color-stops, $center-position: false, $image: false) { | |
@if $image { | |
@if $center-position { | |
@warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))"; | |
} @else { | |
@warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))"; | |
} | |
} @else { | |
@if $center-position { | |
@warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$center-position}, #{$color-stops}))"; | |
} @else { | |
@warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$color-stops}))"; | |
} | |
} | |
@if not $center-position { $center-position: center center; } | |
@include background-image($image, radial-gradient($center-position, $color-stops)); | |
} | |
///////////////////// | |
// compass/css3/_background-clip.scss | |
// | |
// The default value is `padding-box` -- the box model used by modern browsers. | |
// | |
// If you wish to do so, you can override the default constant with `border-box` | |
// | |
// To override to the default border-box model, use this code: | |
// $default-background-clip: border-box | |
$default-background-clip: padding-box !default; | |
// Clip the background (image and color) at the edge of the padding or border. | |
// | |
// Legal Values: | |
// | |
// * padding-box | |
// * border-box | |
// * text | |
@mixin background-clip($clip: $default-background-clip) { | |
// webkit and mozilla use the deprecated short [border | padding] | |
$clip: unquote($clip); | |
$deprecated: $clip; | |
@if $clip == padding-box { $deprecated: padding; } | |
@if $clip == border-box { $deprecated: border; } | |
// Support for webkit and mozilla's use of the deprecated short form | |
@include experimental(background-clip, $deprecated, | |
-moz, | |
-webkit, | |
not -o, | |
not -ms, | |
not -khtml, | |
not official | |
); | |
@include experimental(background-clip, $clip, | |
not -moz, | |
not -webkit, | |
not -o, | |
not -ms, | |
-khtml, | |
official | |
); | |
} | |
///////////////////// | |
// compass/css3/_background-origin.scss | |
// | |
$default-background-origin: content-box !default; | |
// Position the background off the edge of the padding, border or content | |
// | |
// * Possible values: | |
// * `padding-box` | |
// * `border-box` | |
// * `content-box` | |
// * browser defaults to `padding-box` | |
// * mixin defaults to `content-box` | |
@mixin background-origin($origin: $default-background-origin) { | |
$origin: unquote($origin); | |
// webkit and mozilla use the deprecated short [border | padding | content] | |
$deprecated: $origin; | |
@if $origin == padding-box { $deprecated: padding; } | |
@if $origin == border-box { $deprecated: border; } | |
@if $origin == content-box { $deprecated: content; } | |
// Support for webkit and mozilla's use of the deprecated short form | |
@include experimental(background-origin, $deprecated, | |
-moz, | |
-webkit, | |
not -o, | |
not -ms, | |
not -khtml, | |
not official | |
); | |
@include experimental(background-origin, $origin, | |
not -moz, | |
not -webkit, | |
-o, | |
-ms, | |
-khtml, | |
official | |
); | |
} | |
///////////////////// | |
// compass/css3/_background-size.scss | |
// | |
// override to change the default | |
$default-background-size: 100% auto !default; | |
// Set the size of background images using px, width and height, or percentages. | |
// Currently supported in: Opera, Gecko, Webkit. | |
// | |
// * percentages are relative to the background-origin (default = padding-box) | |
// * mixin defaults to: `$default-background-size` | |
@mixin background-size( | |
$size-1: $default-background-size, | |
$size-2: false, | |
$size-3: false, | |
$size-4: false, | |
$size-5: false, | |
$size-6: false, | |
$size-7: false, | |
$size-8: false, | |
$size-9: false, | |
$size-10: false | |
) { | |
$size-1: if(type-of($size-1) == string, unquote($size-1), $size-1); | |
$sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10); | |
@include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml); | |
} | |
///////////////////// | |
// compass/css3/_font-face.scss | |
// | |
// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera. | |
// | |
// * $name is required, arbitrary, and what you will use in font stacks. | |
// * $font-files is required using font-files('relative/location', 'format'). | |
// for best results use this order: woff, opentype/truetype, svg | |
// * $eot is required by IE, and is a relative location of the eot file. | |
// * $weight shows if the font is bold, defaults to normal | |
// * $style defaults to normal, might be also italic | |
// * For android 2.2 Compatiblity, please ensure that your web page has | |
// a meta viewport tag. | |
// * To support iOS < 4.2, an SVG file must be provided | |
// | |
// If you need to generate other formats check out the Font Squirrel | |
// [font generator](http://www.fontsquirrel.com/fontface/generator) | |
// | |
// In order to refer to a specific style of the font in your stylesheets as | |
// e.g. "font-style: italic;", you may add a couple of @font-face includes | |
// containing the respective font files for each style and specying | |
// respective the $style parameter. | |
// Order of the includes matters, and it is: normal, bold, italic, bold+italic. | |
@mixin font-face( | |
$name, | |
$font-files, | |
$eot: false, | |
$weight: false, | |
$style: false | |
) { | |
$iefont: unquote("#{$eot}?#iefix"); | |
@font-face { | |
font-family: quote($name); | |
@if $eot { | |
src: font-url($eot); | |
$font-files: font-url($iefont) unquote("format('eot')"), $font-files; | |
} | |
src: $font-files; | |
@if $weight { | |
font-weight: $weight; | |
} | |
@if $style { | |
font-style: $style; | |
} | |
} | |
} | |
///////////////////// | |
// compass/css3/_transform.scss | |
// | |
// @doc off | |
// Note ---------------------------------------------------------------------- | |
// Safari is the only browser that currently supports 3D transforms. | |
// Because of that it can be important to control whether a given 2D transform | |
// uses the full range of experimental browser prefixes, or only the 3D list. | |
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d) | |
// to switch between the two support lists. The toggle defaults to 'false' (2D), | |
// and also accepts 'true' (3D). Currently the lists are as follows: | |
// 2D: Mozilla, Webkit, Opera, Official | |
// 3D: Webkit, Official **(Only Safari Supports 3D perspective)** | |
// Available Transforms ------------------------------------------------------ | |
// - Scale (2d and 3d) | |
// - Rotate (2d and 3d) | |
// - Translate (2d and 3d) | |
// - Skew (2d only) | |
// Transform Parameters ------------------------------------------------------ | |
// - Transform Origin (2d and 3d) | |
// - Perspective (3d) | |
// - Perspective Origin (3d) | |
// - Transform Style (3d) | |
// - Backface Visibility (3d) | |
// Mixins -------------------------------------------------------------------- | |
// transform-origin | |
// - shortcuts: transform-origin2d, transform-origin3d | |
// - helpers: apply-origin | |
// transform | |
// - shortcuts: transform2d, transform3d | |
// - helpers: simple-transform, create-transform | |
// perspective | |
// - helpers: perspective-origin | |
// transform-style | |
// backface-visibility | |
// scale | |
// - shortcuts: scaleX, scaleY, scaleZ, scale3d | |
// rotate | |
// - shortcuts: rotateX, rotateY, rotate3d | |
// translate | |
// - shortcuts: translateX, translateY, translateZ, translate3d | |
// skew | |
// - shortcuts: skewX, skewY | |
// Defaults ------------------------------------------------------------------ | |
// @doc on | |
// The default x-origin for transforms | |
$default-origin-x : 50% !default; | |
// The default y-origin for transforms | |
$default-origin-y : 50% !default; | |
// The default z-origin for transforms | |
$default-origin-z : 50% !default; | |
// The default x-multiplier for scaling | |
$default-scale-x : 1.25 !default; | |
// The default y-multiplier for scaling | |
$default-scale-y : $default-scale-x !default; | |
// The default z-multiplier for scaling | |
$default-scale-z : $default-scale-x !default; | |
// The default angle for rotations | |
$default-rotate : 45deg !default; | |
// The default x-vector for the axis of 3d rotations | |
$default-vector-x : 1 !default; | |
// The default y-vector for the axis of 3d rotations | |
$default-vector-y : 1 !default; | |
// The default z-vector for the axis of 3d rotations | |
$default-vector-z : 1 !default; | |
// The default x-length for translations | |
$default-translate-x : 1em !default; | |
// The default y-length for translations | |
$default-translate-y : $default-translate-x !default; | |
// The default z-length for translations | |
$default-translate-z : $default-translate-x !default; | |
// The default x-angle for skewing | |
$default-skew-x : 5deg !default; | |
// The default y-angle for skewing | |
$default-skew-y : 5deg !default; | |
// **Transform-origin** | |
// Transform-origin sent as a complete string | |
// | |
// @include apply-origin( origin [, 3D-only ] ) | |
// | |
// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates | |
// in percentages, absolute (px, cm, in, em etc..) or relative | |
// (left, top, right, bottom, center) units | |
// | |
// @param only3d Set this to true to only apply this | |
// mixin where browsers have 3D support. | |
@mixin apply-origin($origin, $only3d) { | |
$only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2; | |
@if $only3d { | |
@include experimental(transform-origin, $origin, | |
not -moz, -webkit, not -o, not -ms, not -khtml, official | |
); | |
} @else { | |
@include experimental(transform-origin, $origin, | |
-moz, -webkit, -o, -ms, not -khtml, official | |
); | |
} | |
} | |
// Transform-origin sent as individual arguments: | |
// | |
// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] ) | |
// | |
// where the 3 'origin-' arguments represent x/y/z coordinates. | |
// | |
// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support | |
@mixin transform-origin( | |
$origin-x: $default-origin-x, | |
$origin-y: $default-origin-y, | |
$origin-z: false, | |
$only3d: if($origin-z, true, false) | |
) { | |
$origin: unquote(''); | |
@if $origin-x or $origin-y or $origin-z { | |
@if $origin-x { $origin: $origin-x; } @else { $origin: 50%; } | |
@if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }} | |
@if $origin-z { $origin: $origin $origin-z; } | |
@include apply-origin($origin, $only3d); | |
} | |
} | |
// Transform sent as a complete string: | |
// | |
// @include transform( transforms [, 3D-only ] ) | |
// | |
// where 'transforms' is a space separated list of all the transforms to be applied | |
@mixin transform( | |
$transform, | |
$only3d: false | |
) { | |
@if $only3d { | |
@include experimental(transform, $transform, | |
not -moz, -webkit, not -o, not -ms, not -khtml, official | |
); | |
} @else { | |
@include experimental(transform, $transform, | |
-moz, -webkit, -o, -ms, not -khtml, official | |
); | |
} | |
} | |
// Shortcut to target all browsers with 2D transform support | |
@mixin transform2d($trans) { | |
@include transform($trans, false); | |
} | |
// Shortcut to target only browsers with 3D transform support | |
@mixin transform3d($trans) { | |
@include transform($trans, true); | |
} | |
// @doc off | |
// 3D Parameters ------------------------------------------------------------- | |
// @doc on | |
// Set the perspective of 3D transforms on the children of an element: | |
// | |
// @include perspective( perspective ) | |
// | |
// where 'perspective' is a uniless number representing the depth of the z-axis | |
// the higher the perspective, the more exagerated the foreshortening. | |
// values from 500 to 1000 are more-or-less "normal" - a good starting-point. | |
@mixin perspective($p) { | |
@include experimental(perspective, $p, | |
not -moz, -webkit, not -o, not -ms, not -khtml, official | |
); | |
} | |
// Set the origin position for the perspective | |
// | |
// @include perspective-origin(origin-x [origin-y]) | |
// | |
// where the two arguments represent x/y coordinates | |
@mixin perspective-origin($origin: 50%) { | |
@include experimental(perspective-origin, $origin, | |
not -moz, -webkit, not -o, not -ms, not -khtml, official | |
); | |
} | |
// Determine whether a 3D objects children also live in the given 3D space | |
// | |
// @include transform-style( [ style ] ) | |
// | |
// where `style` can be either `flat` or `preserve-3d` | |
// browsers default to `flat`, mixin defaults to `preserve-3d` | |
@mixin transform-style($style: preserve-3d) { | |
@include experimental(transform-style, $style, | |
not -moz, -webkit, not -o, not -ms, not -khtml, official | |
); | |
} | |
// Determine the visibility of an element when it's back is turned | |
// | |
// @include backface-visibility( [ visibility ] ) | |
// | |
// where `visibility` can be either `visible` or `hidden` | |
// browsers default to visible, mixin defaults to hidden | |
@mixin backface-visibility($visibility: hidden) { | |
@include experimental(backface-visibility, $visibility, | |
not -moz, -webkit, not -o, not -ms, not -khtml, official | |
); | |
} | |
// @doc off | |
// Transform Partials -------------------------------------------------------- | |
// These work well on their own, but they don't add to each other, they override. | |
// Use along with transform parameter mixins to adjust origin, perspective and style | |
// --------------------------------------------------------------------------- | |
// Scale --------------------------------------------------------------------- | |
// @doc on | |
// Scale an object along the x and y axis: | |
// | |
// @include scale( [ scale-x, scale-y, perspective, 3D-only ] ) | |
// | |
// where the 'scale-' arguments are unitless multipliers of the x and y dimensions | |
// and perspective, which works the same as the stand-alone perspective property/mixin | |
// but applies to the individual element (multiplied with any parent perspective) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin scale( | |
$scale-x: $default-scale-x, | |
$scale-y: $scale-x, | |
$perspective: false, | |
$only3d: false | |
) { | |
$trans: scale($scale-x, $scale-y); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform($trans, $only3d); | |
} | |
// Scale an object along the x axis | |
// @include scaleX( [ scale-x, perspective, 3D-only ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin scaleX( | |
$scale: $default-scale-x, | |
$perspective: false, | |
$only3d: false | |
) { | |
$trans: scaleX($scale); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform($trans, $only3d); | |
} | |
// Scale an object along the y axis | |
// @include scaleY( [ scale-y, perspective, 3D-only ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin scaleY( | |
$scale: $default-scale-y, | |
$perspective: false, | |
$only3d: false | |
) { | |
$trans: scaleY($scale); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform($trans, $only3d); | |
} | |
// Scale an object along the z axis | |
// @include scaleZ( [ scale-z, perspective ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin scaleZ( | |
$scale: $default-scale-z, | |
$perspective: false | |
) { | |
$trans: scaleZ($scale); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform3d($trans); | |
} | |
// Scale and object along all three axis | |
// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin scale3d( | |
$scale-x: $default-scale-x, | |
$scale-y: $default-scale-y, | |
$scale-z: $default-scale-z, | |
$perspective: false | |
) { | |
$trans: scale3d($scale-x, $scale-y, $scale-z); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform3d($trans); | |
} | |
// @doc off | |
// Rotate -------------------------------------------------------------------- | |
// @doc on | |
// Rotate an object around the z axis (2D) | |
// @include rotate( [ rotation, perspective, 3D-only ] ) | |
// where 'rotation' is an angle set in degrees (deg) or radian (rad) units | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin rotate( | |
$rotate: $default-rotate, | |
$perspective: false, | |
$only3d: false | |
) { | |
$trans: rotate($rotate); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform($trans, $only3d); | |
} | |
// A longcut for 'rotate' in case you forget that 'z' is implied | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin rotateZ( | |
$rotate: $default-rotate, | |
$perspective: false, | |
$only3d: false | |
) { | |
@include rotate($rotate, $perspective, $only3d); | |
} | |
// Rotate an object around the x axis (3D) | |
// @include rotateX( [ rotation, perspective ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin rotateX( | |
$rotate: $default-rotate, | |
$perspective: false | |
) { | |
$trans: rotateX($rotate); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform3d($trans); | |
} | |
// Rotate an object around the y axis (3D) | |
// @include rotate( [ rotation, perspective ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin rotateY( | |
$rotate: $default-rotate, | |
$perspective: false | |
) { | |
$trans: rotateY($rotate); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform3d($trans); | |
} | |
// Rotate an object around an arbitrary axis (3D) | |
// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] ) | |
// where the 'vector-' arguments accept unitless numbers | |
// these numbers are not important on their own, but in relation to one another | |
// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin rotate3d( | |
$vector-x: $default-vector-x, | |
$vector-y: $default-vector-y, | |
$vector-z: $default-vector-z, | |
$rotate: $default-rotate, | |
$perspective: false | |
) { | |
$trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform3d($trans); | |
} | |
// @doc off | |
// Translate ----------------------------------------------------------------- | |
// @doc on | |
// Move an object along the x or y axis (2D) | |
// @include translate( [ translate-x, translate-y, perspective, 3D-only ] ) | |
// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin translate( | |
$translate-x: $default-translate-x, | |
$translate-y: $default-translate-y, | |
$perspective: false, | |
$only3d: false | |
) { | |
$trans: translate($translate-x, $translate-y); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform($trans, $only3d); | |
} | |
// Move an object along the x axis (2D) | |
// @include translate( [ translate-x, perspective, 3D-only ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin translateX( | |
$trans-x: $default-translate-x, | |
$perspective: false, | |
$only3d: false | |
) { | |
$trans: translateX($trans-x); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform($trans, $only3d); | |
} | |
// Move an object along the y axis (2D) | |
// @include translate( [ translate-y, perspective, 3D-only ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin translateY( | |
$trans-y: $default-translate-y, | |
$perspective: false, | |
$only3d: false | |
) { | |
$trans: translateY($trans-y); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform($trans, $only3d); | |
} | |
// Move an object along the z axis (3D) | |
// @include translate( [ translate-z, perspective ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin translateZ( | |
$trans-z: $default-translate-z, | |
$perspective: false | |
) { | |
$trans: translateZ($trans-z); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform3d($trans); | |
} | |
// Move an object along the x, y and z axis (3D) | |
// @include translate( [ translate-x, translate-y, translate-z, perspective ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin translate3d( | |
$translate-x: $default-translate-x, | |
$translate-y: $default-translate-y, | |
$translate-z: $default-translate-z, | |
$perspective: false | |
) { | |
$trans: translate3d($translate-x, $translate-y, $translate-z); | |
@if $perspective { $trans: perspective($perspective) $trans; } | |
@include transform3d($trans); | |
} | |
// @doc off | |
// Skew ---------------------------------------------------------------------- | |
// @doc on | |
// Skew an element: | |
// | |
// @include skew( [ skew-x, skew-y, 3D-only ] ) | |
// | |
// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin skew( | |
$skew-x: $default-skew-x, | |
$skew-y: $default-skew-y, | |
$only3d: false | |
) { | |
$trans: skew($skew-x, $skew-y); | |
@include transform($trans, $only3d); | |
} | |
// Skew an element along the x axiz | |
// | |
// @include skew( [ skew-x, 3D-only ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin skewX( | |
$skew-x: $default-skew-x, | |
$only3d: false | |
) { | |
$trans: skewX($skew-x); | |
@include transform($trans, $only3d); | |
} | |
// Skew an element along the y axis | |
// | |
// @include skew( [ skew-y, 3D-only ] ) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin skewY( | |
$skew-y: $default-skew-y, | |
$only3d: false | |
) { | |
$trans: skewY($skew-y); | |
@include transform($trans, $only3d); | |
} | |
// Full transform mixins | |
// For settings any combination of transforms as arguments | |
// These are complex and not highly recommended for daily use | |
// They are mainly here for backwards-compatability purposes | |
// | |
// * they include origin adjustments | |
// * scale takes a multiplier (unitless), rotate and skew take degrees (deg) | |
// | |
// **Note** This mixin cannot be combined with other transform mixins. | |
@mixin create-transform( | |
$perspective: false, | |
$scale-x: false, | |
$scale-y: false, | |
$scale-z: false, | |
$rotate-x: false, | |
$rotate-y: false, | |
$rotate-z: false, | |
$rotate3d: false, | |
$trans-x: false, | |
$trans-y: false, | |
$trans-z: false, | |
$skew-x: false, | |
$skew-y: false, | |
$origin-x: false, | |
$origin-y: false, | |
$origin-z: false, | |
$only3d: false | |
) { | |
$trans: unquote(""); | |
// perspective | |
@if $perspective { $trans: perspective($perspective) ; } | |
// scale | |
@if $scale-x and $scale-y { | |
@if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); } | |
@else { $trans: $trans scale($scale-x, $scale-y); } | |
} @else { | |
@if $scale-x { $trans: $trans scaleX($scale-x); } | |
@if $scale-y { $trans: $trans scaleY($scale-y); } | |
@if $scale-z { $trans: $trans scaleZ($scale-z); } | |
} | |
// rotate | |
@if $rotate-x { $trans: $trans rotateX($rotate-x); } | |
@if $rotate-y { $trans: $trans rotateY($rotate-y); } | |
@if $rotate-z { $trans: $trans rotateZ($rotate-z); } | |
@if $rotate3d { $trans: $trans rotate3d($rotate3d); } | |
// translate | |
@if $trans-x and $trans-y { | |
@if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); } | |
@else { $trans: $trans translate($trans-x, $trans-y); } | |
} @else { | |
@if $trans-x { $trans: $trans translateX($trans-x); } | |
@if $trans-y { $trans: $trans translateY($trans-y); } | |
@if $trans-z { $trans: $trans translateZ($trans-z); } | |
} | |
// skew | |
@if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); } | |
@else { | |
@if $skew-x { $trans: $trans skewX($skew-x); } | |
@if $skew-y { $trans: $trans skewY($skew-y); } | |
} | |
// apply it! | |
@include transform($trans, $only3d); | |
@include transform-origin($origin-x, $origin-y, $origin-z, $only3d); | |
} | |
// A simplified set of options | |
// backwards-compatible with the previous version of the 'transform' mixin | |
@mixin simple-transform( | |
$scale: false, | |
$rotate: false, | |
$trans-x: false, | |
$trans-y: false, | |
$skew-x: false, | |
$skew-y: false, | |
$origin-x: false, | |
$origin-y: false | |
) { | |
@include create-transform( | |
false, | |
$scale, $scale, false, | |
false, false, $rotate, false, | |
$trans-x, $trans-y, false, | |
$skew-x, $skew-y, | |
$origin-x, $origin-y, false, | |
false | |
); | |
} | |
///////////////////// | |
// compass/css3/_transition.scss | |
// | |
// CSS Transitions | |
// Currently only works in Webkit. | |
// | |
// * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3 | |
// * We'll be prepared. | |
// | |
// Including this submodule sets following defaults for the mixins: | |
// | |
// $default-transition-property : all | |
// $default-transition-duration : 1s | |
// $default-transition-function : false | |
// $default-transition-delay : false | |
// | |
// Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s). | |
$default-transition-property: all !default; | |
$default-transition-duration: 1s !default; | |
$default-transition-function: false !default; | |
$default-transition-delay: false !default; | |
// One or more properties to transition | |
// | |
// * for multiple, use a comma-delimited list | |
// * also accepts "all" or "none" | |
@mixin transition-property($properties: $default-transition-property) { | |
@include experimental(transition-property, unquote($properties), | |
-moz, -webkit, -o, -ms, not -khtml, official | |
); | |
} | |
// One or more durations in seconds | |
// | |
// * for multiple, use a comma-delimited list | |
// * these durations will affect the properties in the same list position | |
@mixin transition-duration($duration: $default-transition-duration) { | |
@if type-of($duration) == string { $duration: unquote($duration); } | |
@include experimental(transition-duration, $duration, | |
-moz, -webkit, -o, -ms, not -khtml, official | |
); | |
} | |
// One or more timing functions | |
// | |
// * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)] | |
// * For multiple, use a comma-delimited list | |
// * These functions will effect the properties in the same list position | |
@mixin transition-timing-function($function: $default-transition-function) { | |
@include experimental(transition-timing-function, unquote($function), | |
-moz, -webkit, -o, -ms, not -khtml, official | |
); | |
} | |
// One or more transition-delays in seconds | |
// | |
// * for multiple, use a comma-delimited list | |
// * these delays will effect the properties in the same list position | |
@mixin transition-delay($delay: $default-transition-delay) { | |
@if type-of($delay) == string { $delay: unquote($delay); } | |
@include experimental(transition-delay, $delay, | |
-moz, -webkit, -o, -ms, not -khtml, official | |
); | |
} | |
// Transition all-in-one shorthand | |
@mixin single-transition( | |
$property: $default-transition-property, | |
$duration: $default-transition-duration, | |
$function: $default-transition-function, | |
$delay: $default-transition-delay | |
) { | |
@if $property and $duration and $function { | |
// Shorthand (see https://github.com/chriseppstein/compass/issues/585) | |
@if $delay { | |
-webkit-transition: $property $duration $function; | |
-webkit-transition-delay: $delay; | |
@include experimental(transition, $property $duration $function $delay, | |
-moz, | |
not -webkit, | |
-o, | |
-ms, | |
not -khtml, | |
official | |
); | |
} | |
@else { | |
@include experimental(transition, $property $duration $function, | |
-moz, | |
-webkit, | |
-o, | |
-ms, | |
not -khtml, | |
official | |
); | |
} | |
} | |
@else { | |
@include transition-property($property); | |
@include transition-duration($duration); | |
@if $function { @include transition-timing-function($function); } | |
@if $delay { @include transition-delay($delay); } | |
} | |
} | |
@mixin transition( | |
$transition-1 : default, | |
$transition-2 : false, | |
$transition-3 : false, | |
$transition-4 : false, | |
$transition-5 : false, | |
$transition-6 : false, | |
$transition-7 : false, | |
$transition-8 : false, | |
$transition-9 : false, | |
$transition-10: false | |
) { | |
@if $transition-1 == default { | |
$transition-1 : -compass-space-list(compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay)); | |
} | |
$transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10); | |
@include experimental(transition, $transition, | |
-moz, -webkit, -o, -ms, not -khtml, official | |
); | |
} | |
///////////////////// | |
// compass/css3/_appearance.scss | |
// | |
// Change the appearance for Mozilla, Webkit and the future | |
// | |
// @param $ap | |
// [ none | normal | icon | window | button | menu | field ] | |
@mixin appearance($ap) { | |
$ap: unquote($ap); | |
@include experimental(appearance, $ap, | |
-moz, -webkit, not -o, not -ms, not -khtml, official | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
a sass tragedy :)