facades 0.1.0 → 1.0.0

data/src/icons/font-awesome.yml

@@ -0,0 +1,210 @@
+glass: 'f000'
+music: 'f001'
+search: 'f002'
+envelope: 'f003'
+heart: 'f004'
+star: 'f005'
+star_empty: 'f006'
+user: 'f007'
+film: 'f008'
+th_large: 'f009'
+th: 'f00a'
+th_list: 'f00b'
+ok: 'f00c'
+remove: 'f00d'
+zoom_in: 'f00e'
+zoom_out: 'f010'
+off: 'f011'
+signal: 'f012'
+cog: 'f013'
+trash: 'f014'
+home: 'f015'
+file: 'f016'
+time: 'f017'
+road: 'f018'
+download_alt: 'f019'
+download: 'f01a'
+upload: 'f01b'
+inbox: 'f01c'
+play_circle: 'f01d'
+repeat: 'f01e'
+refresh: 'f021'
+list_alt: 'f022'
+lock: 'f023'
+flag: 'f024'
+headphones: 'f025'
+volume_off: 'f026'
+volume_down: 'f027'
+volume_up: 'f028'
+qrcode: 'f029'
+barcode: 'f02a'
+tag: 'f02b'
+tags: 'f02c'
+book: 'f02d'
+bookmark: 'f02e'
+print: 'f02f'
+camera: 'f030'
+font: 'f031'
+bold: 'f032'
+italic: 'f033'
+text_height: 'f034'
+text_width: 'f035'
+align_left: 'f036'
+align_center: 'f037'
+align_right: 'f038'
+align_justify: 'f039'
+list: 'f03a'
+indent_left: 'f03b'
+indent_right: 'f03c'
+facetime_video: 'f03d'
+picture: 'f03e'
+pencil: 'f040'
+map_marker: 'f041'
+adjust: 'f042'
+tint: 'f043'
+edit: 'f044'
+share: 'f045'
+check: 'f046'
+move: 'f047'
+step_backward: 'f048'
+fast_backward: 'f049'
+backward: 'f04a'
+play: 'f04b'
+pause: 'f04c'
+stop: 'f04d'
+forward: 'f04e'
+fast_forward: 'f050'
+step_forward: 'f051'
+eject: 'f052'
+chevron_left: 'f053'
+chevron_right: 'f054'
+plus_sign: 'f055'
+minus_sign: 'f056'
+remove_sign: 'f057'
+ok_sign: 'f058'
+question_sign: 'f059'
+info_sign: 'f05a'
+screenshot: 'f05b'
+remove_circle: 'f05c'
+ok_circle: 'f05d'
+ban_circle: 'f05e'
+arrow_left: 'f060'
+arrow_right: 'f061'
+arrow_up: 'f062'
+arrow_down: 'f063'
+share_alt: 'f064'
+resize_full: 'f065'
+resize_small: 'f066'
+plus: 'f067'
+minus: 'f068'
+asterisk: 'f069'
+exclamation_sign: 'f06a'
+gift: 'f06b'
+leaf: 'f06c'
+fire: 'f06d'
+eye_open: 'f06e'
+eye_close: 'f070'
+warning_sign: 'f071'
+plane: 'f072'
+calendar: 'f073'
+random: 'f074'
+comment: 'f075'
+magnet: 'f076'
+chevron_up: 'f077'
+chevron_down: 'f078'
+retweet: 'f079'
+shopping_cart: 'f07a'
+folder_close: 'f07b'
+folder_open: 'f07c'
+resize_vertical: 'f07d'
+resize_horizontal: 'f07e'
+bar_chart: 'f080'
+twitter_sign: 'f081'
+facebook_sign: 'f082'
+camera_retro: 'f083'
+key: 'f084'
+cogs: 'f085'
+comments: 'f086'
+thumbs_up: 'f087'
+thumbs_down: 'f088'
+star_half: 'f089'
+heart_empty: 'f08a'
+signout: 'f08b'
+linkedin_sign: 'f08c'
+pushpin: 'f08d'
+external_link: 'f08e'
+signin: 'f090'
+trophy: 'f091'
+github_sign: 'f092'
+upload_alt: 'f093'
+lemon: 'f094'
+phone: 'f095'
+check_empty: 'f096'
+bookmark_empty: 'f097'
+phone_sign: 'f098'
+twitter: 'f099'
+facebook: 'f09a'
+github: 'f09b'
+unlock: 'f09c'
+credit_card: 'f09d'
+rss: 'f09e'
+hdd: 'f0a0'
+bullhorn: 'f0a1'
+bell: 'f0a2'
+certificate: 'f0a3'
+hand_right: 'f0a4'
+hand_left: 'f0a5'
+hand_up: 'f0a6'
+hand_down: 'f0a7'
+circle_arrow_left: 'f0a8'
+circle_arrow_right: 'f0a9'
+circle_arrow_up: 'f0aa'
+circle_arrow_down: 'f0ab'
+globe: 'f0ac'
+wrench: 'f0ad'
+tasks: 'f0ae'
+filter: 'f0b0'
+briefcase: 'f0b1'
+fullscreen: 'f0b2'
+group: 'f0c0'
+link: 'f0c1'
+cloud: 'f0c2'
+beaker: 'f0c3'
+cut: 'f0c4'
+copy: 'f0c5'
+paper_clip: 'f0c6'
+save: 'f0c7'
+sign_blank: 'f0c8'
+reorder: 'f0c9'
+list_ul: 'f0ca'
+list_ol: 'f0cb'
+strikethrough: 'f0cc'
+underline: 'f0cd'
+table: 'f0ce'
+magic: 'f0d0'
+truck: 'f0d1'
+pinterest: 'f0d2'
+pinterest_sign: 'f0d3'
+google_plus_sign: 'f0d4'
+google_plus: 'f0d5'
+money: 'f0d6'
+caret_down: 'f0d7'
+caret_up: 'f0d8'
+caret_left: 'f0d9'
+caret_right: 'f0da'
+columns: 'f0db'
+sort: 'f0dc'
+sort_down: 'f0dd'
+sort_up: 'f0de'
+envelope_alt: 'f0e0'
+linkedin: 'f0e1'
+undo: 'f0e2'
+legal: 'f0e3'
+dashboard: 'f0e4'
+comment_alt: 'f0e5'
+comments_alt: 'f0e6'
+bolt: 'f0e7'
+sitemap: 'f0e8'
+umbrella: 'f0e9'
+paste: 'f0ea'
+user_md: 'f200'

