Convert the compass core framework to scss.
This commit is contained in:
Chris Eppstein
parent
bf34ddb0dd
commit
c94074dac5
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass.sass to: @import \"compass\""
|
||||||
|
@import compass.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3.sass to: @import \"compass/css3\""
|
||||||
|
@import compass/css3.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/layout.sass to: @import \"compass/layout\""
|
||||||
|
@import compass/layout.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/misc.sass to: @import \"compass/misc\""
|
||||||
|
@import compass/misc.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/reset.sass to: @import \"compass/reset\""
|
||||||
|
@import compass/reset.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities.sass to: @import \"compass/utilities\""
|
||||||
|
@import compass/utilities.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/background_clip.sass to: @import \"compass/css3/background-clip\""
|
||||||
|
@import compass/css3/background-clip.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/background_origin.sass to: @import \"compass/css3/background-origin\""
|
||||||
|
@import compass/css3/background-origin.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/background_size.sass to: @import \"compass/css3/background-size\""
|
||||||
|
@import compass/css3/background-size.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/border_radius.sass to: @import \"compass/css3/border-radius\""
|
||||||
|
@import compass/css3/border-radius.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/box_shadow.sass to: @import \"compass/css3/box-shadow\""
|
||||||
|
@import compass/css3/box-shadow.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/box_sizing.sass to: @import \"compass/css3/box-sizing\""
|
||||||
|
@import compass/css3/box-sizing.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/columns.sass to: @import \"compass/css3/columns\""
|
||||||
|
@import compass/css3/columns.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/font_face.sass to: @import \"compass/css3/font-face\""
|
||||||
|
@import compass/css3/font-face.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/gradient.sass to: @import \"compass/css3/gradient\""
|
||||||
|
@import compass/css3/gradient.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/inline_block.sass to: @import \"compass/css3/inline-block\""
|
||||||
|
@import compass/css3/inline-block.sass
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/opacity.sass to: @import \"compass/css3/opacity\""
|
||||||
|
@import compass/css3/opacity.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/text_shadow.sass to: @import \"compass/css3/text-shadow\""
|
||||||
|
@import compass/css3/text-shadow.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/transform.sass to: @import \"compass/css3/transform\""
|
||||||
|
@import compass/css3/transform.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/css3/transition.sass to: @import \"compass/css3/transition\""
|
||||||
|
@import compass/css3/transition.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/layout/sticky_footer.sass to: @import \"compass/layout/sticky-footer\""
|
||||||
|
@import compass/layout/sticky-footer.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/general.sass to: @import \"compass/utilities/general\""
|
||||||
|
@import compass/utilities/general.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/links.sass to: @import \"compass/utilities/links\""
|
||||||
|
@import compass/utilities/links.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/lists.sass to: @import \"compass/utilities/lists\""
|
||||||
|
@import compass/utilities/lists.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/print.sass to: @import \"compass/utilities/print\""
|
||||||
|
@import compass/utilities/print.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/sprites.sass to: @import \"compass/utilities/sprites\""
|
||||||
|
@import compass/utilities/sprites.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/tables.sass to: @import \"compass/utilities/tables\""
|
||||||
|
@import compass/utilities/tables.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/text.sass to: @import \"compass/utilities/text\""
|
||||||
|
@import compass/utilities/text.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/general/clearfix.sass to: @import \"compass/utilities/general/clearfix\""
|
||||||
|
@import compass/utilities/general/clearfix.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/general/float.sass to: @import \"compass/utilities/general/float\""
|
||||||
|
@import compass/utilities/general/float.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/general/hacks.sass to: @import \"compass/utilities/general/hacks\""
|
||||||
|
@import compass/utilities/general/hacks.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/general/min.sass to: @import \"compass/utilities/general/min\""
|
||||||
|
@import compass/utilities/general/min.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/general/reset.sass to: @import \"compass/utilities/general/reset\""
|
||||||
|
@import compass/utilities/general/reset.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/general/tag_cloud.sass to: @import \"compass/utilities/general/tag-cloud\""
|
||||||
|
@import compass/utilities/general/tag-cloud.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/links/hover_link.sass to: @import \"compass/utilities/links/hover-link\""
|
||||||
|
@import compass/utilities/links/hover-link.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/links/link_colors.sass to: @import \"compass/utilities/links/link-colors\""
|
||||||
|
@import compass/utilities/links/link-colors.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/links/unstyled_link.sass to: @import \"compass/utilities/links/unstyled-link\""
|
||||||
|
@import compass/utilities/links/unstyled-link.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/lists/bullets.sass to: @import \"compass/utilities/lists/bullets\""
|
||||||
|
@import compass/utilities/lists/bullets.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/lists/horizontal_list.sass to: @import \"compass/utilities/lists/horizontal-list\""
|
||||||
|
@import compass/utilities/lists/horizontal-list.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/lists/inline_list.sass to: @import \"compass/utilities/lists/inline-list\""
|
||||||
|
@import compass/utilities/lists/inline-list.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/sprites/sprite_img.sass to: @import \"compass/sprite-img\""
|
||||||
|
@import compass/sprite-img.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/tables/alternating_rows_and_columns.sass to: @import \"compass/utilities/tables/alternating-rows-and-columns\""
|
||||||
|
@import compass/utilities/tables/alternating-rows-and-columns.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/tables/borders.sass to: @import \"compass/utilities/tables/borders\""
|
||||||
|
@import compass/utilities/tables/borders.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/tables/scaffolding.sass to: @import \"compass/utilities/tables/scaffolding\""
|
||||||
|
@import compass/utilities/tables/scaffolding.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/text/ellipsis.sass to: @import \"compass/utilities/text/ellipsis\""
|
||||||
|
@import compass/utilities/text/ellipsis.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/text/nowrap.sass to: @import \"compass/utilities/text/nowrap\""
|
||||||
|
@import compass/utilities/text/nowrap.scss
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@debug "DEPRECATED: Please change your @import of compass/utilities/text/replacement.sass to: @import \"compass/utilities/text/replacement\""
|
||||||
|
@import compass/utilities/text/replacement.scss
|
||||||
@ -1,5 +1,5 @@
|
|||||||
@import compass/css3/inline_block.sass
|
@import compass/css3/inline_block
|
||||||
@import compass/utilities/general/float.sass
|
@import compass/utilities/general/float
|
||||||
|
|
||||||
// Button Font
|
// Button Font
|
||||||
!blueprint_button_font_family ||= "\"Lucida Grande\", Tahoma, Arial, Verdana, sans-serif"
|
!blueprint_button_font_family ||= "\"Lucida Grande\", Tahoma, Arial, Verdana, sans-serif"
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
// * http://www.subtraction.com/2007/03/18/oh-yeeaahh
|
// * http://www.subtraction.com/2007/03/18/oh-yeeaahh
|
||||||
// --------------------------------------------------------------
|
// --------------------------------------------------------------
|
||||||
|
|
||||||
@import compass/utilities/general/float.sass
|
@import compass/utilities/general/float
|
||||||
|
|
||||||
// The number of columns in the grid.
|
// The number of columns in the grid.
|
||||||
!blueprint_grid_columns ||= 24
|
!blueprint_grid_columns ||= 24
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
// @import blueprint/liquid.sass
|
// @import blueprint/liquid.sass
|
||||||
// -------------------------------------------------------------------
|
// -------------------------------------------------------------------
|
||||||
|
|
||||||
@import compass/utilities/general/float.sass
|
@import compass/utilities/general/float
|
||||||
|
|
||||||
// Main layout grid, override these constants to build your grid and container sizes.
|
// Main layout grid, override these constants to build your grid and container sizes.
|
||||||
// The width shown gives the right floored percentage values.
|
// The width shown gives the right floored percentage values.
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
@import typography.sass
|
@import typography.sass
|
||||||
@import compass/utilities/general/float.sass
|
@import compass/utilities/general/float
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
@import grid.sass
|
@import grid.sass
|
||||||
@import compass/utilities/general/float.sass
|
@import compass/utilities/general/float
|
||||||
|
|
||||||
// Main layout grid, override these constants to build your grid and container sizes.
|
// Main layout grid, override these constants to build your grid and container sizes.
|
||||||
!blueprint_grid_columns ||= 24
|
!blueprint_grid_columns ||= 24
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
@import colors.sass
|
@import colors.sass
|
||||||
@import compass/utilities/links/link_colors.sass
|
@import compass/utilities/links/link-colors
|
||||||
@import compass/utilities/general/float.sass
|
@import compass/utilities/general/float
|
||||||
|
|
||||||
!blueprint_font_family ||= "Helvetica Neue, Arial, Helvetica, sans-serif"
|
!blueprint_font_family ||= "Helvetica Neue, Arial, Helvetica, sans-serif"
|
||||||
!blueprint_fixed_font_family ||= "'andale mono', 'lucida console', monospace"
|
!blueprint_fixed_font_family ||= "'andale mono', 'lucida console', monospace"
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
@import compass/utilities/text/nowrap.sass
|
@import compass/utilities/text/nowrap
|
||||||
@import compass/utilities/general/float.sass
|
@import compass/utilities/general/float
|
||||||
|
|
||||||
// Most of these utility classes are not "semantic". If you use them,
|
// Most of these utility classes are not "semantic". If you use them,
|
||||||
// you are mixing your content and presentation. For shame!
|
// you are mixing your content and presentation. For shame!
|
||||||
|
|||||||
@ -1,2 +0,0 @@
|
|||||||
@import compass/utilities.sass
|
|
||||||
@import compass/css3.sass
|
|
||||||
2
frameworks/compass/stylesheets/_compass.scss
Normal file
2
frameworks/compass/stylesheets/_compass.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import "compass/utilities";
|
||||||
|
@import "compass/css3";
|
||||||
@ -1,14 +0,0 @@
|
|||||||
@import css3/border_radius.sass
|
|
||||||
@import css3/inline_block.sass
|
|
||||||
@import css3/opacity.sass
|
|
||||||
@import css3/box_shadow.sass
|
|
||||||
@import css3/text_shadow.sass
|
|
||||||
@import css3/columns.sass
|
|
||||||
@import css3/box_sizing.sass
|
|
||||||
@import css3/gradient.sass
|
|
||||||
@import css3/background_clip.sass
|
|
||||||
@import css3/background_origin.sass
|
|
||||||
@import css3/background_size.sass
|
|
||||||
@import css3/font_face.sass
|
|
||||||
@import css3/transform.sass
|
|
||||||
@import css3/transition.sass
|
|
||||||
14
frameworks/compass/stylesheets/compass/_css3.scss
Normal file
14
frameworks/compass/stylesheets/compass/_css3.scss
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
@import "css3/border-radius";
|
||||||
|
@import "css3/inline-block";
|
||||||
|
@import "css3/opacity";
|
||||||
|
@import "css3/box-shadow";
|
||||||
|
@import "css3/text-shadow";
|
||||||
|
@import "css3/columns";
|
||||||
|
@import "css3/box-sizing";
|
||||||
|
@import "css3/gradient";
|
||||||
|
@import "css3/background-clip";
|
||||||
|
@import "css3/background-origin";
|
||||||
|
@import "css3/background-size";
|
||||||
|
@import "css3/font-face";
|
||||||
|
@import "css3/transform";
|
||||||
|
@import "css3/transition";
|
||||||
@ -1 +0,0 @@
|
|||||||
@import layout/sticky_footer.sass
|
|
||||||
1
frameworks/compass/stylesheets/compass/_layout.scss
Normal file
1
frameworks/compass/stylesheets/compass/_layout.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import "layout/sticky-footer";
|
||||||
@ -1,24 +0,0 @@
|
|||||||
//
|
|
||||||
This logo was designed by Jared Hardy <jared@jaredhardy.com>
|
|
||||||
This work is licensed under the Creative Commons Attribution 3.0 United States License.
|
|
||||||
To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/us/
|
|
||||||
or send a letter to:
|
|
||||||
Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
|
|
||||||
|
|
||||||
=unobtrusive-logo(!size = 1em)
|
|
||||||
font-family: Monaco, Courier, "Lucida Sans Unicode", monospace
|
|
||||||
font-size= !size
|
|
||||||
color: #888
|
|
||||||
.selector
|
|
||||||
vertical-align: middle
|
|
||||||
font-size= 1.3em
|
|
||||||
.brace
|
|
||||||
vertical-align: middle
|
|
||||||
font: bold 1.7em Georgia, "Times New Roman", serif
|
|
||||||
color: #CCC
|
|
||||||
margin= 0 -0.2em
|
|
||||||
.rule
|
|
||||||
vertical-align: middle
|
|
||||||
margin= 0 -0.2em
|
|
||||||
|
|
||||||
|
|
||||||
21
frameworks/compass/stylesheets/compass/_misc.scss
Normal file
21
frameworks/compass/stylesheets/compass/_misc.scss
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
// This logo was designed by Jared Hardy <jared@jaredhardy.com>
|
||||||
|
// This work is licensed under the Creative Commons Attribution 3.0 United States License.
|
||||||
|
// To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/us/
|
||||||
|
// or send a letter to:
|
||||||
|
// Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
|
||||||
|
|
||||||
|
@mixin unobtrusive-logo($size: 1em) {
|
||||||
|
font-family: Monaco, Courier, "Lucida Sans Unicode", monospace;
|
||||||
|
font-size: $size;
|
||||||
|
color: #888888;
|
||||||
|
.selector {
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 1.3em; }
|
||||||
|
.brace {
|
||||||
|
vertical-align: middle;
|
||||||
|
font: bold 1.7em Georgia, "Times New Roman", serif;
|
||||||
|
color: #cccccc;
|
||||||
|
margin: 0 -0.2em; }
|
||||||
|
.rule {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0 -0.2em; } }
|
||||||
@ -1,3 +0,0 @@
|
|||||||
@import utilities/general/reset.sass
|
|
||||||
|
|
||||||
+global-reset
|
|
||||||
3
frameworks/compass/stylesheets/compass/_reset.scss
Normal file
3
frameworks/compass/stylesheets/compass/_reset.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@import "utilities/general/reset";
|
||||||
|
|
||||||
|
@include global-reset;
|
||||||
@ -1,6 +0,0 @@
|
|||||||
@import utilities/general.sass
|
|
||||||
@import utilities/links.sass
|
|
||||||
@import utilities/lists.sass
|
|
||||||
@import utilities/sprites.sass
|
|
||||||
@import utilities/tables.sass
|
|
||||||
@import utilities/text.sass
|
|
||||||
6
frameworks/compass/stylesheets/compass/_utilities.scss
Normal file
6
frameworks/compass/stylesheets/compass/_utilities.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@import "utilities/general";
|
||||||
|
@import "utilities/links";
|
||||||
|
@import "utilities/lists";
|
||||||
|
@import "utilities/sprites";
|
||||||
|
@import "utilities/tables";
|
||||||
|
@import "utilities/text";
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
//
|
||||||
|
// 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
|
||||||
|
|
||||||
|
@mixin background-clip($clip: $default-background-clip) {
|
||||||
|
// webkit and mozilla use the deprecated short [border | padding | content]
|
||||||
|
$deprecated: padding;
|
||||||
|
@if $clip == "border-box" {
|
||||||
|
$deprecated: border; }
|
||||||
|
background-clip: $clip;
|
||||||
|
-webkit-background-clip: $deprecated;
|
||||||
|
-moz-background-clip: $deprecated; }
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
// Override `!default-background-origin` to change the default.
|
||||||
|
|
||||||
|
$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) {
|
||||||
|
// webkit and mozilla use the deprecated short [border | padding | content]
|
||||||
|
$deprecated: padding;
|
||||||
|
@if $origin == "border-box" {
|
||||||
|
$deprecated: border; }
|
||||||
|
@if $origin == "content-box" {
|
||||||
|
$deprecated: content; }
|
||||||
|
background-origin: $origin;
|
||||||
|
-webkit-background-origin: $deprecated;
|
||||||
|
-moz-background-origin: $deprecated; }
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
// 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 !default;
|
||||||
|
|
||||||
|
@mixin background-size($size: $default-background-size) {
|
||||||
|
background-size: $size;
|
||||||
|
-webkit-background-size: $size;
|
||||||
|
-o-background-size: $size;
|
||||||
|
-khtml-background-size: $size;
|
||||||
|
-moz-background-size: $size; }
|
||||||
@ -1,26 +0,0 @@
|
|||||||
//
|
|
||||||
|
|
||||||
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"
|
|
||||||
|
|
||||||
//
|
|
||||||
Clip the background (image and color) at the edge of the padding or border.
|
|
||||||
|
|
||||||
Legal Values:
|
|
||||||
|
|
||||||
* "padding-box"
|
|
||||||
* "border-box"
|
|
||||||
=background-clip(!clip = !default_background_clip)
|
|
||||||
// webkit and mozilla use the deprecated short [border | padding | content]
|
|
||||||
!deprecated= "padding"
|
|
||||||
@if !clip == "border-box"
|
|
||||||
!deprecated= "border"
|
|
||||||
background-clip= !clip
|
|
||||||
-webkit-background-clip= !deprecated
|
|
||||||
-moz-background-clip= !deprecated
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
//
|
|
||||||
Override `!default_background_origin` to change the default.
|
|
||||||
|
|
||||||
!default_background_origin ||= "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"`
|
|
||||||
=background-origin(!origin = !default_background_origin)
|
|
||||||
// webkit and mozilla use the deprecated short [border | padding | content]
|
|
||||||
!deprecated= "padding"
|
|
||||||
@if !origin == "border-box"
|
|
||||||
!deprecated= "border"
|
|
||||||
@if !origin == "content-box"
|
|
||||||
!deprecated= "content"
|
|
||||||
background-origin= !origin
|
|
||||||
-webkit-background-origin= !deprecated
|
|
||||||
-moz-background-origin= !deprecated
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
//
|
|
||||||
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"
|
|
||||||
|
|
||||||
=background-size(!size = !default_background_size)
|
|
||||||
background-size= !size
|
|
||||||
-webkit-background-size= !size
|
|
||||||
-o-background-size= !size
|
|
||||||
-khtml-background-size= !size
|
|
||||||
-moz-background-size= !size
|
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
$default-border-radius: 5px !default;
|
||||||
|
|
||||||
|
// Round all borders by a specific amount, defaults to value of $default-border-radius
|
||||||
|
|
||||||
|
@mixin 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"
|
||||||
|
|
||||||
|
@mixin 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
|
||||||
|
|
||||||
|
@mixin border-top-left-radius($radius: $default-border-radius) {
|
||||||
|
@include border-corner-radius(top, left, $radius); }
|
||||||
|
|
||||||
|
// Round top-right radius only
|
||||||
|
|
||||||
|
@mixin border-top-right-radius($radius: $default-border-radius) {
|
||||||
|
@include border-corner-radius(top, right, $radius); }
|
||||||
|
|
||||||
|
// Round bottom-left radius only
|
||||||
|
|
||||||
|
@mixin border-bottom-left-radius($radius: $default-border-radius) {
|
||||||
|
@include border-corner-radius(bottom, left, $radius); }
|
||||||
|
|
||||||
|
// Round bottom-right radius only
|
||||||
|
|
||||||
|
@mixin border-bottom-right-radius($radius: $default-border-radius) {
|
||||||
|
@include border-corner-radius(bottom, right, $radius); }
|
||||||
|
|
||||||
|
// Round 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 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 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 left corners by amount
|
||||||
|
@mixin border-left-radius($radius: $default-border-radius) {
|
||||||
|
@include border-top-left-radius($radius);
|
||||||
|
@include border-bottom-left-radius($radius); }
|
||||||
@ -1,64 +0,0 @@
|
|||||||
!default_border_radius ||= 5px
|
|
||||||
|
|
||||||
//
|
|
||||||
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"
|
|
||||||
|
|
||||||
=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)
|
|
||||||
|
|
||||||
// Round top corners by amount
|
|
||||||
=border-top-radius(!radius = !default_border_radius)
|
|
||||||
+border-top-left-radius(!radius)
|
|
||||||
+border-top-right-radius(!radius)
|
|
||||||
|
|
||||||
// Round right corners by amount
|
|
||||||
=border-right-radius(!radius = !default_border_radius)
|
|
||||||
+border-top-right-radius(!radius)
|
|
||||||
+border-bottom-right-radius(!radius)
|
|
||||||
|
|
||||||
// Round bottom corners by amount
|
|
||||||
=border-bottom-radius(!radius = !default_border_radius)
|
|
||||||
+border-bottom-left-radius(!radius)
|
|
||||||
+border-bottom-right-radius(!radius)
|
|
||||||
|
|
||||||
// Round left corners by amount
|
|
||||||
=border-left-radius(!radius = !default_border_radius)
|
|
||||||
+border-top-left-radius(!radius)
|
|
||||||
+border-bottom-left-radius(!radius)
|
|
||||||
27
frameworks/compass/stylesheets/compass/css3/_box-shadow.scss
Normal file
27
frameworks/compass/stylesheets/compass/css3/_box-shadow.scss
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
// @doc off
|
||||||
|
// These defaults make the arguments optional for this mixin
|
||||||
|
// If you like, set different defaults before importing.
|
||||||
|
// @doc on
|
||||||
|
|
||||||
|
// 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: 1px !default;
|
||||||
|
|
||||||
|
// The default vertical offset. Positive is down.
|
||||||
|
$default-box-shadow-v-offset: 1px !default;
|
||||||
|
|
||||||
|
// The default blur length.
|
||||||
|
$default-box-shadow-blur: 5px !default;
|
||||||
|
|
||||||
|
// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
|
||||||
|
// Arguments are color, horizontal offset, vertical offset, and blur length.
|
||||||
|
|
||||||
|
@mixin box-shadow($color: $default-box-shadow-color, $hoff: $default-box-shadow-h-offset, $voff: $default-box-shadow-v-offset, $blur: $default-box-shadow-blur) {
|
||||||
|
/* Webkit (Safari, Chrome) */
|
||||||
|
-webkit-box-shadow: $color $hoff $voff $blur;
|
||||||
|
/* Gecko (Firefox, Camino) */
|
||||||
|
-moz-box-shadow: $color $hoff $voff $blur;
|
||||||
|
/* CSS3 */
|
||||||
|
box-shadow: $color $hoff $voff $blur; }
|
||||||
14
frameworks/compass/stylesheets/compass/css3/_box-sizing.scss
Normal file
14
frameworks/compass/stylesheets/compass/css3/_box-sizing.scss
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
// Change the box model for Mozilla, Webkit, IE8 and the future
|
||||||
|
//
|
||||||
|
// @param $bs
|
||||||
|
// [ content-box | border-box ]
|
||||||
|
|
||||||
|
@mixin box-sizing($bs) {
|
||||||
|
/* Mozilla (FireFox, Camino) */
|
||||||
|
-moz-box-sizing: $bs;
|
||||||
|
/* Webkit (Safari, Chrome) */
|
||||||
|
-webkit-box-sizing: $bs;
|
||||||
|
/* IE (8) */
|
||||||
|
-ms-box-sizing: $bs;
|
||||||
|
/* CSS3 */
|
||||||
|
box-sizing: $bs; }
|
||||||
@ -1,24 +0,0 @@
|
|||||||
// @doc off
|
|
||||||
// These defaults make the arguments optional for this mixin
|
|
||||||
// If you like, set different defaults before importing.
|
|
||||||
// @doc on
|
|
||||||
|
|
||||||
// The default color for box shadows
|
|
||||||
!default_box_shadow_color ||= #333
|
|
||||||
// The default horizontal offset. Positive is to the right.
|
|
||||||
!default_box_shadow_h_offset ||= 1px
|
|
||||||
// The default vertical offset. Positive is down.
|
|
||||||
!default_box_shadow_v_offset ||= 1px
|
|
||||||
// The default blur length.
|
|
||||||
!default_box_shadow_blur ||= 5px
|
|
||||||
|
|
||||||
//
|
|
||||||
Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
|
|
||||||
Arguments are color, horizontal offset, vertical offset, and blur length.
|
|
||||||
=box-shadow(!color = !default_box_shadow_color, !hoff = !default_box_shadow_h_offset, !voff = !default_box_shadow_v_offset, !blur = !default_box_shadow_blur)
|
|
||||||
/* Webkit (Safari, Chrome) */
|
|
||||||
-webkit-box-shadow= !color !hoff !voff !blur
|
|
||||||
/* Gecko (Firefox, Camino) */
|
|
||||||
-moz-box-shadow= !color !hoff !voff !blur
|
|
||||||
/* CSS3 */
|
|
||||||
box-shadow= !color !hoff !voff !blur
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
//
|
|
||||||
Change the box model for Mozilla, Webkit, IE8 and the future
|
|
||||||
|
|
||||||
@param !bs
|
|
||||||
[ content-box | border-box ]
|
|
||||||
|
|
||||||
=box-sizing(!bs)
|
|
||||||
/* Mozilla (FireFox, Camino)
|
|
||||||
-moz-box-sizing= !bs
|
|
||||||
/* Webkit (Safari, Chrome)
|
|
||||||
-webkit-box-sizing= !bs
|
|
||||||
/* IE (8)
|
|
||||||
-ms-box-sizing= !bs
|
|
||||||
/* CSS3
|
|
||||||
box-sizing= !bs
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
// 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)
|
|
||||||
+column-rule-color(!c)
|
|
||||||
50
frameworks/compass/stylesheets/compass/css3/_columns.scss
Normal file
50
frameworks/compass/stylesheets/compass/css3/_columns.scss
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
// Specify the # of columns
|
||||||
|
|
||||||
|
@mixin column-count($n) {
|
||||||
|
-moz-column-count: $n;
|
||||||
|
-webkit-column-count: $n;
|
||||||
|
column-count: $n; }
|
||||||
|
|
||||||
|
// Specify the gap between columns e.g. 20px
|
||||||
|
|
||||||
|
@mixin column-gap($u) {
|
||||||
|
-moz-column-gap: $u;
|
||||||
|
-webkit-column-gap: $u;
|
||||||
|
column-gap: $u; }
|
||||||
|
|
||||||
|
// Specify the width of columns e.g. 100px
|
||||||
|
|
||||||
|
@mixin 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
|
||||||
|
|
||||||
|
@mixin 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.
|
||||||
|
|
||||||
|
@mixin 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.
|
||||||
|
|
||||||
|
@mixin 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')
|
||||||
|
|
||||||
|
@mixin column-rule($w, $s: solid, $c: unquote(" ")) {
|
||||||
|
@include column-rule-width($w);
|
||||||
|
@include column-rule-style($s);
|
||||||
|
@include column-rule-color($c); }
|
||||||
32
frameworks/compass/stylesheets/compass/css3/_font-face.scss
Normal file
32
frameworks/compass/stylesheets/compass/css3/_font-face.scss
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
// 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.
|
||||||
|
|
||||||
|
@mixin font-face($name, $font-files, $eot: false, $postscript: false, $style: false) {
|
||||||
|
@font-face {
|
||||||
|
font-family: "#{$name}";
|
||||||
|
@if $style {
|
||||||
|
font-style: $style; }
|
||||||
|
@if $eot {
|
||||||
|
src: stylesheet-url($eot); }
|
||||||
|
@if $postscript {
|
||||||
|
src: local("#{$name}"), local("#{$postscript}"), #{$font-files}; }
|
||||||
|
@else {
|
||||||
|
src: local("#{$name}"), #{$font-files}; } } }
|
||||||
|
|
||||||
|
// EXAMPLE
|
||||||
|
// +font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "fonts/this.eot", "thisname")
|
||||||
|
//
|
||||||
|
// will generate:
|
||||||
|
//
|
||||||
|
// @font-face {
|
||||||
|
// font-family: 'this name';
|
||||||
|
// src: url('fonts/this.eot');
|
||||||
|
// src: local('this name'), local('thisname'),
|
||||||
|
// url('this.otf') format('woff'),
|
||||||
|
// url('this.woff') format('opentype');
|
||||||
|
// }
|
||||||
@ -1,33 +0,0 @@
|
|||||||
//
|
|
||||||
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}'
|
|
||||||
@if !style
|
|
||||||
font-style= !style
|
|
||||||
@if !eot
|
|
||||||
src= stylesheet_url(!eot)
|
|
||||||
@if !postscript
|
|
||||||
src: local('#{!name}'), local('#{!postscript}'), #{!font_files}
|
|
||||||
@else
|
|
||||||
src: local('#{!name}'), #{!font_files}
|
|
||||||
|
|
||||||
// EXAMPLE
|
|
||||||
+font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "fonts/this.eot", "thisname")
|
|
||||||
|
|
||||||
will generate:
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'this name';
|
|
||||||
src: url('fonts/this.eot');
|
|
||||||
src: local('this name'), local('thisname'),
|
|
||||||
url('this.otf') format('woff'),
|
|
||||||
url('this.woff') format('opentype');
|
|
||||||
}
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
//
|
|
||||||
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%))
|
|
||||||
|
|
||||||
Browsers Supported:
|
|
||||||
|
|
||||||
- Chrome
|
|
||||||
- Safari
|
|
||||||
- Firefox 3.6
|
|
||||||
|
|
||||||
=linear-gradient(!color_stops, !start = "top")
|
|
||||||
// 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})
|
|
||||||
|
|
||||||
//
|
|
||||||
Due to limitation's of webkit, 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))
|
|
||||||
|
|
||||||
Browsers Supported:
|
|
||||||
|
|
||||||
- Chrome
|
|
||||||
- Safari
|
|
||||||
- Firefox 3.6
|
|
||||||
|
|
||||||
=radial-gradient(!color_stops, !center_position = "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})
|
|
||||||
57
frameworks/compass/stylesheets/compass/css3/_gradient.scss
Normal file
57
frameworks/compass/stylesheets/compass/css3/_gradient.scss
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
// 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%))
|
||||||
|
//
|
||||||
|
// Browsers Supported:
|
||||||
|
//
|
||||||
|
// - Chrome
|
||||||
|
// - Safari
|
||||||
|
// - Firefox 3.6
|
||||||
|
|
||||||
|
@mixin linear-gradient($color-stops, $start: top) {
|
||||||
|
// 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}); }
|
||||||
|
|
||||||
|
// Due to limitation's of webkit, 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))
|
||||||
|
//
|
||||||
|
// Browsers Supported:
|
||||||
|
//
|
||||||
|
// - Chrome
|
||||||
|
// - Safari
|
||||||
|
// - Firefox 3.6
|
||||||
|
|
||||||
|
@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}); }
|
||||||
@ -1,6 +1,10 @@
|
|||||||
//
|
//
|
||||||
Provides a cross-browser method to implement `display: inline-block;`
|
Provides a cross-browser method to implement `display: inline-block;`
|
||||||
|
|
||||||
|
This file is a sass file to work around the fact that the
|
||||||
|
SCSS parser does not support the #prop hack at this time.
|
||||||
|
http://github.com/nex3/haml/issues/issue/119
|
||||||
|
|
||||||
=inline-block
|
=inline-block
|
||||||
display: -moz-inline-box
|
display: -moz-inline-box
|
||||||
-moz-box-orient: vertical
|
-moz-box-orient: vertical
|
||||||
@ -1,20 +0,0 @@
|
|||||||
//
|
|
||||||
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
|
|
||||||
-khtml-opacity= !opacity
|
|
||||||
-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")"
|
|
||||||
filter= "alpha(opacity=" + round(!opacity*100) + ")"
|
|
||||||
|
|
||||||
// Make an element completely transparent.
|
|
||||||
=transparent
|
|
||||||
+opacity(0)
|
|
||||||
|
|
||||||
// Make an element completely opaque.
|
|
||||||
=opaque
|
|
||||||
+opacity(1)
|
|
||||||
19
frameworks/compass/stylesheets/compass/css3/_opacity.scss
Normal file
19
frameworks/compass/stylesheets/compass/css3/_opacity.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
// 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) {
|
||||||
|
opacity: $opacity;
|
||||||
|
-moz-opacity: $opacity;
|
||||||
|
-khtml-opacity: $opacity;
|
||||||
|
-ms-filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=") + round($opacity * 100) + unquote(")");
|
||||||
|
filter: unquote("alpha(opacity=") + round($opacity * 100) + unquote(")"); }
|
||||||
|
|
||||||
|
// Make an element completely transparent.
|
||||||
|
@mixin transparent {
|
||||||
|
@include opacity(0); }
|
||||||
|
|
||||||
|
// Make an element completely opaque.
|
||||||
|
@mixin opaque {
|
||||||
|
@include opacity(1); }
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
// 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;
|
||||||
|
|
||||||
|
@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; }
|
||||||
@ -1,17 +0,0 @@
|
|||||||
//
|
|
||||||
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
|
|
||||||
!default_text_shadow_h_offset ||= 1px
|
|
||||||
!default_text_shadow_v_offset ||= 1px
|
|
||||||
!default_text_shadow_blur ||= 1px
|
|
||||||
|
|
||||||
=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
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
// CSS Transform and Transform-Origin
|
|
||||||
|
|
||||||
//
|
|
||||||
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-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(!originx = 50%, !originy = 50%)
|
|
||||||
!origin = false
|
|
||||||
@if !originx and !originy
|
|
||||||
!origin = "#{!originx} #{!originy}"
|
|
||||||
@else if !originx
|
|
||||||
!origin = "#{!originx}"
|
|
||||||
@else if !originy
|
|
||||||
!origin = "#{!originy}"
|
|
||||||
@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
|
|
||||||
|
|
||||||
=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
|
|
||||||
|
|
||||||
// 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
|
|
||||||
|
|
||||||
=rotate(!rotate = 45, !originx = false, !originy = false)
|
|
||||||
+apply-transform("rotate(#{!rotate}deg)")
|
|
||||||
+transform-origin(!originx, !originy)
|
|
||||||
|
|
||||||
// Adjust only the translation
|
|
||||||
|
|
||||||
=translate(!transx = 0, !transy = 0)
|
|
||||||
+apply-transform("translate(#{!transx}, #{!transy})")
|
|
||||||
|
|
||||||
// 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)
|
|
||||||
64
frameworks/compass/stylesheets/compass/css3/_transform.scss
Normal file
64
frameworks/compass/stylesheets/compass/css3/_transform.scss
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
// CSS Transform and Transform-Origin
|
||||||
|
|
||||||
|
// Apply a transform sent as a complete string.
|
||||||
|
|
||||||
|
@mixin apply-transform($transform: false) {
|
||||||
|
transform: $transform;
|
||||||
|
-webkit-transform: $transform;
|
||||||
|
-moz-transform: $transform; }
|
||||||
|
|
||||||
|
// Apply a transform-origin sent as a complete string.
|
||||||
|
|
||||||
|
@mixin 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
|
||||||
|
|
||||||
|
@mixin transform-origin($originx: 50%, $originy: 50%) {
|
||||||
|
@if $originx or $originy {
|
||||||
|
@if $originy {
|
||||||
|
@include apply-origin($originx or 50% $originy);
|
||||||
|
} @else {
|
||||||
|
@include apply-origin($originx); } } }
|
||||||
|
|
||||||
|
// A full transform mixin with everything you could want
|
||||||
|
//
|
||||||
|
// * including origin adjustments if you want them
|
||||||
|
// * scale, rotate and skew require units of degrees(deg)
|
||||||
|
// * scale takes a multiplier, rotate and skew take degrees
|
||||||
|
|
||||||
|
@mixin transform($scale: 1, $rotate: 0deg, $transx: 0, $transy: 0, $skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
|
||||||
|
$transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
|
||||||
|
@include apply-transform($transform);
|
||||||
|
@include 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
|
||||||
|
|
||||||
|
// Adjust only the scale, with optional origin coordinates
|
||||||
|
|
||||||
|
@mixin scale($scale: 1.25, $originx: false, $originy: false) {
|
||||||
|
@include apply-transform(scale($scale));
|
||||||
|
@include transform-origin($originx, $originy); }
|
||||||
|
|
||||||
|
// Adjust only the rotation, with optional origin coordinates
|
||||||
|
|
||||||
|
@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
|
||||||
|
@include apply-transform(rotate($rotate));
|
||||||
|
@include transform-origin($originx, $originy); }
|
||||||
|
|
||||||
|
// Adjust only the translation
|
||||||
|
|
||||||
|
@mixin translate($transx: 0, $transy: 0) {
|
||||||
|
@include apply-transform(translate($transx, $transy)); }
|
||||||
|
|
||||||
|
// Adjust only the skew, with optional origin coordinates
|
||||||
|
@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
|
||||||
|
@include apply-transform(skew($skewx, $skewy));
|
||||||
|
@include transform-origin($originx, $originy); }
|
||||||
@ -1,80 +0,0 @@
|
|||||||
//
|
|
||||||
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_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"
|
|
||||||
|
|
||||||
=transition-property(!properties = !default_transition_property)
|
|
||||||
transition-property = !properties
|
|
||||||
-webkit-transition-property = !properties
|
|
||||||
-moz-transition-property = !properties
|
|
||||||
-o-transition-property = !properties
|
|
||||||
|
|
||||||
//
|
|
||||||
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
|
|
||||||
|
|
||||||
=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
|
|
||||||
|
|
||||||
=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(!properties = !default_transition_property, !duration = !default_transition_duration, !function = !default_transition_function, !delay = !default_transition_delay)
|
|
||||||
+transition-property(!properties)
|
|
||||||
+transition-duration(!duration)
|
|
||||||
@if !function
|
|
||||||
+transition-timing-function(!function)
|
|
||||||
@if !delay
|
|
||||||
+transition-delay(!delay)
|
|
||||||
77
frameworks/compass/stylesheets/compass/css3/_transition.scss
Normal file
77
frameworks/compass/stylesheets/compass/css3/_transition.scss
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
// 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) {
|
||||||
|
transition-property: $properties;
|
||||||
|
-webkit-transition-property: $properties;
|
||||||
|
-moz-transition-property: $properties;
|
||||||
|
-o-transition-property: $properties; }
|
||||||
|
|
||||||
|
// 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) {
|
||||||
|
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
|
||||||
|
|
||||||
|
@mixin 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
|
||||||
|
|
||||||
|
@mixin 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
|
||||||
|
|
||||||
|
@mixin transition($properties: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay) {
|
||||||
|
@include transition-property($properties);
|
||||||
|
@include transition-duration($duration);
|
||||||
|
@if $function {
|
||||||
|
@include transition-timing-function($function); }
|
||||||
|
@if $delay {
|
||||||
|
@include transition-delay($delay); } }
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
// Based on a [blog post by Ryan Fait](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/).
|
||||||
|
//
|
||||||
|
// Must be mixed into the top level of your stylesheet.
|
||||||
|
//
|
||||||
|
// Footer element must be outside of root wrapper element.
|
||||||
|
//
|
||||||
|
// Footer must be a fixed height.
|
||||||
|
|
||||||
|
@mixin sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer")) {
|
||||||
|
html, body {
|
||||||
|
height: 100%; }
|
||||||
|
#{$root-selector} {
|
||||||
|
clear: both;
|
||||||
|
min-height: 100%;
|
||||||
|
height: auto !important;
|
||||||
|
height: 100%;
|
||||||
|
margin-bottom: -$footer-height;
|
||||||
|
#{$root-footer-selector} {
|
||||||
|
height: $footer-height; } }
|
||||||
|
#{$footer-selector} {
|
||||||
|
clear: both;
|
||||||
|
position: relative;
|
||||||
|
height: $footer-height; } }
|
||||||
@ -1,24 +0,0 @@
|
|||||||
//
|
|
||||||
Based on a [blog post by Ryan Fait](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/).
|
|
||||||
|
|
||||||
Must be mixed into the top level of your stylesheet.
|
|
||||||
|
|
||||||
Footer element must be outside of root wrapper element.
|
|
||||||
|
|
||||||
Footer must be a fixed height.
|
|
||||||
|
|
||||||
=sticky-footer(!footer_height, !root_selector = "#root", !root_footer_selector = "#root_footer", !footer_selector = "#footer")
|
|
||||||
html, body
|
|
||||||
height: 100%
|
|
||||||
#{!root_selector}
|
|
||||||
clear: both
|
|
||||||
min-height: 100%
|
|
||||||
height: auto !important
|
|
||||||
height: 100%
|
|
||||||
margin-bottom= -!footer_height
|
|
||||||
#{!root_footer_selector}
|
|
||||||
height= !footer_height
|
|
||||||
#{!footer_selector}
|
|
||||||
clear: both
|
|
||||||
position: relative
|
|
||||||
height= !footer_height
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
@import general/reset.sass
|
|
||||||
@import general/clearfix.sass
|
|
||||||
@import general/float.sass
|
|
||||||
@import general/tag_cloud.sass
|
|
||||||
@import general/hacks.sass
|
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
@import "general/reset";
|
||||||
|
@import "general/clearfix";
|
||||||
|
@import "general/float";
|
||||||
|
@import "general/tag-cloud";
|
||||||
|
@import "general/hacks";
|
||||||
@ -1,3 +0,0 @@
|
|||||||
@import links/hover_link.sass
|
|
||||||
@import links/link_colors.sass
|
|
||||||
@import links/unstyled_link.sass
|
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
@import "links/hover-link";
|
||||||
|
@import "links/link-colors";
|
||||||
|
@import "links/unstyled-link";
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user