121 lines
4.1 KiB
Sass
121 lines
4.1 KiB
Sass
@import shared
|
|
|
|
// Specify the shorthand `columns` property.
|
|
//
|
|
// Example:
|
|
//
|
|
// @include columns(20em 2)
|
|
=columns($width-and-count)
|
|
+experimental(columns, $width-and-count, -moz, -webkit, -o, -ms, not -khtml, official)
|
|
|
|
// Specify the number of columns
|
|
=column-count($count)
|
|
+experimental(column-count, $count, -moz, -webkit, -o, -ms, not -khtml, official)
|
|
|
|
// Specify the gap between columns e.g. `20px`
|
|
=column-gap($width)
|
|
+experimental(column-gap, $width, -moz, -webkit, -o, -ms, not -khtml, official)
|
|
|
|
// Specify the width of columns e.g. `100px`
|
|
=column-width($width)
|
|
+experimental(column-width, $width, -moz, -webkit, -o, -ms, not -khtml, official)
|
|
|
|
// Specify the width of the rule between columns e.g. `1px`
|
|
=column-rule-width($width)
|
|
+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.
|
|
=column-rule-style($style)
|
|
+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.
|
|
=column-rule-color($color)
|
|
+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)
|
|
=column-rule($width, $style: false, $color: false)
|
|
$full: -compass-space-list(compact($width, $style, $color))
|
|
+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;}
|
|
=column-break-before($value: auto)
|
|
+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; }
|
|
=column-break-after($value: auto)
|
|
+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;}
|
|
=column-break-inside($value: auto)
|
|
+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;}
|
|
|
|
=column-break($type: before, $value: auto)
|
|
+experimental("column-break-#{$type}", $value, not -moz, -webkit, not -o, not -ms, not -khtml, official)
|