diff --git a/js/angular/directive/list.js b/js/angular/directive/list.js index e37a97a7526..dbc24dd4ab2 100644 --- 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('
') - .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 index d3ebb938289..ce735af115c 100644 --- 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,7 +136,7 @@ textarea { .input-label, .icon { display: inline-block; - padding: 4px 0; + padding: 4px 0 0 0px; vertical-align: middle; } } @@ -145,7 +144,7 @@ textarea { .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 index 27b9a19e8d4..d9366b98e10 100644 --- 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 index f33e496505e..1b297cbb5d8 100644 --- 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 index c6b59c22eef..92f1520ea06 100644 --- 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 index d04a407fe74..bcf4e3df844 100644 --- 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 new file mode 100644 index 00000000000..24832990fac --- /dev/null +++ b/test/css/form-simple.html @@ -0,0 +1,147 @@ + + + + + Simple Forms + + + + + + + + +
+ + + + + + +
  • + HTML5 + +
  • +
  • + + Flux Capacitor +
  • + +
    + + + +
    + + Checkbox Label + Choose A + Choose B + Choose C + Airplane Mode +
    + + + + + + +
  • + HTML5 + +
  • +
  • + + Flux Capacitor +
  • + +
    + + + +
    + + Checkbox Label + Choose A + Choose B + Choose C + Airplane Mode +
    +
    +
    +
    +
    + + +