@import "settings"; @import "compass/css3"; @import "compass/utilities"; // SETUP MIXINS, FUNCTIONS, EXTENDS AND HELPER STYLES IN THIS FILE // Advanced typography settings // ------------------------------------------------------- // Get advanced with type if needed for ligatures etc... // Not using this currently, waiting for the design to come through @mixin advancedtype { //font-variant-ligatures: contextual; // Set the default for ligatures //-moz-font-feature-settings: "liga=1,dlig=1"; // Ligature settings for mozilla font-kerning : normal; // Set the default for kerning //-webkit-font-smoothing: antialiased; // Improve (or in some cases royally screw with) safari's legibility somewhat //font-synthesis: none; // Don't allow the font to create sythetic bold/italic //text-rendering: optimizeLegibility; // Improve kerning pairs. Webkit gets funny with this sometimes } // @mixin ellipsis($r : 1) { // overflow : hidden; // max-height : rhythm($r); // white-space : nowrap; // word-wrap : break-word; // -o-text-overflow : ellipsis; // text-overflow : ellipsis; // } // Retina images // ------------------------------------------------------- // Use with care - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { /* on retina, use image that's scaled by 2 */ background-image : url($image); background-size : $width $height; } } // HEX to RGB // ------------------------------------------------------- @mixin rgba($color, $value) { background-color : $color; background-color : rgba($color, $value); } // Retina Sprites for Compass // ------------------------------------------------------- /* by: Gaya Kessler * last update: 01/14/13 * * Usage: * 1. create two folders in your image directory (in this case 'icons' and 'icons-2x'). * 2. adjust the foldernames defined below if you use different names. * 3. create sprite images for pixel ratio 1 screens and put them in the first folder. * 4. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames. * 5. use the sprite-image in your Sass/Scss using: '@include use-sprite()' */ @mixin use-sprite($sprite) { background-image : sprite-url($icons); background-position : sprite-position($icons, $sprite); background-repeat : no-repeat; overflow : hidden; display : block; height : image-height(sprite-file($icons, $sprite)); width : image-width(sprite-file($icons, $sprite)); @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and ( min--moz-device-pixel-ratio: 1.3), only screen and ( -o-min-device-pixel-ratio: 1.3/1), only screen and ( min-device-pixel-ratio: 1.3), only screen and ( min-resolution: 125dpi), only screen and ( min-resolution: 1.3dppx) { background-image : sprite-url($icons-2x); background-size : (image-width(sprite-path($icons-2x)) / 2) (image-height(sprite-path($icons-2x)) / 2); background-position : round(nth(sprite-position($icons-2x, $sprite), 1) / 2) round(nth(sprite-position($icons-2x, $sprite), 2) / 2); height : image-height(sprite-file($icons-2x, $sprite)) / 2; width : image-width(sprite-file($icons-2x, $sprite)) / 2; } } // Functions for px to em conversions // ------------------------------------------------------------ @function strip-units($value) { @return $value / ($value * 0 + 1); } @function emify($target, $context) { @if $target == 0 { @return 0 } @return ($target / $context) + 0em; } // Make px to ems using base-font-size // echo as: font-size: em-calc(#px); @function em-calc($target, $context: $fs-default) { @return emify($target, $context); } @function lh-calc($target, $font-size: $fs-default) { @return strip-units(emify($target, $font-size)); } @function col-calc($col) { @return (100% / $cols) * $col; } // Image helpers // ------------------------------------------------------------ // Max-width for images in responsive web-design .max-width { max-width: 100%; height: auto; } // Layout helpers // ------------------------------------------------------------ // Shortcuts for common layout styles (such as padding, margin and other commonly used styles) @mixin proper-clearfix { &:before, &:after { content: " "; /* 1 */ display: table; /* 2 */ } &:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; } @mixin centered-by-margin { margin-left: auto; margin-right: auto; } // Wrapper that clears around floating elements. // If you want a wrapper that only clears from a certain breakpoint use .wrapper{em}, // where em is replaced by the breakpoint in em's. // Example: .wrapper40 will only clear from 40em and up. .wrapper { @include proper-clearfix; } // Disable clearing @mixin no-proper-clearfix { &:before, &:after { display: none; clear: none; } } // Works the same as the wrappers. Example: .nowrapper40 will stop clearing from 40em and up. .nowrapper { @include no-proper-clearfix; } // Filthy clearing (insert an HTML element that clears everything below it) // Only use this when ABSOLUTELY neccesary (use @include proper-clearfix where possible) .clear-old { width: 0; height: 0; visibility: hidden; line-height: 0; } // Don't need to explain, right? .position-relative { position: relative; } @mixin padding-horizontal ($amount: $default-spacing) { padding-left: $amount; padding-right: $amount; } @mixin static-padding-horizontal { @include padding-horizontal($default-spacing-static); } @mixin no-padding-horizontal { @include padding-horizontal(0); } @mixin no-padding-vertical { @include padding-vertical(0); } @mixin padding-vertical ($amount: $default-spacing) { padding-top: $amount; padding-bottom: $amount; } @mixin margin-horizontal ($amount: $default-spacing) { margin-left: $amount; margin-right: $amount; } @mixin static-margin-horizontal () { @include margin-horizontal($default-spacing-static); } @mixin no-margin-horizontal { @include margin-horizontal(0); } @mixin no-margin-vertical { @include margin-vertical(0); } @mixin margin-vertical ($amount: $default-spacing) { margin-top: $amount; margin-bottom: $amount; } .push-top { margin-top: em-calc($lh-default); } .push-bottom { margin-bottom: em-calc($lh-default); } // State helpers // ------------------------------------------------------------ .is-uppercase { text-transform: uppercase; } // List helpers // ------------------------------------------------------------ .unstyled { // Use this with an @extend (doesn't work inside media queries) list-style-type: none; padding-left: 0; } @mixin unordered { list-style-position: outside; list-style-type: disc; } @mixin unordered-inside { list-style-position: inside; list-style-type: disc; } @mixin ordered { list-style-position: outside; list-style-type: decimal; } @mixin ordered-inside { list-style-position: inside; list-style-type: decimal; } @mixin nobullet { list-style-type: none; } // Super duper filthy (but working) mixin that quickly lets list items to float over the full width of the parent // You use this as a mixin for the parent (most likely an