facades 0.0.2 → 0.0.3

data/lib/facades/stylesheets/facades/_layout.scss

@@ -1,2 +1,6 @@
+// All layout mixins
+
 @import 'facades/layout/grid';
-@import 'facades/layout/forms';
+@import 'facades/layout/forms';
+@import 'facades/layout/debug';
+@import 'facades/layout/dropdown-list';

data/lib/facades/stylesheets/facades/_normalize.scss

@@ -0,0 +1,5 @@
+// Normalize
+// ----------------------------------------------------------
+
+@import 'facades/setup/reset';
+@import 'facades/setup/forms';

data/lib/facades/stylesheets/facades/_setup.scss

@@ -0,0 +1,67 @@
+// -------------------------------------------------------------------------------
+// Globals
+// -------------------------------------------------------------------------------
+
+// Font and Baseline
+// -------------------------------------------------
+$font-size:   12px !default;
+$line-height: 24px !default;
+
+
+// Selection states (hot pink action!)
+// -------------------------------------------------
+$selection-background-color: #fe57a1 !default;
+$selection-color: 			 #ffffff !default;
+
+
+// Default font color and family
+// -------------------------------------------------
+$font-color: 		   #444 !default;
+$default-font-family: 'Helvetica Nueue', 'Helvetica', 'Arial', sans-serif !default;
+$fixed-font-family:"andale mono", "lucida console", monospace !default;
+
+// Link colors
+// -------------------------------------------------
+$link-color: 		 #00e !default;
+$link-hover-color:   lighten($link-color, 5%) !default;
+$link-visited-color: #551a8b !default;
+
+
+// Forms and fields
+// -------------------------------------------------
+
+// Default state
+$input-border-radius:		2px !default;
+$input-font-size: 			.95em !default;
+$input-color: 				$font-color !default;
+$input-border-color:		#bbbbbb !default;
+$input-background-color: 	white !default;
+
+// Disabled state
+$disabled-input-color:			  #777 !default;
+$disabled-input-background-color: #aaa !default;
+$disabled-input-border-color: 	  #666 !default; 
+
+// Focus state
+$focus-input-border-color: 		#666666 !default; 
+$focus-input-background-color: 	$input-background-color !default;
+$focus-input-color: 			$input-color !default;
+
+// General
+$form-hint-color: 		#ccc !default;
+$fieldset-border-color: #ccc !default;
+
+// Buttons
+$button-color:#333333 !default;
+$button-border-color:#dddddd #bbbbbb #999999 !default;
+$button-padding: 0.5em 1em !default;
+$button-border-radius: 5px !default;
+
+// Visual cues
+// -------------------------------------------------
+
+$error-color: 			 #bd132a !default;
+$error-background-color: #fde0e4 !default;
+$error-border-color: 	 #E41D38 !default;
+
+@import 'facades/utilities';

data/lib/facades/stylesheets/facades/_typography.scss

@@ -0,0 +1,2 @@
+@import 'facades/typography/shadow';
+@import 'facades/typography/lists';

data/lib/facades/stylesheets/facades/_ui.scss

@@ -1 +1,3 @@
-@import 'facades/ui/tool-tip';
+@import 'facades/ui/tool-tip';
+@import 'facades/ui/flash-messages';
+@import 'facades/ui/buttons';

data/lib/facades/stylesheets/facades/_utilities.scss

