105 lines
4.3 KiB
SCSS
105 lines
4.3 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>
|
|
//
|
|
// **Deprecated**:
|
|
// You can pass the body selector as the first argument when used as a top-level mixin
|
|
// <pre class="source-code sass">
|
|
// +blueprint-typography("body#page-1, body#page-2, body.a-special-page-type")
|
|
// </pre>
|
|
@mixin blueprint-typography($body-selector: body) {
|
|
@if $body-selector == true {
|
|
@include blueprint-typography-body;
|
|
@include blueprint-typography-defaults;
|
|
} @else {
|
|
#{$body-selector} {
|
|
@include blueprint-typography-body;
|
|
@if $body-selector != body {
|
|
@warn "[DEPRECATED] To specify the selector \"#{$body-selector}\" to +blueprint-typography, pass true as the first argument and mix it into #{$body-selector}.";
|
|
@include blueprint-typography-defaults;
|
|
}
|
|
}
|
|
@if $body-selector == 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;
|
|
img.left { @include float-left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
|
|
img.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 { font-weight: bold; }
|
|
em { font-style: italic; }
|
|
dfn { font-style: italic; font-weight: bold; }
|
|
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: 3.333em; }
|
|
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; }
|
|
tr.even td { background: $blueprint-table-stripe-color; }
|
|
tfoot { font-style: italic; }
|
|
caption { background: $blueprint_background_color; }
|
|
.quiet { @include quiet; }
|
|
.loud { @include loud; }
|
|
}
|