facades 0.1.0 → 1.0.0

data/src/scss/facades/icons/_legacy.scss

@@ -0,0 +1,27 @@
+/*
+	Icon support for IE7.
+	Using expressions... deal with it. Its not like IE7 performs
+	well anyways.
+	------------------------------------------------------------------
+*/
+
+$legacy-icon-format: false !default;
+
+
+@mixin icon-expression($name, $size: $font-size * 1.75, $psuedo: before){
+	$expr-node: '<i class="ie7-psuedo-icon" style="font-size:#{$size}; font-style:normal; font-family:#{$icon-font-family};">#{icon-glyph-entity($name, $icon-pack)}</i>';
+	$expr-format:if( $psuedo == before,  "#{$expr-node} + this.innerHtml", "this.innerHtml + #{$expr-node}");
+	*background-image:expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = #{ unquote($expr-format) });
+}
+
+@mixin legacy-icon-classes($base-class: '.icon'){
+	$o-format: $legacy-icon-format;
+	$legacy-icon-format: true;
+	@include icon-classes($base-class);
+	i.ie7-psuedo-icon{
+		speak:none;
+		display:inline-block;
+		display:inline;
+	}
+	$legacy-icon-format: $o-format;
+}

data/src/scss/facades/layout/_lists.scss

@@ -0,0 +1,43 @@
+// used as a base for inline-list style navigations
+@mixin inline-list{
+	white-space:nowrap;
+	list-style:none;
+	display:block;	
+	letter-spacing: -4px;
+	word-spacing:-4px;
+	margin-left:0;
+	
+	li{
+		@include inline-block;
+		letter-spacing:normal;
+		word-spacing:normal;		
+		
+		*{ letter-spacing:normal; 
+			 word-spacing:normal;
+			}
+	}
+	
+	li a{ 
+		display:block;
+		white-space:normal;
+		@include inline-block;
+	}
+	
+}
+
+// used as a base for floated-list style navigations
+@mixin floated-list{
+	list-style:none;
+	display:block;
+	margin-left:0;
+	
+	li{
+		display:block;
+		float:left;
+	}
+	
+	li a{ 
+		display:block;
+	}
+	
+}

data/src/scss/facades/mixins/_gradients.scss

@@ -0,0 +1,30 @@
+//
+// Striped gradient action for things like progress bars.
+//
+
+@mixin gradient-stripe($color, $angle: -45deg) {
+	background-color: $color;
+	@include background-image(linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent));
+}
+
+//
+// Basic gradient styles based on type.
+// gradient types are: bevel, glossy, recessed, matte
+//
+@mixin gradient-style($color, $type: matte) {
+	background-color:$color;
+	$gradient-style:none;
+	@if $type == bevel {
+		$gradient-style: linear-gradient(lighten($color, 30%), lighten($color, 15%) 2%, lighten($color, 8%) 30%, $color 65%, darken($color, 10%));	  
+	} @else if $type == glossy {
+		$gradient-style: linear-gradient(lighten($color, 15%), lighten($color, 5%) 50%, $color 51%, darken($color, 5%));
+	} @else if $type == recessed {
+		$gradient-style: linear-gradient(darken($color, 10%), darken($color, 5%) 10%, $color 65%, lighten($color, .5%));
+	} @else if $type == matte {
+	  $gradient-style: linear-gradient(lighten($color, 30%), lighten($color, 7%) 2%, darken($color, 7%));
+	} @else {
+	  background-image: none;
+	}
+	
+	@include background-image($gradient-style);
+}

data/src/scss/facades/mixins/_rhythm.scss

