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

Merge pull request #840 from ai/box_column

Browse Source 
Box column
This commit is contained in:
Eric Meyer 2012-04-12 10:59:59 -07:00
commit 17676c6a05
2 changed files with 8 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,35 +7,35 @@
// @include columns(20em 2) // @include columns(20em 2)
@mixin columns($width-and-count) { @mixin columns($width-and-count) {
@include experimental(columns, $width-and-count, @include experimental(columns, $width-and-count,
-moz, -webkit, -o, -ms, not -khtml, official -moz, -webkit, not -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, -ms, not -khtml, official -moz, -webkit, not -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, -ms, not -khtml, official -moz, -webkit, not -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, -ms, not -khtml, official -moz, -webkit, not -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, -ms, not -khtml, official -moz, -webkit, not -o, -ms, not -khtml, official
); );
} }
@ -43,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, -ms, not -khtml, official -moz, -webkit, not -o, -ms, not -khtml, official
); );
} }
@ -51,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, -ms, not -khtml, official -moz, -webkit, not -o, -ms, not -khtml, official
); );
} }
@ -66,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, -ms, not -khtml, official -moz, -webkit, not -o, -ms, not -khtml, official
); );
} }

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

@ -2,61 +2,52 @@
-webkit-columns: 20em 5; -webkit-columns: 20em 5;
-moz-columns: 20em 5; -moz-columns: 20em 5;
-ms-columns: 20em 5; -ms-columns: 20em 5;
-o-columns: 20em 5;
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; -ms-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; -ms-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; -ms-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; -ms-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; -ms-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; -ms-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; -ms-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; -ms-column-rule: 1px solid blue;
-o-column-rule: 1px solid blue;
column-rule: 1px solid blue; } column-rule: 1px solid blue; }