Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(textfields): match float-label (light theme) specifications
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThomasBurleson
ThomasBurleson committed Oct 4, 2014
1 parent 4f7769a commit 63eeb47
Show file tree
Hide file tree
Showing 7 changed files with 241 additions and 70 deletions.
104 changes: 78 additions & 26 deletions src/components/textField/_textField.scss
View file
Expand Up @@ -3,7 +3,7 @@ form {

label {
display: block;
font-size: $input-font-size;
font-size: $tff-font-size;
}

textarea,
Expand All @@ -23,61 +23,113 @@ input[type="tel"],
input[type="color"] {
display: block;
border-width: 0 0 1px 0;
line-height: $input-line-height;
font-size: $input-font-size;
line-height: $tff-line-height;
font-size: $tff-font-size;

&:focus {
outline: 0;
}
}

input, textarea {
@include input-placeholder($input-placeholder-color);
@include input-placeholder($tff-placeholder-color);
background: none;
}

// Light-Theme
material-input-group,
.material-input-group {
margin: $input-group-margin;
margin: $tff-margin;

position: relative;
display: block;

input, textarea {
@include transition($input-label-transition);
label {
z-index: 1;
pointer-events: none;
-webkit-font-smoothing: antialiased;

color: $input-color;
&:hover {
cursor: text;
}
}

&.material-input-group-inverted {
input {
color: $input-color-inverted;
@include text-hint( $tff-hint-normal, large, $tff-transition );
@include text-field( $tff-input-normal, $tff-line-normal, $tff-transition );


&.material-input-focused {
@include text-hint( $tff-hint-focused, small );
@include text-field( $tff-input-normal,$tff-line-focused, false, $tff-line-focused-width );
}

&.material-input-has-value {
@include text-hint( $tff-hint-focused, small );

&:not(.material-input-focused) {
@include text-hint( $tff-hint-normal, small );
}
}

label {
-webkit-font-smoothing: antialiased;
z-index: 1;
pointer-events: none;
&[disabled] {

@include transform-translate3d(0, $input-line-height, 0);
@include transform-origin(left, center);
@include transition($input-label-transition);
@include text-field( $tff-input-disabled, $tff-line-disabled, false, $tff-line-disabled-width );
input, textarea {
@include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed, bottom );
pointer-events: none;
tabindex : -1;
}

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

&:hover {
cursor: text;
*:not(.material-input-has-value) {
@include text-hint( $tff-hint-disabled, large );
}

}

}


// Dark Theme
.dark material-input-group,
.dark .material-input-group {

@include text-hint( $tff-hint-normal-dark, large, $tff-transition );
@include text-field( $tff-input-normal-dark, $tff-line-normal-dark, $tff-transition );


&.material-input-focused {
@include text-hint( $tff-hint-focused-dark, small );
@include text-field( $tff-input-focused-dark,$tff-line-focused-dark, false, $tff-line-focused-width );
}

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

input {
border-bottom-width: 2px;
&:not(.material-input-focused) {
@include text-hint( $tff-hint-normal-dark, small );
}
}

&[disabled] {

@include text-field( $tff-input-disabled-dark, $tff-line-disabled-dark, false, $tff-line-disabled-width );
input, textarea {
@include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed-dark, bottom );
pointer-events: none;
tabindex : -1;
}

@include text-hint( $tff-hint-disabled-dark, small );

label {
@include transform-translate3d-scale(0, 0, 0, $input-focused-scale);
*:not(.material-input-has-value) {
@include text-hint( $tff-hint-disabled-dark, large );
}

}

}


.theme-dark-tff { @include theme-bg-and-color(#333, #999); }
24 changes: 12 additions & 12 deletions src/components/textField/demo1/index.html
View file
@@ -1,23 +1,23 @@

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

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

<material-content>
<form style="padding: 20px;">
<ig fid="i1" value="data.i1" class="material-input-group-theme-light"></ig>
<ig fid="i2" value="data.i2" class="material-input-group-theme-light-blue"></ig>
<ig fid="i3" value="data.i3" class="material-input-group-theme-dark"></ig>
<ig fid="i4" value="data.i4" class="material-input-group-theme-green"></ig>
<ig fid="i5" value="data.i5" class="material-input-group-theme-yellow"></ig>
<ig fid="i6" value="data.i6" class="material-input-group-theme-orange"></ig>
<ig fid="i7" value="data.i7" class="material-input-group-theme-purple"></ig>
<ig fid="i8" value="data.i8" class="material-input-group-theme-red"></ig>
<ig fid="i1" label="data.i1.label" value="data.i1.value" ></ig>
<ig fid="i2" label="data.i2.label" value="data.i2.value" ></ig>
<ig fid="i3" label="data.i3.label" value="data.i3.value" ></ig>
<ig fid="i4" label="data.i4.label" value="data.i4.value" ></ig>
<ig fid="i5" label="data.i5.label" value="data.i5.value" ></ig>
<ig fid="i6" label="data.i6.label" value="data.i6.value" ></ig>
<ig fid="i7" label="data.i7.label" value="data.i7.value" disabled ></ig>
<ig fid="i8" label="data.i8.label" value="data.i8.value" ></ig>
</form>
</material-content>

Expand Down
34 changes: 22 additions & 12 deletions src/components/textField/demo1/script.js
View file
Expand Up @@ -3,15 +3,19 @@ angular.module('formDemo1', ['ngMaterial'])

.controller('AppCtrl', function($scope) {
$scope.data = {
i1 : "Field #1",
i2 : "Field #2",
i3 : "Field #3",
i4 : "Field #4",
i5 : "Field #5",
i6 : "Field #6",
i7 : "Field #7",
i8 : "Field #8"
i1 : { label:"FirstName" , value:"Naomi" },
i2 : { label:"LastName" , value:"" },
i3 : { label:"Company" , value:"Google" },
i4 : { label:"Address" , value:"" },
i5 : { label:"City" , value:"Mountain View" },
i6 : { label:"State" , value:"CA" },
i7 : { label:"Country" , value:"USA" },
i8 : { label:"Postal Code", value:"" },

t1 : { label:"Title", value:"" },
t2 : { label:"Message", value:"ipsum lorem id screib" }
};

})

.directive('ig', function() {
Expand All @@ -20,12 +24,18 @@ angular.module('formDemo1', ['ngMaterial'])
replace: true,
scope : {
fid : '@',
title : '=value'
value : '=',
label : '='
},
link : function(scope, element, attrs) {
if ( angular.isDefined(attrs.disabled) ) {
scope.isDisabled = true;
}
},
template:
'<material-input-group>' +
'<label for="{{fid}}">Description</label>' +
'<material-input id="{{fid}}" type="text" ng-model="title">' +
'<material-input-group ng-disabled="isDisabled">' +
'<label for="{{fid}}">{{label}}</label>' +
'<material-input id="{{fid}}" type="text" ng-model="value">' +
'</material-input-group>'
};
});
5 changes: 4 additions & 1 deletion src/components/textField/textField.js
View file
Expand Up @@ -55,7 +55,6 @@ function materialInputGroupDirective() {
* <hljs lang="html">
* <material-input-group>
* <material-input type="text" ng-model="user.fullName"></material-input>
* <material-input type="text" ng-model="user.email"></material-input>
* </material-input-group>
* </hljs>
*/
Expand All @@ -82,6 +81,10 @@ function materialInputDirective() {
});
}

if ( angular.isDefined(attr.disabled) ) {
element.attr('tabIndex', -1);
}

element.on('input', function() {
inputGroupCtrl.setHasValue(!!element.val());
});
Expand Down

0 comments on commit 63eeb47

Please sign in to comment.