compass/frameworks/blueprint/stylesheets/blueprint/_rtl.scss
Chris Eppstein 3bee9df60a With a few minor deviations this is a port of blueprint commits:
commit 7522a25ab641264da4aebdc3e78cb2c5b253c939
Author: Christian Montoya <sirokai@gmail.com>
Date:   Fri Sep 17 11:52:34 2010 -0400

    Fixed lighthouse bugs, updated tests/index.html

commit 5459eddd7b2953a6b0b6d10e97d056019762874a
Author: Christian Montoya <sirokai@gmail.com>
Date:   Wed Sep 29 15:53:24 2010 -0400

    Fix for conflict between .right and .column/.span-X

Deviations:
I think it's incorrect to apply zebra striping to all tables. So
instead, you must opt in by applying the striped class to a table.
2010-11-12 10:56:52 -08:00

122 lines
3.4 KiB
SCSS

@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:
// <pre class="source-code sass">
// +rtl-typography
// </pre>
//
// Scoped by a presentational class:
// <pre class="source-code sass">
// body.blueprint
// +rtl-typography(true)
// </pre>
//
// Scoped by semantic selectors:
// <pre class="source-code sass">
// body#page-1, body#page-2, body.a-special-page-type
// +rtl-typography(true)
// </pre>
@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; } }