From 0caa2d2d00104eb907583485650403193294bdd6 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Thu, 15 Apr 2010 22:23:14 -0700 Subject: [PATCH] Formatting cleanup --- .../blueprint/stylesheets/_blueprint.scss | 3 +- .../stylesheets/blueprint/_buttons.scss | 79 ++++++++++-------- .../stylesheets/blueprint/_colors.scss | 66 ++++++--------- .../stylesheets/blueprint/_debug.scss | 9 ++- .../stylesheets/blueprint/_fancy-type.scss | 45 ++++++----- .../stylesheets/blueprint/_form.scss | 80 +++++++++++-------- .../stylesheets/blueprint/_typography.scss | 12 +-- 7 files changed, 155 insertions(+), 139 deletions(-) diff --git a/frameworks/blueprint/stylesheets/_blueprint.scss b/frameworks/blueprint/stylesheets/_blueprint.scss index bbf669cc..a12775c4 100644 --- a/frameworks/blueprint/stylesheets/_blueprint.scss +++ b/frameworks/blueprint/stylesheets/_blueprint.scss @@ -35,4 +35,5 @@ @include blueprint-grid; @include blueprint-debug; @include blueprint-interaction; - @include blueprint-form; } + @include blueprint-form; +} diff --git a/frameworks/blueprint/stylesheets/blueprint/_buttons.scss b/frameworks/blueprint/stylesheets/blueprint/_buttons.scss index d50ae240..202dba0c 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_buttons.scss +++ b/frameworks/blueprint/stylesheets/blueprint/_buttons.scss @@ -5,65 +5,75 @@ $blueprint_button_font_family: unquote('"Lucida Grande", Tahoma, Arial, Verdana, sans-serif') !default; // Default Button Colors -$blueprint_button_border_color: #dedede !default; - +$blueprint_button_border_color: #dedede !default; $blueprint_button_background_color: #f5f5f5 !default; - -$blueprint_button_font_color: #565656 !default; +$blueprint_button_font_color: #565656 !default; // Default Button Hover Colors -$blueprint_button_hover_border_color: #c2e1ef !default; - +$blueprint_button_hover_border_color: #c2e1ef !default; $blueprint_button_hover_background_color: #dff4ff !default; - -$blueprint_button_hover_font_color: #336699 !default; +$blueprint_button_hover_font_color: #336699 !default; // Default Button Active Colors -$blueprint_button_active_border_color: #6299c5 !default; - +$blueprint_button_active_border_color: #6299c5 !default; $blueprint_button_active_background_color: #6299c5 !default; - -$blueprint_button_active_font_color: white !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) { +@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; } + 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) { +@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); } } + @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) { +@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); } } + @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; } + @if $float { @include float($float); display: block; } + @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%; + border-width: 1px; border-style: solid; + font-family: $blueprint_button_font_family; font-size: 100%; line-height: 130%; font-weight: bold; text-decoration: none; - font-weight: bold; cursor: pointer; img { margin: 0 3px -3px 0 !important; @@ -71,11 +81,14 @@ $blueprint_button_active_font_color: white !default; border: none; width: 16px; height: 16px; - float: none; } } + float: none; + } +} @mixin anchor-button($float: false) { @include button-base($float); - padding: 5px 10px 5px 7px; } + padding: 5px 10px 5px 7px; +} @mixin button-button($float: false) { @include button-base($float); @@ -86,4 +99,6 @@ $blueprint_button_active_font_color: white !default; padding: 4px 10px 4px 7px; line-height: 17px; } *:first-child+html &[type] { - padding: 4px 10px 3px 7px; } } + padding: 4px 10px 3px 7px; + } +} diff --git a/frameworks/blueprint/stylesheets/blueprint/_colors.scss b/frameworks/blueprint/stylesheets/blueprint/_colors.scss index 1582aae6..78834abd 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_colors.scss +++ b/frameworks/blueprint/stylesheets/blueprint/_colors.scss @@ -1,51 +1,31 @@ -$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; +$font_color: #333333 !default; +$quiet_color: $font_color + #333333 !default; +$loud_color: $font_color - #222222 !default; +$header_color: $font_color - #111111 !default; +$alt_text_color: #666666 !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; -$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; +$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.scss b/frameworks/blueprint/stylesheets/blueprint/_debug.scss index fcdc4e37..b37a89c0 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_debug.scss +++ b/frameworks/blueprint/stylesheets/blueprint/_debug.scss @@ -1,8 +1,11 @@ -@mixin showgrid($image: unquote("grid.png")) { - background: image_url($image); } +@mixin showgrid($image: "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); } } + @include showgrid($grid_image); + } +} diff --git a/frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss b/frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss index 78f4f6eb..3a53e303 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss +++ b/frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss @@ -1,5 +1,6 @@ @import "typography"; +$alternate_text_font = "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif !default; // 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: @@ -8,30 +9,29 @@ @mixin fancy-type { @include fancy-paragraphs; - .caps { - @include caps; } - .dquo { - @include dquo; } - .alt { - @include alt; } } + .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; } } + 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; + color: $alternate_text_color; + font-family: $alternate_text_font; font-style: italic; - font-weight: normal; } + font-weight: normal; +} // For great looking quote marks in titles, replace "asdf" with: // “asdf” @@ -39,7 +39,8 @@ // (You may have to change this value depending on your font size). @mixin dquo($offset: 0.5em) { - margin-left: -$offset; } + margin-left: -$offset; +} // Reduced size type with incremental leading // (http://www.markboulton.co.uk/journal/comments/incremental_leading/) @@ -55,10 +56,16 @@ // 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) { +@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; } + 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/] @@ -70,11 +77,11 @@ font-size: 1.2em; line-height: 1%; font-weight: bold; - padding: 0 2px; } + padding: 0 2px; +} @mixin fancy-paragraphs { - p + p { - @include sibling-indentation; } + p + p { @include sibling-indentation; } p.incr, - .incr p { - @include incr; } } + .incr p { @include incr; } +} diff --git a/frameworks/blueprint/stylesheets/blueprint/_form.scss b/frameworks/blueprint/stylesheets/blueprint/_form.scss index 57edf4e5..f4256446 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_form.scss +++ b/frameworks/blueprint/stylesheets/blueprint/_form.scss @@ -4,53 +4,63 @@ @mixin blueprint-inline-form { line-height: 3; p { - margin-bottom: 0; } } + margin-bottom: 0; + } +} @mixin blueprint-form { @include blueprint-form-layout; @include blueprint-form-borders; - @include blueprint-form-sizes; } + @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; } + 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; } } + &.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) { +@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; } } + &.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) { +@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 { + textarea, select { border: 1px solid $unfocused_border_color; &:focus { - border: 1px solid $focus_border_color; } } } + border: 1px solid $focus_border_color; + } + } +} diff --git a/frameworks/blueprint/stylesheets/blueprint/_typography.scss b/frameworks/blueprint/stylesheets/blueprint/_typography.scss index 0a290e61..4d5fec1d 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_typography.scss +++ b/frameworks/blueprint/stylesheets/blueprint/_typography.scss @@ -52,7 +52,7 @@ $blueprint-font-size: 12px !default; @mixin blueprint-typography-defaults { #{headers(all)} { @include header-text; - img { margin: 0; } } + img { margin: 0; } } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } h2 { font-size: 2em; margin-bottom: 0.75em; } h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } @@ -60,8 +60,9 @@ $blueprint-font-size: 12px !default; h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } h6 { font-size: 1em; font-weight: bold; } p { margin: 0 0 1.5em; - img.left { @include float-left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } - img.right { @include float-right; margin: 1.5em 0 1.5em 1.5em; padding: 0; } } + 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; } @@ -73,13 +74,12 @@ $blueprint-font-size: 12px !default; del { color: #666666; } pre { margin: 1.5em 0; white-space: pre; } pre, code, tt { @include fixed-width-text; } - li { - ul, ol { margin: 0; } } + li ul, li ol { margin: 0; } ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; - dt { font-weight: bold; } } + dt { font-weight: bold; } } dd { margin-left: 1.5em; } table { margin-bottom: 1.4em; width: 100%; } th { font-weight: bold; }