edge_framework 1.4.1 → 2.0.0.a

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

@@ -26,12 +26,15 @@ $column-gutter   : 20px !default;
 @mixin base-row(
   $nest     : false,
   $collapse : false,
+  $gutter   : 0,
+  $width    : 0,
   $for-base : false) {
-
-  $width  : $row-max-width;
-  $gutter : $column-gutter;
+  
+  @if $gutter == 0 { $gutter: $column-gutter; }
+  @if $width == 0 { $width  : $row-max-width; }
   
   @if $for-base {
+    display: block;
     margin: 0 auto;
     width: 100%;
     max-width: $width + $gutter;
@@ -79,10 +82,8 @@ $column-gutter   : 20px !default;
   }
   // Only collapsed
   @else if $collapse {
-    margin: 0 auto;
     padding-right: $gutter / 2;
     padding-left: $gutter / 2;
-    width: 100%;
   }
 }
 
@@ -96,34 +97,45 @@ $column-gutter   : 20px !default;
   $width    : 0px,
   $collapse : false) {
   
-  // Nested row, only output if gutter is specified
+  // if $gutter is passed
   @if $gutter > 0 {
-    .row & {
+    // row needs the negative margin only if nested
+    h-row &,
+    h-row  {
       margin-right: -($gutter / 2);
       margin-left: -($gutter / 2);
-      min-width: 0;
     }
-  } @else {
-    .row & {
-      min-width: 0;
+
+    h-column {
+      padding-right: $gutter / 2;
+      padding-left: $gutter / 2;
     }
   }
-  
-  // Set default value if 0
-  @if $width == 0px { $width: $row-max-width; }
-  @if $gutter == 0 { $gutter: $column-gutter; }
-  
-  // Max width for outer row
-  max-width: $width + $gutter;
 
-  @if not $responsive {
-    min-width: $width + $gutter;
-  }
+  // if either $gutter or $width is passed, recalculate max-width
+  @if $gutter > 0 or $width > 0 {
+    @if $width == 0px { $width: $row-max-width; }
+    @if $gutter == 0 { $gutter: $column-gutter; }
+
+    // max width for most outer row
+    max-width: $width + $gutter;
   
-  // Collapsed behavior
+    // fixed width if not responsive
+    @if not $responsive {
+      min-width: $width + $gutter;
+    }
+  }
+
+  // collapsed behavior
   @if $collapse {
+    @if $gutter == 0 { $gutter: $column-gutter; }
+
     padding-right: $gutter / 2;
     padding-left: $gutter / 2;
+
+    > h-column {
+      @include column($collapse: true);
+    }
   }
 }
 
@@ -135,8 +147,6 @@ $column-gutter   : 20px !default;
 @mixin base-column(
   $size   : 0,
   $offset : null,
-  $push   : 0,
-  $pull   : 0,
   $collapse : false,
   $centered : null,
   $gutter : 0px,
@@ -144,7 +154,7 @@ $column-gutter   : 20px !default;
   $for-base : false) {
   
   @if $for-base {
-    position: relative;
+    display: block;
     float: $default-float;
     padding-right: $column-gutter / 2;
     padding-left: $column-gutter / 2;
@@ -182,17 +192,6 @@ $column-gutter   : 20px !default;
     margin-right: 0;
     margin-left: 0;
   }
-  
-  // Source Ordering
-  @if $push > 0 {
-    #{$default-float}: gridCalc($push, $total);
-    #{$default-opposite}: auto;
-  }
-
-  @if $pull > 0 {
-    #{$default-opposite}: gridCalc($pull, $total);
-    #{$default-float}: auto;
-  }
 }
 
 // -----------------------------------
@@ -205,8 +204,6 @@ $column-gutter   : 20px !default;
   $small  : 0,
   $mini   : 0,
   $offset : null,
-  $push   : 0,
-  $pull   : 0,
   $collapse : false,
   $centered : null,
   $gutter : 0px,
@@ -214,21 +211,21 @@ $column-gutter   : 20px !default;
 
   // Sizing
   @if $size > 0 {
-    @include base-column($size:$size, $total:$total);
+    @include base-column($size, $total:$total);
 
     @if $small > 0 {
       @include below(small) {
-        @include base-column($size:$small, $total:$total);
+        @include base-column($small, $total:$total);
       }
-    } @else if $responsive and not $is-in-media { // else, become 100% width on small screen (if responsive)
+    } @else if $responsive and not $in-media { // else, become 100% width on small screen (if responsive)
       @include below(small) {
-        @include base-column($size:$total, $total:$total);
+        @include base-column($total, $total:$total);
       }
     }
 
     @if $mini > 0 {
       @include below(mini) {
-        @include base-column($size:$mini, $total:$total);
+        @include base-column($mini, $total:$total);
       }
     }
   }
@@ -242,13 +239,13 @@ $column-gutter   : 20px !default;
   );
 
   // Source Ordering, follow base column
-  @if $responsive and not $is-in-media {
+  @if $responsive and not $in-media {
     // make Offset not inherited in small screen
     @include above(small) {
-      @include base-column($offset:$offset, $pull:$pull, $push:$push, $total:$total);
+      @include base-column($offset:$offset, $total:$total);
     }
   } @else {
-    @include base-column($offset:$offset, $pull:$pull, $push:$push, $total:$total);
+    @include base-column($offset:$offset, $total:$total);
   }
 }
 
@@ -276,21 +273,23 @@ $column-gutter   : 20px !default;
   }
 }
 
