facades 0.1.0 → 1.0.0

data/src/scss/facades/_mixins.scss

@@ -0,0 +1,115 @@
+$legacy-support-for-ie8: true !default;
+$legacy-support-for-ie7: true !default;
+$legacy-support-for-ie6: false !default;
+$support-for-original-webkit-gradients: false !default;
+$experimental-support-for-svg: false !default;
+$experimental-support-for-khtml: false !default;
+
+@import 'facades/config';
+@import 'facades/mixins/rhythm';
+@import 'compass/css3';
+@import 'facades/mixins/gradients';
+
+// Custom opacity mixin, uses whole numbers instead of floats.
+@mixin opacity($opacity: 100) {
+	@if $legacy-support-for-ie7{
+		filter: alpha(opacity=#{$opacity});
+	}
+	@if $legacy-support-for-ie8{
+		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity})";
+	}	
+	opacity: $opacity / 100;
+}
+
+// override compass's version because we don't need prefixing
+@mixin border-radius($radians){
+	border-radius:$radians;
+}
+
+// compass uses the overflow style clearfix which can be rather annoying when you
+// dont want overflow:hidden on things.
+@mixin clearfix{
+	&:before, &:after{
+		content:"";
+		display:table;
+	}
+	
+	&:after{
+		clear:both;
+	}
+
+	@if $legacy-support-for-ie8 or $legacy-support-for-ie7{
+		&{ zoom:1; }
+	}
+}
+
+// Custom box-shadow mixin to skip false or none values
+@mixin optional-box-shadow($props){
+	@if $props != false and $props != none{
+		@include border-radius($props);
+	}
+}
+
+// Custom border-radius mixin to skip false or none values
+@mixin optional-border-radius($props){
+	@if $props != false and $props != none{
+		@include border-radius($props);
+	}
+}
+
+// Cross browser inline-block implementations
+@mixin inline-block($align: middle){		
+	display: inline-block;
+	vertical-align: $align;
+	@if $legacy-support-for-ie7{
+		*display: inline; 
+		*vertical-align: auto;
+		*zoom:1;
+	}
+}
+
+@mixin user-select($val: "none"){
+	@include experimental("user-select", unquote($val), -moz, -webkit, -khtml, -ms, official);
+	@include experimental("touch-callout", unquote($val), -webkit, official, not -moz, not -khtml, not -ms);
+}
+
+//
+// Clip properties
+// Creates a clip rect, including IE specific version.
+//
+@mixin clipped{
+	@include clip(1px, 1px, 1px, 1px);
+}
+
+@mixin clip($top: 1px, $right: 1px, $bottom: 1px, $left: 1px, $shape: rect, $abs: true){
+	$shape:unquote($shape);
+	
+	clip: unquote("#{$shape}(#{$top}, #{$right}, #{$bottom}, #{$left})"); 
+	@if $legacy-support-for-ie{
+		clip: unquote("#{$shape}(#{$top} #{$right} #{$bottom} #{$left})"); // Stupid IE
+	}
+	@if $abs{ position: absolute;	}
+}
+
+
+// returns a contrasting version of a color based on luminance
+@function contrasting-color($color, $contrast: 100%) {
+	@return if(lightness($color) > 50, darken($color, $contrast), lighten($color, $contrast));
+}
+
+
+// sets a contrasting text shadow based on $color
+@mixin bevel-text($color){
+	$dark-shadow:  rgba(0,0,0,.5) 0 -.08em 0;
+	$light-shadow: rgba(255,255,255,.25) 0 .08em 0;
+	text-shadow:if(luminance($color) == light, $dark-shadow, $light-shadow);
+}
+
+// creates an empty psuedo element
+@mixin pseudo-element($width: 0, $height: auto, $content: "", $display: block, $position: absolute){
+    content: $content;
+    @if ($position != default){ position: $position; }
+    @if ($display != default){ display: $display; }
+    @if ($width != auto){ width: $width; }
+    @if ($height != auto){ height: $height; }
+}

data/src/scss/facades/_mobile.scss

@@ -0,0 +1,3 @@
+@import 'facades/mobile/config';
+@import 'facades/mobile/setup';
+

data/src/scss/facades/_setup.scss

