chriseppstein/compass

// Columns
@import "compass/support";

// The prefixed support threshold for columns.
// Defaults to the $critical-usage-threshold.
$multicolumn-support-threshold: $critical-usage-threshold !default;


// Specify the shorthand `columns` property.
//
// Example:
//
//     @include columns(20em 2);
@mixin columns($width-and-count) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    columns: $width-and-count
  ));
}

// Specify the number of columns
@mixin column-count($count) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    column-count: $count
  ));
}

// Specify the gap between columns e.g. `20px`
@mixin column-gap($width) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    column-gap: $width
  ));
}

// Specify the width of columns e.g. `100px`
@mixin column-width($width) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    column-width: $width
  ));
}

// Specify how many columns an element should span across.
//
// * legal values are 1, all
@mixin column-span($columns) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    column-span: $columns
  ));
}

// Specify the width of the rule between columns e.g. `1px`
@mixin column-rule-width($width) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    rule-width: $width
  ));
}

// Specify the style of the rule between columns e.g. `dotted`.
// This works like border-style.
@mixin column-rule-style($style) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    rule-style: $style
  ));
}

// Specify the color of the rule between columns e.g. `blue`.
// This works like border-color.
@mixin column-rule-color($color) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    rule-color: $color
  ));
}

// 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: null, $color: null) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    column-rule: $width $style $color
  ));
}

// 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;
//    break-before: always;}
//
//  h2.after {
//    -webkit-column-break-after: always;
//    break-after: always; }
//
//  h2.inside {
//    -webkit-column-break-inside: auto;
//    break-inside: auto;}

@mixin column-break($type: before, $value: auto){
  @include with-each-prefix(multicolumn, $multicolumn-support-threshold) {
    @if $current-prefix == -webkit {
      // Webkit uses non-standard syntax
      -webkit-column-break-#{$type}: $value;
    } @else if $current-prefix == -moz {
      // Moz uses a different non-standard syntax
      -moz-page-break-#{$type}: $value;
    } @else {
      @include prefix-prop(break-#{$type}, $value);
    }
  }
}

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

@mixin column-break-before($value: auto){
  @include column-break(before, $value);
  @warn '"column-break-before" has been deprecated in favor of the official syntax: "break-before".';
}

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

@mixin column-break-after($value: auto){
  @include column-break(after, $value);
  @warn '"column-break-after" has been deprecated in favor of the official syntax: "break-after".';
}

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

@mixin column-break-inside($value: auto){
  @include column-break(inside, $value);
  @warn '"column-break-inside" has been deprecated in favor of the official syntax: "break-inside".';
}

// Mixin for setting column-span
//
// * legal values: none, all
//
//  Example:
//    h2.span {@include column-span();}
@mixin column-span($span: all){
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    column-span: $span
  ));
}

// Mixin for setting column-fill
//
// * legal values: auto, balance
//
//  Example:
//    h2.fill {@include column-fill();}
@mixin column-fill($fill: balance){
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
    column-fill: $fill
  ));
}