[Blueprint] Convert to SCSS
This commit is contained in:
Chris Eppstein
parent
304438fbc5
commit
f7abcb4b98
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint.sass to: @import \"blueprint\""
|
||||
@import blueprint.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/buttons.sass to: @import \"blueprint/buttons\""
|
||||
@import blueprint/buttons.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/colors.sass to: @import \"blueprint/colors\""
|
||||
@import blueprint/colors.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/debug.sass to: @import \"blueprint/debug\""
|
||||
@import blueprint/debug.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/fancy_type.sass to: @import \"blueprint/fancy-type\""
|
||||
@import blueprint/fancy-type.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/form.sass to: @import \"blueprint/form\""
|
||||
@import blueprint/form.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/grid.sass to: @import \"blueprint/grid\""
|
||||
@import blueprint/grid.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/ie.sass to: @import \"blueprint/ie\""
|
||||
@import blueprint/ie.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/interaction.sass to: @import \"blueprint/interaction\""
|
||||
@import blueprint/interaction.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/link_icons.sass to: @import \"blueprint/link-icons\""
|
||||
@import blueprint/link-icons.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/liquid.sass to: @import \"blueprint/liquid\""
|
||||
@import blueprint/liquid.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/print.sass to: @import \"blueprint/print\""
|
||||
@import blueprint/print.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/reset.sass to: @import \"blueprint/reset\""
|
||||
@import blueprint/reset.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/rtl.sass to: @import \"blueprint/rtl\""
|
||||
@import blueprint/rtl.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/scaffolding.sass to: @import \"blueprint/scaffolding\""
|
||||
@import blueprint/scaffolding.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: blueprint/screen.sass will be removed. Please @import \"blueprint\" instead."
|
||||
@import blueprint.sass
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/utilities.sass to: @import \"blueprint/utilities\""
|
||||
@import blueprint/utilities.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/buttons.sass to: @import \"blueprint/buttons\""
|
||||
@import blueprint/buttons.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/colors.sass to: @import \"blueprint/colors\""
|
||||
@import blueprint/colors.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/debug.sass to: @import \"blueprint/debug\""
|
||||
@import blueprint/debug.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/fancy_type.sass to: @import \"blueprint/fancy-type\""
|
||||
@import blueprint/fancy-type.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/form.sass to: @import \"blueprint/form\""
|
||||
@import blueprint/form.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/grid.sass to: @import \"blueprint/grid\""
|
||||
@import blueprint/grid.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/interaction.sass to: @import \"blueprint/interaction\""
|
||||
@import blueprint/interaction.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/link_icons.sass to: @import \"blueprint/link-icons\""
|
||||
@import blueprint/link-icons.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/liquid.sass to: @import \"blueprint/liquid\""
|
||||
@import blueprint/liquid.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/reset.sass to: @import \"blueprint/reset\""
|
||||
@import blueprint/reset.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/rtl.sass to: @import \"blueprint/rtl\""
|
||||
@import blueprint/rtl.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/scaffolding.sass to: @import \"blueprint/scaffolding\""
|
||||
@import blueprint/scaffolding.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/typography.sass to: @import \"blueprint/typography\""
|
||||
@import blueprint/typography.scss
|
||||
@ -0,0 +1,2 @@
|
||||
@warn "DEPRECATED: Please change your @import of blueprint/modules/utilities.sass to: @import \"blueprint/utilities\""
|
||||
@import blueprint/utilities.scss
|
||||
@ -1,38 +0,0 @@
|
||||
@import blueprint/colors.sass
|
||||
@import blueprint/grid.sass
|
||||
@import blueprint/typography.sass
|
||||
@import blueprint/utilities.sass
|
||||
@import blueprint/form.sass
|
||||
@import blueprint/interaction.sass
|
||||
@import blueprint/debug.sass
|
||||
@import blueprint/print.sass
|
||||
@import blueprint/ie.sass
|
||||
|
||||
//
|
||||
### Usage examples:
|
||||
|
||||
As a top-level mixin, apply to any page that includes the stylesheet:
|
||||
+blueprint
|
||||
|
||||
Scoped by a presentational class:
|
||||
body.blueprint
|
||||
+blueprint(true)
|
||||
|
||||
Scoped by semantic selectors:
|
||||
body#page-1, body#page-2, body.a-special-page-type
|
||||
+blueprint(true)
|
||||
|
||||
#### Deprecated:
|
||||
You use to be able to pass the body selector as the first argument when used as a top-level mixin
|
||||
+blueprint("body#page-1, body#page-2, body.a-special-page-type")
|
||||
=blueprint(!body_selector = "body")
|
||||
//@doc off
|
||||
@if not (!body_selector == "body" or !body_selector == true)
|
||||
@warn "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint, pass true as the first argument and mix it into #{!body_selector}."
|
||||
//@doc on
|
||||
+blueprint-typography(!body_selector)
|
||||
+blueprint-utilities
|
||||
+blueprint-grid
|
||||
+blueprint-debug
|
||||
+blueprint-interaction
|
||||
+blueprint-form
|
||||
38
frameworks/blueprint/stylesheets/_blueprint.scss
Normal file
38
frameworks/blueprint/stylesheets/_blueprint.scss
Normal file
@ -0,0 +1,38 @@
|
||||
@import "blueprint/colors";
|
||||
@import "blueprint/grid";
|
||||
@import "blueprint/typography";
|
||||
@import "blueprint/utilities";
|
||||
@import "blueprint/form";
|
||||
@import "blueprint/interaction";
|
||||
@import "blueprint/debug";
|
||||
@import "blueprint/print";
|
||||
@import "blueprint/ie";
|
||||
|
||||
// ### Usage examples:
|
||||
//
|
||||
// As a top-level mixin, apply to any page that includes the stylesheet:
|
||||
// +blueprint
|
||||
//
|
||||
// Scoped by a presentational class:
|
||||
// body.blueprint
|
||||
// +blueprint(true)
|
||||
//
|
||||
// Scoped by semantic selectors:
|
||||
// body#page-1, body#page-2, body.a-special-page-type
|
||||
// +blueprint(true)
|
||||
//
|
||||
// #### Deprecated:
|
||||
// You use to be able to pass the body selector as the first argument when used as a top-level mixin
|
||||
// +blueprint("body#page-1, body#page-2, body.a-special-page-type")
|
||||
|
||||
@mixin blueprint($body_selector: body) {
|
||||
//@doc off
|
||||
@if not ($body_selector == "body" or $body_selector == true) {
|
||||
@warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\" to +blueprint, pass true as the first argument and mix it into #{$body_selector}."; }
|
||||
//@doc on
|
||||
@include blueprint-typography($body_selector);
|
||||
@include blueprint-utilities;
|
||||
@include blueprint-grid;
|
||||
@include blueprint-debug;
|
||||
@include blueprint-interaction;
|
||||
@include blueprint-form; }
|
||||
@ -1,84 +0,0 @@
|
||||
@import compass/css3/inline_block
|
||||
@import compass/utilities/general/float
|
||||
|
||||
// Button Font
|
||||
!blueprint_button_font_family ||= "\"Lucida Grande\", Tahoma, Arial, Verdana, sans-serif"
|
||||
|
||||
// Default Button Colors
|
||||
!blueprint_button_border_color ||= #DEDEDE
|
||||
!blueprint_button_background_color ||= #F5F5F5
|
||||
!blueprint_button_font_color ||= #565656
|
||||
|
||||
// Default Button Hover Colors
|
||||
!blueprint_button_hover_border_color ||= #C2E1EF
|
||||
!blueprint_button_hover_background_color ||= #DFF4FF
|
||||
!blueprint_button_hover_font_color ||= #336699
|
||||
|
||||
// Default Button Active Colors
|
||||
!blueprint_button_active_border_color ||= #6299C5
|
||||
!blueprint_button_active_background_color ||= #6299C5
|
||||
!blueprint_button_active_font_color ||= #FFF
|
||||
|
||||
//**
|
||||
Sets the colors for a button
|
||||
@param border_highlight_color
|
||||
The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
|
||||
=button-colors(!font_color = !blueprint_button_font_color, !bg_color = !blueprint_button_background_color, !border_color = !blueprint_button_border_color, !border_highlight_color = !border_color + #101010)
|
||||
background-color= !bg_color
|
||||
border-color= !border_highlight_color !border_color !border_color !border_highlight_color
|
||||
color= !font_color
|
||||
|
||||
//**
|
||||
Sets the colors for a button in the active state
|
||||
@param border_highlight_color
|
||||
The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
|
||||
=button-active-colors(!font_color = !blueprint_button_active_font_color, !bg_color = !blueprint_button_active_background_color, !border_color = !blueprint_button_active_border_color, !border_highlight_color = !border_color + #101010)
|
||||
&:active
|
||||
+button-colors(!font_color, !bg_color, !border_color, !border_highlight_color)
|
||||
|
||||
//**
|
||||
Sets the colors for a button in the hover state.
|
||||
@param border_highlight_color
|
||||
The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
|
||||
=button-hover-colors(!font_color = !blueprint_button_hover_font_color, !bg_color = !blueprint_button_hover_background_color, !border_color = !blueprint_button_hover_border_color, !border_highlight_color = !border_color + #101010)
|
||||
&:hover
|
||||
+button-colors(!font_color, !bg_color, !border_color, !border_highlight_color)
|
||||
|
||||
=button-base(!float = false)
|
||||
@if !float
|
||||
display: block
|
||||
+float(!float)
|
||||
@else
|
||||
+inline-block
|
||||
margin: 0.7em 0.5em 0.7em 0
|
||||
border-width: 1px
|
||||
border-style: solid
|
||||
font-family= !blueprint_button_font_family
|
||||
font-size: 100%
|
||||
line-height: 130%
|
||||
text-decoration: none
|
||||
font-weight: bold
|
||||
cursor: pointer
|
||||
img
|
||||
margin: 0 3px -3px 0 !important
|
||||
padding: 0
|
||||
border: none
|
||||
width: 16px
|
||||
height: 16px
|
||||
float: none
|
||||
|
||||
|
||||
=anchor-button(!float = false)
|
||||
+button-base(!float)
|
||||
padding: 5px 10px 5px 7px
|
||||
|
||||
=button-button(!float = false)
|
||||
+button-base(!float)
|
||||
width: auto
|
||||
overflow: visible
|
||||
padding: 4px 10px 3px 7px
|
||||
&[type]
|
||||
padding: 4px 10px 4px 7px
|
||||
line-height: 17px
|
||||
*:first-child+html &[type]
|
||||
padding: 4px 10px 3px 7px
|
||||
89
frameworks/blueprint/stylesheets/blueprint/_buttons.scss
Normal file
89
frameworks/blueprint/stylesheets/blueprint/_buttons.scss
Normal file
@ -0,0 +1,89 @@
|
||||
@import "compass/css3/inline-block";
|
||||
@import "compass/utilities/general/float";
|
||||
|
||||
// Button Font
|
||||
$blueprint_button_font_family: unquote('"Lucida Grande", Tahoma, Arial, Verdana, sans-serif') !default;
|
||||
|
||||
// Default Button Colors
|
||||
$blueprint_button_border_color: #dedede !default;
|
||||
|
||||
$blueprint_button_background_color: #f5f5f5 !default;
|
||||
|
||||
$blueprint_button_font_color: #565656 !default;
|
||||
|
||||
// Default Button Hover Colors
|
||||
$blueprint_button_hover_border_color: #c2e1ef !default;
|
||||
|
||||
$blueprint_button_hover_background_color: #dff4ff !default;
|
||||
|
||||
$blueprint_button_hover_font_color: #336699 !default;
|
||||
|
||||
// Default Button Active Colors
|
||||
$blueprint_button_active_border_color: #6299c5 !default;
|
||||
|
||||
$blueprint_button_active_background_color: #6299c5 !default;
|
||||
|
||||
$blueprint_button_active_font_color: white !default;
|
||||
|
||||
//**
|
||||
// Sets the colors for a button
|
||||
// @param border_highlight_color
|
||||
// The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
|
||||
@mixin button-colors($font_color: $blueprint_button_font_color, $bg_color: $blueprint_button_background_color, $border_color: $blueprint_button_border_color, $border_highlight_color: $border_color + #101010) {
|
||||
background-color: $bg_color;
|
||||
border-color: $border_highlight_color $border_color $border_color $border_highlight_color;
|
||||
color: $font_color; }
|
||||
|
||||
//**
|
||||
// Sets the colors for a button in the active state
|
||||
// @param border_highlight_color
|
||||
// The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
|
||||
@mixin button-active-colors($font_color: $blueprint_button_active_font_color, $bg_color: $blueprint_button_active_background_color, $border_color: $blueprint_button_active_border_color, $border_highlight_color: $border_color + #101010) {
|
||||
&:active {
|
||||
@include button-colors($font_color, $bg_color, $border_color, $border_highlight_color); } }
|
||||
|
||||
//**
|
||||
// Sets the colors for a button in the hover state.
|
||||
// @param border_highlight_color
|
||||
// The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
|
||||
@mixin button-hover-colors($font_color: $blueprint_button_hover_font_color, $bg_color: $blueprint_button_hover_background_color, $border_color: $blueprint_button_hover_border_color, $border_highlight_color: $border_color + #101010) {
|
||||
&:hover {
|
||||
@include button-colors($font_color, $bg_color, $border_color, $border_highlight_color); } }
|
||||
|
||||
@mixin button-base($float: false) {
|
||||
@if $float {
|
||||
display: block;
|
||||
@include float($float); }
|
||||
@else {
|
||||
@include inline-block; }
|
||||
margin: 0.7em 0.5em 0.7em 0;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
font-family: $blueprint_button_font_family;
|
||||
font-size: 100%;
|
||||
line-height: 130%;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
img {
|
||||
margin: 0 3px -3px 0 !important;
|
||||
padding: 0;
|
||||
border: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
float: none; } }
|
||||
|
||||
@mixin anchor-button($float: false) {
|
||||
@include button-base($float);
|
||||
padding: 5px 10px 5px 7px; }
|
||||
|
||||
@mixin button-button($float: false) {
|
||||
@include button-base($float);
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
padding: 4px 10px 3px 7px;
|
||||
&[type] {
|
||||
padding: 4px 10px 4px 7px;
|
||||
line-height: 17px; }
|
||||
*:first-child+html &[type] {
|
||||
padding: 4px 10px 3px 7px; } }
|
||||
@ -1,33 +0,0 @@
|
||||
!font_color ||= #333
|
||||
!quiet_color ||= !font_color + #333
|
||||
!loud_color ||= !font_color - #222
|
||||
|
||||
!header_color ||= !font_color - #111
|
||||
|
||||
!link_color ||= #009
|
||||
!link_hover_color ||= #000
|
||||
!link_focus_color ||= !link_hover_color
|
||||
!link_active_color ||= !link_color + #C00
|
||||
!link_visited_color ||= !link_color - #333
|
||||
|
||||
!feedback_border_color ||= #DDD
|
||||
!success_color ||= #264409
|
||||
!success_bg_color ||= #E6EFC2
|
||||
!success_border_color ||= #C6D880
|
||||
|
||||
!notice_color ||= #514721
|
||||
!notice_bg_color ||= #FFF6BF
|
||||
!notice_border_color ||= #FFD324
|
||||
|
||||
!error_color ||= #8A1F11
|
||||
!error_bg_color ||= #FBE3E4
|
||||
!error_border_color ||= #FBC2C4
|
||||
|
||||
!highlight_color ||= #FF0
|
||||
!added_color ||= #FFF
|
||||
!added_bg_color ||= #060
|
||||
!removed_color ||= #FFF
|
||||
!removed_bg_color ||= #900
|
||||
|
||||
!blueprint_table_header_color ||= #C3D9FF
|
||||
!blueprint_table_stripe_color ||= #E5ECF9
|
||||
51
frameworks/blueprint/stylesheets/blueprint/_colors.scss
Normal file
51
frameworks/blueprint/stylesheets/blueprint/_colors.scss
Normal file
@ -0,0 +1,51 @@
|
||||
$font_color: #333333 !default;
|
||||
|
||||
$quiet_color: $font_color + #333333 !default;
|
||||
|
||||
$loud_color: $font_color - #222222 !default;
|
||||
|
||||
$header_color: $font_color - #111111 !default;
|
||||
|
||||
$link_color: #000099 !default;
|
||||
|
||||
$link_hover_color: black !default;
|
||||
|
||||
$link_focus_color: $link_hover_color !default;
|
||||
|
||||
$link_active_color: $link_color + #cc0000 !default;
|
||||
|
||||
$link_visited_color: $link_color - #333333 !default;
|
||||
|
||||
$feedback_border_color: #dddddd !default;
|
||||
|
||||
$success_color: #264409 !default;
|
||||
|
||||
$success_bg_color: #e6efc2 !default;
|
||||
|
||||
$success_border_color: #c6d880 !default;
|
||||
|
||||
$notice_color: #514721 !default;
|
||||
|
||||
$notice_bg_color: #fff6bf !default;
|
||||
|
||||
$notice_border_color: #ffd324 !default;
|
||||
|
||||
$error_color: #8a1f11 !default;
|
||||
|
||||
$error_bg_color: #fbe3e4 !default;
|
||||
|
||||
$error_border_color: #fbc2c4 !default;
|
||||
|
||||
$highlight_color: yellow !default;
|
||||
|
||||
$added_color: white !default;
|
||||
|
||||
$added_bg_color: #006600 !default;
|
||||
|
||||
$removed_color: white !default;
|
||||
|
||||
$removed_bg_color: #990000 !default;
|
||||
|
||||
$blueprint_table_header_color: #c3d9ff !default;
|
||||
|
||||
$blueprint_table_stripe_color: #e5ecf9 !default;
|
||||
@ -1,9 +0,0 @@
|
||||
=showgrid(!image = "grid.png")
|
||||
background= image_url(!image)
|
||||
|
||||
=blueprint-debug(!grid_image = "grid.png")
|
||||
// Use this class on any column or container to see the grid.
|
||||
// TODO: prefix this with the project path.
|
||||
.showgrid
|
||||
+showgrid(!grid_image)
|
||||
|
||||
8
frameworks/blueprint/stylesheets/blueprint/_debug.scss
Normal file
8
frameworks/blueprint/stylesheets/blueprint/_debug.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@mixin showgrid($image: unquote("grid.png")) {
|
||||
background: image_url($image); }
|
||||
|
||||
@mixin blueprint-debug($grid_image: unquote("grid.png")) {
|
||||
// Use this class on any column or container to see the grid.
|
||||
// TODO: prefix this with the project path.
|
||||
.showgrid {
|
||||
@include showgrid($grid_image); } }
|
||||
80
frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss
Normal file
80
frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss
Normal file
@ -0,0 +1,80 @@
|
||||
@import "typography";
|
||||
|
||||
// To install the fancy type plugin:
|
||||
// 1. import the fancy_type module: @import blueprint/fancy_type
|
||||
// 2. mixin +fancy-type to your project's body or at the top level of your stylesheet:
|
||||
// body
|
||||
// +fancy-type
|
||||
|
||||
@mixin fancy-type {
|
||||
@include fancy-paragraphs;
|
||||
.caps {
|
||||
@include caps; }
|
||||
.dquo {
|
||||
@include dquo; }
|
||||
.alt {
|
||||
@include alt; } }
|
||||
|
||||
// Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p
|
||||
@mixin sibling-indentation {
|
||||
text-indent: 2em;
|
||||
margin-top: -1.5em;
|
||||
/* Don't want this in forms. */
|
||||
form & {
|
||||
text-indent: 0; } }
|
||||
|
||||
// For great looking type, use this code instead of asdf:
|
||||
// <span class="alt">asdf</span>
|
||||
// Best used on prepositions and ampersands.
|
||||
|
||||
@mixin alt {
|
||||
color: #666666;
|
||||
font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
|
||||
font-style: italic;
|
||||
font-weight: normal; }
|
||||
|
||||
// For great looking quote marks in titles, replace "asdf" with:
|
||||
// <span class="dquo">“</span>asdf”
|
||||
// (That is, when the title starts with a quote mark).
|
||||
// (You may have to change this value depending on your font size).
|
||||
|
||||
@mixin dquo($offset: 0.5em) {
|
||||
margin-left: -$offset; }
|
||||
|
||||
// Reduced size type with incremental leading
|
||||
// (http://www.markboulton.co.uk/journal/comments/incremental_leading/)
|
||||
//
|
||||
// This could be used for side notes. For smaller type, you don't necessarily want to
|
||||
// follow the 1.5x vertical rhythm -- the line-height is too much.
|
||||
//
|
||||
// Using this mixin, reduces your font size and line-height so that for
|
||||
// every four lines of normal sized type, there is five lines of the sidenote. eg:
|
||||
//
|
||||
// Arguments:
|
||||
// font_size - The desired font size in pixels. This will be converted to ems for you. Defaults to 10px.
|
||||
// base_font_size - The base font size in pixels. Defaults to 12px
|
||||
// old_line_height - The old line height. Defaults to 1.5 times the base_font_size
|
||||
|
||||
@mixin incr($font_size: 10px, $base_font_size: $blueprint_font_size, $old_line_height: $base_font_size * 1.5) {
|
||||
font-size: 1em * $font_size / $base_font_size;
|
||||
line-height: 1em * $old_line_height / $font_size * 4 / 5;
|
||||
margin-bottom: 1.5em; }
|
||||
|
||||
// Surround uppercase words and abbreviations with this class.
|
||||
// Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/]
|
||||
|
||||
@mixin caps {
|
||||
font-variant: small-caps;
|
||||
letter-spacing: 1px;
|
||||
text-transform: lowercase;
|
||||
font-size: 1.2em;
|
||||
line-height: 1%;
|
||||
font-weight: bold;
|
||||
padding: 0 2px; }
|
||||
|
||||
@mixin fancy-paragraphs {
|
||||
p + p {
|
||||
@include sibling-indentation; }
|
||||
p.incr,
|
||||
.incr p {
|
||||
@include incr; } }
|
||||
@ -1,82 +0,0 @@
|
||||
@import typography.sass
|
||||
|
||||
//
|
||||
To install the fancy type plugin:
|
||||
1. import the fancy_type module: @import blueprint/fancy_type
|
||||
2. mixin +fancy-type to your project's body or at the top level of your stylesheet:
|
||||
body
|
||||
+fancy-type
|
||||
|
||||
=fancy-type
|
||||
+fancy-paragraphs
|
||||
.caps
|
||||
+caps
|
||||
.dquo
|
||||
+dquo
|
||||
.alt
|
||||
+alt
|
||||
|
||||
// Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p
|
||||
=sibling-indentation
|
||||
text-indent: 2em
|
||||
margin-top: -1.5em
|
||||
/* Don't want this in forms.
|
||||
form &
|
||||
text-indent: 0
|
||||
|
||||
//
|
||||
For great looking type, use this code instead of asdf:
|
||||
<span class="alt">asdf</span>
|
||||
Best used on prepositions and ampersands.
|
||||
|
||||
=alt
|
||||
color: #666
|
||||
font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif
|
||||
font-style: italic
|
||||
font-weight: normal
|
||||
|
||||
//
|
||||
For great looking quote marks in titles, replace "asdf" with:
|
||||
<span class="dquo">“</span>asdf”
|
||||
(That is, when the title starts with a quote mark).
|
||||
(You may have to change this value depending on your font size).
|
||||
=dquo(!offset = 0.5em)
|
||||
margin-left= -!offset
|
||||
|
||||
//
|
||||
Reduced size type with incremental leading
|
||||
(http://www.markboulton.co.uk/journal/comments/incremental_leading/)
|
||||
|
||||
This could be used for side notes. For smaller type, you don't necessarily want to
|
||||
follow the 1.5x vertical rhythm -- the line-height is too much.
|
||||
|
||||
Using this mixin, reduces your font size and line-height so that for
|
||||
every four lines of normal sized type, there is five lines of the sidenote. eg:
|
||||
|
||||
Arguments:
|
||||
font_size - The desired font size in pixels. This will be converted to ems for you. Defaults to 10px.
|
||||
base_font_size - The base font size in pixels. Defaults to 12px
|
||||
old_line_height - The old line height. Defaults to 1.5 times the base_font_size
|
||||
=incr(!font_size = 10px, !base_font_size = !blueprint_font_size, !old_line_height = !base_font_size * 1.5)
|
||||
font-size= 1em * !font_size / !base_font_size
|
||||
line-height= 1em * !old_line_height / !font_size * 4 / 5
|
||||
margin-bottom: 1.5em
|
||||
|
||||
//
|
||||
Surround uppercase words and abbreviations with this class.
|
||||
Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/]
|
||||
=caps
|
||||
font-variant: small-caps
|
||||
letter-spacing: 1px
|
||||
text-transform: lowercase
|
||||
font-size: 1.2em
|
||||
line-height: 1%
|
||||
font-weight: bold
|
||||
padding: 0 2px
|
||||
|
||||
=fancy-paragraphs
|
||||
p + p
|
||||
+sibling-indentation
|
||||
p.incr,
|
||||
.incr p
|
||||
+incr
|
||||
@ -1,56 +0,0 @@
|
||||
@import colors.sass
|
||||
|
||||
// Mixin for producing Blueprint "inline" forms. Should be used with the blueprint-form mixin.
|
||||
=blueprint-inline-form
|
||||
line-height: 3
|
||||
p
|
||||
margin-bottom: 0
|
||||
|
||||
=blueprint-form
|
||||
+blueprint-form-layout
|
||||
+blueprint-form-borders
|
||||
+blueprint-form-sizes
|
||||
|
||||
=blueprint-form-layout
|
||||
label
|
||||
font-weight: bold
|
||||
fieldset
|
||||
padding: 1.4em
|
||||
margin: 0 0 1.5em 0
|
||||
legend
|
||||
font-weight: bold
|
||||
font-size: 1.2em
|
||||
input
|
||||
&.text, &.title, &[type=text], &[type=password]
|
||||
margin: 0.5em 0
|
||||
background-color: #fff
|
||||
padding: 5px
|
||||
&.title
|
||||
font-size: 1.5em
|
||||
&[type=checkbox], &.checkbox,
|
||||
&[type=radio], &.radio
|
||||
position: relative
|
||||
top: 0.25em
|
||||
textarea
|
||||
margin: 0.5em 0
|
||||
padding: 5px
|
||||
select
|
||||
margin: 0.5em 0
|
||||
|
||||
=blueprint-form-sizes(!input_width = 300px, !textarea_width = 390px, !textarea_height = 250px)
|
||||
input
|
||||
&.text, &.title, &[type=text], &[type=password]
|
||||
width= !input_width
|
||||
textarea
|
||||
width= !textarea_width
|
||||
height= !textarea_height
|
||||
|
||||
=blueprint-form-borders(!unfocused_border_color = #bbb, !focus_border_color = #666, !fieldset_border_color = #ccc)
|
||||
fieldset
|
||||
border= 1px "solid" !fieldset_border_color
|
||||
input.text, input.title, input[type=text], input[type=password],
|
||||
textarea,
|
||||
select
|
||||
border= 1px "solid" !unfocused_border_color
|
||||
&:focus
|
||||
border= 1px "solid" !focus_border_color
|
||||
56
frameworks/blueprint/stylesheets/blueprint/_form.scss
Normal file
56
frameworks/blueprint/stylesheets/blueprint/_form.scss
Normal file
@ -0,0 +1,56 @@
|
||||
@import "colors";
|
||||
|
||||
// Mixin for producing Blueprint "inline" forms. Should be used with the blueprint-form mixin.
|
||||
@mixin blueprint-inline-form {
|
||||
line-height: 3;
|
||||
p {
|
||||
margin-bottom: 0; } }
|
||||
|
||||
@mixin blueprint-form {
|
||||
@include blueprint-form-layout;
|
||||
@include blueprint-form-borders;
|
||||
@include blueprint-form-sizes; }
|
||||
|
||||
@mixin blueprint-form-layout {
|
||||
label {
|
||||
font-weight: bold; }
|
||||
fieldset {
|
||||
padding: 1.4em;
|
||||
margin: 0 0 1.5em 0; }
|
||||
legend {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em; }
|
||||
input {
|
||||
&.text, &.title, &[type=text], &[type=password] {
|
||||
margin: 0.5em 0;
|
||||
background-color: white;
|
||||
padding: 5px; }
|
||||
&.title {
|
||||
font-size: 1.5em; }
|
||||
&[type=checkbox], &.checkbox,
|
||||
&[type=radio], &.radio {
|
||||
position: relative;
|
||||
top: 0.25em; } }
|
||||
textarea {
|
||||
margin: 0.5em 0;
|
||||
padding: 5px; }
|
||||
select {
|
||||
margin: 0.5em 0; } }
|
||||
|
||||
@mixin blueprint-form-sizes($input_width: 300px, $textarea_width: 390px, $textarea_height: 250px) {
|
||||
input {
|
||||
&.text, &.title, &[type=text], &[type=password] {
|
||||
width: $input_width; } }
|
||||
textarea {
|
||||
width: $textarea_width;
|
||||
height: $textarea_height; } }
|
||||
|
||||
@mixin blueprint-form-borders($unfocused_border_color: #bbbbbb, $focus_border_color: #666666, $fieldset_border_color: #cccccc) {
|
||||
fieldset {
|
||||
border: 1px solid $fieldset_border_color; }
|
||||
input.text, input.title, input[type=text], input[type=password],
|
||||
textarea,
|
||||
select {
|
||||
border: 1px solid $unfocused_border_color;
|
||||
&:focus {
|
||||
border: 1px solid $focus_border_color; } } }
|
||||
@ -1,243 +0,0 @@
|
||||
// --------------------------------------------------------------
|
||||
// SASS Gridification
|
||||
// * Author: Chris Eppstein
|
||||
// A SASS adaptation of Blueprint CSS
|
||||
// * Version: 0.7.1 (2008-02-25)
|
||||
// * Website: http://code.google.com/p/blueprintcss/
|
||||
// Based on work by:
|
||||
// * Lorin Tackett [lorintackett.com]
|
||||
// * Olav Bjorkoy [bjorkoy.com]
|
||||
// * Nathan Borror [playgroundblues.com]
|
||||
// * Jeff Croft [jeffcroft.com]
|
||||
// * Christian Metts [mintchaos.com]
|
||||
// * Khoi Vinh [subtraction.com]
|
||||
// Read more about using a grid here:
|
||||
// * http://www.subtraction.com/2007/03/18/oh-yeeaahh
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import compass/utilities/general/float
|
||||
|
||||
// The number of columns in the grid.
|
||||
!blueprint_grid_columns ||= 24
|
||||
// The width of a column
|
||||
!blueprint_grid_width ||= 30px
|
||||
// The amount of margin between columns
|
||||
!blueprint_grid_margin ||= 10px
|
||||
|
||||
// The width of a column including the margin. With default settings this is `40px`.
|
||||
!blueprint_grid_outer_width = !blueprint_grid_width + !blueprint_grid_margin
|
||||
// The width of the container. With default settings this is `950px`.
|
||||
!blueprint_container_size = !blueprint_grid_outer_width * !blueprint_grid_columns - !blueprint_grid_margin
|
||||
|
||||
//
|
||||
Generates presentational class names that you can use
|
||||
in your html to layout your pages.
|
||||
|
||||
#### Note:
|
||||
Best practices discourage using this mixin,
|
||||
but it is provided to support legacy websites
|
||||
and to test the sass port against blueprint's example pages.
|
||||
=blueprint-grid
|
||||
// A container should group all your columns
|
||||
.container
|
||||
+container
|
||||
.column, #{enumerate("div.span", 1, !blueprint_grid_columns)}
|
||||
+column-base
|
||||
// The last column in a row needs this class (or mixin) or it will end up on the next row.
|
||||
.last, div.last
|
||||
+last
|
||||
// Use these classes (or mixins) to set the width of a column.
|
||||
@for !n from 1 to !blueprint_grid_columns
|
||||
.span-#{!n}
|
||||
+span(!n)
|
||||
.span-#{!blueprint_grid_columns}, div.span-#{!blueprint_grid_columns}
|
||||
+span(!blueprint_grid_columns)
|
||||
margin: 0
|
||||
input, textarea, select
|
||||
@for !n from 1 through !blueprint_grid_columns
|
||||
&.span-#{!n}
|
||||
+span(!n, true)
|
||||
// Add these to a column to append empty cols.
|
||||
@for !n from 1 to !blueprint_grid_columns
|
||||
.append-#{!n}
|
||||
+append(!n)
|
||||
// Add these to a column to prepend empty cols.
|
||||
@for !n from 1 to !blueprint_grid_columns
|
||||
.prepend-#{!n}
|
||||
+prepend(!n)
|
||||
// Use these classes on an element to push it into the
|
||||
// next column, or to pull it into the previous column.
|
||||
#{enumerate(".pull", 1, !blueprint_grid_columns)}
|
||||
+pull-base
|
||||
@for !n from 1 through !blueprint_grid_columns
|
||||
.pull-#{!n}
|
||||
+pull-margins(!n)
|
||||
#{enumerate(".push", 1, !blueprint_grid_columns)}
|
||||
+push-base
|
||||
@for !n from 1 through !blueprint_grid_columns
|
||||
.push-#{!n}
|
||||
+push-margins(!n)
|
||||
.prepend-top
|
||||
+prepend-top
|
||||
.append-bottom
|
||||
+append-bottom
|
||||
|
||||
|
||||
// A container for your 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.
|
||||
=container
|
||||
width= !blueprint_container_size
|
||||
margin: 0 auto
|
||||
+clearfix
|
||||
|
||||
// The last column in a row needs this mixin or it will end up
|
||||
// on the next row in some browsers.
|
||||
=last
|
||||
margin-right: 0
|
||||
|
||||
// Use this mixins to set the width of n columns.
|
||||
=column(!n, !last = false)
|
||||
+column-base(!last)
|
||||
+span(!n)
|
||||
|
||||
// Set only the width of an element to align it with the grid.
|
||||
// Most of the time you'll want to use `+column` instead.
|
||||
//
|
||||
// This mixin is especially useful for aligning tables to the grid.
|
||||
=span(!n, !override = false)
|
||||
!width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1))
|
||||
@if !override
|
||||
width= !width !important
|
||||
@else
|
||||
width= !width
|
||||
|
||||
// The basic set of styles needed to make an element
|
||||
// behave like a column:
|
||||
//
|
||||
// * floated to left
|
||||
// * gutter margin on the right (unless the last column)
|
||||
// * Some IE fixes
|
||||
//
|
||||
// #### Note:
|
||||
// This mixin gets applied automatically when using `+column`
|
||||
// so you probably don't need to use it directly unless
|
||||
// you need to deviate from the grid or are trying
|
||||
// to reduce the amount of generated CSS.
|
||||
=column-base(!last = false)
|
||||
+float-left
|
||||
@if !last
|
||||
+last
|
||||
@else
|
||||
margin-right= !blueprint_grid_margin
|
||||
* html &
|
||||
overflow-x: hidden
|
||||
|
||||
|
||||
// Mixin to a column to append n empty columns to the right
|
||||
// by adding right padding to the column.
|
||||
=append(!n)
|
||||
padding-right= (!blueprint_grid_outer_width) * !n
|
||||
|
||||
// Mixin to a column to append n empty columns to the left
|
||||
// by adding left padding to the column.
|
||||
=prepend(!n)
|
||||
padding-left= (!blueprint_grid_outer_width) * !n
|
||||
|
||||
// Adds trailing margin.
|
||||
=append-bottom(!amount = 1.5em)
|
||||
margin-bottom= !amount
|
||||
|
||||
// Adds leading margin.
|
||||
=prepend-top(!amount = 1.5em)
|
||||
margin-top= !amount
|
||||
|
||||
// Base styles that make it possible to pull an element to the left.
|
||||
// #### Note:
|
||||
// This mixin gets applied automatically when using `+pull`
|
||||
// so you probably don't need to use it directly unless
|
||||
// you need to deviate from the grid or are trying
|
||||
// to reduce the amount of generated CSS.
|
||||
=pull-base
|
||||
+float-left
|
||||
position: relative
|
||||
|
||||
// The amount of pulling for element to the left.
|
||||
// #### Note:
|
||||
// This mixin gets applied automatically when using `+pull`
|
||||
// so you probably don't need to use it directly unless
|
||||
// you need to deviate from the grid or are trying
|
||||
// to reduce the amount of generated CSS.
|
||||
=pull-margins(!n, !last = false)
|
||||
@if !last
|
||||
margin-left= (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin
|
||||
@else
|
||||
margin-left= -!blueprint_grid_outer_width * !n
|
||||
|
||||
// Moves a column `n` columns to the left.
|
||||
//
|
||||
// This mixin can also be used to change the display order of columns.
|
||||
//
|
||||
// If pulling past the last (visually) element in a row,
|
||||
// pass `true` as the second argument so the calculations can adjust
|
||||
// accordingly.
|
||||
|
||||
// For example:
|
||||
//
|
||||
// HTML:
|
||||
// <div id="one">One</div>
|
||||
// <div id="two">Two</div>
|
||||
// Sass:
|
||||
// #one
|
||||
// +column(18, true)
|
||||
// +prepend(6)
|
||||
// #two
|
||||
// +column(6)
|
||||
// +pull(18, true)
|
||||
=pull(!n, !last = false)
|
||||
+pull-base
|
||||
+pull-margins(!n, !last)
|
||||
|
||||
=push-base
|
||||
+float-right
|
||||
position: relative
|
||||
|
||||
=push-margins(!n)
|
||||
margin= 0 (-!blueprint_grid_outer_width * !n) 1.5em (!blueprint_grid_outer_width * !n)
|
||||
|
||||
// mixin to a column to push it n columns to the right
|
||||
=push(!n)
|
||||
+push-base
|
||||
+push-margins(!n)
|
||||
|
||||
// Border on right hand side of a column.
|
||||
=border(!border_color = #eee, !border_width = 1px)
|
||||
padding-right= !blueprint_grid_margin / 2 - !border_width
|
||||
margin-right= !blueprint_grid_margin / 2
|
||||
border-right: #{!border_width} solid #{!border_color}
|
||||
|
||||
// Border with more whitespace, spans one column.
|
||||
=colborder(!border_color = #eee, !border_width = 1px)
|
||||
padding-right= floor((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2)
|
||||
margin-right= ceil((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2)
|
||||
border-right: #{!border_width} solid #{!border_color}
|
||||
|
||||
// Mixin this to an hr to make a horizontal ruler across a column.
|
||||
=colruler(!border_color = #ddd)
|
||||
background= !border_color
|
||||
color= !border_color
|
||||
clear: both
|
||||
float: none
|
||||
width: 100%
|
||||
height: .1em
|
||||
margin: 0 0 1.45em
|
||||
border: none
|
||||
|
||||
// Mixin this to an hr to make a horizontal spacer across a column.
|
||||
=colspacer
|
||||
+colruler
|
||||
background: #fff
|
||||
color: #fff
|
||||
visibility: hidden
|
||||
244
frameworks/blueprint/stylesheets/blueprint/_grid.scss
Normal file
244
frameworks/blueprint/stylesheets/blueprint/_grid.scss
Normal file
@ -0,0 +1,244 @@
|
||||
// --------------------------------------------------------------
|
||||
// SASS Gridification
|
||||
// * Author: Chris Eppstein
|
||||
// A SASS adaptation of Blueprint CSS
|
||||
// * Version: 0.7.1 (2008-02-25)
|
||||
// * Website: http://code.google.com/p/blueprintcss/
|
||||
// Based on work by:
|
||||
// * Lorin Tackett [lorintackett.com]
|
||||
// * Olav Bjorkoy [bjorkoy.com]
|
||||
// * Nathan Borror [playgroundblues.com]
|
||||
// * Jeff Croft [jeffcroft.com]
|
||||
// * Christian Metts [mintchaos.com]
|
||||
// * Khoi Vinh [subtraction.com]
|
||||
// Read more about using a grid here:
|
||||
// * http://www.subtraction.com/2007/03/18/oh-yeeaahh
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import "compass/utilities/general/float";
|
||||
|
||||
// The number of columns in the grid.
|
||||
$blueprint_grid_columns: 24 !default;
|
||||
|
||||
// The width of a column
|
||||
$blueprint_grid_width: 30px !default;
|
||||
|
||||
// The amount of margin between columns
|
||||
$blueprint_grid_margin: 10px !default;
|
||||
|
||||
// The width of a column including the margin. With default settings this is `40px`.
|
||||
$blueprint_grid_outer_width: $blueprint_grid_width + $blueprint_grid_margin;
|
||||
|
||||
// The width of the container. With default settings this is `950px`.
|
||||
$blueprint_container_size: $blueprint_grid_outer_width * $blueprint_grid_columns - $blueprint_grid_margin;
|
||||
|
||||
// Generates presentational class names that you can use
|
||||
// in your html to layout your pages.
|
||||
//
|
||||
// #### Note:
|
||||
// Best practices discourage using this mixin,
|
||||
// but it is provided to support legacy websites
|
||||
// and to test the sass port against blueprint's example pages.
|
||||
|
||||
@mixin blueprint-grid {
|
||||
// A container should group all your columns
|
||||
.container {
|
||||
@include container; }
|
||||
.column, #{enumerate("div.span", 1, $blueprint_grid_columns)} {
|
||||
@include column-base; }
|
||||
// The last column in a row needs this class (or mixin) or it will end up on the next row.
|
||||
.last, div.last {
|
||||
@include last; }
|
||||
// Use these classes (or mixins) to set the width of a column.
|
||||
@for $n from 1 to $blueprint_grid_columns {
|
||||
.span-#{$n} {
|
||||
@include span($n); } }
|
||||
.span-#{$blueprint_grid_columns}, div.span-#{$blueprint_grid_columns} {
|
||||
@include span($blueprint_grid_columns);
|
||||
margin: 0; }
|
||||
input, textarea, select {
|
||||
@for $n from 1 through $blueprint_grid_columns {
|
||||
&.span-#{$n} {
|
||||
@include span($n, true); } } }
|
||||
// Add these to a column to append empty cols.
|
||||
@for $n from 1 to $blueprint_grid_columns {
|
||||
.append-#{$n} {
|
||||
@include append($n); } }
|
||||
// Add these to a column to prepend empty cols.
|
||||
@for $n from 1 to $blueprint_grid_columns {
|
||||
.prepend-#{$n} {
|
||||
@include prepend($n); } }
|
||||
// Use these classes on an element to push it into the
|
||||
// next column, or to pull it into the previous column.
|
||||
#{enumerate(".pull", 1, $blueprint_grid_columns)} {
|
||||
@include pull-base; }
|
||||
@for $n from 1 through $blueprint_grid_columns {
|
||||
.pull-#{$n} {
|
||||
@include pull-margins($n); } }
|
||||
#{enumerate(".push", 1, $blueprint_grid_columns)} {
|
||||
@include push-base; }
|
||||
@for $n from 1 through $blueprint_grid_columns {
|
||||
.push-#{$n} {
|
||||
@include push-margins($n); } }
|
||||
.prepend-top {
|
||||
@include prepend-top; }
|
||||
.append-bottom {
|
||||
@include append-bottom; } }
|
||||
|
||||
// A container for your 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;
|
||||
@include clearfix; }
|
||||
|
||||
// The last column in a row needs this mixin or it will end up
|
||||
// on the next row in some browsers.
|
||||
@mixin last {
|
||||
margin-right: 0; }
|
||||
|
||||
// Use this mixins to set the width of n columns.
|
||||
@mixin column($n, $last: false) {
|
||||
@include column-base($last);
|
||||
@include span($n); }
|
||||
|
||||
// Set only the width of an element to align it with the grid.
|
||||
// Most of the time you'll want to use `+column` instead.
|
||||
//
|
||||
// This mixin is especially useful for aligning tables to the grid.
|
||||
@mixin span($n, $override: false) {
|
||||
$width: $blueprint_grid_width * $n + $blueprint_grid_margin * ($n - 1);
|
||||
@if $override {
|
||||
width: $width !important; }
|
||||
@else {
|
||||
width: $width; } }
|
||||
|
||||
// The basic set of styles needed to make an element
|
||||
// behave like a column:
|
||||
//
|
||||
// * floated to left
|
||||
// * gutter margin on the right (unless the last column)
|
||||
// * Some IE fixes
|
||||
//
|
||||
// #### Note:
|
||||
// This mixin gets applied automatically when using `+column`
|
||||
// so you probably don't need to use it directly unless
|
||||
// you need to deviate from the grid or are trying
|
||||
// to reduce the amount of generated CSS.
|
||||
@mixin column-base($last: false) {
|
||||
@include float-left;
|
||||
@if $last {
|
||||
@include last; }
|
||||
@else {
|
||||
margin-right: $blueprint_grid_margin; }
|
||||
* html & {
|
||||
overflow-x: hidden; } }
|
||||
|
||||
// Mixin to a column to append n empty columns to the right
|
||||
// by adding right padding to the column.
|
||||
@mixin append($n) {
|
||||
padding-right: $blueprint_grid_outer_width * $n; }
|
||||
|
||||
// Mixin to a column to append n empty columns to the left
|
||||
// by adding left padding to the column.
|
||||
@mixin prepend($n) {
|
||||
padding-left: $blueprint_grid_outer_width * $n; }
|
||||
|
||||
// Adds trailing margin.
|
||||
@mixin append-bottom($amount: 1.5em) {
|
||||
margin-bottom: $amount; }
|
||||
|
||||
// Adds leading margin.
|
||||
@mixin prepend-top($amount: 1.5em) {
|
||||
margin-top: $amount; }
|
||||
|
||||
// Base styles that make it possible to pull an element to the left.
|
||||
// #### Note:
|
||||
// This mixin gets applied automatically when using `+pull`
|
||||
// so you probably don't need to use it directly unless
|
||||
// you need to deviate from the grid or are trying
|
||||
// to reduce the amount of generated CSS.
|
||||
@mixin pull-base {
|
||||
@include float-left;
|
||||
position: relative; }
|
||||
|
||||
// The amount of pulling for element to the left.
|
||||
// #### Note:
|
||||
// This mixin gets applied automatically when using `+pull`
|
||||
// so you probably don't need to use it directly unless
|
||||
// you need to deviate from the grid or are trying
|
||||
// to reduce the amount of generated CSS.
|
||||
@mixin pull-margins($n, $last: false) {
|
||||
@if $last {
|
||||
margin-left: -$blueprint_grid_outer_width * $n + $blueprint_grid_margin; }
|
||||
@else {
|
||||
margin-left: -$blueprint_grid_outer_width * $n; } }
|
||||
|
||||
// Moves a column `n` columns to the left.
|
||||
//
|
||||
// This mixin can also be used to change the display order of columns.
|
||||
//
|
||||
// If pulling past the last (visually) element in a row,
|
||||
// pass `true` as the second argument so the calculations can adjust
|
||||
// accordingly.
|
||||
|
||||
// For example:
|
||||
//
|
||||
// HTML:
|
||||
// <div id="one">One</div>
|
||||
// <div id="two">Two</div>
|
||||
// Sass:
|
||||
// #one
|
||||
// +column(18, true)
|
||||
// +prepend(6)
|
||||
// #two
|
||||
// +column(6)
|
||||
// +pull(18, true)
|
||||
@mixin pull($n, $last: false) {
|
||||
@include pull-base;
|
||||
@include pull-margins($n, $last); }
|
||||
|
||||
@mixin push-base {
|
||||
@include float-right;
|
||||
position: relative; }
|
||||
|
||||
@mixin push-margins($n) {
|
||||
margin: 0 -$blueprint_grid_outer_width * $n 1.5em $blueprint_grid_outer_width * $n; }
|
||||
|
||||
// mixin to a column to push it n columns to the right
|
||||
@mixin push($n) {
|
||||
@include push-base;
|
||||
@include push-margins($n); }
|
||||
|
||||
// Border on right hand side of a column.
|
||||
@mixin border($border_color: #eeeeee, $border_width: 1px) {
|
||||
padding-right: $blueprint_grid_margin / 2 - $border_width;
|
||||
margin-right: $blueprint_grid_margin / 2;
|
||||
border-right: #{$border_width} solid #{$border_color}; }
|
||||
|
||||
// Border with more whitespace, spans one column.
|
||||
@mixin colborder($border_color: #eeeeee, $border_width: 1px) {
|
||||
padding-right: floor(($blueprint_grid_width + 2 * $blueprint_grid_margin - $border_width) / 2);
|
||||
margin-right: ceil(($blueprint_grid_width + 2 * $blueprint_grid_margin - $border_width) / 2);
|
||||
border-right: #{$border_width} solid #{$border_color}; }
|
||||
|
||||
// Mixin this to an hr to make a horizontal ruler across a column.
|
||||
@mixin colruler($border_color: #dddddd) {
|
||||
background: $border_color;
|
||||
color: $border_color;
|
||||
clear: both;
|
||||
float: none;
|
||||
width: 100%;
|
||||
height: 0.1em;
|
||||
margin: 0 0 1.45em;
|
||||
border: none; }
|
||||
|
||||
// Mixin this to an hr to make a horizontal spacer across a column.
|
||||
@mixin colspacer {
|
||||
@include colruler;
|
||||
background: white;
|
||||
color: white;
|
||||
visibility: hidden; }
|
||||
@ -1,108 +0,0 @@
|
||||
// @doc off
|
||||
// The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included
|
||||
// into IE like so:
|
||||
// <!--[if lt IE 8]><link rel="stylesheet" href="ie.css"
|
||||
// type="text/css" media="screen, projection"><![endif]-->
|
||||
// @doc on
|
||||
|
||||
//| Usage Examples
|
||||
//| --------------
|
||||
//|
|
||||
//| As a top-level mixin, apply to any page that includes the stylesheet:
|
||||
//|
|
||||
//| +blueprint-ie
|
||||
//|
|
||||
//| Scoped by a presentational class:
|
||||
//|
|
||||
//| body.blueprint
|
||||
//| +blueprint-ie(true)
|
||||
//|
|
||||
//| Scoped by semantic selectors:
|
||||
//|
|
||||
//| body#page-1, body#page-2, body.a-special-page-type
|
||||
//| +blueprint-ie(true)
|
||||
//|
|
||||
//| **Deprecated:** You can pass the body selector as the first argument when used as a top-level mixin
|
||||
//|
|
||||
//| +blueprint-ie("body#page-1, body#page-2, body.a-special-page-type")
|
||||
=blueprint-ie(!body_selector = "body")
|
||||
@if !body_selector == true
|
||||
+blueprint-ie-body
|
||||
+blueprint-ie-defaults
|
||||
@else
|
||||
#{!body_selector}
|
||||
+blueprint-ie-body
|
||||
@if !body_selector != "body"
|
||||
@warn "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint-ie, pass true as the first argument and mix it into #{!body_selector}."
|
||||
+blueprint-ie-defaults
|
||||
@if !body_selector == "body"
|
||||
+blueprint-ie-defaults
|
||||
|
||||
=blueprint-ie-body
|
||||
text-align: center
|
||||
+blueprint-ie-hacks
|
||||
|
||||
=blueprint-ie-hacks
|
||||
* html &
|
||||
legend
|
||||
margin: 0px -8px 16px 0
|
||||
padding: 0
|
||||
html>&
|
||||
p code
|
||||
*white-space: normal
|
||||
|
||||
// Fixes for Blueprint "inline" forms in IE
|
||||
=blueprint-inline-form-ie
|
||||
div, p
|
||||
vertical-align: middle
|
||||
label
|
||||
position: relative
|
||||
top: -0.25em
|
||||
input
|
||||
&.checkbox, &.radio, &.button, button
|
||||
margin: 0.5em 0
|
||||
|
||||
=blueprint-ie-defaults
|
||||
.container
|
||||
text-align: left
|
||||
sup
|
||||
vertical-align: text-top
|
||||
sub
|
||||
vertical-align: text-bottom
|
||||
hr
|
||||
margin: -8px auto 11px
|
||||
img
|
||||
-ms-interpolation-mode: bicubic
|
||||
fieldset
|
||||
padding-top: 0
|
||||
textarea
|
||||
overflow: auto
|
||||
input
|
||||
&.text
|
||||
margin: 0.5em 0
|
||||
background-color: #fff
|
||||
border: 1px solid #bbb
|
||||
&:focus
|
||||
border: 1px solid #666
|
||||
&.title
|
||||
margin: 0.5em 0
|
||||
background-color: #fff
|
||||
border: 1px solid #bbb
|
||||
&:focus
|
||||
border: 1px solid #666
|
||||
&.checkbox
|
||||
position: relative
|
||||
top: 0.25em
|
||||
&.radio
|
||||
position: relative
|
||||
top: 0.25em
|
||||
&.button
|
||||
position: relative
|
||||
top: 0.25em
|
||||
textarea
|
||||
margin: 0.5em 0
|
||||
select
|
||||
margin: 0.5em 0
|
||||
button
|
||||
position: relative
|
||||
top: 0.25em
|
||||
108
frameworks/blueprint/stylesheets/blueprint/_ie.scss
Normal file
108
frameworks/blueprint/stylesheets/blueprint/_ie.scss
Normal file
@ -0,0 +1,108 @@
|
||||
// @doc off
|
||||
// The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included
|
||||
// into IE like so:
|
||||
// <!--[if lt IE 8]><link rel="stylesheet" href="ie.css"
|
||||
// type="text/css" media="screen, projection"><![endif]-->
|
||||
// @doc on
|
||||
|
||||
//| Usage Examples
|
||||
//| --------------
|
||||
//|
|
||||
//| As a top-level mixin, apply to any page that includes the stylesheet:
|
||||
//|
|
||||
//| +blueprint-ie
|
||||
//|
|
||||
//| Scoped by a presentational class:
|
||||
//|
|
||||
//| body.blueprint
|
||||
//| +blueprint-ie(true)
|
||||
//|
|
||||
//| Scoped by semantic selectors:
|
||||
//|
|
||||
//| body#page-1, body#page-2, body.a-special-page-type
|
||||
//| +blueprint-ie(true)
|
||||
//|
|
||||
//| **Deprecated:** You can pass the body selector as the first argument when used as a top-level mixin
|
||||
//|
|
||||
//| +blueprint-ie("body#page-1, body#page-2, body.a-special-page-type")
|
||||
@mixin blueprint-ie($body_selector: body) {
|
||||
@if $body_selector == true {
|
||||
@include blueprint-ie-body;
|
||||
@include blueprint-ie-defaults; }
|
||||
@else {
|
||||
#{$body_selector} {
|
||||
@include blueprint-ie-body;
|
||||
@if $body_selector != "body" {
|
||||
@warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\" to +blueprint-ie, pass true as the first argument and mix it into #{$body_selector}.";
|
||||
@include blueprint-ie-defaults; } }
|
||||
@if $body_selector == "body" {
|
||||
@include blueprint-ie-defaults; } } }
|
||||
|
||||
@mixin blueprint-ie-body {
|
||||
text-align: center;
|
||||
@include blueprint-ie-hacks; }
|
||||
|
||||
@mixin blueprint-ie-hacks {
|
||||
* html & {
|
||||
legend {
|
||||
margin: 0px -8px 16px 0;
|
||||
padding: 0; } }
|
||||
html>& {
|
||||
p code {
|
||||
*white-space: normal; } } }
|
||||
|
||||
// Fixes for Blueprint "inline" forms in IE
|
||||
@mixin blueprint-inline-form-ie {
|
||||
div, p {
|
||||
vertical-align: middle; }
|
||||
label {
|
||||
position: relative;
|
||||
top: -0.25em; }
|
||||
input {
|
||||
&.checkbox, &.radio, &.button, button {
|
||||
margin: 0.5em 0; } } }
|
||||
|
||||
@mixin blueprint-ie-defaults {
|
||||
.container {
|
||||
text-align: left; }
|
||||
sup {
|
||||
vertical-align: text-top; }
|
||||
sub {
|
||||
vertical-align: text-bottom; }
|
||||
hr {
|
||||
margin: -8px auto 11px; }
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic; }
|
||||
fieldset {
|
||||
padding-top: 0; }
|
||||
textarea {
|
||||
overflow: auto; }
|
||||
input {
|
||||
&.text {
|
||||
margin: 0.5em 0;
|
||||
background-color: white;
|
||||
border: 1px solid #bbbbbb;
|
||||
&:focus {
|
||||
border: 1px solid #666666; } }
|
||||
&.title {
|
||||
margin: 0.5em 0;
|
||||
background-color: white;
|
||||
border: 1px solid #bbbbbb;
|
||||
&:focus {
|
||||
border: 1px solid #666666; } }
|
||||
&.checkbox {
|
||||
position: relative;
|
||||
top: 0.25em; }
|
||||
&.radio {
|
||||
position: relative;
|
||||
top: 0.25em; }
|
||||
&.button {
|
||||
position: relative;
|
||||
top: 0.25em; } }
|
||||
textarea {
|
||||
margin: 0.5em 0; }
|
||||
select {
|
||||
margin: 0.5em 0; }
|
||||
button {
|
||||
position: relative;
|
||||
top: 0.25em; } }
|
||||
@ -1,58 +0,0 @@
|
||||
@import colors.sass
|
||||
|
||||
|
||||
=blueprint-interaction
|
||||
.error
|
||||
+error
|
||||
.notice
|
||||
+notice
|
||||
.success
|
||||
+success
|
||||
.hide
|
||||
display: none
|
||||
.highlight
|
||||
+highlight
|
||||
.added
|
||||
+added
|
||||
.removed
|
||||
+removed
|
||||
|
||||
=feedback-base
|
||||
padding: .8em
|
||||
margin-bottom: 1em
|
||||
border= 2px "solid" !feedback_border_color
|
||||
|
||||
=error
|
||||
+feedback-base
|
||||
background= !error_bg_color
|
||||
color= !error_color
|
||||
border-color= !error_border_color
|
||||
a
|
||||
color= !error_color
|
||||
|
||||
=notice
|
||||
+feedback-base
|
||||
background= !notice_bg_color
|
||||
color= !notice_color
|
||||
border-color= !notice_border_color
|
||||
a
|
||||
color= !notice_color
|
||||
|
||||
=success
|
||||
+feedback-base
|
||||
background= !success_bg_color
|
||||
color= !success_color
|
||||
border-color= !success_border_color
|
||||
a
|
||||
color= !success_color
|
||||
|
||||
=highlight
|
||||
background= !highlight_color
|
||||
|
||||
=added
|
||||
background= !added_bg_color
|
||||
color= !added_color
|
||||
|
||||
=removed
|
||||
background= !removed_bg_color
|
||||
color= !removed_color
|
||||
57
frameworks/blueprint/stylesheets/blueprint/_interaction.scss
Normal file
57
frameworks/blueprint/stylesheets/blueprint/_interaction.scss
Normal file
@ -0,0 +1,57 @@
|
||||
@import "colors";
|
||||
|
||||
@mixin blueprint-interaction {
|
||||
.error {
|
||||
@include error; }
|
||||
.notice {
|
||||
@include notice; }
|
||||
.success {
|
||||
@include success; }
|
||||
.hide {
|
||||
display: none; }
|
||||
.highlight {
|
||||
@include highlight; }
|
||||
.added {
|
||||
@include added; }
|
||||
.removed {
|
||||
@include removed; } }
|
||||
|
||||
@mixin feedback-base {
|
||||
padding: 0.8em;
|
||||
margin-bottom: 1em;
|
||||
border: 2px solid $feedback_border_color; }
|
||||
|
||||
@mixin error {
|
||||
@include feedback-base;
|
||||
background: $error_bg_color;
|
||||
color: $error_color;
|
||||
border-color: $error_border_color;
|
||||
a {
|
||||
color: $error_color; } }
|
||||
|
||||
@mixin notice {
|
||||
@include feedback-base;
|
||||
background: $notice_bg_color;
|
||||
color: $notice_color;
|
||||
border-color: $notice_border_color;
|
||||
a {
|
||||
color: $notice_color; } }
|
||||
|
||||
@mixin success {
|
||||
@include feedback-base;
|
||||
background: $success_bg_color;
|
||||
color: $success_color;
|
||||
border-color: $success_border_color;
|
||||
a {
|
||||
color: $success_color; } }
|
||||
|
||||
@mixin highlight {
|
||||
background: $highlight_color; }
|
||||
|
||||
@mixin added {
|
||||
background: $added_bg_color;
|
||||
color: $added_color; }
|
||||
|
||||
@mixin removed {
|
||||
background: $removed_bg_color;
|
||||
color: $removed_color; }
|
||||
44
frameworks/blueprint/stylesheets/blueprint/_link-icons.scss
Normal file
44
frameworks/blueprint/stylesheets/blueprint/_link-icons.scss
Normal file
@ -0,0 +1,44 @@
|
||||
@mixin no-link-icon {
|
||||
background: transparent none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important; }
|
||||
|
||||
@mixin link-icon-base {
|
||||
padding: 2px 22px 2px 0;
|
||||
margin: -2px 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center; }
|
||||
|
||||
@mixin link-icon($name, $include_base: true) {
|
||||
@if $include_base {
|
||||
@include link-icon-base; }
|
||||
background-image: image_url("link_icons/#{$name}"); }
|
||||
|
||||
@mixin link-icons {
|
||||
a[href^="http:"],
|
||||
a[href^="mailto:"],
|
||||
a[href^="http:"]:visited,
|
||||
a[href$=".pdf"],
|
||||
a[href$=".doc"],
|
||||
a[href$=".xls"],
|
||||
a[href$=".rss"],
|
||||
a[href$=".rdf"],
|
||||
a[href^="aim:"] {
|
||||
@include link-icon-base; }
|
||||
a[href^="http:"] {
|
||||
@include link-icon(unquote("external.png"), false); }
|
||||
a[href^="mailto:"] {
|
||||
@include link-icon(unquote("email.png"), false); }
|
||||
a[href^="http:"]:visited {
|
||||
@include link-icon(unquote("visited.png"), false); }
|
||||
a[href$=".pdf"] {
|
||||
@include link-icon(unquote("pdf.png"), false); }
|
||||
a[href$=".doc"] {
|
||||
@include link-icon(unquote("doc.png"), false); }
|
||||
a[href$=".xls"] {
|
||||
@include link-icon(unquote("xls.png"), false); }
|
||||
a[href$=".rss"],
|
||||
a[href$=".rdf"] {
|
||||
@include link-icon(unquote("feed.png"), false); }
|
||||
a[href^="aim:"] {
|
||||
@include link-icon(unquote("im.png"), false); } }
|
||||
@ -1,44 +0,0 @@
|
||||
=no-link-icon
|
||||
background: transparent none !important
|
||||
padding: 0 !important
|
||||
margin: 0 !important
|
||||
|
||||
=link-icon-base
|
||||
padding: 2px 22px 2px 0
|
||||
margin: -2px 0
|
||||
background-repeat: no-repeat
|
||||
background-position: right center
|
||||
|
||||
=link-icon(!name, !include_base = true)
|
||||
@if !include_base
|
||||
+link-icon-base
|
||||
background-image= image_url("link_icons/#{!name}")
|
||||
|
||||
=link-icons
|
||||
a[href^="http:"],
|
||||
a[href^="mailto:"],
|
||||
a[href^="http:"]:visited,
|
||||
a[href$=".pdf"],
|
||||
a[href$=".doc"],
|
||||
a[href$=".xls"],
|
||||
a[href$=".rss"],
|
||||
a[href$=".rdf"],
|
||||
a[href^="aim:"]
|
||||
+link-icon-base
|
||||
a[href^="http:"]
|
||||
+link-icon("external.png", false)
|
||||
a[href^="mailto:"]
|
||||
+link-icon("email.png", false)
|
||||
a[href^="http:"]:visited
|
||||
+link-icon("visited.png", false)
|
||||
a[href$=".pdf"]
|
||||
+link-icon("pdf.png", false)
|
||||
a[href$=".doc"]
|
||||
+link-icon("doc.png", false)
|
||||
a[href$=".xls"]
|
||||
+link-icon("xls.png", false)
|
||||
a[href$=".rss"],
|
||||
a[href$=".rdf"]
|
||||
+link-icon("feed.png", false)
|
||||
a[href^="aim:"]
|
||||
+link-icon("im.png", false)
|
||||
@ -1,143 +0,0 @@
|
||||
// --------------------------------------------------------------
|
||||
// SASS Gridification
|
||||
// * Author: Geoff Garside
|
||||
// A SASS adaptation of Blueprint CSS
|
||||
// * Version: 0.7.1 (2008-02-25)
|
||||
// * Website: http://code.google.com/p/blueprintcss/
|
||||
// Based on work by:
|
||||
// * Chris Eppstein [eppsteins.net]
|
||||
// * Lorin Tacket [lorintackett.com]
|
||||
// * Olav Bjorkoy [bjorkoy.com]
|
||||
// * Nathan Borror [playgroundblues.com]
|
||||
// * Jeff Croft [jeffcroft.com]
|
||||
// * Christian Metts [mintchaos.com]
|
||||
// * Khoi Vinh [subtraction.com]
|
||||
// Liquid grid work by:
|
||||
// * Ben Listwon
|
||||
// * David Bedingfield
|
||||
// * Andrei Michael Herasimchuk
|
||||
// Involution Studios, http://www.involutionstudios.com
|
||||
// Read more about using a grid here:
|
||||
// * subtraction.com/archives/2007/0318_oh_yeeaahh.php
|
||||
// -----
|
||||
// By default, the grid is 80% of window width, with 24 columns.
|
||||
//
|
||||
// To make the grid fixed, simply change the .container width
|
||||
// property to a pixel value. e.g., 960px.
|
||||
// -----
|
||||
// To use:
|
||||
// This module is a REPLACEMENT for the grid module. Simply import it:
|
||||
// @import blueprint.sass
|
||||
// @import blueprint/liquid.sass
|
||||
// -------------------------------------------------------------------
|
||||
|
||||
@import compass/utilities/general/float
|
||||
|
||||
// Main layout grid, override these constants to build your grid and container sizes.
|
||||
// The width shown gives the right floored percentage values.
|
||||
!blueprint_liquid_grid_columns ||= 24
|
||||
!blueprint_liquid_grid_width ||= 3.167%
|
||||
!blueprint_liquid_grid_margin ||= 1.042%
|
||||
|
||||
// Do not edit below this line unless you really know what you're doing.
|
||||
!blueprint_liquid_container_width = 80%
|
||||
!blueprint_liquid_container_min_width = 950px
|
||||
!blueprint_liquid_grid_push_pull = -(!blueprint_liquid_grid_margin + !blueprint_liquid_grid_width)
|
||||
|
||||
=blueprint-liquid-grid
|
||||
// A container should group all your columns
|
||||
.container
|
||||
+container
|
||||
// Use these classes (or mixins) to set the width of a column.
|
||||
@for !n from 1 to !blueprint_liquid_grid_columns + 1
|
||||
.span-#{!n}
|
||||
+span(!n)
|
||||
div
|
||||
&.span-#{!n}
|
||||
+column(!n, !n == !blueprint_liquid_grid_columns)
|
||||
// The last column in a row needs this class (or mixin) or it will end up on the next row.
|
||||
div.last
|
||||
+last
|
||||
// Add these to a column to append empty cols.
|
||||
@for !n from 1 to !blueprint_liquid_grid_columns
|
||||
.append-#{!n}
|
||||
+append(!n)
|
||||
// Add these to a column to prepend empty cols.
|
||||
@for !n from 1 to !blueprint_liquid_grid_columns
|
||||
.prepend-#{!n}
|
||||
+prepend(!n)
|
||||
// Use these classes on an element to push it into the
|
||||
// next column, or to pull it into the previous column.
|
||||
@for !n from 1 to !blueprint_liquid_grid_columns + 1
|
||||
.pull-#{!n}
|
||||
+pull(!n)
|
||||
@for !n from 1 to !blueprint_liquid_grid_columns + 1
|
||||
.push-#{!n}
|
||||
+push(!n)
|
||||
|
||||
=container
|
||||
min-width= !blueprint_liquid_container_min_width
|
||||
width= !blueprint_liquid_container_width
|
||||
margin: 0 auto
|
||||
+clearfix
|
||||
|
||||
=span(!n, !override = false)
|
||||
!width = (!blueprint_liquid_grid_width * !n) + (!blueprint_liquid_grid_margin * (!n - 1))
|
||||
@if !override
|
||||
width= !width !important
|
||||
@else
|
||||
width= !width
|
||||
|
||||
=last
|
||||
margin-right: 0
|
||||
|
||||
=column(!n, !last = false)
|
||||
+float-left
|
||||
overflow: hidden
|
||||
+span(!n)
|
||||
@if !last
|
||||
+last
|
||||
@else
|
||||
margin-right= !blueprint_liquid_grid_margin
|
||||
|
||||
=append(!n)
|
||||
padding-right= (!blueprint_liquid_grid_width + !blueprint_liquid_grid_margin) * !n
|
||||
|
||||
=prepend(!n)
|
||||
padding-left= (!blueprint_liquid_grid_width + !blueprint_liquid_grid_margin) * !n
|
||||
|
||||
=pull(!n, !last = false)
|
||||
margin-left= (!blueprint_liquid_grid_push_pull * !n)
|
||||
|
||||
=push(!n)
|
||||
+float-right
|
||||
margin:
|
||||
top: 0
|
||||
left= !blueprint_liquid_grid_margin
|
||||
right= (!blueprint_liquid_grid_push_pull * !n)
|
||||
bottom: 0
|
||||
|
||||
=border
|
||||
border-right: 1px solid #eee
|
||||
|
||||
=colborder
|
||||
padding-right= !blueprint_liquid_grid_margin * 2
|
||||
margin-right= !blueprint_liquid_grid_margin * 2
|
||||
+border
|
||||
|
||||
=colruler
|
||||
background: #ddd
|
||||
color: #ddd
|
||||
clear: both
|
||||
width: 100%
|
||||
height: 0.083em
|
||||
margin: 0
|
||||
margin-left= !blueprint_liquid_grid_margin * 2
|
||||
margin-right= !blueprint_liquid_grid_margin * 2
|
||||
border: none
|
||||
|
||||
=colspacer
|
||||
+colruler
|
||||
background: #fff
|
||||
color: #fff
|
||||
|
||||
146
frameworks/blueprint/stylesheets/blueprint/_liquid.scss
Normal file
146
frameworks/blueprint/stylesheets/blueprint/_liquid.scss
Normal file
@ -0,0 +1,146 @@
|
||||
// --------------------------------------------------------------
|
||||
// SASS Gridification
|
||||
// * Author: Geoff Garside
|
||||
// A SASS adaptation of Blueprint CSS
|
||||
// * Version: 0.7.1 (2008-02-25)
|
||||
// * Website: http://code.google.com/p/blueprintcss/
|
||||
// Based on work by:
|
||||
// * Chris Eppstein [eppsteins.net]
|
||||
// * Lorin Tacket [lorintackett.com]
|
||||
// * Olav Bjorkoy [bjorkoy.com]
|
||||
// * Nathan Borror [playgroundblues.com]
|
||||
// * Jeff Croft [jeffcroft.com]
|
||||
// * Christian Metts [mintchaos.com]
|
||||
// * Khoi Vinh [subtraction.com]
|
||||
// Liquid grid work by:
|
||||
// * Ben Listwon
|
||||
// * David Bedingfield
|
||||
// * Andrei Michael Herasimchuk
|
||||
// Involution Studios, http://www.involutionstudios.com
|
||||
// Read more about using a grid here:
|
||||
// * subtraction.com/archives/2007/0318_oh_yeeaahh.php
|
||||
// -----
|
||||
// By default, the grid is 80% of window width, with 24 columns.
|
||||
//
|
||||
// To make the grid fixed, simply change the .container width
|
||||
// property to a pixel value. e.g., 960px.
|
||||
// -----
|
||||
// To use:
|
||||
// This module is a REPLACEMENT for the grid module. Simply import it:
|
||||
// @import blueprint
|
||||
// @import blueprint/liquid
|
||||
// -------------------------------------------------------------------
|
||||
|
||||
@import "compass/utilities/general/float";
|
||||
|
||||
// Main layout grid, override these constants to build your grid and container sizes.
|
||||
// The width shown gives the right floored percentage values.
|
||||
$blueprint_liquid_grid_columns: 24 !default;
|
||||
|
||||
$blueprint_liquid_grid_width: 3.167% !default;
|
||||
|
||||
$blueprint_liquid_grid_margin: 1.042% !default;
|
||||
|
||||
// Do not edit below this line unless you really know what you're doing.
|
||||
$blueprint_liquid_container_width: 80%;
|
||||
|
||||
$blueprint_liquid_container_min_width: 950px;
|
||||
|
||||
$blueprint_liquid_grid_push_pull: -($blueprint_liquid_grid_margin + $blueprint_liquid_grid_width);
|
||||
|
||||
@mixin blueprint-liquid-grid {
|
||||
// A container should group all your columns
|
||||
.container {
|
||||
@include container; }
|
||||
// Use these classes (or mixins) to set the width of a column.
|
||||
@for $n from 1 to $blueprint_liquid_grid_columns + 1 {
|
||||
.span-#{$n} {
|
||||
@include span($n); }
|
||||
div {
|
||||
&.span-#{$n} {
|
||||
@include column($n, $n == $blueprint_liquid_grid_columns); } } }
|
||||
// The last column in a row needs this class (or mixin) or it will end up on the next row.
|
||||
div.last {
|
||||
@include last; }
|
||||
// Add these to a column to append empty cols.
|
||||
@for $n from 1 to $blueprint_liquid_grid_columns {
|
||||
.append-#{$n} {
|
||||
@include append($n); } }
|
||||
// Add these to a column to prepend empty cols.
|
||||
@for $n from 1 to $blueprint_liquid_grid_columns {
|
||||
.prepend-#{$n} {
|
||||
@include prepend($n); } }
|
||||
// Use these classes on an element to push it into the
|
||||
// next column, or to pull it into the previous column.
|
||||
@for $n from 1 to $blueprint_liquid_grid_columns + 1 {
|
||||
.pull-#{$n} {
|
||||
@include pull($n); } }
|
||||
@for $n from 1 to $blueprint_liquid_grid_columns + 1 {
|
||||
.push-#{$n} {
|
||||
@include push($n); } } }
|
||||
|
||||
@mixin container {
|
||||
min-width: $blueprint_liquid_container_min_width;
|
||||
width: $blueprint_liquid_container_width;
|
||||
margin: 0 auto;
|
||||
@include clearfix; }
|
||||
|
||||
@mixin span($n, $override: false) {
|
||||
$width: $blueprint_liquid_grid_width * $n + $blueprint_liquid_grid_margin * ($n - 1);
|
||||
@if $override {
|
||||
width: $width !important; }
|
||||
@else {
|
||||
width: $width; } }
|
||||
|
||||
@mixin last {
|
||||
margin-right: 0; }
|
||||
|
||||
@mixin column($n, $last: false) {
|
||||
@include float-left;
|
||||
overflow: hidden;
|
||||
@include span($n);
|
||||
@if $last {
|
||||
@include last; }
|
||||
@else {
|
||||
margin-right: $blueprint_liquid_grid_margin; } }
|
||||
|
||||
@mixin append($n) {
|
||||
padding-right: ($blueprint_liquid_grid_width + $blueprint_liquid_grid_margin) * $n; }
|
||||
|
||||
@mixin prepend($n) {
|
||||
padding-left: ($blueprint_liquid_grid_width + $blueprint_liquid_grid_margin) * $n; }
|
||||
|
||||
@mixin pull($n, $last: false) {
|
||||
margin-left: $blueprint_liquid_grid_push_pull * $n; }
|
||||
|
||||
@mixin push($n) {
|
||||
@include float-right;
|
||||
margin: {
|
||||
top: 0;
|
||||
left: $blueprint_liquid_grid_margin;
|
||||
right: $blueprint_liquid_grid_push_pull * $n;
|
||||
bottom: 0; }; }
|
||||
|
||||
@mixin border {
|
||||
border-right: 1px solid #eeeeee; }
|
||||
|
||||
@mixin colborder {
|
||||
padding-right: $blueprint_liquid_grid_margin * 2;
|
||||
margin-right: $blueprint_liquid_grid_margin * 2;
|
||||
@include border; }
|
||||
|
||||
@mixin colruler {
|
||||
background: #dddddd;
|
||||
color: #dddddd;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
height: 0.083em;
|
||||
margin: 0;
|
||||
margin-left: $blueprint_liquid_grid_margin * 2;
|
||||
margin-right: $blueprint_liquid_grid_margin * 2;
|
||||
border: none; }
|
||||
|
||||
@mixin colspacer {
|
||||
@include colruler;
|
||||
background: white;
|
||||
color: white; }
|
||||
@ -1,87 +0,0 @@
|
||||
@import typography.sass
|
||||
@import compass/utilities/general/float
|
||||
|
||||
|
||||
|
||||
// Usage examples:
|
||||
// As a top-level mixin, apply to any page that includes the stylesheet:
|
||||
// +blueprint-print
|
||||
// Scoped by a presentational class:
|
||||
// body.blueprint
|
||||
// +blueprint-print(true)
|
||||
// Scoped by semantic selectors:
|
||||
// body#page-1, body#page-2, body.a-special-page-type
|
||||
// +blueprint-print(true)
|
||||
// Deprecated:
|
||||
// You can pass the body selector as the first argument when used as a top-level mixin
|
||||
// +blueprint-print("body#page-1, body#page-2, body.a-special-page-type")
|
||||
=blueprint-print(!body_selector = "body")
|
||||
@if !body_selector == true
|
||||
+blueprint-print-body
|
||||
+blueprint-print-defaults
|
||||
@else
|
||||
#{!body_selector}
|
||||
+blueprint-print-body
|
||||
@if !body_selector != "body"
|
||||
@warn "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint-print, pass true as the first argument and mix it into #{!body_selector}."
|
||||
+blueprint-print-defaults
|
||||
@if !body_selector == "body"
|
||||
+blueprint-print-defaults
|
||||
|
||||
// This style is in blueprint, but I think it's annoying and it doesn't work in all browsers.
|
||||
// Feel free to mix it into anchors where you want it.
|
||||
=blueprint-show-link-urls
|
||||
&:after
|
||||
content: " (" attr(href) ")"
|
||||
font-size: 90%
|
||||
|
||||
=blueprint-print-body
|
||||
line-height: 1.5
|
||||
font-family= !blueprint_font_family
|
||||
color: #000
|
||||
background: none
|
||||
font-size: 10pt
|
||||
|
||||
=blueprint-print-defaults
|
||||
.container
|
||||
background: none
|
||||
hr
|
||||
background: #ccc
|
||||
color: #ccc
|
||||
width: 100%
|
||||
height: 2px
|
||||
margin: 2em 0
|
||||
padding: 0
|
||||
border: none
|
||||
&.space
|
||||
background: #fff
|
||||
color: #fff
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-family= !blueprint_font_family
|
||||
code
|
||||
font:
|
||||
size: .9em
|
||||
family= !blueprint_fixed_font_family
|
||||
a
|
||||
img
|
||||
border: none
|
||||
&:link,
|
||||
&:visited
|
||||
background: transparent
|
||||
font-weight: 700
|
||||
text-decoration: underline
|
||||
p img.top
|
||||
margin-top: 0
|
||||
blockquote
|
||||
margin: 1.5em
|
||||
padding: 1em
|
||||
font-style: italic
|
||||
font-size: .9em
|
||||
.small
|
||||
font-size: .9em
|
||||
.large
|
||||
font-size: 1.1em
|
||||
.quiet
|
||||
color: #999
|
||||
.hide
|
||||
display: none
|
||||
85
frameworks/blueprint/stylesheets/blueprint/_print.scss
Normal file
85
frameworks/blueprint/stylesheets/blueprint/_print.scss
Normal file
@ -0,0 +1,85 @@
|
||||
@import "typography";
|
||||
@import "compass/utilities/general/float";
|
||||
|
||||
// Usage examples:
|
||||
// As a top-level mixin, apply to any page that includes the stylesheet:
|
||||
// +blueprint-print
|
||||
// Scoped by a presentational class:
|
||||
// body.blueprint
|
||||
// +blueprint-print(true)
|
||||
// Scoped by semantic selectors:
|
||||
// body#page-1, body#page-2, body.a-special-page-type
|
||||
// +blueprint-print(true)
|
||||
// Deprecated:
|
||||
// You can pass the body selector as the first argument when used as a top-level mixin
|
||||
// +blueprint-print("body#page-1, body#page-2, body.a-special-page-type")
|
||||
@mixin blueprint-print($body_selector: body) {
|
||||
@if $body_selector == true {
|
||||
@include blueprint-print-body;
|
||||
@include blueprint-print-defaults; }
|
||||
@else {
|
||||
#{$body_selector} {
|
||||
@include blueprint-print-body;
|
||||
@if $body_selector != "body" {
|
||||
@warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\" to +blueprint-print, pass true as the first argument and mix it into #{$body_selector}.";
|
||||
@include blueprint-print-defaults; } }
|
||||
@if $body_selector == "body" {
|
||||
@include blueprint-print-defaults; } } }
|
||||
|
||||
// This style is in blueprint, but I think it's annoying and it doesn't work in all browsers.
|
||||
// Feel free to mix it into anchors where you want it.
|
||||
@mixin blueprint-show-link-urls {
|
||||
&:after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 90%; } }
|
||||
|
||||
@mixin blueprint-print-body {
|
||||
line-height: 1.5;
|
||||
font-family: $blueprint_font_family;
|
||||
color: black;
|
||||
background: none;
|
||||
font-size: 10pt; }
|
||||
|
||||
@mixin blueprint-print-defaults {
|
||||
.container {
|
||||
background: none; }
|
||||
hr {
|
||||
background: #cccccc;
|
||||
color: #cccccc;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin: 2em 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
&.space {
|
||||
background: white;
|
||||
color: white; } }
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $blueprint_font_family; }
|
||||
code {
|
||||
font: {
|
||||
size: 0.9em;
|
||||
family: $blueprint_fixed_font_family; }; }
|
||||
a {
|
||||
img {
|
||||
border: none; }
|
||||
&:link,
|
||||
&:visited {
|
||||
background: transparent;
|
||||
font-weight: 700;
|
||||
text-decoration: underline; } }
|
||||
p img.top {
|
||||
margin-top: 0; }
|
||||
blockquote {
|
||||
margin: 1.5em;
|
||||
padding: 1em;
|
||||
font-style: italic;
|
||||
font-size: 0.9em; }
|
||||
.small {
|
||||
font-size: 0.9em; }
|
||||
.large {
|
||||
font-size: 1.1em; }
|
||||
.quiet {
|
||||
color: #999999; }
|
||||
.hide {
|
||||
display: none; } }
|
||||
@ -1,58 +0,0 @@
|
||||
// Global reset rules.
|
||||
// For more specific resets, use the reset mixins provided below
|
||||
=blueprint-global-reset
|
||||
html, body
|
||||
+blueprint-reset
|
||||
html
|
||||
font-size: 100.01%
|
||||
+blueprint-nested-reset
|
||||
|
||||
// Reset all elements within some selector scope.To reset the selector itself,
|
||||
// mixin the appropriate reset mixin for that element type as well. This could be
|
||||
// useful if you want to style a part of your page in a dramatically different way.
|
||||
=blueprint-nested-reset
|
||||
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
|
||||
pre, a, abbr, acronym, address, code, del, dfn, em, img,
|
||||
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr
|
||||
+blueprint-reset
|
||||
blockquote, q
|
||||
+blueprint-reset-quotation
|
||||
th, td, caption
|
||||
+blueprint-reset-table-cell
|
||||
table
|
||||
+blueprint-reset-table
|
||||
a img
|
||||
border: none
|
||||
|
||||
=blueprint-reset-box-model
|
||||
margin: 0
|
||||
padding: 0
|
||||
border: 0
|
||||
|
||||
=blueprint-reset
|
||||
+blueprint-reset-box-model
|
||||
font:
|
||||
weight: inherit
|
||||
style: inherit
|
||||
size: 100%
|
||||
family: inherit
|
||||
vertical-align: baseline
|
||||
|
||||
=blueprint-reset-quotation
|
||||
+blueprint-reset
|
||||
quotes: "" ""
|
||||
&:before,
|
||||
&:after
|
||||
content: ""
|
||||
|
||||
=blueprint-reset-table-cell
|
||||
+blueprint-reset
|
||||
text-align: left
|
||||
font-weight: normal
|
||||
vertical-align: middle
|
||||
|
||||
=blueprint-reset-table
|
||||
+blueprint-reset
|
||||
border-collapse: separate
|
||||
border-spacing: 0
|
||||
vertical-align: middle
|
||||
58
frameworks/blueprint/stylesheets/blueprint/_reset.scss
Normal file
58
frameworks/blueprint/stylesheets/blueprint/_reset.scss
Normal file
@ -0,0 +1,58 @@
|
||||
// Global reset rules.
|
||||
// For more specific resets, use the reset mixins provided below
|
||||
@mixin blueprint-global-reset {
|
||||
html, body {
|
||||
@include blueprint-reset; }
|
||||
html {
|
||||
font-size: 100.01%; }
|
||||
@include blueprint-nested-reset; }
|
||||
|
||||
// Reset all elements within some selector scope.To reset the selector itself,
|
||||
// mixin the appropriate reset mixin for that element type as well. This could be
|
||||
// useful if you want to style a part of your page in a dramatically different way.
|
||||
@mixin blueprint-nested-reset {
|
||||
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
|
||||
pre, a, abbr, acronym, address, code, del, dfn, em, img,
|
||||
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
|
||||
@include blueprint-reset; }
|
||||
blockquote, q {
|
||||
@include blueprint-reset-quotation; }
|
||||
th, td, caption {
|
||||
@include blueprint-reset-table-cell; }
|
||||
table {
|
||||
@include blueprint-reset-table; }
|
||||
a img {
|
||||
border: none; } }
|
||||
|
||||
@mixin blueprint-reset-box-model {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
@mixin blueprint-reset {
|
||||
@include blueprint-reset-box-model;
|
||||
font: {
|
||||
weight: inherit;
|
||||
style: inherit;
|
||||
size: 100%;
|
||||
family: inherit; };
|
||||
vertical-align: baseline; }
|
||||
|
||||
@mixin blueprint-reset-quotation {
|
||||
@include blueprint-reset;
|
||||
quotes: "" "";
|
||||
&:before,
|
||||
&:after {
|
||||
content: ""; } }
|
||||
|
||||
@mixin blueprint-reset-table-cell {
|
||||
@include blueprint-reset;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
@mixin blueprint-reset-table {
|
||||
@include blueprint-reset;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
vertical-align: middle; }
|
||||
@ -1,123 +0,0 @@
|
||||
@import grid.sass
|
||||
@import compass/utilities/general/float
|
||||
|
||||
// Main layout grid, override these constants to build your grid and container sizes.
|
||||
!blueprint_grid_columns ||= 24
|
||||
!blueprint_grid_width ||= 30px
|
||||
!blueprint_grid_margin ||= 10px
|
||||
|
||||
!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.
|
||||
=container
|
||||
width= !blueprint_container_size
|
||||
margin: 0 auto
|
||||
direction: rtl
|
||||
+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
|
||||
=last
|
||||
margin-left: 0
|
||||
|
||||
=column-base(!last = false)
|
||||
+float-right
|
||||
@if !last
|
||||
+last
|
||||
@else
|
||||
margin-left= !blueprint_grid_margin
|
||||
text-align: right
|
||||
* html &
|
||||
overflow-x: hidden
|
||||
|
||||
// Mixin to a column to append n empty cols.
|
||||
=append(!n)
|
||||
padding-left= (!blueprint_grid_outer_width) * !n
|
||||
|
||||
// Mixin to a column to prepend n empty cols.
|
||||
=prepend(!n)
|
||||
padding-right= (!blueprint_grid_outer_width) * !n
|
||||
|
||||
// mixin to a column to move it n columns to the left
|
||||
=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
|
||||
=push(!n)
|
||||
+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.
|
||||
=border
|
||||
padding-left= !blueprint_grid_margin / 2 - 1
|
||||
margin-left= !blueprint_grid_margin / 2
|
||||
border-left: 1px solid #eee
|
||||
|
||||
// Border with more whitespace, spans one column.
|
||||
=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 #eee
|
||||
|
||||
// Usage examples:
|
||||
// As a top-level mixin, apply to any page that includes the stylesheet:
|
||||
// +rtl-typography
|
||||
// Scoped by a presentational class:
|
||||
// body.blueprint
|
||||
// +rtl-typography(true)
|
||||
// Scoped by semantic selectors:
|
||||
// body#page-1, body#page-2, body.a-special-page-type
|
||||
// +rtl-typography(true)
|
||||
// Deprecated:
|
||||
// You can pass the body selector as the first argument when used as a top-level mixin
|
||||
// +rtl-typography("body#page-1, body#page-2, body.a-special-page-type")
|
||||
=rtl-typography(!body_selector = "body")
|
||||
@if !body_selector == true
|
||||
html &
|
||||
font-family: Arial, sans-serif
|
||||
+rtl-typography-defaults
|
||||
@else
|
||||
html #{!body_selector}
|
||||
font-family: Arial, sans-serif
|
||||
@if !body_selector != "body"
|
||||
@warn "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +rtl-typography, pass true as the first argument and mix it into #{!body_selector}."
|
||||
+rtl-typography-defaults
|
||||
@if !body_selector == "body"
|
||||
body
|
||||
+rtl-typography-defaults
|
||||
|
||||
=rtl-typography-defaults
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-family: Arial, sans-serif
|
||||
|
||||
pre, code, tt
|
||||
font-family: monospace
|
||||
|
||||
p
|
||||
img.right
|
||||
+float-left
|
||||
margin: 1.5em 1.5em 1.5em 0
|
||||
padding: 0
|
||||
img.left
|
||||
+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
|
||||
122
frameworks/blueprint/stylesheets/blueprint/_rtl.scss
Normal file
122
frameworks/blueprint/stylesheets/blueprint/_rtl.scss
Normal file
@ -0,0 +1,122 @@
|
||||
@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:
|
||||
// +rtl-typography
|
||||
// Scoped by a presentational class:
|
||||
// body.blueprint
|
||||
// +rtl-typography(true)
|
||||
// Scoped by semantic selectors:
|
||||
// body#page-1, body#page-2, body.a-special-page-type
|
||||
// +rtl-typography(true)
|
||||
// Deprecated:
|
||||
// You can pass the body selector as the first argument when used as a top-level mixin
|
||||
// +rtl-typography("body#page-1, body#page-2, body.a-special-page-type")
|
||||
@mixin rtl-typography($body_selector: body) {
|
||||
@if $body_selector == true {
|
||||
html & {
|
||||
font-family: Arial, sans-serif; }
|
||||
@include rtl-typography-defaults; }
|
||||
@else {
|
||||
html #{$body_selector} {
|
||||
font-family: Arial, sans-serif;
|
||||
@if $body_selector != "body" {
|
||||
@warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\" to +rtl-typography, pass true as the first argument and mix it into #{$body_selector}.";
|
||||
@include rtl-typography-defaults; } }
|
||||
@if $body_selector == "body" {
|
||||
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; } }
|
||||
@ -1,4 +1,5 @@
|
||||
@import grid.sass
|
||||
@import "grid";
|
||||
|
||||
// The styles contained here are meant to provide for an attractive experience out of the box
|
||||
// and are expected to be removed once custom visual design begins.
|
||||
|
||||
@ -14,36 +15,36 @@
|
||||
// Alternatively, you can use the +blueprint-scaffolding-body and +blueprint-scaffolding-defaults
|
||||
// mixins to construct your own semantic style rules.
|
||||
|
||||
=blueprint-scaffolding(!body_selector = "body")
|
||||
#{!body_selector}
|
||||
@if !body_selector != "body"
|
||||
+blueprint-scaffolding-defaults
|
||||
@if !body_selector == "body"
|
||||
+blueprint-scaffolding-defaults
|
||||
@mixin blueprint-scaffolding($body_selector: body) {
|
||||
#{$body_selector} {
|
||||
@if $body_selector != "body" {
|
||||
@include blueprint-scaffolding-defaults; } }
|
||||
@if $body_selector == "body" {
|
||||
@include blueprint-scaffolding-defaults; } }
|
||||
|
||||
// The styles this mixin provides were deprecated in Blueprint 0.9 and is no longer part of the
|
||||
// main scaffolding, but the mixin is still available if you want to use it.
|
||||
=blueprint-scaffolding-body
|
||||
margin: 1.5em 0
|
||||
@mixin blueprint-scaffolding-body {
|
||||
margin: 1.5em 0; }
|
||||
|
||||
// Mixin +box to create a padded box inside a column.
|
||||
=box
|
||||
padding: 1.5em
|
||||
margin-bottom: 1.5em
|
||||
background: #E5ECF9
|
||||
@mixin box {
|
||||
padding: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
background: #e5ecf9; }
|
||||
|
||||
=blueprint-scaffolding-defaults
|
||||
.box
|
||||
+box
|
||||
@mixin blueprint-scaffolding-defaults {
|
||||
.box {
|
||||
@include box; }
|
||||
// Border on right hand side of a column. You can comment this out if you don't plan to use it.
|
||||
div.border
|
||||
+border
|
||||
div.border {
|
||||
@include border; }
|
||||
// Border with more whitespace, spans one column.
|
||||
div.colborder
|
||||
+colborder
|
||||
hr
|
||||
+colruler
|
||||
hr.space
|
||||
+colspacer
|
||||
form.inline
|
||||
+blueprint-inline-form
|
||||
div.colborder {
|
||||
@include colborder; }
|
||||
hr {
|
||||
@include colruler; }
|
||||
hr.space {
|
||||
@include colspacer; }
|
||||
form.inline {
|
||||
@include blueprint-inline-form; } }
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: The blueprint/screen.sass will be removed. Please import blueprint.sass instead."
|
||||
@import blueprint.sass
|
||||
164
frameworks/blueprint/stylesheets/blueprint/_typography.scss
Normal file
164
frameworks/blueprint/stylesheets/blueprint/_typography.scss
Normal file
@ -0,0 +1,164 @@
|
||||
@import "colors";
|
||||
@import "compass/utilities/links/link-colors";
|
||||
@import "compass/utilities/general/float";
|
||||
|
||||
$blueprint_font_family: unquote("Helvetica Neue, Arial, Helvetica, sans-serif") !default;
|
||||
|
||||
$blueprint_fixed_font_family: unquote("'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:
|
||||
// +blueprint-typography
|
||||
// Scoped by a presentational class:
|
||||
// body.blueprint
|
||||
// +blueprint-typography(true)
|
||||
// Scoped by semantic selectors:
|
||||
// body#page-1, body#page-2, body.a-special-page-type
|
||||
// +blueprint-typography(true)
|
||||
// Deprecated:
|
||||
// You can pass the body selector as the first argument when used as a top-level mixin
|
||||
// +blueprint-typography("body#page-1, body#page-2, body.a-special-page-type")
|
||||
@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 a 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 {
|
||||
h1 {
|
||||
@include header-text;
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.5em;
|
||||
img {
|
||||
margin: 0; } }
|
||||
h2 {
|
||||
@include header-text;
|
||||
font-size: 2em;
|
||||
margin-bottom: 0.75em; }
|
||||
h3 {
|
||||
@include header-text;
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
margin-bottom: 1em; }
|
||||
h4 {
|
||||
@include header-text;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 1.25em; }
|
||||
h5 {
|
||||
@include header-text;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1.5em; }
|
||||
h6 {
|
||||
@include header-text;
|
||||
font-size: 1em;
|
||||
font-weight: bold; }
|
||||
h2 img, h3 img, h4 img, h5 img, h6 img {
|
||||
margin: 0; }
|
||||
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: #666666;
|
||||
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: #666666; }
|
||||
pre {
|
||||
margin: 1.5em 0;
|
||||
white-space: pre; }
|
||||
pre, code, tt {
|
||||
@include fixed-width-text; }
|
||||
li {
|
||||
ul, 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: #eeeeee; }
|
||||
.quiet {
|
||||
@include quiet; }
|
||||
.loud {
|
||||
@include loud; } }
|
||||
@ -1,37 +0,0 @@
|
||||
@import compass/utilities/text/nowrap
|
||||
@import compass/utilities/general/float
|
||||
|
||||
// Most of these utility classes are not "semantic". If you use them,
|
||||
// you are mixing your content and presentation. For shame!
|
||||
|
||||
=blueprint-utilities
|
||||
// Regular clearing apply to column that should drop below previous ones.
|
||||
.clear
|
||||
clear: both
|
||||
// turn off text wrapping for the element.
|
||||
.nowrap
|
||||
+nowrap
|
||||
// Apply to an element that has floated children to make the bottom
|
||||
// of the element fall _below_ the floated children.
|
||||
.clearfix
|
||||
+clearfix
|
||||
.small
|
||||
font-size: .8em
|
||||
margin-bottom: 1.875em
|
||||
line-height: 1.875em
|
||||
.large
|
||||
font-size: 1.2em
|
||||
line-height: 2.5em
|
||||
margin-bottom: 1.25em
|
||||
.first
|
||||
margin-left: 0
|
||||
padding-left: 0
|
||||
.last
|
||||
margin-right: 0
|
||||
padding-right: 0
|
||||
.top
|
||||
margin-top: 0
|
||||
padding-top: 0
|
||||
.bottom
|
||||
margin-bottom: 0
|
||||
padding-bottom: 0
|
||||
37
frameworks/blueprint/stylesheets/blueprint/_utilities.scss
Normal file
37
frameworks/blueprint/stylesheets/blueprint/_utilities.scss
Normal file
@ -0,0 +1,37 @@
|
||||
@import "compass/utilities/text/nowrap";
|
||||
@import "compass/utilities/general/float";
|
||||
|
||||
// Most of these utility classes are not "semantic". If you use them,
|
||||
// you are mixing your content and presentation. For shame!
|
||||
|
||||
@mixin blueprint-utilities {
|
||||
// Regular clearing apply to column that should drop below previous ones.
|
||||
.clear {
|
||||
clear: both; }
|
||||
// turn off text wrapping for the element.
|
||||
.nowrap {
|
||||
@include nowrap; }
|
||||
// Apply to an element that has floated children to make the bottom
|
||||
// of the element fall _below_ the floated children.
|
||||
.clearfix {
|
||||
@include clearfix; }
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 1.875em;
|
||||
line-height: 1.875em; }
|
||||
.large {
|
||||
font-size: 1.2em;
|
||||
line-height: 2.5em;
|
||||
margin-bottom: 1.25em; }
|
||||
.first {
|
||||
margin-left: 0;
|
||||
padding-left: 0; }
|
||||
.last {
|
||||
margin-right: 0;
|
||||
padding-right: 0; }
|
||||
.top {
|
||||
margin-top: 0;
|
||||
padding-top: 0; }
|
||||
.bottom {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0; } }
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/buttons.sass has moved to blueprint/buttons.sass"
|
||||
@import blueprint/buttons.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/colors.sass has moved to blueprint/colors.sass"
|
||||
@import blueprint/colors.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/debug.sass has moved to blueprint/debug.sass"
|
||||
@import blueprint/debug.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/fancy_type.sass has moved to blueprint/fancy_type.sass"
|
||||
@import blueprint/fancy_type.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/form.sass has moved to blueprint/form.sass"
|
||||
@import blueprint/form.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/grid.sass has moved to blueprint/grid.sass"
|
||||
@import blueprint/grid.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/interaction.sass has moved to blueprint/interaction.sass"
|
||||
@import blueprint/interaction.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/link_icons.sass has moved to blueprint/link_icons.sass"
|
||||
@import blueprint/link_icons.sass
|
||||
@ -1,3 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/liquid.sass has moved to blueprint/liquid.sass"
|
||||
@import blueprint/liquid.sass
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/reset.sass has moved to blueprint/reset.sass"
|
||||
@import blueprint/reset.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/rtl.sass has moved to blueprint/rtl.sass"
|
||||
@import blueprint/rtl.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/scaffolding.sass has moved to blueprint/scaffolding.sass"
|
||||
@import blueprint/scaffolding.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/typography.sass has moved to blueprint/typography.sass"
|
||||
@import blueprint/typography.sass
|
||||
@ -1,2 +0,0 @@
|
||||
@warn "DEPRECATION WARNING: blueprint/modules/utilities.sass has moved to blueprint/utilities.sass"
|
||||
@import blueprint/utilities.sass
|
||||
@ -1,4 +1,4 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint
|
||||
|
||||
// Generate the blueprint IE-specific customizations:
|
||||
+blueprint-ie
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint
|
||||
|
||||
// Generate the blueprint print styles:
|
||||
+blueprint-print
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
// This import applies a global reset to any page that imports this stylesheet.
|
||||
@import blueprint/reset.sass
|
||||
@import blueprint/reset
|
||||
// To configure blueprint, edit the partials/_base.sass file.
|
||||
@import partials/base.sass
|
||||
@import partials/base
|
||||
// Import all the default blueprint modules so that we can access their mixins.
|
||||
@import blueprint
|
||||
// Import the non-default scaffolding module.
|
||||
@import blueprint/scaffolding.sass
|
||||
@import blueprint/scaffolding
|
||||
|
||||
// Generate the blueprint framework according to your configuration:
|
||||
+blueprint
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import compass/utilities/general/float.sass
|
||||
@import blueprint/buttons.sass
|
||||
@import compass/utilities/general/float
|
||||
@import blueprint/buttons
|
||||
|
||||
//
|
||||
Use the following HTML code to place the buttons on your site:
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import blueprint/link_icons.sass
|
||||
@import blueprint/link-icons
|
||||
|
||||
// This turns link icons on for all links. You can change the scoping selector from
|
||||
// body to something more specific if you prefer.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint
|
||||
|
||||
// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
|
||||
// +blueprint-ie
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint
|
||||
|
||||
// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
|
||||
// +blueprint-print
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
// This import applies a global reset to any page that imports this stylesheet.
|
||||
@import blueprint/reset.sass
|
||||
@import blueprint/reset
|
||||
// To configure blueprint, edit the partials/base.sass file.
|
||||
@import partials/base.sass
|
||||
@import partials/base
|
||||
// Import all the default blueprint modules so that we can access their mixins.
|
||||
@import blueprint
|
||||
// Import the non-default scaffolding module.
|
||||
@import blueprint/scaffolding.sass
|
||||
@import blueprint/scaffolding
|
||||
|
||||
// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
|
||||
// +blueprint
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint
|
||||
|
||||
// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
|
||||
// +blueprint-ie
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// Import the non-default scaffolding module to help us get started.
|
||||
@import blueprint/scaffolding.sass
|
||||
@import blueprint/scaffolding
|
||||
|
||||
// This configuration will only apply the
|
||||
// blueprint styles to pages with a body class of "bp"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import blueprint.sass
|
||||
@import blueprint
|
||||
|
||||
// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
|
||||
// +blueprint-print
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
// This import applies a global reset to any page that imports this stylesheet.
|
||||
@import blueprint/reset.sass
|
||||
@import blueprint/reset
|
||||
|
||||
// To configure blueprint, edit the partials/base.sass file.
|
||||
@import partials/base.sass
|
||||
@import partials/base
|
||||
|
||||
// Import all the default blueprint modules so that we can access their mixins.
|
||||
@import blueprint
|
||||
|
||||
// Combine the partials into a single screen stylesheet.
|
||||
@import partials/page.sass
|
||||
@import partials/form.sass
|
||||
@import partials/two_col.sass
|
||||
@import partials/page
|
||||
@import partials/form
|
||||
@import partials/two_col
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user