Neues Initialrelease mit IonicMaterial

This commit is contained in:
Carsten Hilmer
2016-08-22 12:55:52 +02:00
parent 30a5df79aa
commit 45e482b14d
1249 changed files with 305225 additions and 68794 deletions

View File

@@ -0,0 +1,8 @@
{
"name": "angular-material-toolbar",
"version": "0.10.0",
"dependencies": {
"angular-material-core": "0.10.0",
"angular-material-content": "0.10.0"
}
}

View File

@@ -0,0 +1,20 @@
/*!
* 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-toolbar.md-THEME_NAME-theme {
background-color: '{{primary-color}}';
color: '{{primary-contrast}}'; }
md-toolbar.md-THEME_NAME-theme md-icon {
color: '{{primary-contrast}}'; }
md-toolbar.md-THEME_NAME-theme .md-button {
color: '{{primary-contrast}}'; }
md-toolbar.md-THEME_NAME-theme.md-accent {
background-color: '{{accent-color}}';
color: '{{accent-contrast}}'; }
md-toolbar.md-THEME_NAME-theme.md-warn {
background-color: '{{warn-color}}';
color: '{{warn-contrast}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/md-toolbar.md-THEME_NAME-theme{background-color:'{{primary-color}}';color:'{{primary-contrast}}'}md-toolbar.md-THEME_NAME-theme .md-button,md-toolbar.md-THEME_NAME-theme md-icon{color:'{{primary-contrast}}'}md-toolbar.md-THEME_NAME-theme.md-accent{background-color:'{{accent-color}}';color:'{{accent-contrast}}'}md-toolbar.md-THEME_NAME-theme.md-warn{background-color:'{{warn-color}}';color:'{{warn-contrast}}'}

View File

@@ -0,0 +1,83 @@
/*!
* 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-toolbar {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
z-index: 2;
font-size: 20px;
min-height: 64px;
width: 100%; }
md-toolbar.md-whiteframe-z1-add, md-toolbar.md-whiteframe-z1-remove {
transition: box-shadow 0.5s linear; }
md-toolbar *, md-toolbar *:before, md-toolbar *:after {
box-sizing: border-box; }
md-toolbar.md-tall {
height: 128px;
min-height: 128px;
max-height: 128px; }
md-toolbar.md-medium-tall {
height: 88px;
min-height: 88px;
max-height: 88px; }
md-toolbar.md-medium-tall .md-toolbar-tools {
height: 48px;
min-height: 48px;
max-height: 48px; }
md-toolbar .md-indent {
margin-left: 64px; }
md-toolbar ~ md-content > md-list {
padding: 0; }
md-toolbar ~ md-content > md-list md-list-item:last-child md-divider {
display: none; }
.md-toolbar-tools {
font-weight: 400;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
height: 64px;
max-height: 64px;
padding: 0 16px;
margin: 0; }
.md-toolbar-tools h1, .md-toolbar-tools h2, .md-toolbar-tools h3 {
font-size: inherit;
font-weight: inherit;
margin: inherit; }
.md-toolbar-tools a {
color: inherit;
text-decoration: none; }
.md-toolbar-tools .fill-height {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
.md-toolbar-tools .md-button {
margin-top: 0;
margin-bottom: 0; }
.md-toolbar-tools > .md-button:first-child {
margin-left: -8px; }
.md-toolbar-tools > .md-button:last-child {
margin-right: -8px; }
@media screen and (-ms-high-contrast: active) {
.md-toolbar-tools {
border-bottom: 1px solid #fff; } }

View File

@@ -0,0 +1,169 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
(function( window, angular, undefined ){
"use strict";
/**
* @ngdoc module
* @name material.components.toolbar
*/
angular.module('material.components.toolbar', [
'material.core',
'material.components.content'
])
.directive('mdToolbar', mdToolbarDirective);
/**
* @ngdoc directive
* @name mdToolbar
* @module material.components.toolbar
* @restrict E
* @description
* `md-toolbar` is used to place a toolbar in your app.
*
* Toolbars are usually used above a content area to display the title of the
* current page, and show relevant action buttons for that page.
*
* You can change the height of the toolbar by adding either the
* `md-medium-tall` or `md-tall` class to the toolbar.
*
* @usage
* <hljs lang="html">
* <div layout="column" layout-fill>
* <md-toolbar>
*
* <div class="md-toolbar-tools">
* <span>My App's Title</span>
*
* <!-- fill up the space between left and right area -->
* <span flex></span>
*
* <md-button>
* Right Bar Button
* </md-button>
* </div>
*
* </md-toolbar>
* <md-content>
* Hello!
* </md-content>
* </div>
* </hljs>
*
* @param {boolean=} md-scroll-shrink Whether the header should shrink away as
* the user scrolls down, and reveal itself as the user scrolls up.
* Note: for scrollShrink to work, the toolbar must be a sibling of a
* `md-content` element, placed before it. See the scroll shrink demo.
*
*
* @param {number=} md-shrink-speed-factor How much to change the speed of the toolbar's
* shrinking by. For example, if 0.25 is given then the toolbar will shrink
* at one fourth the rate at which the user scrolls down. Default 0.5.
*/
function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate, $timeout) {
return {
restrict: 'E',
controller: angular.noop,
link: function(scope, element, attr) {
$mdTheming(element);
if (angular.isDefined(attr.mdScrollShrink)) {
setupScrollShrink();
}
function setupScrollShrink() {
// Current "y" position of scroll
var y = 0;
// Store the last scroll top position
var prevScrollTop = 0;
var shrinkSpeedFactor = attr.mdShrinkSpeedFactor || 0.5;
var toolbarHeight;
var contentElement;
var debouncedContentScroll = $$rAF.throttle(onContentScroll);
var debouncedUpdateHeight = $mdUtil.debounce(updateToolbarHeight, 5 * 1000);
// Wait for $mdContentLoaded event from mdContent directive.
// If the mdContent element is a sibling of our toolbar, hook it up
// to scroll events.
scope.$on('$mdContentLoaded', onMdContentLoad);
function onMdContentLoad($event, newContentEl) {
// Toolbar and content must be siblings
if (element.parent()[0] === newContentEl.parent()[0]) {
// unhook old content event listener if exists
if (contentElement) {
contentElement.off('scroll', debouncedContentScroll);
}
newContentEl.on('scroll', debouncedContentScroll);
newContentEl.attr('scroll-shrink', 'true');
contentElement = newContentEl;
$$rAF(updateToolbarHeight);
}
}
function updateToolbarHeight() {
toolbarHeight = element.prop('offsetHeight');
// Add a negative margin-top the size of the toolbar to the content el.
// The content will start transformed down the toolbarHeight amount,
// so everything looks normal.
//
// As the user scrolls down, the content will be transformed up slowly
// to put the content underneath where the toolbar was.
var margin = (-toolbarHeight * shrinkSpeedFactor) + 'px';
contentElement.css('margin-top', margin);
contentElement.css('margin-bottom', margin);
onContentScroll();
}
function onContentScroll(e) {
var scrollTop = e ? e.target.scrollTop : prevScrollTop;
debouncedUpdateHeight();
y = Math.min(
toolbarHeight / shrinkSpeedFactor,
Math.max(0, y + scrollTop - prevScrollTop)
);
element.css(
$mdConstant.CSS.TRANSFORM,
'translate3d(0,' + (-y * shrinkSpeedFactor) + 'px,0)'
);
contentElement.css(
$mdConstant.CSS.TRANSFORM,
'translate3d(0,' + ((toolbarHeight - y) * shrinkSpeedFactor) + 'px,0)'
);
prevScrollTop = scrollTop;
if (element.hasClass('md-whiteframe-z1')) {
if (!y) {
$timeout(function () { $animate.removeClass(element, 'md-whiteframe-z1'); });
}
} else {
if (y) {
$timeout(function () { $animate.addClass(element, 'md-whiteframe-z1'); });
}
}
}
}
}
};
}
mdToolbarDirective.$inject = ["$$rAF", "$mdConstant", "$mdUtil", "$mdTheming", "$animate", "$timeout"];
})(window, window.angular);

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/md-toolbar{box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;z-index:2;font-size:20px;min-height:64px;width:100%}md-toolbar.md-whiteframe-z1-add,md-toolbar.md-whiteframe-z1-remove{transition:box-shadow .5s linear}md-toolbar *,md-toolbar :after,md-toolbar :before{box-sizing:border-box}md-toolbar.md-tall{height:128px;min-height:128px;max-height:128px}md-toolbar.md-medium-tall{height:88px;min-height:88px;max-height:88px}md-toolbar.md-medium-tall .md-toolbar-tools{height:48px;min-height:48px;max-height:48px}md-toolbar .md-indent{margin-left:64px}md-toolbar~md-content>md-list{padding:0}md-toolbar~md-content>md-list md-list-item:last-child md-divider{display:none}.md-toolbar-tools{font-weight:400;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;height:64px;max-height:64px;padding:0 16px;margin:0}.md-toolbar-tools h1,.md-toolbar-tools h2,.md-toolbar-tools h3{font-size:inherit;font-weight:inherit;margin:inherit}.md-toolbar-tools a{color:inherit;text-decoration:none}.md-toolbar-tools .fill-height{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.md-toolbar-tools .md-button{margin-top:0;margin-bottom:0}.md-toolbar-tools>.md-button:first-child{margin-left:-8px}.md-toolbar-tools>.md-button:last-child{margin-right:-8px}@media screen and (-ms-high-contrast:active){.md-toolbar-tools{border-bottom:1px solid #fff}}

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
!function(t,n,o){"use strict";function e(t,o,e,r,a,i){return{restrict:"E",controller:n.noop,link:function(s,c,m){function l(){function n(n,o){c.parent()[0]===o.parent()[0]&&(f&&f.off("scroll",S),o.on("scroll",S),o.attr("scroll-shrink","true"),f=o,t(r))}function r(){d=c.prop("offsetHeight");var t=-d*h+"px";f.css("margin-top",t),f.css("margin-bottom",t),l()}function l(t){var n=t?t.target.scrollTop:p;$(),u=Math.min(d/h,Math.max(0,u+n-p)),c.css(o.CSS.TRANSFORM,"translate3d(0,"+-u*h+"px,0)"),f.css(o.CSS.TRANSFORM,"translate3d(0,"+(d-u)*h+"px,0)"),p=n,c.hasClass("md-whiteframe-z1")?u||i(function(){a.removeClass(c,"md-whiteframe-z1")}):u&&i(function(){a.addClass(c,"md-whiteframe-z1")})}var d,f,u=0,p=0,h=m.mdShrinkSpeedFactor||.5,S=t.throttle(l),$=e.debounce(r,5e3);s.$on("$mdContentLoaded",n)}r(c),n.isDefined(m.mdScrollShrink)&&l()}}}n.module("material.components.toolbar",["material.core","material.components.content"]).directive("mdToolbar",e),e.$inject=["$$rAF","$mdConstant","$mdUtil","$mdTheming","$animate","$timeout"]}(window,window.angular);