diff --git a/doc-src/content/reference/compass/css3.haml b/doc-src/content/reference/compass/css3.haml index 8186f7ce..cd788810 100644 --- a/doc-src/content/reference/compass/css3.haml +++ b/doc-src/content/reference/compass/css3.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + The CSS3 module provides cross-browser mixins for CSS properties introduced in CSS3, for example border-radius and text-shadow. \ No newline at end of file diff --git a/doc-src/content/reference/compass/css3/background_clip.haml b/doc-src/content/reference/compass/css3/background_clip.haml index 0092e949..86e8096c 100644 --- a/doc-src/content/reference/compass/css3/background_clip.haml +++ b/doc-src/content/reference/compass/css3/background_clip.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides a mixin for background-clip. See CSS3 spec: background-clip. diff --git a/doc-src/content/reference/compass/css3/background_origin.haml b/doc-src/content/reference/compass/css3/background_origin.haml index 3adaec6f..79a898b9 100644 --- a/doc-src/content/reference/compass/css3/background_origin.haml +++ b/doc-src/content/reference/compass/css3/background_origin.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides a mixin for the background origin property. See CSS3 spec: background-origin property. diff --git a/doc-src/content/reference/compass/css3/background_size.haml b/doc-src/content/reference/compass/css3/background_size.haml index c2e8b98d..e6a3ea57 100644 --- a/doc-src/content/reference/compass/css3/background_size.haml +++ b/doc-src/content/reference/compass/css3/background_size.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + This mixin provides . See CSS3 spec: background-size. diff --git a/doc-src/content/reference/compass/css3/border_radius.haml b/doc-src/content/reference/compass/css3/border_radius.haml index 168b26e7..2af30688 100644 --- a/doc-src/content/reference/compass/css3/border_radius.haml +++ b/doc-src/content/reference/compass/css3/border_radius.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - The border-radius mixin is used to give a block element rounded corners. It automatically outputs the correct syntax for each browser (e.g. -webkit-border-radius and -moz-border-radius). + The border-radius mixin is used to give a block element rounded corners. It automatically outputs the correct vendor specific syntax for each browser (e.g. -webkit-border-radius and -moz-border-radius). See CSS3 spec: border-radius. diff --git a/doc-src/content/reference/compass/css3/box_shadow.haml b/doc-src/content/reference/compass/css3/box_shadow.haml index c7bd6a16..cd8b4bfd 100644 --- a/doc-src/content/reference/compass/css3/box_shadow.haml +++ b/doc-src/content/reference/compass/css3/box_shadow.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + The box-shadow mixin is used to give a block element a drop shadow. \ No newline at end of file diff --git a/doc-src/content/reference/compass/css3/box_sizing.haml b/doc-src/content/reference/compass/css3/box_sizing.haml index e7d11cce..ee61f0d4 100644 --- a/doc-src/content/reference/compass/css3/box_sizing.haml +++ b/doc-src/content/reference/compass/css3/box_sizing.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides a mixin for the box-sizing property, which allows you to change how the box model works. See W3C CSS3 spec: box-sizing. diff --git a/doc-src/content/reference/compass/css3/columns.haml b/doc-src/content/reference/compass/css3/columns.haml index ca20dd2b..831983a1 100644 --- a/doc-src/content/reference/compass/css3/columns.haml +++ b/doc-src/content/reference/compass/css3/columns.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides a mixin for the CSS3 Multi-column layout module. See CSS3 spec: Multi-colum layout module. diff --git a/doc-src/content/reference/compass/css3/font_face.haml b/doc-src/content/reference/compass/css3/font_face.haml index 246839e1..68428736 100644 --- a/doc-src/content/reference/compass/css3/font_face.haml +++ b/doc-src/content/reference/compass/css3/font_face.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides a mixin to support @font-face. See CSS3 spec: @font-face. diff --git a/doc-src/content/reference/compass/css3/gradient.haml b/doc-src/content/reference/compass/css3/gradient.haml index 02aec4a3..8871cfcb 100644 --- a/doc-src/content/reference/compass/css3/gradient.haml +++ b/doc-src/content/reference/compass/css3/gradient.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides a mixin to create cross-browser CSS3 gradients. diff --git a/doc-src/content/reference/compass/css3/inline_block.haml b/doc-src/content/reference/compass/css3/inline_block.haml index 8980823f..02d16aee 100644 --- a/doc-src/content/reference/compass/css3/inline_block.haml +++ b/doc-src/content/reference/compass/css3/inline_block.haml @@ -8,4 +8,6 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides a cross-browser method to implement display: inline-block;. Note that this was actually introduced in CSS2, but badly implemented across browsers. See CSS2.1 spec: display. + %blockquote + This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. diff --git a/doc-src/content/reference/compass/css3/opacity.haml b/doc-src/content/reference/compass/css3/opacity.haml index 9773cd23..4c17dd7f 100644 --- a/doc-src/content/reference/compass/css3/opacity.haml +++ b/doc-src/content/reference/compass/css3/opacity.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides cross-browser CSS opacity. See CSS3 spec: transparency. \ No newline at end of file diff --git a/doc-src/content/reference/compass/css3/text_shadow.haml b/doc-src/content/reference/compass/css3/text_shadow.haml index 2518e65a..2e966dce 100644 --- a/doc-src/content/reference/compass/css3/text_shadow.haml +++ b/doc-src/content/reference/compass/css3/text_shadow.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides a mixin for CSS text shadows. See CSS3 spec: text-shadow. diff --git a/doc-src/content/reference/compass/css3/transform.haml b/doc-src/content/reference/compass/css3/transform.haml index 078ba661..26b39e7d 100644 --- a/doc-src/content/reference/compass/css3/transform.haml +++ b/doc-src/content/reference/compass/css3/transform.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides mixins for CSS3 transforms. See W3C: CSS 2D transforms. diff --git a/doc-src/content/reference/compass/css3/transition.haml b/doc-src/content/reference/compass/css3/transition.haml index 5f76d83b..9085462d 100644 --- a/doc-src/content/reference/compass/css3/transition.haml +++ b/doc-src/content/reference/compass/css3/transition.haml @@ -8,4 +8,4 @@ classnames: --- - render 'reference' do %p - Lorem ipsum dolor sit amet. + Provides a mixin for CSS3 transitions. See CSS3 Spec: transitions. diff --git a/frameworks/compass/stylesheets/compass/css3/_background_clip.sass b/frameworks/compass/stylesheets/compass/css3/_background_clip.sass index 49a3c289..643ed380 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background_clip.sass +++ b/frameworks/compass/stylesheets/compass/css3/_background_clip.sass @@ -1,9 +1,13 @@ -// Background Clip -// clip the background (image and color) at the edge of the padding or border -// - [padding-box | border-box] -// - browser defaults to border-box, mixin defaults to padding-box +// + Clip the background (image and color) at the edge of the padding or border. + + Default constant 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 border-box model, use this code: + !default_background_clip = "border-box" -// override constants to change defaults !default_background_clip ||= "padding-box" =background-clip(!clip = !default_background_clip) diff --git a/frameworks/compass/stylesheets/compass/css3/_background_origin.sass b/frameworks/compass/stylesheets/compass/css3/_background_origin.sass index 17684f65..f5588575 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background_origin.sass +++ b/frameworks/compass/stylesheets/compass/css3/_background_origin.sass @@ -1,9 +1,11 @@ -// Background Origin -// position the background off the edge of the padding, border or content -// - [padding-box | border-box | content-box] -// - browser defaults to padding-box, mixin defaults to content-box +// + 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 + + Override constants to change defaults. -// override constants to change defaults !default_background_origin ||= "content-box" =background-origin(!origin = !default_background_origin) diff --git a/frameworks/compass/stylesheets/compass/css3/_background_size.sass b/frameworks/compass/stylesheets/compass/css3/_background_size.sass index 4552ff9d..5188cd5a 100644 --- a/frameworks/compass/stylesheets/compass/css3/_background_size.sass +++ b/frameworks/compass/stylesheets/compass/css3/_background_size.sass @@ -1,7 +1,8 @@ -// Background Size -// Set the size of background images using px, width and height, or percentages -// - percentages are relative to the background-origin (default = padding-box) -// - mixin defaults to "100% auto" +// + Set the size of background images using px, width and height, or percentages. Supported in: Opera, Gecko, Webkit. + + * percentages are relative to the background-origin (default = padding-box) + * mixin defaults to "100% auto" // override constants to change defaults !default_background_size ||= 100% "auto" diff --git a/frameworks/compass/stylesheets/compass/css3/_border_radius.sass b/frameworks/compass/stylesheets/compass/css3/_border_radius.sass index 475b66d5..27a05c06 100644 --- a/frameworks/compass/stylesheets/compass/css3/_border_radius.sass +++ b/frameworks/compass/stylesheets/compass/css3/_border_radius.sass @@ -1,28 +1,45 @@ !default_border_radius ||= 5px -// Round all borders by amount +// + Round all borders by a specific amount, defaults to value of !default_border_radius + =border-radius(!radius = !default_border_radius) border-radius= !radius -moz-border-radius= !radius -webkit-border-radius= !radius -// Round radius at position by amount. -// values for !vert: "top", "bottom" -// values for !horz: "left", "right +// + Round radius at position by amount. + + * values for !vert: "top", "bottom" + * values for !horz: "left", "right" + =border-corner-radius(!vert, !horz, !radius = !default_border_radius) border-#{!vert}-#{!horz}-radius= !radius -moz-border-radius-#{!vert}#{!horz}= !radius -webkit-border-#{!vert}-#{!horz}-radius= !radius + +// + Round top-left radius only =border-top-left-radius(!radius = !default_border_radius) +border-corner-radius("top", "left", !radius) +// + Round top-right radius only + =border-top-right-radius(!radius = !default_border_radius) +border-corner-radius("top", "right", !radius) +// + Round bottom-left radius only + =border-bottom-left-radius(!radius = !default_border_radius) +border-corner-radius("bottom", "left", !radius) +// + Round bottom-right radius only + =border-bottom-right-radius(!radius = !default_border_radius) +border-corner-radius("bottom", "right", !radius) diff --git a/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass b/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass index 7b9242a9..0331f07d 100644 --- a/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass +++ b/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass @@ -1,10 +1,12 @@ -//** - Provides cross-browser css box shadows for Webkit, Gecko, and CSS3 standard - arguments are color, horizontal offset, vertical offset, and blur +// + Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3. -//** + Standard 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 + + If you like, set different defaults in your project. !default_box_shadow_color ||= #333 !default_box_shadow_h_offset ||= 1px diff --git a/frameworks/compass/stylesheets/compass/css3/_box_sizing.sass b/frameworks/compass/stylesheets/compass/css3/_box_sizing.sass index c63076d4..7e82a5f1 100644 --- a/frameworks/compass/stylesheets/compass/css3/_box_sizing.sass +++ b/frameworks/compass/stylesheets/compass/css3/_box_sizing.sass @@ -1,5 +1,6 @@ -//** +// Change the box model for Mozilla, Webkit, IE8 and the future + @param !bs [ content-box | border-box ] =box-sizing(!bs) diff --git a/frameworks/compass/stylesheets/compass/css3/_columns.sass b/frameworks/compass/stylesheets/compass/css3/_columns.sass index c2ef3c28..2e211dbe 100644 --- a/frameworks/compass/stylesheets/compass/css3/_columns.sass +++ b/frameworks/compass/stylesheets/compass/css3/_columns.sass @@ -1,36 +1,50 @@ -//** - CSS3 columns for Mozilla, Webkit and the Future +// Specify the # of columns =column-count(!n) -moz-column-count= !n -webkit-column-count= !n column-count= !n +// Specify the gap between columns e.g. 20px + =column-gap(!u) -moz-column-gap= !u -webkit-column-gap= !u column-gap= !u +// Specify the width of columns e.g. 100px + =column-width(!u) -moz-column-width= !u -webkit-column-width= !u column-width= !u +// Specify the width of the rule between columns e.g. 1px + =column-rule-width(!w) -moz-column-rule-width= !w -webkit-column-rule-width= !w column-rule-width= !w +// Specify the style of the rule between columns e.g. 'dotted'. This works like border-style. + =column-rule-style(!s) -moz-column-rule-style= !s -webkit-column-rule-style= !s column-rule-style= !s +// Specify the style of the rule between columns e.g. 'dotted'. This works like border-color. + =column-rule-color(!c) -moz-column-rule-color= !c -webkit-column-rule-color= !c column-rule-color= !c +// + Mixin encompassing all column rule rules + For example: + +column-rule('1px', 'solid', '#000') + =column-rule(!w, !s = "solid", !c = " ") +column-rule-width(!w) +column-rule-style(!s) diff --git a/frameworks/compass/stylesheets/compass/css3/_font_face.sass b/frameworks/compass/stylesheets/compass/css3/_font_face.sass index 7be10200..07118a81 100644 --- a/frameworks/compass/stylesheets/compass/css3/_font_face.sass +++ b/frameworks/compass/stylesheets/compass/css3/_font_face.sass @@ -1,10 +1,12 @@ -// @Font-Face -// Cross-browser support for @font-face -// - !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. -// - postscript name is required by some browsers to look for local fonts. +// + 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. + * postscript name is required by some browsers to look for local fonts. + =font-face( !name, !font_files, !eot = false, !postscript = false, !style = false) @font-face font-family: '#{!name}' diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.sass b/frameworks/compass/stylesheets/compass/css3/_gradient.sass index d67d863a..a3432011 100644 --- a/frameworks/compass/stylesheets/compass/css3/_gradient.sass +++ b/frameworks/compass/stylesheets/compass/css3/_gradient.sass @@ -1,3 +1,8 @@ +// + Gradient mixin for all types of gradients. Use the other mixins for specific types of gradients. + + Arguments are type, coords, color_start, color_end and color_stop + =gradient(!type, !coords, !color_start, !color_end, !color_stop = false) !gradient= "#{!coords}, from(#{!color_start}), to(#{!color_end})" @if !color_stop @@ -5,36 +10,37 @@ background: -webkit-gradient(#{!type}, #{!gradient}) background: -moz-#{!type}-gradient(#{!gradient}) -//* - // This will yeild a radial gradient with an apparent specular highlight - +radial-gradient("45 45, 10, 52 50, 30", Cyan, DodgerBlue) - +// + This will yield a radial gradient with an apparent specular highlight + +radial-gradient("45 45, 10, 52 50, 30", Cyan, DodgerBlue) + =radial-gradient(!coords, !color1, !color2, !color_stop = false) +gradient("radial", !coords, !color1, !color2, !color_stop) -//* - // This yields a linear gradient spanning from !start to !end coordinates - +linear-gradient("left top", "left bottom", #fff, #ddd) +// + This yields a linear gradient spanning from !start to !end coordinates + +linear-gradient("left top", "left bottom", #fff, #ddd) =linear-gradient(!start, !end, !color1, !color2, !color_stop = false) !coords = !start + ", " + !end +gradient("linear", !coords, !color1, !color2, !color_stop) -//* - // This yields a gradient starting at the top with #fff, ending in #aaa - +v-gradient(#fff, #aaa) - // Same as above but with a #ccc at the halfway point - +v-gradient(#fff, #aaa, color_stop(50%, #ccc)) - // Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top - +v-gradient(#fff, #aaa, color_stop(30%, #ccc, 70%, #bbb)) +// + This yields a gradient starting at the top with #fff, ending in #aaa + +v-gradient(#fff, #aaa) + + Same as above but with a #ccc at the halfway point + +v-gradient(#fff, #aaa, color_stop(50%, #ccc)) + + Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top + +v-gradient(#fff, #aaa, color_stop(30%, #ccc, 70%, #bbb)) =v-gradient(!color1, !color2, !color_stop = false) +linear-gradient("left top", "left bottom", !color1, !color2, !color_stop) -//* - // This yields a horizontal linear gradient spanning from left to right - // It can be used just like v-gradient above - h-gradient(#fff, #ddd) - +// + This yields a horizontal linear gradient spanning from left to right. It can be used just like v-gradient above + h-gradient(#fff, #ddd) + =h-gradient(!color1, !color2, !color_stop = false) +linear-gradient("left top", "right top", !color1, !color2, !color_stop) \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/css3/_inline_block.sass b/frameworks/compass/stylesheets/compass/css3/_inline_block.sass index 1ace87fd..f869e2be 100644 --- a/frameworks/compass/stylesheets/compass/css3/_inline_block.sass +++ b/frameworks/compass/stylesheets/compass/css3/_inline_block.sass @@ -1,7 +1,10 @@ +// + Provides a cross-browser method to implement display: inline-block; + =inline-block display: -moz-inline-box -moz-box-orient: vertical display: inline-block vertical-align: middle #display: inline - #vertical-align: auto + #vertical-align: auto \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/css3/_opacity.sass b/frameworks/compass/stylesheets/compass/css3/_opacity.sass index e47ab9a7..7216ec1d 100644 --- a/frameworks/compass/stylesheets/compass/css3/_opacity.sass +++ b/frameworks/compass/stylesheets/compass/css3/_opacity.sass @@ -1,7 +1,9 @@ -//** - Provides cross-browser css opacity. - @param !opacity - A number between 0 and 1, where 0 is transparent and 1 is opaque. +// + 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. + =opacity(!opacity) opacity= !opacity -moz-opacity= !opacity diff --git a/frameworks/compass/stylesheets/compass/css3/_text_shadow.sass b/frameworks/compass/stylesheets/compass/css3/_text_shadow.sass index f76f4b9f..8edf759c 100644 --- a/frameworks/compass/stylesheets/compass/css3/_text_shadow.sass +++ b/frameworks/compass/stylesheets/compass/css3/_text_shadow.sass @@ -1,9 +1,11 @@ -//** - Provides css text shadows - arguments are color, horizontal offset, vertical offset, and blur +// + 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 ||= #aaa diff --git a/frameworks/compass/stylesheets/compass/css3/_transform.sass b/frameworks/compass/stylesheets/compass/css3/_transform.sass index eeff2ec3..dd8a1354 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transform.sass +++ b/frameworks/compass/stylesheets/compass/css3/_transform.sass @@ -1,20 +1,26 @@ // CSS Transform and Transform-Origin -// Apply a transform sent as a complete string +// + Apply a transform sent as a complete string. + =apply-transform(!transform = false) transform= !transform -webkit-transform= !transform -moz-transform= !transform -// Apply a transform-origin sent as a complete string +// + Apply a transform-origin sent as a complete string. + =apply-origin(!origin = false) transform-origin= !origin -webkit-transform-origin= !origin -moz-transform-origin= !origin -// transform-origin requires x and y coordinates -// - only applies the coordinates if they are there -// so that it can be called by scale, rotate and skew safely +// + transform-origin requires x and y coordinates + + * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely + =transform-origin(!originx = 50%, !originy = 50%) !origin = false @if !originx and !originy @@ -26,37 +32,42 @@ @if !origin +apply-origin(!origin) -// A full transform mixin with everything you could want -// - including origin adjustments if you want them -// - scale, rotate and skew don't require units -// scale takes a multiplier, rotate and skew take degrees +// + A full transform mixin with everything you could want + + * including origin adjustments if you want them + * scale, rotate and skew don't require units + * scale takes a multiplier, rotate and skew take degrees + =transform(!scale = 1, !rotate = 0, !transx = 0, !transy = 0, !skewx = 0, !skewy = 0, !originx = false, !originy = false) !transform = "scale(#{!scale}) rotate(#{!rotate}deg) translate(#{!transx}, #{!transy}) skew(#{!skewx}deg, #{!skewy}deg)" +apply-transform(!transform) +transform-origin(!originx, !originy) -// Transform Partials -// These work well on their own, but they don't add to each other, they override -// Use them with extra origin args, or along side +transform-origin +// + Transform Partials + + These work well on their own, but they don't add to each other, they override. + Use them with extra origin args, or along side +transform-origin + +// Adjust only the scale, with optional origin coordinates -// adjust only the scale -// - with optional origin coordinates =scale(!scale = 1.25, !originx = false, !originy = false) +apply-transform("scale(#{!scale})") +transform-origin(!originx, !originy) -// adjust only the rotation -// - with optional origin coordinates +// Adjust only the rotation, with optional origin coordinates + =rotate(!rotate = 45, !originx = false, !originy = false) +apply-transform("rotate(#{!rotate}deg)") +transform-origin(!originx, !originy) -// adjust only the translation +// Adjust only the translation + =translate(!transx = 0, !transy = 0) +apply-transform("translate(#{!transx}, #{!transy})") -// adjust only the skew -// - with optional origin coordinates +// Adjust only the skew, with optional origin coordinates =skew(!skewx = 0, !skewy = 0, !originx = false, !originy = false) +apply-transform("skew(#{!skewx}deg, #{!skewy}deg)") +transform-origin(!originx, !originy) diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.sass b/frameworks/compass/stylesheets/compass/css3/_transition.sass index 5274e08a..3f8aea95 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transition.sass +++ b/frameworks/compass/stylesheets/compass/css3/_transition.sass @@ -1,53 +1,76 @@ -// CSS Transitions -// Currently only works in Webkit -// - expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3 -// - we'll be prepared. +// + 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). -// Override these defaults with your own, if you like -// - timing-function and delay are set to false for browser defaults (ease, 0s) !default_transition_property ||= "all" !default_transition_duration ||= 1s !default_transition_function ||= false !default_transition_delay ||= false -// One or more properties to transition -// - for multiple, use a comma-delimited list -// - also accepts "all" or "none" +// + One or more properties to transition + + * for multiple, use a comma-delimited list + * also accepts "all" or "none" + =transition-property(!properties = !default_transition_property) transition-property = !properties -webkit-transition-property = !properties -moz-transition-property = !properties -o-transition-property = !properties -// One or more durrations in seconds -// - for multiple, use a comma-delimited list -// - these durrations will effect the properties in the same list position +// + One or more durations in seconds + + * for multiple, use a comma-delimited list + * these durations will affect the properties in the same list position + =transition-duration(!duration = !default_transition_duration) transition-duration = !duration -webkit-transition-duration = !duration -moz-transition-duration = !duration -o-transition-duration = !duration -// 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 +// + 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 + =transition-timing-function(!function = !default_transition_function) transition-timing-function = !function -webkit-transition-timing-function = !function -moz-transition-timing-function = !function -o-transition-timing-function = !function -// 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 +// + 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 + =transition-delay(!delay = !default_transition_delay) transition-delay = !delay -webkit-transition-delay = !delay -moz-transition-delay = !delay -o-transition-delay = !delay -// Transition all-in-one shorthand +// + Transition all-in-one shorthand + =transition(!properties = !default_transition_property, !duration = !default_transition_duration, !function = !default_transition_function, !delay = !default_transition_delay) +transition-property(!properties) +transition-duration(!duration)