edge_framework 0.5.0 → 0.6.0

data/assets/sass/edge/_base.scss

@@ -4,9 +4,6 @@
 
 // -------------------------------------------------------
 // OUTPUT CONFIG
-// FULL:
-//   Set to true to keep full styling
-//   Set to false to use barebone style
 // DEBUG:
 //   Set to true for various useful functionality during
 //   development
@@ -16,7 +13,6 @@
 // INCLUDE:
 //   Set to false if you want to import the mixins only
 // -------------------------------------------------------
-$full  : true !default;
 $debug : false !default;
 
 $external-call : false !default; // user shouldn't modify this
@@ -32,6 +28,11 @@ $include-form       : true !default;
 $include-typography : true !default;
 $include-print      : true !default;
 
+// Remove useless Compass' vendor prefix
+$support-for-original-webkit-gradients : false;
+$experimental-support-for-opera:false;
+$experimental-support-for-khtml:false;
+
 // ----------
 // COLOR
 // ----------
@@ -47,41 +48,25 @@ $yellow-color  : #DBA924 !default;
 $red-color     : #DA2E18 !default;
 $green-color   : #2CAE34 !default;
 
-// ---------------
-// BODY
-// ---------------
-$body-bg          : #fff !default;
-$body-font-color  : #222 !default;
-$body-font-weight : normal !default;
-$body-font-style  : normal !default;
-$body-line-height : 1 !default;
-
-// The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with brower-based text zoom or user-set defaults.
-$base-font-size   : 100% !default;
-// Maximum width of the grid
-$content-width    : 1140px !default;
-
-// -------
-// FONT
-// -------
-$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif" !default;
-$body-font-family   : "Helvetica", Helvetica, Arial, "sans-serif" !default;
-$code-font-family   : "Consolas", Courier, "monospace" !default;
-
 // ---------------
 // GLOBAL VALUE
 // ---------------
 $g-radius : 5px !default;
-$g-round  : 1000px !default;
 $g-transition : all 0.2s ease-out !default;
 
-%transition { @include transition($g-transition); }
+// -----------------
+// VERTICAL RHYTHM
+// -----------------
+$body-font-size   : 16px !default;
+$body-line-height : 1.5 !default;
+  // Compass' Vertical Rhythm value
+  $base-font-size   : $body-font-size;
+  $base-line-height : $body-line-height;
 
 // ------------------------
 // PIXEL --> EM CONVERTER
 // ------------------------
-$em-base  : 16px !default;
+$em-base  : $body-font-size !default;
 
 // It strips the unit of measure and returns it
 @function stripUnit($num) {
@@ -142,6 +127,12 @@ $retina-screen : 192dpi !default;
 	@media only screen and (min-width: $size) { @content; }
 }
 
+@mixin between($smaller-size, $large-size) {
+	@media only screen and (min-width: $smaller-size) and (max-width: $larger-size) {
+		@content;
+	}
+}
+
 // 480px and down
 @mixin phone() {
 	@include below($phone-screen) { @content; }
@@ -176,31 +167,6 @@ $retina-screen : 192dpi !default;
 	@media only screen and (orientation: portrait) { @content; }
 }
 
-// ---------------------------------------------------
-// SHINY EFFECT
-// Give emboss feel to an element
-//
-// Use this in conjunction with Compass' box-shadow()
-//     @include box-shadow(shiny(right), ...)
-// ---------------------------------------------------
-@function shiny($applyTo: top, $activeState: false) {
-	$size  : 0 1px; // top
-	$shiny : inset $size 0 rgba(white, 0.5); // normal state
-
-	@if $applyTo == right {
-		$size : 1px 0; }
-	@else if $applyTo == left {
-		$size : -1px 0; }
-	@else if $applyTo == bottom {
-		$size : 0 -1px; }
-	
-	// Change the shiny shadow if active-state
-	@if $activeState {
-		$shiny : inset $size 0 rgba(black, 0.2);
-	}
-	@return $shiny;
-}
-
 // ----------------------------------------------
 // CLEARING FLOAT
 // Make a container wraps floated element
