Raataar/Ionic-Material
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ionic-Material Design , Codecanyon

Browse Source
This commit is contained in:
Carsten Hilmer
2016-08-22 12:59:56 +02:00
parent 7cd84fe179
commit 92601ec169
1440 changed files with 482763 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
IonicMaterialDesign/www/lib/angular-material/modules/closure/list/list-default-theme.css Normal file
View File

@@ -0,0 +1,23 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
/* mixin definition ; sets LTR and RTL within the same style call */
md-list.md-THEME_NAME-theme md-list-item.md-2-line .md-list-item-text h3, md-list.md-THEME_NAME-theme md-list-item.md-2-line .md-list-item-text h4, md-list.md-THEME_NAME-theme md-list-item.md-3-line .md-list-item-text h3, md-list.md-THEME_NAME-theme md-list-item.md-3-line .md-list-item-text h4 {
color: '{{foreground-1}}'; }
md-list.md-THEME_NAME-theme md-list-item.md-2-line .md-list-item-text p, md-list.md-THEME_NAME-theme md-list-item.md-3-line .md-list-item-text p {
color: '{{foreground-2}}'; }
md-list.md-THEME_NAME-theme .md-proxy-focus.md-focused div.md-no-style {
background-color: '{{background-100}}'; }
md-list.md-THEME_NAME-theme md-list-item > md-icon {
color: '{{foreground-2}}'; }
md-list.md-THEME_NAME-theme md-list-item > md-icon.md-highlight {
color: '{{primary-color}}'; }
md-list.md-THEME_NAME-theme md-list-item > md-icon.md-highlight.md-accent {
color: '{{accent-color}}'; }
md-list.md-THEME_NAME-theme md-list-item button {
background-color: '{{background-color}}'; }
md-list.md-THEME_NAME-theme md-list-item button.md-button:not([disabled]):hover {
background-color: '{{background-color}}'; }

147
IonicMaterialDesign/www/lib/angular-material/modules/closure/list/list.css Normal file
View File

