From 1e1b2481b30c26f97761a2daaafd6397bb7ec2c0 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 24 Apr 2015 13:32:32 -0500
Subject: [PATCH] Some form stuff

---
 src/components/app/colors.scss            |   2 +
 src/components/app/mixins/form.scss       |  16 ++
 src/components/app/mixins/typography.scss |  34 +++
 src/components/app/test/barkpark/main.js  |   2 +-
 src/components/app/typography.scss        |   6 +-
 src/components/app/util.scss              |  13 +
 src/components/form/form.js               |   0
 src/components/form/form.scss             | 309 ++++++++++++++++++++++
 src/components/form/input.js              |  17 ++
 src/components/form/input.scss            |   0
 src/config/component.js                   |   2 -
 src/ionic.scss                            |   4 +-
 12 files changed, 400 insertions(+), 5 deletions(-)
 create mode 100644 src/components/app/mixins/form.scss
 create mode 100644 src/components/app/mixins/typography.scss
 create mode 100644 src/components/form/form.js
 create mode 100644 src/components/form/form.scss
 create mode 100644 src/components/form/input.js
 create mode 100644 src/components/form/input.scss

diff --git a/src/components/app/colors.scss b/src/components/app/colors.scss
index b6066bee0f..267188e42d 100644
--- a/src/components/app/colors.scss
+++ b/src/components/app/colors.scss
@@ -3,6 +3,8 @@
 // --------------------------------------------------
 // Color values and names can be changed here
 // inverse: A color that looks good as a foreground to the base
+//
+// Use get-color($style, base/inverse) to grab
 
 
 $colors: (
diff --git a/src/components/app/mixins/form.scss b/src/components/app/mixins/form.scss
new file mode 100644
index 0000000000..ecbc7bfe62
--- /dev/null
+++ b/src/components/app/mixins/form.scss
@@ -0,0 +1,16 @@
+// 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/src/components/app/mixins/typography.scss b/src/components/app/mixins/typography.scss
new file mode 100644
index 0000000000..35f04a5dd1
--- /dev/null
+++ b/src/components/app/mixins/typography.scss
@@ -0,0 +1,34 @@
+// Font Mixins
+// --------------------------------------------------
+
+@mixin font-family-serif() {
+  font-family: $serif-font-family;
+}
+@mixin font-family-sans-serif() {
+  font-family: $sans-font-family;
+}
+@mixin font-family-monospace() {
+  font-family: $mono-font-family;
+}
+@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) {
+  @include font-family-serif();
+  @include font-shorthand($size, $weight, $line-height);
+}
+@mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
+  @include font-family-sans-serif();
+  @include font-shorthand($size, $weight, $line-height);
+}
+@mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
+  @include font-family-monospace();
+  @include font-shorthand($size, $weight, $line-height);
+}
+@mixin font-smoothing($font-smoothing) {
+  -webkit-font-smoothing: $font-smoothing;
+          font-smoothing: $font-smoothing;
+}
+
diff --git a/src/components/app/test/barkpark/main.js b/src/components/app/test/barkpark/main.js
index 70cd41ea17..0da062cbc2 100644
--- a/src/components/app/test/barkpark/main.js
+++ b/src/components/app/test/barkpark/main.js
@@ -4,7 +4,7 @@ import {FormBuilder, Validators, FormDirectives, CongrolGroup} from 'angular2/fo
 
 import {Log} from 'ionic2/util'
 
