edge_framework 0.9.0 → 0.9.9

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

@@ -1,9 +1,9 @@
-// ------------------------------------------
-// CODE HIGHLIGHTER
-//   Based on Prism.js - Coy Theme
-//   @origin Tim Shedor
-//     https://github.com/tshedor/workshop-wp-theme
-// -------------------------------------------------------
+// =============
+// EDGE CODE
+// =============
+// Based on Prism.js - Coy Theme
+// @origin Tim Shedor
+//   https://github.com/tshedor/workshop-wp-theme
 
 $code-font-family   : "Consolas", Courier, "monospace" !default;
 $code-theme         : light !default; // dark or light
@@ -46,7 +46,7 @@ $code-python-color  : #376a94; // dark-blue
   }
 }
 
-@if $include-code {
+@if $include-code and not $external-call {
 /* ----------------------
   EDGE CODE Highlighter
 ---------------------- */
@@ -157,54 +157,56 @@ pre {
 
 
 @if $code-theme == light {
-  .token.comment,
-  .token.block-comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #7D8B99;
-  }
+  .token {
+    &.comment,
+    &.block-comment,
+    &.prolog,
+    &.doctype,
+    &.cdata {
+      color: #7D8B99;
+    }
 
-  .token.punctuation {
-    color: #5F6364;
-  }
+    &.punctuation {
+      color: #5F6364;
+    }
 
-  .token.property,
-  .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.function-name,
-  .token.constant,
-  .token.symbol {
-    color: #c92c2c;
-  }
+    &.property,
+    &.tag,
+    &.boolean,
+    &.number,
+    &.function-name,
+    &.constant,
+    &.symbol {
+      color: #c92c2c;
+    }
 
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.function,
-  .token.builtin {
-    color: #2f9c0a;
-  }
+    &.selector,
+    &.attr-name,
+    &.string,
+    &.function,
+    &.builtin {
+      color: #2f9c0a;
+    }
 
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
-    color: #a67f59;
-    background: rgba(255, 255, 255, 0.5);
-  }
+    &.operator,
+    &.entity,
+    &.url,
+    &.variable {
+      color: #a67f59;
+      background: rgba(255, 255, 255, 0.5);
+    }
 
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword,
-  .token.class-name {
-    color: #1990b8;
-  }
+    &.atrule,
+    &.attr-value,
+    &.keyword,
+    &.class-name {
+      color: #1990b8;
+    }
 
-  .token.regex,
-  .token.important {
-    color: #e90;
+    &.regex,
+    &.important {
+      color: #e90;
+    }
   }
 
   [data-lang="css"] .token.string,
@@ -214,151 +216,153 @@ pre {
   }
 }
 @else if $code-theme == dark {
-  .token.property,
-  .token.tag,
-  .token.constant,
-  .token.symbol {
-    color: #f92672;
-  }
+  .token {
+    &.property,
+    &.tag,
+    &.constant,
+    &.symbol {
+      color: #f92672;
+    }
 
-  .token.boolean,
-  .token.number{
-    color: #ae81ff;
-  }
+    &.boolean,
+    &.number{
+      color: #ae81ff;
+    }
 
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.builtin {
-    color: #a6e22e;
-  }
+    &.selector,
+    &.attr-name,
+    &.string,
+    &.builtin {
+      color: #a6e22e;
+    }
 
+    &.atrule,
+    &.attr-value
+    {
+      color: #e6db74;
+    }
 
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .language-css .token.string,
-  .style .token.string,
-  .token.variable {
-    color: #f8f8f2;
-  }
 
-  .token.atrule,
-  .token.attr-value
-  {
-    color: #e6db74;
-  }
+    &.keyword{
+      color: #66d9ef;
+    }
 
+    &.regex,
+    &.important {
+      color: #fd971f;
+    }
 
-  .token.keyword{
-  color: #66d9ef;
+    &.operator,
+    &.entity,
+    &.url,
+    &.variable {
+      color: #f8f8f2;
+    }
   }
 
-  .token.regex,
-  .token.important {
-    color: #fd971f;
+  [data-lang="css"] .token.string,
+  .style .token.string {
+    color: #f8f8f2;
   }
 }
 
+.token {
+  &.important {
+    font-weight: normal;
+  }
 
-.token.important {
-  font-weight: normal;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-/* Plugin styles */
-
-.token.tab:not(:empty):before,
-.token.cr:before,
-.token.lf:before {
-  color: #e0d7d1;
-}
-
-/* Line Highlighter */
-
-.line-highlight {
-  position: absolute;
-  right: 0;
-  left: 0;
+  &.entity {
+    cursor: help;
+  }
 
-  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) ) );
+  &.tab:not(:empty):before,
+  &.cr:before,
+  &.lf:before {
+    color: #e0d7d1;
   }
-  
 }
 
-  .line-highlight:before,
-  .line-highlight[data-end]:after {
-    content: attr(data-start);
-    position: absolute;
-    z-index: 2;
-    top: .4em;
-    left: .5em;
-    min-width: 1em;
-    padding: 0 .5em;
-    color: hsl(24, 20%, 95%);
-    font: bold 65%/1.5 sans-serif;
-    text-align: center;
-    vertical-align: .3em;
-    border-radius: 999px;
-    text-shadow: none;
-    box-shadow: 0 1px white;
+pre {
+  .namespace {
+    opacity: .7;
   }
   
-  .line-highlight[data-end]:after {
-    content: attr(data-end);
-    top: auto;
-    bottom: .4em;
-  }
+  // LINE HIGHLIGHTER
 
-/* Line numbers */
+  .line-highlight {
+    position: absolute;
+    right: 0;
+    left: 0;
 
-pre.line-numbers {
-  position: relative;
-  counter-reset: linenumber;
-}
+    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) ) );
+    }
 
-pre.line-numbers > code {
-  position: relative;
-  padding-left: 2.5em;
-}
+    &:before,
+    &[data-end]:after {
+      content: attr(data-start);
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      padding: 0 .5em;
+      opacity: .5;
+      
+      color: #f5f2f0;
+      font-weight: 700;
+      font-size: 1em;
+      text-align: center;
+    }
 
-.line-numbers .line-numbers-rows {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: .5em;
-  letter-spacing: -1px;
+    &[data-end]:after {
+      content: attr(data-end);
+      top: auto;
+      bottom: 0;
+    }
+  }
   
-  @include disable-user-select();
-}
+  // LINE NUMBERS
 
-  .line-numbers-rows > span {
-    pointer-events: none;
-    display: block;
-    counter-increment: linenumber;
+  &.line-numbers {
+    position: relative;
+    counter-reset: linenumber;
+
+    > code {
+      position: relative;
+      padding-left: 2.5em;
+    }
   }
 
-    .line-numbers-rows > span:before {
-      content: counter(linenumber);
-      color: #ddd;
+  .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: .5em;
+    letter-spacing: -1px;
+
+    @include user-select(none);
+
+    > span {
+      pointer-events: none;
       display: block;
-      padding-right: 0.8em;
-      text-align: right;
+      counter-increment: linenumber;
+
+      &:before {
+        content: counter(linenumber);
+        color: #ddd;
+        display: block;
+        padding-right: 0.8em;
+        text-align: right;
+      }
     }
+  }
+}
 
 } // $include-code

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