data/src/scss/facades/_buttons.scss

@@ -0,0 +1,10 @@
+// 
+// Button styles
+// See buttons/simple, buttons/glossy, and buttons/gradient for various button styles.
+// ----------------------------------------------------------------------------------------
+
+@import 'facades/config';
+@import 'facades/mixins';
+@import 'facades/buttons/simple';
+@import 'facades/buttons/glossy';
+@import 'facades/buttons/gradient';

data/src/scss/facades/_config.scss

@@ -0,0 +1,99 @@
+// 
+// Global configuration variables
+// ----------------------------------------------------------------------------------------
+
+// internal use... when calling facades/global, the imported mixins contain
+// checks against adding duplicate css based on this value
+$facades-global-import-used: false !default;
+
+$font-color: #222		!default;
+$font-size: 13px 		!default;
+$line-height: 20px 	!default;
+
+$font-family: 			"Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$fixed-font-family: "Monaco", 'Courier New', monospace !default;
+$serif-font-family: "Georgia", "Times", "Times New Roman", serif !default;
+
+// font sizes for headings, h1 through h4
+$heading-font-sizes: 30px 24px 18px 14px !default;
+
+$selection-background-color: #fe57a1 !default; 	// hot pink selection action!
+$selection-color:						 #fff !default;
+
+// set to false to disable misc transition properties. 
+// for when you need to sacrifice beauty for file size
+$enable-transitions: true !default;
+
+$transition-property: all !default;
+$transition-duration: .2s !default;
+
+/* 
+// Icon Packs
+// --------------------------
+	 Available packs include 
+			- Facades
+			- FontAwesome
+*/
+$icon-pack:'facades' !default;
+$icon-font-family:icon-font($icon-pack) !default; 
+
+$link-color: #00e !default;
+$link-visited-color: darken($link-color, 5%) !default;
+$link-hover-color: lighten($link-color, 5%) !default;
+
+// 
+// General colors
+// --------------------------
+
+$horizontal-rule-color: #e5e5e5 !default;
+
+$table-border-color: #ddd !default;
+$table-stripe-color: #f5f5f5 !default;
+
+
+// 
+// Notification colors
+// --------------------------
+
+$notice-color: 	#339BB9 !default;
+$success-color: #57A957 !default;
+$error-color:		#C43C35 !default;
+$warning-color: #EED74F !default;
+
+// 
+// Forms and inputs
+// --------------------------
+
+$input-border-color: 					#ccc !default;
+$input-focus-color:						$font-color !default;
+$input-focus-border-color:  	$notice-color !default;
+$input-error-color:						$error-color !default;
+$input-error-border-color:  	$error-color !default;
+$input-border-radius:					3px !default;
+$input-disabled-color:      	#ccc;
+$input-disabled-border-color: #ddd;
+
+$input-box-shadow:						#efefef 3px 3px 6px 0px inset !default;
+$input-focus-box-shadow:			rgba($input-focus-border-color, .6) 0 0 5px 0 !default;
+
+$field-hint-color: #aaa;
+
+// 
+// UI elements
+// --------------------------
+
+$button-border-radius: 3px !default;
+$button-font-size: 		 $font-size * 0.95 !default;
+$tooltip-color:				 rgba(0,0,0,.8) !default;
+
+$tab-border-color: #ccc !default;
+$tab-accent-color: $notice-color !default; // the border color used on active tabs
+$pill-color:			 $notice-color !default; // color of active pills
+$pill-border-radius: 20px !default; // border radius of pill items
+
+//
+// Special colors
+//
+
+$facebook-blue:#39589d;
+$twitter-blue:#00abf5;