-// ---------------------
-// SOURCE ORDERING
-// ---------------------
-@mixin source-ordering() {
+// -------------
+// Sizing
+// -------------
+
+@mixin h-sizing($name) {
+  // Large sizing
+  @for $i from 1 through $total-columns {
+    .#{$name}-#{$i} { @include base-column($i); }
+  }
+}
+
+// ---------------
+// Offset
+// ---------------
+@mixin h-offset($name) {
   @for $i from 1 through $total-columns - 1 {
-    .large-offset-#{$i},
-    .offset-#{$i} {
-      @include base-column($offset:$i);
-    }
-    .push#{-$i} {
-      @include base-column($push:$i);
-    }
-    .pull#{-$i} {
-      @include base-column($pull:$i);
-    }
+    .#{$name}-#{$i} { @include base-column($offset:$i); }
   }
 }
 
@@ -306,89 +305,66 @@ $column-gutter   : 20px !default;
   }
 }
 
-// Normal row
-.row {
+// normal row
+h-row {
   @include base-row($for-base:true);
   
-  // Collapsed row
-  &.collapse {
-    @include base-row($collapse:true);
-    
-    .row {
-      @include base-row($nest:true, $collapse:true);
-    }
-
-    .column,
-    .columns {
-      @include base-column($collapse:true);
-    }
-  }
-  
-  // Nested-collapsed row
-  .row {
+  // nested row
+  h-row {
     @include base-row($nest:true);
+    
+    // collapsed nested row
     &.collapse {
       @include base-row($nest:true, $collapse:true);
     }
   }
 }
 
-// Normal column
-.column,
-.columns {
-  @include base-column($size:$total-columns, $for-base:true);
-}
-
-// Large sizing
-@for $i from 1 through $total-columns {
-  .large#{-$i} { @include base-column($size:$i); }
+// normal column
+h-column {
+  @include base-column($total-columns, $for-base:true);
 }
 
-// Centered column
-.column.large-centered,
-.columns.large-centered,
-.column.centered,
-.columns.centered {
-  @include base-column($centered:true);
-}
+// collapsed row
+.collapse {
+  @include base-row($collapse:true);
+  
+  // nested row inside collapsed
+  h-row {
+    @include base-row($nest:true);
+  }
 
-@if $responsive {
-  @include above(small) {
-    @include source-ordering();
+  > h-column {
+    @include base-column($collapse:true);
   }
 }
-// Remove media query so when the window scaled down, the styling isn't gone.
-@else {
-  @include source-ordering();
-}
 
+@include h-sizing("large");
 
-// Small screen and below
 @if $responsive {
-  
-  @include below(small) {
-    .column,
-    .columns {
-      @include base-column($size:$total-columns);
-    }
-    @for $i from 1 through $total-columns {
-      .small#{-$i} {
-        @include base-column($size:$i);
-      }
-    }
+  @include above(small) { @include h-offset("offset"); }
+} @else {
+  // Not inside media query. So when it reach the breakpoint, the offset isn't gone.
+  @include h-offset("offset");
+}
 
-    @for $i from 0 through $total-columns - 2 {
-      .small-offset-#{$i} {
-        @include base-column($offset:$i);
-      }
-    }
+// centered column
+.centered {
+  @include base-column($centered:true);
+}
 
-    .column.small-centered,
-    .columns.small-centered {
-      @include base-column($centered:true);
-    }
+// small screen and below
+@include below(small) {
+  [class^="large-"] {
+    @include base-column($total-columns);
   }
+  
+  @include h-sizing("small");
+  @include h-offset("small-offset");
 
-} // responsive
+  .small-centered {
+    @include base-column($centered:true);
+  }
+}
 
 } // $include-grid

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

@@ -145,7 +145,8 @@ fieldset {
 
 legend { border: 0; padding: 0; }
 button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0;}
-button, input { line-height: normal; }
+button, input, label { line-height: normal; }
+label { display: block; }
 button, select { text-transform: none; }
 button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
 button[disabled], html input[disabled] { cursor: default; }
@@ -153,6 +154,11 @@ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0
 input[type="search"] { -webkit-appearance: textfield; }
 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
 button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+button:focus, input[type="submit"]:focus, input[type="reset"]:focus { outline: none; }
+
+// Disable Chrome's datepicker
+input::-webkit-calendar-picker-indicator{ display: none; }
+input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important; }
 
 // Allow only vertical resizing of textareas.
 textarea {
@@ -168,7 +174,6 @@ table {
   border-spacing: 0;
 }
 
-
 /* Miscellaneous useful HTML classes */
 
 .left         { float: left !important; }
@@ -189,8 +194,8 @@ table {
   width: 1px !important;
 }
 
-.bold, b, strong { font-weight: 700 !important; }
-.italic, em      { font-style: italic !important; }
+.bold, b, strong { font-weight: 700; }
+.italic, em      { font-style: italic; }
 
 // Font smoothing, only works on Safari Webkit
 .antialiased     { -webkit-font-smoothing: antialiased; }

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

@@ -8,7 +8,7 @@
   EDGE Print
 -------------- */
 
-@media only print {
+@include print {
   * {
     background: transparent !important;
     color: #000 !important; // Black prints faster: h5bp.com/s

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

@@ -15,61 +15,57 @@ $tile-gutter : 15px !default;
   $gutter   : 0,
   $collapse : false,
   $for-base : false,
-  $reset-clearing : false) {
+  $clear    : false) {
   
   @if $for-base {
     display: block;
-    @include clearfix();
-    
-    > li {
-      display: block;
-      position: relative;
-      float: $default-float;
-    }
+    @include clearfix;
   }
 
   // Collapse, reduce all margin and padding to 0
   @if $collapse {
     margin-right: 0;
     margin-left: 0;
-
-    > li {
-      padding: 0;
-    }
-  }
-  
-  // if gutter is not specified, use the default gutter.
-  @if $gutter == 0 and $for-base and not $collapse {
-    $gutter: $tile-gutter;
   }
   
   @if $gutter > 0 {
     margin-right: -($gutter / 2);
     margin-left: -($gutter / 2);
+  }
 
-    > li {
+  > h-ti {
+    @if $for-base {
+      display: block;
+      float: $default-float;
+    }
+
+    @if $collapse {
+      padding: 0;
+    }
+
+    @if $gutter > 0 {
       padding-right: ($gutter / 2); 
       padding-left: ($gutter / 2);
     }
-  }
   
-  // Number of tiles per row
-  @if $size > 0 {
-    > li {
+    // Number of tiles per row
+    @if $size > 0  {
       width: 100% / $size;
       
-      @if $reset-clearing {
+      // clear floating
+      @if $clear {
         &:nth-of-type(n) {
           clear: none;
         }
       }
+    }
 
+    @if $size > 1 {
       &:nth-of-type(#{$size}n+1) {
         clear: both;
       }
     }
   }
-
 }
 
 // -----------------------------------
@@ -88,23 +84,18 @@ $tile-gutter : 15px !default;
     $size: $size,
     $gutter: $gutter,
     $collapse: $collapse,
-    $for-base: true,
-    $reset-clearing: $is-in-media
+    $clear: $in-media
   );
 
   @if $small > 0 {
     @include below(small) {
-      @include base-tile($size: $small, $reset-clearing: true); 
-    }
-  } @else if $responsive and not $is-in-media { // else, become 100% width on small screen (if responsive)
-    @include below(small) {
-      @include base-tile($size: 1);
+      @include base-tile($small, $clear:true);
     }
   }
 
   @if $mini > 0 {
     @include below(mini) {
-      @include base-tile($size: $mini, $reset-clearing: true);
+      @include base-tile($mini, $clear:true);
     }
   }
 }
@@ -115,37 +106,32 @@ $tile-gutter : 15px !default;
   EDGE Tile
 -------------- */
 
-[class*="tile-"] {
-  @include base-tile($for-base: true);
-  
+h-tile {
+  @include base-tile($gutter:$tile-gutter, $for-base:true);
+
   &.collapse {
     @include base-tile($collapse:true);
   }
 }
 
 @for $i from 1 through $max-tiles {
-  .large-tile-#{$i},
-  .tile-#{$i} {
-    @include base-tile($size:$i);
+  .block-#{$i} {
+    @include base-tile($i);
   }
 }
 
-@if $responsive {
-  @include below(small) {
-    // Make large-tile 100% width
-    [class*="tile-"] > li {
-      width: 100%;
-    }
-    [class*="small-tile-"] > li:nth-child(n) {
-      clear: none;
-    }
-    @for $i from 1 through $max-tiles {
-      .small-tile-#{$i} {
-        @include base-tile($size:$i);
-      }
+@include below(small) {
+  // Make large-tile 100% width
+  [class^="block-"] {
+    @include base-tile(1, $clear:true);
+  }
+
+  @for $i from 1 through $max-tiles {
+    .small-block-#{$i} {
+      @include base-tile($i);
     }
   }
-} // responsive
+}
 
 
 

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

@@ -125,7 +125,6 @@ a {
   color: $link-color;
 }
 
-
 h1 { font-size: em($h1-font-size); }
 h2 { font-size: em($h2-font-size); }
 h3 { font-size: em($h3-font-size); }