-import {NavViewport, View, Button} from 'ionic2/ionic2'
+import {NavViewport, View, Button, Input} from 'ionic2/ionic2'
 
 @Component({
   selector: 'login-page'
diff --git a/src/components/app/typography.scss b/src/components/app/typography.scss
index 16046fbced..e90b5b58a3 100644
--- a/src/components/app/typography.scss
+++ b/src/components/app/typography.scss
@@ -10,9 +10,13 @@ $font-family-light-sans-serif:    "HelveticaNeue-Light", "Roboto-Light", sans-se
 $font-family-base:                $font-family-sans-serif !default;
 $font-size-root:                  62.5% !default;
 $font-size-base:                  1.4rem !default; // 1.4rem == 14px
+$font-size-small:                 1rem !default;
 
 $line-height-base:                1.4 !default;
-$line-height-computed:            floor($font-size-base * $line-height-base) !default; // ~20px
+//$line-height-computed:            floor($font-size-base * $line-height-base) !default; // ~20px
+$line-height-computed: 3rem;
+$line-height-large:               1.33 !default;
+$line-height-small:               1.5 !default;
 
 $headings-font-family:            $font-family-base !default;
 $headings-font-weight:            500 !default;
diff --git a/src/components/app/util.scss b/src/components/app/util.scss
index 67af9da0d0..03ac5a4f79 100644
--- a/src/components/app/util.scss
+++ b/src/components/app/util.scss
@@ -7,6 +7,19 @@
   display: none;
 }
 
+$padding-base-vertical:           6px !default;
+$padding-base-horizontal:         12px !default;
+
+$padding-large-vertical:          10px !default;
+$padding-large-horizontal:        16px !default;
+
+$padding-small-vertical:          5px !default;
+$padding-small-horizontal:        10px !default;
+
+$border-radius-base:              4px !default;
+$border-radius-large:             6px !default;
+$border-radius-small:             3px !default;
+
 
 // Content Padding
 // --------------------------------------------------
diff --git a/src/components/form/form.js b/src/components/form/form.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/form/form.scss b/src/components/form/form.scss
new file mode 100644
index 0000000000..cc5e3c83cb
--- /dev/null
+++ b/src/components/form/form.scss
@@ -0,0 +1,309 @@
+/**
+ * Forms
+ * --------------------------------------------------
+ */
+
+
+$input-label-color: get-color(dark, base);
+$input-color: $input-label-color;
+$input-bg: get-color(light, base);
+$input-bg-disabled: darken(get-color(stable, base), 10%);
+$input-color-placeholder: darken(get-color(stable, base), 20%);
+
+$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;
+}
+
+// Set font for forms
+label,
+input,
+button,
+select,
+textarea {
+  @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+  font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
+}
+
+
+// Input List
+// -------------------------------
+
+.item-input {
+  @include flex-display();
+  @include flex-align-items(center);
+  position: relative;
+  overflow: hidden;
+  padding: 6px 0 5px 16px;
+
+  input {
+    border-radius: 0;
+    @include flex(1, 220px);
+    @include appearance(none);
+    margin: 0;
+    padding-right: 24px;
+    background-color: transparent;
+  }
+
+  .button .icon {
+    @include flex(0, 0, 24px);
+    position: static;
+    display: inline-block;
+    height: auto;
+    text-align: center;
+    font-size: 16px;
+  }
+
+  .button-bar {
+    border-radius: 0;
+    @include flex(1, 0, 220px);
+    @include appearance(none);
+  }
+
+  .icon {
+    min-width: 14px;
+  }
+}
+
+.item-input-inset {
+  @include flex-display();
+  @include flex-align-items(center);
+  position: relative;
+  overflow: hidden;
+  padding: ($item-padding / 3) * 2;
+}
+
+.item-input-wrapper {
+  @include flex-display();
+  @include flex(1, 0);
+  @include flex-align-items(center);
+  border-radius: 4px;
+  padding-right: 8px;
+  padding-left: 8px;
+  background: #eee;
+}
+
+.item-input-inset .item-input-wrapper input {
+  padding-left: 4px;
+  height: 29px;
+  background: transparent;
+  line-height: 18px;
+}
+
+.item-input-wrapper ~ .button {
+  margin-left: ($item-padding / 3) * 2;
+}
+
+.input-label {
+  display: table;
+  padding: 7px 10px 7px 0px;
+  max-width: 200px;
+  width: 35%;
+  color: $input-label-color;
+  font-size: 16px;
+}
+
+.placeholder-icon {
+  color: #aaa;
+  &:first-child {
+    padding-right: 6px;
+  }
+  &:last-child {
+    padding-left: 6px;
+  }
+}
+
+.item-stacked-label {
+  display: block;
+  background-color: transparent;
+  box-shadow: none;
+
+  .input-label, .icon {
+    display: inline-block;
+    padding: 4px 0 0 0px;
+    vertical-align: middle;
+  }
+}
+
+.item-stacked-label input,
+.item-stacked-label textarea {
+  border-radius: 2px;
+  padding: 4px 8px 3px 0;
+  border: none;
+  background-color: $input-bg;
+}
+.item-stacked-label input {
+  overflow: hidden;
+  height: $line-height-computed + $font-size-base + 0.5rem;
+}
+
+.item-floating-label {
+  display: block;
+  background-color: transparent;
+  box-shadow: none;
+
+  .input-label {
+    position: relative;
+    padding: 5px 0 0 0;
+    opacity: 0;
+    top: 10px;
+    @include transition(opacity .15s ease-in, top .2s linear);
+
+    &.has-input {
+      opacity: 1;
+      top: 0;
+      @include transition(opacity .15s ease-in, top .2s linear);
+    }
+  }
+}
+
+
+// Form Controls
+// -------------------------------
+
+// Shared size and type resets
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
+  display: block;
+  padding-top: 2px;
+  padding-left: 0;
+  height: $line-height-computed + $font-size-base;
+  color: $input-color;
+  vertical-align: middle;
+  font-size: $font-size-base;
+  line-height: $font-size-base + 2;
+}
+
+.platform-ios,
+.platform-android {
+  input[type="datetime-local"],
+  input[type="date"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"] {
+    padding-top: 8px;
+  }
+}
+
+.item-input {
+  input,
+  textarea {
+    width: 100%;
+  }
+}
+
+textarea {
+  padding-left: 0;
+  @include placeholder($input-color-placeholder, -3px);
+}
+
+// Reset height since textareas have rows
+textarea {
+  height: auto;
+}
+
+// Everything else
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
+  border: 0;
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 0;
+  line-height: normal;
+}
+
+// Reset width of input images, buttons, radios, checkboxes
+.item-input {
+  input[type="file"],
+  input[type="image"],
+  input[type="submit"],
+  input[type="reset"],
+  input[type="button"],
+  input[type="radio"],
+  input[type="checkbox"] {
+    width: auto; // Override of generic input selector
+  }
+}
+
+// Set the height of file to match text inputs
+input[type="file"] {
+  line-height: $input-height-base;
+}
+
+// Text input classes to hide text caret during scroll
+.previous-input-focus,
+.cloned-text-input + input,
+.cloned-text-input + textarea {
+  position: absolute !important;
+  left: -9999px;
+  width: 200px;
+}
+
+
+// Placeholder
+// -------------------------------
+input,
+textarea {
+  @include placeholder();
+}
+
+
+// DISABLED STATE
+// -------------------------------
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly]:not(.cloned-text-input),
+textarea[readonly]:not(.cloned-text-input),
+select[readonly] {
+  background-color: $input-bg-disabled;
+  cursor: not-allowed;
+}
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
+}
+
diff --git a/src/components/form/input.js b/src/components/form/input.js
new file mode 100644
index 0000000000..bf90111157
--- /dev/null
+++ b/src/components/form/input.js
@@ -0,0 +1,17 @@
+import {NgElement, Decorator} from 'angular2/angular2'
+import {IonicComponent} from 'ionic2/config/component'
+
+@Decorator({
+  selector: 'ion-input'
+})
+export class Input {
+  constructor(
+    @NgElement() ngElement:NgElement
+  ) {
+    this.domElement = ngElement.domElement
+    //this.config = Button.config.invoke(this)
+    console.log('INPUT');
+  }
+}
+new IonicComponent(Input, {
+})
diff --git a/src/components/form/input.scss b/src/components/form/input.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/config/component.js b/src/config/component.js
index 09afa26917..84d5ec36ee 100644
--- a/src/config/component.js
+++ b/src/config/component.js
@@ -18,8 +18,6 @@ export class IonicComponent {
     ComponentClass.config = this
     this.componentCssName = util.pascalCaseToDashCase(ComponentClass.name)
 
-    console.log(propClasses);
-
     this.bind = bind || (bind = {})
     for (let attrName in bind) {
       let binding = bind[attrName]
diff --git a/src/ionic.scss b/src/ionic.scss
index 185f34f8f0..b2626eedfe 100644
--- a/src/ionic.scss
+++ b/src/ionic.scss
@@ -4,8 +4,10 @@
 // Mixins
 @import
   "components/app/mixins/flex",
+  "components/app/mixins/form",
   "components/app/mixins/transform",
   "components/app/mixins/transition",
+  "components/app/mixins/typography",
   "components/app/mixins/util";
 
 
@@ -34,7 +36,7 @@
   "components/checkbox/checkbox",
   "components/content/content",
   "components/item/item",
-  "components/input/input",
+  "components/form/form",
   "components/layout/layout",
   "components/list/list",
   "components/modal/modal",