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.
91 lines
3.8 KiB
SCSS
91 lines
3.8 KiB
SCSS
@import "colors";
|
|
@import "compass/utilities/links/link-colors";
|
|
@import "compass/utilities/general/float";
|
|
|
|
$blueprint-font-family: "Helvetica Neue", Arial, Helvetica, sans-serif !default;
|
|
|
|
$blueprint-fixed-font-family: "andale mono", "lucida console", monospace !default;
|
|
|
|
$blueprint-font-size: 12px !default;
|
|
|
|
// Usage examples:
|
|
// As a top-level mixin, apply to any page that includes the stylesheet:
|
|
// <pre class="source-code sass">
|
|
// +blueprint-typography
|
|
// </pre>
|
|
//
|
|
// Scoped by a presentational class:
|
|
// <pre class="source-code sass">
|
|
// body.blueprint
|
|
// +blueprint-typography(true)
|
|
// </pre>
|
|
//
|
|
// Scoped by semantic selectors:
|
|
// <pre class="source-code sass">
|
|
// body#page-1, body#page-2, body.a-special-page-type
|
|
// +blueprint-typography(true)
|
|
// </pre>
|
|
@mixin blueprint-typography($nested: false) {
|
|
@if $nested {
|
|
@include blueprint-typography-body;
|
|
@include blueprint-typography-defaults;
|
|
} @else {
|
|
body { @include blueprint-typography-body; }
|
|
@include blueprint-typography-defaults;
|
|
}
|
|
}
|
|
|
|
@mixin normal-text { font-family: $blueprint-font-family; color: $font-color; }
|
|
@mixin fixed-width-text { font: 1em $blueprint-fixed-font-family; line-height: 1.5; }
|
|
@mixin header-text { font-weight: normal; color: $header-color; }
|
|
@mixin quiet { color: $quiet-color; }
|
|
@mixin loud { color: $loud-color; }
|
|
|
|
@mixin blueprint-typography-body($font-size: $blueprint-font-size) {
|
|
line-height: 1.5;
|
|
@include normal-text;
|
|
font-size: 100% * $font-size / 16px;
|
|
}
|
|
|
|
@mixin blueprint-typography-defaults {
|
|
#{headers(all)} { @include header-text;
|
|
img { margin: 0; } }
|
|
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.50em; }
|
|
h2 { font-size: 2em; margin-bottom: 0.75em; }
|
|
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1.00em; }
|
|
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
|
|
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.50em; }
|
|
h6 { font-size: 1em; font-weight: bold; }
|
|
p { margin: 0 0 1.5em;
|
|
.left { @include float-left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
|
|
.right { @include float-right; margin: 1.5em 0 1.5em 1.5em; padding: 0; } }
|
|
a { text-decoration: underline; @include link-colors($link-color, $link-hover-color, $link-active-color, $link-visited-color, $link-focus-color); }
|
|
blockquote { margin: 1.5em; color: $alt-text-color; font-style: italic; }
|
|
strong, dfn { font-weight: bold; }
|
|
em, dfn { font-style: italic; }
|
|
sup, sub { line-height: 0; }
|
|
abbr, acronym { border-bottom: 1px dotted #666666; }
|
|
address { margin: 0 0 1.5em; font-style: italic; }
|
|
del { color: $alt-text-color; }
|
|
pre { margin: 1.5em 0; white-space: pre; }
|
|
pre, code, tt { @include fixed-width-text; }
|
|
li ul, li ol { margin: 0; }
|
|
ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }
|
|
ul { list-style-type: disc; }
|
|
ol { list-style-type: decimal; }
|
|
dl { margin: 0 0 1.5em 0;
|
|
dt { font-weight: bold; } }
|
|
dd { margin-left: 1.5em; }
|
|
table { margin-bottom: 1.4em; width: 100%; }
|
|
th { font-weight: bold; }
|
|
thead th { background: $blueprint-table-header-color; }
|
|
th, td, caption { padding: 4px 10px 4px 5px; }
|
|
table.striped tr:nth-child(even) td,
|
|
table tr.even td
|
|
{ background: $blueprint-table-stripe-color; }
|
|
tfoot { font-style: italic; }
|
|
caption { background: $blueprint-background-color; }
|
|
.quiet { @include quiet; }
|
|
.loud { @include loud; }
|
|
}
|