fix(forms): Normalized form styles

ionic-team · Jul 29, 2014 · 89999ca · 89999ca
1 parent 9088462
commit 89999ca
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 11 deletions.
diff --git a/js/angular/directive/list.js b/js/angular/directive/list.js
@@ -65,6 +65,7 @@
 *
 * @param {string=} delegate-handle The handle used to identify this list with
 * {@link ionic.service:$ionicListDelegate}.
+* @param type {string=} The type of list to use (for example, list-inset for an inset list)
 * @param show-delete {boolean=} Whether the delete buttons for the items in the list are
 * currently shown or hidden.
 * @param show-reorder {boolean=} Whether the reorder buttons for the items in the list are
@@ -83,7 +84,8 @@ function($animate, $timeout) {
     controller: '$ionicList',
     compile: function($element, $attr) {
       var listEl = jqLite('<div class="list">')
-      .append( $element.contents() );
+      .append( $element.contents() )
+      .addClass($attr.type);
       $element.append(listEl);
 
       return function($scope, $element, $attrs, ctrls) {

diff --git a/scss/_form.scss b/scss/_form.scss
@@ -49,7 +49,7 @@ textarea {
   @include align-items(center);
   position: relative;
   overflow: hidden;
-  padding: 6px 0 5px 8px;
+  padding: 6px 0 5px 16px;
 
   input {
     @include border-radius(0);
@@ -112,12 +112,11 @@ textarea {
 .input-label {
   @include flex(1, 0, 100px);
   display: table;
-  padding: 7px 10px 7px 3px;
+  padding: 7px 10px 7px 0px;
   max-width: 200px;
   width: 35%;
   color: $input-label-color;
-  font-weight: bold;
-  font-size: $font-size-base;
+  font-size: 16px;
 }
 
 .placeholder-icon {
@@ -137,15 +136,15 @@ textarea {
 
   .input-label, .icon {
     display: inline-block;
-    padding: 4px 0;
+    padding: 4px 0 0 0px;
     vertical-align: middle;
   }
 }
 
 .item-stacked-label input,
 .item-stacked-label textarea {
   @include border-radius(2px);
-  padding: 4px 8px 3px;
+  padding: 4px 8px 3px 0;
   border: none;
   background-color: $input-bg;
 }
@@ -196,6 +195,7 @@ 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;
@@ -218,6 +218,10 @@ input,
 textarea {
   width: 100%;
 }
+textarea {
+  padding-left: 0;
+  @include placeholder($input-color-placeholder, -3px);
+}
 
 // Reset height since textareas have rows
 textarea {

diff --git a/scss/_list.scss b/scss/_list.scss
@@ -56,7 +56,7 @@
 .card {
   padding-top: $item-border-width;
   padding-bottom: $item-border-width;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
 }
 
 .card .item,

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -171,7 +171,7 @@
 // Placeholder text
 // --------------------------------------------------
 
-@mixin placeholder($color: $input-color-placeholder) {
+@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
   &::-moz-placeholder { /* Firefox 19+ */
     color: $color;
   }
@@ -180,6 +180,8 @@
   }
   &::-webkit-input-placeholder {
     color: $color;
+    // Safari placeholder margin issue
+    text-indent: $text-indent;
   }
 }
 

diff --git a/scss/_range.scss b/scss/_range.scss
@@ -59,7 +59,7 @@ input[type="range"] {
 .range {
   @include display-flex();
   @include align-items(center);
-  padding: 2px 4px;
+  padding: 2px 11px;
 
   &.range-light {
     input { @include range-style($range-light-track-bg); }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -286,7 +286,7 @@ $tabs-striped-border-width: 4px;
 
 $item-font-size:                  16px !default;
 $item-border-width:               1px !default;
-$item-padding:                    15px !default;
+$item-padding:                    16px !default;
 
 $item-button-font-size:           18px !default;
 $item-button-line-height:         32px !default;

diff --git a/test/css/form-simple.html b/test/css/form-simple.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html ng-app="formTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Simple Forms</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.bundle.js"></script>
+  </head>
+  <body>
+    <ion-content>
+      <form>
+        <ion-list>
+          <label class="item item-input">
+            <input type="text" placeholder="First Name">
+          </label>
+          <label class="item item-input">
+            <textarea placeholder="Comments"></textarea>
+          </label>
+          <label class="item item-input">
+            <span class="input-label">Username</span>
+            <input type="text">
+          </label>
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">First Name</span>
+            <input type="text" placeholder="John">
+          </label>
+          <label class="item item-input item-floating-label">
+            <span class="input-label">First Name</span>
+            <input type="text" placeholder="First Name">
+          </label>
+          <li class="item item-toggle">
+          HTML5
+          <label class="toggle toggle-assertive">
+            <input type="checkbox">
+            <div class="track">
+              <div class="handle"></div>
+            </div>
+          </label>
+          </li>
+          <li class="item item-checkbox">
+            <label class="checkbox">
+              <input type="checkbox">
+            </label>
+            Flux Capacitor
+          </li>
+          <label class="item item-radio">
+            <input type="radio" name="group">
+            <div class="item-content">
+              Go
+            </div>
+            <i class="radio-icon ion-checkmark"></i>
+          </label>
+          <div class="range">
+            <i class="icon ion-volume-low"></i>
+            <input type="range" name="volume">
+            <i class="icon ion-volume-high"></i>
+          </div>
+          <label class="item item-input item-select">
+            <div class="input-label">
+              Lightsaber
+            </div>
+            <select>
+              <option>Blue</option>
+              <option selected>Green</option>
+              <option>Red</option>
+            </select>
+          </label>
+          <ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>
+          <ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
+          <ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
+          <ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>
+          <ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
+        </ion-list>
+        <ion-list type="list-inset">
+          <label class="item item-input">
+            <input type="text" placeholder="First Name">
+          </label>
+          <label class="item item-input">
+            <textarea placeholder="Comments"></textarea>
+          </label>
+          <label class="item item-input">
+            <span class="input-label">Username</span>
+            <input type="text">
+          </label>
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">First Name</span>
+            <input type="text" placeholder="John">
+          </label>
+          <label class="item item-input item-floating-label">
+            <span class="input-label">First Name</span>
+            <input type="text" placeholder="First Name">
+          </label>
+          <li class="item item-toggle">
+          HTML5
+          <label class="toggle toggle-assertive">
+            <input type="checkbox">
+            <div class="track">
+              <div class="handle"></div>
+            </div>
+          </label>
+          </li>
+          <li class="item item-checkbox">
+            <label class="checkbox">
+              <input type="checkbox">
+            </label>
+            Flux Capacitor
+          </li>
+          <label class="item item-radio">
+            <input type="radio" name="group">
+            <div class="item-content">
+              Go
+            </div>
+            <i class="radio-icon ion-checkmark"></i>
+          </label>
+          <div class="range">
+            <i class="icon ion-volume-low"></i>
+            <input type="range" name="volume">
+            <i class="icon ion-volume-high"></i>
+          </div>
+          <label class="item item-input item-select">
+            <div class="input-label">
+              Lightsaber
+            </div>
+            <select>
+              <option>Blue</option>
+              <option selected>Green</option>
+              <option>Red</option>
+            </select>
+          </label>
+          <ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>
+          <ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
+          <ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
+          <ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>
+          <ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
+        </ion-list>
+      </form>
+    </ion-content>
+    <div id="margin-line" style="position: fixed; left: 15px; height: 100%; background-color: red; width: 1px; z-index: 1000"></div>
+    <div id="margin-line" style="position: fixed; left: 26px; height: 100%; background-color: blue; width: 1px; z-index: 1000"></div>
+    <script>
+      angular.module('formTest', ['ionic']);
+    </script>
+  </body>
+</html>