@@ -253,7 +219,7 @@ $retina-screen : 192dpi !default;
 // DISABLE SELECTION
 // Prevents user to select/highlight the element's text
 // ------------------------------------------------------
-%disable-user-select {
+@mixin disable-user-select {
 	-webkit-touch-callout : none;
 	-webkit-user-select   : none;
 	-khtml-user-select    : none;

data/assets/sass/edge/components/_block-grid-margin.scss

@@ -1,6 +1,6 @@
 // ------------------------------------------
 // BLOCK GRID with MARGIN
-//   *Deprecated* in v 0.1
+//   *Deprecated* since v 0.1, use block-grid instead
 //   Using margin for distance between block
 // ------------------------------------------
 $block-grid-max-width : em($content-width) !default;

data/assets/sass/edge/components/_block-grid.scss

@@ -3,12 +3,12 @@
 //   Based heavily on ZURB's Foundation
 // ------------------------------------------
 
-$block-distance  : em(15px) !default;
-$max-blocks      : 12 !default;
+$max-blocks     : 12 !default;
+$block-distance : 15px !default;
 
 @mixin block-grid-calc (
 	$per-row  : false,
-	$distance : $block-distance,
+	$distance : em($block-distance),
 	$collapse : false,
 	$for-base : true ) {
 
@@ -32,7 +32,7 @@ $max-blocks      : 12 !default;
 
 @mixin block-grid (
 	$per-row  : false,
-	$distance : $block-distance,
+	$distance : em($block-distance),
 	$collapse : false,
 	$for-base : true ) {
 	
@@ -86,9 +86,16 @@ EDGE Block Grid
 }
 
 @include small {
-	// Make large-block-grid 100% width
-	[class*="large-block-grid-"] > li {
-		width: 100%;
+	// Make large-block-grid 100% width, but only on responsive site
+	body:not(.not-responsive) {
+		[class*="large-block-grid-"] > li {
+			width: 100%;
+		}
+		@for $i from 1 through $max-blocks {
+			.small-block-grid-#{$i} {
+				@include block-grid($per-row:$i, $for-base:false );
+			}
+		}
 	}
 
 	// Remove large grid clearing
@@ -97,12 +104,6 @@ EDGE Block Grid
 			clear: none;
 		}
 	}
-
-	@for $i from 1 through $max-blocks {
-		.small-block-grid-#{$i} {
-			@include block-grid($per-row:$i, $for-base:false );
-		}
-	}
 }
 
 

data/assets/sass/edge/components/_button.scss

