pondasee 1.0.rc.2

data/stylesheets/pondasee/mixins/_basic-buttons.scss

@@ -0,0 +1,158 @@
+// Basic button Mixins
+// Mixins to create a simple and basic buttons
+// Author	: Satrya - @msattt
+// URL		: http://tokokoo.com
+//
+// Usage:
+//
+// Basic button
+// .btn {
+// 		@include button( #fff, #333 );
+// }
+//
+// Button with blue background color
+// .blue {
+//		@include button-base( #2d48c0, #fff, true, dark );
+// }
+//
+// Button with black background color
+// .black {
+//		@include button-base( #333, #fff, true, dark );
+// }
+//
+// Button with green background color
+// .green {
+//		@include button-base( #0fdb30, #fff, true, dark ); 
+// }
+//
+// Button with small size
+// .small {
+//		@include button-size( 13px, 8px 18px  );
+// }
+//
+// Button with large size
+// .large {
+//		@include button-size( 24px, 18px 35px );
+// }
+//
+// in your HTML, you can call like this:
+//
+// <a class="btn" href="#">Button</a>
+// <a class="btn blue" href="#">Button</a>
+// <a class="btn black" href="#">Button</a>
+// <a class="btn green" href="#">Button</a>
+// <a class="btn black small" href="#">Button</a>
+// <a class="btn green large" href="#">Button</a>
+// =================================================================================
+@import "compass/css3/user-interface";
+
+$default-border		: true !default;
+$default-text-shadow: light !default;
+$default-fsize		: 16px !default;
+$default-pad		: 14px 24px !default;
+$default-radius		: 3px !default;
+$default-display	: "inline-block" !default;
+$default-margin		: 0 !default;
+
+// Quick use
+@mixin button( 
+	$bg-color, 
+	$color, 
+	$border		: $default-border,
+	$text-shad	: $default-text-shadow, 
+	$fsize		: $default-fsize, 
+	$pad		: $default-pad, 
+	$radius		: $default-radius, 
+	$display	: $default-display, 
+	$margin		: $default-margin 
+) {
+	@include button-base( $bg-color, $color, $border, $text-shad );
+	@include button-size( $fsize, $pad  );
+	@include button-struture( $radius, $display, $margin );
+}
+
+// Button base
+// Background color, text color, border, text shadow
+@mixin button-base( 
+	$bg-color, 
+	$color, 
+	$border		: $default-border,
+	$text-shad	: $default-text-shadow 
+) {
+	$dark-color			: darken($bg-color, 5%);
+	$border-color		: darken($bg-color, 10%);
+	$text-shadow-color	: darken($bg-color, 10%);
+	
+	background: $bg-color;
+	@include background-image( linear-gradient( $bg-color, $dark-color) );
+	@if $border == true {
+		border: 1px solid $border-color;
+	}
+	color: $color;
+	@if $text-shad == light {
+		@include text-shadow( $white 0 1px 1px );
+	} @if $text-shad == dark {
+		@include text-shadow( $text-shadow-color 0 -1px 0 );
+	}
+	
+	&:hover, 
+	&:focus {
+		background: darken($bg-color, 5%);
+		color: $color;
+	}
+	&:visited {
+		color: $color;
+	}
+	
+}
+
+// Button size
+// Font size, padding
+@mixin button-size( 
+	$fsize	: $default-fsize, 
+	$pad	: $default-pad 
+) {
+	font-size: $fsize;
+	padding: $pad;
+}
+
+// Button structure
+// border-radius, display, margin
+@mixin button-struture( 
+	$radius		: $default-radius, 
+	$display	: $default-display, 
+	$margin		: $default-margin 
+) {
+	@include border-radius( $radius );
+	@include box-shadow(
+		inset 0 1px 0 rgba($white, .2), 
+		0 1px 2px rgba($black, .05)
+	);
+	cursor: pointer;
+	
+	@if $display == "inline-block" {
+		@include inline-block-ie7;
+	} @if $display == "inline" {
+		display: inline;
+	} @if $display == "block" {
+		display: block;
+	}
+	
+	font-weight: normal;
+	line-height: 1;
+	margin: $margin;
+	position: relative;
+	text-decoration: none;
+	@include user-select( none );
+	
+	&:hover, 
+	&:focus {
+		text-decoration: none;
+	}
+	
+	&:active {
+		@include single-box-shadow( rgba($black, .15), 0, 2px, 3px, 0, true );
+		outline: 0;
+	}
+	
+}

data/stylesheets/pondasee/mixins/_fonts.scss

