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.
94 lines
3.1 KiB
94 lines
3.1 KiB
7 years ago
|
// ---------------------------------------------------------------------------
|
||
|
|
// Margin Mixins
|
||
|
|
|
||
|
|
// Apply 'columns' margin before an element to push it along the grid.
|
||
|
|
//
|
||
|
|
// $columns : The number of columns to span.
|
||
|
|
// $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 pre(
|
||
|
|
$columns,
|
||
|
|
$context : $total-columns,
|
||
|
|
$from : $from-direction,
|
||
|
|
$style : fix-static-misalignment()
|
||
|
|
) {
|
||
|
|
$from : unquote($from);
|
||
|
|
margin-#{$from}: space($columns, $context, $style);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 'push' is a synonymn for 'pre'
|
||
|
|
@mixin push(
|
||
|
|
$columns,
|
||
|
|
$context : $total-columns,
|
||
|
|
$from : $from-direction,
|
||
|
|
$style : fix-static-misalignment()
|
||
|
|
) {
|
||
|
|
$from : unquote($from);
|
||
|
|
@include pre($columns, $context, $from, $style);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply negative 'columns' margin before an element to pull it along the grid.
|
||
|
|
//
|
||
|
|
// $columns : The number of columns to span.
|
||
|
|
// $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 pull(
|
||
|
|
$columns,
|
||
|
|
$context : $total-columns,
|
||
|
|
$from : $from-direction,
|
||
|
|
$style : fix-static-misalignment()
|
||
|
|
) {
|
||
|
|
$from : unquote($from);
|
||
|
|
margin-#{$from}: 0 - space($columns, $context, $style);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply 'columns' margin after an element to contain it in a grid.
|
||
|
|
//
|
||
|
|
// $columns : The number of columns to span.
|
||
|
|
// $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 post(
|
||
|
|
$columns,
|
||
|
|
$context : $total-columns,
|
||
|
|
$from : $from-direction,
|
||
|
|
$style : fix-static-misalignment()
|
||
|
|
) {
|
||
|
|
$from : unquote($from);
|
||
|
|
$to : opposite-position($from);
|
||
|
|
margin-#{$to}: space($columns, $context, $style);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply 'columns' before and/or after an element to contain it on a grid.
|
||
|
|
//
|
||
|
|
// $pre : The number of columns to add as margin before.
|
||
|
|
// $post : The number of columns to add as margin after.
|
||
|
|
// $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 squish(
|
||
|
|
$pre : false,
|
||
|
|
$post : false,
|
||
|
|
$context : $total-columns,
|
||
|
|
$from : $from-direction,
|
||
|
|
$style : fix-static-misalignment()
|
||
|
|
) {
|
||
|
|
$from : unquote($from);
|
||
|
|
@if $pre {
|
||
|
|
@include pre($pre, $context, $from, $style)
|
||
|
|
}
|
||
|
|
@if $post {
|
||
|
|
@include post($post, $context, $from, $style)
|
||
|
|
}
|
||
|
|
}
|