facades 0.1.0 → 1.0.0

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

@@ -1,104 +0,0 @@
-// -------------------------------------------------------------------------------
-// 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;
-$font-family: 'Helvetica Nueue', 'Helvetica', 'Arial', sans-serif !default;
-$default-font-family: $font-family !default;
-$fixed-font-family:"andale mono", "lucida console", monospace !default;
-
-// Link colors
-// -------------------------------------------------
-$link-color: 		 #00e !default;
-$link-active-color:  lighten($link-color, 5%) !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;
-$input-padding:             0.65em 0.35em !default;
-$input-placeholder-color:   #888888;
-
-// 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;
-
-$select-arrow-image:'/images/select_arrow.gif' !default;
-
-// Visual cues
-// -------------------------------------------------
-
-// Error colors, red by refault
-$error-color: 			 #bd132a !default;
-$error-background-color: #fde0e4 !default;
-$error-border-color: 	 #E41D38 !default;
-
-// Success colors, green by default
-$success-color:#264409 !default;
-$success-background-color:#e6efc2 !default;
-$success-border-color:#c6d880 !default;
-
-// Notice colors, yellow by default
-$notice-color:#514721 !default;
-$notice-background-color:#fff6bf !default;
-$notice-border-color:#ffd324 !default;
-
-// Standard info colors, blue by default
-$info-color:#205791 !default;
-$info-background-color:#d5edf8 !default;
-$info-border-color:#92cae4 !default;
-
-$invalid-input-border-color: $error-border-color !default;
-$invalid-input-background-color: $error-background-color !default;
-$invalid-input-color: $error-color !default;
-
-// Flash messages
-$flash-success-class: 'success';
-$flash-notice-class:  'notice';
-$flash-error-class:   'error';
-
-// Misc typography
-//-------------------------------------------------
-
-$horizontal-rule-color:#ccc !default;
-$horizontal-rule-size:1px !default;
-
-@import 'facades/utilities';

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

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

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

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

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

@@ -1,32 +0,0 @@
-/* =====================================================
-   Misc utilities 
-   ===================================================== */
-
-@import 'facades/utilities/clearfix';
-@import 'facades/utilities/cursors';
-
-// 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/_dropdown-list.scss

@@ -1,7 +0,0 @@
-@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,53 +0,0 @@
-@import 'facades/utilities';
-@import 'facades/typography/lists';
-
-// Creates a column based list of fields within a form. 
-// Form elements should be marked up using ordered lists for semantic value.
-//-----------------------------------------------------------------------------------------------
-
-@mixin form-split-field-list{
-	@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.
-// --------------------------------------------------------------------------------------------------
-
-@mixin form-field-list{
-	
-	@include no-list; 
-	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; }
-	}		
-		
-	fieldset{ border:none; }
-}

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

@@ -1,49 +0,0 @@
-// Fixed grid system based on a merge of Blueprint and 960gs.
-$grid-gutter-width:  10px !default;
-$grid-width: 	960px !default;
-$grid-columns:  24 !default;
-$grid-column-width: $grid-width / $grid-columns * 1 - $grid-gutter-width;
-
-@mixin container{
-	margin-left: auto;
-	margin-right: auto;
-	width: $grid-width;
-	@include pie-clearfix;
-}
-
-@function span($n){
-  @return $grid-width / $grid-columns * $n - $grid-gutter-width;
-}
-
-@mixin column-base($gutter: $grid-gutter-width){
-	display: inline; float: left;
-	margin-left: $gutter / 2;
-	margin-right: $gutter / 2;
-}
-
-@mixin column($n, $last:false){
-	@include column-base($grid-gutter-width);
-	@if $last{ margin-right:0; }
-	width:span($n);
-}
-
-@mixin first{ margin-left:0; }
-@mixin last{ margin-right:0; }
-
-@mixin prefix($n, $cols: $grid-columns){
-	padding-left: $grid-width / $grid-columns * $n;
-}
-
-@mixin suffix($n, $cols: $grid-columns){
-	padding-right: $grid-width / $grid-columns * $n;
-}
-
-@mixin push($n){
-	position:relative;
-	left: ($grid-width / $grid-columns * $n);
-}
-
-@mixin pull($n){
-	position:relative;
-	left: -($grid-width / $grid-columns * $n);
-}

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