@@ -0,0 +1,191 @@
+@import 'facades/config';
+
+/*
+ * HTML5 Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ *
+ * Detailed information about this CSS: h5bp.com/css
+ *
+ * ==|== normalize ==========================================================
+ */
+
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+ * 2. Force vertical scrollbar in non-IE
+ * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+ */
+
+html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+body { margin: 0; }
+
+body, button, input, select, textarea { font-family: $font-family; color: $font-color; }
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate
+ * Also: hot pink! (or customize the background color to match your design)
+ */
+
+::-moz-selection { background: $selection-background-color; color: $selection-color; text-shadow: none; }
+::selection { background: $selection-background-color; color: $selection-color; text-shadow: none; }
+
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+blockquote { margin: 1em 40px; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+/* Redeclare monospace font family: h5bp.com/j */
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+/* Improve readability of pre-formatted text in all browsers */
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Improve image quality when scaled in IE7: h5bp.com/d
+ * 2. Remove the gap between images and borders on image containers: h5bp.com/e
+ */
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+/*
+ * Correct overflow not hidden in IE9
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+figure { margin: 0; }
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+/* Indicate that 'label' will shift focus to the associated form element */
+label { cursor: pointer; }
+
+/*
+ * 1. Correct color not inheriting in IE6/7/8/9
+ * 2. Correct alignment displayed oddly in IE6/7
+ */
+
+legend { border: 0; *margin-left: -7px; padding: 0; }
+
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ */
+
+button, input { line-height: normal; }
+
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
+ */
+
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+
+/*
+ * Consistent box sizing and appearance
+ */
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+
+/*
+ * Remove inner padding and border in FF3/4: h5bp.com/l
+ */
+
+select::-moz-focus-inner, button::-moz-focus-inner, input::-moz-focus-inner { border: 0 !important; padding: 0 !important; }
+
+/*
+ * 1. Remove default vertical scrollbar in IE6/7/8/9
+ * 2. Allow only vertical resizing
+ */
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+a:active{ outline:none; }

data/src/scss/facades/_typography.scss

@@ -0,0 +1,220 @@
+@import 'facades/config';
+@import 'facades/mixins';
+
+// 
+// Global typography styles for headings, paragraphs etc.
+// ----------------------------------------------------------------------------------------
+
+/*
+	Headings
+	------------------------------------
+	1. Fixes spacing and optimizes appearance
+	2. Sexier rendering in webkit and ios/android
+	
+*/
+
+
+
+body{ 
+	font-family: $font-family;	
+}
+
+@include establish-baseline($font-size);
+
+// links
+a { color: $link-color; }
+a:visited { color: $link-visited-color; }
+a:hover { color: $link-hover-color; }
+a:focus { outline: thin dotted; }
+
+h1, h2, h3, h4, h5, h6 {	
+	margin:0;
+	font-weight: bold;	
+	text-rendering: optimizelegibility; // 1
+	-webkit-font-smoothing: subpixel-antialiased;
+	&.headline{
+		@include box-sizing(border-box);
+	}
+	// this fixes rhythm breakage introduced by the added tag
+	small{
+		@include inline-block(baseline);
+		margin:-.2em 0;
+		font-size:.75em;
+	}
+}
+
+@function _heading_size($num){
+	$sizes: $heading-font-sizes;
+	$orig: 30px 24px 18px 14px;
+	
+	@if $num > length($sizes){ @return nth($orig, $num); }
+	@return nth($sizes, $num);
+}
+
+h1 {
+	@include font-size(_heading_size(1), 2);
+	&.headline{
+		@include leading(1, _heading_size(1));
+		@include margins(1, _heading_size(1));
+	}
+}
+
+h2 {
+	@include font-size(_heading_size(2));
+	@include margins(.5, _heading_size(2));
+	&.headline{
+		@include margins(1, _heading_size(2));
+	}
+	
+}
+
+h3 {
+	@include font-size(_heading_size(3));
+	@include margins(.5, _heading_size(3));
+	&.headline{
+		@include margins(.5, _heading_size(3));
+	}
+
+}
+
+
+h4 {
+	@include font-size(_heading_size(4));
+	@include margins(.5, _heading_size(4));
+
+}
+
+h5 {
+	@include font-size(12px);
+}
+
+h6 {
+	@include font-size(11px);
+	text-transform:uppercase;
+}
+
+
+/*
+	Headings
+	------------------------------------
+*/
+
+p {
+	font-size:$font-size;
+	line-height:$line-height;
+	@include margins(0 1, $font-size);
+}
+
+
+/*
+	Lists
+	------------------------------------
+*/
+
+ul, ol {
+	@include font-size($font-size, 1);
+	@include margins(0 1, $font-size);
+	line-height:1;
+	margin-left: 1.6em;
+	padding:0;
+	
+	&.block{
+		margin-left:0;
+		list-style:none;
+	}
+	
+	ul, ol{
+		@include margins(.5, $font-size);
+	}
+	
+}
+
+
+
+ul {
+	list-style: disc;
+}
+
+ol {
+	list-style: decimal;
+}
+
+li {
+	@include leading(1);
+}
+
+// for some reason older ie makes list items slightly smaller?
+.lt-ie9 li{
+	@include leading(1.01);
+}
+
+dl{
+	dt{ 
+		font-weight:bold; 
+	}
+	
+	dd{ 
+		margin:rhythm(.5) 0 rhythm(.5) rhythm(.5); 
+	}
+}
+
+/*
+	Misc items.
+	------------------------------------
+*/
+
+hr {
+	border: 0;
+	line-height:$line-height;
+	margin-bottom:.3em;
+	overflow:hidden;
+	height:1.25em;
+	@include box-sizing(content-box);
+	position:relative;
+	padding:0;
+	display:block;
+	border-top: 1px solid $horizontal-rule-color;
+	border-bottom:1px solid rgba(white,0);
+}
+
+html.lt-ie9{
+	hr{ margin-bottom:.4em; }
+}
+
+
+// useful for using email addresses in text. type the text
+// in reverse and apply this style.
+span.rev, a.rev{
+	unicode-bidi: bidi-override; 
+	direction: rtl
+}
+
+address {
+	display: block;
+	margin-bottom: $line-height;
+	line-height: $line-height;
+}
+
+code {
+	font-size:$font-size * .9;
+	@include leading(1, $font-size + 1px);
+	padding:1px .5em;
+	position:relative;
+	top:-1px;
+}
+
+pre {
+	display: block;
+	@include margins(0 1, 12px);
+	@include font-size(12px);
+	white-space: pre;
+	white-space: pre-wrap;
+	word-break: break-all;
+	padding:rhythm(0.5);
+	border-style:solid;
+	
+	code {
+		padding: 0;
+		background-color: transparent;
+	}
+}

data/src/scss/facades/buttons/_glossy.scss

@@ -0,0 +1,29 @@
+// 
+// Glossy buttons
+// Apple style buttons with active and hover states
+// ----------------------------------------------------------------------------------------
+
+@import 'shared';
+
+@mixin glossy-button($color: $notice-color, $radius: $button-border-radius){
+	@if $facades-global-import-used == false{ 
+		@include button-base($radius);
+	}
+	
+	@include glossy-button-colors($color);	
+}
+
+@mixin glossy-button-colors($color: $notice-color){
+	border:1px solid darken($color, 7%);
+	background-color:$color;
+	@include background-image(linear-gradient(rgba(255,255,255,0.075) 0%, rgba(255,255,255, 0.075) 50%, rgba(0,0,0,.1) 51%));	
+	text-shadow:darken($color, 4%) 0 -1px 1px;
+	
+	&:hover{
+		background-color:lighten($color, 5%);
+	}
+	
+	&:active{
+		background-color:darken($color, 5%);
+	}
+}

data/src/scss/facades/buttons/_gradient.scss

@@ -0,0 +1,36 @@
+// 
+// Gradient buttons
+// Linear gradient buttons with active and hover states
+// ----------------------------------------------------------------------------------------
+
+
+@import 'shared';
+
+@mixin gradient-button($color: $notice-color, $radius: $button-border-radius){
+	@if $facades-global-import-used == false{ 
+		@include button-base($radius);
+	}
+	@include gradient-button-colors($color);
+}
+
+@mixin gradient-button-colors($color: $notice-color){
+	border-color:darken($color, 10%);
+	border-top:1px solid darken($color, 10%);
+	@include box-shadow(lighten($color, 30%) 0 1px 1px 0 inset);
+	background-color:$color;
+	text-shadow:darken($color, 5%) 0px 1px 0px;
+	@include background-image(linear-gradient(lighten($color, 5%), $color 25%, darken($color, 10%)));
+	
+	&:hover{
+		background-color:lighten($color, 7%);
+		@include box-shadow(lighten($color, 20%) 0 1px 1px 0 inset);
+		@include background-image(linear-gradient(lighten($color, 7%), lighten($color, 3%) 25%, darken($color, 5%)));
+	}
+	
+	&:active{
+		background-color:darken($color, 7%);
+		@include box-shadow($color 0 1px 1px 0 inset);
+		@include background-image(linear-gradient(darken($color, 7%), darken($color, 3%) 25%, darken($color, 10%)));
+	}
+	
+}

data/src/scss/facades/buttons/_shared.scss

@@ -0,0 +1,33 @@
+// 
+// Shared button styles
+// ----------------------------------------------------------------------------------------
+
+@import 'facades/config';
+@import 'facades/mixins';
+
+@mixin button-base($radius: $button-border-radius){
+	@include inline-block;
+	@include box-shadow(none);
+	@include box-sizing(border-box);
+	@include font-size($button-font-size);		
+	margin:border-rhythm(1px, .2, $button-font-size) 0;
+	padding:rhythm(.3, $button-font-size) 1em;	
+	@include optional-border-radius($radius);
+	
+	@include transition-property(all);
+	@include transition-duration(0.15s);
+	@include transition-timing-function(ease-in-out);
+	
+	&.large{
+		$bsize: $font-size * 1.1;
+		@include font-size($bsize);	
+		padding:border-rhythm(1px, .5, $bsize) 1.5em;
+		margin-top:0;
+		margin-bottom:0;
+	}
+	
+	&:active{
+		@include box-shadow(rgba(0,0,0,0.1) 0 0 3px 0 inset);
+	}
+	
+}

data/src/scss/facades/buttons/_simple.scss

@@ -0,0 +1,28 @@
+// 
+// Simple buttons
+// Basic solid color buttons with active and hover states
+// ----------------------------------------------------------------------------------------
+
+
+@import 'shared';
+
+@mixin simple-button($color: $notice-color, $radius: $button-border-radius){
+	@include button-base($radius);	
+	@include simple-button-colors($color);
+}
+
+@mixin simple-button-colors($color: $notice-color){
+	background:$color;
+	color:white;
+	border:1px solid darken($color, 7%);
+	text-shadow:darken($color, 5%) 0px 1px 0px;
+	@include box-shadow(rgba(255,255,255,0.2) 0 0 3px 0 inset);
+
+	&:hover{
+		background-color:lighten($color, 4%);
+	}
+	
+	&:active{
+		background-color:darken($color, 3%);		
+	}
+}

data/src/scss/facades/icons/_classes.scss

@@ -0,0 +1,37 @@
+@import 'facades/config';
+
+@mixin icon-classes($prefix:'icon-', $names: false){
+	
+	$prefix:unquote($prefix);
+	
+	[class^="#{$prefix}"]:before, [class*=" #{$prefix}"]:before{
+		display: inline; 
+		width: auto; 
+		height: auto; 
+		line-height: inherit; 
+		vertical-align: baseline;
+		font-weight:normal;
+		font-family:$icon-font-family;
+	}
+	
+	@if type-of($names) != list{
+		$names: icon-names($icon-pack);
+	}
+	
+	@each $ico in $names{
+		$ico: unquote($ico);
+		.#{$prefix}#{$ico}:before{ @include icon-content($ico); }
+	}
+	
+	.#{$prefix}large:before {
+	    vertical-align: top;
+			display:inline-block;
+		  font-size: 1.3333333333333333em;
+	}	
+}
+
+@mixin icon-rect-classes{
+	.icon-16{ @include icon-rect(16px); }
+	.icon-32{ @include icon-rect(32px); }
+	.icon-24{ @include icon-rect(24px); }	
+}