facades 0.1.0 → 1.0.0

data/src/scss/facades/patterns/_notifications.scss

@@ -0,0 +1,82 @@
+// 
+// Alert and notifications
+// ----------------------------------------------------------------------------------------
+
+@import 'facades/config';
+@import 'facades/mixins';
+
+@mixin notification($with-color: true){
+	
+	@include margins(1);
+	padding:border-rhythm(1px, .5) rhythm(1.25) border-rhythm(1px, .5) rhythm(1);
+	@include leading(1);
+	border-width: 1px;
+	border-style: solid;
+	@include border-radius(4px);
+	position:relative;
+	
+	@if $with-color{
+		background:#eee;
+		border-color:#dedede;
+		border-color:darken(#eee, 5%);
+		text-shadow:rgba(0,0,0,.05) 1px 1px 0px;		
+		
+		&.notice{
+			background-color:$notice-color;
+			@include background-image(linear-gradient(darken($notice-color, 3%) 0%, $notice-color 100%));
+			border-color:darken($notice-color, 5%);
+			color:white;
+		}
+		
+		&.success{
+			background-color:$success-color;
+			@include background-image(linear-gradient(darken($success-color, 3%) 0%, $success-color 100%));
+			border-color:darken($success-color, 5%);	
+			color:white;
+		}
+		
+		&.error, &.alert{
+			background-color:$error-color;
+			@include background-image(linear-gradient(darken($error-color, 3%) 0%, $error-color 100%));
+			border-color:darken($error-color, 5%);
+			color:white;
+		}
+		
+		&.warning{
+			background-color:$warning-color;
+			@include background-image(linear-gradient(top, darken($warning-color, 3%) 0%, $warning-color 100%));
+			border-color:darken($warning-color, 5%);
+			color:$font-color;
+		}
+		
+	}
+	
+	.close {
+		text-transform:lowercase;
+		font-family: 'Arial Black', 'Gadget', sans-serif;
+		float: right;
+		font-size:$font-size + 2px;
+		display:block;
+		position:absolute;
+		top:50%;
+		right:.5em;
+		height: 24px;
+		margin-top:-14px;
+		line-height:24px;
+		color: #111;
+		text-shadow:rgba(255,255,255,1) 0 1px 0;
+		@include opacity(20);
+
+		&:hover {
+			color: #333;
+			text-decoration: none;
+			@include opacity(40);
+			cursor: pointer;
+		}
+		
+		&.lt-ie8 .close{
+			line-height:0;
+		}
+		
+	}
+}

data/src/scss/facades/patterns/_pagination.scss

@@ -0,0 +1,4 @@
+// 
+// Pagination 
+// Styles for paginated links
+// ----------------------------------------------------------------------------------------

data/src/scss/facades/patterns/_pills.scss

@@ -0,0 +1,50 @@
+// 
+// Pills. Basically tabs but with 'pill' style navigation 
+// Requires the use of tabs.js
+// ----------------------------------------------------------------------------------------
+
+@import 'facades/config';
+@import 'facades/layout/lists';
+
+// Styles a list to function as a pill based navigation
+@mixin pill-navigation{
+	@if $facades-global-import-used == false{ 
+		@include inline-list; 		
+	}
+	
+	margin:0; 
+	padding:0;
+	@include clearfix;
+	
+	li{		
+		@include pill-list-item;
+	}
+}
+
+@mixin pill-list-item($color: $pill-color){
+	margin:0 .25em;			
+	
+	a{
+		@include font-size($font-size * .85);		
+		color:$font-color;
+		padding:rhythm(.25, $font-size * .85) 1em;
+		margin:rhythm(.25, $font-size * .85) 0;
+		text-decoration:none;
+		@include opacity(50);
+		
+		&:hover{
+			@include opacity(75);
+		}
+	}
+	
+	&.active a{
+		@include optional-border-radius($pill-border-radius);
+		background-color:$color;
+		color:white;
+		text-shadow:rgba(black, 0.1);
+		font-weight:bold;
+		&, &:hover{
+			@include opacity(100);
+		}
+	}
+}

data/src/scss/facades/patterns/_tabs.scss

@@ -0,0 +1,83 @@
+// 
+// Tabs. Requires the use of tabs.js
+// ----------------------------------------------------------------------------------------
+
+/*
+	The tabbed base mixin is / can be used with both tabbed and pill base setups.
+	when including the style can either be set to tab or pill. There are lots of other 
+	mixins below for the various features of a tabbed based nav. This way when used in 
+	things like _global.scss, we don't end up with a lot of duplication.
+*/
+
+@import 'facades/layout/lists';
+
+@mixin tabbed($style: tab){
+	.tab{
+		display:none;
+	}
+	
+	& > .tab.active{
+		display:block;
+		// padding the tab content keeps the rhythm intact because of margin collapsing
+		padding-top:rhythm(.5); 
+	}
+	
+	&.no-js .tab{
+		display:block;
+	}
+}
+
+// Styles a list to function as a tab based navigation
+@mixin tab-navigation{
+	@if $facades-global-import-used == false{ 
+		@include inline-list; 		
+	}	
+	margin:0 0 rhythm(.5) 0; 
+	padding:0;
+	border-bottom:1px solid $tab-border-color;
+	@include clearfix;
+	
+	li{					
+		@include tab-list-item;
+	}
+
+}
+
+// really for internal use. makes a li into a tab.
+@mixin tab-list-item{
+	margin:0 0 0 .25em;
+	
+	a{
+		color:$font-color;
+		text-decoration:none;
+		padding:border-rhythm(1px, .5) rhythm(.75) rhythm(.5);
+		@include opacity(50);
+		&:hover{
+			@include opacity(75);
+		}
+	}
+	
+	&.active a{
+		@include border-radius(4px 4px 0px 0px);
+		background-color:transparent;			
+		border: 1px solid $tab-border-color;
+		border-width:4px 1px 0 1px;
+		border-top-color: $tab-accent-color;
+		padding:border-rhythm(4px, .5) rhythm(.75) rhythm(.5);
+
+		&, &:hover{
+			@include opacity(100);
+		}
+	}
+	
+}
+
+
+
+@mixin tabs{	
+	.tab-navigation{
+		@include tab-navigation;
+	}
+	
+	@include tabbed;
+}

data/src/scss/facades/patterns/_twipsy.scss

@@ -0,0 +1,84 @@
+// 
+// Twipsy tooltip
+// Courtesy Twitter Bootstrap
+// https://github.com/twitter/bootstrap
+// ----------------------------------------------------------------------------------------
+
+@mixin tooltip{
+	position: absolute;
+  display: block;
+  visibility: visible;
+  padding: 5px;
+  font-size: 11px;
+  @include opacity(0);
+  &.in     { @include opacity(80); }
+  &.top    { margin-top:  -2px; }
+  &.right  { margin-left:  2px; }
+  &.bottom { margin-top:   2px; }
+  &.left   { margin-left: -2px; }
+  &.top .tooltip-arrow    { @include tooltip-arrow-top; }
+  &.left .tooltip-arrow   { @include tooltip-arrow-top; }
+  &.bottom .tooltip-arrow { @include tooltip-arrow-top; }
+  &.right .tooltip-arrow  { @include tooltip-arrow-top; }
+	
+	.tooltip-inner {
+	  max-width: 200px;
+	  padding: 3px 8px;
+	  color: white;
+	  text-align: center;
+	  text-decoration: none;
+	  background-color: $tooltip-color;
+	  @include border-radius(4px);
+	}
+	
+	.tooltip-arrow {
+	  position: absolute;
+	  width: 0;
+	  height: 0;
+	}	
+	
+}
+
+
+// alias
+@mixin twipsy{
+	@include tooltip;
+}
+
+// Popover arrows
+// For tipsies and tooltips
+@mixin tooltip-arrow-top($arrow-width: 5px){
+	bottom: 0;
+	left: 50%;
+	margin-left: -$arrow-width;
+	border-left: $arrow-width solid transparent;
+	border-right: $arrow-width solid transparent;
+	border-top: $arrow-width solid $tooltip-color;
+}
+
+@mixin tooltip-arrow-left($arrow-width: 5px){
+	top: 50%;
+    right: 0;
+    margin-top: -$arrow-width;
+    border-top: $arrow-width solid transparent;
+    border-bottom: $arrow-width solid transparent;
+    border-left: $arrow-width solid $tooltip-color;
+}
+
+@mixin tooltip-arrow-bottom($arrow-width: 5px){
+    top: 0;
+    left: 50%;
+    margin-left: -$arrow-width;
+    border-left: $arrow-width solid transparent;
+    border-right: $arrow-width solid transparent;
+    border-bottom: $arrow-width solid $tooltip-color;
+}
+
+@mixin tooltip-arrow-right($arrow-width: 5px){
+    top: 50%;
+    left: 0;
+    margin-top: -$arrow-width;
+    border-top: $arrow-width solid transparent;
+    border-bottom: $arrow-width solid transparent;
+    border-right: $arrow-width solid $tooltip-color;
+}

data/src/scss/facades/typography/_tables.scss

@@ -0,0 +1,95 @@
+@import 'facades/config';
+@import 'facades/mixins/rhythm';
+
+
+// Table action
+// ----------------------------------------
+table {
+	width: 100%;
+	border-collapse: separate;
+	margin-bottom: rhythm(1);
+}
+
+th, td {	
+  @include leading(1);
+	border-spacing:0;
+	text-align: left;
+	border-top: 1px solid $table-border-color;
+	@include box-sizing(border-box);
+}
+
+tr, tbody{ @include box-sizing(border-box); }
+
+th {
+	padding:border-rhythm(1px, .5) rhythm(.4, $font-size) rhythm(.5);
+	font-weight: bold;
+	vertical-align: bottom;
+}
+
+td {
+	padding:border-rhythm(1px, .5) rhythm(.4, $font-size) rhythm(.5);
+	vertical-align: top;
+}
+
+thead:first-child tr th,
+thead:first-child tr td {
+	border-top: 0;
+}
+
+tbody + tbody {
+	border-top: 2px solid $table-border-color;
+	@include box-sizing(border-box);
+}
+
+
+// Bordered tables
+// --------------------------------
+
+@mixin bordered-table{
+	
+	margin-bottom: border-rhythm(2px, 1);
+	border: 1px solid $table-border-color;	
+	
+	th + th, td + td, th + td, td + th {
+		border-left: 1px solid $table-border-color;
+	}
+	
+	thead:first-child tr:first-child th,
+	tbody:first-child tr:first-child td {
+		border-top: 0;
+	}
+	
+}
+
+
+// Striped tables
+// --------------------------------
+
+
+@mixin striped-table{
+	tbody {
+		tr:nth-child(odd) td,
+		tr:nth-child(odd) th {
+			background-color: $table-stripe-color;
+		}
+	}
+}
+
+// Compressed tables
+// --------------------------------
+
+@mixin compressed-table{
+	&{ @include margins(0 1.5); }
+	
+	th {
+		padding:rhythm(.25) rhythm(.4, $font-size) rhythm(.25);
+		font-weight: bold;
+		vertical-align: bottom;
+	}
+
+	td {
+		padding:border-rhythm(1px, .25) rhythm(.4, $font-size) rhythm(.25);
+		vertical-align: top;
+	}
+	
+}