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-debug;
@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;
// 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;
}
}

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

@ -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;

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

@ -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);
}
}

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

@ -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:
// <span class="alt">asdf</span>
// Best used on prepositions and ampersands.
@mixin alt {
color: #666666;
font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
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:
// <span class="dquo">&#8220;</span>asdf&#8221;
@ -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; }
}

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

@ -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;
}
}
}

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

@ -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; }