reorg scss util files

gulpfile.js

@@ -199,8 +199,8 @@ gulp.task('e2e', ['copy-scripts'], function() {
 
   var platforms = [
     'android',
-    'core',
     'ios',
+    //'core'
   ];
 
   // Get each test folder with gulp.src

ionic/components/app/mixins/colors.scss

@@ -1,26 +0,0 @@
-
-// Color Functions/Mixins
-// --------------------------------------------------
-
-
-@function get-color($color, $tone: base) {
-  @return map-get(map-get($colors, $color), $tone);
-}
-
-
-@function inverse-tone($color) {
-  // For a lighter colored "base" the darker colored "inverse"
-  // the inverse-tone will be the "light" tone
-
-  // For a darker colored "base" the lighter colored "inverse"
-  // the inverse-tone will be the "dark" tone
-
-  $base: map-get(map-get($colors, $color), base);
-  $inverse: map-get(map-get($colors, $color), inverse);
-  $light: map-get(map-get($colors, $color), light);
-  $dark: map-get(map-get($colors, $color), dark);
-
-  $lightness: lightness($base) - lightness($inverse);
-
-  @return if($lightness < 0, $dark, $light);
-}

ionic/components/app/mixins/form.scss

@@ -1,16 +0,0 @@
-// Placeholder text
-// --------------------------------------------------
-
-@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
-  &::-moz-placeholder { // Firefox 19+
-    color: $color;
-  }
-  &:-ms-input-placeholder {
-    color: $color;
-  }
-  &::-webkit-input-placeholder {
-    color: $color;
-    // Safari placeholder margin issue
-    text-indent: $text-indent;
-  }
-}

ionic/components/app/mixins/typography.scss

@@ -1,25 +0,0 @@
-
-// Font Mixins
-// --------------------------------------------------
-
-
-@mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
-  font-weight: $weight;
-  font-size: $size;
-  line-height: $line-height;
-}
-
-@mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
-  font-family: $serif-font-family;
-  @include font-shorthand($size, $weight, $line-height);
-}
-
-@mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
-  font-family: $sans-font-family;
-  @include font-shorthand($size, $weight, $line-height);
-}
-
-@mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
-  font-family: $mono-font-family;
-  @include font-shorthand($size, $weight, $line-height);
-}

ionic/components/app/overlay.scss

@@ -1,29 +0,0 @@
-
-// Overlay
-// --------------------------------------------------
-
-$overlay-background:        #000 !default;
-$overlay-opacity:           0.3 !default;
-
-
-.overlay-backdrop {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: $overlay-background;
-  opacity: $overlay-opacity;
-}
-
-.overlay-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}

ionic/components/button/button.scss

@@ -253,8 +253,8 @@ a[button] {
 
 @mixin button-clear($fg-color) {
   &[clear] {
-    background: none;
     color: $fg-color;
+    background: none;
   }
 }
 
@@ -279,10 +279,17 @@ a[button] {
 
   button[#{$color}],
   [button][#{$color}] {
+
+    @if lightness(get-color($color, base)) > 90 {
+      $fg-color: get-color($color, inverse);
+    } @else {
+      $fg-color: get-color($color, base);
+    }
+
     @include button-default(get-color($color, base),
                             get-color($color, inverse));
 
-    @include button-clear(get-color($color, base));
+    @include button-clear($fg-color);
 
     @include button-outline(get-color($color, light));
   }

ionic/components/button/extensions/material.scss

@@ -93,9 +93,9 @@ $button-material-border-radius:            3px !default;
       &[clear] {
         box-shadow: none;
 
-        @if lightness(get-color($color, base)) > 90 {
+/*        @if lightness(get-color($color, base)) > 90 {
           color: get-color($color, inverse);
-        }
+        }*/
 
         &:hover,
         &.hover {

ionic/components/form/form.scss

@@ -1,8 +1,6 @@
-/**
- * Forms
- * --------------------------------------------------
- */
 
+// Forms
+// --------------------------------------------------
 
 $input-label-color: get-color(dark, base);
 $input-color: $input-label-color;
@@ -14,6 +12,7 @@ $input-height-base: 5rem;
 $input-height-large: $input-height-base + 0.3rem;
 $input-height-small: 1.2rem;
 
+
 // Make all forms have space below them
 form {
   margin: 0 0 $line-height-base;
@@ -24,7 +23,7 @@ label,
 input,
 select,
 textarea {
-  @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
+  // @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
 }
 input,
 select,

ionic/components/form/text-input.ts

@@ -26,7 +26,7 @@ export class Input extends IonInputItem {
 
 
 @Directive({
-  selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url]',
+  selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel]',
   property: [
     'tabIndex'
   ],

ionic/ionic.scss

@@ -1,24 +1,16 @@
 @charset "UTF-8";
 
 
-// Mixins
-@import
-  "components/app/mixins/form",
-  "components/app/mixins/typography",
-  "components/app/mixins/util";
-
-
 // Globals
 @import
+  "util/mixins",
   "components/app/z-index",
   "components/app/flex-order",
   "components/app/normalize",
   "components/app/colors",
-  "components/app/mixins/colors",
-  "components/app/util",
   "components/app/structure",
   "components/app/typography",
-  "components/app/overlay";
+  "util/util";
 
 
 // Core Components

ionic/util/mixins.scss

@@ -1,7 +1,31 @@
 
-// Util Mixins/Functions
+// Color Mixins/Functions
+// --------------------------------------------------
 
-// Appearance (not a CSS standard, does not autoprefix)
+@function get-color($color, $tone: base) {
+  @return map-get(map-get($colors, $color), $tone);
+}
+
+@function inverse-tone($color) {
+  // For a lighter colored "base" the darker colored "inverse"
+  // the inverse-tone will be the "light" tone
+
+  // For a darker colored "base" the lighter colored "inverse"
+  // the inverse-tone will be the "dark" tone
+
+  $base: map-get(map-get($colors, $color), base);
+  $inverse: map-get(map-get($colors, $color), inverse);
+  $light: map-get(map-get($colors, $color), light);
+  $dark: map-get(map-get($colors, $color), dark);
+
+  $lightness: lightness($base) - lightness($inverse);
+
+  @return if($lightness < 0, $dark, $light);
+}
+
+
+
+// Appearance
 // --------------------------------------------------
 
 @mixin appearance($val) {
@@ -10,6 +34,26 @@
 }
 
 
+
+// Input Placeholder
+// --------------------------------------------------
+
+@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
+  &::-moz-placeholder { // Firefox 19+
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &::-webkit-input-placeholder {
+    color: $color;
+    // Safari placeholder margin issue
+    text-indent: $text-indent;
+  }
+}
+
+
+
 // String Replace Function
 // --------------------------------------------------
 
@@ -24,6 +68,7 @@
 }
 
 
+
 // URL Encode Function
 // --------------------------------------------------
 
@@ -33,6 +78,7 @@
 }
 
 
+
 // SVG Background Image Mixin
 // --------------------------------------------------
 
@@ -42,6 +88,7 @@
 }
 
 
+
 // Hairline
 // --------------------------------------------------
 
@@ -110,3 +157,13 @@
   }
 
 }
+
+
+
+// calc()
+// --------------------------------------------------
+
+@mixin calc($property, $expression) {
+  #{$property}: -webkit-calc(#{$expression});
+  #{$property}: calc(#{$expression});
+}

ionic/util/util.scss

@@ -1,7 +1,3 @@
-@mixin calc($property, $expression) {
-  #{$property}: -webkit-calc(#{$expression});
-  #{$property}: calc(#{$expression});
-}
 
 .no-transition {
   transition: none !important;