@@ -1,6 +1,6 @@
-// -------------
-// FORM 
-// -------------
+// ============
+// EDGE FORM 
+// ============
 
 $input-padding       : em(10px);
 $input-border-style  : 1px solid;
@@ -13,97 +13,98 @@ $input-border-focus  : $input-border-style $main-color;
 $prefix-bg-color     : $passive-color;
 
 @mixin input() {
-	[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;
-	}
+  [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;
+  }
 }
 
-// Style for generic input
+// -------------------------------
+// FORM INPUT
+// - Base style for text input
+// -------------------------------
 @mixin form-input($padding: $input-padding) {
-	width: 100%;
-	outline: none;
-	padding: $input-padding;
-	border: $input-border;
-	border-top: $input-border-style darken($input-border-color, 5%);
-
-	&:hover {
-		border: $input-border-hover;
-		@include box-shadow(inset 0 0 3px $input-border-color);
-	}
-
-	&:focus {
-		border: $input-border-focus;
-		@include box-shadow(inset 0 1px 2px rgba(black, 0.2));
-	}
+  width: 100%;
+  outline: none;
+  padding: $input-padding;
+  border: $input-border;
+  border-top: $input-border-style darken($input-border-color, 5%);
+
+  &:hover {
+    border: $input-border-hover;
+    @include box-shadow(inset 0 0 3px $input-border-color);
+  }
+
+  &:focus {
+    border: $input-border-focus;
+    @include box-shadow(inset 0 1px 2px rgba(black, 0.2));
+  }
 }
 
