Formatting cleanup
This commit is contained in:
parent
b7202bbb75
commit
0caa2d2d00
@ -35,4 +35,5 @@
|
||||
@include blueprint-grid;
|
||||
@include blueprint-debug;
|
||||
@include blueprint-interaction;
|
||||
@include blueprint-form; }
|
||||
@include blueprint-form;
|
||||
}
|
||||
|
@ -6,64 +6,74 @@ $blueprint_button_font_family: unquote('"Lucida Grande", Tahoma, Arial, Verdana,
|
||||
|
||||
// Default Button Colors
|
||||
$blueprint_button_border_color: #dedede !default;
|
||||
|
||||
$blueprint_button_background_color: #f5f5f5 !default;
|
||||
|
||||
$blueprint_button_font_color: #565656 !default;
|
||||
|
||||
// Default Button Hover Colors
|
||||
$blueprint_button_hover_border_color: #c2e1ef !default;
|
||||
|
||||
$blueprint_button_hover_background_color: #dff4ff !default;
|
||||
|
||||
$blueprint_button_hover_font_color: #336699 !default;
|
||||
|
||||
// Default Button Active Colors
|
||||
$blueprint_button_active_border_color: #6299c5 !default;
|
||||
|
||||
$blueprint_button_active_background_color: #6299c5 !default;
|
||||
|
||||
$blueprint_button_active_font_color: white !default;
|
||||
|
||||
//**
|
||||
// Sets the colors for a button
|
||||
// @param border_highlight_color
|
||||
// The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
|
||||
@mixin button-colors($font_color: $blueprint_button_font_color, $bg_color: $blueprint_button_background_color, $border_color: $blueprint_button_border_color, $border_highlight_color: $border_color + #101010) {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
$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;
|
||||
|
||||
$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;
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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">“</span>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; }
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -61,7 +61,8 @@ $blueprint-font-size: 12px !default;
|
||||
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.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,8 +74,7 @@ $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; }
|
||||
|
Loading…
Reference in New Issue
Block a user