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.
312 lines
8.8 KiB
312 lines
8.8 KiB
// --------------------------------------------------------------------------- |
|
// Imports |
|
|
|
@import "compass/utilities/general/clearfix"; |
|
@import "compass/css3/box-sizing"; |
|
|
|
// --------------------------------------------------------------------------- |
|
// Border-Box Sizing |
|
|
|
// Apply the border-box sizing model to all elements |
|
// and adjust the grid math appropriately. |
|
@mixin border-box-sizing { |
|
$border-box-sizing: true !global; |
|
* { @include box-sizing(border-box); } |
|
} |
|
|
|
// --------------------------------------------------------------------------- |
|
// Container |
|
|
|
// Set the width of a container |
|
// |
|
// $columns : The number of columns in the Grid Layout. |
|
@mixin set-container-width( |
|
$columns : $total-columns, |
|
$style : $container-style, |
|
$px-vals : $pixel-values-only |
|
){ |
|
$width: container-outer-width($columns); |
|
|
|
@if $style == 'static' { |
|
@if $px-vals == true { |
|
width: round(convert-length($width, px)); |
|
} @else { |
|
@include rem(width, $width); |
|
} |
|
} @else { |
|
@if $style == 'fluid' { |
|
@if unit($width) == '%' { |
|
@if $px-vals == true { |
|
width: round(convert-length($width, px)); |
|
} @else { |
|
@include rem(width, $width); |
|
} |
|
} |
|
} @else { |
|
@if $px-vals == true { |
|
max-width: round(convert-length($width, px)); |
|
} @else { |
|
@include rem(max-width, $width); |
|
} |
|
|
|
@include for-legacy-browser(ie,"6") { |
|
@if unit($width) == 'rem' { |
|
_width: round(convert-length($width, px)); |
|
} @else { |
|
_width: $width; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Set the outer grid-containing element(s). |
|
// |
|
// $columns : The number of columns in the container. |
|
@mixin apply-container( |
|
$columns : $total-columns, |
|
$px-vals : $pixel-values-only |
|
){ |
|
@include pie-clearfix; |
|
@include set-container-width($columns); |
|
@if $px-vals == true { |
|
padding-left: round(convert-length($grid-padding, px)); |
|
padding-right: round(convert-length($grid-padding, px)); |
|
} @else { |
|
@include rem(padding-left, $grid-padding); |
|
@include rem(padding-right, $grid-padding); |
|
} |
|
margin: { left: auto; right: auto; } |
|
} |
|
|
|
// Set one or more layouts on a grid-containing element at any number of media-query breakpoints. |
|
// |
|
// $media-layout-1 : [default:$total-columns] A list of values including - |
|
// : One unitless number (representing columns in a layout) |
|
// : Two optional lengths (representing min and max-width media-query breakpoints). |
|
// $media-layout-2 ...-10 : [optional] Same as $media-layout-1 |
|
@mixin container( |
|
$media-layouts... |
|
){ |
|
$media-layouts: if(length($media-layouts) > 0, $media-layouts, $total-columns); |
|
|
|
@each $ml in $media-layouts { |
|
@if is-default-layout($ml) { |
|
@include apply-container; |
|
} @else { |
|
@include at-breakpoint($ml) { |
|
@include apply-container; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// --------------------------------------------------------------------------- |
|
// Columns |
|
|
|
// Create a grid element spanning any number of 'columns' in a grid 'context'. |
|
// $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. |
|
// $padding : [optional] Padding applied to the inside of individual grid columns. |
|
// : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px) |
|
// : Padding values are applied only on the horizontal axis in from-to order |
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
|
// $style : The container style to use. |
|
@mixin span-columns( |
|
$columns, |
|
$context : $total-columns, |
|
$padding : false, |
|
$from : $from-direction, |
|
$style : fix-static-misalignment() |
|
) { |
|
$from : unquote($from); |
|
$to : opposite-position($from); |
|
$pos : split-columns-value($columns,position); |
|
$cols : split-columns-value($columns,columns); |
|
$pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); |
|
$pad-to : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); |
|
|
|
@if $padding != false { |
|
$pad-from : nth($padding, 1); |
|
|
|
@if length($padding) > 1 { |
|
$pad-to: nth($padding, 2); |
|
} @else { |
|
$pad-to: $pad-from; |
|
} |
|
|
|
$pad-from : if($style == static, $pad-from, relative-width($pad-from, $context)); |
|
$pad-to : if($style == static, $pad-to, relative-width($pad-to, $context)); |
|
|
|
padding-#{$from}: $pad-from; |
|
padding-#{$to}: $pad-to; |
|
} |
|
|
|
width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from); |
|
|
|
@if ($pos == 'omega') { |
|
@include omega($from); |
|
} @else { |
|
float: $from; |
|
margin-#{$to}: gutter($context, $style); |
|
@include for-legacy-browser(ie, "6") { |
|
display: inline; |
|
} |
|
} |
|
} |
|
|
|
// Apply to elements spanning the last column, to account for the page edge. |
|
// Only needed as an override. Normally 'omega' can just be called by `columns`. |
|
// |
|
// $from : The start-direction for your document. |
|
@mixin omega( |
|
$from : $from-direction |
|
) { |
|
$from : unquote($from); |
|
$to : opposite-position($from); |
|
$hack : opposite-position($omega-float); |
|
|
|
float: $omega-float; |
|
margin-#{$to}: 0; |
|
|
|
@include for-legacy-browser(ie, "6", "7") { |
|
*margin-#{$hack}: - $gutter-width; |
|
@include for-legacy-browser(ie, "6") { |
|
display: inline; |
|
} |
|
} |
|
} |
|
|
|
// Shortcut to apply omega to a specific subset of elements. |
|
// |
|
// $n : [first | only | last | <equation>] |
|
// $selector : [child | last-child | of-type | last-of-type ] |
|
// $from : The start-direction for your document. |
|
@mixin nth-omega( |
|
$n : last, |
|
$selector : child, |
|
$from : $from-direction |
|
) { |
|
$from : unquote($from); |
|
|
|
&:#{format-nth($n,$selector)} { |
|
@if $n == "first" { |
|
@include omega($from); |
|
} @else { |
|
@include with-browser-ranges(css-sel3) { |
|
@include omega($from); |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
// --------------------------------------------------------------------------- |
|
// Resets |
|
|
|
// Reset a '+columns' grid element to default block behavior |
|
// |
|
// $from : The start direction of your layout (e.g. 'left' for ltr languages) |
|
@mixin reset-columns( |
|
$from: $from-direction |
|
) { |
|
$from : unquote($from); |
|
$to : opposite-position($from); |
|
$hack : opposite-position($omega-float); |
|
|
|
float: none; |
|
width: auto; |
|
margin-#{$to}: auto; |
|
|
|
@include for-legacy-browser(ie, "6", "7") { |
|
*margin-#{$hack}: auto; |
|
@include for-legacy-browser(ie, "6") { |
|
display: block; |
|
} |
|
} |
|
} |
|
|
|
// Apply to elements previously set as omega. |
|
// This will return floats and margins back to non-omega settigns. |
|
// |
|
// $context : [optional] The context (columns spanned by parent). |
|
// $from : The start-direction for your document. |
|
// $style : The container style to use. |
|
@mixin remove-omega( |
|
$context : $total-columns, |
|
$from : $from-direction, |
|
$style : fix-static-misalignment() |
|
) { |
|
$from : unquote($from); |
|
$to : opposite-position($from); |
|
$hack : opposite-position($omega-float); |
|
|
|
float: $from; |
|
margin-#{$to}: gutter($context, $style); |
|
|
|
@include for-legacy-browser(ie, "6", "7") { |
|
*margin-#{$hack}: auto; |
|
} |
|
} |
|
|
|
// Shortcut to apply remove-omega to a specific subset of elements. |
|
// |
|
// $n : [first | only | last | <equation>] |
|
// $selector : [child | last-child | of-type | last-of-type ] |
|
// $context : [optional] The context (columns spanned by parent). |
|
// $from : The start-direction for your document. |
|
// $style : The container style to use. |
|
@mixin remove-nth-omega( |
|
$n : last, |
|
$selector : child, |
|
$context : $total-columns, |
|
$from : $from-direction, |
|
$style : fix-static-misalignment() |
|
) { |
|
$from : unquote($from); |
|
|
|
&:#{format-nth($n,$selector)} { |
|
@if $n == "first" { |
|
@include remove-omega($context, $from, $style); |
|
} @else { |
|
@include with-browser-ranges(css-sel3) { |
|
@include remove-omega($context, $from, $style); |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// --------------------------------------------------------------------------- |
|
// Change Settings |
|
|
|
@mixin with-grid-settings( |
|
$columns: $total-columns, |
|
$width: $column-width, |
|
$gutter: $gutter-width, |
|
$padding: $grid-padding |
|
) { |
|
// keep the defaults around |
|
$default-columns: $total-columns; |
|
$default-width: $column-width; |
|
$default-gutter: $gutter-width; |
|
$default-padding: $grid-padding; |
|
|
|
// use the new settings |
|
$total-columns: $columns !global; |
|
$column-width: $width !global; |
|
$gutter-width: $gutter !global; |
|
$grid-padding: $padding !global; |
|
|
|
// apply to contents |
|
@content; |
|
|
|
// re-instate the defaults |
|
$total-columns: $default-columns !global; |
|
$column-width: $default-width !global; |
|
$gutter-width: $default-gutter !global; |
|
$grid-padding: $default-padding !global; |
|
}
|
|
|