Neues Initialrelease mit IonicMaterial
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,30 @@
|
||||
/*!
|
||||
* Angular Material Design
|
||||
* https://github.com/angular/material
|
||||
* @license MIT
|
||||
* v0.9.0-rc1-master-3c0ce9b
|
||||
*/
|
||||
/* mixin definition ; sets LTR and RTL within the same style call */
|
||||
md-input-group.md-THEME_NAME-theme input, md-input-group.md-THEME_NAME-theme textarea {
|
||||
text-shadow: '{{foreground-shadow}}'; }
|
||||
md-input-group.md-THEME_NAME-theme input::-webkit-input-placeholder, md-input-group.md-THEME_NAME-theme input::-moz-placeholder, md-input-group.md-THEME_NAME-theme input:-moz-placeholder, md-input-group.md-THEME_NAME-theme input:-ms-input-placeholder, md-input-group.md-THEME_NAME-theme textarea::-webkit-input-placeholder, md-input-group.md-THEME_NAME-theme textarea::-moz-placeholder, md-input-group.md-THEME_NAME-theme textarea:-moz-placeholder, md-input-group.md-THEME_NAME-theme textarea:-ms-input-placeholder {
|
||||
color: '{{foreground-3}}'; }
|
||||
md-input-group.md-THEME_NAME-theme label {
|
||||
text-shadow: '{{foreground-shadow}}';
|
||||
color: '{{foreground-3}}'; }
|
||||
md-input-group.md-THEME_NAME-theme input, md-input-group.md-THEME_NAME-theme textarea {
|
||||
color: '{{foreground-1}}';
|
||||
border-color: '{{foreground-4}}'; }
|
||||
md-input-group.md-THEME_NAME-theme.md-input-focused input, md-input-group.md-THEME_NAME-theme.md-input-focused textarea {
|
||||
border-color: '{{primary-500}}'; }
|
||||
md-input-group.md-THEME_NAME-theme.md-input-focused label {
|
||||
color: '{{primary-500}}'; }
|
||||
md-input-group.md-THEME_NAME-theme.md-input-focused.md-accent input, md-input-group.md-THEME_NAME-theme.md-input-focused.md-accent textarea {
|
||||
border-color: '{{accent-500}}'; }
|
||||
md-input-group.md-THEME_NAME-theme.md-input-focused.md-accent label {
|
||||
color: '{{accent-500}}'; }
|
||||
md-input-group.md-THEME_NAME-theme.md-input-has-value:not(.md-input-focused) label {
|
||||
color: '{{foreground-2}}'; }
|
||||
md-input-group.md-THEME_NAME-theme .md-input[disabled] {
|
||||
border-bottom-color: '{{foreground-4}}';
|
||||
color: '{{foreground-3}}'; }
|
||||
111
www/lib/angular-material/modules/closure/textField/textField.css
Normal file
111
www/lib/angular-material/modules/closure/textField/textField.css
Normal file
@@ -0,0 +1,111 @@
|
||||
/*!
|
||||
* Angular Material Design
|
||||
* https://github.com/angular/material
|
||||
* @license MIT
|
||||
* v0.9.0-rc1-master-3c0ce9b
|
||||
*/
|
||||
/* mixin definition ; sets LTR and RTL within the same style call */
|
||||
md-input-group label, .md-input-group label {
|
||||
display: block;
|
||||
font-size: 1.2rem; }
|
||||
md-input-group textarea, md-input-group input[type="text"], md-input-group input[type="password"], md-input-group input[type="datetime"], md-input-group input[type="datetime-local"], md-input-group input[type="date"], md-input-group input[type="month"], md-input-group input[type="time"], md-input-group input[type="week"], md-input-group input[type="number"], md-input-group input[type="email"], md-input-group input[type="url"], md-input-group input[type="search"], md-input-group input[type="tel"], md-input-group input[type="color"], .md-input-group textarea, .md-input-group input[type="text"], .md-input-group input[type="password"], .md-input-group input[type="datetime"], .md-input-group input[type="datetime-local"], .md-input-group input[type="date"], .md-input-group input[type="month"], .md-input-group input[type="time"], .md-input-group input[type="week"], .md-input-group input[type="number"], .md-input-group input[type="email"], .md-input-group input[type="url"], .md-input-group input[type="search"], .md-input-group input[type="tel"], .md-input-group input[type="color"] {
|
||||
display: block;
|
||||
border-width: 0 0 1px 0;
|
||||
padding-top: 2px;
|
||||
line-height: 26px;
|
||||
padding-bottom: 1px; }
|
||||
md-input-group textarea:focus, md-input-group input[type="text"]:focus, md-input-group input[type="password"]:focus, md-input-group input[type="datetime"]:focus, md-input-group input[type="datetime-local"]:focus, md-input-group input[type="date"]:focus, md-input-group input[type="month"]:focus, md-input-group input[type="time"]:focus, md-input-group input[type="week"]:focus, md-input-group input[type="number"]:focus, md-input-group input[type="email"]:focus, md-input-group input[type="url"]:focus, md-input-group input[type="search"]:focus, md-input-group input[type="tel"]:focus, md-input-group input[type="color"]:focus, .md-input-group textarea:focus, .md-input-group input[type="text"]:focus, .md-input-group input[type="password"]:focus, .md-input-group input[type="datetime"]:focus, .md-input-group input[type="datetime-local"]:focus, .md-input-group input[type="date"]:focus, .md-input-group input[type="month"]:focus, .md-input-group input[type="time"]:focus, .md-input-group input[type="week"]:focus, .md-input-group input[type="number"]:focus, .md-input-group input[type="email"]:focus, .md-input-group input[type="url"]:focus, .md-input-group input[type="search"]:focus, .md-input-group input[type="tel"]:focus, .md-input-group input[type="color"]:focus {
|
||||
outline: 0; }
|
||||
md-input-group input, md-input-group textarea, .md-input-group input, .md-input-group textarea {
|
||||
background: none; }
|
||||
|
||||
md-input-group, .md-input-group {
|
||||
padding-bottom: 2px;
|
||||
margin: 10px 0 8px 0;
|
||||
position: relative;
|
||||
display: block; }
|
||||
md-input-group label, .md-input-group label {
|
||||
font-size: 1.6rem;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
md-input-group label:hover, .md-input-group label:hover {
|
||||
cursor: text; }
|
||||
md-input-group label, .md-input-group label {
|
||||
-webkit-transform: translate3d(0, 22px, 0);
|
||||
transform: translate3d(0, 22px, 0);
|
||||
transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
|
||||
transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center; }
|
||||
html[dir=rtl] md-input-group label, html[dir=rtl] .md-input-group label {
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center; }
|
||||
md-input-group input, md-input-group textarea, .md-input-group input, .md-input-group textarea {
|
||||
border-bottom-width: 1px;
|
||||
transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1); }
|
||||
md-input-group.md-input-focused label, .md-input-group.md-input-focused label {
|
||||
-webkit-transform: translate3d(0, 4px, 0) scale(0.75);
|
||||
transform: translate3d(0, 4px, 0) scale(0.75);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center; }
|
||||
html[dir=rtl] md-input-group.md-input-focused label, html[dir=rtl] .md-input-group.md-input-focused label {
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center; }
|
||||
md-input-group.md-input-focused input, md-input-group.md-input-focused textarea, .md-input-group.md-input-focused input, .md-input-group.md-input-focused textarea {
|
||||
border-bottom-width: 2px; }
|
||||
md-input-group.md-input-focused input, .md-input-group.md-input-focused input {
|
||||
padding-bottom: 0; }
|
||||
md-input-group.md-input-has-value label, .md-input-group.md-input-has-value label {
|
||||
-webkit-transform: translate3d(0, 4px, 0) scale(0.75);
|
||||
transform: translate3d(0, 4px, 0) scale(0.75);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center; }
|
||||
html[dir=rtl] md-input-group.md-input-has-value label, html[dir=rtl] .md-input-group.md-input-has-value label {
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center; }
|
||||
md-input-group.md-input-has-value:not(.md-input-focused) label, .md-input-group.md-input-has-value:not(.md-input-focused) label {
|
||||
-webkit-transform: translate3d(0, 4px, 0) scale(0.75);
|
||||
transform: translate3d(0, 4px, 0) scale(0.75);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center; }
|
||||
html[dir=rtl] md-input-group.md-input-has-value:not(.md-input-focused) label, html[dir=rtl] .md-input-group.md-input-has-value:not(.md-input-focused) label {
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center; }
|
||||
md-input-group[disabled] input, md-input-group[disabled] textarea, .md-input-group[disabled] input, .md-input-group[disabled] textarea {
|
||||
border-bottom-width: 0px; }
|
||||
md-input-group[disabled] input, md-input-group[disabled] textarea, .md-input-group[disabled] input, .md-input-group[disabled] textarea {
|
||||
background-size: 3px 1px;
|
||||
background-position: 0 bottom;
|
||||
background-size: 2px 1px;
|
||||
background-repeat: repeat-x;
|
||||
pointer-events: none; }
|
||||
md-input-group[disabled] label, .md-input-group[disabled] label {
|
||||
-webkit-transform: translate3d(0, 4px, 0) scale(0.75);
|
||||
transform: translate3d(0, 4px, 0) scale(0.75);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center; }
|
||||
html[dir=rtl] md-input-group[disabled] label, html[dir=rtl] .md-input-group[disabled] label {
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center; }
|
||||
md-input-group[disabled] *:not(.md-input-has-value) label, .md-input-group[disabled] *:not(.md-input-has-value) label {
|
||||
-webkit-transform: translate3d(0, 22px, 0);
|
||||
transform: translate3d(0, 22px, 0);
|
||||
transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center; }
|
||||
html[dir=rtl] md-input-group[disabled] *:not(.md-input-has-value) label, html[dir=rtl] .md-input-group[disabled] *:not(.md-input-has-value) label {
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center; }
|
||||
145
www/lib/angular-material/modules/closure/textField/textField.js
vendored
Normal file
145
www/lib/angular-material/modules/closure/textField/textField.js
vendored
Normal file
@@ -0,0 +1,145 @@
|
||||
/*!
|
||||
* Angular Material Design
|
||||
* https://github.com/angular/material
|
||||
* @license MIT
|
||||
* v0.9.0-rc1-master-3c0ce9b
|
||||
*/
|
||||
goog.provide('ng.material.components.textField');
|
||||
goog.require('ng.material.core');
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @ngdoc module
|
||||
* @name material.components.textField
|
||||
* @description
|
||||
* Form
|
||||
*/
|
||||
ng.material.components.textField = angular.module('material.components.textField', [
|
||||
'material.core'
|
||||
])
|
||||
.directive('mdInputGroup', mdInputGroupDirective)
|
||||
.directive('mdInput', mdInputDirective)
|
||||
.directive('mdTextFloat', mdTextFloatDirective);
|
||||
|
||||
|
||||
function mdTextFloatDirective($mdTheming, $mdUtil, $parse, $log) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope : {
|
||||
fid : '@?mdFid',
|
||||
label : '@?',
|
||||
value : '=ngModel'
|
||||
},
|
||||
compile : function(element, attr) {
|
||||
|
||||
$log.warn('<md-text-float> is deprecated. Please use `<md-input-container>` and `<input>`.' +
|
||||
'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
|
||||
|
||||
if ( angular.isUndefined(attr.mdFid) ) {
|
||||
attr.mdFid = $mdUtil.nextUid();
|
||||
}
|
||||
|
||||
return {
|
||||
pre : function(scope, element, attrs) {
|
||||
var disabledParsed = $parse(attrs.ngDisabled);
|
||||
scope.isDisabled = function() {
|
||||
return disabledParsed(scope.$parent);
|
||||
};
|
||||
|
||||
scope.inputType = attrs.type || "text";
|
||||
},
|
||||
post: $mdTheming
|
||||
};
|
||||
},
|
||||
template:
|
||||
'<md-input-group tabindex="-1">' +
|
||||
' <label for="{{fid}}" >{{label}}</label>' +
|
||||
' <md-input id="{{fid}}" ng-disabled="isDisabled()" ng-model="value" type="{{inputType}}"></md-input>' +
|
||||
'</md-input-group>'
|
||||
};
|
||||
}
|
||||
mdTextFloatDirective.$inject = ["$mdTheming", "$mdUtil", "$parse", "$log"];
|
||||
|
||||
function mdInputGroupDirective($log) {
|
||||
return {
|
||||
restrict: 'CE',
|
||||
controller: ['$element', function($element) {
|
||||
|
||||
$log.warn('<md-input-group> is deprecated. Please use `<md-input-container>` and `<input>`.' +
|
||||
'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
|
||||
this.setFocused = function(isFocused) {
|
||||
$element.toggleClass('md-input-focused', !!isFocused);
|
||||
};
|
||||
this.setHasValue = function(hasValue) {
|
||||
$element.toggleClass('md-input-has-value', hasValue );
|
||||
};
|
||||
}]
|
||||
};
|
||||
|
||||
}
|
||||
mdInputGroupDirective.$inject = ["$log"];
|
||||
|
||||
function mdInputDirective($mdUtil, $log) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
template: '<input >',
|
||||
require: ['^?mdInputGroup', '?ngModel'],
|
||||
link: function(scope, element, attr, ctrls) {
|
||||
if ( !ctrls[0] ) return;
|
||||
|
||||
$log.warn('<md-input> is deprecated. Please use `<md-input-container>` and `<input>`.' +
|
||||
'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
|
||||
|
||||
var inputGroupCtrl = ctrls[0];
|
||||
var ngModelCtrl = ctrls[1];
|
||||
|
||||
scope.$watch(scope.isDisabled, function(isDisabled) {
|
||||
element.attr('aria-disabled', !!isDisabled);
|
||||
element.attr('tabindex', !!isDisabled);
|
||||
});
|
||||
element.attr('type', attr.type || element.parent().attr('type') || "text");
|
||||
|
||||
// When the input value changes, check if it "has" a value, and
|
||||
// set the appropriate class on the input group
|
||||
if (ngModelCtrl) {
|
||||
//Add a $formatter so we don't use up the render function
|
||||
ngModelCtrl.$formatters.push(function(value) {
|
||||
inputGroupCtrl.setHasValue( isNotEmpty(value) );
|
||||
return value;
|
||||
});
|
||||
}
|
||||
|
||||
element
|
||||
.on('input', function() {
|
||||
inputGroupCtrl.setHasValue( isNotEmpty() );
|
||||
})
|
||||
.on('focus', function(e) {
|
||||
// When the input focuses, add the focused class to the group
|
||||
inputGroupCtrl.setFocused(true);
|
||||
})
|
||||
.on('blur', function(e) {
|
||||
// When the input blurs, remove the focused class from the group
|
||||
inputGroupCtrl.setFocused(false);
|
||||
inputGroupCtrl.setHasValue( isNotEmpty() );
|
||||
});
|
||||
|
||||
scope.$on('$destroy', function() {
|
||||
inputGroupCtrl.setFocused(false);
|
||||
inputGroupCtrl.setHasValue(false);
|
||||
});
|
||||
|
||||
|
||||
function isNotEmpty(value) {
|
||||
value = angular.isUndefined(value) ? element.val() : value;
|
||||
return (angular.isDefined(value) && (value!==null) &&
|
||||
(value.toString().trim() !== ""));
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
mdInputDirective.$inject = ["$mdUtil", "$log"];
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user