github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Formatting cleanup

Browse Source
This commit is contained in:
Chris Eppstein 2010-04-15 22:23:14 -07:00
parent b7202bbb75
commit 0caa2d2d00
7 changed files with 155 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frameworks/blueprint/stylesheets/_blueprint.scss
View File

@ -35,4 +35,5 @@
@include blueprint-grid; @include blueprint-grid;
@include blueprint-debug; @include blueprint-debug;
@include blueprint-interaction; @include blueprint-interaction;
@include blueprint-form; } @include blueprint-form;
}

79
frameworks/blueprint/stylesheets/blueprint/_buttons.scss
View File

@ -5,65 +5,75 @@
$blueprint_button_font_family: unquote('"Lucida Grande", Tahoma, Arial, Verdana, sans-serif') !default; $blueprint_button_font_family: unquote('"Lucida Grande", Tahoma, Arial, Verdana, sans-serif') !default;
// Default Button Colors // Default Button Colors
$blueprint_button_border_color: #dedede !default; $blueprint_button_border_color: #dedede !default;
$blueprint_button_background_color: #f5f5f5 !default; $blueprint_button_background_color: #f5f5f5 !default;
$blueprint_button_font_color: #565656 !default;
$blueprint_button_font_color: #565656 !default;
// Default Button Hover Colors // 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_background_color: #dff4ff !default;
$blueprint_button_hover_font_color: #336699 !default;
$blueprint_button_hover_font_color: #336699 !default;
// Default Button Active Colors // 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_background_color: #6299c5 !default;
$blueprint_button_active_font_color: white !default;
$blueprint_button_active_font_color: white !default;
//** //**
// Sets the colors for a button // Sets the colors for a button
// @param border_highlight_color // @param border_highlight_color
// The highlight color defaults to whatever is the value of the border_color but it's one shade lighter. // 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; background-color: $bg_color;
border-color: $border_highlight_color $border_color $border_color $border_highlight_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 // Sets the colors for a button in the active state
// @param border_highlight_color // @param border_highlight_color
// The highlight color defaults to whatever is the value of the border_color but it's one shade lighter. // 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 { &: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. // Sets the colors for a button in the hover state.
// @param border_highlight_color // @param border_highlight_color
// The highlight color defaults to whatever is the value of the border_color but it's one shade lighter. // 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 { &: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) { @mixin button-base($float: false) {
@if $float { @if $float { @include float($float); display: block; }
display: block; @else { @include inline-block; }
@include float($float); }
@else {
@include inline-block; }
margin: 0.7em 0.5em 0.7em 0; margin: 0.7em 0.5em 0.7em 0;
border-width: 1px; border-width: 1px; border-style: solid;
border-style: solid; font-family: $blueprint_button_font_family; font-size: 100%; line-height: 130%; font-weight: bold;
font-family: $blueprint_button_font_family;
font-size: 100%;
line-height: 130%;
text-decoration: none; text-decoration: none;
font-weight: bold;
cursor: pointer; cursor: pointer;
img { img {
margin: 0 3px -3px 0 !important; margin: 0 3px -3px 0 !important;
@ -71,11 +81,14 @@ $blueprint_button_active_font_color: white !default;
border: none; border: none;
width: 16px; width: 16px;
height: 16px; height: 16px;
float: none; } } float: none;
}
}
@mixin anchor-button($float: false) { @mixin anchor-button($float: false) {
@include button-base($float); @include button-base($float);
padding: 5px 10px 5px 7px; } padding: 5px 10px 5px 7px;
}
@mixin button-button($float: false) { @mixin button-button($float: false) {
@include button-base($float); @include button-base($float);
@ -86,4 +99,6 @@ $blueprint_button_active_font_color: white !default;
padding: 4px 10px 4px 7px; padding: 4px 10px 4px 7px;
line-height: 17px; } line-height: 17px; }
*:first-child+html &[type] { *:first-child+html &[type] {
padding: 4px 10px 3px 7px; } } padding: 4px 10px 3px 7px;
}
}

66
frameworks/blueprint/stylesheets/blueprint/_colors.scss
View File