@@ -0,0 +1,31 @@
+// Fonts & @font-face mixins
+// Feel free to customize it!
+// =================================================================================
+
+// Font awesome
+// ------------------
+@include font-face (
+	'FontAwesome',
+	font-files(
+		'fontawesome-webfont.woff', woff,
+		'fontawesome-webfont.ttf', truetype,
+		'fontawesome-webfont.svg#FontAwesome', svg),
+	'fontawesome-webfont.eot',
+	normal,
+	normal
+);
+
+// Font mixins
+// ------------------
+@mixin ff-text {
+	font-family: $arial; // Global font
+}
+@mixin ff-heading {
+	font-family: $arial; // Heading font
+}
+@mixin ff-decorative{
+	font-family: $cursive;
+}
+@mixin ff-mono{
+	font-family: $consolas;
+}

data/stylesheets/pondasee/mixins/_helper.scss

@@ -0,0 +1,56 @@
+// Helper Mixins
+// Helper mixins with custom function
+// Author	: Satrya - @msattt
+// URL		: http://tokokoo.com
+// =================================================================================
+
+// Mixin for simpler inline-block
+// ------------------
+@mixin inline-block-ie7 {
+	display: inline-block;
+	*display: inline;
+	*zoom: 1;
+}
+
+// Mixin for selection markup
+// ------------------
+@mixin selection($background, $color, $element:false) {
+	@if($element) {
+		&::-moz-selection{ background:$background; color:$color; text-shadow:none; }
+		&::selection { background:$background; color:$color; text-shadow:none; }
+	} @else {
+		::-moz-selection{ background:$background; color:$color; text-shadow:none; }
+		::selection { background:$background; color:$color; text-shadow:none; }
+	}
+}
+
+// Mixin for reset list
+// ------------------
+@mixin reset-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+// Mixin for placeholder styling
+// ------------------
+@mixin placeHolder($color) {
+	&::-webkit-input-placeholder { color:$color; }
+	&:-moz-placeholder { color:$color; }
+}
+
+// Webkit-style focus
+// ------------------
+@mixin tab-focus {
+	outline: thin dotted #333;
+	outline: 5px auto -webkit-focus-ring-color;
+	outline-offset: -2px;
+}
+
+// Center-align a block level element
+// ----------------------------------
+@mixin center-block {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}

data/stylesheets/pondasee/mixins/_simple-responsive-grid.scss

@@ -0,0 +1,66 @@
+// Simple responsive grid
+// basic and simple responsive grid
+// Author	: Satrya - @msattt
+// URL		: http://tokokoo.com
+//
+// Based on http://framelessgrid.com/
+// =================================================================================
+@import "compass";
+
+// Grid default variable
+$totalColumns  	: 16 !default;
+$columnWidth 	: 30px !default;
+$gutterWidth  	: 30px !default;
+$totalContainer	: ( $totalColumns * ($columnWidth + $gutterWidth) - $gutterWidth );
+$floatDirection	: left;
+
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+@mixin grid-clearfix { 
+	*zoom:1;
+    &:before, &:after { 
+		content: ""; 
+		display: table; 
+	}
+    &:after { 
+		clear: both; 
+	}
+}
+
+// Grid Calculation for Percentages
+@function col($n) {
+	@return percentage( ( $n * ($columnWidth + $gutterWidth) - $gutterWidth ) / $totalContainer );
+}
+
+@mixin container(
+	$margin: 0 auto
+) {
+	margin: $margin;
+	max-width: $totalContainer;
+	width: 100%;
+	@include grid-clearfix; 
+}
+
+@mixin columnBase(
+	$side: $floatDirection
+) {
+	@include box-sizing(border-box);
+	@include float( $side );
+	margin-left: percentage( $gutterWidth / $totalContainer );
+	@include grid-clearfix;
+	&:first-child {
+		margin-left: 0;
+	}
+}
+
+// Use this mixins to set the width of n columns.
+@mixin column($n) {
+	width: col($n); 
+}
+
+@mixin prefix($n) {
+	margin-left: percentage( (($columnWidth + $gutterWidth) * $n ) / $totalContainer ); 
+}
+
+@mixin suffix($n) {
+	margin-right: percentage( (($columnWidth + $gutterWidth) * $n ) / $totalContainer );
+}

data/stylesheets/pondasee/mixins/_zurb-button.scss

