Skip to content

Commit 89999ca

Browse files
mlynchmlynch
committed
fix(forms): Normalized form styles
1 parent 9088462 commit 89999ca

File tree

7 files changed

+166
-11
lines changed

7 files changed

+166
-11
lines changed

Diff for: ‎js/angular/directive/list.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
*
6666
* @param {string=} delegate-handle The handle used to identify this list with
6767
* {@link ionic.service:$ionicListDelegate}.
68+
* @param type {string=} The type of list to use (for example, list-inset for an inset list)
6869
* @param show-delete {boolean=} Whether the delete buttons for the items in the list are
6970
* currently shown or hidden.
7071
* @param show-reorder {boolean=} Whether the reorder buttons for the items in the list are
@@ -83,7 +84,8 @@ function($animate, $timeout) {
8384
controller: '$ionicList',
8485
compile: function($element, $attr) {
8586
var listEl = jqLite('<div class="list">')
86-
.append( $element.contents() );
87+
.append( $element.contents() )
88+
.addClass($attr.type);
8789
$element.append(listEl);
8890

8991
return function($scope, $element, $attrs, ctrls) {

Diff for: ‎scss/_form.scss

+10-6
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ textarea {
4949
@include align-items(center);
5050
position: relative;
5151
overflow: hidden;
52-
padding: 6px 0 5px 8px;
52+
padding: 6px 0 5px 16px;
5353

5454
input {
5555
@include border-radius(0);
@@ -112,12 +112,11 @@ textarea {
112112
.input-label {
113113
@include flex(1, 0, 100px);
114114
display: table;
115-
padding: 7px 10px 7px 3px;
115+
padding: 7px 10px 7px 0px;
116116
max-width: 200px;
117117
width: 35%;
118118
color: $input-label-color;
119-
font-weight: bold;
120-
font-size: $font-size-base;
119+
font-size: 16px;
121120
}
122121

123122
.placeholder-icon {
@@ -137,15 +136,15 @@ textarea {
137136

138137
.input-label, .icon {
139138
display: inline-block;
140-
padding: 4px 0;
139+
padding: 4px 0 0 0px;
141140
vertical-align: middle;
142141
}
143142
}
144143

145144
.item-stacked-label input,
146145
.item-stacked-label textarea {
147146
@include border-radius(2px);
148-
padding: 4px 8px 3px;
147+
padding: 4px 8px 3px 0;
149148
border: none;
150149
background-color: $input-bg;
151150
}
@@ -196,6 +195,7 @@ input[type="tel"],
196195
input[type="color"] {
197196
display: block;
198197
padding-top: 2px;
198+
padding-left: 0;
199199
height: $line-height-computed + $font-size-base;
200200
color: $input-color;
201201
vertical-align: middle;
@@ -218,6 +218,10 @@ input,
218218
textarea {
219219
width: 100%;
220220
}
221+
textarea {
222+
padding-left: 0;
223+
@include placeholder($input-color-placeholder, -3px);
224+
}
221225

222226
// Reset height since textareas have rows
223227
textarea {

Diff for: ‎scss/_list.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
.card {
5757
padding-top: $item-border-width;
5858
padding-bottom: $item-border-width;
59-
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
59+
box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
6060
}
6161

6262
.card .item,

Diff for: ‎scss/_mixins.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@
171171
// Placeholder text
172172
// --------------------------------------------------
173173

174-
@mixin placeholder($color: $input-color-placeholder) {
174+
@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
175175
&::-moz-placeholder { /* Firefox 19+ */
176176
color: $color;
177177
}
@@ -180,6 +180,8 @@
180180
}
181181
&::-webkit-input-placeholder {
182182
color: $color;
183+
// Safari placeholder margin issue
184+
text-indent: $text-indent;
183185
}
184186
}
185187

Diff for: ‎scss/_range.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ input[type="range"] {
5959
.range {
6060
@include display-flex();
6161
@include align-items(center);
62-
padding: 2px 4px;
62+
padding: 2px 11px;
6363

6464
&.range-light {
6565
input { @include range-style($range-light-track-bg); }

Diff for: ‎scss/_variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ $tabs-striped-border-width: 4px;
286286

287287
$item-font-size: 16px !default;
288288
$item-border-width: 1px !default;
289-
$item-padding: 15px !default;
289+
$item-padding: 16px !default;
290290

291291
$item-button-font-size: 18px !default;
292292
$item-button-line-height: 32px !default;

Diff for: ‎test/css/form-simple.html

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html ng-app="formTest">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Simple Forms</title>
6+
7+
<!-- Sets initial viewport load and disables zooming -->
8+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
9+
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
10+
<script src="../../../../dist/js/ionic.bundle.js"></script>
11+
</head>
12+
<body>
13+
<ion-content>
14+
<form>
15+
<ion-list>
16+
<label class="item item-input">
17+
<input type="text" placeholder="First Name">
18+
</label>
19+
<label class="item item-input">
20+
<textarea placeholder="Comments"></textarea>
21+
</label>
22+
<label class="item item-input">
23+
<span class="input-label">Username</span>
24+
<input type="text">
25+
</label>
26+
<label class="item item-input item-stacked-label">
27+
<span class="input-label">First Name</span>
28+
<input type="text" placeholder="John">
29+
</label>
30+
<label class="item item-input item-floating-label">
31+
<span class="input-label">First Name</span>
32+
<input type="text" placeholder="First Name">
33+
</label>
34+
<li class="item item-toggle">
35+
HTML5
36+
<label class="toggle toggle-assertive">
37+
<input type="checkbox">
38+
<div class="track">
39+
<div class="handle"></div>
40+
</div>
41+
</label>
42+
</li>
43+
<li class="item item-checkbox">
44+
<label class="checkbox">
45+
<input type="checkbox">
46+
</label>
47+
Flux Capacitor
48+
</li>
49+
<label class="item item-radio">
50+
<input type="radio" name="group">
51+
<div class="item-content">
52+
Go
53+
</div>
54+
<i class="radio-icon ion-checkmark"></i>
55+
</label>
56+
<div class="range">
57+
<i class="icon ion-volume-low"></i>
58+
<input type="range" name="volume">
59+
<i class="icon ion-volume-high"></i>
60+
</div>
61+
<label class="item item-input item-select">
62+
<div class="input-label">
63+
Lightsaber
64+
</div>
65+
<select>
66+
<option>Blue</option>
67+
<option selected>Green</option>
68+
<option>Red</option>
69+
</select>
70+
</label>
71+
<ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>
72+
<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
73+
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
74+
<ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>
75+
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
76+
</ion-list>
77+
<ion-list type="list-inset">
78+
<label class="item item-input">
79+
<input type="text" placeholder="First Name">
80+
</label>
81+
<label class="item item-input">
82+
<textarea placeholder="Comments"></textarea>
83+
</label>
84+
<label class="item item-input">
85+
<span class="input-label">Username</span>
86+
<input type="text">
87+
</label>
88+
<label class="item item-input item-stacked-label">
89+
<span class="input-label">First Name</span>
90+
<input type="text" placeholder="John">
91+
</label>
92+
<label class="item item-input item-floating-label">
93+
<span class="input-label">First Name</span>
94+
<input type="text" placeholder="First Name">
95+
</label>
96+
<li class="item item-toggle">
97+
HTML5
98+
<label class="toggle toggle-assertive">
99+
<input type="checkbox">
100+
<div class="track">
101+
<div class="handle"></div>
102+
</div>
103+
</label>
104+
</li>
105+
<li class="item item-checkbox">
106+
<label class="checkbox">
107+
<input type="checkbox">
108+
</label>
109+
Flux Capacitor
110+
</li>
111+
<label class="item item-radio">
112+
<input type="radio" name="group">
113+
<div class="item-content">
114+
Go
115+
</div>
116+
<i class="radio-icon ion-checkmark"></i>
117+
</label>
118+
<div class="range">
119+
<i class="icon ion-volume-low"></i>
120+
<input type="range" name="volume">
121+
<i class="icon ion-volume-high"></i>
122+
</div>
123+
<label class="item item-input item-select">
124+
<div class="input-label">
125+
Lightsaber
126+
</div>
127+
<select>
128+
<option>Blue</option>
129+
<option selected>Green</option>
130+
<option>Red</option>
131+
</select>
132+
</label>
133+
<ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>
134+
<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
135+
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
136+
<ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>
137+
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
138+
</ion-list>
139+
</form>
140+
</ion-content>
141+
<div id="margin-line" style="position: fixed; left: 15px; height: 100%; background-color: red; width: 1px; z-index: 1000"></div>
142+
<div id="margin-line" style="position: fixed; left: 26px; height: 100%; background-color: blue; width: 1px; z-index: 1000"></div>
143+
<script>
144+
angular.module('formTest', ['ionic']);
145+
</script>
146+
</body>
147+
</html>

0 commit comments

Comments
 (0)