-// Style for label
+// ------------------------
+// FORM LABEL
+// - Base style for label
+// ------------------------
 @mixin form-label($padding: $input-padding, $bg-color: $prefix-bg-color) {
-	display: block;
-	line-height: normal;
-	padding-top: $padding;
-	padding-bottom: $padding;
-	border: $input-border-style transparent; // to make it vertically centered
-	
-	&.prefix,
-	&.postfix {
-		border: $input-border-style $bg-color;
-		border-top: $input-border-style darken( $input-border-color, 5% );
-		text-align: center;
-		color: contrast-color($bg-color, #333, white, 60%);
-		background: $bg-color;
-		overflow: hidden;
-	}
-
-	&.prefix {
-		border-right: none;
-	}
-
-	&.postfix {
-		border-left: none;
-	}
+  display: block;
+  line-height: normal;
+  padding-top: $padding;
+  padding-bottom: $padding;
+  border: $input-border-style transparent; // to make it vertically centered
+  
+  &.prefix,
+  &.postfix {
+    border: $input-border-style $bg-color;
+    border-top: $input-border-style darken( $input-border-color, 5% );
+    text-align: center;
+    color: contrast-color($bg-color, #333, white, 60%);
+    background: $bg-color;
+    overflow: hidden;
+  }
+
+  &.prefix {
+    border-right: none;
+  }
+
+  &.postfix {
+    border-left: none;
+  }
 }
 
-// Disable unnecessary default styling from browser
-@mixin form-disable-default() {
-	// Disable Chrome's datepicker
-	input::-webkit-calendar-picker-indicator{
-		display: none;
-	}
-
-	input[type="date"]::-webkit-input-placeholder{ 
-		visibility: hidden !important;
-	}
-}
-
-@if $include-form {
+@if $include-form and not $external-call {
 
 /* ---------------
 EDGE Form
 --------------- */
 
 @include input {
-	@include form-input();
+  @include form-input();
 }
 
 label {
-	@include form-label();
+  @include form-label();
 }
 
-@include form-disable-default();
+// Disable Chrome's datepicker
+input::-webkit-calendar-picker-indicator{
+  display: none;
+}
+
+input[type="date"]::-webkit-input-placeholder{ 
+  visibility: hidden !important;
+}
 
 } // $include-form

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

@@ -1,7 +1,7 @@
-// -----------------------------------------
-// GRID 
-//   Based on ZURB's Foundation 4
-// -----------------------------------------
+// =============
+// EDGE GRID
+// =============
+// Based on Foundation 4 by ZURB
 
 $row-max-width   : 1140px !default;
 $total-columns   : 12 !default;
@@ -14,7 +14,7 @@ $column-gutter   : 20px !default;
 
 // ---------------------------------
 // GRID ROW
-//   Create container for the grid
+// - Create container for the grid
 // ---------------------------------
 @mixin grid-row(
   $nest      : false,
@@ -86,6 +86,7 @@ $column-gutter   : 20px !default;
 
 // ----------------------------------------------
 // Calculate size for column created externally
+//-----------------------------------------------
 @mixin external-call-column(
   $column : 0,
   $total  : 0,
@@ -110,6 +111,7 @@ $column-gutter   : 20px !default;
 
 // ----------------------------------
 // Prevent duplicate in grid-column
+// ----------------------------------
 @mixin source-ordering-column(
   $push  : 0,
   $pull  : 0,
@@ -127,6 +129,7 @@ $column-gutter   : 20px !default;
 
 // --------------------------------------
 // Prevent duplicate in the base output
+// --------------------------------------
 @mixin source-ordering-output() {
   @for $i from 1 through $total-columns - 1 {
     .large-offset-#{$i} {
@@ -143,7 +146,7 @@ $column-gutter   : 20px !default;
 
 // ------------------------
 // GRID COLUMN
-//   Create the grid
+// - Create the grid
 // ------------------------
 @mixin grid-column(
   $large  : 0,
@@ -229,7 +232,7 @@ $column-gutter   : 20px !default;
   }
 
   // Create notes when on debug
-  @if $debug {
+  @if $debug and $external-call {
     $notes: "large-#{$large}";
     @if $large-offset > 0 {
       $notes: $notes + " large-offset-#{$large-offset}";
@@ -255,15 +258,15 @@ $column-gutter   : 20px !default;
     @if $center {
       $notes: $notes + " centered";
     }
-    edge-column: $notes;
+    h-column: $notes;
   }
 }
 
-@if $include-grid {
+@if $include-grid and not $external-call {
 
-/* ---------------
-EDGE Grid
---------------- */
+/* ------------
+  EDGE Grid
+------------ */
 
 // Normal row
 .row {