@@ -0,0 +1,105 @@
+// ZURB button Mixins
+// Mixins for zurb button - http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
+// Author	: Satrya - @msattt
+// URL		: http://tokokoo.com
+//
+// Usage:
+//
+// .btn {
+//		@include zurb-button( $black, $white, 5px, 16px, 5px 15px 6px );
+// }
+//
+// Or if you need some buttons with different size, you can do like this
+// .btn {
+// 		@include zurb-button-base( $black, $white, 5px );
+//		@include zurb-button-structure;
+// }
+// 
+// .btn.small {
+// 		@include zurb-button-size( 14px, 3px 10px );
+// }
+// .btn.medium {
+// 		@include zurb-button-size( 18px, 5px 15px );
+// }
+//
+// in your HTML, you can call like this
+// <p><a href="#" class="btn small">Button</a></p>
+// <p><a href="#" class="btn medium">Button</a></p>
+// =================================================================================
+@import "compass/css3/user-interface";
+
+$default-z-bgcolor	: $blackLight !default;
+$default-z-radius	: 3px !default;
+$default-z-fsize	: 13px !default;
+$default-z-pad		: 5px 15px !default;
+$default-z-color	: $white !default;
+
+@mixin zurb-button( 
+	$bgcolor	: $default-z-bgcolor, 
+	$color		: $default-z-color, 
+	$radius		: $default-z-radius, 
+	$fsize		: $default-z-fsize, 
+	$pad		: $default-z-pad, 
+	$display	: "inline-block" 
+) {
+
+	@include zurb-button-base( $bgcolor, $color, $radius );
+	@include zurb-button-size( $fsize, $pad );
+	@include zurb-button-structure( $display );
+
+}
+
+@mixin zurb-button-base( 
+	$bgcolor	: $default-z-bgcolor, 
+	$color		: $default-z-color, 
+	$radius		: $default-z-radius
+) {
+
+	background: $bgcolor image-url('overlay-button.png') repeat-x;
+	@include border-radius( $radius );
+	@include single-box-shadow( rgba( $black, .2 ), 0, 1px, 2px, 0, false );
+	border-bottom: 1px solid rgba( $black, .25 );
+	color: $color;
+	@include text-shadow( 0 -1px 1px rgba( $black, .25 ) );
+	@include user-select( none );
+	
+	&:hover {
+		background-color: darken( $bgcolor, 8% );
+		color: $color;
+		text-decoration: none;
+	}
+	&:visited {
+		color: $color;
+	}
+	&:active {
+		top: 1px;
+	}
+}
+
+@mixin zurb-button-size(
+	$fsize	: $default-z-fsize,
+	$pad	: $default-z-pad
+) {
+	font-size: $fsize;
+	padding: $pad;
+}
+
+@mixin zurb-button-structure( $display: "inline-block" ) {
+	
+	border: none;
+	cursor: pointer;
+	font-weight: normal;
+	position: relative;
+	text-decoration: none;
+	
+	@if $display == "inline-block" {
+		display: inline-block;
+		*display: inline;
+		*zoom: 1;
+	} @if $display == "inline" {
+		display: inline;
+	} @if $display == "block" {
+		display: block;
+	}
+	
+}

data/stylesheets/pondasee/reset.scss

@@ -0,0 +1,72 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure, footer,
+header, hgroup, nav, section, summary {
+    display: block;
+}
+
+audio, canvas, video {
+    @include inline-block;
+}
+
+audio:not([controls]),
+[hidden] {
+    display: none;
+}
+
+a:focus {
+	@include tab-focus;
+}
+
+nav ul,
+nav ol {
+    @include reset-list;
+}
+
+img {
+    border: 0;
+	max-width: 100%;
+    -ms-interpolation-mode: bicubic;
+	vertical-align: middle;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+input[type="radio"] { 
+	vertical-align: text-bottom;
+}
+
+input[type="checkbox"] { 
+	vertical-align: text-bottom; 
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

data/stylesheets/pondasee/table.scss

@@ -0,0 +1,40 @@
+/* 	STANDARD TABLE
+	----------------- */
+table {
+	font-size: 12px;
+	max-width: 100%;
+	width: 100%;
+}
+
+table, 
+td { 
+    border: 1px solid #e8e8e8;
+    border-collapse: collapse;
+    margin: rhythm() 0;
+    padding: 5px 10px;
+}
+
+th { 
+	background-color: #e8e8e8;
+    border-right: 1px solid #e0e0e0;
+	color: #666;
+	margin: 5px 0 10px;
+    padding: 5px 10px;
+	text-transform: uppercase;
+	text-align: left;
+}
+
+table button, 
+table input { 
+	*overflow: auto;
+}
+
+/* 	STRIPE TABLE
+	----------------- */
+table.striped {
+	tr {
+		&:nth-child(odd) {
+			background-color: #f9f9f9;
+		}
+	}
+}