@@ -1,164 +0,0 @@
-/* Arfully Masterminded by ZURB */
-
-/* --------------------------------------------------
-	:: Grid
-	
-	This is the mobile-friendly, responsive grid that
-	lets Foundation work much of its magic.
-	
-	-------------------------------------------------- */
-
-$grid-width:		  980px !default;
-$_grid-column-widths: 4.3% 13% 21.68% 30.37% 39.1% 47.8% 56.5% 65.2% 73.9% 82.6% 91.3% 100%;
-$_grid-gutter-width:  4.4%;
-
-@mixin row{
-	width:100%;
-	max-width: $grid-width;
-	min-width: 727px;
-	margin:0 auto;
-	zoom:1;
-	
-	.row{
-		min-width:0;
-	}
-
-	&:before, &:after { content: ""; display: table; }
-	&:after { clear: both; }
-	zoom: 1;
-	
-	@media only screen and (max-width: 767px) {
-		min-width:0px;
-		width: 99%;
-	    min-width: 0;
-	    margin-left: 0;
-	    margin-right: 0;
-	}
-}
-
-@mixin container{
-	padding:0 20px;
-	margin:0 auto;
-	@media only screen and (max-width: 767px) {
-		padding:0;
-	}
-}
-
-@mixin column($num:1){
-	@if( $num < length($_grid-column-widths) ){
-		margin-left:$_grid-gutter-width;
-	}
-	float:left;
-	min-height:1px;
-	width:width($num);
-	
-	&.first, &:first-child{
-		margin-left:0;
-	}
-	
-	@media only screen and (max-width: 767px) {
-		width: width($num) / 3;
-	    margin-left: $_grid-gutter-width / 6;
-		margin-right: $_grid-gutter-width / 6;
-	}
-}
-
-@mixin offset($num:1){
-	$widths: 13.1% 21.8% 30.5% 39.2% 47.9% 56.6% 65.3% 74.0% 82.7% 91.4%;		
-	$childs: 8.7% 17.4% 26.1% 34.8% 43.5% 52.2% 60.9% 69.6% 78.3% 87% 95.7%;
-	margin-left:nth($widths, $num);
-	&:first-child{
-		margin-left:nth($childs, $num);
-	}
-	
-	@media only screen and (max-width: 767px) {
-		margin-left:0px;
-		&:first-child{ margin-left:0px; }
-	}
-}
-
-@mixin push($num:1){
-	position:relative;
-	left: (width($num) + $_grid-gutter-width);
-}
-
-@mixin pull($num:1){
-	position:relative;
-	right: (width($num) + $_grid-gutter-width);
-}
-
-@function width($cols:1){
-	@return nth($_grid-column-widths, $cols);
-}
-
-// Convert classes to top-level mixin
-	
-@mixin responsive-grid-classes{
-	.container { padding: 0 20px; }
-	
-	.row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
-	/* To fix the grid into a certain size, set max-width to width */
-	.row .row { min-width: 0; }
-	
-	.column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
-	.column:first-child, .columns:first-child { margin-left: 0; }
-	
-	.row .one.columns 		{ width: 4.3%; }
-	.row .two.columns 		{ width: 13%; }
-	.row .three.columns 	{ width: 21.68%; }
-	.row .four.columns 		{ width: 30.37%; }
-	.row .five.columns 		{ width: 39.1%; }
-	.row .six.columns 		{ width: 47.8%; }
-	.row .seven.columns 	{ width: 56.5%; }
-	.row .eight.columns 	{ width: 65.2%; }
-	.row .nine.columns 		{ width: 73.9%; }
-	.row .ten.columns 		{ width: 82.6%; }
-	.row .eleven.columns 	{ width: 91.3%; }
-	.row .twelve.columns 	{ width: 100%; }
-	
-	.row .offset-by-one 	{ margin-left: 13.1%;  }
-	.row .offset-by-two 	{ margin-left: 21.8%;  }
-	.row .offset-by-three 	{ margin-left: 30.5%;  }
-	.row .offset-by-four 	{ margin-left: 39.2%;  }
-	.row .offset-by-five 	{ margin-left: 47.9%;  }
-	.row .offset-by-six 	{ margin-left: 56.6%;  }
-	.row .offset-by-seven 	{ margin-left: 65.3%;  }
-	.row .offset-by-eight 	{ margin-left: 74.0%;  }
-	.row .offset-by-nine 	{ margin-left: 82.7%;  }
-	.row .offset-by-ten 	{ margin-left: 91.4%;  }
-	
-	.row .centered { float: none; margin: 0 auto; }
-
-	.row .offset-by-one:first-child 	{ margin-left: 8.7%;  }
-	.row .offset-by-two:first-child 	{ margin-left: 17.4%;  }
-	.row .offset-by-three:first-child 	{ margin-left: 26.1%;  }
-	.row .offset-by-four:first-child 	{ margin-left: 34.8%;  }
-	.row .offset-by-five:first-child 	{ margin-left: 43.5%;  }
-	.row .offset-by-six:first-child 	{ margin-left: 52.2%;  }
-	.row .offset-by-seven:first-child 	{ margin-left: 60.9%;  }
-	.row .offset-by-eight:first-child 	{ margin-left: 69.6%;  }
-	.row .offset-by-nine:first-child 	{ margin-left: 78.3%;  }
-	.row .offset-by-ten:first-child 	{ margin-left: 87%;  }
-	.row .offset-by-eleven:first-child 	{ margin-left: 95.7%;  }
-	
-	/* Source Ordering */
-	.push-two 		{ left: 17.4% }
-	.push-three 	{ left: 26.1%; }
-	.push-four 		{ left: 34.8%; }
-	.push-five 		{ left: 43.5%; }
-	.push-six 		{ left: 52.2%; }
-	.push-seven 	{ left: 60.9%; }
-	.push-eight 	{ left: 69.6%; }
-	.push-nine 		{ left: 78.3%; }
-	.push-ten 		{ left: 87%; }
-	
-	.pull-two 		{ right: 17.4% }
-	.pull-three 	{ right: 26.1%; }
-	.pull-four 		{ right: 34.8%; }
-	.pull-five 		{ right: 43.5%; }
-	.pull-six 		{ right: 52.2%; }
-	.pull-seven 	{ right: 60.9%; }
-	.pull-eight 	{ right: 69.6%; }
-	.pull-nine 		{ right: 78.3%; }
-	.pull-ten 		{ right: 87%; }
-}

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

