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

Dashes > Underscores

Browse Source
This commit is contained in:
Chris Eppstein 2010-11-12 10:24:56 -08:00
parent 5a4b469ca8
commit 4440b9accf
8 changed files with 99 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,65 +2,65 @@
@import "compass/utilities/general/float"; @import "compass/utilities/general/float";
// Button Font // Button Font
$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( @mixin button-colors(
$font_color: $blueprint_button_font_color, $font-color: $blueprint-button-font-color,
$bg_color: $blueprint_button_background_color, $bg-color: $blueprint-button-background-color,
$border_color: $blueprint_button_border_color, $border-color: $blueprint-button-border-color,
$border_highlight_color: $border_color + #101010 $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( @mixin button-active-colors(
$font_color: $blueprint_button_active_font_color, $font-color: $blueprint-button-active-font-color,
$bg_color: $blueprint_button_active_background_color, $bg-color: $blueprint-button-active-background-color,
$border_color: $blueprint_button_active_border_color, $border-color: $blueprint-button-active-border-color,
$border_highlight_color: $border_color + #101010 $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( @mixin button-hover-colors(
$font_color: $blueprint_button_hover_font_color, $font-color: $blueprint-button-hover-font-color,
$bg_color: $blueprint_button_hover_background_color, $bg-color: $blueprint-button-hover-background-color,
$border_color: $blueprint_button_hover_border_color, $border-color: $blueprint-button-hover-border-color,
$border_highlight_color: $border_color + #101010 $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);
} }
} }
@ -69,7 +69,7 @@ $blueprint_button_active_font_color: white !default;
@else { @include inline-block; } @else { @include inline-block; }
margin: 0.7em 0.5em 0.7em 0; margin: 0.7em 0.5em 0.7em 0;
border-width: 1px; border-style: solid; border-width: 1px; 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%; font-weight: bold;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
img { img {

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

@ -1,11 +1,11 @@
@mixin showgrid($image: "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);
} }
} }

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

@ -4,7 +4,7 @@ $alternate-text-font : "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiq
// 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. Mix in `fancy-type` to your project's body or at the top level of your stylesheet:<br> // 2. Mix in `fancy-type` to your project's body or at the top level of your stylesheet:<br>
// `body { @include fancy-type; }` // `body { @include fancy-type; }`
@mixin fancy-type { @mixin fancy-type {
@ -34,7 +34,7 @@ $alternate-text-font : "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiq
margin-left: -$offset; margin-left: -$offset;
} }
// Reduced size type with [incremental leading](http://www.markboulton.co.uk/journal/comments/incremental_leading/) // 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 // 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. // follow the 1.5x vertical rhythm -- the line-height is too much.

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

@ -36,33 +36,33 @@
@mixin blueprint-form-sizes @mixin blueprint-form-sizes
( (
$input_width: 300px, $input-width: 300px,
$textarea_width: 390px, $textarea-width: 390px,
$textarea_height: 250px $textarea-height: 250px
) { ) {
input { input {
&.text, &.text,
&.title, &.title,
&[type=email], &[type=email],
&[type=text], &[type=text],
&[type=password] { width: $input_width; } &[type=password] { width: $input-width; }
} }
textarea { width: $textarea_width; height: $textarea_height; } textarea { width: $textarea-width; height: $textarea-height; }
} }
@mixin blueprint-form-borders @mixin blueprint-form-borders
( (
$unfocused_border_color: #bbbbbb, $unfocused-border-color: #bbbbbb,
$focus_border_color: #666666, $focus-border-color: #666666,
$fieldset_border_color: #cccccc $fieldset-border-color: #cccccc
) { ) {
fieldset { fieldset {
border: 1px solid $fieldset_border_color; } border: 1px solid $fieldset-border-color; }
input.text, input.title, input[type=email], input[type=text], input[type=password], input.text, input.title, input[type=email], input[type=text], input[type=password],
textarea, select { textarea, 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;
} }
} }
} }

52
frameworks/blueprint/stylesheets/blueprint/_liquid.scss
View File

