Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 17797f0

Browse files
author
Robert Messerle
committed
refactor(input): refactors styles to use display: inline-block 
1 parent 6db3fa0 commit 17797f0

File tree

15 files changed

+99
-99
lines changed

15 files changed

+99
-99
lines changed

‎src/components/checkbox/checkbox.scss

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,23 @@ $checkbox-border-width: 2px !default;
66
$checkbox-text-margin: 10px !default;
77
$checkbox-top-left: 12px !default;
88

9+
.md-inline-form {
10+
md-checkbox {
11+
margin: 19px 0 18px;
12+
}
13+
}
14+
915
md-checkbox {
1016
box-sizing: border-box;
11-
display: block;
17+
display: inline-block;
1218
margin: $checkbox-margin;
1319
white-space: nowrap;
1420
cursor: pointer;
1521
outline: none;
1622
user-select: none;
17-
@include rtl(padding-left, $checkbox-width, 0);
18-
@include rtl(padding-right, 0, $checkbox-width);
23+
padding: 2px;
24+
@include rtl(padding-left, $checkbox-width, 2px);
25+
@include rtl(padding-right, 2px, $checkbox-width);
1926
position: relative;
2027
line-height: $checkbox-width + $checkbox-margin;
2128
min-width: $checkbox-width;

‎src/components/datepicker/datePicker.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,16 @@ $md-datepicker-open-animation-duration: 0.2s;
66
md-datepicker {
77
// Don't let linebreaks happen between the open icon-button and the input.
88
white-space: nowrap;
9+
overflow: hidden;
10+
}
11+
12+
.md-inline-form {
13+
md-datepicker {
14+
margin-top: 8px;
15+
}
916
}
1017

1118
// The calendar icon button used to open the calendar pane.
12-
// Need absurd specificty to override md-button.md-icon-button.
1319
.md-datepicker-button {
1420
display: inline-block;
1521
box-sizing: border-box;

‎src/components/input/demoBasicUsage/index.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-controller="DemoCtrl" layout="column" ng-cloak>
1+
<div ng-controller="DemoCtrl" layout="column" ng-cloak class="md-inline-form">
22

33
<md-content md-theme="docs-dark" layout-padding layout="row" layout-sm="column">
44
<md-input-container>
@@ -15,7 +15,7 @@
1515
<form name="userForm">
1616

1717
<div layout layout-sm="column">
18-
<md-input-container style="width:70%">
18+
<md-input-container flex>
1919
<label>Company (Disabled)</label>
2020
<input ng-model="user.company" disabled>
2121
</md-input-container>
@@ -34,11 +34,12 @@
3434
</md-input-container>
3535
</div>
3636

37-
<md-input-container flex>
37+
<md-input-container class="md-block">
3838
<label>Address</label>
3939
<input ng-model="user.address">
4040
</md-input-container>
41-
<md-input-container md-no-float>
41+
42+
<md-input-container md-no-float class="md-block">
4243
<input ng-model="user.address2" placeholder="Address 2">
4344
</md-input-container>
4445

@@ -74,7 +75,7 @@
7475
</md-input-container>
7576
</div>
7677

77-
<md-input-container flex>
78+
<md-input-container class="md-block">
7879
<label>Biography</label>
7980
<textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
8081
</md-input-container>

‎src/components/input/demoBasicUsage/style.css

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,2 @@
1-
md-datepicker {
2-
margin-top:18px;
3-
}
4-
5-
.md-datepicker-button {
6-
height: 36px;
7-
width: 36px;
8-
line-height: 36px;
9-
}
10-
11-
.md-datepicker-input-container {
12-
margin-left: 2px;
13-
}
1+
.md-datepicker-button { width: 36px; }
2+
.md-datepicker-input-container { margin-left: 2px; }

‎src/components/input/demoErrors/index.html

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
<div ng-controller="AppCtrl" layout="column" ng-cloak>
22

3-
<md-toolbar class="md-primary">
4-
<h1 class="md-toolbar-tools">
5-
Top Secret Project
6-
</h1>
7-
</md-toolbar>
8-
93
<md-content layout-padding>
104
<form name="projectForm">
11-
<md-input-container>
5+
<md-input-container class="md-block">
126
<label>Description</label>
137
<input md-maxlength="30" required name="description" ng-model="project.description">
148
<div ng-messages="projectForm.description.$error">
@@ -17,15 +11,15 @@ <h1 class="md-toolbar-tools">
1711
</div>
1812
</md-input-container>
1913

20-
<md-input-container>
14+
<md-input-container class="md-block">
2115
<label>Client Name</label>
2216
<input required name="clientName" ng-model="project.clientName">
2317
<div ng-messages="projectForm.clientName.$error">
2418
<div ng-message="required">This is required.</div>
2519
</div>
2620
</md-input-container>
2721

28-
<md-input-container>
22+
<md-input-container class="md-block">
2923
<label>Client Email</label>
3024
<input required type="email" name="clientEmail" ng-model="project.clientEmail"
3125
minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" />
@@ -37,7 +31,7 @@ <h1 class="md-toolbar-tools">
3731
</div>
3832
</md-input-container>
3933

40-
<md-input-container>
34+
<md-input-container class="md-block">
4135
<label>Hourly Rate (USD)</label>
4236
<input required type="number" step="any" name="rate" ng-model="project.rate" min="800"
4337
max="4999" ng-pattern="/^1234$/" md-maxlength="20" />

‎src/components/input/demoErrors/style.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
.inputErrorsApp {
2-
min-height:48px;
3-
}
1+
.inputErrorsApp { min-height:48px; }

‎src/components/input/demoIcons/index.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,36 @@
22

33
<br/>
44
<md-content layout-padding class="autoScroll">
5-
6-
<md-input-container class="md-icon-float">
5+
<md-input-container class="md-icon-float md-block">
76
<!-- Use floating label instead of placeholder -->
87
<label>Name</label>
98
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
109
<input ng-model="user.name" type="text">
1110
</md-input-container>
1211

13-
<md-input-container md-no-float>
12+
<md-input-container md-no-float class="md-block">
1413
<md-icon md-svg-src="img/icons/ic_phone_24px.svg"></md-icon>
1514
<input ng-model="user.phone" type="text" placeholder="Phone Number">
1615
</md-input-container>
1716

18-
<md-input-container >
17+
<md-input-container class="md-block">
1918
<!-- Use floating placeholder instead of label -->
2019
<md-icon md-svg-src="img/icons/ic_email_24px.svg" class="email"></md-icon>
2120
<input ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true">
2221
</md-input-container>
2322

24-
<md-input-container md-no-float>
23+
<md-input-container md-no-float class="md-block">
2524
<md-icon md-svg-src="img/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
2625
<input ng-model="user.address" type="text" placeholder="Address" >
2726
</md-input-container>
2827

29-
<md-input-container class="md-icon-float md-icon-right">
28+
<md-input-container class="md-icon-float md-icon-right md-block">
3029
<label>Donation Amount</label>
3130
<md-icon md-svg-src="img/icons/ic_card_giftcard_24px.svg"></md-icon>
32-
<input ng-model="user.donation" type="number" step="0.01">
33-
<md-icon md-svg-src="img/icons/ic_euro_24px.svg"></md-icon>
31+
<div layout="row">
32+
<input ng-model="user.donation" type="number" step="0.01" flex>
33+
<md-icon md-svg-src="img/icons/ic_euro_24px.svg" style="position: absolute; top: 4px;"></md-icon>
34+
</div>
3435
</md-input-container>
3536

3637
</md-content>

‎src/components/input/demoIcons/style.scss

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,5 @@
1-
.inputIconDemo {
2-
min-height:48px;
3-
}
4-
5-
6-
md-input-container:not(.md-input-invalid) > md-icon.email {
7-
color : green;
8-
}
9-
md-input-container:not(.md-input-invalid) > md-icon.name {
10-
color : dodgerblue;
11-
}
12-
1+
.inputIconDemo { min-height: 48px; }
2+
md-input-container:not(.md-input-invalid) > md-icon.email { color: green; }
3+
md-input-container:not(.md-input-invalid) > md-icon.name { color: dodgerblue; }
134
md-input-container.md-input-invalid > md-icon.email,
14-
md-input-container.md-input-invalid > md-icon.name,
15-
{
16-
color : red;
17-
}
18-
5+
md-input-container.md-input-invalid > md-icon.name { color: red; }

‎src/components/input/input.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ function mdInputContainerDirective($mdTheming, $parse) {
5656

5757
function postLink(scope, element, attr) {
5858
$mdTheming(element);
59+
if (element.find('md-icon').length) element.addClass('md-has-icon');
5960
}
6061

6162
function ContainerCtrl($scope, $element, $attrs) {

‎src/components/input/input.scss

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,21 @@ $input-error-height: 24px !default;
1717

1818
$icon-offset : 36px !default;
1919

20-
$icon-float-top: -16px !default;
2120
$icon-float-focused-top: -8px !default;
2221

2322
md-input-container {
24-
display: flex;
23+
display: inline-block;
2524
position: relative;
26-
flex-direction: column;
27-
2825
padding: $input-container-padding;
29-
padding-bottom: $input-container-padding + $input-error-height;
26+
margin: 18px 0;
27+
28+
&.md-block {
29+
display: block;
30+
}
31+
32+
&.md-has-icon {
33+
padding-left: $icon-offset;
34+
}
3035

3136
// When we have ng-messages, remove the input error height from our bottom padding, since the
3237
// ng-messages wrapper has a min-height of 1 error (so we don't adjust height as often; see below)
@@ -39,7 +44,6 @@ md-input-container {
3944
top: 5px;
4045
left: 2px;
4146
+ input {
42-
margin-left: $icon-offset;
4347
}
4448
}
4549

@@ -80,8 +84,8 @@ md-input-container {
8084
}
8185

8286
label {
83-
position: relative;
84-
top: -2px;
87+
position: absolute;
88+
bottom: 100%;
8589
}
8690

8791

@@ -103,9 +107,6 @@ md-input-container {
103107
opacity: 0;
104108
transition-property: opacity, transform;
105109
transform: translate3d(0, $input-placeholder-offset + $baseline-grid * 0.75, 0);
106-
&.md-static {
107-
position: static;
108-
}
109110
}
110111
&.md-input-focused .md-placeholder {
111112
opacity: 1;
@@ -151,7 +152,8 @@ md-input-container {
151152
border-style: solid; // Firefox fix
152153

153154
// Fix number inputs in Firefox to be full-width
154-
width: auto;
155+
width: 100%;
156+
box-sizing: border-box;
155157

156158
&:focus {
157159
outline: none;
@@ -272,35 +274,22 @@ md-input-container {
272274

273275
md-input-container.md-icon-float {
274276

275-
margin-top : $icon-float-top;
276277
transition : margin-top 0.5s $swift-ease-out-timing-function ;
277278

278279

279280
> label {
280281
pointer-events:none;
281282
position:absolute;
282-
margin-left: $icon-offset;
283283
}
284284

285285
> md-icon {
286-
top: 26px;
286+
top: 2px;
287287
left: 2px;
288-
+ input,
289-
+ textarea {
290-
margin-left: $icon-offset;
291-
}
292-
}
293-
294-
> input,
295-
> textarea {
296-
padding-top : $input-line-height - $input-container-padding;
297288
}
298289

299290
&.md-input-focused,
300291
&.md-input-has-value {
301292

302-
margin-top: $icon-float-focused-top;
303-
304293
label {
305294
transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
306295
transition: transform $swift-ease-out-timing-function 0.5s;

0 commit comments

Comments
 (0)