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

Commit 63eeb47

Browse files
ThomasBurlesonThomasBurleson
committed
fix(textfields): match float-label (light theme) specifications
1 parent 4f7769a commit 63eeb47

7 files changed

Lines changed: 241 additions & 70 deletions

File tree

‎src/components/textField/_textField.scss‎

Lines changed: 78 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ form {
33

44
label {
55
display: block;
6-
font-size: $input-font-size;
6+
font-size: $tff-font-size;
77
}
88

99
textarea,
@@ -23,61 +23,113 @@ input[type="tel"],
2323
input[type="color"] {
2424
display: block;
2525
border-width: 0 0 1px 0;
26-
line-height: $input-line-height;
27-
font-size: $input-font-size;
26+
line-height: $tff-line-height;
27+
font-size: $tff-font-size;
2828

2929
&:focus {
3030
outline: 0;
3131
}
3232
}
3333

3434
input, textarea {
35-
@include input-placeholder($input-placeholder-color);
35+
@include input-placeholder($tff-placeholder-color);
3636
background: none;
3737
}
3838

39+
// Light-Theme
3940
material-input-group,
4041
.material-input-group {
41-
margin: $input-group-margin;
42+
margin: $tff-margin;
4243

4344
position: relative;
45+
display: block;
4446

45-
input, textarea {
46-
@include transition($input-label-transition);
47+
label {
48+
z-index: 1;
49+
pointer-events: none;
50+
-webkit-font-smoothing: antialiased;
4751

48-
color: $input-color;
52+
&:hover {
53+
cursor: text;
54+
}
4955
}
5056

51-
&.material-input-group-inverted {
52-
input {
53-
color: $input-color-inverted;
57+
@include text-hint( $tff-hint-normal, large, $tff-transition );
58+
@include text-field( $tff-input-normal, $tff-line-normal, $tff-transition );
59+
60+
61+
&.material-input-focused {
62+
@include text-hint( $tff-hint-focused, small );
63+
@include text-field( $tff-input-normal,$tff-line-focused, false, $tff-line-focused-width );
64+
}
65+
66+
&.material-input-has-value {
67+
@include text-hint( $tff-hint-focused, small );
68+
69+
&:not(.material-input-focused) {
70+
@include text-hint( $tff-hint-normal, small );
5471
}
5572
}
5673

57-
label {
58-
-webkit-font-smoothing: antialiased;
59-
z-index: 1;
60-
pointer-events: none;
74+
&[disabled] {
6175

62-
@include transform-translate3d(0, $input-line-height, 0);
63-
@include transform-origin(left, center);
64-
@include transition($input-label-transition);
76+
@include text-field( $tff-input-disabled, $tff-line-disabled, false, $tff-line-disabled-width );
77+
input, textarea {
78+
@include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed, bottom );
79+
pointer-events: none;
80+
tabindex : -1;
81+
}
6582

66-
color: $input-placeholder-color;
83+
@include text-hint( $tff-hint-disabled, small );
6784

68-
&:hover {
69-
cursor: text;
85+
*:not(.material-input-has-value) {
86+
@include text-hint( $tff-hint-disabled, large );
7087
}
88+
89+
}
90+
91+
}
92+
93+
94+
// Dark Theme
95+
.dark material-input-group,
96+
.dark .material-input-group {
97+
98+
@include text-hint( $tff-hint-normal-dark, large, $tff-transition );
99+
@include text-field( $tff-input-normal-dark, $tff-line-normal-dark, $tff-transition );
100+
101+
102+
&.material-input-focused {
103+
@include text-hint( $tff-hint-focused-dark, small );
104+
@include text-field( $tff-input-focused-dark,$tff-line-focused-dark, false, $tff-line-focused-width );
71105
}
72106

73-
&.material-input-focused, &.material-input-has-value {
107+
&.material-input-has-value {
108+
@include text-hint( $tff-hint-focused-dark, small );
74109

75-
input {
76-
border-bottom-width: 2px;
110+
&:not(.material-input-focused) {
111+
@include text-hint( $tff-hint-normal-dark, small );
77112
}
113+
}
114+
115+
&[disabled] {
116+
117+
@include text-field( $tff-input-disabled-dark, $tff-line-disabled-dark, false, $tff-line-disabled-width );
118+
input, textarea {
119+
@include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed-dark, bottom );
120+
pointer-events: none;
121+
tabindex : -1;
122+
}
123+
124+
@include text-hint( $tff-hint-disabled-dark, small );
78125

79-
label {
80-
@include transform-translate3d-scale(0, 0, 0, $input-focused-scale);
126+
*:not(.material-input-has-value) {
127+
@include text-hint( $tff-hint-disabled-dark, large );
81128
}
129+
82130
}
131+
83132
}
133+
134+
135+
.theme-dark-tff { @include theme-bg-and-color(#333, #999); }

‎src/components/textField/demo1/index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11

22
<div ng-controller="AppCtrl" layout="vertical">
33

4-
<material-toolbar class="material-theme-dark material-tall">
5-
<div class="material-toolbar-tools">
6-
<ig fid="t1" class="material-input-group-theme-light material-input-group-inverted"></ig>
7-
<ig fid="t2" class="material-input-group-theme-light-blue material-input-group-inverted"></ig>
4+
<material-toolbar class="theme-dark-tff material-medium-tall" style="padding-top:15px;">
5+
<div class="material-toolbar-tools dark">
6+
<ig fid="t1" label="data.t1.label" value="data.t1.value" class="material-input-group-theme-light material-input-group-inverted"></ig>
7+
<ig fid="t2" label="data.t2.label" value="data.t2.value" class="material-input-group-theme-light-blue material-input-group-inverted"></ig>
88
</div>
99
</material-toolbar>
1010

1111
<material-content>
1212
<form style="padding: 20px;">
13-
<ig fid="i1" value="data.i1" class="material-input-group-theme-light"></ig>
14-
<ig fid="i2" value="data.i2" class="material-input-group-theme-light-blue"></ig>
15-
<ig fid="i3" value="data.i3" class="material-input-group-theme-dark"></ig>
16-
<ig fid="i4" value="data.i4" class="material-input-group-theme-green"></ig>
17-
<ig fid="i5" value="data.i5" class="material-input-group-theme-yellow"></ig>
18-
<ig fid="i6" value="data.i6" class="material-input-group-theme-orange"></ig>
19-
<ig fid="i7" value="data.i7" class="material-input-group-theme-purple"></ig>
20-
<ig fid="i8" value="data.i8" class="material-input-group-theme-red"></ig>
13+
<ig fid="i1" label="data.i1.label" value="data.i1.value" ></ig>
14+
<ig fid="i2" label="data.i2.label" value="data.i2.value" ></ig>
15+
<ig fid="i3" label="data.i3.label" value="data.i3.value" ></ig>
16+
<ig fid="i4" label="data.i4.label" value="data.i4.value" ></ig>
17+
<ig fid="i5" label="data.i5.label" value="data.i5.value" ></ig>
18+
<ig fid="i6" label="data.i6.label" value="data.i6.value" ></ig>
19+
<ig fid="i7" label="data.i7.label" value="data.i7.value" disabled ></ig>
20+
<ig fid="i8" label="data.i8.label" value="data.i8.value" ></ig>
2121
</form>
2222
</material-content>
2323

‎src/components/textField/demo1/script.js‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@ angular.module('formDemo1', ['ngMaterial'])
33

44
.controller('AppCtrl', function($scope) {
55
$scope.data = {
6-
i1 : "Field #1",
7-
i2 : "Field #2",
8-
i3 : "Field #3",
9-
i4 : "Field #4",
10-
i5 : "Field #5",
11-
i6 : "Field #6",
12-
i7 : "Field #7",
13-
i8 : "Field #8"
6+
i1 : { label:"FirstName" , value:"Naomi" },
7+
i2 : { label:"LastName" , value:"" },
8+
i3 : { label:"Company" , value:"Google" },
9+
i4 : { label:"Address" , value:"" },
10+
i5 : { label:"City" , value:"Mountain View" },
11+
i6 : { label:"State" , value:"CA" },
12+
i7 : { label:"Country" , value:"USA" },
13+
i8 : { label:"Postal Code", value:"" },
14+
15+
t1 : { label:"Title", value:"" },
16+
t2 : { label:"Message", value:"ipsum lorem id screib" }
1417
};
18+
1519
})
1620

1721
.directive('ig', function() {
@@ -20,12 +24,18 @@ angular.module('formDemo1', ['ngMaterial'])
2024
replace: true,
2125
scope : {
2226
fid : '@',
23-
title : '=value'
27+
value : '=',
28+
label : '='
29+
},
30+
link : function(scope, element, attrs) {
31+
if ( angular.isDefined(attrs.disabled) ) {
32+
scope.isDisabled = true;
33+
}
2434
},
2535
template:
26-
'<material-input-group>' +
27-
'<label for="{{fid}}">Description</label>' +
28-
'<material-input id="{{fid}}" type="text" ng-model="title">' +
36+
'<material-input-group ng-disabled="isDisabled">' +
37+
'<label for="{{fid}}">{{label}}</label>' +
38+
'<material-input id="{{fid}}" type="text" ng-model="value">' +
2939
'</material-input-group>'
3040
};
3141
});

‎src/components/textField/textField.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ function materialInputGroupDirective() {
5555
* <hljs lang="html">
5656
* <material-input-group>
5757
* <material-input type="text" ng-model="user.fullName"></material-input>
58-
* <material-input type="text" ng-model="user.email"></material-input>
5958
* </material-input-group>
6059
* </hljs>
6160
*/
@@ -82,6 +81,10 @@ function materialInputDirective() {
8281
});
8382
}
8483

84+
if ( angular.isDefined(attr.disabled) ) {
85+
element.attr('tabIndex', -1);
86+
}
87+
8588
element.on('input', function() {
8689
inputGroupCtrl.setHasValue(!!element.val());
8790
});

0 commit comments

Comments
 (0)