@ -18,7 +18,7 @@
// * Andrei Michael Herasimchuk // * Andrei Michael Herasimchuk
// Involution Studios, http://www.involutionstudios.com // Involution Studios, http://www.involutionstudios.com
// Read more about using a grid here: // Read more about using a grid here:
// * subtraction.com/archives/2007/0318_oh_yeeaahh.php // * subtraction.com/archives/2007/0318-oh-yeeaahh.php
// ----- // -----
// By default, the grid is 80% of window width, with 24 columns. // By default, the grid is 80% of window width, with 24 columns.
// //
@ -36,58 +36,58 @@
// Main layout grid, override these constants to build your grid and container sizes. // Main layout grid, override these constants to build your grid and container sizes.
// The width shown gives the right floored percentage values. // The width shown gives the right floored percentage values.
$blueprint_liquid_grid_columns: 24 !default; $blueprint-liquid-grid-columns: 24 !default;
$blueprint_liquid_grid_width: 3.167% !default; $blueprint-liquid-grid-width: 3.167% !default;
$blueprint_liquid_grid_margin: 1.042% !default; $blueprint-liquid-grid-margin: 1.042% !default;
// Do not edit below this line unless you really know what you're doing. // Do not edit below this line unless you really know what you're doing.
$blueprint_liquid_container_width: 80% !default; $blueprint-liquid-container-width: 80% !default;
$blueprint_liquid_container_min_width: 950px !default; $blueprint-liquid-container-min-width: 950px !default;
$blueprint_liquid_grid_push_pull: -($blueprint_liquid_grid_margin + $blueprint_liquid_grid_width) !default; $blueprint-liquid-grid-push-pull: -($blueprint-liquid-grid-margin + $blueprint-liquid-grid-width) !default;
@mixin blueprint-liquid-grid { @mixin blueprint-liquid-grid {
// A container should group all your columns // A container should group all your columns
.container { .container {
@include container; } @include container; }
// Use these classes (or mixins) to set the width of a column. // Use these classes (or mixins) to set the width of a column.
@for $n from 1 to $blueprint_liquid_grid_columns + 1 { @for $n from 1 to $blueprint-liquid-grid-columns + 1 {
.span-#{$n} { .span-#{$n} {
@include span($n); } @include span($n); }
div { div {
&.span-#{$n} { &.span-#{$n} {
@include column($n, $n == $blueprint_liquid_grid_columns); } } } @include 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. // The last column in a row needs this class (or mixin) or it will end up on the next row.
div.last { div.last {
@include last; } @include last; }
// Add these to a column to append empty cols. // Add these to a column to append empty cols.
@for $n from 1 to $blueprint_liquid_grid_columns { @for $n from 1 to $blueprint-liquid-grid-columns {
.append-#{$n} { .append-#{$n} {
@include append($n); } } @include append($n); } }
// Add these to a column to prepend empty cols. // Add these to a column to prepend empty cols.
@for $n from 1 to $blueprint_liquid_grid_columns { @for $n from 1 to $blueprint-liquid-grid-columns {
.prepend-#{$n} { .prepend-#{$n} {
@include prepend($n); } } @include prepend($n); } }
// Use these classes on an element to push it into the // Use these classes on an element to push it into the
// next column, or to pull it into the previous column. // next column, or to pull it into the previous column.
@for $n from 1 to $blueprint_liquid_grid_columns + 1 { @for $n from 1 to $blueprint-liquid-grid-columns + 1 {
.pull-#{$n} { .pull-#{$n} {
@include pull($n); } } @include pull($n); } }
@for $n from 1 to $blueprint_liquid_grid_columns + 1 { @for $n from 1 to $blueprint-liquid-grid-columns + 1 {
.push-#{$n} { .push-#{$n} {
@include push($n); } } } @include push($n); } } }
@mixin container { @mixin container {
min-width: $blueprint_liquid_container_min_width; min-width: $blueprint-liquid-container-min-width;
width: $blueprint_liquid_container_width; width: $blueprint-liquid-container-width;
margin: 0 auto; margin: 0 auto;
@include clearfix; } @include clearfix; }
@mixin span($n, $override: false) { @mixin span($n, $override: false) {
$width: $blueprint_liquid_grid_width * $n + $blueprint_liquid_grid_margin * ($n - 1); $width: $blueprint-liquid-grid-width * $n + $blueprint-liquid-grid-margin * ($n - 1);
@if $override { @if $override {
width: $width !important; } width: $width !important; }
@else { @else {
@ -103,31 +103,31 @@ $blueprint_liquid_grid_push_pull: -($blueprint_liquid_grid_margin + $blueprint_l
@if $last { @if $last {
@include last; } @include last; }
@else { @else {
margin-right: $blueprint_liquid_grid_margin; } } margin-right: $blueprint-liquid-grid-margin; } }
@mixin append($n) { @mixin append($n) {
padding-right: ($blueprint_liquid_grid_width + $blueprint_liquid_grid_margin) * $n; } padding-right: ($blueprint-liquid-grid-width + $blueprint-liquid-grid-margin) * $n; }
@mixin prepend($n) { @mixin prepend($n) {
padding-left: ($blueprint_liquid_grid_width + $blueprint_liquid_grid_margin) * $n; } padding-left: ($blueprint-liquid-grid-width + $blueprint-liquid-grid-margin) * $n; }
@mixin pull($n, $last: false) { @mixin pull($n, $last: false) {
margin-left: $blueprint_liquid_grid_push_pull * $n; } margin-left: $blueprint-liquid-grid-push-pull * $n; }
@mixin push($n) { @mixin push($n) {
@include float-right; @include float-right;
margin: { margin: {
top: 0; top: 0;
left: $blueprint_liquid_grid_margin; left: $blueprint-liquid-grid-margin;
right: $blueprint_liquid_grid_push_pull * $n; right: $blueprint-liquid-grid-push-pull * $n;
bottom: 0; }; } bottom: 0; }; }
@mixin border { @mixin border {
border-right: 1px solid #eeeeee; } border-right: 1px solid #eeeeee; }
@mixin colborder { @mixin colborder {
padding-right: $blueprint_liquid_grid_margin * 2; padding-right: $blueprint-liquid-grid-margin * 2;
margin-right: $blueprint_liquid_grid_margin * 2; margin-right: $blueprint-liquid-grid-margin * 2;
@include border; } @include border; }
@mixin colruler { @mixin colruler {
@ -137,8 +137,8 @@ $blueprint_liquid_grid_push_pull: -($blueprint_liquid_grid_margin + $blueprint_l
width: 100%; width: 100%;
height: 0.083em; height: 0.083em;
margin: 0; margin: 0;
margin-left: $blueprint_liquid_grid_margin * 2; margin-left: $blueprint-liquid-grid-margin * 2;
margin-right: $blueprint_liquid_grid_margin * 2; margin-right: $blueprint-liquid-grid-margin * 2;
border: none; } border: none; }
@mixin colspacer { @mixin colspacer {

6
frameworks/blueprint/stylesheets/blueprint/_print.scss
View File

@ -36,7 +36,7 @@
@mixin blueprint-print-body { @mixin blueprint-print-body {
line-height: 1.5; line-height: 1.5;
font-family: $blueprint_font_family; font-family: $blueprint-font-family;
color: black; color: black;
background: none; background: none;
font-size: 10pt; } font-size: 10pt; }
@ -56,11 +56,11 @@
background: white; background: white;
color: white; } } color: white; } }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: $blueprint_font_family; } font-family: $blueprint-font-family; }
code { code {
font: { font: {
size: 0.9em; size: 0.9em;
family: $blueprint_fixed_font_family; }; } family: $blueprint-fixed-font-family; }; }
a { a {
img { img {
border: none; } border: none; }

34
frameworks/blueprint/stylesheets/blueprint/_rtl.scss
View File

@ -2,21 +2,21 @@
@import "compass/utilities/general/float"; @import "compass/utilities/general/float";
// Main layout grid, override these constants to build your grid and container sizes. // Main layout grid, override these constants to build your grid and container sizes.
$blueprint_grid_columns: 24 !default; $blueprint-grid-columns: 24 !default;
$blueprint_grid_width: 30px !default; $blueprint-grid-width: 30px !default;
$blueprint_grid_margin: 10px !default; $blueprint-grid-margin: 10px !default;
$blueprint_grid_outer_width: $blueprint_grid_width + $blueprint_grid_margin; $blueprint-grid-outer-width: $blueprint-grid-width + $blueprint-grid-margin;
$blueprint_container_size: $blueprint_grid_outer_width * $blueprint_grid_columns - $blueprint_grid_margin; $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns - $blueprint-grid-margin;
// Columns // Columns
// Note: If you use this mixin without the class and want to support ie6 // 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. // you must set text-align left on your container element in an IE stylesheet.
@mixin container { @mixin container {
width: $blueprint_container_size; width: $blueprint-container-size;
margin: 0 auto; margin: 0 auto;
direction: rtl; direction: rtl;
@include clearfix; } @include clearfix; }
@ -31,26 +31,26 @@ $blueprint_container_size: $blueprint_grid_outer_width * $blueprint_grid_columns
@if $last { @if $last {
@include last; } @include last; }
@else { @else {
margin-left: $blueprint_grid_margin; } margin-left: $blueprint-grid-margin; }
text-align: right; text-align: right;
* html & { * html & {
overflow-x: hidden; } } overflow-x: hidden; } }
// Mixin to a column to append n empty cols. // Mixin to a column to append n empty cols.
@mixin append($n) { @mixin append($n) {
padding-left: $blueprint_grid_outer_width * $n; } padding-left: $blueprint-grid-outer-width * $n; }
// Mixin to a column to prepend n empty cols. // Mixin to a column to prepend n empty cols.
@mixin prepend($n) { @mixin prepend($n) {
padding-right: $blueprint_grid_outer_width * $n; } padding-right: $blueprint-grid-outer-width * $n; }
// mixin to a column to move it n columns to the left // mixin to a column to move it n columns to the left
@mixin pull($n, $last: false) { @mixin pull($n, $last: false) {
position: relative; position: relative;
@if $last { @if $last {
margin-right: -$blueprint_grid_outer_width * $n + $blueprint_grid_margin; } margin-right: -$blueprint-grid-outer-width * $n + $blueprint-grid-margin; }
@else { @else {
margin-right: -$blueprint_grid_outer_width * $n; } } margin-right: -$blueprint-grid-outer-width * $n; } }
// mixin to a column to push it n columns to the right // mixin to a column to push it n columns to the right
@mixin push($n) { @mixin push($n) {
@ -58,20 +58,20 @@ $blueprint_container_size: $blueprint_grid_outer_width * $blueprint_grid_columns
position: relative; position: relative;
margin: { margin: {
top: 0; top: 0;
left: -$blueprint_grid_outer_width * $n; left: -$blueprint-grid-outer-width * $n;
bottom: 1.5em; bottom: 1.5em;
right: $blueprint_grid_outer_width * $n; }; } right: $blueprint-grid-outer-width * $n; }; }
// Border on left hand side of a column. // Border on left hand side of a column.
@mixin border { @mixin border {
padding-left: $blueprint_grid_margin / 2 - 1; padding-left: $blueprint-grid-margin / 2 - 1;
margin-left: $blueprint_grid_margin / 2; margin-left: $blueprint-grid-margin / 2;
border-left: 1px solid #eeeeee; } border-left: 1px solid #eeeeee; }
// Border with more whitespace, spans one column. // Border with more whitespace, spans one column.
@mixin colborder { @mixin colborder {
padding-left: ($blueprint_grid_width - 2 * $blueprint_grid_margin - 1) / 2; padding-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin - 1) / 2;
margin-left: ($blueprint_grid_width - 2 * $blueprint_grid_margin) / 2; margin-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin) / 2;
border-left: 1px solid #eeeeee; } border-left: 1px solid #eeeeee; }
// Usage examples: // Usage examples:

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

@ -61,14 +61,14 @@ $blueprint-font-size: 12px !default;
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: $alt_text_color; font-style: italic; } blockquote { margin: 1.5em; color: $alt-text-color; font-style: italic; }
strong { font-weight: bold; } strong { font-weight: bold; }
em { font-style: italic; } em { font-style: italic; }
dfn { font-style: italic; font-weight: bold; } dfn { font-style: italic; font-weight: bold; }
sup, sub { line-height: 0; } sup, sub { line-height: 0; }
abbr, acronym { border-bottom: 1px dotted #666666; } abbr, acronym { border-bottom: 1px dotted #666666; }
address { margin: 0 0 1.5em; font-style: italic; } address { margin: 0 0 1.5em; font-style: italic; }
del { color: $alt_text_color; } del { color: $alt-text-color; }
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 ul, li ol { margin: 0; } li ul, li ol { margin: 0; }
@ -84,7 +84,7 @@ $blueprint-font-size: 12px !default;
th, td, caption { padding: 4px 10px 4px 5px; } th, td, caption { padding: 4px 10px 4px 5px; }
tr.even td { background: $blueprint-table-stripe-color; } tr.even td { background: $blueprint-table-stripe-color; }
tfoot { font-style: italic; } tfoot { font-style: italic; }
caption { background: $blueprint_background_color; } caption { background: $blueprint-background-color; }
.quiet { @include quiet; } .quiet { @include quiet; }
.loud { @include loud; } .loud { @include loud; }
} }