diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/_blueprint.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/_blueprint.sass new file mode 100644 index 00000000..49a6cd1a --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/_blueprint.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint.sass to: @import \"blueprint\"" +@import blueprint.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_buttons.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_buttons.sass new file mode 100644 index 00000000..b571ca56 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_buttons.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/buttons.sass to: @import \"blueprint/buttons\"" +@import blueprint/buttons.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_colors.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_colors.sass new file mode 100644 index 00000000..64eca57d --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_colors.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/colors.sass to: @import \"blueprint/colors\"" +@import blueprint/colors.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_debug.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_debug.sass new file mode 100644 index 00000000..afc3e500 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_debug.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/debug.sass to: @import \"blueprint/debug\"" +@import blueprint/debug.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_fancy_type.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_fancy_type.sass new file mode 100644 index 00000000..f1b1c127 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_fancy_type.sass @@ -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 \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_form.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_form.sass new file mode 100644 index 00000000..7d224cf1 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_form.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/form.sass to: @import \"blueprint/form\"" +@import blueprint/form.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_grid.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_grid.sass new file mode 100644 index 00000000..de038ee8 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_grid.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/grid.sass to: @import \"blueprint/grid\"" +@import blueprint/grid.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_ie.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_ie.sass new file mode 100644 index 00000000..6b30f3b8 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_ie.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/ie.sass to: @import \"blueprint/ie\"" +@import blueprint/ie.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_interaction.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_interaction.sass new file mode 100644 index 00000000..58bdae4a --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_interaction.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/interaction.sass to: @import \"blueprint/interaction\"" +@import blueprint/interaction.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_link_icons.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_link_icons.sass new file mode 100644 index 00000000..5c9eb2e9 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_link_icons.sass @@ -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 \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_liquid.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_liquid.sass new file mode 100644 index 00000000..7ec0a38d --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_liquid.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/liquid.sass to: @import \"blueprint/liquid\"" +@import blueprint/liquid.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_print.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_print.sass new file mode 100644 index 00000000..7ba1a3cf --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_print.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/print.sass to: @import \"blueprint/print\"" +@import blueprint/print.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_reset.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_reset.sass new file mode 100644 index 00000000..3a5d2260 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_reset.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/reset.sass to: @import \"blueprint/reset\"" +@import blueprint/reset.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_rtl.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_rtl.sass new file mode 100644 index 00000000..264814df --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_rtl.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/rtl.sass to: @import \"blueprint/rtl\"" +@import blueprint/rtl.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_scaffolding.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_scaffolding.sass new file mode 100644 index 00000000..015a71a9 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_scaffolding.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/scaffolding.sass to: @import \"blueprint/scaffolding\"" +@import blueprint/scaffolding.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_screen.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_screen.sass new file mode 100644 index 00000000..f0dc9050 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_screen.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: blueprint/screen.sass will be removed. Please @import \"blueprint\" instead." +@import blueprint.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/_typography.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_typography.sass similarity index 100% rename from frameworks/blueprint/stylesheets/blueprint/_typography.sass rename to frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_typography.sass diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_utilities.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_utilities.sass new file mode 100644 index 00000000..7491c55b --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_utilities.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/utilities.sass to: @import \"blueprint/utilities\"" +@import blueprint/utilities.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_buttons.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_buttons.sass new file mode 100644 index 00000000..b2589cce --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_buttons.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/buttons.sass to: @import \"blueprint/buttons\"" +@import blueprint/buttons.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_colors.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_colors.sass new file mode 100644 index 00000000..395b6369 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_colors.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/colors.sass to: @import \"blueprint/colors\"" +@import blueprint/colors.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_debug.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_debug.sass new file mode 100644 index 00000000..2596a3c9 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_debug.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/debug.sass to: @import \"blueprint/debug\"" +@import blueprint/debug.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_fancy_type.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_fancy_type.sass new file mode 100644 index 00000000..61cbaca4 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_fancy_type.sass @@ -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 \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_form.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_form.sass new file mode 100644 index 00000000..8bcc82d9 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_form.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/form.sass to: @import \"blueprint/form\"" +@import blueprint/form.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_grid.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_grid.sass new file mode 100644 index 00000000..3e9877e3 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_grid.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/grid.sass to: @import \"blueprint/grid\"" +@import blueprint/grid.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_interaction.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_interaction.sass new file mode 100644 index 00000000..05d8a550 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_interaction.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/interaction.sass to: @import \"blueprint/interaction\"" +@import blueprint/interaction.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_link_icons.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_link_icons.sass new file mode 100644 index 00000000..8850e512 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_link_icons.sass @@ -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 \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_liquid.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_liquid.sass new file mode 100644 index 00000000..f646e512 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_liquid.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/liquid.sass to: @import \"blueprint/liquid\"" +@import blueprint/liquid.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_reset.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_reset.sass new file mode 100644 index 00000000..ec7fd44e --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_reset.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/reset.sass to: @import \"blueprint/reset\"" +@import blueprint/reset.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_rtl.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_rtl.sass new file mode 100644 index 00000000..af7cf7b9 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_rtl.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/rtl.sass to: @import \"blueprint/rtl\"" +@import blueprint/rtl.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_scaffolding.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_scaffolding.sass new file mode 100644 index 00000000..28954f7e --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_scaffolding.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/scaffolding.sass to: @import \"blueprint/scaffolding\"" +@import blueprint/scaffolding.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_typography.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_typography.sass new file mode 100644 index 00000000..fc472744 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_typography.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/typography.sass to: @import \"blueprint/typography\"" +@import blueprint/typography.scss \ No newline at end of file diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_utilities.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_utilities.sass new file mode 100644 index 00000000..9926f351 --- /dev/null +++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/modules/_utilities.sass @@ -0,0 +1,2 @@ +@warn "DEPRECATED: Please change your @import of blueprint/modules/utilities.sass to: @import \"blueprint/utilities\"" +@import blueprint/utilities.scss \ No newline at end of file diff --git a/frameworks/blueprint/stylesheets/_blueprint.sass b/frameworks/blueprint/stylesheets/_blueprint.sass deleted file mode 100644 index 7342317a..00000000 --- a/frameworks/blueprint/stylesheets/_blueprint.sass +++ /dev/null @@ -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 diff --git a/frameworks/blueprint/stylesheets/_blueprint.scss b/frameworks/blueprint/stylesheets/_blueprint.scss new file mode 100644 index 00000000..bbf669cc --- /dev/null +++ b/frameworks/blueprint/stylesheets/_blueprint.scss @@ -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; } diff --git a/frameworks/blueprint/stylesheets/blueprint/_buttons.sass b/frameworks/blueprint/stylesheets/blueprint/_buttons.sass deleted file mode 100644 index 97c6441a..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_buttons.sass +++ /dev/null @@ -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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_buttons.scss b/frameworks/blueprint/stylesheets/blueprint/_buttons.scss new file mode 100644 index 00000000..d50ae240 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_buttons.scss @@ -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; } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_colors.sass b/frameworks/blueprint/stylesheets/blueprint/_colors.sass deleted file mode 100644 index 278951f7..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_colors.sass +++ /dev/null @@ -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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_colors.scss b/frameworks/blueprint/stylesheets/blueprint/_colors.scss new file mode 100644 index 00000000..1582aae6 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_colors.scss @@ -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; diff --git a/frameworks/blueprint/stylesheets/blueprint/_debug.sass b/frameworks/blueprint/stylesheets/blueprint/_debug.sass deleted file mode 100644 index 4b93f23f..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_debug.sass +++ /dev/null @@ -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) - diff --git a/frameworks/blueprint/stylesheets/blueprint/_debug.scss b/frameworks/blueprint/stylesheets/blueprint/_debug.scss new file mode 100644 index 00000000..fcdc4e37 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_debug.scss @@ -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); } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss b/frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss new file mode 100644 index 00000000..78f4f6eb --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss @@ -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: +// asdf +// 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: +// “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; } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_fancy_type.sass b/frameworks/blueprint/stylesheets/blueprint/_fancy_type.sass deleted file mode 100644 index fdbe9089..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_fancy_type.sass +++ /dev/null @@ -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: - asdf - 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: - “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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_form.sass b/frameworks/blueprint/stylesheets/blueprint/_form.sass deleted file mode 100644 index 82d86d34..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_form.sass +++ /dev/null @@ -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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_form.scss b/frameworks/blueprint/stylesheets/blueprint/_form.scss new file mode 100644 index 00000000..57edf4e5 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_form.scss @@ -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; } } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_grid.sass b/frameworks/blueprint/stylesheets/blueprint/_grid.sass deleted file mode 100644 index 8543618d..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_grid.sass +++ /dev/null @@ -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: -//
One
-//
Two
-// 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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_grid.scss b/frameworks/blueprint/stylesheets/blueprint/_grid.scss new file mode 100644 index 00000000..30caa6b0 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_grid.scss @@ -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: +//
One
+//
Two
+// 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; } diff --git a/frameworks/blueprint/stylesheets/blueprint/_ie.sass b/frameworks/blueprint/stylesheets/blueprint/_ie.sass deleted file mode 100644 index 31f74055..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_ie.sass +++ /dev/null @@ -1,108 +0,0 @@ -// @doc off -// The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included -// into IE like so: -// -// @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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_ie.scss b/frameworks/blueprint/stylesheets/blueprint/_ie.scss new file mode 100644 index 00000000..dfa96d41 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_ie.scss @@ -0,0 +1,108 @@ +// @doc off +// The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included +// into IE like so: +// +// @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; } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_interaction.sass b/frameworks/blueprint/stylesheets/blueprint/_interaction.sass deleted file mode 100644 index ff5e4054..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_interaction.sass +++ /dev/null @@ -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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_interaction.scss b/frameworks/blueprint/stylesheets/blueprint/_interaction.scss new file mode 100644 index 00000000..00a4760e --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_interaction.scss @@ -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; } diff --git a/frameworks/blueprint/stylesheets/blueprint/_link-icons.scss b/frameworks/blueprint/stylesheets/blueprint/_link-icons.scss new file mode 100644 index 00000000..d8763a65 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_link-icons.scss @@ -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); } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_link_icons.sass b/frameworks/blueprint/stylesheets/blueprint/_link_icons.sass deleted file mode 100644 index 58933fed..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_link_icons.sass +++ /dev/null @@ -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) diff --git a/frameworks/blueprint/stylesheets/blueprint/_liquid.sass b/frameworks/blueprint/stylesheets/blueprint/_liquid.sass deleted file mode 100644 index 80b149f6..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_liquid.sass +++ /dev/null @@ -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 - diff --git a/frameworks/blueprint/stylesheets/blueprint/_liquid.scss b/frameworks/blueprint/stylesheets/blueprint/_liquid.scss new file mode 100644 index 00000000..b1cf43e1 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_liquid.scss @@ -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; } diff --git a/frameworks/blueprint/stylesheets/blueprint/_print.sass b/frameworks/blueprint/stylesheets/blueprint/_print.sass deleted file mode 100644 index de2a7008..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_print.sass +++ /dev/null @@ -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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_print.scss b/frameworks/blueprint/stylesheets/blueprint/_print.scss new file mode 100644 index 00000000..be16259b --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_print.scss @@ -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; } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_reset.sass b/frameworks/blueprint/stylesheets/blueprint/_reset.sass deleted file mode 100644 index a821fb48..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_reset.sass +++ /dev/null @@ -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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_reset.scss b/frameworks/blueprint/stylesheets/blueprint/_reset.scss new file mode 100644 index 00000000..620d68be --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_reset.scss @@ -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; } diff --git a/frameworks/blueprint/stylesheets/blueprint/_rtl.sass b/frameworks/blueprint/stylesheets/blueprint/_rtl.sass deleted file mode 100644 index 44401917..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_rtl.sass +++ /dev/null @@ -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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_rtl.scss b/frameworks/blueprint/stylesheets/blueprint/_rtl.scss new file mode 100644 index 00000000..fdd5c35c --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_rtl.scss @@ -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; } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_scaffolding.sass b/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss similarity index 63% rename from frameworks/blueprint/stylesheets/blueprint/_scaffolding.sass rename to frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss index 276f4601..a62e2680 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_scaffolding.sass +++ b/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss @@ -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; } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_screen.sass b/frameworks/blueprint/stylesheets/blueprint/_screen.sass deleted file mode 100644 index 0d524efb..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_screen.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: The blueprint/screen.sass will be removed. Please import blueprint.sass instead." -@import blueprint.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/_typography.scss b/frameworks/blueprint/stylesheets/blueprint/_typography.scss new file mode 100644 index 00000000..4aaae78c --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_typography.scss @@ -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; } } diff --git a/frameworks/blueprint/stylesheets/blueprint/_utilities.sass b/frameworks/blueprint/stylesheets/blueprint/_utilities.sass deleted file mode 100644 index 00dbeb3d..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/_utilities.sass +++ /dev/null @@ -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 diff --git a/frameworks/blueprint/stylesheets/blueprint/_utilities.scss b/frameworks/blueprint/stylesheets/blueprint/_utilities.scss new file mode 100644 index 00000000..004cdc69 --- /dev/null +++ b/frameworks/blueprint/stylesheets/blueprint/_utilities.scss @@ -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; } } diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass deleted file mode 100644 index 1bbfbfb1..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/buttons.sass has moved to blueprint/buttons.sass" -@import blueprint/buttons.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass deleted file mode 100644 index c786d7c9..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/colors.sass has moved to blueprint/colors.sass" -@import blueprint/colors.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass deleted file mode 100644 index 9cddb69b..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/debug.sass has moved to blueprint/debug.sass" -@import blueprint/debug.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass deleted file mode 100644 index 0529f7bd..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/fancy_type.sass has moved to blueprint/fancy_type.sass" -@import blueprint/fancy_type.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_form.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_form.sass deleted file mode 100644 index 4b35531f..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_form.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/form.sass has moved to blueprint/form.sass" -@import blueprint/form.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass deleted file mode 100644 index 51f28c02..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/grid.sass has moved to blueprint/grid.sass" -@import blueprint/grid.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass deleted file mode 100644 index e502116e..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/interaction.sass has moved to blueprint/interaction.sass" -@import blueprint/interaction.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass deleted file mode 100644 index 306cecca..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/link_icons.sass has moved to blueprint/link_icons.sass" -@import blueprint/link_icons.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass deleted file mode 100644 index 502caaff..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass +++ /dev/null @@ -1,3 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/liquid.sass has moved to blueprint/liquid.sass" -@import blueprint/liquid.sass - diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass deleted file mode 100644 index f2effa40..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/reset.sass has moved to blueprint/reset.sass" -@import blueprint/reset.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass deleted file mode 100644 index 68b0fc1f..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/rtl.sass has moved to blueprint/rtl.sass" -@import blueprint/rtl.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass deleted file mode 100644 index 5f43fd10..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/scaffolding.sass has moved to blueprint/scaffolding.sass" -@import blueprint/scaffolding.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass deleted file mode 100644 index c0f4deda..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/typography.sass has moved to blueprint/typography.sass" -@import blueprint/typography.sass diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass deleted file mode 100644 index 1797fc5e..00000000 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass +++ /dev/null @@ -1,2 +0,0 @@ -@warn "DEPRECATION WARNING: blueprint/modules/utilities.sass has moved to blueprint/utilities.sass" -@import blueprint/utilities.sass diff --git a/frameworks/blueprint/templates/basic/ie.sass b/frameworks/blueprint/templates/basic/ie.sass index 9485bcf9..9423f803 100644 --- a/frameworks/blueprint/templates/basic/ie.sass +++ b/frameworks/blueprint/templates/basic/ie.sass @@ -1,4 +1,4 @@ -@import blueprint.sass +@import blueprint // Generate the blueprint IE-specific customizations: +blueprint-ie diff --git a/frameworks/blueprint/templates/basic/print.sass b/frameworks/blueprint/templates/basic/print.sass index b1c9386a..e92c4631 100644 --- a/frameworks/blueprint/templates/basic/print.sass +++ b/frameworks/blueprint/templates/basic/print.sass @@ -1,4 +1,4 @@ -@import blueprint.sass +@import blueprint // Generate the blueprint print styles: +blueprint-print diff --git a/frameworks/blueprint/templates/basic/screen.sass b/frameworks/blueprint/templates/basic/screen.sass index 9fe8f70f..4245cab8 100644 --- a/frameworks/blueprint/templates/basic/screen.sass +++ b/frameworks/blueprint/templates/basic/screen.sass @@ -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 diff --git a/frameworks/blueprint/templates/buttons/buttons.sass b/frameworks/blueprint/templates/buttons/buttons.sass index 2e4aa310..d42ca4c1 100644 --- a/frameworks/blueprint/templates/buttons/buttons.sass +++ b/frameworks/blueprint/templates/buttons/buttons.sass @@ -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: diff --git a/frameworks/blueprint/templates/link_icons/link_icons.sass b/frameworks/blueprint/templates/link_icons/link_icons.sass index 5fe9a848..a45f0d09 100644 --- a/frameworks/blueprint/templates/link_icons/link_icons.sass +++ b/frameworks/blueprint/templates/link_icons/link_icons.sass @@ -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. diff --git a/frameworks/blueprint/templates/project/ie.sass b/frameworks/blueprint/templates/project/ie.sass index 31aad76a..21441e1f 100644 --- a/frameworks/blueprint/templates/project/ie.sass +++ b/frameworks/blueprint/templates/project/ie.sass @@ -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 diff --git a/frameworks/blueprint/templates/project/print.sass b/frameworks/blueprint/templates/project/print.sass index e3727d9e..834a1887 100644 --- a/frameworks/blueprint/templates/project/print.sass +++ b/frameworks/blueprint/templates/project/print.sass @@ -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 diff --git a/frameworks/blueprint/templates/project/screen.sass b/frameworks/blueprint/templates/project/screen.sass index bc0160a3..04c92239 100644 --- a/frameworks/blueprint/templates/project/screen.sass +++ b/frameworks/blueprint/templates/project/screen.sass @@ -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 diff --git a/frameworks/blueprint/templates/semantic/ie.sass b/frameworks/blueprint/templates/semantic/ie.sass index 31aad76a..21441e1f 100644 --- a/frameworks/blueprint/templates/semantic/ie.sass +++ b/frameworks/blueprint/templates/semantic/ie.sass @@ -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 diff --git a/frameworks/blueprint/templates/semantic/partials/_page.sass b/frameworks/blueprint/templates/semantic/partials/_page.sass index 0ac6e5fb..59123903 100644 --- a/frameworks/blueprint/templates/semantic/partials/_page.sass +++ b/frameworks/blueprint/templates/semantic/partials/_page.sass @@ -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" diff --git a/frameworks/blueprint/templates/semantic/print.sass b/frameworks/blueprint/templates/semantic/print.sass index e3727d9e..834a1887 100644 --- a/frameworks/blueprint/templates/semantic/print.sass +++ b/frameworks/blueprint/templates/semantic/print.sass @@ -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 diff --git a/frameworks/blueprint/templates/semantic/screen.sass b/frameworks/blueprint/templates/semantic/screen.sass index 88b00df2..08070bd3 100644 --- a/frameworks/blueprint/templates/semantic/screen.sass +++ b/frameworks/blueprint/templates/semantic/screen.sass @@ -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