https://github.com/sha-red/compass-mixins/tree/master/lib
extended with more sass frameworks and as django app.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
3.1 KiB
92 lines
3.1 KiB
// --------------------------------------------------------------------------- |
|
// Padding Mixins |
|
|
|
// add empty colums as padding before an element. |
|
// $columns : The number of columns to prefix. |
|
// $context : [optional] The context (columns spanned by parent). |
|
// : Context is required on any nested elements. |
|
// : Context MUST NOT be declared on a root element. |
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
|
// $style : The container style to use. |
|
@mixin prefix( |
|
$columns, |
|
$context : $total-columns, |
|
$from : $from-direction, |
|
$style : fix-static-misalignment() |
|
) { |
|
$from : unquote($from); |
|
padding-#{$from}: space($columns, $context, $style); |
|
} |
|
|
|
// add empty colums as padding after an element. |
|
// $columns : The number of columns to suffix. |
|
// $context : [optional] The context (columns spanned by parent). |
|
// : Context is required on any nested elements. |
|
// : Context MUST NOT be declared on a root element. |
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
|
// $style : The container style to use. |
|
@mixin suffix( |
|
$columns, |
|
$context : $total-columns, |
|
$from : $from-direction, |
|
$style : fix-static-misalignment() |
|
) { |
|
$from : unquote($from); |
|
$to : opposite-position($from); |
|
padding-#{$to}: space($columns, $context, $style); |
|
} |
|
|
|
// add empty colums as padding before and after an element. |
|
// $columns : The number of columns to pad. |
|
// $context : [optional] The context (columns spanned by parent). |
|
// : Context is required on any nested elements. |
|
// : Context MUST NOT be declared on a root element. |
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
|
// $style : The container style to use. |
|
@mixin pad( |
|
$prefix : false, |
|
$suffix : false, |
|
$context : $total-columns, |
|
$from : $from-direction, |
|
$style : fix-static-misalignment() |
|
) { |
|
$from : unquote($from); |
|
@if $prefix { |
|
@include prefix($prefix, $context, $from, $style); |
|
} |
|
@if $suffix { |
|
@include suffix($suffix, $context, $from, $style); |
|
} |
|
} |
|
|
|
// Bleed into colums with margin/padding on any side of an element. |
|
// $width : The side of the bleed. |
|
// : Any unit-length will be used directly. |
|
// : Any unitless number will be used as a column-count. |
|
// : Use "2 of 6" format to represent 2 cals in a 6-col nested context. |
|
// $sides : One or more sides to bleed [ top | right | bottom | left | all ]. |
|
// $style : The container style to use. |
|
@mixin bleed( |
|
$width: $grid-padding, |
|
$sides: left right, |
|
$style: fix-static-misalignment() |
|
) { |
|
@if $border-box-sizing { @include box-sizing(content-box) } |
|
|
|
@if type-of($width) == 'list' { |
|
$width: filter($width, of); |
|
$width: space(nth($width,1), nth($width,2), $style); |
|
} @else if unitless($width) { |
|
$width: space($width, $style: $style); |
|
} |
|
|
|
@if $sides == 'all' { |
|
margin: - $width; |
|
padding: $width; |
|
} @else { |
|
@each $side in $sides { |
|
margin-#{$side}: - $width; |
|
padding-#{$side}: $width; |
|
} |
|
} |
|
}
|
|
|