// /** // * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved. // * Licensed under GNU General Public License version 2 or later; see LICENSE.txt // */ @if $trace-imports { @debug 'imported'; } // ========================================================================== // Mixin column behavior // -------------------------------------------------------------------------- // @param (boolean) $apply-border-box // @param (boolean) $column-float // ========================================================================== @mixin column-behavior($apply-border-box: $apply-border-box, $column-float: $column-float) { @if $column-float { display: block; float: left; } @else { @include inline-block(top); @if $negative-right-margin { margin-right: $negative-right-margin !important; } } @if $apply-border-box { @include box-sizing('border-box'); } } // ========================================================================== // Mixin column width // -------------------------------------------------------------------------- // @param (string) $fraction // @param (boolean) $persistent // ========================================================================== @mixin column-width($fraction: $column-width-default, $persistent: false) { @if $persistent { width: fraction-to-percentage($fraction) !important; } @else { width: fraction-to-percentage($fraction); @if $column-breakpoint { @include breakpoint( $column-breakpoint ) { width: 100%; } } } // /* // *Remove negative margin on elements that span full width of their container // */ @if $fraction == 1/1 and $negative-right-margin { margin-right: 0; } } // ========================================================================== // Mixin column spacing // -------------------------------------------------------------------------- // Uses padding by default, can be overridden to use margins instead, // this is especially helpful when assigning backgrounds or borders // -------------------------------------------------------------------------- // @param (string) $fraction // @param (boolean) $use-margin // @param (boolean) $persistent // ========================================================================== @mixin column-spacing($fraction: 1/2, $use-margin: false, $persistent: $column-spacing-persistent) { @if ($use-margin) { margin-left: horizontal-rhythm($fraction); margin-right: horizontal-rhythm($fraction); @if $persistent == false { @if $column-breakpoint { @include breakpoint( $column-breakpoint ) { margin-left: horizontal-rhythm($fraction/2); margin-right: horizontal-rhythm($fraction/2); } } } } @else { padding-left: horizontal-rhythm($fraction); padding-right: horizontal-rhythm($fraction); @if $persistent == false { @if $column-breakpoint { @include breakpoint( $column-breakpoint ) { padding-left: horizontal-rhythm($fraction/2); padding-right: horizontal-rhythm($fraction/2); } } } } } // ========================================================================== // Shorthand mixin for column // -------------------------------------------------------------------------- // Uses padding by default, can be overridden to use margins instead, // this is especially helpful when assigning backgrounds or borders // -------------------------------------------------------------------------- // @param (string) $fraction // @param (boolean) $persistent // @param (boolean) $apply-padding // @param (boolean) $apply-margin // ========================================================================== @mixin column($fraction: 1/1, $persistent: false, $apply-padding: 1/2, $apply-margin: false) { @include column-behavior(); @include column-width($fraction, $persistent); @if $apply-padding { @include column-spacing($apply-padding); } @if $apply-margin { @include column-spacing($apply-margin, true); } } // ========================================================================== // Shorthand mixin for column // -------------------------------------------------------------------------- // Fixes content width and centers in viewport. // -------------------------------------------------------------------------- // @param (string) $root-max-width // @param (boolean) $set-display // ========================================================================== @mixin root($root-max-width: $root-max-width, $set-display: false) { @if $set-display { display: block; } @if $root-position==center { margin: 0 auto; } max-width: $root-max-width; } // ========================================================================== // Mixin for column container // -------------------------------------------------------------------------- // Use it to remove column spacing on columns // -------------------------------------------------------------------------- // @param (boolean) $use-margin // ========================================================================== @mixin container-behavior($use-margin: false) { @if $use-margin { margin-left: 0; margin-right: 0; } @else { padding-left: 0; padding-right: 0; } } // ========================================================================== // Mixin for soure ordering // -------------------------------------------------------------------------- // @param (string) $fraction // ========================================================================== @mixin move($fraction) { position: relative; left: fraction-to-percentage($fraction); } // ========================================================================== // Mixin for soure ordering // Will reset positioning if $persistent is false // // @param (string) $fraction // @param (boolean) $persistent // ========================================================================== @mixin push($fraction, $persistent: false) { @include move($fraction); @if $persistent == false { @extend %reset-source-order; } } // ========================================================================== // Mixin for soure ordering // Will reset positioning if $persistent is false // // @param (string) $fraction // @param (boolean) $persistent // ========================================================================== @mixin pull($fraction, $persistent: false) { @include move(-1*$fraction); @if $persistent == false { @extend %reset-source-order; } } // ========================================================================== // Mixin for soure ordering // Will reset positioning for smallest breakpoint. // // @param (string) $fraction // @param (boolean) $persistent // ========================================================================== @mixin reset-source-order { @if $column-breakpoint { @include breakpoint( $column-breakpoint ) { position: static; position: initial; } } } // ========================================================================== // Mixin to reverse padding on a container // -------------------------------------------------------------------------- // Use it to remove padded column spacing on columns, // helpful when nesting columns // -------------------------------------------------------------------------- // @param (string) $fraction // @param (boolean) $persistent // ========================================================================== @mixin bleed($fraction: -1/2, $persistent: false) { @include column-spacing($fraction, true); }