django-compass-mixins/lib/compass/css3/_columns.scss

@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, -ms, not -khtml, official
  );
}

// Specify the gap between columns e.g. `20px`
@mixin column-gap($width) {
  @include experimental(column-gap, $width,
    -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, -ms, not -khtml, official
  );
}

// Specify how many columns an element should span across.
//
// * legal values are 1, all
@mixin column-span($columns) {
	@include experimental(column-span, $columns,
		-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(column-rule-width, $width,
    -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(column-rule-style, unquote($style),
    -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(column-rule-color, $color,
    -moz, -webkit, -o, -ms, not -khtml, official
  );
}

// Mixin encompassing all column rule properties
// For example:
//
//     @include column-rule(1px, solid, #c00)
//
// 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, -ms, not -khtml, official
  );
}

// Mixin for setting column-break-before
//
// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
//
//  Example: 
//    h2.before {@include column-break-before(always);}
//
//  Which generates: 
//
//  h2.before {    
//    -webkit-column-break-before: always;
//    column-break-before: always;}
@mixin column-break-before($value: auto){
   @include experimental(column-break-before, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
}

// Mixin for setting column-break-after
//
// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
//
//  Example: 
//    h2.after {@include column-break-after(always); }
//
//  Which generates: 
//
//  h2.after {
//    -webkit-column-break-after: always;
//    column-break-after: always; }
@mixin column-break-after($value: auto){
   @include experimental(column-break-after, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
}

// Mixin for setting column-break-inside
//
// * legal values are auto, avoid, avoid-page, avoid-column
//
//  Example: 
//    h2.inside {@include column-break-inside();}
//  Which generates: 
//  
//  h2.inside {
//    -webkit-column-break-inside: auto;
//    column-break-inside: auto;}
@mixin column-break-inside($value: auto){
   @include experimental(column-break-inside, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
}

// All-purpose mixin for setting column breaks.
//
// * legal values for $type : before, after, inside 
// * legal values for '$value' are dependent on $type
//    * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
//    * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
//    * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
//  
//  Examples: 
//    h2.before {@include column-break(before, always);}
//    h2.after {@include column-break(after, always); }
//    h2.inside {@include column-break(inside); }
//
//  Which generates: 
//  h2.before {    
//    -webkit-column-break-before: always;
//    column-break-before: always;}
//  
//  h2.after {
//    -webkit-column-break-after: always;
//    column-break-after: always; }
//
//  h2.inside {
//    -webkit-column-break-inside: auto;
//    column-break-inside: auto;}
 
@mixin column-break($type: before, $value: auto){
   @include experimental("column-break-#{$type}", $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
}