github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add -ms support for css3 columns. Add support for the columns shorthand property.

Browse Source
This commit is contained in:
Chris Eppstein 2012-03-18 02:42:24 -07:00
parent d63af50ab1
commit a9317f0d7b
4 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
doc-src/content/CHANGELOG.markdown
View File

@ -22,7 +22,8 @@ The Documentation for the [latest preview release](http://beta.compass-style.org
* [Vertical Rhythm Module] The `establish-baseline` mixin now styles the * [Vertical Rhythm Module] The `establish-baseline` mixin now styles the
`<html>` element instead of the `<body>` element. This makes the `<html>` element instead of the `<body>` element. This makes the
vertical rhythm module work better with `rem` based measurements. vertical rhythm module work better with `rem` based measurements.
* [CSS3] Add 3D transform support for moz, ie, and opera. * [CSS3] Add 3D transform support for Mozillia, IE, and Opera.
* [CSS3] Add `-ms` support for css3 columns. Add support for the columns shorthand property.
0.12.1 (03/14/2012) 0.12.1 (03/14/2012)
------------------- -------------------

25
frameworks/compass/stylesheets/compass/css3/_columns.scss
View File

@ -1,30 +1,41 @@
@import "shared"; @import "shared";
// Specify the shorthand `columns` property.
//
// Example:
//
// @include columns(20em 2)
@mixin columns($width-and-count) {
@include experimental(columns, $width-and-count,
-moz, -webkit, -o, -ms, not -khtml, official
);
}
// Specify the number of columns // Specify the number of columns
@mixin column-count($count) { @mixin column-count($count) {
@include experimental(column-count, $count, @include experimental(column-count, $count,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
// Specify the gap between columns e.g. `20px` // Specify the gap between columns e.g. `20px`
@mixin column-gap($width) { @mixin column-gap($width) {
@include experimental(column-gap, $width, @include experimental(column-gap, $width,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
// Specify the width of columns e.g. `100px` // Specify the width of columns e.g. `100px`
@mixin column-width($width) { @mixin column-width($width) {
@include experimental(column-width, $width, @include experimental(column-width, $width,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
// Specify the width of the rule between columns e.g. `1px` // Specify the width of the rule between columns e.g. `1px`
@mixin column-rule-width($width) { @mixin column-rule-width($width) {
@include experimental(rule-width, $width, @include experimental(rule-width, $width,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
@ -32,7 +43,7 @@
// This works like border-style. // This works like border-style.
@mixin column-rule-style($style) { @mixin column-rule-style($style) {
@include experimental(rule-style, unquote($style), @include experimental(rule-style, unquote($style),
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
@ -40,7 +51,7 @@
// This works like border-color. // This works like border-color.
@mixin column-rule-color($color) { @mixin column-rule-color($color) {
@include experimental(rule-color, $color, @include experimental(rule-color, $color,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
@ -55,6 +66,6 @@
@mixin column-rule($width, $style: false, $color: false) { @mixin column-rule($width, $style: false, $color: false) {
$full : -compass-space-list(compact($width, $style, $color)); $full : -compass-space-list(compact($width, $style, $color));
@include experimental(column-rule, $full, @include experimental(column-rule, $full,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }

15
test/fixtures/stylesheets/compass/css/columns.css vendored
View File

@ -1,47 +1,62 @@
.columns {
-webkit-columns: 20em 5;
-moz-columns: 20em 5;
-ms-columns: 20em 5;
-o-columns: 20em 5;
columns: 20em 5; }
.column-count { .column-count {
-webkit-column-count: 5; -webkit-column-count: 5;
-moz-column-count: 5; -moz-column-count: 5;
-ms-column-count: 5;
-o-column-count: 5; -o-column-count: 5;
column-count: 5; } column-count: 5; }
.column-gap { .column-gap {
-webkit-column-gap: 10px; -webkit-column-gap: 10px;
-moz-column-gap: 10px; -moz-column-gap: 10px;
-ms-column-gap: 10px;
-o-column-gap: 10px; -o-column-gap: 10px;
column-gap: 10px; } column-gap: 10px; }
.column-width { .column-width {
-webkit-column-width: 90px; -webkit-column-width: 90px;
-moz-column-width: 90px; -moz-column-width: 90px;
-ms-column-width: 90px;
-o-column-width: 90px; -o-column-width: 90px;
column-width: 90px; } column-width: 90px; }
.column-rule-width { .column-rule-width {
-webkit-rule-width: 1px; -webkit-rule-width: 1px;
-moz-rule-width: 1px; -moz-rule-width: 1px;
-ms-rule-width: 1px;
-o-rule-width: 1px; -o-rule-width: 1px;
rule-width: 1px; } rule-width: 1px; }
.column-rule-style { .column-rule-style {
-webkit-rule-style: dotted; -webkit-rule-style: dotted;
-moz-rule-style: dotted; -moz-rule-style: dotted;
-ms-rule-style: dotted;
-o-rule-style: dotted; -o-rule-style: dotted;
rule-style: dotted; } rule-style: dotted; }
.column-rule-color { .column-rule-color {
-webkit-rule-color: blue; -webkit-rule-color: blue;
-moz-rule-color: blue; -moz-rule-color: blue;
-ms-rule-color: blue;
-o-rule-color: blue; -o-rule-color: blue;
rule-color: blue; } rule-color: blue; }
.column-rule { .column-rule {
-webkit-column-rule: 1px solid blue; -webkit-column-rule: 1px solid blue;
-moz-column-rule: 1px solid blue; -moz-column-rule: 1px solid blue;
-ms-column-rule: 1px solid blue;
-o-column-rule: 1px solid blue; -o-column-rule: 1px solid blue;
column-rule: 1px solid blue; } column-rule: 1px solid blue; }
.column-rule-spaced { .column-rule-spaced {
-webkit-column-rule: 1px solid blue; -webkit-column-rule: 1px solid blue;
-moz-column-rule: 1px solid blue; -moz-column-rule: 1px solid blue;
-ms-column-rule: 1px solid blue;
-o-column-rule: 1px solid blue; -o-column-rule: 1px solid blue;
column-rule: 1px solid blue; } column-rule: 1px solid blue; }

1
test/fixtures/stylesheets/compass/sass/columns.scss vendored
View File

@ -1,5 +1,6 @@
@import "compass/css3/columns"; @import "compass/css3/columns";
.columns { @include columns(20em 5); }
.column-count { @include column-count(5); } .column-count { @include column-count(5); }
.column-gap { @include column-gap(10px); } .column-gap { @include column-gap(10px); }
.column-width { @include column-width(90px); } .column-width { @include column-width(90px); }