@import "grid"; @import "compass/utilities/general/float"; // Main layout grid, override these constants to build your grid and container sizes. $blueprint-grid-columns: 24 !default; $blueprint-grid-width: 30px !default; $blueprint-grid-margin: 10px !default; $blueprint-grid-outer-width: $blueprint-grid-width + $blueprint-grid-margin; $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns - $blueprint-grid-margin; // Columns // Note: If you use this mixin without the class and want to support ie6 // you must set text-align left on your container element in an IE stylesheet. @mixin container { width: $blueprint-container-size; margin: 0 auto; direction: rtl; @include clearfix; } // The last column in a row needs this mixin or it will end up on the next row. // TODO add this to span mixin when we have optional arguments @mixin last { margin-left: 0; } @mixin column-base($last: false) { @include float-right; @if $last { @include last; } @else { margin-left: $blueprint-grid-margin; } text-align: right; * html & { overflow-x: hidden; } } // Mixin to a column to append n empty cols. @mixin append($n) { padding-left: $blueprint-grid-outer-width * $n; } // Mixin to a column to prepend n empty cols. @mixin prepend($n) { padding-right: $blueprint-grid-outer-width * $n; } // mixin to a column to move it n columns to the left @mixin pull($n, $last: false) { position: relative; @if $last { margin-right: -$blueprint-grid-outer-width * $n + $blueprint-grid-margin; } @else { margin-right: -$blueprint-grid-outer-width * $n; } } // mixin to a column to push it n columns to the right @mixin push($n) { @include float-right; position: relative; margin: { top: 0; left: -$blueprint-grid-outer-width * $n; bottom: 1.5em; right: $blueprint-grid-outer-width * $n; }; } // Border on left hand side of a column. @mixin border { padding-left: $blueprint-grid-margin / 2 - 1; margin-left: $blueprint-grid-margin / 2; border-left: 1px solid #eeeeee; } // Border with more whitespace, spans one column. @mixin colborder { padding-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin - 1) / 2; margin-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin) / 2; border-left: 1px solid #eeeeee; } // Usage examples: // As a top-level mixin, apply to any page that includes the stylesheet: //
// +rtl-typography //// // Scoped by a presentational class: //
// body.blueprint // +rtl-typography(true) //// // Scoped by semantic selectors: //
// body#page-1, body#page-2, body.a-special-page-type // +rtl-typography(true) //@mixin rtl-typography($nested: false) { @if $nested { html & { font-family: Arial, sans-serif; } @include rtl-typography-defaults; } @else { html body { font-family: Arial, sans-serif; } body { @include rtl-typography-defaults; } } } @mixin rtl-typography-defaults { h1, h2, h3, h4, h5, h6 { font-family: Arial, sans-serif; } pre, code, tt { font-family: monospace; } .right { @include float-left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } .left { @include float-right; margin: 1.5em 0 1.5em 1.5em; padding: 0; } dd, ul, ol { margin-left: 0; margin-right: 1.5em; } td, th { text-align: right; } }