feat(material): first ng2 material design components
This commit is contained in:
Jeremy Elbourn
committed by
Yegor Jbanov
Yegor Jbanov
parent
ffe13078e5
commit
f149ae79c6
18
modules/angular2_material/src/components/input/input.js
vendored
Normal file
18
modules/angular2_material/src/components/input/input.js
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
import {Decorator} from 'angular2/angular2';
|
||||
import {PropertySetter} from 'angular2/src/core/annotations/di';
|
||||
|
||||
@Decorator({
|
||||
selector: 'md-input-container input'
|
||||
})
|
||||
export class MdInput {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Decorator({
|
||||
selector: 'md-input-container'
|
||||
})
|
||||
export class MdInputContainer {
|
||||
}
|
||||
257
modules/angular2_material/src/components/input/input.scss
Normal file
257
modules/angular2_material/src/components/input/input.scss
Normal file
@ -0,0 +1,257 @@
|
||||
@import "../../core/style/variables";
|
||||
|
||||
// TODO(jelbourn): This goes away.
|
||||
@import "../../core/style/default-theme";
|
||||
|
||||
@mixin input-placeholder-color($color) {
|
||||
&::-webkit-input-placeholder,
|
||||
&::-moz-placeholder, /* Firefox 19+ */
|
||||
&:-moz-placeholder, /* Firefox 18- */
|
||||
&:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
$input-container-padding: 2px !default;
|
||||
|
||||
$input-label-default-offset: 24px !default;
|
||||
$input-label-default-scale: 1.0 !default;
|
||||
$input-label-float-offset: 4px !default;
|
||||
$input-label-float-scale: 0.75 !default;
|
||||
|
||||
$input-placeholder-offset: $input-label-default-offset !default;
|
||||
|
||||
$input-border-width-default: 1px !default;
|
||||
$input-border-width-focused: 2px !default;
|
||||
$input-line-height: 26px !default;
|
||||
$input-padding-top: 2px !default;
|
||||
|
||||
$input-error-font-size: 12px !default;
|
||||
$input-error-height: 24px !default;
|
||||
|
||||
md-input-container {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
|
||||
overflow-x: hidden;
|
||||
padding: $input-container-padding;
|
||||
padding-bottom: $input-container-padding + $input-error-height;
|
||||
|
||||
> md-icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 2px;
|
||||
+ input {
|
||||
margin-left: 28px * 2;
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"] {
|
||||
// Remove default appearance from all input / textarea.
|
||||
// `appearance` is not supported in IE, but does IE apply any txt input styling?
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
textarea.md-input {
|
||||
min-height: 2 * $input-line-height + $input-border-width-focused + $input-padding-top;
|
||||
-ms-flex-preferred-size: auto; // IE10
|
||||
}
|
||||
|
||||
label:not(.md-no-float),
|
||||
.md-placeholder:not(.md-select-label) {
|
||||
order: 1;
|
||||
pointer-events: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding-left: $input-container-padding;
|
||||
z-index: 1;
|
||||
transform: translate3d(0, $input-label-default-offset, 0) scale($input-label-default-scale);
|
||||
transform-origin: left top;
|
||||
transition: transform $swift-ease-out-timing-function 0.25s;
|
||||
}
|
||||
|
||||
.md-placeholder:not(.md-select-label) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition-property: opacity, transform;
|
||||
transform: translate3d(0, $input-placeholder-offset + $baseline-grid * 0.75, 0);
|
||||
}
|
||||
&.md-input-focused .md-placeholder {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, $input-placeholder-offset, 0);
|
||||
}
|
||||
// Placeholder should immediately disappear when the user starts typing
|
||||
&.md-input-has-value .md-placeholder {
|
||||
transition: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:not( .md-input-has-value ) input:not( :focus ) {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* The .md-input class is added to the input/textarea
|
||||
*/
|
||||
.md-input {
|
||||
flex: 1 1 auto;
|
||||
order: 2;
|
||||
display: block;
|
||||
|
||||
background: none;
|
||||
padding: $input-padding-top 2px $input-border-width-focused - $input-border-width-default;
|
||||
border-width: 0 0 $input-border-width-default 0;
|
||||
line-height: $input-line-height;
|
||||
-ms-flex-preferred-size: $input-line-height; // IE10
|
||||
border-radius: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:invalid {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.md-char-counter {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
position: absolute;
|
||||
font-size: $input-error-font-size;
|
||||
line-height: $input-error-height;
|
||||
bottom: $input-container-padding;
|
||||
right: $input-container-padding;
|
||||
|
||||
// TODO(jelbourn): animations here.
|
||||
}
|
||||
|
||||
&.md-input-focused,
|
||||
&.md-input-has-value {
|
||||
label:not(.md-no-float) {
|
||||
transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
|
||||
}
|
||||
}
|
||||
|
||||
// Use wide border in error state or in focused state
|
||||
&.md-input-focused .md-input {
|
||||
padding-bottom: 0; // Increase border width by 1px, decrease padding by 1
|
||||
border-width: 0 0 $input-border-width-focused 0;
|
||||
}
|
||||
|
||||
.md-input {
|
||||
&[disabled],
|
||||
[disabled] & {
|
||||
background-position: 0 bottom;
|
||||
// This background-size is coordinated with a linear-gradient set in input-theme.scss
|
||||
// to create a dotted line under the input.
|
||||
background-size: 3px 1px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// THEME
|
||||
|
||||
md-input-container {
|
||||
.md-input {
|
||||
@include input-placeholder-color(md-color($md-foreground, hint-text));
|
||||
color: md-color($md-foreground, text);
|
||||
border-color: md-color($md-foreground, divider);
|
||||
// text-shadow: md-color($md-foreground, shadow); // what is this?
|
||||
}
|
||||
|
||||
> md-icon {
|
||||
color: md-color($md-foreground, text);
|
||||
}
|
||||
|
||||
label,
|
||||
.md-placeholder {
|
||||
// text-shadow: md-color($md-foreground, shadow); // what is this?
|
||||
color: md-color($md-foreground, hint-text);
|
||||
}
|
||||
|
||||
div[ng-messages] {
|
||||
color: md-color($md-warn, 500)
|
||||
}
|
||||
|
||||
|
||||
&:not(.md-input-invalid) {
|
||||
&.md-input-has-value {
|
||||
label {
|
||||
color: md-color($md-foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
&.md-input-focused {
|
||||
.md-input {
|
||||
border-color: md-color($md-primary, 500);
|
||||
}
|
||||
label {
|
||||
color: md-color($md-primary, 500);
|
||||
}
|
||||
md-icon {
|
||||
color: md-color($md-primary, 500);
|
||||
}
|
||||
&.md-accent {
|
||||
.md-input {
|
||||
border-color: md-color($md-accent, 500);
|
||||
}
|
||||
label {
|
||||
color: md-color($md-accent, 500);
|
||||
}
|
||||
}
|
||||
&.md-warn {
|
||||
.md-input {
|
||||
border-color: md-color($md-warn, 500);
|
||||
}
|
||||
label {
|
||||
color: md-color($md-warn, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.md-input-invalid {
|
||||
.md-input {
|
||||
border-color: md-color($md-warn, 500);
|
||||
}
|
||||
label {
|
||||
color: md-color($md-warn, 500);
|
||||
}
|
||||
.md-char-counter {
|
||||
color: md-color($md-warn, 500);
|
||||
}
|
||||
}
|
||||
.md-input {
|
||||
&[disabled],
|
||||
[disabled] & {
|
||||
border-bottom-color: transparent;
|
||||
color: md-color($md-foreground, disabled-text);
|
||||
background-image: linear-gradient(to right, md-color($md-foreground, divider) 0%, md-color($md-foreground, divider) 33%, transparent 0%);
|
||||
background-image: -ms-linear-gradient(left, transparent 0%, md-color($md-foreground, divider) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user