@@ -2,34 +2,34 @@ $button-padding : em(10px 20px);
 
 @mixin button($bg-color:$main-color, $for-base:false) {
 	// Button Shadow
-	$shadow-base  : 0 1px 0 darken($bg-color, 20%);
+	$shadow-base   : 0 1px 0 darken($bg-color, 20%);
 	$shadow-hover  : inset 1px 1px 5em rgba(black, 0.2);
-
+	
 	background : $bg-color;
 	color      : contrast-color($bg-color, #333, white, 70%);
 	border     : none;
 	
-	@if $full {
-		$shadow-base  : 0 1px 0 darken($bg-color, 20%);
-		@include box-shadow($shadow-base );
-	}
+	$shadow-base  : 0 1px 0 darken($bg-color, 20%);
+	@include box-shadow($shadow-base );
 
 	@if $for-base {
+		display   : inline-block;
 		position  : relative;
 		cursor    : pointer;
 		padding   : $button-padding;
 		
-		@if $full {
-			&:hover {
-				// background: darken($bg-color, 10%);
-				@include box-shadow($shadow-base, $shadow-hover );
-			}
+		&:hover {
+			// background: darken($bg-color, 10%);
+			@include box-shadow($shadow-base, $shadow-hover );
+		}
 
-			&:active {
-				top: 1px;
-				border: none;
-				@include box-shadow($shadow-hover );
-			}
+		&:active {
+			top: 1px;
+			border: none;
+			@include box-shadow($shadow-hover );
+		}
+		&:focus {
+			outline: none;
 		}
 	}
 }

data/assets/sass/edge/components/_form.scss

@@ -10,22 +10,22 @@ $input-border        : $input-border-style $input-border-color;
 $input-border-hover  : $input-border-style darken($input-border-color, 10%);
 $input-border-focus  : $input-border-style $main-color;
 
-$prefix-bg-color :$passive-color;
+$prefix-bg-color     : $passive-color;
 
 @mixin input() {
-	input[type="text"],
-	input[type="password"],
-	input[type="date"],
-	input[type="datetime"],
-	input[type="datetime-local"],
-	input[type="month"],
-	input[type="week"],
-	input[type="email"],
-	input[type="number"],
-	input[type="search"],
-	input[type="tel"],
-	input[type="time"],
-	input[type="url"],
+	[type="text"],
+	[type="password"],
+	[type="date"],
+	[type="datetime"],
+	[type="datetime-local"],
+	[type="month"],
+	[type="week"],
+	[type="email"],
+	[type="number"],
+	[type="search"],
+	[type="tel"],
+	[type="time"],
+	[type="url"],
 	select,
 	textarea {
 		@content;
@@ -38,6 +38,7 @@ $prefix-bg-color :$passive-color;
 	outline: none;
 	padding: $input-padding;
 	border: $input-border;
+	border-top: $input-border-style darken($input-border-color, 5%);
 
 	&:hover {
 		border: $input-border-hover;
@@ -46,7 +47,7 @@ $prefix-bg-color :$passive-color;
 
 	&:focus {
 		border: $input-border-focus;
-		@include box-shadow(inset 0 1px 3px -1px $main-color);
+		@include box-shadow(inset 0 1px 2px rgba(black, 0.2));
 	}
 }
 
@@ -54,17 +55,26 @@ $prefix-bg-color :$passive-color;
 @mixin form-label($padding: $input-padding, $bg-color: $prefix-bg-color) {
 	display: block;
 	line-height: normal;
-	padding: $padding;
+	padding-top: $padding;
+	padding-bottom: $padding;
 	border: $input-border-style transparent; // to make it vertically centered
-
-	&.prefix {
+	
+	&.prefix,
+	&.postfix {
 		border: $input-border-style $bg-color;
-		border-right: none;
-		width: 100%;
-		
+		border-top: $input-border-style darken( $input-border-color, 5% );
 		text-align: center;
-		background: $bg-color;
 		color: contrast-color($bg-color, #333, white, 60%);
+		background: $bg-color;
+		overflow: hidden;
+	}
+
+	&.prefix {
+		border-right: none;
+	}
+
+	&.postfix {
+		border-left: none;
 	}
 }
 

data/assets/sass/edge/components/_grid-margin.scss

@@ -1,6 +1,6 @@
 // -----------------------------------------
 // GRID with MARGIN
-//   *Deprecated* in v 0.1
+//   *Deprecated* since v 0.1, use block-grid instead
 //   Using margin for distance between grid
 // -----------------------------------------
 $row-width       : em($content-width) !default;

data/assets/sass/edge/components/_grid.scss

@@ -3,9 +3,9 @@
 //   Based on ZURB's Foundation 4
 // -----------------------------------------
 
-$column-distance : 20px !default;
-$row-max-width   : $content-width !default;
+$row-max-width   : 1140px !default;
 $total-columns   : 12 !default;
+$column-distance : 20px !default;
 
 // Calculate percentages for grid
 @function gridCalc($colNumber, $totalColumns:$total-columns) {
@@ -16,11 +16,12 @@ $total-columns   : 12 !default;
 @mixin grid-row(
 	$nest      : false,
 	$collapse  : false,
-	$for-base  : false,
+	$for-base  : false,  // Prevent style repetition, only for internal use
 	$max-width : $row-max-width,
 	$distance  : $column-distance ) {
 	
-	$max-width : em($max-width) + em($distance); // to make up for the padding
+	$max-width : $max-width + $distance; // to make up for the padding
+	$distance  : em($distance);
 
 	// prevent duplicate for base CSS class
 	@if $for-base == false {
@@ -63,31 +64,36 @@ $total-columns   : 12 !default;
 	$columns     : false,
 	$last-column : false,
 	$center      : false,
-	$offset      : false,
-	$push        : false,
-	$pull        : false,
+	$offset      : 0,
+	$push        : 0,
+	$pull        : 0,
 	$collapse    : false,
 	$float       : true,
-	$for-base    : false,
-	$distance      : $column-distance,
+	$form        : false, // Create form-columns
+	$for-base    : false, // Prevent style repetition, only for internal use
+	$distance      : em($column-distance),
 	$total-columns : $total-columns,
 	$external      : $external-call, // Mixin used from external file
-	$small    : false // For usage by external file, apply CSS for small-grid
+	$small    : false // For external use, apply CSS for small-grid
 	) {
-	
+
 	@if $for-base == false {
 		position: relative;
 	}
 
 	// If collapsed, get rid of distance padding
 	@if $collapse {
-		padding-left  : 0;
-		padding-right : 0;
+		// If not for form-column
+		@if $form == false {
+			padding-left  : 0;
+			padding-right : 0;
+		}
 	}
 
-	// Distance padding whenever a column isn't set to collapse
+	// Set distance between padding whenever a column isn't set to collapse
+	//   Form-column can't have distance
 	// (use $collapse:null to do nothing)
-	@else if $collapse == false {
+	@else if $collapse == false and $form == false {
 		padding-left  : $distance / 2;
 		padding-right : $distance / 2;
 	}
@@ -103,16 +109,16 @@ $total-columns   : 12 !default;
 	}
 
 	// If offset, calculate appropriate margins
-	@if $offset { 
+	@if $offset > 0 { 
 		margin-#{$default-float}: gridCalc($offset, $total-columns);
 	}
 
 	// Source Ordering, adds left/right depending on which you use.
-	@if $push {
+	@if $push > 0 {
 		#{$default-float}    : gridCalc($push, $total-columns);
 		#{$default-opposite} : auto;
 	}
-	@if $pull {
+	@if $pull > 0 {
 		#{$default-opposite} : gridCalc($pull, $total-columns);
 		#{$default-float}    : auto;
 	}
@@ -122,6 +128,11 @@ $total-columns   : 12 !default;
 		margin-#{$default-float}    : auto !important;
 		margin-#{$default-opposite} : auto !important;
 		float : none !important;
+		
+		// If for form-column, change display to `block`
+		@if $form {
+			display: block;
+		}
 	}
 
 	@if $float {
@@ -154,20 +165,7 @@ EDGE Grid
 
 body {
 	&.not-responsive {
-		min-width : $row-max-width;
-
-		.row {
-			min-width: em($row-max-width + $column-distance);
-			
-			.column,
-			.columns {
-			}
-
-			// Nested row
-			.row {
-				min-width: 0;
-			}
-		}
+		min-width: em($row-max-width + $column-distance);
 	}
 	&.only-responsive-below-small {
 		min-width : $row-max-width;
@@ -189,15 +187,16 @@ body {
 	}
 }
 
+// Normal row
 .row {
 	@include grid-row;
 	
 	// Collapsed row
 	&.collapse {
-		@include grid-row($collapse:true, $for-base:false);
+		@include grid-row($collapse:true);
 		.column,
 		.columns {
-			@include grid-column($collapse:true, $for-base:false);
+			@include grid-column($collapse:true);
 		}
 	}
 	
@@ -217,6 +216,16 @@ body {
 }
 
 
+// Normal form-row
+.form-row {
+	@include grid-row($collapse:true, $nest:true);
+
+	.form-column,
+	.form-columns {
+		@include grid-column($collapse:true, $form:true);
+	}
+}
+
 @for $i from 1 through $total-columns {
 	.large#{-$i} { @include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true); }
 }
@@ -227,9 +236,16 @@ body {
 	@include grid-column($center:true, $collapse:null, $float:false);
 }
 
+// Centered form-column
+.form-column.large-centered,
+.form-columns.large-centered {
+	@include grid-column($center:true, $collapse:null, $float:false, $form:true);
+}
+
+// Source Ordering
 @include medium-up {
 	@for $i from 1 through $total-columns - 1 {
-		.row .large-offset-#{$i} {
+		.large-offset-#{$i} {
 			@include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
 		}
 		.push#{-$i} {
@@ -243,18 +259,16 @@ body {
 
 // Small screen and below
 @include small {
-	// Expand large column only if it's responsive site
+	
 	body:not(.not-responsive) {
 		.column,
 		.columns {
 			@include grid-column($columns:$total-columns);
 		}
-	}
-	
-
-	@for $i from 1 through $total-columns {
-		.small#{-$i} {
-			@include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true);
+		@for $i from 1 through $total-columns {
+			.small#{-$i} {
+				@include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true);
+			}
 		}
 	}
 

data/assets/sass/edge/components/_normalize.scss

@@ -19,12 +19,10 @@ Based on git.io/normalize
 	padding: 0;
 }
 
-// The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with brower-based text zoom or user-set defaults.
-html,
-body {
-	font-size: $base-font-size;
-}
+// html,
+// body {
+// 	font-size: $base-font-size;
+// }
 
 // Chrome Sibling Selector Fix
 body { -webkit-animation: bugfix infinite 1s; }
@@ -34,16 +32,15 @@ body { -webkit-animation: bugfix infinite 1s; }
 }
 
 html {
-	font-family : sans-serif;
-	-webkit-text-size-adjust : 100%;
-	-ms-text-size-adjust     : 100%;
+	font-family: sans-serif;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
 }
 
 // Reset anchor styling
 a {
-	display         : inline-block;
-	cursor          : pointer;
-	text-decoration : none;
+	cursor: pointer;
+	text-decoration: none;
 }
 
 // Remove outline on a:focus
@@ -55,37 +52,37 @@ h1, h2, h3, h4, h5, h6 { margin: 0; }
 
 // Reset paragraph styling
 p {
-	line-height   : 1.5;
-	margin-top    : 0;
-	margin-bottom : 0;
+	line-height: 1.5;
+	margin-top: 0;
+	margin-bottom: 0;
 }
 
 // A better looking default horizontal rule
 hr {
-	-moz-box-sizing : content-box;
-	box-sizing      : content-box;
-	display    : block;
-	height     : 1px;
-	margin     : 1em 0;
-	padding    : 0;
-	border     : 0;
-	border-top : 1px solid #ccc;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+	display: block;
+	height: 1px;
+	margin: 1em 0;
+	padding: 0;
+	border: 0;
+	border-top: 1px solid #ccc;
 }
 
 // Get rid of gap under images
 img {
-	border  : 0;
-	display : inline-block;
-	vertical-align         : middle;
-	-ms-interpolation-mode : bicubic; 
+	border: 0;
+	display: inline-block;
+	vertical-align: middle;
+	-ms-interpolation-mode: bicubic; 
 }
 
 // Grid Defaults to get images and embeds to work properly
 img,
 object,
 embed {
-	max-width : 100%;
-	height    : auto;
+	max-width: 100%;
+	height: auto;
 }
 
 object,
@@ -161,11 +158,11 @@ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
 
 // Allow only vertical resizing of textareas.
 textarea {
-	overflow       : auto;
-	vertical-align : top;
-	resize     : vertical;
-	height     : auto;
-	min-height : 50px;
+	overflow: auto;
+	vertical-align: top;
+	resize: vertical;
+	height: auto;
+	min-height: 50px;
 }
 
 table { border-collapse: collapse; border-spacing: 0; }
@@ -181,14 +178,14 @@ table { border-collapse: collapse; border-spacing: 0; }
 .text-justify { text-align: justify !important; }
 .hide         { display: none !important; visibility: hidden !important; }
 .visual-hide  {
-	border   : 0 !important;
-	clip     : rect(0 0 0 0) !important;
-	height   : 1px !important;
-	margin   : -1px !important;
-	overflow : hidden !important;
-	padding  : 0 !important;
-	position : absolute !important;
-	width    : 1px !important;
+	border: 0 !important;
+	clip: rect(0 0 0 0) !important;
+	height: 1px !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
 }
 
 .bold, b, strong { font-weight: 700 !important; }