@@ -0,0 +1,147 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
/* mixin definition ; sets LTR and RTL within the same style call */
md-list {
display: block;
padding: 8px 0px 8px 0px; }
md-list .md-subheader {
line-height: 0.75em; }
md-list-item.md-proxy-focus.md-focused .md-no-style {
transition: background-color 0.15s linear; }
md-list-item.md-no-proxy, md-list-item .md-no-style {
position: relative;
padding: 0px 16px;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; }
md-list-item.md-no-proxy.md-button, md-list-item .md-no-style.md-button {
font-size: inherit;
height: inherit;
text-align: left;
text-transform: none;
width: 100%;
white-space: normal; }
md-list-item.md-no-proxy:focus, md-list-item .md-no-style:focus {
outline: none; }
md-list-item.md-with-secondary {
position: relative; }
md-list-item.md-clickable:hover {
cursor: pointer; }
md-list-item md-divider {
position: absolute;
bottom: 0;
left: 0;
width: 100%; }
md-list-item md-divider[md-inset] {
left: 96px;
width: calc(100% - 96px);
margin: 0; }
md-list-item, md-list-item .md-list-item-inner {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
min-height: 48px; }
md-list-item > div.md-primary > md-icon, md-list-item > div.md-secondary > md-icon, md-list-item > md-icon:first-child, md-list-item > md-icon.md-secondary, md-list-item .md-list-item-inner > div.md-primary > md-icon, md-list-item .md-list-item-inner > div.md-secondary > md-icon, md-list-item .md-list-item-inner > md-icon:first-child, md-list-item .md-list-item-inner > md-icon.md-secondary {
width: 24px;
margin-top: 16px;
margin-bottom: 12px;
box-sizing: content-box; }
md-list-item > div.md-primary > md-checkbox, md-list-item > div.md-secondary > md-checkbox, md-list-item > md-checkbox:first-child, md-list-item md-checkbox.md-secondary, md-list-item .md-list-item-inner > div.md-primary > md-checkbox, md-list-item .md-list-item-inner > div.md-secondary > md-checkbox, md-list-item .md-list-item-inner > md-checkbox:first-child, md-list-item .md-list-item-inner md-checkbox.md-secondary {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center; }
md-list-item > div.md-primary > md-checkbox .md-label, md-list-item > div.md-secondary > md-checkbox .md-label, md-list-item > md-checkbox:first-child .md-label, md-list-item md-checkbox.md-secondary .md-label, md-list-item .md-list-item-inner > div.md-primary > md-checkbox .md-label, md-list-item .md-list-item-inner > div.md-secondary > md-checkbox .md-label, md-list-item .md-list-item-inner > md-checkbox:first-child .md-label, md-list-item .md-list-item-inner md-checkbox.md-secondary .md-label {
display: none; }
md-list-item > md-icon:first-child, md-list-item .md-list-item-inner > md-icon:first-child {
margin-right: 32px; }
md-list-item > md-checkbox:first-child, md-list-item .md-list-item-inner > md-checkbox:first-child {
width: 24px;
margin-left: 3px;
margin-right: 29px; }
md-list-item > .md-avatar:first-child, md-list-item .md-list-item-inner > .md-avatar:first-child {
width: 40px;
height: 40px;
margin-top: 8px;
margin-bottom: 8px;
margin-right: 16px;
border-radius: 50%;
box-sizing: content-box; }
md-list-item md-checkbox.md-secondary, md-list-item md-switch.md-secondary, md-list-item .md-list-item-inner md-checkbox.md-secondary, md-list-item .md-list-item-inner md-switch.md-secondary {
margin-right: 0;
margin-top: 0;
margin-bottom: 0; }
md-list-item button.md-button.md-secondary-container, md-list-item .md-list-item-inner button.md-button.md-secondary-container {
background-color: transparent;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
border-radius: 50%;
margin: 0px;
min-width: 0px; }
md-list-item button.md-button.md-secondary-container .md-ripple, md-list-item button.md-button.md-secondary-container .md-ripple-container, md-list-item .md-list-item-inner button.md-button.md-secondary-container .md-ripple, md-list-item .md-list-item-inner button.md-button.md-secondary-container .md-ripple-container {
border-radius: 50%; }
md-list-item .md-secondary-container, md-list-item .md-secondary, md-list-item .md-list-item-inner .md-secondary-container, md-list-item .md-list-item-inner .md-secondary {
margin-left: 16px;
position: absolute;
right: 16px;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0); }
md-list-item > .md-button.md-secondary-container > .md-secondary, md-list-item .md-list-item-inner > .md-button.md-secondary-container > .md-secondary {
margin-left: 0px;
position: static; }
md-list-item > p, md-list-item > .md-list-item-inner > p, md-list-item .md-list-item-inner > p, md-list-item .md-list-item-inner > .md-list-item-inner > p {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0; }
md-list-item.md-2-line, md-list-item.md-2-line > .md-no-style, md-list-item.md-3-line, md-list-item.md-3-line > .md-no-style {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start; }
md-list-item.md-2-line .md-list-item-text, md-list-item.md-2-line > .md-no-style .md-list-item-text, md-list-item.md-3-line .md-list-item-text, md-list-item.md-3-line > .md-no-style .md-list-item-text {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 16px 0;
text-overflow: ellipsis; }
md-list-item.md-2-line .md-list-item-text.md-offset, md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, md-list-item.md-3-line .md-list-item-text.md-offset, md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
margin-left: 56px; }
md-list-item.md-2-line .md-list-item-text h3, md-list-item.md-2-line > .md-no-style .md-list-item-text h3, md-list-item.md-3-line .md-list-item-text h3, md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
margin: 0 0 6px 0;
line-height: 0.75em; }
md-list-item.md-2-line .md-list-item-text h4, md-list-item.md-2-line > .md-no-style .md-list-item-text h4, md-list-item.md-3-line .md-list-item-text h4, md-list-item.md-3-line > .md-no-style .md-list-item-text h4 {
font-weight: 400;
margin: 10px 0 5px 0;
line-height: 0.75em; }
md-list-item.md-2-line .md-list-item-text p, md-list-item.md-2-line > .md-no-style .md-list-item-text p, md-list-item.md-3-line .md-list-item-text p, md-list-item.md-3-line > .md-no-style .md-list-item-text p {
margin: 0 0 0px 0;
line-height: 1.6em; }
md-list-item.md-2-line > .md-avatar:first-child, md-list-item.md-2-line > .md-no-style > .md-avatar:first-child {
margin-top: 12px; }
md-list-item.md-2-line > md-icon:first-child, md-list-item.md-2-line > .md-no-style > md-icon:first-child {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start; }
md-list-item.md-2-line .md-list-item-text, md-list-item.md-2-line > .md-no-style .md-list-item-text {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-top: 19px; }
md-list-item.md-3-line > md-icon:first-child, md-list-item.md-3-line > .md-avatar:first-child, md-list-item.md-3-line > .md-no-style > md-icon:first-child, md-list-item.md-3-line > .md-no-style > .md-avatar:first-child {
margin-top: 16px; }