@@ -1,284 +0,0 @@
-form{
-	margin-bottom:1em; 
-}
-
-fieldset{ 
-	margin-bottom:1em; 
-}
-
-select{
-	padding: 0; 
-}
-
-label, legend { 
-	abbr[title]{ 
-		outline:none; 
-		border:none; 
-		color:red; 
-	}
-	
-	display: block;
-	font-weight: bold;
-	font-size: $font-size;
-}
-
-
-// Make UI consistant across all browsers.
-//----------------------------------------------------------------------------------------------------
-
-::-moz-focus-inner {
-	border: 0;
-	padding: 0; 
-}
-
-input[type="search"]::-webkit-search-decoration {
-	display: none; 
-}
-
-input, button, select, textarea {
-	margin: 0;
-	vertical-align: middle; 
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-	position: relative;
-	vertical-align: top;
-	top: 0.5em;
-	// IE8, IE9, IE10
-	top: 0 \0;
-	// IE7
-	*top: -3px; 
-}
-
-// iPad
-@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) {
-	input[type="radio"],
-	input[type="checkbox"] {
-		vertical-align: baseline;
-		top: 2px; 
-	}
-}
-
-// iPhone 3
-@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
-	input[type="radio"],
-	input[type="checkbox"] {
-		vertical-align: baseline;
-		top: 0; 
-	} 
-}
-
-// iPhone 4
-@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {
-	input[type="radio"],
-	input[type="checkbox"] {
-    	vertical-align: baseline;
-		top: 0; 
-	}
-}
-
-button, input[type="reset"], input[type="submit"], input[type="button"] {
-	-webkit-appearance: none;
-	background: #dddddd;
-	-moz-background-clip: border-box;
-	-webkit-background-clip: border-box;
-	background-clip: border-box;
-	
-	@if $button-border-radius not 0px{
-		-webkit-border-radius: $button-border-radius;
-		-moz-border-radius: $button-border-radius;
-		border-radius: $button-border-radius;
-	}
-	
-	@if $button-border-color not none{
-		border: 1px solid;
-		border-color: $button-border-color;
-	}
-	
-	cursor: pointer;
-	color: $button-color;
-	font: bold 12px / 1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
-	outline: 0;
-	overflow: visible;
-	padding: $button-padding;
-	width: auto;
-	user-select:none;
-	// IE7
-	*padding-top: 2px;
-	*padding-bottom: 0px; 
-}
-
-button {
-	// IE7
-	*padding-top: 1px;
-	*padding-bottom: 1px; 
-}
-
-textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"],
-input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"],
-input[type="time"], input[type="url"], input[type="week"] {
-	-webkit-appearance: none;
-	-webkit-box-sizing: content-box;
-	-moz-box-sizing: content-box;
-	box-sizing: content-box;
-	-ms-box-sizing:content-box;
-	-moz-background-clip: padding;
-	-webkit-background-clip: padding;
-	background-clip: padding-box;
-	background-color: white;
-	
-	@if $input-border-color not none{
-		border: 1px solid;
-		border-color: $input-border-color;
-	}
-	
-	@if $input-border-radius not none and $input-border-radius not 0px{
-		-webkit-border-radius: $input-border-radius;
-		-moz-border-radius: $input-border-radius;
-		border-radius: $input-border-radius;
-	}
-	
-	color: $input-color;
-	outline: 0;
-	height:auto;
-	padding: $input-padding;
-	font-size: $input-font-size;	
-	// Leaving out Helvetica Neue, to not throw off size="..."
-	// on inputs. Arial is more reliable, on Windows and OS X.
-	font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
-	// IE7
-	*padding-top: 2px;
-	*padding-bottom: 1px;
-	*height: auto; 
-	min-width:100px;
-	
-	&[disabled]{ 
-		color: $disabled-input-color;
-		border-color: $disabled-input-border-color;
-		background-color: $disabled-input-background-color; 
-	}
-	
-	&:focus, &:active{
-		color:$focus-input-color;
-		border-color:$focus-input-border-color;
-		background-color:$focus-input-background-color;
-	}
-}
-
-// Separate rule for Firefox.
-// Separate rule for IE, too.
-// Cannot stack with WebKit's.
-::-webkit-input-placeholder {
-	color: $input-placeholder-color;
-}
-
-input:-moz-placeholder, textarea:-moz-placeholder{
-	color: $input-placeholder-color;
-}
-
-input.placeholder-text, textarea.placeholder-text{
-	color: $input-placeholder-color;
-}
-
-:invalid {
-	// Suppress red glow that Firefox
-	// adds to form fields by default,
-	// even when user is still typing.
-	-moz-box-shadow: none;
-	-webkit-box-shadow: none;
-	box-shadow: none; 
-}
-
-button:focus, button:active, input:focus, input:active,
-select:focus, select:active, textarea:focus, textarea:active {
-	z-index: 1; 
-	outline: none;
-}
-
-
-button[disabled], input[disabled], select[disabled], select[disabled] option, select[disabled] optgroup, textarea[disabled] {
-	-moz-box-shadow: none;
-	-webkit-box-shadow: none;
-	box-shadow: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-	color: $font-color;
-	cursor: default; 
-}
-
-textarea, select[size], select[multiple] {
-	height: auto;
-}
-
-select[size]{ padding:0.35em; }
-
-// Tweaks for Safari + Chrome.
-@media (-webkit-min-device-pixel-ratio: 0) {
-	select {
-		
-		@if($select-arrow-image not false and $select-arrow-image not "" ){
-			background-image:url($select-arrow-image);
-			background-repeat: no-repeat;
-			background-position: 98% 50%;
-		}		
-		
-		padding-right: 20px; 
-	}
-	
-	select[size], select[multiple] {
-		background-image: none;
-		padding: 0; 
-	}
-	::-webkit-validation-bubble-message {
-		border: 1px solid;
-		border-color: $input-border-color;
-		color: white;
-		font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
-		overflow: hidden;
-		padding: 15px 15px 17px;
-		text-shadow: black 0 0 1px;
-		height: 16px; 
-	}
-	::-webkit-validation-bubble-arrow,
-	::-webkit-validation-bubble-top-outer-arrow,
-	::-webkit-validation-bubble-top-inner-arrow {
-		-webkit-box-shadow: none;
-		box-shadow: none;
-		background: #666666;
-		border: 0; 
-	}
-}
-
-textarea {
-	min-height: 40px;
-	overflow: auto;
-	resize: vertical;
-	width: 100%;
-}
-
-optgroup {
-	color: black;
-	font-style: normal;
-	font-weight: normal; 
-}
-
-span.field-with-error, span.field-with-errors{ position:relative; @include inline-block; padding-bottom:10px;
-	textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"],
-	input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"],
-	input[type="time"], input[type="url"], input[type="week"]{
-		border-color:$invalid-input-border-color;
-		color:$invalid-input-color;
-		background-color:$invalid-input-background-color;
-	}
-	
-	span.errors-for-field, span.error-for-field{
-		font-size:11px;
-		position:absolute; 
-		bottom:-5px;
-		left:0px;
-		display:block;
-		color:$error-color;		
-	}
-}