edge_framework 0.8.1 → 0.9.0

data/assets/sass/edge.scss

@@ -1,12 +1,7 @@
-/* ---------------------------------------------------------------
+/* ----------------------------------
 - EDGE Framework - edge.setyono.net
-- v0.6.0 (Barathrum)
-- Special Thanks:
---- Foundation        | foundation.zurb.com
---- Bootstrap         | getbootstrap.com
---- Normalize         | git.io/normalize
---- HTML5 Boilerplate | html5boilerplate.com
-------------------------------------------------------------------- */
+- v0.9.0 (Banehallow)
+------------------------------------- */
 
 @import "edge/base";
 @import "edge/components";

data/assets/sass/edge/_base.scss

@@ -43,7 +43,7 @@ $include-button     : true !default;
 $include-form       : true !default;
 
 $include-print      : false !default;
-$include-code       : false !default;
+$include-code       : true !default;
 
 // ----------
 // COLOR
@@ -128,26 +128,26 @@ $body-line-height : 1.5 !default;
 //     @media only screen and #{above(small)} and #{portrait}
 // -------------------
 $mini-screen  : 480px !default;
-$small-screen : 768px !default;
+$small-screen : 767px !default;
 $large-screen  : 1440px !default;
 $retina-screen : 192dpi !default;
 