@@ -1,18 +1,32 @@
-// From thoughtbot/bourbon
-@mixin position ($position: relative, $coordinates: 0 0 0 0) {
-	@if type-of($position) == list {
-		$coordinates: $position;
-		$position: relative;
-	}
+/* =====================================================
+   Misc utilities 
+   ===================================================== */
 
-	$top: nth($coordinates, 1);
-	$right: nth($coordinates, 2);
-	$bottom: nth($coordinates, 3);
-	$left: nth($coordinates, 4);
-  	position: $position;
+@import 'facades/utilities/clearfix';
+@import 'facades/utilities/cursors';
 
-	@if not(unitless($top)){ top: $top; }
-	@if not(unitless($right)) { right: $right; }
-  	@if not(unitless($bottom)) { bottom: $bottom; }
-	@if not(unitless($left)) { left: $left; }
+// Alternative to display:none for hiding important elements
+
+@mixin clipped{
+	clip:rect(1px 1px 1px 1px);
+	clip:rect(1px, 1px, 1px, 1px); // Stupid IE
+	position: absolute;	
 }
+
+
+// Simple mixin to reset boxes to margin-less/padding-less/border-less
+@mixin box-reset{
+	margin: 0;
+	padding: 0;
+	border: 0; 
+}
+
+// Cross browser inline-block implementations
+@mixin inline-block {
+    &{ *display: inline; } // IE7
+  	display: -moz-inline-box;
+	-moz-box-orient: vertical;
+	display: inline-block;
+	vertical-align: middle;
+    *vertical-align: auto; // IE7..again
+}

data/lib/facades/stylesheets/facades/layout/_debug.scss

@@ -0,0 +1,18 @@
+$line-height:24px !default;
+$font-size:12px !default;
+
+$grid-background-column-color: #eef2f9 !default;
+$grid-background-offset: ceil($grid-gutter-width / 2) !default;
+$grid-background-baseline-color: rgba(0,0,0,0.15) !default;
+$grid-background-gutter-color: rgba(255,255,255,0) !default;
+$grid-background-total-columns: $grid-columns !default;
+$grid-background-column-width: $grid-column-width !default;
+$grid-background-gutter-width: $grid-gutter-width !default;
+$grid-background-baseline-height: #{($line-height / $font-size)}em !default;
+
+@import 'compass/layout/grid-background';
+
+@mixin debug-grid{
+	background-color:transparent;
+	@include grid-background;
+}

data/lib/facades/stylesheets/facades/layout/_dropdown-list.scss

@@ -0,0 +1,7 @@
+@mixin dropdown-list($left:0px, $top:100%, $position:'absolute'){
+	li{ position:relative; 
+		ol{ position:unquote($position); top:$top; left:$left; display:none; }
+		ol li{ text-align:left;  }
+		&:hover ol{ display:block; }
+	}
+}

data/lib/facades/stylesheets/facades/layout/_forms.scss

@@ -1,113 +1,42 @@
-// Default border radius used on inputs
-$input-border-radius:2px !default;
-// Default font size for form fields... slightly smaller than body font size
-$input-font-size: .95em !default;
-// Default input border color
-$unfocused-border-color:#bbbbbb !default;
-// Input border color when focused
-$focus-border-color: #666666 !default; 
-// Class used on fields which are invalid
-$form-error-class: 'field-with-error' !default;
-// Selector representing the error class and element used to display error messages
-$form-error-message-selector: 'span.error-for-field' !default;
-// Text color for field hints
-$form-hint-color: #ccc;
-// Selector for field hints
-$form-hint-selector: 'span.hint';
-// Default fieldset border color
-$fieldset-border-color: #ccc !default;
-// Default error text color
-$error-color: #bd132a !default;
-// Default error background color, applies to inputs / selects / textareas
-$error-bg-color: #fde0e4 !default;
-// Default error border color, applies to inputs / selects / textareas
-$error-border-color: #E41D38 !default;
+@import 'facades/utilities';
+@import 'facades/typography/lists';
 
-// Mixin for styling select boxes
-@mixin form-select( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
-	@include form-field($font-size, $normal-border, $focus-border, $border-radius);
-	border-style:solid;
-	border-width:1px;	
-	&:focus{ outline:none; }
-	&[multiple=multiple]{ border-color:$unfocused-border-color; }
-}
-
-// Mixin for styling textareas
-@mixin form-textarea( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
-	@include form-field($font-size, $normal-border, $focus-border, $border-radius);
-	margin:0.5em; padding:5px;
-	border-style:solid;
-	border-width:1px;		
-}
-
-// Default input styling
-@mixin form-input( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
-	&.text,
-	&[type=text],
-	&[type=password],
-	&[type=email]{ 		
-		@include form-field($font-size, $normal-border, $focus-border, $border-radius); padding:.5em;
-		border-style:solid;
-		border-width:1px;
-	}
-	&[type=checkbox],
-	&[type=radio]{
-		@include inline-block; margin-right:1em; vertical-align:baseline; width:auto;
-	}
-}
-
-// Global base styles for all input types
-@mixin form-field( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
-	@include border-radius($border-radius); 
-	font-size:$font-size; 
-	border-color:$normal-border;
-	&:focus{ outline:none; border-color:$focus-border; }
-}
-
-// Mixin for displaying errors and error messages on fields.
-@mixin form-errors( $color:$error-color, $border-color:$error-border-color, $bg-color:$error-bg-color ){
-	&.#{$form-error-class}{
-		input[type=text],
-		input[type=password], 
-		input[type=email], 
-		textarea{ 
-			border:1px solid $border-color; 
-			background:$bg-color; 
-		}
-		label{ color:$color; }
-		#{$form-hint-selector}{ display:none; }
-	}	
-}
-
-// Mixin for displaying form hints
-@mixin form-field-hint( $color: $form-hint-color ){
-	font-size:.95em; line-height:.95em; font-weight:normal; color:$color; display:block;
-}
+// Creates a column based list of fields within a form. 
+// Form elements should be marked up using ordered lists for semantic value.
+//-----------------------------------------------------------------------------------------------
 
