edge_framework 1.4.1 → 2.0.0.a

data/assets/sass/_edge.scss

@@ -1,7 +1,7 @@
 /* --------------------
 - EDGE Framework
 - edge.setyono.net
-- v1.4.1 (Furion)
+- v2.0.0.beta (Gondar)
 --------------------- */
 
 @import "edge/base";

data/assets/sass/edge/_base.scss

@@ -1,12 +1,6 @@
 @charset "UTF-8";
 @import "compass";
 
-// ------------------------------------
-// Override default Compass' variables
-// ------------------------------------
-$contrasted-dark-default  : #222;
-$contrasted-light-default : white;
-
 // Remove useless vendor prefix
 $support-for-original-webkit-gradients : false;
 $experimental-support-for-microsoft    : false;
@@ -23,18 +17,13 @@ $adaptive   : false !default;
 
 // Shouldn't be modified by user
 $user-mode   : false !default; // check whether the mixin call is coming from framework or user
-$is-in-media : false !default; // check if the code is within @media block
+$in-media    : false !default; // check whether the content is inside media query
 
 // Must be true
 $include-normalize  : true !default;
 $include-typography : true !default;
 $include-grid       : true !default;
-$include-form       : true !default;
-
-// Default is true
 $include-tile       : true !default;
-$include-visibility : true !default;
-$include-button     : true !default;
 
 // Default is false
 $include-animate    : false !default;
@@ -108,6 +97,7 @@ $body-line-height : 1.5 !default;
 // -------------------
 $mini-screen  : 480px !default;
 $small-screen : 767px !default;
+$medium-screen : 1000px !default;
 $large-screen  : 1440px !default;
 $retina-screen : 192dpi !default;
 
@@ -123,6 +113,9 @@ $retina-screen : 192dpi !default;
   @else if $size == small {
     @return $small-screen;
   }
+  @else if $size == medium {
+    @return $medium-screen;
+  }
   @else if $size == large {
     @return $large-screen;
   }
@@ -131,78 +124,62 @@ $retina-screen : 192dpi !default;
   }
 }
 
-// Function to be used in conjunction with @media
-@function below($named-size) {
-  $size: translateSize($named-size);
-  @if $size == retina {
-    @return "(-webkit-max-device-pixel-ratio: 2), (max-resolution: #{$size})";
-  }
-  @else {
-    @return "(max-width: #{$size})";
-  }
-}
+// Standalone mixin
 