@@ -0,0 +1,37 @@
+@import 'compass/typography/vertical_rhythm';
+
+$base-font-size: $font-size;
+$base-line-height: $line-height;
+
+@mixin font-size($size: $font-size, $lines: 1){
+	@include adjust-font-size-to($size, $lines);
+}
+
+@mixin leading($lines: 1, $size: $font-size){
+	@include adjust-leading-to($lines, $size);
+}
+
+@mixin margins($lines: 1, $size: $font-size){
+	@include spacing(margin, $lines, $size);
+}
+
+@mixin padding($lines: 1, $size: $font-size){
+	@include spacing(padding, $lines, $size);
+}
+
+
+@mixin spacing($type: margin, $lines: 1, $size: $font-size){
+	$type:unquote($type);
+	@if type-of($lines) == list{
+		@include leader(nth($lines, 1), $size, $type);
+		@include trailer(nth($lines, 2), $size, $type); }
+	@else{
+		@include leader($lines, $size, $type);
+		@include trailer($lines, $size, $type); }
+}
+
+
+@function border-rhythm($width: 1px, $lines:1, $size: $font-size, $leading: $line-height){
+	$unit: 1em;
+	@return $unit / $size * ($lines * $leading - $width);
+}

data/src/scss/facades/mobile/_buttons.scss

@@ -0,0 +1,97 @@
+@import 'facades/mobile/config';
+@import 'facades/mixins';
+
+@mixin button{
+	@include background-clip(padding-box);
+	@include border-radius($button-border-radius);
+	@include display-box;
+  @include box-align(center);
+  min-height: $button-height !important;
+	padding: .3em .6em;
+	position: relative;
+	overflow: hidden;
+
+	&.icon {
+		width: 2.1em;
+		height: 2.1em;
+		background-repeat: no-repeat;
+		background-position: center;
+		display: block;
+	}
+	
+	&.icon-mask {
+		width: 1.3em;
+		height: 1.3em;
+		-webkit-mask-size: 1.3em;
+	}
+	
+	&.disabled{
+		.label, .icon{
+			opacity:.5;
+		}
+	}
+
+  &.round {
+		@include border-radius($button-height/2);
+		padding: .1em $button-height/2;
+	}
+
+  &.small{
+		@include border-radius(.3em);
+    padding: .2em .4em;
+    min-height: 0;
+
+		.label {
+      font-size: .6em;
+    }
+
+		.icon {
+			width: .75em;
+			height: .75em;
+		}
+	}
+
+  // Aligns icons to either the left or right side
+  &.icon-left, &.icon-right{
+    @include box-orient(horizontal);
+    @include box-direction(reverse);
+  }
+
+  &.icon-top, &.icon-bottom{
+    @include box-orient(vertical);
+  }
+
+  &.icon-bottom, &.icon-right {
+    @include box-direction(normal);
+  }
+  
+	&.icon-bottom {
+    @include box-direction(reverse);
+  }
+
+	&.icon-center {
+		@include box-pack(center);
+	}
+  
+	&.icon-left .label {
+    margin-left: 2em;
+  }
+  
+	&.icon-right .label {
+		margin-right: 2em;
+  }
+
+  // Labels
+	.label {
+		@include box-flex(1);
+		@include box-align(center);
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		text-align: center;
+		font-weight: bold;
+		line-height: 1.2em;
+		display: block;
+		overflow: hidden;
+	}
+  
+}

data/src/scss/facades/mobile/_config.scss

@@ -0,0 +1,30 @@
+// 
+// Mobile configuration variables
+// ----------------------------------------------------------------------------------------
+
+$font-color: #222		!default;
+$font-size: 13px 		!default;
+$line-height: 20px 	!default;
+
+$font-family: 			"Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif !default;
+$fixed-font-family: "Monaco", 'Courier New', monospace !default;
+
+// default gradient style for ui elements
+$gradient-style: matte !default;
+
+$button-height: 				1.8em !default;
+$button-border-radius: 	.4em !default;
+$button-border-width: 	.1em !default;
+$button-gradient-style:	$gradient-style !default;
+
+// toolbars, navbars, and lists adhere to this global height value
+$row-height: 2.6em !default;
+
+// Compass configuration
+$experimental-support-for-svg:					false;
+$legacy-support-for-ie: 								false;
+$experimental-support-for-khtml:				false;
+$expermiental-support-for-mozilla:			false;
+$support-for-original-webkit-gradients: false;
+$experimental-support-for-opera:				false;
+$experimental-support-for-microsoft:		false;

data/src/scss/facades/mobile/_global.scss