-// Mixin for styling field error messages
-@mixin form-error-message($color: $error-color){	 
-	font-size:.95em; line-height:.95em; color:$error-color;  display:block; 
-}
-
-// Creates a column based list of fields within a form. Forms elements should be marked up using ordered lists for semantic value.
 @mixin form-split-field-list{
-	display:block; clear:both; margin:-.5em 0px; @include pie-clearfix;
-	li{ float:left; margin:0 1em 0 0; vertical-align:middle; 
-		label, 
-		input{
-			&[type=text],
-			&[type=password],
-			&[type=email]{ display:block; }
+	@include pie-clearfix;
+	@include no-list;
+	
+	display:block; 
+	clear:both; 
+	margin:-.5em 0px; 
+
+	li{ float:left; 
+		margin:0 1em 0 0; 
+		vertical-align:middle; 
+		label, input[type=text], input[type=password],input[type=email]{ 
+			display:block; 
+		}
+		&.clear{ clear:both; }
+		&.buttons{ clear:both; padding:.25em 0px 0px 0px; }
+		&.inline label{ @include inline-block; }
+		&.multifield{
+			input, select{ @include inline-block; }
 		}
 		select{ margin:.75em 0px; }
 	}
 }
 
-// Creates a single column list of fields within a form. Form elements should be marked up using ordered lists for semantic value.
+
+// Creates a single column list of fields within a form. 
+// Form elements should be marked up using ordered lists for semantic value.
+// --------------------------------------------------------------------------------------------------
+
 @mixin form-field-list{
-	list-style-type:none; 
-	margin:0px; 
-	padding:0px; 
+	
+	@include no-list; 
 	padding-right:10px;		
 	
 	li{ padding:.5em 0px;			
@@ -118,21 +47,7 @@ $error-border-color: #E41D38 !default;
 			input, select{ @include inline-block; }
 		}
 		ol{ @include form-split-field-list; }
-		@include form-errors;
-			
-		#{$form-hint-selector}{ @include form-field-hint; }
-		#{$form-error-message-selector}{ @include form-error-message( $error-color ); }
-			
 	}		
-	label{ 
-		display:block; 
-		font-size:12px;
-		height:20px;
-	}
-	#{fields_of_type(select)}{ @include form-select; }
-	#{fields_of_type(string, checkbox, radio)}{ @include form-input; }
-	#{fields_of_type(textarea)}{ @include form-textarea; }
-	
-	label abbr{ outline:none; border:none; color:red; }
+		
 	fieldset{ border:none; }
 }

data/lib/facades/stylesheets/facades/layout/_grid.scss

@@ -31,35 +31,19 @@ $grid-column-width: $grid-width / $grid-columns * 1 - $grid-gutter-width;
 @mixin last{ margin-right:0; }
 
 @mixin prefix($n, $cols: $grid-columns){
-	padding-left: $grid-width / $cols * $n;
+	padding-left: $grid-width / $grid-columns * $n;
 }
 
 @mixin suffix($n, $cols: $grid-columns){
-	padding-right: $grid-width / $cols * $n;
+	padding-right: $grid-width / $grid-columns * $n;
 }
 
 @mixin push($n){
 	position:relative;
-	left: ($grid-width / $cols) * $n;
+	left: ($grid-width / $grid-columns * $n);
 }
 
 @mixin pull($n){
 	position:relative;
-	right: -($grid-width / $cols) * $n;
-}
-
-@import 'compass/layout/grid-background';
-$grid-background-column-color: #eef2f9;
-$grid-background-offset: ceil($grid-gutter-width / 2);
-$grid-background-baseline-color: rgba(0,0,0,0.15);
-$grid-background-gutter-color: rgba(255,255,255,0);
-$grid-background-total-columns: $grid-columns;
-$grid-background-column-width: $grid-column-width;
-$grid-background-gutter-width: $grid-gutter-width;
-$grid-background-baseline-height: #{($line-height / $font-size)}em;
-
-
-@mixin debug-grid{
-	background-color:transparent;
-	@include grid-background;
+	left: -($grid-width / $grid-columns * $n);
 }

data/lib/facades/stylesheets/facades/legacy/_forms.scss

@@ -0,0 +1,130 @@
+@import 'facades/utilities';
+
+// Mixin for styling select boxes
+@mixin form-select( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
+	@include form-field($font-size, $normal-border, $focus-border, $border-radius);
+	border-style:solid;
+	border-width:1px;
+	font-size:$font-size;
+	&:focus{ outline:none; }
+	&[multiple=multiple]{ border-color:$unfocused-border-color; }
+}
+
+// Mixin for styling textareas
+@mixin form-textarea( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
+	@include form-field($font-size, $normal-border, $focus-border, $border-radius);
+	margin:0.5em; padding:5px;
+	border-style:solid;
+	border-width:1px;		
+}
+
+@mixin form-button($font-size: $input-font-size, $radius: $input-border-radius){
+	-webkit-appearance: none;
+	-moz-border-radius: $radius;
+	-webkit-border-radius: $radius;
+	border-radius: $radius;
+	-moz-background-clip: padding;
+	-webkit-background-clip: padding;
+	background-clip: padding-box;
+	cursor:pointer; outline:0; overflow:visible; width:auto;	
+	//IE7
+	*padding-top: 2px;
+	*padding-bottom: 0px;
+}
+
+// Default input styling
+@mixin form-input( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
+	&.text,
+	&[type=text],
+	&[type=password],
+	&[type=email],
+	&[type=url]{ 		
+		@include form-field($font-size, $normal-border, $focus-border, $border-radius); padding:.5em;
+		border-style:solid;
+		border-width:1px;
+	}
+	
+	&[type=checkbox],
+	&[type=radio]{
+		position: relative; vertical-align:top; top:3px; 
+		// IE8, IE9, IE10
+		top:0\0; *top: -3px; // IE7		
+		@include inline-block; margin-right:1em; vertical-align:baseline; width:auto;
+	}
+}
+
+// Global base styles for all input types
+@mixin form-field( $font-size: $input-font-size, $normal-border: $unfocused-border-color, $focus-border: $focus-border-color, $border-radius: $input-border-radius ){
+	@include border-radius($border-radius); 
+	font-size:$font-size; 
+	border-color:$normal-border;
+	margin:0;
+  	vertical-align:middle;
+	::-moz-focus-inner{ border:0; padding:0; }
+	&:focus{ outline:none; border-color:$focus-border; }
+}
+
+// Mixin for displaying errors and error messages on fields.
+@mixin form-errors( $color:$error-color, $border-color:$error-border-color, $bg-color:$error-bg-color ){
+	&.#{$form-error-class}{
+		input[type=text],
+		input[type=password], 
+		input[type=email], 
+		textarea{ 
+			border:1px solid $border-color; 
+			background:$bg-color; 
+		}
+		label{ color:$color; }
+		#{$form-hint-selector}{ display:none; }
+	}	
+}
+
+// Mixin for displaying form hints
+@mixin form-field-hint( $color: $form-hint-color ){
+	font-size:.95em; line-height:.95em; font-weight:normal; color:$color; display:block;
+}
+
+// Mixin for styling field error messages
+@mixin form-error-message($color: $error-color){	 
+	font-size:.95em; line-height:.95em; color:$error-color;  display:block; 
+}
+
+// Creates a column based list of fields within a form. Forms elements should be marked up using ordered lists for semantic value.
+@mixin form-split-field-list{
+	display:block; clear:both; margin:-.5em 0px; @include pie-clearfix;
+	li{ float:left; margin:0 1em 0 0; vertical-align:middle; 
+		label, 
+		input{
+			&[type=text],
+			&[type=password],
+			&[type=email]{ display:block; }
+		}
+		select{ margin:.75em 0px; }
+	}
+}
+
+@mixin form-field-hints{
+	#{$form-hint-selector}{ @include form-field-hint; }
+}
+
+// Creates a single column list of fields within a form. Form elements should be marked up using ordered lists for semantic value.
+@mixin form-field-list{
+	list-style-type:none; 
+	margin:0px; 
+	padding:0px; 
+	padding-right:10px;		
+	
+	li{ padding:.5em 0px;			
+		&.clear{ clear:both; }
+		&.buttons{ clear:both; padding:.25em 0px 0px 0px; }
+		&.inline label{ @include inline-block; }
+		&.multifield{
+			input, select{ @include inline-block; }
+		}
+		ol{ @include form-split-field-list; }
+		#{$form-error-message-selector}{ @include form-error-message( $error-color ); }
+	}		
+
+	label abbr{ outline:none; border:none; color:red; }
+	fieldset{ border:none; }
+}

