123 lines
3.4 KiB
SCSS
123 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; }
|
|
p {
|
|
img.right {
|
|
@include float-left;
|
|
margin: 1.5em 1.5em 1.5em 0;
|
|
padding: 0; }
|
|
img.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; } }
|