From b58cffab88bc80ae82025cd0373331aba0a00313 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 23 Jul 2015 13:55:26 -0500
Subject: [PATCH] reorg scss util files

---
 gulpfile.js                                   |  2 +-
 ionic/components/app/mixins/colors.scss       | 26 --------
 ionic/components/app/mixins/form.scss         | 16 -----
 ionic/components/app/mixins/typography.scss   | 25 --------
 ionic/components/app/overlay.scss             | 29 ---------
 ionic/components/button/button.scss           | 11 +++-
 .../button/extensions/material.scss           |  4 +-
 ionic/components/form/form.scss               |  9 ++-
 ionic/components/form/text-input.ts           |  2 +-
 ionic/ionic.scss                              | 12 +---
 .../app/mixins/util.scss => util/mixins.scss} | 61 ++++++++++++++++++-
 ionic/{components/app => util}/util.scss      |  4 --
 12 files changed, 78 insertions(+), 123 deletions(-)
 delete mode 100644 ionic/components/app/mixins/colors.scss
 delete mode 100644 ionic/components/app/mixins/form.scss
 delete mode 100644 ionic/components/app/mixins/typography.scss
 delete mode 100644 ionic/components/app/overlay.scss
 rename ionic/{components/app/mixins/util.scss => util/mixins.scss} (65%)
 rename ionic/{components/app => util}/util.scss (95%)

diff --git a/gulpfile.js b/gulpfile.js
index 8a9812be07..85815264d5 100644
--- a/gulpfile.js
+++ b/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
diff --git a/ionic/components/app/mixins/colors.scss b/ionic/components/app/mixins/colors.scss
deleted file mode 100644
index 0e2991167e..0000000000
--- a/ionic/components/app/mixins/colors.scss
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/app/mixins/form.scss b/ionic/components/app/mixins/form.scss
deleted file mode 100644
index ecbc7bfe62..0000000000
--- a/ionic/components/app/mixins/form.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/ionic/components/app/mixins/typography.scss b/ionic/components/app/mixins/typography.scss
deleted file mode 100644
index cac79e9358..0000000000
--- a/ionic/components/app/mixins/typography.scss
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/app/overlay.scss b/ionic/components/app/overlay.scss
deleted file mode 100644
index 54b28ccd41..0000000000
--- a/ionic/components/app/overlay.scss
+++ /dev/null
@@ -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%;
-}
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index d19a7893a2..a7b32e7c24 100644
--- a/ionic/components/button/button.scss
+++ b/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));
   }
diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss
index 0c2b5cd467..b0e84d825e 100644
--- a/ionic/components/button/extensions/material.scss
+++ b/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 {
diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss
index b0a7297580..b67ee786bf 100644
--- a/ionic/components/form/form.scss
+++ b/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,
diff --git a/ionic/components/form/text-input.ts b/ionic/components/form/text-input.ts
index 5fae28d999..e3ef3cacfe 100644
--- a/ionic/components/form/text-input.ts
+++ b/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'
   ],
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index 1d83d05da0..afdfc37896 100755
--- a/ionic/ionic.scss
+++ b/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
diff --git a/ionic/components/app/mixins/util.scss b/ionic/util/mixins.scss
similarity index 65%
rename from ionic/components/app/mixins/util.scss
rename to ionic/util/mixins.scss
index 492e99a2a5..a2c829a5f6 100644
--- a/ionic/components/app/mixins/util.scss
+++ b/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});
+}
diff --git a/ionic/components/app/util.scss b/ionic/util/util.scss
similarity index 95%
rename from ionic/components/app/util.scss
rename to ionic/util/util.scss
index 10ac93f4cd..9221a7fed4 100755
--- a/ionic/components/app/util.scss
+++ b/ionic/util/util.scss
@@ -1,7 +1,3 @@
-@mixin calc($property, $expression) {
-  #{$property}: -webkit-calc(#{$expression});
-  #{$property}: calc(#{$expression});
-}
 
 .no-transition {
   transition: none !important;