data/lib/facades/stylesheets/facades/{_reset.scss → legacy/_reset.scss}

@@ -1,3 +1,26 @@
+@warn "facades/reset is depreciated. Please use facades/setup (with facades/setup/ie in your ie stylesheet) to support normalization over resetting.";
+
+$font-size:12px !default;
+$line-height:24px !default;
+$font-family:'Helvetica Nueue', Helvetica, Arial, sans-serif !default;
+$font-color:#333 !default;
+$fixed-font-family:"andale mono", "lucida console", monospace !default;
+
+// Link colors
+$link-color:#06c !default;
+$link-hover-color:#09f !default;
+$link-focus-color:$link-hover-color !default;
+$link-active-color:lighten(adjust-hue($link-color, 75deg), 10%) !default;
+$link-visited-color:darken($link-color, 10%) !default;
+
+// Lists
+$ordered-list-type:decimal !default;
+$unordered-list-type:disc !default;
+
+// Table striping
+$table-header-color:#bbb !default;
+$table-stripe-color:lighten($table-header-color, 20%) !default;
+
 @import 'facades/typography/rhythm';
 @import "compass/typography/lists/inline-block-list";
 // 
@@ -29,14 +52,18 @@ table { border-collapse:collapse; border-spacing:0; }
 hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
 input, select { vertical-align:middle; }
 