273
IonicMaterialDesign/www/lib/angular-material/modules/closure/list/list.js vendored Normal file
View File

@@ -0,0 +1,273 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
goog.provide('ng.material.components.list');
goog.require('ng.material.core');
/**
* @ngdoc module
* @name material.components.list
* @description
* List module
*/
angular.module('material.components.list', [
'material.core'
])
.controller('MdListController', MdListController)
.directive('mdList', mdListDirective)
.directive('mdListItem', mdListItemDirective);
/**
* @ngdoc directive
* @name mdList
* @module material.components.list
*
* @restrict E
*
* @description
* The `<md-list>` directive is a list container for 1..n `<md-list-item>` tags.
*
* @usage
* <hljs lang="html">
* <md-list>
* <md-list-item class="md-2-line" ng-repeat="item in todos">
* <md-checkbox ng-model="item.done"></md-checkbox>
* <div class="md-list-item-text">
* <h3>{{item.title}}</h3>
* <p>{{item.description}}</p>
* </div>
* </md-list-item>
* </md-list>
* </hljs>
*/
function mdListDirective($mdTheming) {
return {
restrict: 'E',
compile: function(tEl) {
tEl[0].setAttribute('role', 'list');
return $mdTheming;
}
};
}
mdListDirective.$inject = ["$mdTheming"];
/**
* @ngdoc directive
* @name mdListItem
* @module material.components.list
*
* @restrict E
*
* @description
* The `<md-list-item>` directive is a container intended for row items in a `<md-list>` container.
*
* @usage
* <hljs lang="html">
* <md-list>
* <md-list-item>
* Item content in list
* </md-list-item>
* </md-list>
* </hljs>
*
*/
function mdListItemDirective($mdAria, $mdConstant, $timeout) {
var proxiedTypes = ['md-checkbox', 'md-switch'];
return {
restrict: 'E',
controller: 'MdListController',
compile: function(tEl, tAttrs) {
// Check for proxy controls (no ng-click on parent, and a control inside)
var secondaryItem = tEl[0].querySelector('.md-secondary');
var hasProxiedElement;
var proxyElement;
tEl[0].setAttribute('role', 'listitem');
if (!tAttrs.ngClick) {
for (var i = 0, type; type = proxiedTypes[i]; ++i) {
if (proxyElement = tEl[0].querySelector(type)) {
hasProxiedElement = true;
break;
}
}
if (hasProxiedElement) {
wrapIn('div');
} else if (!tEl[0].querySelector('md-button')) {
tEl.addClass('md-no-proxy');
}
} else {
wrapIn('button');
}
setupToggleAria();
function setupToggleAria() {
var toggleTypes = ['md-switch', 'md-checkbox'];
var toggle;
for (var i = 0, toggleType; toggleType = toggleTypes[i]; ++i) {
if (toggle = tEl.find(toggleType)[0]) {
if (!toggle.hasAttribute('aria-label')) {
var p = tEl.find('p')[0];
if (!p) return;
toggle.setAttribute('aria-label', 'Toggle ' + p.textContent);
}
}
}
}
function wrapIn(type) {
var container;
if (type == 'div') {
container = angular.element('<div class="md-no-style md-list-item-inner">');
container.append(tEl.contents());
tEl.addClass('md-proxy-focus');
} else {
container = angular.element('<md-button class="md-no-style"><div class="md-list-item-inner"></div></md-button>');
var copiedAttrs = ['ng-click', 'aria-label', 'ng-disabled'];
angular.forEach(copiedAttrs, function(attr) {
if (tEl[0].hasAttribute(attr)) {
container[0].setAttribute(attr, tEl[0].getAttribute(attr));
tEl[0].removeAttribute(attr);
}
});
container.children().eq(0).append(tEl.contents());
}
tEl[0].setAttribute('tabindex', '-1');
tEl.append(container);
if (secondaryItem && secondaryItem.hasAttribute('ng-click')) {
$mdAria.expect(secondaryItem, 'aria-label');
var buttonWrapper = angular.element('<md-button class="md-secondary-container md-icon-button">');
buttonWrapper.attr('ng-click', secondaryItem.getAttribute('ng-click'));
secondaryItem.removeAttribute('ng-click');
secondaryItem.setAttribute('tabindex', '-1');
secondaryItem.classList.remove('md-secondary');
buttonWrapper.append(secondaryItem);
secondaryItem = buttonWrapper[0];
}
// Check for a secondary item and move it outside
if ( secondaryItem && (
secondaryItem.hasAttribute('ng-click') ||
( tAttrs.ngClick &&
isProxiedElement(secondaryItem) )
)) {
tEl.addClass('md-with-secondary');
tEl.append(secondaryItem);
}
}
function isProxiedElement(el) {
return proxiedTypes.indexOf(el.nodeName.toLowerCase()) != -1;
}
return postLink;
function postLink($scope, $element, $attr, ctrl) {
var proxies = [],
firstChild = $element[0].firstElementChild,
hasClick = firstChild && firstChild.hasAttribute('ng-click');
computeProxies();
computeClickable();
if ($element.hasClass('md-proxy-focus') && proxies.length) {
angular.forEach(proxies, function(proxy) {
proxy = angular.element(proxy);
$scope.mouseActive = false;
proxy.on('mousedown', function() {
$scope.mouseActive = true;
$timeout(function(){
$scope.mouseActive = false;
}, 100);
})
.on('focus', function() {
if ($scope.mouseActive === false) { $element.addClass('md-focused'); }
proxy.on('blur', function proxyOnBlur() {
$element.removeClass('md-focused');
proxy.off('blur', proxyOnBlur);
});
});
});
}
function computeProxies() {
var children = $element.children();
if (children.length && !children[0].hasAttribute('ng-click')) {
angular.forEach(proxiedTypes, function(type) {
angular.forEach(firstChild.querySelectorAll(type), function(child) {
proxies.push(child);
});
});
}
}
function computeClickable() {
if (proxies.length || hasClick) {
$element.addClass('md-clickable');
ctrl.attachRipple($scope, angular.element($element[0].querySelector('.md-no-style')));
}
}
if (!hasClick && !proxies.length) {
firstChild && firstChild.addEventListener('keypress', function(e) {
if (e.target.nodeName != 'INPUT' && e.target.nodeName != 'TEXTAREA') {
var keyCode = e.which || e.keyCode;
if (keyCode == $mdConstant.KEY_CODE.SPACE) {
if (firstChild) {
firstChild.click();
e.preventDefault();
e.stopPropagation();
}
}
}
});
}
$element.off('click');
$element.off('keypress');
if (proxies.length && firstChild) {
$element.children().eq(0).on('click', function(e) {
if (firstChild.contains(e.target)) {
angular.forEach(proxies, function(proxy) {
if (e.target !== proxy && !proxy.contains(e.target)) {
angular.element(proxy).triggerHandler('click');
}
});
}
});
}
}
}
};
}
mdListItemDirective.$inject = ["$mdAria", "$mdConstant", "$timeout"];
/*
* @private
* @ngdoc controller
* @name MdListController
* @module material.components.list
*
*/
function MdListController($scope, $element, $mdListInkRipple) {
var ctrl = this;
ctrl.attachRipple = attachRipple;
function attachRipple (scope, element) {
var options = {};
$mdListInkRipple.attach(scope, element, options);
}
}
MdListController.$inject = ["$scope", "$element", "$mdListInkRipple"];
ng.material.components.list = angular.module("material.components.list");