@@ -0,0 +1,81 @@
+@import 'facades/mobile/config';
+@import 'facades/mobile/setup';
+@import 'facades/mixins';
+@import 'facades/mobile/mixins';
+@import 'facades/mobile/patterns/stage';
+@import 'facades/mobile/patterns/panel';
+@import 'facades/mobile/patterns/toolbar';
+@import 'facades/mobile/patterns/navbar';
+
+#viewport{	
+	@include mobile-stage;
+	
+	> .panel{
+		@include panel;
+		
+		footer.navbar, header.navbar{
+			@include navbar;
+		}
+		
+		header.toolbar, footer.toolbar{
+			@include toolbar
+		}
+		
+		header.toolbar.docked, header.navbar.docked{
+			@include docked(top);
+			& + .panel-content{
+				padding-top:$row-height;
+			}
+		}
+		
+		footer.toolbar.docked, footer.navbar.docked{
+			@include docked(bottom);
+		}
+		
+	}
+
+	
+	&.touch-scroll:not(.animating3d){
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+
+		> .panel{
+			height: 100%;
+		}
+
+		.panel-content{
+			@include panel-content;
+		}
+		
+	}
+
+	.in, .out {
+		-webkit-animation-duration: 250ms;
+		-webkit-animation-fill-mode: both;
+		-webkit-animation-timing-function: ease-in-out;
+	}
+
+	.in {
+		z-index: 10;
+		&:after {
+			@include pseudo-element(auto);
+			width:auto;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+		}
+	}
+
+	.out {
+		z-index: 0 !important;
+	}
+
+	&.supports3d {
+		-webkit-perspective: 1000;
+
+		> * {
+			-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
+		}
+	}
+}

data/src/scss/facades/mobile/_mixins.scss

@@ -0,0 +1,49 @@
+@import 'compass/css3';
+
+@mixin docked($pos: false){
+	position:absolute;
+	left:0px;
+	right:0px;
+	
+	@if $pos != false{
+		@if unquote($pos) == top{ top:0px; border-bottom:.1em solid; }
+		@else { bottom:0px; border-top:.1em solid; }
+	}
+	@else{
+		&.top{
+			top:0px;
+			border-bottom: .1em solid;
+		}
+
+		&.bottom {
+			bottom:0px;
+			border-top: .1em solid;
+		}
+	}	
+}
+
+@mixin toolbar-gradient($color, $style: $gradient-style){
+	@include background-gradient($color, $style);
+	border-color:darken($color, 50%);
+}
+
+
+@mixin toolbar-title{
+	.title {
+		
+		&.landscape{
+			margin-left: -125px;
+			width: 250px;
+		}
+		
+		line-height: $row-height - .5em;
+		font-size: 1.2em;
+		text-align: center;
+		font-weight: bold;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin: 0 0.3em;
+		max-width: 100%;
+	}
+}

data/src/scss/facades/mobile/_setup.scss

@@ -0,0 +1,50 @@
+@import 'facades/setup';
+
+html, body {
+    width: 100%;
+    height: 100%;
+		font-weight: normal;
+	  position: relative;
+		overflow:hidden;
+		-webkit-overflow-scrolling: none;
+	  -webkit-text-size-adjust: none;
+}
+
+
+body.ios {
+  -webkit-backface-visibility: hidden;
+	&.phone{
+		font-size: 114%;
+	}
+}
+
+body.android.phone {
+  font-size: 116%;
+}
+
+
+body.desktop {
+  font-size: 114%;
+}
+
+body {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-touch-callout: none;
+}
+
+a{
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	-webkit-user-drag: none;
+}
+
+input, textarea {
+	-webkit-user-select: auto;
+}
+
+.hbox {
+    -webkit-box-orient: horizontal;
+}
+
+.vbox {
+    -webkit-box-orient: vertical;
+}

data/src/scss/facades/mobile/patterns/_navbar.scss

@@ -0,0 +1,21 @@
+// 
+// Navbar
+// Styling for navigation bars. Generally used as top toolbars
+// ----------------------------------------------------------------------------------------
+
+@import 'facades/mobile/mixins';
+
+@mixin navbar{
+	height: $row-height;
+	padding: 0 .5em;
+	overflow: hidden;
+	position: relative;
+	z-index:100;
+	
+	&.docked{
+		@include docked;
+	}
+	
+	@include toolbar-title;
+	
+}