@ -1,51 +1,31 @@
$font_color: #333333 !default; $font_color: #333333 !default;
$quiet_color: $font_color + #333333 !default;
$quiet_color: $font_color + #333333 !default; $loud_color: $font_color - #222222 !default;
$header_color: $font_color - #111111 !default;
$loud_color: $font_color - #222222 !default; $alt_text_color: #666666 !default;
$header_color: $font_color - #111111 !default;
$link_color: #000099 !default;
$link_hover_color: black !default;
$link_focus_color: $link_hover_color !default;
$link_active_color: $link_color + #cc0000 !default;
$link_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; $link_visited_color: $link_color - #333333 !default;
$feedback_border_color: #dddddd !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; $highlight_color: yellow !default;
$added_color: white !default;
$success_bg_color: #e6efc2 !default; $added_bg_color: #006600 !default;
$removed_color: white !default;
$success_border_color: #c6d880 !default; $removed_bg_color: #990000 !default;
$notice_color: #514721 !default;
$notice_bg_color: #fff6bf !default;
$notice_border_color: #ffd324 !default;
$error_color: #8a1f11 !default;
$error_bg_color: #fbe3e4 !default;
$error_border_color: #fbc2c4 !default;
$highlight_color: yellow !default;
$added_color: white !default;
$added_bg_color: #006600 !default;
$removed_color: white !default;
$removed_bg_color: #990000 !default;
$blueprint_table_header_color: #c3d9ff !default; $blueprint_table_header_color: #c3d9ff !default;
$blueprint_table_stripe_color: #e5ecf9 !default; $blueprint_table_stripe_color: #e5ecf9 !default;

9
frameworks/blueprint/stylesheets/blueprint/_debug.scss
View File

@ -1,8 +1,11 @@
@mixin showgrid($image: unquote("grid.png")) { @mixin showgrid($image: "grid.png") {
background: image_url($image); } background: image_url($image);
}
@mixin blueprint-debug($grid_image: unquote("grid.png")) { @mixin blueprint-debug($grid_image: unquote("grid.png")) {
// Use this class on any column or container to see the grid. // Use this class on any column or container to see the grid.
// TODO: prefix this with the project path. // TODO: prefix this with the project path.
.showgrid { .showgrid {
@include showgrid($grid_image); } } @include showgrid($grid_image);
}
}

45
frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss
View File

@ -1,5 +1,6 @@
@import "typography"; @import "typography";
$alternate_text_font = "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif !default;
// To install the fancy type plugin: // To install the fancy type plugin:
// 1. import the fancy_type module: @import blueprint/fancy_type // 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: // 2. mixin +fancy-type to your project's body or at the top level of your stylesheet:
@ -8,30 +9,29 @@
@mixin fancy-type { @mixin fancy-type {
@include fancy-paragraphs; @include fancy-paragraphs;
.caps { .caps { @include caps; }
@include caps; } .dquo { @include dquo; }
.dquo { .alt { @include alt; }
@include dquo; } }
.alt {
@include alt; } }
// Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p // Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p
@mixin sibling-indentation { @mixin sibling-indentation {
text-indent: 2em; text-indent: 2em;
margin-top: -1.5em; margin-top: -1.5em;
/* Don't want this in forms. */ /* Don't want this in forms. */
form & { form & { text-indent: 0; }
text-indent: 0; } } }
// For great looking type, use this code instead of asdf: // For great looking type, use this code instead of asdf:
// <span class="alt">asdf</span> // <span class="alt">asdf</span>
// Best used on prepositions and ampersands. // Best used on prepositions and ampersands.
@mixin alt { @mixin alt {
color: #666666; color: $alternate_text_color;
font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif; font-family: $alternate_text_font;
font-style: italic; font-style: italic;
font-weight: normal; } font-weight: normal;
}
// For great looking quote marks in titles, replace "asdf" with: // For great looking quote marks in titles, replace "asdf" with:
// <span class="dquo">&#8220;</span>asdf&#8221; // <span class="dquo">&#8220;</span>asdf&#8221;
@ -39,7 +39,8 @@
// (You may have to change this value depending on your font size). // (You may have to change this value depending on your font size).
@mixin dquo($offset: 0.5em) { @mixin dquo($offset: 0.5em) {
margin-left: -$offset; } margin-left: -$offset;
}
// Reduced size type with incremental leading // Reduced size type with incremental leading
// (http://www.markboulton.co.uk/journal/comments/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 // 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 // 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; font-size: 1em * $font_size / $base_font_size;
line-height: 1em * $old_line_height / $font_size * 4 / 5; 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. // Surround uppercase words and abbreviations with this class.
// Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] // Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/]
@ -70,11 +77,11 @@
font-size: 1.2em; font-size: 1.2em;
line-height: 1%; line-height: 1%;
font-weight: bold; font-weight: bold;
padding: 0 2px; } padding: 0 2px;
}
@mixin fancy-paragraphs { @mixin fancy-paragraphs {
p + p { p + p { @include sibling-indentation; }
@include sibling-indentation; }
p.incr, p.incr,
.incr p { .incr p { @include incr; }
@include incr; } } }