-@function above($named-size) {
-  $size: translateSize($named-size) + 1px;
-  @if $named-size == retina {
-    @return "(-webkit-min-device-pixel-ratio: 2), (min-resolution: #{$size})";
-  }
-  @else {
-    @return "(min-width: #{$size})";
+@mixin below($named-size) {
+  @if $responsive {
+    $in-media: true !global;
+    $size: translateSize($named-size);
+
+    @if $named-size == retina {
+      @media only screen and (-webkit-max-device-pixel-ratio: 2), (max-resolution: $size) {
+        @content;
+      }
+    } 
+    @else {
+      @media only screen and (max-width: $size) { @content; }
+    }
+
+    $in-media: false !global;
   }
 }
 
-@function between($smaller-size, $larger-size) {
-  $smaller-size: translateSize($smaller-size);
-  $larger-size: translateSize($larger-size);
-  @return "(min-width: #{$smaller-size}) and (max-width: #{$larger-size})";
-}
+@mixin above($named-size) {
+  @if $responsive {
+    $in-media: true !global;
+    $size: translateSize($named-size) + 1px;
+
+    @if $named-size == retina {
+      @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: $size) {
+        @content;
+      }
+    }
+    @else {
+      @media only screen and (min-width: $size) { @content; }
+    }
 
-@function landscape() {
-  @return "(orientation: landscape)";
+    $in-media: false !global;
+  }
 }
 
-@function portrait() {
-  @return "(orientation: portrait)";
-}
+@mixin between($smaller-size, $larger-size) {
+  @if $responsive {
+    $in-media: true !global;
+    $smaller-size: translateSize($smaller-size);
+    $larger-size: translateSize($larger-size);
 
-// Standalone mixin
-@mixin below($named-size) {
-  $is-in-media: true;
-  $size: translateSize($named-size);
-  @if $named-size == retina {
-    @media only screen and (-webkit-max-device-pixel-ratio: 2), (max-resolution: $size) {
+    @media only screen and (min-width: $smaller-size) and (max-width: $larger-size) {
       @content;
     }
-  } 
-  @else {
-    @media only screen and (max-width: $size) { @content; }
-  }
-  $is-in-media: false;
-}
 
-@mixin above($named-size) {
-  $is-in-media: true;
-  $size: translateSize($named-size) + 1px;
-  @if $named-size == retina {
-    @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: $size) {
-      @content;
-    }
-  }
-  @else {
-    @media only screen and (min-width: $size) { @content; }
+    $in-media: false !global;
   }
-  $is-in-media: false;
 }
 
-@mixin between($smaller-size, $larger-size) {
-  $is-in-media: true;
-  $smaller-size: translateSize($smaller-size);
-  $larger-size: translateSize($larger-size);
-  @media only screen and (min-width: $smaller-size) and (max-width: $larger-size) {
+@mixin print {
+  @media only print {
     @content;
   }
-  $is-in-media: false;
 }
 
 // ----------------------------------------------
@@ -211,11 +188,11 @@ $retina-screen : 192dpi !default;
 // ----------------------------------------------
 @mixin clearfix {
   zoom:  1;
-  &:before, &:after {
+  &::before, &::after {
     content: " ";
     display: table;
   }
-  &:after {
+  &::after {
     clear: both;
   }
 }

data/assets/sass/edge/_components.scss

@@ -3,7 +3,6 @@
 
 @import "components/grid";
 @import "components/tile";
-@import "components/visibility";
 
 @import "components/button";
 @import "components/form";

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

@@ -2,84 +2,14 @@
 // EDGE BUTTON
 // =============
 
-$button-color: $main-color !default;
+// All the elements that need button styling
+@mixin button {
 
-// ---------------
-// BUTTON :hover
-// ---------------
-@mixin button-hover($color) {
-  &:hover {
-    background-color: lighten($color, 5%);
+  button,
+  .button,
+  input[type="submit"],
+  input[type="reset"] {
+    @content;
   }
-}
 
-// -----------------
-// BUTTON :active
-// -----------------
-@mixin button-active($color) {
-  &:active {
-    // Make it darker than hover state if background is light
-    @if is_light($color) {
-      background-color: darken($color, 10%);
-    }
-    // Darken background if background is dark
-    @else {
-      background-color: darken($color, 5%);
-    }
-  }
-}
-
-// ---------------
-// BUTTON :focus
-// ---------------
-@mixin button-focus() {
-  &:focus {
-    outline: none;
-  }
-}
-
-// -----------------
-// BUTTON
-//   Create button
-// -----------------
-@mixin button(
-  $color    : $button-color,
-  $for-base : false) {
-  
-  @if $for-base {
-    display: inline-block;
-    cursor: pointer;
-    position: relative;
-
-    border: 1px solid transparent;
-    padding: 10px 20px;
-    
-    font-weight: 700;
-  }
-  
-  background-color: $color;
-  color: white;
-  
-  @if $for-base {
-    @include border-radius($g-radius);
-    @include transition($g-transition);
-    @include button-focus();
-  }
-
-  @include button-hover($color);
-  @include button-active($color);
-}
-
-@if $include-button and not $user-mode {
-  
-/* ---------------
-EDGE Button
---------------- */
-button,
-.button,
-input[type="submit"],
-input[type="reset"] {
-  @include button($for-base: true);
-}
-
-} // $include-button
+}

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

@@ -2,109 +2,40 @@
 // EDGE FORM 
 // ============
 
-$input-padding       : 10px !default;
-$input-border-style  : 1px solid !default;
-$input-border-color  : $passive-color !default;
-
-$input-border        : $input-border-style $input-border-color !default;
-$input-border-hover  : $input-border-style darken($input-border-color, 10%) !default;
-$input-border-focus  : $input-border-style $main-color !default;
-
-$prefix-bg-color     : $passive-color !default;
-
-@mixin input() {
+@mixin input($style: false) {
+  
   [type="text"],
   [type="password"],
   [type="date"],
+  [type="time"],
   [type="datetime"],
-  [type="datetime-local"],
-  [type="month"],
-  [type="week"],
   [type="email"],
   [type="number"],
   [type="search"],
   [type="tel"],
-  [type="time"],
   [type="url"],
   select,
   textarea {
     @content;
-  }
-}
-
-// -------------------------------
-// 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));
+    @if $style {
+      display: block;
+      width: 100%;
+      outline: none;
+      padding: 10px;
+      border: 1px solid $passive-color;
+      border-top-color: darken($passive-color, 5%);
+
+      &:hover {
+        border-color: darken($passive-color, 10%);
+        @include box-shadow(inset 0 0 3px $passive-color);
+      }
+
+      &:focus {
+        border-color: $main-color;
+        @include box-shadow(inset 0 1px 2px rgba(black, .2) );
+      }
+    }
   }
-}
-
-// ------------------------
-// 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: $body-font-color;
-    background: $bg-color;
-    overflow: hidden;
-  }
-
-  &.prefix {
-    border-right: none;
-  }
-
-  &.postfix {
-    border-left: none;
-  }
-}
-
-@if $include-form and not $user-mode {
-
-/* ---------------
-EDGE Form
---------------- */
-
-@include input {
-  @include form-input();
-}
-
-label {
-  @include form-label();
-}
-
-// Disable Chrome's datepicker
-input::-webkit-calendar-picker-indicator{
-  display: none;
-}
-
-input[type="date"]::-webkit-input-placeholder{ 
-  visibility: hidden !important;
-}
 
-} // $include-form
+}