data/src/scss/facades/_debug.scss

@@ -0,0 +1,8 @@
+@import 'compass/layout/grid-background';
+
+$grid-background-baseline-color: #efefef;
+$grid-align: ($line-height / $font-size) * 1em;
+
+@mixin debug-baseline{
+	@include baseline-grid-background($grid-align);
+}

data/src/scss/facades/_forms.scss

@@ -0,0 +1,228 @@
+@import 'facades/config';
+@import 'facades/mixins';
+
+/* 
+	General form styles. By default this creates a 'stacked' forms
+	where the label placement is above each field. 
+	
+	Styles are setup for the use of ordered lists in laying out elements for
+	semantic value.
+	
+// ----------------------------------------------------------------------------------------
+
+
+/*
+	Form field lists
+	------------------------------------------------------------------
+	1. .option-group: used for containing multiple checkbox or radio tags
+	2. .select-group: similar to the option-group, but for selects
+	
+*/
+
+@mixin field-list{
+	margin:0;
+	padding:0;
+	list-style:none;
+	
+	li{ 
+		@include padding(0 1);		
+		display:block;
+	}
+	
+	ul, ol{		
+		@include clearfix;
+		
+		li{ float:left;
+			&.clear{ 
+				clear:both; }			
+		}
+	}
+	
+}
+
+@mixin field-column-list{
+	@include clearfix;		
+	li{ float:left; 
+		margin-right:1.5em;
+		&.clear{ 
+			clear:both; }
+	}
+}
+
+
+@mixin form{
+	@include margins(0 1);	
+	
+	label{ 
+		display:block; 
+		@include leading(1);
+		font-weight:bold;
+	}
+	
+	fieldset{ @include fieldset; }
+	
+}
+
+
+@mixin fieldset{
+	legend{
+		display: block;
+		margin-bottom: $line-height * 1.5;
+		font-size: $font-size * 1.5;
+		line-height: $line-height * 2;
+		-webkit-margin-collapse: separate;
+	}
+}
+
+@mixin form-fields{
+	
+	#{input-types(all)}, select, textarea{
+		&:focus{ 
+			outline:none; 
+		}	
+	}
+
+	#{input-types(button)}{
+		width: auto;
+		height: auto;
+	}
+
+	#{input-types(text)},
+	select, textarea{
+		@if $input-box-shadow != false and $input-box-shadow != none{
+			@include box-shadow($input-box-shadow);
+		}
+		border-style:solid;
+		border-width:1px;
+		border-color:$input-border-color;
+		outline:none;
+		@if $enable-transitions == true{
+			@include transition-property(all);
+			@include transition-duration($transition-duration);
+		}
+
+		&:focus{			
+			border-color:$input-focus-border-color;
+			@if $input-box-shadow != false and $input-box-shadow != none{
+				@include box-shadow($input-focus-box-shadow);
+			}
+		}
+
+	}
+
+	input[type=file], #{input-types(boolean)}, select{
+		&:focus{
+			border-color:$input-focus-border-color;
+			@include box-shadow(none);
+			outline: 1px dotted darken($input-border-color, 3%);
+		}
+	}
+
+	#{input-types(text)}, textarea{
+		@include optional-border-radius($input-border-radius);
+		margin:border-rhythm(1px, .35) 0;
+		padding:rhythm(.15) .25em;
+		line-height:normal !important;
+		height:1.7em;
+	}
+	
+	input[type=file]{
+		height:2.2em;
+		vertical-align:middle;
+	}
+	
+	textarea{ height:auto; }
+
+	select{ 	
+		height:$line-height * 1.3;
+		padding:4px;
+		margin-top:border-rhythm(1px, .4);
+		margin-bottom:border-rhythm(1px, .5);
+		option{
+			padding-right:32px;
+		}
+	}
+
+	select[size]{
+		border-style:solid;
+		display:block;
+		@include box-sizing(content-box);
+		margin-top:border-rhythm(1px, .3);
+		margin-bottom:border-rhythm(1px, .6);
+		padding-top:rhythm(.1);
+		height:auto;
+		option{
+			text-indent:.3em;
+		}
+	}
+
+	select[size]{
+		@for $i from 1 through 8{
+			&[size='#{$i}']{
+				height:($line-height * $i);
+			}
+		}
+	}
+
+
+
+	// boolean inputs are inline-block. 
+	// if labels follow them (instead of wrapped) those are inline-block as well.
+	#{input-types(boolean)}{
+		@include inline-block;	
+		margin-right:.5em;
+
+		& + label{
+			@include inline-block;
+		}
+	}
+
+	input[disabled], textarea[disabled], input.disabled, textarea.disabled{
+		cursor: not-allowed;
+		border-color:$input-disabled-border-color;
+		color: $input-disabled-color;
+		background-color:#eee;
+		@if $input-box-shadow != false and $input-box-shadow != none{
+			@include box-shadow(none);
+		}
+	}
+	
+	
+
+	input, textarea{	
+		& + .hint{
+			display:block;
+			color: $field-hint-color;
+			@include font-size($font-size - 2px);
+		}	
+	}	
+	
+}
+
+@mixin select-group{
+	select{
+		@include inline-block;
+	}
+
+	select[size]{ 
+		vertical-align:top;
+	}	
+}
+
+@mixin invalid-field{
+	&{	
+		@if $input-box-shadow != false and $input-box-shadow != none{
+			@include box-shadow(rgba($input-error-color, .15) 3px 3px 6px 0 inset);
+		}
+		border-color: $input-error-border-color; 
+		color: $input-error-color;
+	}
+	
+	& + .hint{
+		display:none;
+	}
+	
+	& + .error{
+		display:block;
+	}
+}

