Better argument names for the columns module, tests for the columns module, accept space separated args for the column-rule mixin.
This commit is contained in:
parent
0e7bef6dbf
commit
412468d52a
@ -1,55 +1,60 @@
|
|||||||
@import "shared";
|
@import "shared";
|
||||||
|
|
||||||
// Specify the number of columns
|
// Specify the number of columns
|
||||||
@mixin column-count($n) {
|
@mixin column-count($count) {
|
||||||
@include experimental(column-count, $n,
|
@include experimental(column-count, $count,
|
||||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Specify the gap between columns e.g. `20px`
|
// Specify the gap between columns e.g. `20px`
|
||||||
@mixin column-gap($u) {
|
@mixin column-gap($width) {
|
||||||
@include experimental(column-gap, $u,
|
@include experimental(column-gap, $width,
|
||||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Specify the width of columns e.g. `100px`
|
// Specify the width of columns e.g. `100px`
|
||||||
@mixin column-width($u) {
|
@mixin column-width($width) {
|
||||||
@include experimental(column-width, $u,
|
@include experimental(column-width, $width,
|
||||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
-moz, -webkit, -o, not -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($w) {
|
@mixin column-rule-width($width) {
|
||||||
@include experimental(rule-width, $w,
|
@include experimental(rule-width, $width,
|
||||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Specify the style of the rule between columns e.g. `dotted`.
|
// Specify the style of the rule between columns e.g. `dotted`.
|
||||||
// This works like border-style.
|
// This works like border-style.
|
||||||
@mixin column-rule-style($s) {
|
@mixin column-rule-style($style) {
|
||||||
@include experimental(rule-style, unquote($s),
|
@include experimental(rule-style, unquote($style),
|
||||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Specify the style of the rule between columns e.g. `dotted`.
|
// Specify the color of the rule between columns e.g. `blue`.
|
||||||
// This works like border-color.
|
// This works like border-color.
|
||||||
|
@mixin column-rule-color($color) {
|
||||||
@mixin column-rule-color($c) {
|
@include experimental(rule-color, $color,
|
||||||
@include experimental(rule-color, unquote($s),
|
|
||||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mixin encompassing all column rule rules
|
// Mixin encompassing all column rule properties
|
||||||
// For example:
|
// For example:
|
||||||
// +column-rule(1px, solid, #c00)
|
//
|
||||||
@mixin column-rule($w, $s: solid, $c: black) {
|
// @include column-rule(1px, solid, #c00)
|
||||||
@include experimental(column-rule, $w $s $c,
|
//
|
||||||
|
// Or the values can be space separated:
|
||||||
|
//
|
||||||
|
// @include column-rule(1px solid #c00)
|
||||||
|
@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, not -ms, not -khtml, official
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -328,6 +328,16 @@ module Compass::SassExtensions::Functions::GradientSupport
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def _compass_space_list(list)
|
||||||
|
if list.is_a?(List) && !list.is_a?(SpaceList)
|
||||||
|
SpaceList.new(*list.values)
|
||||||
|
elsif list.is_a?(SpaceList)
|
||||||
|
list
|
||||||
|
else
|
||||||
|
SpaceList.new(list)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
# slice a sublist from a list
|
# slice a sublist from a list
|
||||||
def _compass_slice(list, start_index, end_index = nil)
|
def _compass_slice(list, start_index, end_index = nil)
|
||||||
end_index ||= Sass::Script::Number.new(-1)
|
end_index ||= Sass::Script::Number.new(-1)
|
||||||
|
47
test/fixtures/stylesheets/compass/css/columns.css
vendored
Normal file
47
test/fixtures/stylesheets/compass/css/columns.css
vendored
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
.column-count {
|
||||||
|
-moz-column-count: 5;
|
||||||
|
-webkit-column-count: 5;
|
||||||
|
-o-column-count: 5;
|
||||||
|
column-count: 5; }
|
||||||
|
|
||||||
|
.column-gap {
|
||||||
|
-moz-column-gap: 10px;
|
||||||
|
-webkit-column-gap: 10px;
|
||||||
|
-o-column-gap: 10px;
|
||||||
|
column-gap: 10px; }
|
||||||
|
|
||||||
|
.column-width {
|
||||||
|
-moz-column-width: 90px;
|
||||||
|
-webkit-column-width: 90px;
|
||||||
|
-o-column-width: 90px;
|
||||||
|
column-width: 90px; }
|
||||||
|
|
||||||
|
.column-rule-width {
|
||||||
|
-moz-rule-width: 1px;
|
||||||
|
-webkit-rule-width: 1px;
|
||||||
|
-o-rule-width: 1px;
|
||||||
|
rule-width: 1px; }
|
||||||
|
|
||||||
|
.column-rule-style {
|
||||||
|
-moz-rule-style: dotted;
|
||||||
|
-webkit-rule-style: dotted;
|
||||||
|
-o-rule-style: dotted;
|
||||||
|
rule-style: dotted; }
|
||||||
|
|
||||||
|
.column-rule-color {
|
||||||
|
-moz-rule-color: blue;
|
||||||
|
-webkit-rule-color: blue;
|
||||||
|
-o-rule-color: blue;
|
||||||
|
rule-color: blue; }
|
||||||
|
|
||||||
|
.column-rule {
|
||||||
|
-moz-column-rule: 1px solid blue;
|
||||||
|
-webkit-column-rule: 1px solid blue;
|
||||||
|
-o-column-rule: 1px solid blue;
|
||||||
|
column-rule: 1px solid blue; }
|
||||||
|
|
||||||
|
.column-rule-spaced {
|
||||||
|
-moz-column-rule: 1px solid blue;
|
||||||
|
-webkit-column-rule: 1px solid blue;
|
||||||
|
-o-column-rule: 1px solid blue;
|
||||||
|
column-rule: 1px solid blue; }
|
10
test/fixtures/stylesheets/compass/sass/columns.scss
vendored
Normal file
10
test/fixtures/stylesheets/compass/sass/columns.scss
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
@import "compass/css3/columns";
|
||||||
|
|
||||||
|
.column-count { @include column-count(5); }
|
||||||
|
.column-gap { @include column-gap(10px); }
|
||||||
|
.column-width { @include column-width(90px); }
|
||||||
|
.column-rule-width { @include column-rule-width(1px); }
|
||||||
|
.column-rule-style { @include column-rule-style(dotted); }
|
||||||
|
.column-rule-color { @include column-rule-color(blue); }
|
||||||
|
.column-rule { @include column-rule(1px, solid, blue); }
|
||||||
|
.column-rule-spaced { @include column-rule(1px solid blue); }
|
Loading…
Reference in New Issue
Block a user