-@function translateSize($size-name) {
+@function translateSize($size) {
   // If passed param is number, return it as it is
-  @if type-of($size-name) == number {
+  @if type-of($size) == number {
     @return $size;
   }
   // Else, return the size as requested
-  @else if $size-name == mini {
+  @else if $size == mini {
     @return $mini-screen;
   }
-  @else if $size-name == small {
+  @else if $size == small {
     @return $small-screen;
   }
-  @else if $size-name == large {
+  @else if $size == large {
     @return $large-screen;
   }
-  @else if $size-name == retina {
+  @else if $size == retina {
     @return $retina-screen;
   }
 }
@@ -164,7 +164,7 @@ $retina-screen : 192dpi !default;
 }
 
 @function above($named-size) {
-  $size: translateSize($named-size);
+  $size: translateSize($named-size) + 1px;
   @if $named-size == retina {
     @return "(-webkit-min-device-pixel-ratio: 2), (min-resolution: #{$size})";
   }
@@ -201,7 +201,7 @@ $retina-screen : 192dpi !default;
 }
 
 @mixin above($named-size) {
-  $size: translateSize($named-size);
+  $size: translateSize($named-size) + 1px;
   @if $named-size == retina {
     @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: $size) {
       @content;

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

@@ -23,13 +23,12 @@ $code-python-color  : #376a94; // dark-blue
 
 // Add decoration to the code-block
 @mixin code-decor($color) {
-
   &:after {
     background: $color;
   }
 
   code {
-    @include background-image(linear-gradient(transparent 50%, rgba($color, .04) 50% ) );
+    @include background-image(linear-gradient(transparent 50%, rgba($color, .03) 50% ) );
   }
 
   .line-highlight:before,
@@ -80,10 +79,9 @@ pre {
   max-height: 30em;
 
   @include code-decor($passive-color);
-
   @include box-shadow(-1px 0px 0px 0px #ddd, 0px 0px 0px 1px #ddd);
   
-  @include small {
+  @include below(small) {
     &:hover {
       &:after {
         opacity: 0;
@@ -101,7 +99,8 @@ pre {
     height: 1em;
 
     background: $passive-color;
-    opacity: .2;
+    @if $code-theme == dark { opacity: .5; }
+    @else { opacity: .2; }
 
     padding: em(5px 10px);
     font-family: $code-font-family;
@@ -133,7 +132,7 @@ pre {
 
   > code {
     display: block;
-    overflow: visible;
+    overflow: auto;
     background-size: 3em 3em;
     background-origin: content-box;
     padding-left: 0.5em;
@@ -156,62 +155,112 @@ pre {
   vertical-align: bottom;
 }
 
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #7D8B99;
-}
 
-.token.punctuation {
-  color: #5F6364;
-}
+@if $code-theme == light {
+  .token.comment,
+  .token.block-comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #7D8B99;
+  }
 
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.function-name,
-.token.constant,
-.token.symbol {
-  color: #c92c2c;
-}
+  .token.punctuation {
+    color: #5F6364;
+  }
 
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.function,
-.token.builtin {
-  color: #2f9c0a;
-}
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.function-name,
+  .token.constant,
+  .token.symbol {
+    color: #c92c2c;
+  }
 
-.token.operator,
-.token.entity,
-.token.url,
-.token.variable {
-  color: #a67f59;
-  background: rgba(255, 255, 255, 0.5);
-}
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.function,
+  .token.builtin {
+    color: #2f9c0a;
+  }
 
-.token.atrule,
-.token.attr-value,
-.token.keyword,
-.token.class-name {
-  color: #1990b8;
-}
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+  }
 
-.token.regex,
-.token.important {
-  color: #e90;
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword,
+  .token.class-name {
+    color: #1990b8;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  [data-lang="css"] .token.string,
+  .style .token.string {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+  }
 }
+@else if $code-theme == dark {
+  .token.property,
+  .token.tag,
+  .token.constant,
+  .token.symbol {
+    color: #f92672;
+  }
+
+  .token.boolean,
+  .token.number{
+    color: #ae81ff;
+  }
 
-[data-lang="css"] .token.string,
-.style .token.string {
-  color: #a67f59;
-  background: rgba(255, 255, 255, 0.5);
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.builtin {
+    color: #a6e22e;
+  }
+
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: #f8f8f2;
+  }
+
+  .token.atrule,
+  .token.attr-value
+  {
+    color: #e6db74;
+  }
+
+
+  .token.keyword{
+  color: #66d9ef;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #fd971f;
+  }
 }
 
+
 .token.important {
   font-weight: normal;
 }
@@ -236,20 +285,19 @@ pre {
 
 .line-highlight {
   position: absolute;
-  left: 0;
   right: 0;
-  padding: inherit 0;
+  left: 0;
 
-  background: hsla(24, 20%, 50%,.08);
-  background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
-  background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
-  background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
-  background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
-  
   pointer-events: none;
-  
   line-height: inherit;
   white-space: pre;
+  
+  @if $code-theme == dark {
+    @include background-image(linear-gradient(left, rgba(#e2e2e2, .1) 70%, rgba(#e2e2e2, 0) ) );
+  } @else {
+    @include background-image(linear-gradient(left, rgba(#8c8c8c, .1) 70%, rgba(#8c8c8c, 0) ) );
+  }
+  
 }
 
   .line-highlight:before,
@@ -295,12 +343,8 @@ pre.line-numbers > code {
   font-size: 100%;
   left: .5em;
   letter-spacing: -1px;
-
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
+  
+  @include disable-user-select();
 }
 
   .line-numbers-rows > span {

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

@@ -27,39 +27,65 @@ $column-gutter   : 20px !default;
     margin: 0 auto;
     width: 100%;
     max-width: $width + $gutter;
-    
+
     @if not $responsive {
       min-width: $width + $gutter;
     }
     @include clearfix;
   }
+  
+  // If gutter is passed as param, calculate it
+  @if $gutter != $column-gutter {
+    max-width: $width + $gutter;
 
-  $gutter: em($gutter);
+    @if not $responsive {
+      min-width: $width + $gutter;
+    }
+  }
   
   @if $nest and $collapse {
-    width: auto;
-    max-width: none;
     margin: 0;
     padding-right: 0;
     padding-left: 0;
+    width: auto;
+    max-width: none;
+
+    @if not $responsive {
+      min-width: 0;
+    }
   }
 
   @else if $nest {
-    width: auto;
-    max-width: none;
     margin-right: -($gutter / 2);
     margin-left: -($gutter / 2);
+    width: auto;
+    max-width: none;
+
+    @if not $responsive {
+      min-width: 0;
+    }
   }
 
   @else if $collapse {
+    margin: 0 auto;
     width: 100%;
     max-width: $width;
-    margin: 0 auto;
-    padding-right: $gutter / 2;
-    padding-left: $gutter / 2;
+    
+    @if not $responsive {
+      min-width: $width;
+    }
+  }
+
+  @if $external-call {
+    .row & {
+      margin-right: -($gutter / 2);
+      margin-left: -($gutter / 2);
+    }
   }
 }
 
+// ----------------------------------------------
+// Calculate size for column created externally
 @mixin external-call-column(
   $column : 0,
   $total  : 0,
@@ -82,6 +108,39 @@ $column-gutter   : 20px !default;
   }
 }
 
+// ----------------------------------
+// Prevent duplicate in grid-column
+@mixin source-ordering-column(
+  $push  : 0,
+  $pull  : 0,
+  $total : 0) {
+
+  @if $push > 0 {
+    #{$default-float}: gridCalc($push, $total);
+    #{$default-opposite}: auto;
+  }
+  @if $pull > 0 {
+    #{$default-opposite}: gridCalc($pull, $total);
+    #{$default-float}: auto;
+  }
+}
+
+// --------------------------------------
+// Prevent duplicate in the base output
+@mixin source-ordering-output() {
+  @for $i from 1 through $total-columns - 1 {
+    .large-offset-#{$i} {
+      @include grid-column($large-offset:$i);
+    }
+    .push#{-$i} {
+      @include grid-column($push:$i);
+    }
+    .pull#{-$i} {
+      @include grid-column($pull:$i);
+    }
+  }
+}
+
 // ------------------------
 // GRID COLUMN
 //   Create the grid
@@ -104,14 +163,14 @@ $column-gutter   : 20px !default;
   @if $for-base {
     position: relative;
     float: $default-float;
-    padding-right: em($gutter) / 2;
-    padding-left: em($gutter) / 2;
+    padding-right: $gutter / 2;
+    padding-left: $gutter / 2;
   }
 
   // If gutter's value is different from default, it means it is passed as param
-  @if not $gutter == $column-gutter {
-    padding-right: em($gutter) / 2;
-    padding-left: em($gutter) / 2;
+  @if $gutter != $column-gutter {
+    padding-right: $gutter / 2;
+    padding-left: $gutter / 2;
   }
 
   // If collapsed, get rid of distance padding
@@ -131,13 +190,12 @@ $column-gutter   : 20px !default;
   }
 
   // Source Ordering, adds left/right depending on which you use.
-  @if $push > 0 {
-    #{$default-float}: gridCalc($push, $total);
-    #{$default-opposite}: auto;
-  }
-  @if $pull > 0 {
-    #{$default-opposite}: gridCalc($pull, $total);
-    #{$default-float}: auto;
+  @if $external-call and $responsive {
+    @include above(small) {
+      @include source-ordering-column($push:$push, $pull:$pull, $total:$total);
+    }
+  } @else {
+    @include source-ordering-column($push:$push, $pull:$pull, $total:$total);
   }
 
   // If centered, get rid of float and add auto margin
@@ -156,14 +214,7 @@ $column-gutter   : 20px !default;
         @include external-call-column($column:$small, $total:$total, $offset:$small-offset, $parent-offset:$large-offset);
       }
       
-      // Mini column is allowed only if Small column is specified
-      @if $mini > 0 {
-        @include below(mini) {
-          @include external-call-column($column:$mini, $total:$total, $offset:$mini-offset, $parent-offset:$small-offset);
-        }
-      }
-      // If mini is not passed, stack the column
-      @else {
+      @if $mini > 0  {
         @include below(mini) {
           @include external-call-column($column:$mini, $total:$total, $offset:$mini-offset, $parent-offset:$small-offset);
         }
@@ -176,6 +227,36 @@ $column-gutter   : 20px !default;
       }
     }
   }
+
+  // Create notes when on debug
+  @if $debug {
+    $notes: "large-#{$large}";
+    @if $large-offset > 0 {
+      $notes: $notes + " large-offset-#{$large-offset}";
+    }
+    @if $small > 0 {
+      $notes: $notes + " small-#{$small}";
+    }
+    @if $small-offset > 0 {
+      $notes: $notes + " small-offset-#{$small-offset}";
+    }
+    @if $mini > 0 {
+      $notes: $notes + " mini-#{$mini}";
+    }
+    @if $mini-offset > 0 {
+      $notes: $notes + " mini-offset-#{$mini-offset}";
+    }
+    @if $push > 0 {
+      $notes: $notes + " push-#{$push}";
+    }
+    @if $pull > 0 {
+      $notes: $notes + " pull-#{$pull}";
+    }
+    @if $center {
+      $notes: $notes + " centered";
+    }
+    edge-column: $notes;
+  }
 }
 
 @if $include-grid {
@@ -223,18 +304,12 @@ EDGE Grid
 }
 
 // Source Ordering
-@include above(small) {
-  @for $i from 1 through $total-columns - 1 {
-    .large-offset-#{$i} {
-      @include grid-column($large-offset:$i);
-    }
-    .push#{-$i} {
-      @include grid-column($push:$i);
-    }
-    .pull#{-$i} {
-      @include grid-column($pull:$i);
-    }
+@if $responsive {
+  @include above(small) {
+    @include source-ordering-output();
   }
+} @else {
+  @include source-ordering-output();
 }
 
 @if $responsive {