data/src/scss/facades/_global.scss

@@ -0,0 +1,104 @@
+// 
+// Global styles import. Includes all base styles and
+// formatting, and sets up default classes.
+// ----------------------------------------------------------------------------------------
+
+@import 'facades/config';
+@import 'facades/mixins';
+@import 'facades/setup';
+@import 'facades/typography';
+@import 'facades/typography/tables';
+@import 'facades/forms';
+@import 'facades/patterns/labels';
+@import 'facades/patterns/notifications';
+@import 'facades/patterns/pagination';
+@import 'facades/patterns/tabs';
+@import 'facades/patterns/pills';
+@import 'facades/patterns/twipsy';
+@import 'facades/buttons';
+
+$facades-global-import-used: true;
+
+.label{
+	@include label;
+}
+
+.notification{
+	@include notification;
+}
+
+table.bordered{
+	@include bordered-table;
+}
+
+table.striped{
+	@include striped-table;
+}
+
+table.compressed{
+	@include compressed-table;
+}
+
+div.tabbed{
+	@include tabbed;
+	.tab-navigation, .pill-navigation{
+		@include inline-list;
+	}
+	.tab-navigation{
+		@include tab-navigation;
+	}
+	.pill-navigation{
+		@include pill-navigation;
+	}
+}
+
+ul, ol{
+	&.inline-list{
+		@include inline-list;
+	}
+	
+}
+
+html.lt-ie8{
+	ul, ol{
+		&.inline-list li{
+			display:inline;
+		}
+	}
+}
+
+.button, input[type=button], input[type=submit]{
+	@include simple-button;
+	&.glossy{
+		@include glossy-button;
+	}
+	&.gradient{
+		@include gradient-button;
+	}
+}
+
+form{ 
+	@include form;
+	
+	ul, ol{
+		@include field-list;
+	}
+	
+	ul.columns, ol.columns{
+		@include field-column-list;
+	}
+	
+	li.select-group, fieldset.select-group{
+		@include select-group;
+	}
+}
+
+@include form-fields;
+
+input.invalid, textarea.invalid, select.invalid{
+	@include invalid-field;
+}
+
+fieldset{ 
+	@include fieldset;
+}