80
frameworks/blueprint/stylesheets/blueprint/_form.scss
View File

@ -4,53 +4,63 @@
@mixin blueprint-inline-form { @mixin blueprint-inline-form {
line-height: 3; line-height: 3;
p { p {
margin-bottom: 0; } } margin-bottom: 0;
}
}
@mixin blueprint-form { @mixin blueprint-form {
@include blueprint-form-layout; @include blueprint-form-layout;
@include blueprint-form-borders; @include blueprint-form-borders;
@include blueprint-form-sizes; } @include blueprint-form-sizes;
}
@mixin blueprint-form-layout { @mixin blueprint-form-layout {
label { label { font-weight: bold; }
font-weight: bold; } fieldset { padding: 1.4em; margin: 0 0 1.5em 0; }
fieldset { legend { font-weight: bold; font-size: 1.2em; }
padding: 1.4em;
margin: 0 0 1.5em 0; }
legend {
font-weight: bold;
font-size: 1.2em; }
input { input {
&.text, &.title, &[type=text], &[type=password] { &.text,
margin: 0.5em 0; &.title,
background-color: white; &[type=text],
padding: 5px; } &[type=password] { margin: 0.5em 0; background-color: white; padding: 5px; }
&.title { &.title { font-size: 1.5em; }
font-size: 1.5em; } &[type=checkbox],
&[type=checkbox], &.checkbox, &.checkbox,
&[type=radio], &.radio { &[type=radio],
position: relative; &.radio { position: relative; top: 0.25em; }
top: 0.25em; } } }
textarea { textarea { margin: 0.5em 0; padding: 5px; }
margin: 0.5em 0; select { 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 { input {
&.text, &.title, &[type=text], &[type=password] { &.text,
width: $input_width; } } &.title,
textarea { &[type=text],
width: $textarea_width; &[type=password] { width: $input_width; }
height: $textarea_height; } } }
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 { fieldset {
border: 1px solid $fieldset_border_color; } border: 1px solid $fieldset_border_color; }
input.text, input.title, input[type=text], input[type=password], input.text, input.title, input[type=text], input[type=password],
textarea, textarea, select {
select {
border: 1px solid $unfocused_border_color; border: 1px solid $unfocused_border_color;
&:focus { &:focus {
border: 1px solid $focus_border_color; } } } border: 1px solid $focus_border_color;
}
}
}

12
frameworks/blueprint/stylesheets/blueprint/_typography.scss
View File

@ -52,7 +52,7 @@ $blueprint-font-size: 12px !default;
@mixin blueprint-typography-defaults { @mixin blueprint-typography-defaults {
#{headers(all)} { @include header-text; #{headers(all)} { @include header-text;
img { margin: 0; } } img { margin: 0; } }
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; } h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } 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; } h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; } h6 { font-size: 1em; font-weight: bold; }
p { margin: 0 0 1.5em; p { margin: 0 0 1.5em;
img.left { @include float-left; margin: 1.5em 1.5em 1.5em 0; 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; } } 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); } 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; } blockquote { margin: 1.5em; color: #666666; font-style: italic; }
strong { font-weight: bold; } strong { font-weight: bold; }
@ -73,13 +74,12 @@ $blueprint-font-size: 12px !default;
del { color: #666666; } del { color: #666666; }
pre { margin: 1.5em 0; white-space: pre; } pre { margin: 1.5em 0; white-space: pre; }
pre, code, tt { @include fixed-width-text; } pre, code, tt { @include fixed-width-text; }
li { li ul, li ol { margin: 0; }
ul, ol { margin: 0; } }
ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; } ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; }
ul { list-style-type: disc; } ul { list-style-type: disc; }
ol { list-style-type: decimal; } ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; dl { margin: 0 0 1.5em 0;
dt { font-weight: bold; } } dt { font-weight: bold; } }
dd { margin-left: 1.5em; } dd { margin-left: 1.5em; }
table { margin-bottom: 1.4em; width: 100%; } table { margin-bottom: 1.4em; width: 100%; }
th { font-weight: bold; } th { font-weight: bold; }