3bee9df60a
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.
122 lines
3.4 KiB
SCSS
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; } }
|