// /** // * 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 for modules: sides // ========================================================================== // Applies margin, padding, border, outline // // @param $values: an array of 1 or 4 values // @param $property: a string (e.g. padding, margin, or border) // ========================================================================== @mixin sides($values, $property) { $length: length($values); // ** // Do not accept arrays of 2 and 3 // ** @if $length==2 or $length==3 { @warn "Wrong value for first parameter: mixin accepts either a single value or an array of four values."; } @if $length==1 { @include module-property($values, $property); } @if $length==4 { $compact: true; @each $value in $values { @if $value==false { $compact: false; } } @if $compact { @if nth($values, index($sides, top))==nth($values, index($sides, bottom)) and nth($values, index($sides, right))==nth($values, index($sides, left)) { #{$property}: nth($values,1) nth($values,2); } @else { @include module-property($values, $property); } } @else { @each $value in $values { @if $value { $i: index($values, $value); $side: padding-#{nth($sides,$i)}; @include module-property($value, $side); } } } } } // ========================================================================== // Mixin for modules: properties // ========================================================================== // Applies margin, padding, border, outline // // @param $values: a single value // @param $property: a string (e.g. padding, margin-left, border-color) or false if nothing should be compiled // ========================================================================== @mixin module-property($values, $property) { @if $values { #{$property}: $values; } } // ========================================================================== // Mixin for modules: display // ========================================================================== // // @param $values: a list of display and vertical-align or false if nothing should be compiled // ========================================================================== @mixin module-display($values) { @if $values { $display: nth($values,1); $vertical-align: nth($values,1); @if $display==inline-block { @include inline-block($vertical-align); } @else { @if $display { @include module-property($display, display); } @if $vertical-align { @include module-property($vertical-align, vertical-align); } } } } // ========================================================================== // Mixin for modules: margin (placeholder for sides()) // ========================================================================== // Accepts either a single value represetning all four sides, // or a list of four values representing each individual side // // @param $values: a list of 1 or 4 width values or false if nothing should be compiled // ========================================================================== @mixin module-margin($margin) { @if $margin { @include sides($margin, margin); } } // ========================================================================== // Mixin for modules: padding (placeholder for sides()) // ========================================================================== // Accepts either a single value represetning all four sides, // or a list of four values representing each individual side // // @param $values: a list of 1 or 4 width values or false if nothing should be compiled // ========================================================================== @mixin module-padding($padding) { @if $padding { @include sides($padding, padding); } } // ========================================================================== // Mixin button border (placeholder for sides) // ========================================================================== // Accepts a list of three values representing width, style and color // // @param $values: a list of properties (width, style, color) or false if nothing should be compiled // ========================================================================== @mixin module-border($border) { $length: length($border); @if $length>1 { $width: nth($border,1); $style: nth($border,2); $color: nth($border,3); @if $width { border-width: $width; } @if $style { border-style: $style; } @if $color { border-color: $color; } } @else { @if $border { @include module-property(#{$border}, border); } } } // ========================================================================== // Mixin for modules: border radius // ========================================================================== // Accepts a list of up to four values representing all four corners // // @param $corner-radius: a list of width values or false if nothing should be compiled // ========================================================================== @mixin module-border-radius($corner-radius) { @if $corner-radius { @include border-radius($corner-radius); } } // ========================================================================== // Mixin for modules: outline (placeholder for sides()) // ========================================================================== // Accepts either a single value represetning all four sides, // or a list of four values representing each individual side // // @param $values: a list of 1 or 4 width values or false if nothing should be compiled // ========================================================================== @mixin module-outline($outline, $outline-offset: false) { @if $outline { @include sides($outline, outline); } @if $outline-offset { outline-offset: $outline-offset; } } // ========================================================================== // Mixin for modules: box-shadow (placeholder for box-shadow) // ========================================================================== // a valid box-shadow notation is: inset|outset offset-x offset-y blur color // // @param $shadow: a (list of) valid shadow notation(s) or false if nothing should be compiled // ========================================================================== @mixin module-shadow($shadow) { @if $shadow { @include box-shadow($shadow); } } // ========================================================================== // Mixin for modules: background // ========================================================================== // // @param $background: a list of properties (background-color, background-image) or false if nothing should be compiled // ========================================================================== @mixin module-background($background) { @if $background { $background-color: nth($background,1); $background-image: nth($background,2); @if $background-color { background-color: $background-color; } @if $background-image { @include background-image($background-image); } } } // ========================================================================== // Mixin for modules: text // ========================================================================== // // @param $text // ========================================================================== @mixin module-text($text) { @if $text { $align: nth($text,1); $decoration: nth($text,2); $shadow: nth($text,3); @if $align { @include module-property($align, text-align); } @if $decoration { @include module-property($decoration, text-decoration); } @if $shadow { @include text-shadow($shadow); } } } // ========================================================================== // Mixin for modules: text-shadow // ========================================================================== // // @param $shadow // ========================================================================== @mixin module-text-shadow($shadow) { @if $shadow { @include text-shadow($shadow); } } // ========================================================================== // Mixin for modules: type // ========================================================================== // // @param $type: a list of properties (type, font-size, leading) or false if nothing should be compiled // ========================================================================== @mixin module-type($type) { @if $type { $type-size: nth($type,2); $type-rhythm: if(nth($type,3), nth($type,3), 1); $type: nth($type,1); @if $type-size and $type-size!=$base-font-size { @include adjust-font-size-to($type-size, $type-rhythm); } @if extract-type-style($type) != extract-type-style($type-default) { @include font-style($type); } @if extract-type-variant($type) != extract-type-variant($type-default) { @include font-variant($type); } @if extract-type-weight($type) != extract-type-weight($type-default) { @include font-weight($type); } @if extract-type-family($type) != extract-type-family($type-default) { @include font-family($type); } } }