data/src/scss/facades/mobile/patterns/_panel.scss

@@ -0,0 +1,37 @@
+// 
+// Panels
+// All "pages" within the application are considered 'panels'.
+// The content within each panel should be dictated by the class
+// .panel-content
+// ----------------------------------------------------------------------------------------
+
+@mixin panel{
+	display: block;
+	left: 0;
+	top: 0;
+	min-height: 100%;
+	width: 100%;
+	overflow-x: hidden;
+	position: absolute;
+	z-index: 0;
+	@include display-box;
+	@include box-orient(vertical);
+	@include box-flex(1);
+	
+	& .current {
+		z-index: 1;
+	}
+
+	&:not(.current) {
+		display: none;
+	}
+}
+
+@mixin panel-content{
+	position: relative;
+	padding:0 .4em;
+	@include box-flex(1);
+	overflow-y: auto;
+	-webkit-margin-collapse: separate;
+	-webkit-overflow-scrolling: touch;
+}

data/src/scss/facades/mobile/patterns/_stage.scss

@@ -0,0 +1,20 @@
+// 
+// Stage
+// All application content is contained within a single stage. This mixin should be applied
+// to that element only.
+// ----------------------------------------------------------------------------------------
+
+
+@mixin mobile-stage{
+	-webkit-text-size-adjust: none;
+	user-select:none;
+	-webkit-user-select:none;
+	font-family: "Helvetica Neue", Helvetica;
+	position: absolute;
+	right: 0;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	
+	
+}

data/src/scss/facades/mobile/patterns/_toolbar.scss

@@ -0,0 +1,25 @@
+// 
+// Toolbar
+// Styling for top-docked toolbars
+// ----------------------------------------------------------------------------------------
+
+@import 'facades/mobile/mixins';
+
+@mixin toolbar{
+	height: $row-height;
+	padding: 0 .5em;
+	overflow: hidden;
+	position: relative;
+	z-index:100;
+	
+	& > * {
+		z-index: 110;
+	}
+
+	&.docked{
+		@include docked;
+	}
+
+	@include toolbar-title;
+	
+}

data/src/scss/facades/mobile/themes/_apple.scss

@@ -0,0 +1,17 @@
+$base-color: #7c92ae;
+$gradient-style: glossy;
+
+@import 'facades/mobile/global';
+
+.toolbar{
+	@include gradient-style($base-color, $gradient-style);
+	.title{
+		color:white;
+    @include bevel-text($base-color);
+	}
+}
+
+.navbar{
+	@include gradient-style($base-color, matte);
+	border-top-color:darken($base-color, 5%);
+}

data/src/scss/facades/patterns/_labels.scss

@@ -0,0 +1,50 @@
+@import 'facades/config';
+@import 'facades/mixins';
+
+/*!
+ * Labels, from Bootstrap 2.0
+ *
+ * Copyright 2011 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ *
+ * Slightly modified from the original to support a vertical rhythm. 
+ * Implemented as a mixin.
+ */
+
+@mixin label($with-color: true){
+	@include inline-block(baseline);
+	font-size: $font-size * .75;
+	font-weight: bold;
+	@include leading(1, $font-size + 2px);
+	padding:1px .5em;
+	text-transform: uppercase;
+	position:relative;
+	top:-1px;
+	@include border-radius(3px);
+	
+	@if $with-color{
+		background-color:lighten($font-color, 4%);
+		text-shadow:rgba(0,0,0,0.1) 0px 1px 0px;
+		color:white;
+		
+		&.notice { 
+			background-color: $notice-color; 
+		}
+		
+		&.success { 
+			background-color: $success-color; 
+		}
+		
+		&.error { 
+			background-color: $error-color; 
+		}
+		
+		&.warning { 
+			background-color: $warning-color; 
+		}
+		
+	}
+}

data/src/scss/facades/patterns/_navbar.scss

@@ -0,0 +1,4 @@
+// 
+// Navbar
+// General styles for inline-list navigation bars
+// ----------------------------------------------------------------------------------------