From b69138059a39bd4f164a001fafc4f945cbea8a81 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sat, 21 Nov 2009 13:19:18 -0800 Subject: [PATCH] [Blueprint] Moved the blueprint/modules/*.sass files to blueprint/*.sass. Old imports are still supported but are deprecated. --- examples/blueprint_default/index.html.haml | 6 +- examples/blueprint_default/src/screen.sass | 2 +- examples/blueprint_plugins/index.html.haml | 12 +- examples/blueprint_plugins/src/buttons.sass | 4 +- .../blueprint_plugins/src/link_icons.sass | 2 +- .../blueprint_plugins/src/rtl_screen.sass | 6 +- examples/blueprint_plugins/src/screen.sass | 4 +- examples/blueprint_semantic/src/liquid.sass | 8 +- examples/blueprint_semantic/src/screen.sass | 6 +- examples/compass/src/utilities.sass | 4 +- .../blueprint/stylesheets/_blueprint.sass | 30 ++- .../stylesheets/blueprint/_buttons.sass | 84 ++++++++ .../stylesheets/blueprint/_colors.sass | 33 ++++ .../stylesheets/blueprint/_debug.sass | 9 + .../stylesheets/blueprint/_fancy_type.sass | 82 ++++++++ .../stylesheets/blueprint/_form.sass | 55 ++++++ .../stylesheets/blueprint/_grid.sass | 178 +++++++++++++++++ .../stylesheets/blueprint/_interaction.sass | 58 ++++++ .../stylesheets/blueprint/_link_icons.sass | 44 +++++ .../stylesheets/blueprint/_liquid.sass | 141 ++++++++++++++ .../stylesheets/blueprint/_print.sass | 2 +- .../stylesheets/blueprint/_reset.sass | 57 +++++- .../blueprint/stylesheets/blueprint/_rtl.sass | 122 ++++++++++++ .../stylesheets/blueprint/_scaffolding.sass | 47 +++++ .../stylesheets/blueprint/_screen.sass | 31 +-- .../stylesheets/blueprint/_typography.sass | 160 ++++++++++++++++ .../stylesheets/blueprint/_utilities.sass | 37 ++++ .../blueprint/modules/_buttons.sass | 86 +-------- .../blueprint/modules/_colors.sass | 35 +--- .../stylesheets/blueprint/modules/_debug.sass | 11 +- .../blueprint/modules/_fancy_type.sass | 84 +------- .../stylesheets/blueprint/modules/_form.sass | 57 +----- .../stylesheets/blueprint/modules/_grid.sass | 180 +----------------- .../blueprint/modules/_interaction.sass | 60 +----- .../blueprint/modules/_link_icons.sass | 46 +---- .../blueprint/modules/_liquid.sass | 142 +------------- .../stylesheets/blueprint/modules/_reset.sass | 58 +----- .../stylesheets/blueprint/modules/_rtl.sass | 124 +----------- .../blueprint/modules/_scaffolding.sass | 49 +---- .../blueprint/modules/_typography.sass | 162 +--------------- .../blueprint/modules/_utilities.sass | 39 +--- .../blueprint/templates/buttons/buttons.sass | 4 +- .../templates/link_icons/link_icons.sass | 2 +- .../blueprint/templates/project/screen.sass | 2 +- .../stylesheets/blueprint/sass/screen.sass | 2 +- .../blueprint/sass/typography.sass | 4 +- 46 files changed, 1199 insertions(+), 1172 deletions(-) create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_buttons.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_colors.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_debug.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_fancy_type.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_form.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_grid.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_interaction.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_link_icons.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_liquid.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_rtl.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_scaffolding.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_typography.sass create mode 100644 lib/compass/frameworks/blueprint/stylesheets/blueprint/_utilities.sass diff --git a/examples/blueprint_default/index.html.haml b/examples/blueprint_default/index.html.haml index 8a59a9cf..3b25dc6e 100644 --- a/examples/blueprint_default/index.html.haml +++ b/examples/blueprint_default/index.html.haml @@ -32,7 +32,7 @@ %a{ :href => "parts/grid.html" } Grid %td - %a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass" } + %a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/_grid.sass" } grid.sass %td Tests classes provided by the grid module. @@ -41,7 +41,7 @@ %a{ :href => "parts/elements.html" } Typography %td - %a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass" } + %a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/_typography.sass" } typography.sass %td Tests HTML elements which gets set in the typography module. @@ -50,7 +50,7 @@ %a{ :href => "parts/forms.html" } Forms %td - %a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/modules/_form.sass" } + %a{ :href => "../../frameworks/blueprint/stylesheets/blueprint/_form.sass" } form.sass %td Tests classes and default look provided by the form module. diff --git a/examples/blueprint_default/src/screen.sass b/examples/blueprint_default/src/screen.sass index 0ca30638..9c336708 100644 --- a/examples/blueprint_default/src/screen.sass +++ b/examples/blueprint_default/src/screen.sass @@ -1,5 +1,5 @@ @import blueprint.sass -@import blueprint/modules/scaffolding.sass +@import blueprint/scaffolding.sass @import compass/reset.sass +blueprint diff --git a/examples/blueprint_plugins/index.html.haml b/examples/blueprint_plugins/index.html.haml index 2cdb7ba6..004dbc09 100644 --- a/examples/blueprint_plugins/index.html.haml +++ b/examples/blueprint_plugins/index.html.haml @@ -31,13 +31,13 @@ %a{ :href => "plugins/fancy_type.html" } Fancy Type %td - %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass" } + %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/_grid.sass" } grid.sass , - %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass" } + %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/_typography.sass" } typography.sass , - %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass" } + %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/_fancy_type.sass" } fancy_type.sass %td A simple sample page, with common elements and fancy type. @@ -46,7 +46,7 @@ %a{ :href => "plugins/buttons.html" } Buttons %td - %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass" } + %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/_buttons.sass" } buttons.sass %td A simple page, showing links and buttons styled using the button plugin. @@ -55,7 +55,7 @@ %a{ :href => "plugins/link_icons.html" } Link Icons %td - %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass" } + %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/_link_icons.sass" } link_icons.sass %td A simple page, showing links icons. @@ -64,7 +64,7 @@ %a{ :href => "plugins/rtl.html" } RTL %td - %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass" } + %a{ :href => "http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/_rtl.sass" } rtl.sass %td A simple page, showing a right-to-left grid layout. diff --git a/examples/blueprint_plugins/src/buttons.sass b/examples/blueprint_plugins/src/buttons.sass index e8ca96e6..9fdd8578 100644 --- a/examples/blueprint_plugins/src/buttons.sass +++ b/examples/blueprint_plugins/src/buttons.sass @@ -1,5 +1,5 @@ @import compass/utilities/general/float.sass -@import blueprint/modules/buttons.sass +@import blueprint/buttons.sass // Use the following HTML code to place the buttons on your site: @@ -23,7 +23,7 @@ a.button +anchor-button("left") // All the button color mixins take 4 optional arguments: // font color, background color, border color, border highlight color - // the first three default to constants set in blueprint/modules/buttons.sass + // the first three default to constants set in blueprint/buttons.sass // the last one defaults to a shade lighter than the border color. +button-colors +button-hover-colors diff --git a/examples/blueprint_plugins/src/link_icons.sass b/examples/blueprint_plugins/src/link_icons.sass index a095e833..5fe9a848 100644 --- a/examples/blueprint_plugins/src/link_icons.sass +++ b/examples/blueprint_plugins/src/link_icons.sass @@ -1,4 +1,4 @@ -@import blueprint/modules/link_icons.sass +@import blueprint/link_icons.sass // 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/examples/blueprint_plugins/src/rtl_screen.sass b/examples/blueprint_plugins/src/rtl_screen.sass index 5cf5459b..daa50b70 100644 --- a/examples/blueprint_plugins/src/rtl_screen.sass +++ b/examples/blueprint_plugins/src/rtl_screen.sass @@ -1,7 +1,7 @@ @import blueprint.sass -@import blueprint/modules/fancy_type.sass -@import blueprint/modules/scaffolding.sass -@import blueprint/modules/rtl.sass +@import blueprint/fancy_type.sass +@import blueprint/scaffolding.sass +@import blueprint/rtl.sass @import compass/reset.sass diff --git a/examples/blueprint_plugins/src/screen.sass b/examples/blueprint_plugins/src/screen.sass index 4350dddb..3a7bf14d 100644 --- a/examples/blueprint_plugins/src/screen.sass +++ b/examples/blueprint_plugins/src/screen.sass @@ -1,6 +1,6 @@ @import blueprint.sass -@import blueprint/modules/fancy_type.sass -@import blueprint/modules/scaffolding.sass +@import blueprint/fancy_type.sass +@import blueprint/scaffolding.sass @import compass/reset.sass diff --git a/examples/blueprint_semantic/src/liquid.sass b/examples/blueprint_semantic/src/liquid.sass index 85267c7c..d57381af 100644 --- a/examples/blueprint_semantic/src/liquid.sass +++ b/examples/blueprint_semantic/src/liquid.sass @@ -1,7 +1,7 @@ @import blueprint.sass -@import blueprint/modules/fancy_type.sass -@import blueprint/modules/scaffolding.sass -@import blueprint/modules/liquid.sass +@import blueprint/fancy_type.sass +@import blueprint/scaffolding.sass +@import blueprint/liquid.sass @import compass/reset.sass .container @@ -66,4 +66,4 @@ body#sample +reset-font +alt #parting-thought - +alt \ No newline at end of file + +alt diff --git a/examples/blueprint_semantic/src/screen.sass b/examples/blueprint_semantic/src/screen.sass index a348df2e..d97a0426 100644 --- a/examples/blueprint_semantic/src/screen.sass +++ b/examples/blueprint_semantic/src/screen.sass @@ -1,6 +1,6 @@ @import blueprint.sass -@import blueprint/modules/fancy_type.sass -@import blueprint/modules/scaffolding.sass +@import blueprint/fancy_type.sass +@import blueprint/scaffolding.sass @import compass/reset.sass body.blueprint @@ -67,4 +67,4 @@ body#sample +reset-font +alt #parting-thought - +alt \ No newline at end of file + +alt diff --git a/examples/compass/src/utilities.sass b/examples/compass/src/utilities.sass index 404a8d6d..b79ab94a 100644 --- a/examples/compass/src/utilities.sass +++ b/examples/compass/src/utilities.sass @@ -1,8 +1,8 @@ @import compass/reset.sass @import compass/utilities.sass @import yui/modules/base.sass -@import blueprint/modules/grid.sass -@import blueprint/modules/scaffolding.sass +@import blueprint/grid.sass +@import blueprint/scaffolding.sass @import compass/utilities/text/ellipsis.sass html diff --git a/lib/compass/frameworks/blueprint/stylesheets/_blueprint.sass b/lib/compass/frameworks/blueprint/stylesheets/_blueprint.sass index 8bd2084e..bd336ece 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/_blueprint.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/_blueprint.sass @@ -1,3 +1,31 @@ -@import blueprint/screen.sass +@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 can 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") + @if not (!body_selector == "body" or !body_selector == true) + @debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint, pass true as the first argument and mix it into #{!body_selector}." + +blueprint-typography(!body_selector) + +blueprint-utilities + +blueprint-grid + +blueprint-debug + +blueprint-interaction + +blueprint-form diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_buttons.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_buttons.sass new file mode 100644 index 00000000..11932cfd --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_buttons.sass @@ -0,0 +1,84 @@ +@import compass/css3/inline_block.sass +@import compass/utilities/general/float.sass + +// 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/lib/compass/frameworks/blueprint/stylesheets/blueprint/_colors.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_colors.sass new file mode 100644 index 00000000..278951f7 --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_colors.sass @@ -0,0 +1,33 @@ +!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/lib/compass/frameworks/blueprint/stylesheets/blueprint/_debug.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_debug.sass new file mode 100644 index 00000000..4b93f23f --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_debug.sass @@ -0,0 +1,9 @@ +=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/lib/compass/frameworks/blueprint/stylesheets/blueprint/_fancy_type.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_fancy_type.sass new file mode 100644 index 00000000..12ff4eaa --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_fancy_type.sass @@ -0,0 +1,82 @@ +@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/lib/compass/frameworks/blueprint/stylesheets/blueprint/_form.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_form.sass new file mode 100644 index 00000000..1ff6c040 --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_form.sass @@ -0,0 +1,55 @@ +@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] + 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, input.title + 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, + textarea, + select + border= 1px "solid" !unfocused_border_color + &:focus + border= 1px "solid" !focus_border_color diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_grid.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_grid.sass new file mode 100644 index 00000000..3edd3897 --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_grid.sass @@ -0,0 +1,178 @@ +// -------------------------------------------------------------- +// 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.sass + +// 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 + + +=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 + + +// 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. +// TODO add this to span mixin when we have optional arguments +=last + margin-right: 0 + +=span(!n, !override = false) + !width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1)) + @if !override + width= !width !important + @else + width= !width + +=column-base(!last = false) + +float-left + @if !last + +last + @else + margin-right= !blueprint_grid_margin + * html & + overflow-x: hidden + +// Use this mixins to set the width of n columns. +=column(!n, !last = false) + +column-base(!last) + +span(!n) + + +// Mixin to a column to append n empty cols. +=append(!n) + padding-right= (!blueprint_grid_outer_width) * !n + +// Mixin to a column to prepend n empty cols. +=prepend(!n) + padding-left= (!blueprint_grid_outer_width) * !n + +=append-bottom(!amount = 1.5em) + margin-bottom= !amount + +=prepend-top(!amount = 1.5em) + margin-top= !amount + +=pull-base + +float-left + position: relative + +=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 + +// mixin to a column to move it n columns to the left +=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 diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_interaction.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_interaction.sass new file mode 100644 index 00000000..ff5e4054 --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_interaction.sass @@ -0,0 +1,58 @@ +@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/lib/compass/frameworks/blueprint/stylesheets/blueprint/_link_icons.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_link_icons.sass new file mode 100644 index 00000000..58933fed --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_link_icons.sass @@ -0,0 +1,44 @@ +=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/lib/compass/frameworks/blueprint/stylesheets/blueprint/_liquid.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_liquid.sass new file mode 100644 index 00000000..0e41d32e --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_liquid.sass @@ -0,0 +1,141 @@ +// -------------------------------------------------------------- +// 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.sass + +// 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 ||= 4.173% +!blueprint_liquid_grid_margin ||= 0.833em + +// 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 * 4) + +=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_width * !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 * !n) - ((!blueprint_liquid_grid_width * !n) % 1) + +=prepend(!n) + padding-left= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1) + +=pull(!n, !last = false) + margin-left= (!blueprint_liquid_grid_push_pull * !n) + +=push(!n) + +float-right + margin: + top: 0 + left: 1.5em + right= (!blueprint_liquid_grid_push_pull * !n) + bottom: 0 + +=border + border-right: 1px solid #eee + +=colborder + padding-right: 2% + margin-right: 2% + +border + +=colruler + background: #ddd + color: #ddd + clear: both + width: 100% + height: 0.083em + margin: 0 0 1.583em + border: none + +=colspacer + +colruler + background: #fff + color: #fff + diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_print.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_print.sass index 566aaa95..4ed82b27 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_print.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_print.sass @@ -1,4 +1,4 @@ -@import modules/typography.sass +@import typography.sass @import compass/utilities/general/float.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_reset.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_reset.sass index 2c9178f2..2045a794 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_reset.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_reset.sass @@ -1,3 +1,56 @@ -@import modules/reset.sass +// Global reset rules. +// For more specific resets, use the reset mixins provided below +=blueprint-global-reset + html, body + +blueprint-reset + +blueprint-nested-reset -+blueprint-global-reset \ No newline at end of file +// 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/lib/compass/frameworks/blueprint/stylesheets/blueprint/_rtl.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_rtl.sass new file mode 100644 index 00000000..616b92f0 --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_rtl.sass @@ -0,0 +1,122 @@ +@import grid.sass +@import compass/utilities/general/float.sass + +// 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 + * 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" + @debug "[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/lib/compass/frameworks/blueprint/stylesheets/blueprint/_scaffolding.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_scaffolding.sass new file mode 100644 index 00000000..fc597951 --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_scaffolding.sass @@ -0,0 +1,47 @@ +@import grid.sass +// 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. + +// The +blueprint-scaffolding mixin must be mixed into the top level of your stylesheet. +// However, you can customize the body selector if you wish to control the scope +// of this mixin. Examples: +// Apply to any page including the stylesheet: +// +blueprint-scaffolding +// Scoped by a single presentational body class: +// +blueprint-scaffolding("body.blueprint") +// Semantically: +// +blueprint-scaffolding("body#page-1, body#page-2, body.a-special-page-type") +// 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 + +// 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 +box to create a padded box inside a column. +=box + padding: 1.5em + margin-bottom: 1.5em + background: #E5ECF9 + +=blueprint-scaffolding-defaults + .box + +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 + // Border with more whitespace, spans one column. + div.colborder + +colborder + hr + +colruler + hr.space + +colspacer diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_screen.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_screen.sass index 824a62af..6f585429 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_screen.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_screen.sass @@ -1,29 +1,2 @@ -@import modules/colors.sass -@import modules/grid.sass -@import modules/typography.sass -@import modules/utilities.sass -@import modules/form.sass -@import modules/interaction.sass -@import modules/debug.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 can 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") - @if not (!body_selector == "body" or !body_selector == true) - @debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint, pass true as the first argument and mix it into #{!body_selector}." - +blueprint-typography(!body_selector) - +blueprint-utilities - +blueprint-grid - +blueprint-debug - +blueprint-interaction - +blueprint-form +@debug "DEPRECATION WARNING: The blueprint/screen.sass will be removed. Please import blueprint.sass instead." +@import blueprint.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_typography.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_typography.sass new file mode 100644 index 00000000..6f230bfb --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_typography.sass @@ -0,0 +1,160 @@ +@import colors.sass +@import compass/utilities/links/link_colors.sass +@import compass/utilities/general/float.sass + +!blueprint_font_family ||= "Helvetica Neue, Arial, Helvetica, sans-serif" +!blueprint_fixed_font_family ||= "'andale mono', 'lucida console', monospace" +!blueprint_font_size ||= 12px + +// 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") +=blueprint-typography(!body_selector = "body") + @if !body_selector == true + +blueprint-typography-body + +blueprint-typography-defaults + @else + #{!body_selector} + +blueprint-typography-body + @if !body_selector != "body" + @debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint-typography, pass true as the first argument and mix it into #{!body_selector}." + +blueprint-typography-defaults + @if !body_selector == "body" + +blueprint-typography-defaults + +=normal-text + font-family= !blueprint_font_family + color= !font_color + +=fixed-width-text + font= 1em !blueprint_fixed_font_family + line-height: 1.5 + +=header-text + font-weight: normal + color= !header_color + +=quiet + color= !quiet_color + +=loud + color= !loud_color + +=blueprint-typography-body(!font_size = !blueprint_font_size) + line-height: 1.5 + +normal-text + font-size= 100% * !font_size / 16px + +=blueprint-typography-defaults + h1 + +header-text + font-size: 3em + line-height: 1 + margin-bottom: 0.5em + img + margin: 0 + h2 + +header-text + font-size: 2em + margin-bottom: 0.75em + h3 + +header-text + font-size: 1.5em + line-height: 1 + margin-bottom: 1em + h4 + +header-text + font-size: 1.2em + line-height: 1.25 + margin-bottom: 1.25em + h5 + +header-text + font-size: 1em + font-weight: bold + margin-bottom: 1.5em + h6 + +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 + +float-left + margin: 1.5em 1.5em 1.5em 0 + padding: 0 + img.right + +float-right + margin: 1.5em 0 1.5em 1.5em + padding: 0 + a + text-decoration: underline + +link-colors(!link_color, !link_hover_color, !link_active_color, !link_visited_color, !link_focus_color) + blockquote + margin: 1.5em + color: #666 + 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 #666 + address + margin: 0 0 1.5em + font-style: italic + del + color: #666 + pre + margin: 1.5em 0 + white-space: pre + pre, code, tt + +fixed-width-text + li ul, li ol + margin: 0 1.5em + ul + margin: 0 1.5em 1.5em 1.5em + list-style-type: disc + ol + margin: 0 1.5em 1.5em 1.5em + 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: #eee + .quiet + +quiet + .loud + +loud diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/_utilities.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_utilities.sass new file mode 100644 index 00000000..e7812d2d --- /dev/null +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/_utilities.sass @@ -0,0 +1,37 @@ +@import compass/utilities/text/nowrap.sass +@import compass/utilities/general/float.sass + +// 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/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass index 11932cfd..04cd2ea3 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass @@ -1,84 +1,2 @@ -@import compass/css3/inline_block.sass -@import compass/utilities/general/float.sass - -// 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 +@debug "DEPRECATION WARINING: blueprint/modules/buttons.sass has moved to blueprint/buttons.sass" +@import blueprint/buttons.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass index 278951f7..5dd98c92 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass @@ -1,33 +1,2 @@ -!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 +@debug "DEPRECATION WARINING: blueprint/modules/colors.sass has moved to blueprint/colors.sass" +@import blueprint/colors.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass index 4b93f23f..a78c6e98 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass @@ -1,9 +1,2 @@ -=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) - +@debug "DEPRECATION WARINING: blueprint/modules/debug.sass has moved to blueprint/debug.sass" +@import blueprint/debug.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass index 71d8d6f0..5a43f5f9 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass @@ -1,82 +1,2 @@ -@import typography.sass - -// - To install the fancy type plugin: - 1. import the fancy_type module: @import blueprint/modules/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 +@debug "DEPRECATION WARINING: blueprint/modules/fancy_type.sass has moved to blueprint/fancy_type.sass" +@import blueprint/fancy_type.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_form.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_form.sass index 1ff6c040..7b455c81 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_form.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_form.sass @@ -1,55 +1,2 @@ -@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] - 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, input.title - 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, - textarea, - select - border= 1px "solid" !unfocused_border_color - &:focus - border= 1px "solid" !focus_border_color +@debug "DEPRECATION WARINING: blueprint/modules/form.sass has moved to blueprint/form.sass" +@import blueprint/form.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass index 3edd3897..fd72b845 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass @@ -1,178 +1,2 @@ -// -------------------------------------------------------------- -// 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.sass - -// 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 - - -=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 - - -// 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. -// TODO add this to span mixin when we have optional arguments -=last - margin-right: 0 - -=span(!n, !override = false) - !width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1)) - @if !override - width= !width !important - @else - width= !width - -=column-base(!last = false) - +float-left - @if !last - +last - @else - margin-right= !blueprint_grid_margin - * html & - overflow-x: hidden - -// Use this mixins to set the width of n columns. -=column(!n, !last = false) - +column-base(!last) - +span(!n) - - -// Mixin to a column to append n empty cols. -=append(!n) - padding-right= (!blueprint_grid_outer_width) * !n - -// Mixin to a column to prepend n empty cols. -=prepend(!n) - padding-left= (!blueprint_grid_outer_width) * !n - -=append-bottom(!amount = 1.5em) - margin-bottom= !amount - -=prepend-top(!amount = 1.5em) - margin-top= !amount - -=pull-base - +float-left - position: relative - -=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 - -// mixin to a column to move it n columns to the left -=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 +@debug "DEPRECATION WARINING: blueprint/modules/grid.sass has moved to blueprint/grid.sass" +@import blueprint/grid.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass index ff5e4054..9b2ba76b 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass @@ -1,58 +1,2 @@ -@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 +@debug "DEPRECATION WARINING: blueprint/modules/interaction.sass has moved to blueprint/interaction.sass" +@import blueprint/interaction.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass index 58933fed..7b38ceba 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_link_icons.sass @@ -1,44 +1,2 @@ -=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) +@debug "DEPRECATION WARINING: blueprint/modules/link_icons.sass has moved to blueprint/link_icons.sass" +@import blueprint/link_icons.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass index d21962a1..eed1e601 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass @@ -1,141 +1,3 @@ -// -------------------------------------------------------------- -// 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/modules/liquid.sass -// ------------------------------------------------------------------- - -@import compass/utilities/general/float.sass - -// 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 ||= 4.173% -!blueprint_liquid_grid_margin ||= 0.833em - -// 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 * 4) - -=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_width * !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 * !n) - ((!blueprint_liquid_grid_width * !n) % 1) - -=prepend(!n) - padding-left= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1) - -=pull(!n, !last = false) - margin-left= (!blueprint_liquid_grid_push_pull * !n) - -=push(!n) - +float-right - margin: - top: 0 - left: 1.5em - right= (!blueprint_liquid_grid_push_pull * !n) - bottom: 0 - -=border - border-right: 1px solid #eee - -=colborder - padding-right: 2% - margin-right: 2% - +border - -=colruler - background: #ddd - color: #ddd - clear: both - width: 100% - height: 0.083em - margin: 0 0 1.583em - border: none - -=colspacer - +colruler - background: #fff - color: #fff +@debug "DEPRECATION WARINING: blueprint/modules/liquid.sass has moved to blueprint/liquid.sass" +@import blueprint/liquid.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass index 2045a794..297ea8b4 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_reset.sass @@ -1,56 +1,2 @@ -// Global reset rules. -// For more specific resets, use the reset mixins provided below -=blueprint-global-reset - html, body - +blueprint-reset - +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 +@debug "DEPRECATION WARINING: blueprint/modules/reset.sass has moved to blueprint/reset.sass" +@import blueprint/reset.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass index 616b92f0..8cd4d0d8 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass @@ -1,122 +1,2 @@ -@import grid.sass -@import compass/utilities/general/float.sass - -// 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 - * 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" - @debug "[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 +@debug "DEPRECATION WARINING: blueprint/modules/rtl.sass has moved to blueprint/rtl.sass" +@import blueprint/rtl.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass index fc597951..a68b8886 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass @@ -1,47 +1,2 @@ -@import grid.sass -// 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. - -// The +blueprint-scaffolding mixin must be mixed into the top level of your stylesheet. -// However, you can customize the body selector if you wish to control the scope -// of this mixin. Examples: -// Apply to any page including the stylesheet: -// +blueprint-scaffolding -// Scoped by a single presentational body class: -// +blueprint-scaffolding("body.blueprint") -// Semantically: -// +blueprint-scaffolding("body#page-1, body#page-2, body.a-special-page-type") -// 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 - -// 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 +box to create a padded box inside a column. -=box - padding: 1.5em - margin-bottom: 1.5em - background: #E5ECF9 - -=blueprint-scaffolding-defaults - .box - +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 - // Border with more whitespace, spans one column. - div.colborder - +colborder - hr - +colruler - hr.space - +colspacer +@debug "DEPRECATION WARINING: blueprint/modules/scaffolding.sass has moved to blueprint/scaffolding.sass" +@import blueprint/scaffolding.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass index 6f230bfb..d2f1a943 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass @@ -1,160 +1,2 @@ -@import colors.sass -@import compass/utilities/links/link_colors.sass -@import compass/utilities/general/float.sass - -!blueprint_font_family ||= "Helvetica Neue, Arial, Helvetica, sans-serif" -!blueprint_fixed_font_family ||= "'andale mono', 'lucida console', monospace" -!blueprint_font_size ||= 12px - -// 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") -=blueprint-typography(!body_selector = "body") - @if !body_selector == true - +blueprint-typography-body - +blueprint-typography-defaults - @else - #{!body_selector} - +blueprint-typography-body - @if !body_selector != "body" - @debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint-typography, pass true as the first argument and mix it into #{!body_selector}." - +blueprint-typography-defaults - @if !body_selector == "body" - +blueprint-typography-defaults - -=normal-text - font-family= !blueprint_font_family - color= !font_color - -=fixed-width-text - font= 1em !blueprint_fixed_font_family - line-height: 1.5 - -=header-text - font-weight: normal - color= !header_color - -=quiet - color= !quiet_color - -=loud - color= !loud_color - -=blueprint-typography-body(!font_size = !blueprint_font_size) - line-height: 1.5 - +normal-text - font-size= 100% * !font_size / 16px - -=blueprint-typography-defaults - h1 - +header-text - font-size: 3em - line-height: 1 - margin-bottom: 0.5em - img - margin: 0 - h2 - +header-text - font-size: 2em - margin-bottom: 0.75em - h3 - +header-text - font-size: 1.5em - line-height: 1 - margin-bottom: 1em - h4 - +header-text - font-size: 1.2em - line-height: 1.25 - margin-bottom: 1.25em - h5 - +header-text - font-size: 1em - font-weight: bold - margin-bottom: 1.5em - h6 - +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 - +float-left - margin: 1.5em 1.5em 1.5em 0 - padding: 0 - img.right - +float-right - margin: 1.5em 0 1.5em 1.5em - padding: 0 - a - text-decoration: underline - +link-colors(!link_color, !link_hover_color, !link_active_color, !link_visited_color, !link_focus_color) - blockquote - margin: 1.5em - color: #666 - 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 #666 - address - margin: 0 0 1.5em - font-style: italic - del - color: #666 - pre - margin: 1.5em 0 - white-space: pre - pre, code, tt - +fixed-width-text - li ul, li ol - margin: 0 1.5em - ul - margin: 0 1.5em 1.5em 1.5em - list-style-type: disc - ol - margin: 0 1.5em 1.5em 1.5em - 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: #eee - .quiet - +quiet - .loud - +loud +@debug "DEPRECATION WARINING: blueprint/modules/typography.sass has moved to blueprint/typography.sass" +@import blueprint/typography.sass diff --git a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass index e7812d2d..57994368 100644 --- a/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass +++ b/lib/compass/frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass @@ -1,37 +1,2 @@ -@import compass/utilities/text/nowrap.sass -@import compass/utilities/general/float.sass - -// 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 +@debug "DEPRECATION WARINING: blueprint/modules/utilities.sass has moved to blueprint/utilities.sass" +@import blueprint/utilities.sass diff --git a/lib/compass/frameworks/blueprint/templates/buttons/buttons.sass b/lib/compass/frameworks/blueprint/templates/buttons/buttons.sass index 3e616150..2e4aa310 100644 --- a/lib/compass/frameworks/blueprint/templates/buttons/buttons.sass +++ b/lib/compass/frameworks/blueprint/templates/buttons/buttons.sass @@ -1,5 +1,5 @@ @import compass/utilities/general/float.sass -@import blueprint/modules/buttons.sass +@import blueprint/buttons.sass // Use the following HTML code to place the buttons on your site: @@ -23,7 +23,7 @@ a.button +anchor-button("left") // All the button color mixins take 4 optional arguments: // font color, background color, border color, border highlight color - // the first three default to constants set in blueprint/modules/buttons.sass + // the first three default to constants set in blueprint/buttons.sass // the last one defaults to a shade lighter than the border color. +button-colors +button-hover-colors diff --git a/lib/compass/frameworks/blueprint/templates/link_icons/link_icons.sass b/lib/compass/frameworks/blueprint/templates/link_icons/link_icons.sass index a095e833..5fe9a848 100644 --- a/lib/compass/frameworks/blueprint/templates/link_icons/link_icons.sass +++ b/lib/compass/frameworks/blueprint/templates/link_icons/link_icons.sass @@ -1,4 +1,4 @@ -@import blueprint/modules/link_icons.sass +@import blueprint/link_icons.sass // 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/lib/compass/frameworks/blueprint/templates/project/screen.sass b/lib/compass/frameworks/blueprint/templates/project/screen.sass index 87b36a52..82346e35 100644 --- a/lib/compass/frameworks/blueprint/templates/project/screen.sass +++ b/lib/compass/frameworks/blueprint/templates/project/screen.sass @@ -5,7 +5,7 @@ // Import all the default blueprint modules so that we can access their mixins. @import blueprint // Import the non-default scaffolding module. -@import blueprint/modules/scaffolding.sass +@import blueprint/scaffolding.sass // To generate css equivalent to the blueprint css but with your configuration applied, uncomment: // +blueprint diff --git a/test/fixtures/stylesheets/blueprint/sass/screen.sass b/test/fixtures/stylesheets/blueprint/sass/screen.sass index 93ec4087..8b49d7ae 100644 --- a/test/fixtures/stylesheets/blueprint/sass/screen.sass +++ b/test/fixtures/stylesheets/blueprint/sass/screen.sass @@ -1,4 +1,4 @@ -@import blueprint/screen +@import blueprint.sass @import compass/reset +blueprint diff --git a/test/fixtures/stylesheets/blueprint/sass/typography.sass b/test/fixtures/stylesheets/blueprint/sass/typography.sass index 13262468..f7a5ec46 100644 --- a/test/fixtures/stylesheets/blueprint/sass/typography.sass +++ b/test/fixtures/stylesheets/blueprint/sass/typography.sass @@ -1,3 +1,3 @@ -@import blueprint/modules/typography.sass +@import blueprint/typography.sass -+blueprint-typography \ No newline at end of file ++blueprint-typography