-$base-font-size:   $font-size;
+$base-font-size: $font-size;
 $base-line-height: $line-height;
 
 // Establish a baseline by default. 
-@include establish-baseline($font-size);
 body{ 
-	font-size-adjust:none;
+	font-size-adjust:100%;
+	-ms-text-size-adjust: none;
+	-webkit-text-size-adjust: 100%;
+	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
 	@include normal-text; 
+	font-size:($font-size / 16px) * 1em;
+	line-height:($line-height / 16px) * 1em;
 }
 img{ margin:0; }
 
@@ -73,11 +100,16 @@ dl{ margin: 0 0 rhythm(1, $font-size) 0;
 dd{ margin:0 1.5em rhythm(1, $font-size) 1.5em;  }
 table{ margin-bottom: 1.4em; width: 100%; 
 	th{ font-weight: bold; }
-	thead th{ background: $table-header-color; }
-	th,td,caption{ padding: 4px 10px 4px 5px; }
-	table.striped tr:nth-child(even) td,
-	table tr.even td{ background:$table-stripe-color; }
+	thead th{ background: $table-header-color; text-align:left; }
+	th,td,caption{ padding: 4px 10px 4px 5px; }	
 }
+table.striped tr:nth-child(even) td, tr.even td{ background:$table-stripe-color; }
 nav{
 	ol, ul{ @include inline-block-list(1em); @include margin-trailer(1, $font-size); }
-}
+}
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
+button, input { line-height: normal;  }
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
+input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }