Permalink
Browse files

Add -ms support for css3 columns. Add support for the columns shortha…

…nd property.
  • Loading branch information...
1 parent d63af50 commit a9317f0d7b9a68bb9b36095d0a6e121ebb34bf77 @chriseppstein chriseppstein committed Mar 18, 2012
@@ -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
`<html>` element instead of the `<body>` element. This makes the
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)
-------------------
@@ -1,46 +1,57 @@
@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
@mixin 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`
@mixin 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`
@mixin 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`
@mixin column-rule-width($width) {
@include experimental(rule-width, $width,
- -moz, -webkit, -o, not -ms, not -khtml, official
+ -moz, -webkit, -o, -ms, not -khtml, official
);
}
// Specify the style of the rule between columns e.g. `dotted`.
// This works like border-style.
@mixin column-rule-style($style) {
@include experimental(rule-style, unquote($style),
- -moz, -webkit, -o, not -ms, not -khtml, official
+ -moz, -webkit, -o, -ms, not -khtml, official
);
}
// Specify the color of the rule between columns e.g. `blue`.
// This works like border-color.
@mixin column-rule-color($color) {
@include experimental(rule-color, $color,
- -moz, -webkit, -o, not -ms, not -khtml, official
+ -moz, -webkit, -o, -ms, not -khtml, official
);
}
@@ -55,6 +66,6 @@
@mixin column-rule($width, $style: false, $color: false) {
$full : -compass-space-list(compact($width, $style, $color));
@include experimental(column-rule, $full,
- -moz, -webkit, -o, not -ms, not -khtml, official
+ -moz, -webkit, -o, -ms, not -khtml, official
);
}
@@ -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 {
-webkit-column-count: 5;
-moz-column-count: 5;
+ -ms-column-count: 5;
-o-column-count: 5;
column-count: 5; }
.column-gap {
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
+ -ms-column-gap: 10px;
-o-column-gap: 10px;
column-gap: 10px; }
.column-width {
-webkit-column-width: 90px;
-moz-column-width: 90px;
+ -ms-column-width: 90px;
-o-column-width: 90px;
column-width: 90px; }
.column-rule-width {
-webkit-rule-width: 1px;
-moz-rule-width: 1px;
+ -ms-rule-width: 1px;
-o-rule-width: 1px;
rule-width: 1px; }
.column-rule-style {
-webkit-rule-style: dotted;
-moz-rule-style: dotted;
+ -ms-rule-style: dotted;
-o-rule-style: dotted;
rule-style: dotted; }
.column-rule-color {
-webkit-rule-color: blue;
-moz-rule-color: blue;
+ -ms-rule-color: blue;
-o-rule-color: blue;
rule-color: blue; }
.column-rule {
-webkit-column-rule: 1px solid blue;
-moz-column-rule: 1px solid blue;
+ -ms-column-rule: 1px solid blue;
-o-column-rule: 1px solid blue;
column-rule: 1px solid blue; }
.column-rule-spaced {
-webkit-column-rule: 1px solid blue;
-moz-column-rule: 1px solid blue;
+ -ms-column-rule: 1px solid blue;
-o-column-rule: 1px solid blue;
column-rule: 1px solid blue; }
@@ -1,5 +1,6 @@
@import "compass/css3/columns";
+.columns { @include columns(20em 5); }
.column-count { @include column-count(5); }
.column-gap { @include column-gap(10px); }
.column-width { @include column-width(90px); }

0 comments on commit a9317f0

Please sign in to comment.