data/src/scss/facades/_icons.scss

@@ -0,0 +1,61 @@
+@import 'facades/config';
+@import 'facades/icons/classes';
+@import 'facades/icons/legacy';
+
+/*
+	CSS Psuedo font-face icons
+	Creates an inline font-face icon using $icon-font-family.
+	------------------------------------------------------------------
+*/
+
+@mixin icon($name, $size: $font-size, $psuedo: before, $adjust-sizing: true){
+	@if unquote($size) == before or unquote($size) == after{
+		$psuedo: $size;
+		$size: $font-size;
+	}
+	
+	$psuedo:unquote($psuedo);
+	
+	@if $legacy-icon-format{ @include icon-expression($name, $size, $psuedo); }
+	@else{
+		&:#{$psuedo}{
+			font-family:$icon-font-family;
+			@include icon-content($name);
+		}	
+	}
+	
+}
+
+@mixin icon-before($name, $size: $font-size){
+	@include icon($name, $size, before);
+}
+
+@mixin icon-after($name, $size: $font-size){
+	@include icon($name, $size, after);
+}
+
+// Creates a square sprite-like icon 
+@mixin icon-rect($size: 24px, $name: false){
+	&{
+		overflow:hidden;
+		width:$size;
+		height:$size;
+ 		line-height:$size;
+		font-size:ceil($size * 0.8);
+		white-space:nowrap;
+		display:inline-block;
+	}
+	
+	&:before{
+		line-height:1.1;
+		display:inline-block;
+		width:$size;
+		height:$size;
+		text-align:center;
+		@if $name{ @include icon-content($name); }
+	}
+}
+
+@mixin icon-content($name){
+	content:"#{icon-glyph($name, $icon-pack)}";
+}