geolocation added on offerCar and travel page

This commit is contained in:
arnaucode
2017-01-27 17:49:04 +01:00
parent d76ea5ca19
commit 2b36c80084
727 changed files with 299906 additions and 18 deletions

View File

@@ -0,0 +1,23 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-autocomplete.md-THEME_NAME-theme {
background: '{{background-A100}}'; }
md-autocomplete.md-THEME_NAME-theme[disabled]:not([md-floating-label]) {
background: '{{background-100}}'; }
md-autocomplete.md-THEME_NAME-theme button md-icon path {
fill: '{{background-600}}'; }
md-autocomplete.md-THEME_NAME-theme button:after {
background: '{{background-600-0.3}}'; }
.md-autocomplete-suggestions-container.md-THEME_NAME-theme {
background: '{{background-A100}}'; }
.md-autocomplete-suggestions-container.md-THEME_NAME-theme li {
color: '{{background-900}}'; }
.md-autocomplete-suggestions-container.md-THEME_NAME-theme li .highlight {
color: '{{background-600}}'; }
.md-autocomplete-suggestions-container.md-THEME_NAME-theme li:hover, .md-autocomplete-suggestions-container.md-THEME_NAME-theme li.selected {
background: '{{background-200}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-autocomplete.md-THEME_NAME-theme{background:'{{background-A100}}'}md-autocomplete.md-THEME_NAME-theme[disabled]:not([md-floating-label]){background:'{{background-100}}'}md-autocomplete.md-THEME_NAME-theme button md-icon path{fill:'{{background-600}}'}md-autocomplete.md-THEME_NAME-theme button:after{background:'{{background-600-0.3}}'}.md-autocomplete-suggestions-container.md-THEME_NAME-theme{background:'{{background-A100}}'}.md-autocomplete-suggestions-container.md-THEME_NAME-theme li{color:'{{background-900}}'}.md-autocomplete-suggestions-container.md-THEME_NAME-theme li .highlight{color:'{{background-600}}'}.md-autocomplete-suggestions-container.md-THEME_NAME-theme li.selected,.md-autocomplete-suggestions-container.md-THEME_NAME-theme li:hover{background:'{{background-200}}'}

View File

@@ -0,0 +1,244 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
@-webkit-keyframes md-autocomplete-list-out {
0% {
-webkit-animation-timing-function: linear;
animation-timing-function: linear; }
50% {
opacity: 0;
height: 40px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
100% {
height: 0;
opacity: 0; } }
@keyframes md-autocomplete-list-out {
0% {
-webkit-animation-timing-function: linear;
animation-timing-function: linear; }
50% {
opacity: 0;
height: 40px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
100% {
height: 0;
opacity: 0; } }
@-webkit-keyframes md-autocomplete-list-in {
0% {
opacity: 0;
height: 0;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
opacity: 0;
height: 40px; }
100% {
opacity: 1;
height: 40px; } }
@keyframes md-autocomplete-list-in {
0% {
opacity: 0;
height: 0;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
opacity: 0;
height: 40px; }
100% {
opacity: 1;
height: 40px; } }
md-autocomplete {
border-radius: 2px;
display: block;
height: 40px;
position: relative;
overflow: visible;
min-width: 190px; }
md-autocomplete[disabled] input {
cursor: default; }
md-autocomplete[md-floating-label] {
border-radius: 0;
background: transparent;
height: auto; }
md-autocomplete[md-floating-label] md-input-container {
padding-bottom: 0px; }
md-autocomplete[md-floating-label] md-autocomplete-wrap {
height: auto; }
md-autocomplete[md-floating-label] button {
position: absolute;
top: auto;
bottom: 0;
right: 0;
width: 30px;
height: 30px; }
md-autocomplete md-autocomplete-wrap {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
box-sizing: border-box;
position: relative;
overflow: visible;
height: 40px; }
md-autocomplete md-autocomplete-wrap.md-menu-showing {
z-index: 51; }
md-autocomplete md-autocomplete-wrap md-input-container, md-autocomplete md-autocomplete-wrap input {
-webkit-box-flex: 1;
-webkit-flex: 1 1 0%;
flex: 1 1 0%;
box-sizing: border-box;
min-width: 0; }
md-autocomplete md-autocomplete-wrap md-progress-linear {
position: absolute;
bottom: -2px;
left: 0; }
md-autocomplete md-autocomplete-wrap md-progress-linear.md-inline {
bottom: 40px;
right: 2px;
left: 2px;
width: auto; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
-webkit-transition: none;
transition: none; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate .md-container {
-webkit-transition: none;
transition: none;
height: 3px; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-enter {
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-enter.ng-enter-active {
opacity: 1; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-leave {
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear; }
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-leave.ng-leave-active {
opacity: 0; }
md-autocomplete input:not(.md-input) {
font-size: 14px;
box-sizing: border-box;
border: none;
box-shadow: none;
outline: none;
background: transparent;
width: 100%;
padding: 0 15px;
line-height: 40px;
height: 40px; }
md-autocomplete input:not(.md-input)::-ms-clear {
display: none; }
md-autocomplete button {
position: relative;
line-height: 20px;
text-align: center;
width: 30px;
height: 30px;
cursor: pointer;
border: none;
border-radius: 50%;
padding: 0;
font-size: 12px;
background: transparent;
margin: auto 5px; }
md-autocomplete button:after {
content: '';
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
md-autocomplete button:focus {
outline: none; }
md-autocomplete button:focus:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
md-autocomplete button md-icon {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0) scale(0.9);
transform: translate3d(-50%, -50%, 0) scale(0.9); }
md-autocomplete button md-icon path {
stroke-width: 0; }
md-autocomplete button.ng-enter {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform 0.15s ease-out;
transition: -webkit-transform 0.15s ease-out;
transition: transform 0.15s ease-out;
transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out; }
md-autocomplete button.ng-enter.ng-enter-active {
-webkit-transform: scale(1);
transform: scale(1); }
md-autocomplete button.ng-leave {
-webkit-transition: -webkit-transform 0.15s ease-out;
transition: -webkit-transform 0.15s ease-out;
transition: transform 0.15s ease-out;
transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out; }
md-autocomplete button.ng-leave.ng-leave-active {
-webkit-transform: scale(0);
transform: scale(0); }
@media screen and (-ms-high-contrast: active) {
md-autocomplete input {
border: 1px solid #fff; }
md-autocomplete li:focus {
color: #fff; } }
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
position: absolute;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
height: 225.5px;
max-height: 225.5px;
z-index: 100; }
.md-virtual-repeat-container.md-not-found {
height: 48px; }
.md-autocomplete-suggestions {
margin: 0;
list-style: none;
padding: 0; }
.md-autocomplete-suggestions li {
font-size: 14px;
overflow: hidden;
padding: 0 15px;
line-height: 48px;
height: 48px;
-webkit-transition: background 0.15s linear;
transition: background 0.15s linear;
margin: 0;
white-space: nowrap;
text-overflow: ellipsis; }
.md-autocomplete-suggestions li:focus {
outline: none; }
.md-autocomplete-suggestions li:not(.md-not-found-wrapper) {
cursor: pointer; }
@media screen and (-ms-high-contrast: active) {
md-autocomplete,
.md-autocomplete-suggestions {
border: 1px solid #fff; } }

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,10 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-backdrop {
background-color: '{{background-900-0.0}}'; }
md-backdrop.md-opaque.md-THEME_NAME-theme {
background-color: '{{background-900-1.0}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-backdrop{background-color:'{{background-900-0.0}}'}md-backdrop.md-opaque.md-THEME_NAME-theme{background-color:'{{background-900-1.0}}'}

View File

@@ -0,0 +1,42 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-backdrop {
-webkit-transition: opacity 450ms;
transition: opacity 450ms;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 50; }
md-backdrop.md-menu-backdrop {
position: fixed !important;
z-index: 99; }
md-backdrop.md-select-backdrop {
z-index: 81;
-webkit-transition-duration: 0;
transition-duration: 0; }
md-backdrop.md-dialog-backdrop {
z-index: 79; }
md-backdrop.md-bottom-sheet-backdrop {
z-index: 69; }
md-backdrop.md-sidenav-backdrop {
z-index: 59; }
md-backdrop.md-click-catcher {
position: absolute; }
md-backdrop.md-opaque {
opacity: .48; }
md-backdrop.md-opaque.ng-enter {
opacity: 0; }
md-backdrop.md-opaque.ng-enter.md-opaque.ng-enter-active {
opacity: .48; }
md-backdrop.md-opaque.ng-leave {
opacity: .48;
-webkit-transition: opacity 400ms;
transition: opacity 400ms; }
md-backdrop.md-opaque.ng-leave.md-opaque.ng-leave-active {
opacity: 0; }

View File

@@ -0,0 +1,93 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.backdrop');
goog.require('ngmaterial.core');
/*
* @ngdoc module
* @name material.components.backdrop
* @description Backdrop
*/
/**
* @ngdoc directive
* @name mdBackdrop
* @module material.components.backdrop
*
* @restrict E
*
* @description
* `<md-backdrop>` is a backdrop element used by other components, such as dialog and bottom sheet.
* Apply class `opaque` to make the backdrop use the theme backdrop color.
*
*/
angular
.module('material.components.backdrop', ['material.core'])
.directive('mdBackdrop', ["$mdTheming", "$mdUtil", "$animate", "$rootElement", "$window", "$log", "$$rAF", "$document", function BackdropDirective($mdTheming, $mdUtil, $animate, $rootElement, $window, $log, $$rAF, $document) {
var ERROR_CSS_POSITION = '<md-backdrop> may not work properly in a scrolled, static-positioned parent container.';
return {
restrict: 'E',
link: postLink
};
function postLink(scope, element, attrs) {
// backdrop may be outside the $rootElement, tell ngAnimate to animate regardless
if ($animate.pin) $animate.pin(element, $rootElement);
var bodyStyles;
$$rAF(function() {
// If body scrolling has been disabled using mdUtil.disableBodyScroll(),
// adjust the 'backdrop' height to account for the fixed 'body' top offset.
// Note that this can be pretty expensive and is better done inside the $$rAF.
bodyStyles = $window.getComputedStyle($document[0].body);
if (bodyStyles.position === 'fixed') {
var resizeHandler = $mdUtil.debounce(function(){
bodyStyles = $window.getComputedStyle($document[0].body);
resize();
}, 60, null, false);
resize();
angular.element($window).on('resize', resizeHandler);
scope.$on('$destroy', function() {
angular.element($window).off('resize', resizeHandler);
});
}
// Often $animate.enter() is used to append the backDrop element
// so let's wait until $animate is done...
var parent = element.parent();
if (parent.length) {
if (parent[0].nodeName === 'BODY') {
element.css('position', 'fixed');
}
var styles = $window.getComputedStyle(parent[0]);
if (styles.position === 'static') {
// backdrop uses position:absolute and will not work properly with parent position:static (default)
$log.warn(ERROR_CSS_POSITION);
}
// Only inherit the parent if the backdrop has a parent.
$mdTheming.inherit(element, parent);
}
});
function resize() {
var viewportHeight = parseInt(bodyStyles.height, 10) + Math.abs(parseInt(bodyStyles.top, 10));
element.css('height', viewportHeight + 'px');
}
}
}]);
ngmaterial.components.backdrop = angular.module("material.components.backdrop");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-backdrop{-webkit-transition:opacity .45s;transition:opacity .45s;position:absolute;top:0;bottom:0;left:0;right:0;z-index:50}md-backdrop.md-menu-backdrop{position:fixed!important;z-index:99}md-backdrop.md-select-backdrop{z-index:81;-webkit-transition-duration:0;transition-duration:0}md-backdrop.md-dialog-backdrop{z-index:79}md-backdrop.md-bottom-sheet-backdrop{z-index:69}md-backdrop.md-sidenav-backdrop{z-index:59}md-backdrop.md-click-catcher{position:absolute}md-backdrop.md-opaque{opacity:.48}md-backdrop.md-opaque.ng-enter{opacity:0}md-backdrop.md-opaque.ng-enter.md-opaque.ng-enter-active{opacity:.48}md-backdrop.md-opaque.ng-leave{opacity:.48;-webkit-transition:opacity .4s;transition:opacity .4s}md-backdrop.md-opaque.ng-leave.md-opaque.ng-leave-active{opacity:0}

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
goog.provide("ngmaterial.components.backdrop"),goog.require("ngmaterial.core"),angular.module("material.components.backdrop",["material.core"]).directive("mdBackdrop",["$mdTheming","$mdUtil","$animate","$rootElement","$window","$log","$$rAF","$document",function(e,o,n,t,r,a,i,c){function d(d,l,m){function s(){var e=parseInt(u.height,10)+Math.abs(parseInt(u.top,10));l.css("height",e+"px")}n.pin&&n.pin(l,t);var u;i(function(){if(u=r.getComputedStyle(c[0].body),"fixed"===u.position){var n=o.debounce(function(){u=r.getComputedStyle(c[0].body),s()},60,null,!1);s(),angular.element(r).on("resize",n),d.$on("$destroy",function(){angular.element(r).off("resize",n)})}var t=l.parent();if(t.length){"BODY"===t[0].nodeName&&l.css("position","fixed");var i=r.getComputedStyle(t[0]);"static"===i.position&&a.warn(p),e.inherit(l,t)}})}var p="<md-backdrop> may not work properly in a scrolled, static-positioned parent container.";return{restrict:"E",link:d}}]),ngmaterial.components.backdrop=angular.module("material.components.backdrop");

View File

@@ -0,0 +1,15 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-bottom-sheet.md-THEME_NAME-theme {
background-color: '{{background-50}}';
border-top-color: '{{background-300}}'; }
md-bottom-sheet.md-THEME_NAME-theme.md-list md-list-item {
color: '{{foreground-1}}'; }
md-bottom-sheet.md-THEME_NAME-theme .md-subheader {
background-color: '{{background-50}}'; }
md-bottom-sheet.md-THEME_NAME-theme .md-subheader {
color: '{{foreground-1}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-bottom-sheet.md-THEME_NAME-theme{background-color:'{{background-50}}';border-top-color:'{{background-300}}'}md-bottom-sheet.md-THEME_NAME-theme.md-list md-list-item{color:'{{foreground-1}}'}md-bottom-sheet.md-THEME_NAME-theme .md-subheader{background-color:'{{background-50}}';color:'{{foreground-1}}'}

View File

@@ -0,0 +1,174 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-bottom-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 8px 16px 88px 16px;
z-index: 70;
border-top-width: 1px;
border-top-style: solid;
-webkit-transform: translate3d(0, 80px, 0);
transform: translate3d(0, 80px, 0);
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform; }
md-bottom-sheet.md-has-header {
padding-top: 0; }
md-bottom-sheet.ng-enter {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
md-bottom-sheet.ng-enter-active {
opacity: 1;
display: block;
-webkit-transform: translate3d(0, 80px, 0) !important;
transform: translate3d(0, 80px, 0) !important; }
md-bottom-sheet.ng-leave-active {
-webkit-transform: translate3d(0, 100%, 0) !important;
transform: translate3d(0, 100%, 0) !important;
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-bottom-sheet .md-subheader {
background-color: transparent;
font-family: Roboto, "Helvetica Neue", sans-serif;
line-height: 56px;
padding: 0;
white-space: nowrap; }
md-bottom-sheet md-inline-icon {
display: inline-block;
height: 24px;
width: 24px;
fill: #444; }
md-bottom-sheet md-list-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
outline: none; }
md-bottom-sheet md-list-item:hover {
cursor: pointer; }
md-bottom-sheet.md-list md-list-item {
padding: 0;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center;
height: 48px; }
md-bottom-sheet.md-grid {
padding-left: 24px;
padding-right: 24px;
padding-top: 0; }
md-bottom-sheet.md-grid md-list {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center; }
md-bottom-sheet.md-grid md-list-item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-transition: all 0.5s;
transition: all 0.5s;
height: 96px;
margin-top: 8px;
margin-bottom: 8px;
/* Mixin for how many grid items to show per row */ }
@media (max-width: 960px) {
md-bottom-sheet.md-grid md-list-item {
-webkit-box-flex: 1;
-webkit-flex: 1 1 33.33333%;
flex: 1 1 33.33333%;
max-width: 33.33333%; }
md-bottom-sheet.md-grid md-list-item:nth-of-type(3n + 1) {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-grid-row-align: flex-end;
align-items: flex-end; } }
@media (min-width: 960px) and (max-width: 1279px) {
md-bottom-sheet.md-grid md-list-item {
-webkit-box-flex: 1;
-webkit-flex: 1 1 25%;
flex: 1 1 25%;
max-width: 25%; } }
@media (min-width: 1280px) and (max-width: 1919px) {
md-bottom-sheet.md-grid md-list-item {
-webkit-box-flex: 1;
-webkit-flex: 1 1 16.66667%;
flex: 1 1 16.66667%;
max-width: 16.66667%; } }
@media (min-width: 1920px) {
md-bottom-sheet.md-grid md-list-item {
-webkit-box-flex: 1;
-webkit-flex: 1 1 14.28571%;
flex: 1 1 14.28571%;
max-width: 14.28571%; } }
md-bottom-sheet.md-grid md-list-item::before {
display: none; }
md-bottom-sheet.md-grid md-list-item .md-list-item-content {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
width: 48px;
padding-bottom: 16px; }
md-bottom-sheet.md-grid md-list-item .md-grid-item-content {
border: 1px solid transparent;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
width: 80px; }
md-bottom-sheet.md-grid md-list-item .md-grid-text {
font-weight: 400;
line-height: 16px;
font-size: 13px;
margin: 0;
white-space: nowrap;
width: 64px;
text-align: center;
text-transform: none;
padding-top: 8px; }
@media screen and (-ms-high-contrast: active) {
md-bottom-sheet {
border: 1px solid #fff; } }

View File

@@ -0,0 +1,301 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.bottomSheet');
goog.require('ngmaterial.components.backdrop');
goog.require('ngmaterial.core');
/**
* @ngdoc module
* @name material.components.bottomSheet
* @description
* BottomSheet
*/
MdBottomSheetDirective.$inject = ["$mdBottomSheet"];
MdBottomSheetProvider.$inject = ["$$interimElementProvider"];
angular
.module('material.components.bottomSheet', [
'material.core',
'material.components.backdrop'
])
.directive('mdBottomSheet', MdBottomSheetDirective)
.provider('$mdBottomSheet', MdBottomSheetProvider);
/* ngInject */
function MdBottomSheetDirective($mdBottomSheet) {
return {
restrict: 'E',
link : function postLink(scope, element) {
element.addClass('_md'); // private md component indicator for styling
// When navigation force destroys an interimElement, then
// listen and $destroy() that interim instance...
scope.$on('$destroy', function() {
$mdBottomSheet.destroy();
});
}
};
}
/**
* @ngdoc service
* @name $mdBottomSheet
* @module material.components.bottomSheet
*
* @description
* `$mdBottomSheet` opens a bottom sheet over the app and provides a simple promise API.
*
* ## Restrictions
*
* - The bottom sheet's template must have an outer `<md-bottom-sheet>` element.
* - Add the `md-grid` class to the bottom sheet for a grid layout.
* - Add the `md-list` class to the bottom sheet for a list layout.
*
* @usage
* <hljs lang="html">
* <div ng-controller="MyController">
* <md-button ng-click="openBottomSheet()">
* Open a Bottom Sheet!
* </md-button>
* </div>
* </hljs>
* <hljs lang="js">
* var app = angular.module('app', ['ngMaterial']);
* app.controller('MyController', function($scope, $mdBottomSheet) {
* $scope.openBottomSheet = function() {
* $mdBottomSheet.show({
* template: '<md-bottom-sheet>Hello!</md-bottom-sheet>'
* });
* };
* });
* </hljs>
*/
/**
* @ngdoc method
* @name $mdBottomSheet#show
*
* @description
* Show a bottom sheet with the specified options.
*
* @param {object} options An options object, with the following properties:
*
* - `templateUrl` - `{string=}`: The url of an html template file that will
* be used as the content of the bottom sheet. Restrictions: the template must
* have an outer `md-bottom-sheet` element.
* - `template` - `{string=}`: Same as templateUrl, except this is an actual
* template string.
* - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.
* This scope will be destroyed when the bottom sheet is removed unless `preserveScope` is set to true.
* - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
* - `controller` - `{string=}`: The controller to associate with this bottom sheet.
* - `locals` - `{string=}`: An object containing key/value pairs. The keys will
* be used as names of values to inject into the controller. For example,
* `locals: {three: 3}` would inject `three` into the controller with the value
* of 3.
* - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the bottom sheet to
* close it. Default true.
* - `disableBackdrop` - `{boolean=}`: When set to true, the bottomsheet will not show a backdrop.
* - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the bottom sheet.
* Default true.
* - `resolve` - `{object=}`: Similar to locals, except it takes promises as values
* and the bottom sheet will not open until the promises resolve.
* - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
* - `parent` - `{element=}`: The element to append the bottom sheet to. The `parent` may be a `function`, `string`,
* `object`, or null. Defaults to appending to the body of the root element (or the root element) of the application.
* e.g. angular.element(document.getElementById('content')) or "#content"
* - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the bottom sheet is open.
* Default true.
*
* @returns {promise} A promise that can be resolved with `$mdBottomSheet.hide()` or
* rejected with `$mdBottomSheet.cancel()`.
*/
/**
* @ngdoc method
* @name $mdBottomSheet#hide
*
* @description
* Hide the existing bottom sheet and resolve the promise returned from
* `$mdBottomSheet.show()`. This call will close the most recently opened/current bottomsheet (if any).
*
* @param {*=} response An argument for the resolved promise.
*
*/
/**
* @ngdoc method
* @name $mdBottomSheet#cancel
*
* @description
* Hide the existing bottom sheet and reject the promise returned from
* `$mdBottomSheet.show()`.
*
* @param {*=} response An argument for the rejected promise.
*
*/
function MdBottomSheetProvider($$interimElementProvider) {
// how fast we need to flick down to close the sheet, pixels/ms
bottomSheetDefaults.$inject = ["$animate", "$mdConstant", "$mdUtil", "$mdTheming", "$mdBottomSheet", "$rootElement", "$mdGesture", "$log"];
var CLOSING_VELOCITY = 0.5;
var PADDING = 80; // same as css
return $$interimElementProvider('$mdBottomSheet')
.setDefaults({
methods: ['disableParentScroll', 'escapeToClose', 'clickOutsideToClose'],
options: bottomSheetDefaults
});
/* ngInject */
function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement,
$mdGesture, $log) {
var backdrop;
return {
themable: true,
onShow: onShow,
onRemove: onRemove,
disableBackdrop: false,
escapeToClose: true,
clickOutsideToClose: true,
disableParentScroll: true
};
function onShow(scope, element, options, controller) {
element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');
// prevent tab focus or click focus on the bottom-sheet container
element.attr('tabindex',"-1");
// Once the md-bottom-sheet has `ng-cloak` applied on his template the opening animation will not work properly.
// This is a very common problem, so we have to notify the developer about this.
if (element.hasClass('ng-cloak')) {
var message = '$mdBottomSheet: using `<md-bottom-sheet ng-cloak >` will affect the bottom-sheet opening animations.';
$log.warn( message, element[0] );
}
if (!options.disableBackdrop) {
// Add a backdrop that will close on click
backdrop = $mdUtil.createBackdrop(scope, "md-bottom-sheet-backdrop md-opaque");
// Prevent mouse focus on backdrop; ONLY programatic focus allowed.
// This allows clicks on backdrop to propogate to the $rootElement and
// ESC key events to be detected properly.
backdrop[0].tabIndex = -1;
if (options.clickOutsideToClose) {
backdrop.on('click', function() {
$mdUtil.nextTick($mdBottomSheet.cancel,true);
});
}
$mdTheming.inherit(backdrop, options.parent);
$animate.enter(backdrop, options.parent, null);
}
var bottomSheet = new BottomSheet(element, options.parent);
options.bottomSheet = bottomSheet;
$mdTheming.inherit(bottomSheet.element, options.parent);
if (options.disableParentScroll) {
options.restoreScroll = $mdUtil.disableScrollAround(bottomSheet.element, options.parent);
}
return $animate.enter(bottomSheet.element, options.parent, backdrop)
.then(function() {
var focusable = $mdUtil.findFocusTarget(element) || angular.element(
element[0].querySelector('button') ||
element[0].querySelector('a') ||
element[0].querySelector($mdUtil.prefixer('ng-click', true))
) || backdrop;
if (options.escapeToClose) {
options.rootElementKeyupCallback = function(e) {
if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
$mdUtil.nextTick($mdBottomSheet.cancel,true);
}
};
$rootElement.on('keyup', options.rootElementKeyupCallback);
focusable && focusable.focus();
}
});
}
function onRemove(scope, element, options) {
var bottomSheet = options.bottomSheet;
if (!options.disableBackdrop) $animate.leave(backdrop);
return $animate.leave(bottomSheet.element).then(function() {
if (options.disableParentScroll) {
options.restoreScroll();
delete options.restoreScroll;
}
bottomSheet.cleanup();
});
}
/**
* BottomSheet class to apply bottom-sheet behavior to an element
*/
function BottomSheet(element, parent) {
var deregister = $mdGesture.register(parent, 'drag', { horizontal: false });
parent.on('$md.dragstart', onDragStart)
.on('$md.drag', onDrag)
.on('$md.dragend', onDragEnd);
return {
element: element,
cleanup: function cleanup() {
deregister();
parent.off('$md.dragstart', onDragStart);
parent.off('$md.drag', onDrag);
parent.off('$md.dragend', onDragEnd);
}
};
function onDragStart(ev) {
// Disable transitions on transform so that it feels fast
element.css($mdConstant.CSS.TRANSITION_DURATION, '0ms');
}
function onDrag(ev) {
var transform = ev.pointer.distanceY;
if (transform < 5) {
// Slow down drag when trying to drag up, and stop after PADDING
transform = Math.max(-PADDING, transform / 2);
}
element.css($mdConstant.CSS.TRANSFORM, 'translate3d(0,' + (PADDING + transform) + 'px,0)');
}
function onDragEnd(ev) {
if (ev.pointer.distanceY > 0 &&
(ev.pointer.distanceY > 20 || Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)) {
var distanceRemaining = element.prop('offsetHeight') - ev.pointer.distanceY;
var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);
element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');
$mdUtil.nextTick($mdBottomSheet.cancel,true);
} else {
element.css($mdConstant.CSS.TRANSITION_DURATION, '');
element.css($mdConstant.CSS.TRANSFORM, '');
}
}
}
}
}
ngmaterial.components.bottomSheet = angular.module("material.components.bottomSheet");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-bottom-sheet{position:absolute;left:0;right:0;bottom:0;padding:8px 16px 88px;z-index:70;border-top-width:1px;border-top-style:solid;-webkit-transform:translate3d(0,80px,0);transform:translate3d(0,80px,0);-webkit-transition:all .4s cubic-bezier(.25,.8,.25,1);transition:all .4s cubic-bezier(.25,.8,.25,1);-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}md-bottom-sheet.md-has-header{padding-top:0}md-bottom-sheet.ng-enter{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}md-bottom-sheet.ng-enter-active{opacity:1;display:block;-webkit-transform:translate3d(0,80px,0)!important;transform:translate3d(0,80px,0)!important}md-bottom-sheet.ng-leave-active{-webkit-transform:translate3d(0,100%,0)!important;transform:translate3d(0,100%,0)!important;-webkit-transition:all .3s cubic-bezier(.55,0,.55,.2);transition:all .3s cubic-bezier(.55,0,.55,.2)}md-bottom-sheet .md-subheader{background-color:transparent;font-family:Roboto,Helvetica Neue,sans-serif;line-height:56px;padding:0;white-space:nowrap}md-bottom-sheet md-inline-icon{display:inline-block;height:24px;width:24px;fill:#444}md-bottom-sheet md-list-item{display:-webkit-box;display:-webkit-flex;display:flex;outline:none}md-bottom-sheet md-list-item:hover{cursor:pointer}md-bottom-sheet.md-list md-list-item{padding:0;-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;height:48px}md-bottom-sheet.md-grid{padding-left:24px;padding-right:24px;padding-top:0}md-bottom-sheet.md-grid md-list{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap}md-bottom-sheet.md-grid md-list,md-bottom-sheet.md-grid md-list-item{-webkit-box-direction:normal;-webkit-transition:all .5s;transition:all .5s;-webkit-box-align:center;-webkit-align-items:center;align-items:center}md-bottom-sheet.md-grid md-list-item{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;-ms-grid-row-align:center;height:96px;margin-top:8px;margin-bottom:8px}@media (max-width:960px){md-bottom-sheet.md-grid md-list-item{-webkit-box-flex:1;-webkit-flex:1 1 33.33333%;flex:1 1 33.33333%;max-width:33.33333%}md-bottom-sheet.md-grid md-list-item:nth-of-type(3n+1){-webkit-box-align:start;-webkit-align-items:flex-start;-ms-grid-row-align:flex-start;align-items:flex-start}md-bottom-sheet.md-grid md-list-item:nth-of-type(3n){-webkit-box-align:end;-webkit-align-items:flex-end;-ms-grid-row-align:flex-end;align-items:flex-end}}@media (min-width:960px) and (max-width:1279px){md-bottom-sheet.md-grid md-list-item{-webkit-box-flex:1;-webkit-flex:1 1 25%;flex:1 1 25%;max-width:25%}}@media (min-width:1280px) and (max-width:1919px){md-bottom-sheet.md-grid md-list-item{-webkit-box-flex:1;-webkit-flex:1 1 16.66667%;flex:1 1 16.66667%;max-width:16.66667%}}@media (min-width:1920px){md-bottom-sheet.md-grid md-list-item{-webkit-box-flex:1;-webkit-flex:1 1 14.28571%;flex:1 1 14.28571%;max-width:14.28571%}}md-bottom-sheet.md-grid md-list-item:before{display:none}md-bottom-sheet.md-grid md-list-item .md-list-item-content{width:48px;padding-bottom:16px}md-bottom-sheet.md-grid md-list-item .md-grid-item-content,md-bottom-sheet.md-grid md-list-item .md-list-item-content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center}md-bottom-sheet.md-grid md-list-item .md-grid-item-content{border:1px solid transparent;width:80px}md-bottom-sheet.md-grid md-list-item .md-grid-text{font-weight:400;line-height:16px;font-size:13px;margin:0;white-space:nowrap;width:64px;text-align:center;text-transform:none;padding-top:8px}@media screen and (-ms-high-contrast:active){md-bottom-sheet{border:1px solid #fff}}

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
function MdBottomSheetDirective(e){return{restrict:"E",link:function(t,o){o.addClass("_md"),t.$on("$destroy",function(){e.destroy()})}}}function MdBottomSheetProvider(e){function t(e,t,r,a,i,c,l,m){function d(o,n,l,d){if(n=r.extractElementByName(n,"md-bottom-sheet"),n.attr("tabindex","-1"),n.hasClass("ng-cloak")){var s="$mdBottomSheet: using `<md-bottom-sheet ng-cloak >` will affect the bottom-sheet opening animations.";m.warn(s,n[0])}l.disableBackdrop||(S=r.createBackdrop(o,"md-bottom-sheet-backdrop md-opaque"),S[0].tabIndex=-1,l.clickOutsideToClose&&S.on("click",function(){r.nextTick(i.cancel,!0)}),a.inherit(S,l.parent),e.enter(S,l.parent,null));var p=new u(n,l.parent);return l.bottomSheet=p,a.inherit(p.element,l.parent),l.disableParentScroll&&(l.restoreScroll=r.disableScrollAround(p.element,l.parent)),e.enter(p.element,l.parent,S).then(function(){var e=r.findFocusTarget(n)||angular.element(n[0].querySelector("button")||n[0].querySelector("a")||n[0].querySelector(r.prefixer("ng-click",!0)))||S;l.escapeToClose&&(l.rootElementKeyupCallback=function(e){e.keyCode===t.KEY_CODE.ESCAPE&&r.nextTick(i.cancel,!0)},c.on("keyup",l.rootElementKeyupCallback),e&&e.focus())})}function s(t,o,n){var r=n.bottomSheet;return n.disableBackdrop||e.leave(S),e.leave(r.element).then(function(){n.disableParentScroll&&(n.restoreScroll(),delete n.restoreScroll),r.cleanup()})}function u(e,a){function c(o){e.css(t.CSS.TRANSITION_DURATION,"0ms")}function m(o){var r=o.pointer.distanceY;r<5&&(r=Math.max(-n,r/2)),e.css(t.CSS.TRANSFORM,"translate3d(0,"+(n+r)+"px,0)")}function d(n){if(n.pointer.distanceY>0&&(n.pointer.distanceY>20||Math.abs(n.pointer.velocityY)>o)){var a=e.prop("offsetHeight")-n.pointer.distanceY,c=Math.min(a/n.pointer.velocityY*.75,500);e.css(t.CSS.TRANSITION_DURATION,c+"ms"),r.nextTick(i.cancel,!0)}else e.css(t.CSS.TRANSITION_DURATION,""),e.css(t.CSS.TRANSFORM,"")}var s=l.register(a,"drag",{horizontal:!1});return a.on("$md.dragstart",c).on("$md.drag",m).on("$md.dragend",d),{element:e,cleanup:function(){s(),a.off("$md.dragstart",c),a.off("$md.drag",m),a.off("$md.dragend",d)}}}var S;return{themable:!0,onShow:d,onRemove:s,disableBackdrop:!1,escapeToClose:!0,clickOutsideToClose:!0,disableParentScroll:!0}}t.$inject=["$animate","$mdConstant","$mdUtil","$mdTheming","$mdBottomSheet","$rootElement","$mdGesture","$log"];var o=.5,n=80;return e("$mdBottomSheet").setDefaults({methods:["disableParentScroll","escapeToClose","clickOutsideToClose"],options:t})}goog.provide("ngmaterial.components.bottomSheet"),goog.require("ngmaterial.components.backdrop"),goog.require("ngmaterial.core"),MdBottomSheetDirective.$inject=["$mdBottomSheet"],MdBottomSheetProvider.$inject=["$$interimElementProvider"],angular.module("material.components.bottomSheet",["material.core","material.components.backdrop"]).directive("mdBottomSheet",MdBottomSheetDirective).provider("$mdBottomSheet",MdBottomSheetProvider),ngmaterial.components.bottomSheet=angular.module("material.components.bottomSheet");

View File

@@ -0,0 +1,118 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
.md-button.md-THEME_NAME-theme:not([disabled]):hover {
background-color: '{{background-500-0.2}}'; }
.md-button.md-THEME_NAME-theme:not([disabled]).md-focused {
background-color: '{{background-500-0.2}}'; }
.md-button.md-THEME_NAME-theme:not([disabled]).md-icon-button:hover {
background-color: transparent; }
.md-button.md-THEME_NAME-theme.md-fab {
background-color: '{{accent-color}}';
color: '{{accent-contrast}}'; }
.md-button.md-THEME_NAME-theme.md-fab md-icon {
color: '{{accent-contrast}}'; }
.md-button.md-THEME_NAME-theme.md-fab:not([disabled]):hover {
background-color: '{{accent-A700}}'; }
.md-button.md-THEME_NAME-theme.md-fab:not([disabled]).md-focused {
background-color: '{{accent-A700}}'; }
.md-button.md-THEME_NAME-theme.md-primary {
color: '{{primary-color}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised, .md-button.md-THEME_NAME-theme.md-primary.md-fab {
color: '{{primary-contrast}}';
background-color: '{{primary-color}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]) md-icon {
color: '{{primary-contrast}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {
background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {
background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary:not([disabled]) md-icon {
color: '{{primary-color}}'; }
.md-button.md-THEME_NAME-theme.md-fab {
background-color: '{{accent-color}}';
color: '{{accent-contrast}}'; }
.md-button.md-THEME_NAME-theme.md-fab:not([disabled]) .md-icon {
color: '{{accent-contrast}}'; }
.md-button.md-THEME_NAME-theme.md-fab:not([disabled]):hover {
background-color: '{{accent-A700}}'; }
.md-button.md-THEME_NAME-theme.md-fab:not([disabled]).md-focused {
background-color: '{{accent-A700}}'; }
.md-button.md-THEME_NAME-theme.md-raised {
color: '{{background-900}}';
background-color: '{{background-50}}'; }
.md-button.md-THEME_NAME-theme.md-raised:not([disabled]) md-icon {
color: '{{background-900}}'; }
.md-button.md-THEME_NAME-theme.md-raised:not([disabled]):hover {
background-color: '{{background-50}}'; }
.md-button.md-THEME_NAME-theme.md-raised:not([disabled]).md-focused {
background-color: '{{background-200}}'; }
.md-button.md-THEME_NAME-theme.md-warn {
color: '{{warn-color}}'; }
.md-button.md-THEME_NAME-theme.md-warn.md-raised, .md-button.md-THEME_NAME-theme.md-warn.md-fab {
color: '{{warn-contrast}}';
background-color: '{{warn-color}}'; }
.md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]) md-icon {
color: '{{warn-contrast}}'; }
.md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]):hover {
background-color: '{{warn-600}}'; }
.md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]).md-focused {
background-color: '{{warn-600}}'; }
.md-button.md-THEME_NAME-theme.md-warn:not([disabled]) md-icon {
color: '{{warn-color}}'; }
.md-button.md-THEME_NAME-theme.md-accent {
color: '{{accent-color}}'; }
.md-button.md-THEME_NAME-theme.md-accent.md-raised, .md-button.md-THEME_NAME-theme.md-accent.md-fab {
color: '{{accent-contrast}}';
background-color: '{{accent-color}}'; }
.md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]) md-icon {
color: '{{accent-contrast}}'; }
.md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]):hover {
background-color: '{{accent-A700}}'; }
.md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]).md-focused {
background-color: '{{accent-A700}}'; }
.md-button.md-THEME_NAME-theme.md-accent:not([disabled]) md-icon {
color: '{{accent-color}}'; }
.md-button.md-THEME_NAME-theme[disabled], .md-button.md-THEME_NAME-theme.md-raised[disabled], .md-button.md-THEME_NAME-theme.md-fab[disabled], .md-button.md-THEME_NAME-theme.md-accent[disabled], .md-button.md-THEME_NAME-theme.md-warn[disabled] {
color: '{{foreground-3}}';
cursor: default; }
.md-button.md-THEME_NAME-theme[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-raised[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-fab[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-accent[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-warn[disabled] md-icon {
color: '{{foreground-3}}'; }
.md-button.md-THEME_NAME-theme.md-raised[disabled], .md-button.md-THEME_NAME-theme.md-fab[disabled] {
background-color: '{{foreground-4}}'; }
.md-button.md-THEME_NAME-theme[disabled] {
background-color: transparent; }
._md a.md-THEME_NAME-theme:not(.md-button).md-primary {
color: '{{primary-color}}'; }
._md a.md-THEME_NAME-theme:not(.md-button).md-primary:hover {
color: '{{primary-700}}'; }
._md a.md-THEME_NAME-theme:not(.md-button).md-accent {
color: '{{accent-color}}'; }
._md a.md-THEME_NAME-theme:not(.md-button).md-accent:hover {
color: '{{accent-700}}'; }
._md a.md-THEME_NAME-theme:not(.md-button).md-accent {
color: '{{accent-color}}'; }
._md a.md-THEME_NAME-theme:not(.md-button).md-accent:hover {
color: '{{accent-A700}}'; }
._md a.md-THEME_NAME-theme:not(.md-button).md-warn {
color: '{{warn-color}}'; }
._md a.md-THEME_NAME-theme:not(.md-button).md-warn:hover {
color: '{{warn-700}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/.md-button.md-THEME_NAME-theme:not([disabled]).md-focused,.md-button.md-THEME_NAME-theme:not([disabled]):hover{background-color:'{{background-500-0.2}}'}.md-button.md-THEME_NAME-theme:not([disabled]).md-icon-button:hover{background-color:transparent}.md-button.md-THEME_NAME-theme.md-fab md-icon{color:'{{accent-contrast}}'}.md-button.md-THEME_NAME-theme.md-primary{color:'{{primary-color}}'}.md-button.md-THEME_NAME-theme.md-primary.md-fab,.md-button.md-THEME_NAME-theme.md-primary.md-raised{color:'{{primary-contrast}}';background-color:'{{primary-color}}'}.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]) md-icon,.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]) md-icon{color:'{{primary-contrast}}'}.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused,.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover,.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused,.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]):hover{background-color:'{{primary-600}}'}.md-button.md-THEME_NAME-theme.md-primary:not([disabled]) md-icon{color:'{{primary-color}}'}.md-button.md-THEME_NAME-theme.md-fab{background-color:'{{accent-color}}';color:'{{accent-contrast}}'}.md-button.md-THEME_NAME-theme.md-fab:not([disabled]) .md-icon{color:'{{accent-contrast}}'}.md-button.md-THEME_NAME-theme.md-fab:not([disabled]).md-focused,.md-button.md-THEME_NAME-theme.md-fab:not([disabled]):hover{background-color:'{{accent-A700}}'}.md-button.md-THEME_NAME-theme.md-raised{color:'{{background-900}}';background-color:'{{background-50}}'}.md-button.md-THEME_NAME-theme.md-raised:not([disabled]) md-icon{color:'{{background-900}}'}.md-button.md-THEME_NAME-theme.md-raised:not([disabled]):hover{background-color:'{{background-50}}'}.md-button.md-THEME_NAME-theme.md-raised:not([disabled]).md-focused{background-color:'{{background-200}}'}.md-button.md-THEME_NAME-theme.md-warn{color:'{{warn-color}}'}.md-button.md-THEME_NAME-theme.md-warn.md-fab,.md-button.md-THEME_NAME-theme.md-warn.md-raised{color:'{{warn-contrast}}';background-color:'{{warn-color}}'}.md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]) md-icon,.md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]) md-icon{color:'{{warn-contrast}}'}.md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]).md-focused,.md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]):hover,.md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]).md-focused,.md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]):hover{background-color:'{{warn-600}}'}.md-button.md-THEME_NAME-theme.md-warn:not([disabled]) md-icon{color:'{{warn-color}}'}.md-button.md-THEME_NAME-theme.md-accent{color:'{{accent-color}}'}.md-button.md-THEME_NAME-theme.md-accent.md-fab,.md-button.md-THEME_NAME-theme.md-accent.md-raised{color:'{{accent-contrast}}';background-color:'{{accent-color}}'}.md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]) md-icon,.md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]) md-icon{color:'{{accent-contrast}}'}.md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]).md-focused,.md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]):hover,.md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]).md-focused,.md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]):hover{background-color:'{{accent-A700}}'}.md-button.md-THEME_NAME-theme.md-accent:not([disabled]) md-icon{color:'{{accent-color}}'}.md-button.md-THEME_NAME-theme.md-accent[disabled],.md-button.md-THEME_NAME-theme.md-fab[disabled],.md-button.md-THEME_NAME-theme.md-raised[disabled],.md-button.md-THEME_NAME-theme.md-warn[disabled],.md-button.md-THEME_NAME-theme[disabled]{color:'{{foreground-3}}';cursor:default}.md-button.md-THEME_NAME-theme.md-accent[disabled] md-icon,.md-button.md-THEME_NAME-theme.md-fab[disabled] md-icon,.md-button.md-THEME_NAME-theme.md-raised[disabled] md-icon,.md-button.md-THEME_NAME-theme.md-warn[disabled] md-icon,.md-button.md-THEME_NAME-theme[disabled] md-icon{color:'{{foreground-3}}'}.md-button.md-THEME_NAME-theme.md-fab[disabled],.md-button.md-THEME_NAME-theme.md-raised[disabled]{background-color:'{{foreground-4}}'}.md-button.md-THEME_NAME-theme[disabled]{background-color:transparent}._md a.md-THEME_NAME-theme:not(.md-button).md-primary{color:'{{primary-color}}'}._md a.md-THEME_NAME-theme:not(.md-button).md-primary:hover{color:'{{primary-700}}'}._md a.md-THEME_NAME-theme:not(.md-button).md-accent:hover{color:'{{accent-700}}'}._md a.md-THEME_NAME-theme:not(.md-button).md-accent{color:'{{accent-color}}'}._md a.md-THEME_NAME-theme:not(.md-button).md-accent:hover{color:'{{accent-A700}}'}._md a.md-THEME_NAME-theme:not(.md-button).md-warn{color:'{{warn-color}}'}._md a.md-THEME_NAME-theme:not(.md-button).md-warn:hover{color:'{{warn-700}}'}

View File

@@ -0,0 +1,197 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
button.md-button::-moz-focus-inner {
border: 0; }
.md-button {
display: inline-block;
position: relative;
cursor: pointer;
/** Alignment adjustments */
min-height: 36px;
min-width: 88px;
line-height: 36px;
vertical-align: middle;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center;
text-align: center;
border-radius: 3px;
box-sizing: border-box;
/* Reset default button appearance */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
border: 0;
/** Custom styling for button */
padding: 0 6px;
margin: 6px 8px;
background: transparent;
color: currentColor;
white-space: nowrap;
/* Uppercase text content */
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
font-style: inherit;
font-variant: inherit;
font-family: inherit;
text-decoration: none;
overflow: hidden;
-webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.md-button:focus {
outline: none; }
.md-button:hover, .md-button:focus {
text-decoration: none; }
.md-button.ng-hide, .md-button.ng-leave {
-webkit-transition: none;
transition: none; }
.md-button.md-cornered {
border-radius: 0; }
.md-button.md-icon {
padding: 0;
background: none; }
.md-button.md-raised:not([disabled]) {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
.md-button.md-icon-button {
margin: 0 6px;
height: 40px;
min-width: 0;
line-height: 24px;
padding: 8px;
width: 40px;
border-radius: 50%; }
.md-button.md-icon-button .md-ripple-container {
border-radius: 50%;
background-clip: padding-box;
overflow: hidden;
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }
.md-button.md-fab {
z-index: 20;
line-height: 56px;
min-width: 0;
width: 56px;
height: 56px;
vertical-align: middle;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 50%;
background-clip: padding-box;
overflow: hidden;
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-webkit-transition-property: background-color, box-shadow, -webkit-transform;
transition-property: background-color, box-shadow, -webkit-transform;
transition-property: background-color, box-shadow, transform;
transition-property: background-color, box-shadow, transform, -webkit-transform; }
.md-button.md-fab.md-fab-bottom-right {
top: auto;
right: 20px;
bottom: 20px;
left: auto;
position: absolute; }
.md-button.md-fab.md-fab-bottom-left {
top: auto;
right: auto;
bottom: 20px;
left: 20px;
position: absolute; }
.md-button.md-fab.md-fab-top-right {
top: 20px;
right: 20px;
bottom: auto;
left: auto;
position: absolute; }
.md-button.md-fab.md-fab-top-left {
top: 20px;
right: auto;
bottom: auto;
left: 20px;
position: absolute; }
.md-button.md-fab .md-ripple-container {
border-radius: 50%;
background-clip: padding-box;
overflow: hidden;
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }
.md-button.md-fab.md-mini {
line-height: 40px;
width: 40px;
height: 40px; }
.md-button.md-fab.ng-hide, .md-button.md-fab.ng-leave {
-webkit-transition: none;
transition: none; }
.md-button:not([disabled]).md-raised.md-focused, .md-button:not([disabled]).md-fab.md-focused {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
.md-button:not([disabled]).md-raised:active, .md-button:not([disabled]).md-fab:active {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); }
.md-button .md-ripple-container {
border-radius: 3px;
background-clip: padding-box;
overflow: hidden;
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }
.md-button.md-icon-button md-icon,
button.md-button.md-fab md-icon {
display: block; }
.md-toast-open-top .md-button.md-fab-top-left,
.md-toast-open-top .md-button.md-fab-top-right {
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transform: translate3d(0, 42px, 0);
transform: translate3d(0, 42px, 0); }
.md-toast-open-top .md-button.md-fab-top-left:not([disabled]).md-focused, .md-toast-open-top .md-button.md-fab-top-left:not([disabled]):hover,
.md-toast-open-top .md-button.md-fab-top-right:not([disabled]).md-focused,
.md-toast-open-top .md-button.md-fab-top-right:not([disabled]):hover {
-webkit-transform: translate3d(0, 41px, 0);
transform: translate3d(0, 41px, 0); }
.md-toast-open-bottom .md-button.md-fab-bottom-left,
.md-toast-open-bottom .md-button.md-fab-bottom-right {
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transform: translate3d(0, -42px, 0);
transform: translate3d(0, -42px, 0); }
.md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]).md-focused, .md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]):hover,
.md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]).md-focused,
.md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]):hover {
-webkit-transform: translate3d(0, -43px, 0);
transform: translate3d(0, -43px, 0); }
.md-button-group {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
width: 100%; }
.md-button-group > .md-button {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
display: block;
overflow: hidden;
width: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap; }
.md-button-group > .md-button:first-child {
border-radius: 2px 0px 0px 2px; }
.md-button-group > .md-button:last-child {
border-right-width: 1px;
border-radius: 0px 2px 2px 0px; }
@media screen and (-ms-high-contrast: active) {
.md-button.md-raised,
.md-button.md-fab {
border: 1px solid #fff; } }

View File

@@ -0,0 +1,197 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.button');
goog.require('ngmaterial.core');
/**
* @ngdoc module
* @name material.components.button
* @description
*
* Button
*/
MdButtonDirective.$inject = ["$mdButtonInkRipple", "$mdTheming", "$mdAria", "$timeout"];
MdAnchorDirective.$inject = ["$mdTheming"];
angular
.module('material.components.button', [ 'material.core' ])
.directive('mdButton', MdButtonDirective)
.directive('a', MdAnchorDirective);
/**
* @private
* @restrict E
*
* @description
* `a` is an anchor directive used to inherit theme colors for md-primary, md-accent, etc.
*
* @usage
*
* <hljs lang="html">
* <md-content md-theme="myTheme">
* <a href="#chapter1" class="md-accent"></a>
* </md-content>
* </hljs>
*/
function MdAnchorDirective($mdTheming) {
return {
restrict : 'E',
link : function postLink(scope, element) {
// Make sure to inherit theme so stand-alone anchors
// support theme colors for md-primary, md-accent, etc.
$mdTheming(element);
}
};
}
/**
* @ngdoc directive
* @name mdButton
* @module material.components.button
*
* @restrict E
*
* @description
* `<md-button>` is a button directive with optional ink ripples (default enabled).
*
* If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it
* will become a `<button>` element. As per the
* [Material Design specifications](https://material.google.com/style/color.html#color-color-palette)
* the FAB button background is filled with the accent color [by default]. The primary color palette
* may be used with the `md-primary` class.
*
* Developers can also change the color palette of the button, by using the following classes
* - `md-primary`
* - `md-accent`
* - `md-warn`
*
* See for example
*
* <hljs lang="html">
* <md-button class="md-primary">Primary Button</md-button>
* </hljs>
*
* Button can be also raised, which means that they will use the current color palette to fill the button.
*
* <hljs lang="html">
* <md-button class="md-accent md-raised">Raised and Accent Button</md-button>
* </hljs>
*
* It is also possible to disable the focus effect on the button, by using the following markup.
*
* <hljs lang="html">
* <md-button class="md-no-focus">No Focus Style</md-button>
* </hljs>
*
* @param {boolean=} md-no-ink If present, disable ripple ink effects.
* @param {expression=} ng-disabled En/Disable based on the expression
* @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`
* @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
* If no default text is found, a warning will be logged.
*
* @usage
*
* Regular buttons:
*
* <hljs lang="html">
* <md-button> Flat Button </md-button>
* <md-button href="http://google.com"> Flat link </md-button>
* <md-button class="md-raised"> Raised Button </md-button>
* <md-button ng-disabled="true"> Disabled Button </md-button>
* <md-button>
* <md-icon md-svg-src="your/icon.svg"></md-icon>
* Register Now
* </md-button>
* </hljs>
*
* FAB buttons:
*
* <hljs lang="html">
* <md-button class="md-fab" aria-label="FAB">
* <md-icon md-svg-src="your/icon.svg"></md-icon>
* </md-button>
* <!-- mini-FAB -->
* <md-button class="md-fab md-mini" aria-label="Mini FAB">
* <md-icon md-svg-src="your/icon.svg"></md-icon>
* </md-button>
* <!-- Button with SVG Icon -->
* <md-button class="md-icon-button" aria-label="Custom Icon Button">
* <md-icon md-svg-icon="path/to/your.svg"></md-icon>
* </md-button>
* </hljs>
*/
function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
return {
restrict: 'EA',
replace: true,
transclude: true,
template: getTemplate,
link: postLink
};
function isAnchor(attr) {
return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);
}
function getTemplate(element, attr) {
if (isAnchor(attr)) {
return '<a class="md-button" ng-transclude></a>';
} else {
//If buttons don't have type="button", they will submit forms automatically.
var btnType = (typeof attr.type === 'undefined') ? 'button' : attr.type;
return '<button class="md-button" type="' + btnType + '" ng-transclude></button>';
}
}
function postLink(scope, element, attr) {
$mdTheming(element);
$mdButtonInkRipple.attach(scope, element);
// Use async expect to support possible bindings in the button label
$mdAria.expectWithoutText(element, 'aria-label');
// For anchor elements, we have to set tabindex manually when the
// element is disabled
if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) ) {
scope.$watch(attr.ngDisabled, function(isDisabled) {
element.attr('tabindex', isDisabled ? -1 : 0);
});
}
// disabling click event when disabled is true
element.on('click', function(e){
if (attr.disabled === true) {
e.preventDefault();
e.stopImmediatePropagation();
}
});
if (!element.hasClass('md-no-focus')) {
// restrict focus styles to the keyboard
scope.mouseActive = false;
element.on('mousedown', function() {
scope.mouseActive = true;
$timeout(function(){
scope.mouseActive = false;
}, 100);
})
.on('focus', function() {
if (scope.mouseActive === false) {
element.addClass('md-focused');
}
})
.on('blur', function(ev) {
element.removeClass('md-focused');
});
}
}
}
ngmaterial.components.button = angular.module("material.components.button");

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
function MdAnchorDirective(t){return{restrict:"E",link:function(e,n){t(n)}}}function MdButtonDirective(t,e,n,i){function o(t){return angular.isDefined(t.href)||angular.isDefined(t.ngHref)||angular.isDefined(t.ngLink)||angular.isDefined(t.uiSref)}function u(t,e){if(o(e))return'<a class="md-button" ng-transclude></a>';var n="undefined"==typeof e.type?"button":e.type;return'<button class="md-button" type="'+n+'" ng-transclude></button>'}function a(u,a,r){e(a),t.attach(u,a),n.expectWithoutText(a,"aria-label"),o(r)&&angular.isDefined(r.ngDisabled)&&u.$watch(r.ngDisabled,function(t){a.attr("tabindex",t?-1:0)}),a.on("click",function(t){r.disabled===!0&&(t.preventDefault(),t.stopImmediatePropagation())}),a.hasClass("md-no-focus")||(u.mouseActive=!1,a.on("mousedown",function(){u.mouseActive=!0,i(function(){u.mouseActive=!1},100)}).on("focus",function(){u.mouseActive===!1&&a.addClass("md-focused")}).on("blur",function(t){a.removeClass("md-focused")}))}return{restrict:"EA",replace:!0,transclude:!0,template:u,link:a}}goog.provide("ngmaterial.components.button"),goog.require("ngmaterial.core"),MdButtonDirective.$inject=["$mdButtonInkRipple","$mdTheming","$mdAria","$timeout"],MdAnchorDirective.$inject=["$mdTheming"],angular.module("material.components.button",["material.core"]).directive("mdButton",MdButtonDirective).directive("a",MdAnchorDirective),ngmaterial.components.button=angular.module("material.components.button");

View File

@@ -0,0 +1,19 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-card.md-THEME_NAME-theme {
color: '{{foreground-1}}';
background-color: '{{background-hue-1}}';
border-radius: 2px; }
md-card.md-THEME_NAME-theme .md-card-image {
border-radius: 2px 2px 0 0; }
md-card.md-THEME_NAME-theme md-card-header md-card-avatar md-icon {
color: '{{background-color}}';
background-color: '{{foreground-3}}'; }
md-card.md-THEME_NAME-theme md-card-header md-card-header-text .md-subhead {
color: '{{foreground-2}}'; }
md-card.md-THEME_NAME-theme md-card-title md-card-title-text:not(:only-child) .md-subhead {
color: '{{foreground-2}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-card.md-THEME_NAME-theme{color:'{{foreground-1}}';background-color:'{{background-hue-1}}';border-radius:2px}md-card.md-THEME_NAME-theme .md-card-image{border-radius:2px 2px 0 0}md-card.md-THEME_NAME-theme md-card-header md-card-avatar md-icon{color:'{{background-color}}';background-color:'{{foreground-3}}'}md-card.md-THEME_NAME-theme md-card-header md-card-header-text .md-subhead,md-card.md-THEME_NAME-theme md-card-title md-card-title-text:not(:only-child) .md-subhead{color:'{{foreground-2}}'}

View File

@@ -0,0 +1,199 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-card {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
margin: 8px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); }
md-card md-card-header {
padding: 16px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row; }
md-card md-card-header:first-child md-card-avatar {
margin-right: 12px; }
[dir=rtl] md-card md-card-header:first-child md-card-avatar {
margin-right: auto;
margin-left: 12px; }
md-card md-card-header:last-child md-card-avatar {
margin-left: 12px; }
[dir=rtl] md-card md-card-header:last-child md-card-avatar {
margin-left: auto;
margin-right: 12px; }
md-card md-card-header md-card-avatar {
width: 40px;
height: 40px; }
md-card md-card-header md-card-avatar .md-user-avatar,
md-card md-card-header md-card-avatar md-icon {
border-radius: 50%; }
md-card md-card-header md-card-avatar md-icon {
padding: 8px; }
md-card md-card-header md-card-avatar + md-card-header-text {
max-height: 40px; }
md-card md-card-header md-card-avatar + md-card-header-text .md-title {
font-size: 14px; }
md-card md-card-header md-card-header-text {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column; }
md-card md-card-header md-card-header-text .md-subhead {
font-size: 14px; }
md-card > img,
md-card > md-card-header img,
md-card md-card-title-media img {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%;
height: auto; }
md-card md-card-title {
padding: 24px 16px 16px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row; }
md-card md-card-title + md-card-content {
padding-top: 0; }
md-card md-card-title md-card-title-text {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
display: -webkit-box;
display: -webkit-flex;
display: flex; }
md-card md-card-title md-card-title-text .md-subhead {
padding-top: 0;
font-size: 14px; }
md-card md-card-title md-card-title-text:only-child .md-subhead {
padding-top: 12px; }
md-card md-card-title md-card-title-media {
margin-top: -8px; }
md-card md-card-title md-card-title-media .md-media-sm {
height: 80px;
width: 80px; }
md-card md-card-title md-card-title-media .md-media-md {
height: 112px;
width: 112px; }
md-card md-card-title md-card-title-media .md-media-lg {
height: 152px;
width: 152px; }
md-card md-card-content {
display: block;
padding: 16px; }
md-card md-card-content > p:first-child {
margin-top: 0; }
md-card md-card-content > p:last-child {
margin-bottom: 0; }
md-card md-card-content .md-media-xl {
height: 240px;
width: 240px; }
md-card .md-actions, md-card md-card-actions {
margin: 8px; }
md-card .md-actions.layout-column .md-button:not(.md-icon-button), md-card md-card-actions.layout-column .md-button:not(.md-icon-button) {
margin: 2px 0; }
md-card .md-actions.layout-column .md-button:not(.md-icon-button):first-of-type, md-card md-card-actions.layout-column .md-button:not(.md-icon-button):first-of-type {
margin-top: 0; }
md-card .md-actions.layout-column .md-button:not(.md-icon-button):last-of-type, md-card md-card-actions.layout-column .md-button:not(.md-icon-button):last-of-type {
margin-bottom: 0; }
md-card .md-actions.layout-column .md-button.md-icon-button, md-card md-card-actions.layout-column .md-button.md-icon-button {
margin-top: 6px;
margin-bottom: 6px; }
md-card .md-actions md-card-icon-actions, md-card md-card-actions md-card-icon-actions {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row; }
md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button), md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button) {
margin: 0 4px; }
md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type, md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type {
margin-left: 0; }
[dir=rtl] md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type {
margin-left: auto;
margin-right: 0; }
md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type, md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type {
margin-right: 0; }
[dir=rtl] md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type {
margin-right: auto;
margin-left: 0; }
md-card .md-actions:not(.layout-column) .md-button.md-icon-button, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button {
margin-left: 6px;
margin-right: 6px; }
md-card .md-actions:not(.layout-column) .md-button.md-icon-button:first-of-type, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:first-of-type {
margin-left: 12px; }
[dir=rtl] md-card .md-actions:not(.layout-column) .md-button.md-icon-button:first-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:first-of-type {
margin-left: auto;
margin-right: 12px; }
md-card .md-actions:not(.layout-column) .md-button.md-icon-button:last-of-type, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:last-of-type {
margin-right: 12px; }
[dir=rtl] md-card .md-actions:not(.layout-column) .md-button.md-icon-button:last-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:last-of-type {
margin-right: auto;
margin-left: 12px; }
md-card .md-actions:not(.layout-column) .md-button + md-card-icon-actions, md-card md-card-actions:not(.layout-column) .md-button + md-card-icon-actions {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row; }
md-card md-card-footer {
margin-top: auto;
padding: 16px; }
@media screen and (-ms-high-contrast: active) {
md-card {
border: 1px solid #fff; } }
.md-image-no-fill > img {
width: auto;
height: auto; }

View File

@@ -0,0 +1,142 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.card');
goog.require('ngmaterial.core');
/**
* @ngdoc module
* @name material.components.card
*
* @description
* Card components.
*/
mdCardDirective.$inject = ["$mdTheming"];
angular.module('material.components.card', [
'material.core'
])
.directive('mdCard', mdCardDirective);
/**
* @ngdoc directive
* @name mdCard
* @module material.components.card
*
* @restrict E
*
* @description
* The `<md-card>` directive is a container element used within `<md-content>` containers.
*
* An image included as a direct descendant will fill the card's width. If you want to avoid this,
* you can add the `md-image-no-fill` class to the parent element. The `<md-card-content>`
* container will wrap text content and provide padding. An `<md-card-footer>` element can be
* optionally included to put content flush against the bottom edge of the card.
*
* Action buttons can be included in an `<md-card-actions>` element, similar to `<md-dialog-actions>`.
* You can then position buttons using layout attributes.
*
* Card is built with:
* * `<md-card-header>` - Header for the card, holds avatar, text and squared image
* - `<md-card-avatar>` - Card avatar
* - `md-user-avatar` - Class for user image
* - `<md-icon>`
* - `<md-card-header-text>` - Contains elements for the card description
* - `md-title` - Class for the card title
* - `md-subhead` - Class for the card sub header
* * `<img>` - Image for the card
* * `<md-card-title>` - Card content title
* - `<md-card-title-text>`
* - `md-headline` - Class for the card content title
* - `md-subhead` - Class for the card content sub header
* - `<md-card-title-media>` - Squared image within the title
* - `md-media-sm` - Class for small image
* - `md-media-md` - Class for medium image
* - `md-media-lg` - Class for large image
* * `<md-card-content>` - Card content
* - `md-media-xl` - Class for extra large image
* * `<md-card-actions>` - Card actions
* - `<md-card-icon-actions>` - Icon actions
*
* Cards have constant width and variable heights; where the maximum height is limited to what can
* fit within a single view on a platform, but it can temporarily expand as needed.
*
* @usage
* ### Card with optional footer
* <hljs lang="html">
* <md-card>
* <img src="card-image.png" class="md-card-image" alt="image caption">
* <md-card-content>
* <h2>Card headline</h2>
* <p>Card content</p>
* </md-card-content>
* <md-card-footer>
* Card footer
* </md-card-footer>
* </md-card>
* </hljs>
*
* ### Card with actions
* <hljs lang="html">
* <md-card>
* <img src="card-image.png" class="md-card-image" alt="image caption">
* <md-card-content>
* <h2>Card headline</h2>
* <p>Card content</p>
* </md-card-content>
* <md-card-actions layout="row" layout-align="end center">
* <md-button>Action 1</md-button>
* <md-button>Action 2</md-button>
* </md-card-actions>
* </md-card>
* </hljs>
*
* ### Card with header, image, title actions and content
* <hljs lang="html">
* <md-card>
* <md-card-header>
* <md-card-avatar>
* <img class="md-user-avatar" src="avatar.png"/>
* </md-card-avatar>
* <md-card-header-text>
* <span class="md-title">Title</span>
* <span class="md-subhead">Sub header</span>
* </md-card-header-text>
* </md-card-header>
* <img ng-src="card-image.png" class="md-card-image" alt="image caption">
* <md-card-title>
* <md-card-title-text>
* <span class="md-headline">Card headline</span>
* <span class="md-subhead">Card subheader</span>
* </md-card-title-text>
* </md-card-title>
* <md-card-actions layout="row" layout-align="start center">
* <md-button>Action 1</md-button>
* <md-button>Action 2</md-button>
* <md-card-icon-actions>
* <md-button class="md-icon-button" aria-label="icon">
* <md-icon md-svg-icon="icon"></md-icon>
* </md-button>
* </md-card-icon-actions>
* </md-card-actions>
* <md-card-content>
* <p>
* Card content
* </p>
* </md-card-content>
* </md-card>
* </hljs>
*/
function mdCardDirective($mdTheming) {
return {
restrict: 'E',
link: function ($scope, $element, attr) {
$element.addClass('_md'); // private md component indicator for styling
$mdTheming($element);
}
};
}
ngmaterial.components.card = angular.module("material.components.card");

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
function mdCardDirective(e){return{restrict:"E",link:function(r,a,i){a.addClass("_md"),e(a)}}}goog.provide("ngmaterial.components.card"),goog.require("ngmaterial.core"),mdCardDirective.$inject=["$mdTheming"],angular.module("material.components.card",["material.core"]).directive("mdCard",mdCardDirective),ngmaterial.components.card=angular.module("material.components.card");

View File

@@ -0,0 +1,92 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-checkbox.md-THEME_NAME-theme .md-ripple {
color: '{{accent-A700}}'; }
md-checkbox.md-THEME_NAME-theme.md-checked .md-ripple {
color: '{{background-600}}'; }
md-checkbox.md-THEME_NAME-theme.md-checked.md-focused .md-container:before {
background-color: '{{accent-color-0.26}}'; }
md-checkbox.md-THEME_NAME-theme .md-ink-ripple {
color: '{{foreground-2}}'; }
md-checkbox.md-THEME_NAME-theme.md-checked .md-ink-ripple {
color: '{{accent-color-0.87}}'; }
md-checkbox.md-THEME_NAME-theme:not(.md-checked) .md-icon {
border-color: '{{foreground-2}}'; }
md-checkbox.md-THEME_NAME-theme.md-checked .md-icon {
background-color: '{{accent-color-0.87}}'; }
md-checkbox.md-THEME_NAME-theme.md-checked .md-icon:after {
border-color: '{{accent-contrast-0.87}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-ripple {
color: '{{primary-600}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ripple {
color: '{{background-600}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-ink-ripple {
color: '{{foreground-2}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ink-ripple {
color: '{{primary-color-0.87}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary:not(.md-checked) .md-icon {
border-color: '{{foreground-2}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-icon {
background-color: '{{primary-color-0.87}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked.md-focused .md-container:before {
background-color: '{{primary-color-0.26}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-icon:after {
border-color: '{{primary-contrast-0.87}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-indeterminate[disabled] .md-container {
color: '{{foreground-3}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn .md-ripple {
color: '{{warn-600}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn .md-ink-ripple {
color: '{{foreground-2}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-ink-ripple {
color: '{{warn-color-0.87}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn:not(.md-checked) .md-icon {
border-color: '{{foreground-2}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-icon {
background-color: '{{warn-color-0.87}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked.md-focused:not([disabled]) .md-container:before {
background-color: '{{warn-color-0.26}}'; }
md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-icon:after {
border-color: '{{background-200}}'; }
md-checkbox.md-THEME_NAME-theme[disabled]:not(.md-checked) .md-icon {
border-color: '{{foreground-3}}'; }
md-checkbox.md-THEME_NAME-theme[disabled].md-checked .md-icon {
background-color: '{{foreground-3}}'; }
md-checkbox.md-THEME_NAME-theme[disabled].md-checked .md-icon:after {
border-color: '{{background-200}}'; }
md-checkbox.md-THEME_NAME-theme[disabled] .md-icon:after {
border-color: '{{foreground-3}}'; }
md-checkbox.md-THEME_NAME-theme[disabled] .md-label {
color: '{{foreground-3}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-checkbox.md-THEME_NAME-theme .md-ripple{color:'{{accent-A700}}'}md-checkbox.md-THEME_NAME-theme.md-checked .md-ripple{color:'{{background-600}}'}md-checkbox.md-THEME_NAME-theme.md-checked.md-focused .md-container:before{background-color:'{{accent-color-0.26}}'}md-checkbox.md-THEME_NAME-theme .md-ink-ripple{color:'{{foreground-2}}'}md-checkbox.md-THEME_NAME-theme.md-checked .md-ink-ripple{color:'{{accent-color-0.87}}'}md-checkbox.md-THEME_NAME-theme:not(.md-checked) .md-icon{border-color:'{{foreground-2}}'}md-checkbox.md-THEME_NAME-theme.md-checked .md-icon{background-color:'{{accent-color-0.87}}'}md-checkbox.md-THEME_NAME-theme.md-checked .md-icon:after{border-color:'{{accent-contrast-0.87}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-ripple{color:'{{primary-600}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ripple{color:'{{background-600}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-ink-ripple{color:'{{foreground-2}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ink-ripple{color:'{{primary-color-0.87}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary:not(.md-checked) .md-icon{border-color:'{{foreground-2}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-icon{background-color:'{{primary-color-0.87}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked.md-focused .md-container:before{background-color:'{{primary-color-0.26}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-icon:after{border-color:'{{primary-contrast-0.87}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-indeterminate[disabled] .md-container{color:'{{foreground-3}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn .md-ripple{color:'{{warn-600}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn .md-ink-ripple{color:'{{foreground-2}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-ink-ripple{color:'{{warn-color-0.87}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn:not(.md-checked) .md-icon{border-color:'{{foreground-2}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-icon{background-color:'{{warn-color-0.87}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked.md-focused:not([disabled]) .md-container:before{background-color:'{{warn-color-0.26}}'}md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-icon:after{border-color:'{{background-200}}'}md-checkbox.md-THEME_NAME-theme[disabled]:not(.md-checked) .md-icon{border-color:'{{foreground-3}}'}md-checkbox.md-THEME_NAME-theme[disabled].md-checked .md-icon{background-color:'{{foreground-3}}'}md-checkbox.md-THEME_NAME-theme[disabled].md-checked .md-icon:after{border-color:'{{background-200}}'}md-checkbox.md-THEME_NAME-theme[disabled] .md-icon:after{border-color:'{{foreground-3}}'}md-checkbox.md-THEME_NAME-theme[disabled] .md-label{color:'{{foreground-3}}'}

View File

@@ -0,0 +1,150 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
.md-inline-form md-checkbox {
margin: 19px 0 18px; }
md-checkbox {
box-sizing: border-box;
display: inline-block;
margin-bottom: 16px;
white-space: nowrap;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
min-width: 20px;
min-height: 20px;
margin-left: 0;
margin-right: 16px; }
[dir=rtl] md-checkbox {
margin-left: 16px; }
[dir=rtl] md-checkbox {
margin-right: 0; }
md-checkbox:last-of-type {
margin-left: 0;
margin-right: 0; }
md-checkbox.md-focused:not([disabled]) .md-container:before {
left: -8px;
top: -8px;
right: -8px;
bottom: -8px; }
md-checkbox.md-focused:not([disabled]):not(.md-checked) .md-container:before {
background-color: rgba(0, 0, 0, 0.12); }
md-checkbox.md-align-top-left > div.md-container {
top: 12px; }
md-checkbox .md-container {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
box-sizing: border-box;
display: inline-block;
width: 20px;
height: 20px;
left: 0;
right: auto; }
[dir=rtl] md-checkbox .md-container {
left: auto; }
[dir=rtl] md-checkbox .md-container {
right: 0; }
md-checkbox .md-container:before {
box-sizing: border-box;
background-color: transparent;
border-radius: 50%;
content: '';
position: absolute;
display: block;
height: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
width: auto; }
md-checkbox .md-container:after {
box-sizing: border-box;
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px; }
md-checkbox .md-container .md-ripple-container {
position: absolute;
display: block;
width: auto;
height: auto;
left: -15px;
top: -15px;
right: -15px;
bottom: -15px; }
md-checkbox .md-icon {
box-sizing: border-box;
-webkit-transition: 240ms;
transition: 240ms;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-width: 2px;
border-style: solid;
border-radius: 2px; }
md-checkbox.md-checked .md-icon {
border-color: transparent; }
md-checkbox.md-checked .md-icon:after {
box-sizing: border-box;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 4.66667px;
top: 0.22222px;
display: table;
width: 6.66667px;
height: 13.33333px;
border-width: 2px;
border-style: solid;
border-top: 0;
border-left: 0;
content: ''; }
md-checkbox[disabled] {
cursor: default; }
md-checkbox.md-indeterminate .md-icon:after {
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: table;
width: 12px;
height: 2px;
border-width: 2px;
border-style: solid;
border-top: 0;
border-left: 0;
content: ''; }
md-checkbox .md-label {
box-sizing: border-box;
position: relative;
display: inline-block;
vertical-align: middle;
white-space: normal;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
margin-left: 30px;
margin-right: 0; }
[dir=rtl] md-checkbox .md-label {
margin-left: 0; }
[dir=rtl] md-checkbox .md-label {
margin-right: 30px; }

View File

@@ -0,0 +1,213 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.checkbox');
goog.require('ngmaterial.core');
/**
* @ngdoc module
* @name material.components.checkbox
* @description Checkbox module!
*/
MdCheckboxDirective.$inject = ["inputDirective", "$mdAria", "$mdConstant", "$mdTheming", "$mdUtil", "$timeout"];
angular
.module('material.components.checkbox', ['material.core'])
.directive('mdCheckbox', MdCheckboxDirective);
/**
* @ngdoc directive
* @name mdCheckbox
* @module material.components.checkbox
* @restrict E
*
* @description
* The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
*
* As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-color-schemes)
* the checkbox is in the accent color by default. The primary color palette may be used with
* the `md-primary` class.
*
* @param {string} ng-model Assignable angular expression to data-bind to.
* @param {string=} name Property name of the form under which the control is published.
* @param {expression=} ng-true-value The value to which the expression should be set when selected.
* @param {expression=} ng-false-value The value to which the expression should be set when not selected.
* @param {string=} ng-change Angular expression to be executed when input changes due to user interaction with the input element.
* @param {boolean=} md-no-ink Use of attribute indicates use of ripple ink effects
* @param {string=} aria-label Adds label to checkbox for accessibility.
* Defaults to checkbox's text. If no default text is found, a warning will be logged.
* @param {expression=} md-indeterminate This determines when the checkbox should be rendered as 'indeterminate'.
* If a truthy expression or no value is passed in the checkbox renders in the md-indeterminate state.
* If falsy expression is passed in it just looks like a normal unchecked checkbox.
* The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time.
* Adding the 'md-indeterminate' attribute overrides any checked/unchecked rendering logic.
* When using the 'md-indeterminate' attribute use 'ng-checked' to define rendering logic instead of using 'ng-model'.
* @param {expression=} ng-checked If this expression evaluates as truthy, the 'md-checked' css class is added to the checkbox and it
* will appear checked.
*
* @usage
* <hljs lang="html">
* <md-checkbox ng-model="isChecked" aria-label="Finished?">
* Finished ?
* </md-checkbox>
*
* <md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
* No Ink Effects
* </md-checkbox>
*
* <md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
* Disabled
* </md-checkbox>
*
* </hljs>
*
*/
function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $mdUtil, $timeout) {
inputDirective = inputDirective[0];
return {
restrict: 'E',
transclude: true,
require: '?ngModel',
priority: 210, // Run before ngAria
template:
'<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
'<div class="md-icon"></div>' +
'</div>' +
'<div ng-transclude class="md-label"></div>',
compile: compile
};
// **********************************************************
// Private Methods
// **********************************************************
function compile (tElement, tAttrs) {
tAttrs.$set('tabindex', tAttrs.tabindex || '0');
tAttrs.$set('type', 'checkbox');
tAttrs.$set('role', tAttrs.type);
return {
pre: function(scope, element) {
// Attach a click handler during preLink, in order to immediately stop propagation
// (especially for ng-click) when the checkbox is disabled.
element.on('click', function(e) {
if (this.hasAttribute('disabled')) {
e.stopImmediatePropagation();
}
});
},
post: postLink
};
function postLink(scope, element, attr, ngModelCtrl) {
var isIndeterminate;
ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
$mdTheming(element);
// Redirect focus events to the root element, because IE11 is always focusing the container element instead
// of the md-checkbox element. This causes issues when using ngModelOptions: `updateOnBlur`
element.children().on('focus', function() {
element.focus();
});
if ($mdUtil.parseAttributeBoolean(attr.mdIndeterminate)) {
setIndeterminateState();
scope.$watch(attr.mdIndeterminate, setIndeterminateState);
}
if (attr.ngChecked) {
scope.$watch(scope.$eval.bind(scope, attr.ngChecked), function(value) {
ngModelCtrl.$setViewValue(value);
ngModelCtrl.$render();
});
}
$$watchExpr('ngDisabled', 'tabindex', {
true: '-1',
false: attr.tabindex
});
$mdAria.expectWithText(element, 'aria-label');
// Reuse the original input[type=checkbox] directive from Angular core.
// This is a bit hacky as we need our own event listener and own render
// function.
inputDirective.link.pre(scope, {
on: angular.noop,
0: {}
}, attr, [ngModelCtrl]);
scope.mouseActive = false;
element.on('click', listener)
.on('keypress', keypressHandler)
.on('mousedown', function() {
scope.mouseActive = true;
$timeout(function() {
scope.mouseActive = false;
}, 100);
})
.on('focus', function() {
if (scope.mouseActive === false) {
element.addClass('md-focused');
}
})
.on('blur', function() {
element.removeClass('md-focused');
});
ngModelCtrl.$render = render;
function $$watchExpr(expr, htmlAttr, valueOpts) {
if (attr[expr]) {
scope.$watch(attr[expr], function(val) {
if (valueOpts[val]) {
element.attr(htmlAttr, valueOpts[val]);
}
});
}
}
function keypressHandler(ev) {
var keyCode = ev.which || ev.keyCode;
if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
ev.preventDefault();
element.addClass('md-focused');
listener(ev);
}
}
function listener(ev) {
// skipToggle boolean is used by the switch directive to prevent the click event
// when releasing the drag. There will be always a click if releasing the drag over the checkbox
if (element[0].hasAttribute('disabled') || scope.skipToggle) {
return;
}
scope.$apply(function() {
// Toggle the checkbox value...
var viewValue = attr.ngChecked ? attr.checked : !ngModelCtrl.$viewValue;
ngModelCtrl.$setViewValue(viewValue, ev && ev.type);
ngModelCtrl.$render();
});
}
function render() {
// Cast the $viewValue to a boolean since it could be undefined
element.toggleClass('md-checked', !!ngModelCtrl.$viewValue && !isIndeterminate);
}
function setIndeterminateState(newValue) {
isIndeterminate = newValue !== false;
if (isIndeterminate) {
element.attr('aria-checked', 'mixed');
}
element.toggleClass('md-indeterminate', isIndeterminate);
}
}
}
}
ngmaterial.components.checkbox = angular.module("material.components.checkbox");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/.md-inline-form md-checkbox{margin:19px 0 18px}md-checkbox{box-sizing:border-box;display:inline-block;margin-bottom:16px;white-space:nowrap;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;min-width:20px;min-height:20px;margin-left:0;margin-right:16px}[dir=rtl] md-checkbox{margin-left:16px;margin-right:0}md-checkbox:last-of-type{margin-left:0;margin-right:0}md-checkbox.md-focused:not([disabled]) .md-container:before{left:-8px;top:-8px;right:-8px;bottom:-8px}md-checkbox.md-focused:not([disabled]):not(.md-checked) .md-container:before{background-color:rgba(0,0,0,.12)}md-checkbox.md-align-top-left>div.md-container{top:12px}md-checkbox .md-container{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);box-sizing:border-box;display:inline-block;width:20px;height:20px;left:0;right:auto}[dir=rtl] md-checkbox .md-container{left:auto;right:0}md-checkbox .md-container:before{box-sizing:border-box;background-color:transparent;border-radius:50%;content:'';position:absolute;display:block;height:auto;left:0;top:0;right:0;bottom:0;-webkit-transition:all .5s;transition:all .5s;width:auto}md-checkbox .md-container:after{box-sizing:border-box;content:'';position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px}md-checkbox .md-container .md-ripple-container{position:absolute;display:block;width:auto;height:auto;left:-15px;top:-15px;right:-15px;bottom:-15px}md-checkbox .md-icon{box-sizing:border-box;-webkit-transition:.24s;transition:.24s;position:absolute;top:0;left:0;width:20px;height:20px;border-width:2px;border-style:solid;border-radius:2px}md-checkbox.md-checked .md-icon{border-color:transparent}md-checkbox.md-checked .md-icon:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;left:4.66667px;top:.22222px;display:table;width:6.66667px;height:13.33333px;border-width:2px;border-style:solid;border-top:0;border-left:0;content:''}md-checkbox[disabled]{cursor:default}md-checkbox.md-indeterminate .md-icon:after{box-sizing:border-box;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:table;width:12px;height:2px;border-width:2px;border-style:solid;border-top:0;border-left:0;content:''}md-checkbox .md-label{box-sizing:border-box;position:relative;display:inline-block;vertical-align:middle;white-space:normal;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;margin-left:30px;margin-right:0}[dir=rtl] md-checkbox .md-label{margin-left:0;margin-right:30px}

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
function MdCheckboxDirective(e,t,n,i,o,c){function a(a,d){function r(a,d,r,l){function s(e,t,n){r[e]&&a.$watch(r[e],function(e){n[e]&&d.attr(t,n[e])})}function u(e){var t=e.which||e.keyCode;t!==n.KEY_CODE.SPACE&&t!==n.KEY_CODE.ENTER||(e.preventDefault(),d.addClass("md-focused"),m(e))}function m(e){d[0].hasAttribute("disabled")||a.skipToggle||a.$apply(function(){var t=r.ngChecked?r.checked:!l.$viewValue;l.$setViewValue(t,e&&e.type),l.$render()})}function p(){d.toggleClass("md-checked",!!l.$viewValue&&!h)}function f(e){h=e!==!1,h&&d.attr("aria-checked","mixed"),d.toggleClass("md-indeterminate",h)}var h;l=l||o.fakeNgModel(),i(d),d.children().on("focus",function(){d.focus()}),o.parseAttributeBoolean(r.mdIndeterminate)&&(f(),a.$watch(r.mdIndeterminate,f)),r.ngChecked&&a.$watch(a.$eval.bind(a,r.ngChecked),function(e){l.$setViewValue(e),l.$render()}),s("ngDisabled","tabindex",{"true":"-1","false":r.tabindex}),t.expectWithText(d,"aria-label"),e.link.pre(a,{on:angular.noop,0:{}},r,[l]),a.mouseActive=!1,d.on("click",m).on("keypress",u).on("mousedown",function(){a.mouseActive=!0,c(function(){a.mouseActive=!1},100)}).on("focus",function(){a.mouseActive===!1&&d.addClass("md-focused")}).on("blur",function(){d.removeClass("md-focused")}),l.$render=p}return d.$set("tabindex",d.tabindex||"0"),d.$set("type","checkbox"),d.$set("role",d.type),{pre:function(e,t){t.on("click",function(e){this.hasAttribute("disabled")&&e.stopImmediatePropagation()})},post:r}}return e=e[0],{restrict:"E",transclude:!0,require:"?ngModel",priority:210,template:'<div class="md-container" md-ink-ripple md-ink-ripple-checkbox><div class="md-icon"></div></div><div ng-transclude class="md-label"></div>',compile:a}}goog.provide("ngmaterial.components.checkbox"),goog.require("ngmaterial.core"),MdCheckboxDirective.$inject=["inputDirective","$mdAria","$mdConstant","$mdTheming","$mdUtil","$timeout"],angular.module("material.components.checkbox",["material.core"]).directive("mdCheckbox",MdCheckboxDirective),ngmaterial.components.checkbox=angular.module("material.components.checkbox");

View File

@@ -0,0 +1,42 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-chips.md-THEME_NAME-theme .md-chips {
box-shadow: 0 1px '{{foreground-4}}'; }
md-chips.md-THEME_NAME-theme .md-chips.md-focused {
box-shadow: 0 2px '{{primary-color}}'; }
md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input {
color: '{{foreground-1}}'; }
md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input::-webkit-input-placeholder {
color: '{{foreground-3}}'; }
md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input:-moz-placeholder {
color: '{{foreground-3}}'; }
md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input::-moz-placeholder {
color: '{{foreground-3}}'; }
md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input:-ms-input-placeholder {
color: '{{foreground-3}}'; }
md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input::-webkit-input-placeholder {
color: '{{foreground-3}}'; }
md-chips.md-THEME_NAME-theme md-chip {
background: '{{background-300}}';
color: '{{background-800}}'; }
md-chips.md-THEME_NAME-theme md-chip md-icon {
color: '{{background-700}}'; }
md-chips.md-THEME_NAME-theme md-chip.md-focused {
background: '{{primary-color}}';
color: '{{primary-contrast}}'; }
md-chips.md-THEME_NAME-theme md-chip.md-focused md-icon {
color: '{{primary-contrast}}'; }
md-chips.md-THEME_NAME-theme md-chip._md-chip-editing {
background: transparent;
color: '{{background-800}}'; }
md-chips.md-THEME_NAME-theme md-chip-remove .md-button md-icon path {
fill: '{{background-500}}'; }
.md-contact-suggestion span.md-contact-email {
color: '{{background-400}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-chips.md-THEME_NAME-theme .md-chips{box-shadow:0 1px '{{foreground-4}}'}md-chips.md-THEME_NAME-theme .md-chips.md-focused{box-shadow:0 2px '{{primary-color}}'}md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input{color:'{{foreground-1}}'}md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input:-moz-placeholder,md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input::-moz-placeholder{color:'{{foreground-3}}'}md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input:-ms-input-placeholder{color:'{{foreground-3}}'}md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input::-webkit-input-placeholder{color:'{{foreground-3}}'}md-chips.md-THEME_NAME-theme md-chip{background:'{{background-300}}';color:'{{background-800}}'}md-chips.md-THEME_NAME-theme md-chip md-icon{color:'{{background-700}}'}md-chips.md-THEME_NAME-theme md-chip.md-focused{background:'{{primary-color}}';color:'{{primary-contrast}}'}md-chips.md-THEME_NAME-theme md-chip.md-focused md-icon{color:'{{primary-contrast}}'}md-chips.md-THEME_NAME-theme md-chip._md-chip-editing{background:transparent;color:'{{background-800}}'}md-chips.md-THEME_NAME-theme md-chip-remove .md-button md-icon path{fill:'{{background-500}}'}.md-contact-suggestion span.md-contact-email{color:'{{background-400}}'}

View File

@@ -0,0 +1,186 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
.md-contact-chips .md-chips md-chip {
padding: 0 25px 0 0; }
[dir=rtl] .md-contact-chips .md-chips md-chip {
padding: 0 0 0 25px; }
.md-contact-chips .md-chips md-chip .md-contact-avatar {
float: left; }
[dir=rtl] .md-contact-chips .md-chips md-chip .md-contact-avatar {
float: right; }
.md-contact-chips .md-chips md-chip .md-contact-avatar img {
height: 32px;
border-radius: 16px; }
.md-contact-chips .md-chips md-chip .md-contact-name {
display: inline-block;
height: 32px;
margin-left: 8px; }
[dir=rtl] .md-contact-chips .md-chips md-chip .md-contact-name {
margin-left: auto;
margin-right: 8px; }
.md-contact-suggestion {
height: 56px; }
.md-contact-suggestion img {
height: 40px;
border-radius: 20px;
margin-top: 8px; }
.md-contact-suggestion .md-contact-name {
margin-left: 8px;
width: 120px; }
[dir=rtl] .md-contact-suggestion .md-contact-name {
margin-left: auto;
margin-right: 8px; }
.md-contact-suggestion .md-contact-name, .md-contact-suggestion .md-contact-email {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis; }
.md-contact-chips-suggestions li {
height: 100%; }
.md-chips {
display: block;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 0 0 8px 3px;
vertical-align: middle; }
.md-chips:after {
content: '';
display: table;
clear: both; }
[dir=rtl] .md-chips {
padding: 0 3px 8px 0; }
.md-chips.md-readonly .md-chip-input-container {
min-height: 32px; }
.md-chips:not(.md-readonly) {
cursor: text; }
.md-chips.md-removable md-chip {
padding-right: 22px; }
[dir=rtl] .md-chips.md-removable md-chip {
padding-right: 0;
padding-left: 22px; }
.md-chips.md-removable md-chip .md-chip-content {
padding-right: 4px; }
[dir=rtl] .md-chips.md-removable md-chip .md-chip-content {
padding-right: 0;
padding-left: 4px; }
.md-chips md-chip {
cursor: default;
border-radius: 16px;
display: block;
height: 32px;
line-height: 32px;
margin: 8px 8px 0 0;
padding: 0 12px 0 12px;
float: left;
box-sizing: border-box;
max-width: 100%;
position: relative; }
[dir=rtl] .md-chips md-chip {
margin: 8px 0 0 8px; }
[dir=rtl] .md-chips md-chip {
float: right; }
.md-chips md-chip .md-chip-content {
display: block;
float: left;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis; }
[dir=rtl] .md-chips md-chip .md-chip-content {
float: right; }
.md-chips md-chip .md-chip-content:focus {
outline: none; }
.md-chips md-chip._md-chip-content-edit-is-enabled {
-webkit-user-select: none;
/* webkit (safari, chrome) browsers */
-moz-user-select: none;
/* mozilla browsers */
-khtml-user-select: none;
/* webkit (konqueror) browsers */
-ms-user-select: none;
/* IE10+ */ }
.md-chips md-chip .md-chip-remove-container {
position: absolute;
right: 0;
line-height: 22px; }
[dir=rtl] .md-chips md-chip .md-chip-remove-container {
right: auto;
left: 0; }
.md-chips md-chip .md-chip-remove {
text-align: center;
width: 32px;
height: 32px;
min-width: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
margin: 0;
position: relative; }
.md-chips md-chip .md-chip-remove md-icon {
height: 18px;
width: 18px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0); }
.md-chips .md-chip-input-container {
display: block;
line-height: 32px;
margin: 8px 8px 0 0;
padding: 0;
float: left; }
[dir=rtl] .md-chips .md-chip-input-container {
margin: 8px 0 0 8px; }
[dir=rtl] .md-chips .md-chip-input-container {
float: right; }
.md-chips .md-chip-input-container input:not([type]), .md-chips .md-chip-input-container input[type="email"], .md-chips .md-chip-input-container input[type="number"], .md-chips .md-chip-input-container input[type="tel"], .md-chips .md-chip-input-container input[type="url"], .md-chips .md-chip-input-container input[type="text"] {
border: 0;
height: 32px;
line-height: 32px;
padding: 0; }
.md-chips .md-chip-input-container input:not([type]):focus, .md-chips .md-chip-input-container input[type="email"]:focus, .md-chips .md-chip-input-container input[type="number"]:focus, .md-chips .md-chip-input-container input[type="tel"]:focus, .md-chips .md-chip-input-container input[type="url"]:focus, .md-chips .md-chip-input-container input[type="text"]:focus {
outline: none; }
.md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
background: transparent;
height: 32px; }
.md-chips .md-chip-input-container md-autocomplete md-autocomplete-wrap {
box-shadow: none; }
.md-chips .md-chip-input-container md-autocomplete input {
position: relative; }
.md-chips .md-chip-input-container input {
border: 0;
height: 32px;
line-height: 32px;
padding: 0; }
.md-chips .md-chip-input-container input:focus {
outline: none; }
.md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
height: 32px; }
.md-chips .md-chip-input-container md-autocomplete {
box-shadow: none; }
.md-chips .md-chip-input-container md-autocomplete input {
position: relative; }
.md-chips .md-chip-input-container:not(:first-child) {
margin: 8px 8px 0 0; }
[dir=rtl] .md-chips .md-chip-input-container:not(:first-child) {
margin: 8px 0 0 8px; }
.md-chips .md-chip-input-container input {
background: transparent;
border-width: 0; }
.md-chips md-autocomplete button {
display: none; }
@media screen and (-ms-high-contrast: active) {
.md-chip-input-container,
md-chip {
border: 1px solid #fff; }
.md-chip-input-container md-autocomplete {
border: none; } }

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/.md-contact-chips .md-chips md-chip{padding:0 25px 0 0}[dir=rtl] .md-contact-chips .md-chips md-chip{padding:0 0 0 25px}.md-contact-chips .md-chips md-chip .md-contact-avatar{float:left}[dir=rtl] .md-contact-chips .md-chips md-chip .md-contact-avatar{float:right}.md-contact-chips .md-chips md-chip .md-contact-avatar img{height:32px;border-radius:16px}.md-contact-chips .md-chips md-chip .md-contact-name{display:inline-block;height:32px;margin-left:8px}[dir=rtl] .md-contact-chips .md-chips md-chip .md-contact-name{margin-left:auto;margin-right:8px}.md-contact-suggestion{height:56px}.md-contact-suggestion img{height:40px;border-radius:20px;margin-top:8px}.md-contact-suggestion .md-contact-name{margin-left:8px;width:120px}[dir=rtl] .md-contact-suggestion .md-contact-name{margin-left:auto;margin-right:8px}.md-contact-suggestion .md-contact-email,.md-contact-suggestion .md-contact-name{display:inline-block;overflow:hidden;text-overflow:ellipsis}.md-contact-chips-suggestions li{height:100%}.md-chips{display:block;font-family:Roboto,Helvetica Neue,sans-serif;font-size:16px;padding:0 0 8px 3px;vertical-align:middle}.md-chips:after{content:'';display:table;clear:both}[dir=rtl] .md-chips{padding:0 3px 8px 0}.md-chips.md-readonly .md-chip-input-container{min-height:32px}.md-chips:not(.md-readonly){cursor:text}.md-chips.md-removable md-chip{padding-right:22px}[dir=rtl] .md-chips.md-removable md-chip{padding-right:0;padding-left:22px}.md-chips.md-removable md-chip .md-chip-content{padding-right:4px}[dir=rtl] .md-chips.md-removable md-chip .md-chip-content{padding-right:0;padding-left:4px}.md-chips md-chip{cursor:default;border-radius:16px;display:block;height:32px;line-height:32px;margin:8px 8px 0 0;padding:0 12px;float:left;box-sizing:border-box;max-width:100%;position:relative}[dir=rtl] .md-chips md-chip{margin:8px 0 0 8px;float:right}.md-chips md-chip .md-chip-content{display:block;float:left;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}[dir=rtl] .md-chips md-chip .md-chip-content{float:right}.md-chips md-chip .md-chip-content:focus{outline:none}.md-chips md-chip._md-chip-content-edit-is-enabled{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}.md-chips md-chip .md-chip-remove-container{position:absolute;right:0;line-height:22px}[dir=rtl] .md-chips md-chip .md-chip-remove-container{right:auto;left:0}.md-chips md-chip .md-chip-remove{text-align:center;width:32px;height:32px;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;margin:0;position:relative}.md-chips md-chip .md-chip-remove md-icon{height:18px;width:18px;position:absolute;top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.md-chips .md-chip-input-container{display:block;line-height:32px;margin:8px 8px 0 0;padding:0;float:left}[dir=rtl] .md-chips .md-chip-input-container{margin:8px 0 0 8px;float:right}.md-chips .md-chip-input-container input:not([type]),.md-chips .md-chip-input-container input[type=email],.md-chips .md-chip-input-container input[type=number],.md-chips .md-chip-input-container input[type=tel],.md-chips .md-chip-input-container input[type=text],.md-chips .md-chip-input-container input[type=url]{border:0;height:32px;line-height:32px;padding:0}.md-chips .md-chip-input-container input:not([type]):focus,.md-chips .md-chip-input-container input[type=email]:focus,.md-chips .md-chip-input-container input[type=number]:focus,.md-chips .md-chip-input-container input[type=tel]:focus,.md-chips .md-chip-input-container input[type=text]:focus,.md-chips .md-chip-input-container input[type=url]:focus{outline:none}.md-chips .md-chip-input-container md-autocomplete,.md-chips .md-chip-input-container md-autocomplete-wrap{background:transparent;height:32px}.md-chips .md-chip-input-container md-autocomplete md-autocomplete-wrap{box-shadow:none}.md-chips .md-chip-input-container input{border:0;height:32px;line-height:32px;padding:0}.md-chips .md-chip-input-container input:focus{outline:none}.md-chips .md-chip-input-container md-autocomplete,.md-chips .md-chip-input-container md-autocomplete-wrap{height:32px}.md-chips .md-chip-input-container md-autocomplete{box-shadow:none}.md-chips .md-chip-input-container md-autocomplete input{position:relative}.md-chips .md-chip-input-container:not(:first-child){margin:8px 8px 0 0}[dir=rtl] .md-chips .md-chip-input-container:not(:first-child){margin:8px 0 0 8px}.md-chips .md-chip-input-container input{background:transparent;border-width:0}.md-chips md-autocomplete button{display:none}@media screen and (-ms-high-contrast:active){.md-chip-input-container,md-chip{border:1px solid #fff}.md-chip-input-container md-autocomplete{border:none}}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,410 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.colors');
goog.require('ngmaterial.core');
(function () {
"use strict";
/**
* Use a RegExp to check if the `md-colors="<expression>"` is static string
* or one that should be observed and dynamically interpolated.
*/
MdColorsDirective.$inject = ["$mdColors", "$mdUtil", "$log", "$parse"];
MdColorsService.$inject = ["$mdTheming", "$mdUtil", "$log"];
var STATIC_COLOR_EXPRESSION = /^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?('|")[a-zA-Z0-9-.]*('|"))+\s*}$/;
var colorPalettes = null;
/**
* @ngdoc module
* @name material.components.colors
*
* @description
* Define $mdColors service and a `md-colors=""` attribute directive
*/
angular
.module('material.components.colors', ['material.core'])
.directive('mdColors', MdColorsDirective)
.service('$mdColors', MdColorsService);
/**
* @ngdoc service
* @name $mdColors
* @module material.components.colors
*
* @description
* With only defining themes, one couldn't get non ngMaterial elements colored with Material colors,
* `$mdColors` service is used by the md-color directive to convert the 1..n color expressions to RGBA values and will apply
* those values to element as CSS property values.
*
* @usage
* <hljs lang="js">
* angular.controller('myCtrl', function ($mdColors) {
* var color = $mdColors.getThemeColor('myTheme-red-200-0.5');
* ...
* });
* </hljs>
*
*/
function MdColorsService($mdTheming, $mdUtil, $log) {
colorPalettes = colorPalettes || Object.keys($mdTheming.PALETTES);
// Publish service instance
return {
applyThemeColors: applyThemeColors,
getThemeColor: getThemeColor,
hasTheme: hasTheme
};
// ********************************************
// Internal Methods
// ********************************************
/**
* @ngdoc method
* @name $mdColors#applyThemeColors
*
* @description
* Gets a color json object, keys are css properties and values are string of the wanted color
* Then calculate the rgba() values based on the theme color parts
*
* @param {DOMElement} element the element to apply the styles on.
* @param {object} colorExpression json object, keys are css properties and values are string of the wanted color,
* for example: `{color: 'red-A200-0.3'}`.
*
* @usage
* <hljs lang="js">
* app.directive('myDirective', function($mdColors) {
* return {
* ...
* link: function (scope, elem) {
* $mdColors.applyThemeColors(elem, {color: 'red'});
* }
* }
* });
* </hljs>
*/
function applyThemeColors(element, colorExpression) {
try {
if (colorExpression) {
// Assign the calculate RGBA color values directly as inline CSS
element.css(interpolateColors(colorExpression));
}
} catch (e) {
$log.error(e.message);
}
}
/**
* @ngdoc method
* @name $mdColors#getThemeColor
*
* @description
* Get parsed color from expression
*
* @param {string} expression string of a color expression (for instance `'red-700-0.8'`)
*
* @returns {string} a css color expression (for instance `rgba(211, 47, 47, 0.8)`)
*
* @usage
* <hljs lang="js">
* angular.controller('myCtrl', function ($mdColors) {
* var color = $mdColors.getThemeColor('myTheme-red-200-0.5');
* ...
* });
* </hljs>
*/
function getThemeColor(expression) {
var color = extractColorOptions(expression);
return parseColor(color);
}
/**
* Return the parsed color
* @param color hashmap of color definitions
* @param contrast whether use contrast color for foreground
* @returns rgba color string
*/
function parseColor(color, contrast) {
contrast = contrast || false;
var rgbValues = $mdTheming.PALETTES[color.palette][color.hue];
rgbValues = contrast ? rgbValues.contrast : rgbValues.value;
return $mdUtil.supplant('rgba({0}, {1}, {2}, {3})',
[rgbValues[0], rgbValues[1], rgbValues[2], rgbValues[3] || color.opacity]
);
}
/**
* Convert the color expression into an object with scope-interpolated values
* Then calculate the rgba() values based on the theme color parts
*
* @results Hashmap of CSS properties with associated `rgba( )` string vales
*
*
*/
function interpolateColors(themeColors) {
var rgbColors = {};
var hasColorProperty = themeColors.hasOwnProperty('color');
angular.forEach(themeColors, function (value, key) {
var color = extractColorOptions(value);
var hasBackground = key.indexOf('background') > -1;
rgbColors[key] = parseColor(color);
if (hasBackground && !hasColorProperty) {
rgbColors.color = parseColor(color, true);
}
});
return rgbColors;
}
/**
* Check if expression has defined theme
* e.g.
* 'myTheme-primary' => true
* 'red-800' => false
*/
function hasTheme(expression) {
return angular.isDefined($mdTheming.THEMES[expression.split('-')[0]]);
}
/**
* For the evaluated expression, extract the color parts into a hash map
*/
function extractColorOptions(expression) {
var parts = expression.split('-');
var hasTheme = angular.isDefined($mdTheming.THEMES[parts[0]]);
var theme = hasTheme ? parts.splice(0, 1)[0] : $mdTheming.defaultTheme();
return {
theme: theme,
palette: extractPalette(parts, theme),
hue: extractHue(parts, theme),
opacity: parts[2] || 1
};
}
/**
* Calculate the theme palette name
*/
function extractPalette(parts, theme) {
// If the next section is one of the palettes we assume it's a two word palette
// Two word palette can be also written in camelCase, forming camelCase to dash-case
var isTwoWord = parts.length > 1 && colorPalettes.indexOf(parts[1]) !== -1;
var palette = parts[0].replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
if (isTwoWord) palette = parts[0] + '-' + parts.splice(1, 1);
if (colorPalettes.indexOf(palette) === -1) {
// If the palette is not in the palette list it's one of primary/accent/warn/background
var scheme = $mdTheming.THEMES[theme].colors[palette];
if (!scheme) {
throw new Error($mdUtil.supplant('mdColors: couldn\'t find \'{palette}\' in the palettes.', {palette: palette}));
}
palette = scheme.name;
}
return palette;
}
function extractHue(parts, theme) {
var themeColors = $mdTheming.THEMES[theme].colors;
if (parts[1] === 'hue') {
var hueNumber = parseInt(parts.splice(2, 1)[0], 10);
if (hueNumber < 1 || hueNumber > 3) {
throw new Error($mdUtil.supplant('mdColors: \'hue-{hueNumber}\' is not a valid hue, can be only \'hue-1\', \'hue-2\' and \'hue-3\'', {hueNumber: hueNumber}));
}
parts[1] = 'hue-' + hueNumber;
if (!(parts[0] in themeColors)) {
throw new Error($mdUtil.supplant('mdColors: \'hue-x\' can only be used with [{availableThemes}], but was used with \'{usedTheme}\'', {
availableThemes: Object.keys(themeColors).join(', '),
usedTheme: parts[0]
}));
}
return themeColors[parts[0]].hues[parts[1]];
}
return parts[1] || themeColors[parts[0] in themeColors ? parts[0] : 'primary'].hues['default'];
}
}
/**
* @ngdoc directive
* @name mdColors
* @module material.components.colors
*
* @restrict A
*
* @description
* `mdColors` directive will apply the theme-based color expression as RGBA CSS style values.
*
* The format will be similar to our color defining in the scss files:
*
* ## `[?theme]-[palette]-[?hue]-[?opacity]`
* - [theme] - default value is the default theme
* - [palette] - can be either palette name or primary/accent/warn/background
* - [hue] - default is 500 (hue-x can be used with primary/accent/warn/background)
* - [opacity] - default is 1
*
* > `?` indicates optional parameter
*
* @usage
* <hljs lang="html">
* <div md-colors="{background: 'myTheme-accent-900-0.43'}">
* <div md-colors="{color: 'red-A100', 'border-color': 'primary-600'}">
* <span>Color demo</span>
* </div>
* </div>
* </hljs>
*
* `mdColors` directive will automatically watch for changes in the expression if it recognizes an interpolation
* expression or a function. For performance options, you can use `::` prefix to the `md-colors` expression
* to indicate a one-time data binding.
* <hljs lang="html">
* <md-card md-colors="::{background: '{{theme}}-primary-700'}">
* </md-card>
* </hljs>
*
*/
function MdColorsDirective($mdColors, $mdUtil, $log, $parse) {
return {
restrict: 'A',
require: ['^?mdTheme'],
compile: function (tElem, tAttrs) {
var shouldWatch = shouldColorsWatch();
return function (scope, element, attrs, ctrl) {
var mdThemeController = ctrl[0];
var lastColors = {};
var parseColors = function (theme) {
if (typeof theme !== 'string') {
theme = '';
}
if (!attrs.mdColors) {
attrs.mdColors = '{}';
}
/**
* Json.parse() does not work because the keys are not quoted;
* use $parse to convert to a hash map
*/
var colors = $parse(attrs.mdColors)(scope);
/**
* If mdTheme is defined up the DOM tree
* we add mdTheme theme to colors who doesn't specified a theme
*
* # example
* <hljs lang="html">
* <div md-theme="myTheme">
* <div md-colors="{background: 'primary-600'}">
* <span md-colors="{background: 'mySecondTheme-accent-200'}">Color demo</span>
* </div>
* </div>
* </hljs>
*
* 'primary-600' will be 'myTheme-primary-600',
* but 'mySecondTheme-accent-200' will stay the same cause it has a theme prefix
*/
if (mdThemeController) {
Object.keys(colors).forEach(function (prop) {
var color = colors[prop];
if (!$mdColors.hasTheme(color)) {
colors[prop] = (theme || mdThemeController.$mdTheme) + '-' + color;
}
});
}
cleanElement(colors);
return colors;
};
var cleanElement = function (colors) {
if (!angular.equals(colors, lastColors)) {
var keys = Object.keys(lastColors);
if (lastColors.background && !keys.color) {
keys.push('color');
}
keys.forEach(function (key) {
element.css(key, '');
});
}
lastColors = colors;
};
/**
* Registering for mgTheme changes and asking mdTheme controller run our callback whenever a theme changes
*/
var unregisterChanges = angular.noop;
if (mdThemeController) {
unregisterChanges = mdThemeController.registerChanges(function (theme) {
$mdColors.applyThemeColors(element, parseColors(theme));
});
}
scope.$on('$destroy', function () {
unregisterChanges();
});
try {
if (shouldWatch) {
scope.$watch(parseColors, angular.bind(this,
$mdColors.applyThemeColors, element
), true);
}
else {
$mdColors.applyThemeColors(element, parseColors());
}
}
catch (e) {
$log.error(e.message);
}
};
function shouldColorsWatch() {
// Simulate 1x binding and mark mdColorsWatch == false
var rawColorExpression = tAttrs.mdColors;
var bindOnce = rawColorExpression.indexOf('::') > -1;
var isStatic = bindOnce ? true : STATIC_COLOR_EXPRESSION.test(tAttrs.mdColors);
// Remove it for the postLink...
tAttrs.mdColors = rawColorExpression.replace('::', '');
var hasWatchAttr = angular.isDefined(tAttrs.mdColorsWatch);
return (bindOnce || isStatic) ? false :
hasWatchAttr ? $mdUtil.parseAttributeBoolean(tAttrs.mdColorsWatch) : true;
}
}
};
}
})();
ngmaterial.components.colors = angular.module("material.components.colors");

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
goog.provide("ngmaterial.components.colors"),goog.require("ngmaterial.core"),function(){"use strict";function e(e,r,o){function t(e,r){try{r&&e.css(s(r))}catch(n){o.error(n.message)}}function a(e){var r=i(e);return l(r)}function l(o,n){n=n||!1;var t=e.PALETTES[o.palette][o.hue];return t=n?t.contrast:t.value,r.supplant("rgba({0}, {1}, {2}, {3})",[t[0],t[1],t[2],t[3]||o.opacity])}function s(e){var r={},o=e.hasOwnProperty("color");return angular.forEach(e,function(e,n){var t=i(e),a=n.indexOf("background")>-1;r[n]=l(t),a&&!o&&(r.color=l(t,!0))}),r}function u(r){return angular.isDefined(e.THEMES[r.split("-")[0]])}function i(r){var o=r.split("-"),n=angular.isDefined(e.THEMES[o[0]]),t=n?o.splice(0,1)[0]:e.defaultTheme();return{theme:t,palette:c(o,t),hue:m(o,t),opacity:o[2]||1}}function c(o,t){var a=o.length>1&&n.indexOf(o[1])!==-1,l=o[0].replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();if(a&&(l=o[0]+"-"+o.splice(1,1)),n.indexOf(l)===-1){var s=e.THEMES[t].colors[l];if(!s)throw new Error(r.supplant("mdColors: couldn't find '{palette}' in the palettes.",{palette:l}));l=s.name}return l}function m(o,n){var t=e.THEMES[n].colors;if("hue"===o[1]){var a=parseInt(o.splice(2,1)[0],10);if(a<1||a>3)throw new Error(r.supplant("mdColors: 'hue-{hueNumber}' is not a valid hue, can be only 'hue-1', 'hue-2' and 'hue-3'",{hueNumber:a}));if(o[1]="hue-"+a,!(o[0]in t))throw new Error(r.supplant("mdColors: 'hue-x' can only be used with [{availableThemes}], but was used with '{usedTheme}'",{availableThemes:Object.keys(t).join(", "),usedTheme:o[0]}));return t[o[0]].hues[o[1]]}return o[1]||t[o[0]in t?o[0]:"primary"].hues["default"]}return n=n||Object.keys(e.PALETTES),{applyThemeColors:t,getThemeColor:a,hasTheme:u}}function r(e,r,n,t){return{restrict:"A",require:["^?mdTheme"],compile:function(a,l){function s(){var e=l.mdColors,n=e.indexOf("::")>-1,t=!!n||o.test(l.mdColors);l.mdColors=e.replace("::","");var a=angular.isDefined(l.mdColorsWatch);return!n&&!t&&(!a||r.parseAttributeBoolean(l.mdColorsWatch))}var u=s();return function(r,o,a,l){var s=l[0],i={},c=function(o){"string"!=typeof o&&(o=""),a.mdColors||(a.mdColors="{}");var n=t(a.mdColors)(r);return s&&Object.keys(n).forEach(function(r){var t=n[r];e.hasTheme(t)||(n[r]=(o||s.$mdTheme)+"-"+t)}),m(n),n},m=function(e){if(!angular.equals(e,i)){var r=Object.keys(i);i.background&&!r.color&&r.push("color"),r.forEach(function(e){o.css(e,"")})}i=e},h=angular.noop;s&&(h=s.registerChanges(function(r){e.applyThemeColors(o,c(r))})),r.$on("$destroy",function(){h()});try{u?r.$watch(c,angular.bind(this,e.applyThemeColors,o),!0):e.applyThemeColors(o,c())}catch(d){n.error(d.message)}}}}}r.$inject=["$mdColors","$mdUtil","$log","$parse"],e.$inject=["$mdTheming","$mdUtil","$log"];var o=/^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?('|")[a-zA-Z0-9-.]*('|"))+\s*}$/,n=null;angular.module("material.components.colors",["material.core"]).directive("mdColors",r).service("$mdColors",e)}(),ngmaterial.components.colors=angular.module("material.components.colors");

View File

@@ -0,0 +1,9 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-content.md-THEME_NAME-theme {
color: '{{foreground-1}}';
background-color: '{{background-default}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-content.md-THEME_NAME-theme{color:'{{foreground-1}}';background-color:'{{background-default}}'}

View File

@@ -0,0 +1,20 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-content {
display: block;
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch; }
md-content[md-scroll-y] {
overflow-y: auto;
overflow-x: hidden; }
md-content[md-scroll-x] {
overflow-x: auto;
overflow-y: hidden; }
@media print {
md-content {
overflow: visible !important; } }

View File

@@ -0,0 +1,102 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.content');
goog.require('ngmaterial.core');
/**
* @ngdoc module
* @name material.components.content
*
* @description
* Scrollable content
*/
mdContentDirective.$inject = ["$mdTheming"];
angular.module('material.components.content', [
'material.core'
])
.directive('mdContent', mdContentDirective);
/**
* @ngdoc directive
* @name mdContent
* @module material.components.content
*
* @restrict E
*
* @description
*
* The `<md-content>` directive is a container element useful for scrollable content. It achieves
* this by setting the CSS `overflow` property to `auto` so that content can properly scroll.
*
* In general, `<md-content>` components are not designed to be nested inside one another. If
* possible, it is better to make them siblings. This often results in a better user experience as
* having nested scrollbars may confuse the user.
*
* ## Troubleshooting
*
* In some cases, you may wish to apply the `md-no-momentum` class to ensure that Safari's
* momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling
* SVG icons and some other components.
*
* Additionally, we now also offer the `md-no-flicker` class which can be applied to any element
* and uses a Webkit-specific filter of `blur(0px)` that forces GPU rendering of all elements
* inside (which eliminates the flicker on iOS devices).
*
* _<b>Note:</b> Forcing an element to render on the GPU can have unintended side-effects, especially
* related to the z-index of elements. Please use with caution and only on the elements needed._
*
* @usage
*
* Add the `[layout-padding]` attribute to make the content padded.
*
* <hljs lang="html">
* <md-content layout-padding>
* Lorem ipsum dolor sit amet, ne quod novum mei.
* </md-content>
* </hljs>
*/
function mdContentDirective($mdTheming) {
return {
restrict: 'E',
controller: ['$scope', '$element', ContentController],
link: function(scope, element) {
element.addClass('_md'); // private md component indicator for styling
$mdTheming(element);
scope.$broadcast('$mdContentLoaded', element);
iosScrollFix(element[0]);
}
};
function ContentController($scope, $element) {
this.$scope = $scope;
this.$element = $element;
}
}
function iosScrollFix(node) {
// IOS FIX:
// If we scroll where there is no more room for the webview to scroll,
// by default the webview itself will scroll up and down, this looks really
// bad. So if we are scrolling to the very top or bottom, add/subtract one
angular.element(node).on('$md.pressdown', function(ev) {
// Only touch events
if (ev.pointer.type !== 't') return;
// Don't let a child content's touchstart ruin it for us.
if (ev.$materialScrollFixed) return;
ev.$materialScrollFixed = true;
if (node.scrollTop === 0) {
node.scrollTop = 1;
} else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {
node.scrollTop -= 1;
}
});
}
ngmaterial.components.content = angular.module("material.components.content");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}md-content[md-scroll-y]{overflow-y:auto;overflow-x:hidden}md-content[md-scroll-x]{overflow-x:auto;overflow-y:hidden}@media print{md-content{overflow:visible!important}}

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
function mdContentDirective(e){function o(e,o){this.$scope=e,this.$element=o}return{restrict:"E",controller:["$scope","$element",o],link:function(o,t){t.addClass("_md"),e(t),o.$broadcast("$mdContentLoaded",t),iosScrollFix(t[0])}}}function iosScrollFix(e){angular.element(e).on("$md.pressdown",function(o){"t"===o.pointer.type&&(o.$materialScrollFixed||(o.$materialScrollFixed=!0,0===e.scrollTop?e.scrollTop=1:e.scrollHeight===e.scrollTop+e.offsetHeight&&(e.scrollTop-=1)))})}goog.provide("ngmaterial.components.content"),goog.require("ngmaterial.core"),mdContentDirective.$inject=["$mdTheming"],angular.module("material.components.content",["material.core"]).directive("mdContent",mdContentDirective),ngmaterial.components.content=angular.module("material.components.content");

View File

@@ -0,0 +1,10 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
/* Only used with Theme processes */
html.md-THEME_NAME-theme, body.md-THEME_NAME-theme {
color: '{{foreground-1}}';
background-color: '{{background-color}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/body.md-THEME_NAME-theme,html.md-THEME_NAME-theme{color:'{{foreground-1}}';background-color:'{{background-color}}'}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,87 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
/** Theme styles for mdCalendar. */
.md-calendar.md-THEME_NAME-theme {
background: '{{background-A100}}';
color: '{{background-A200-0.87}}'; }
.md-calendar.md-THEME_NAME-theme tr:last-child td {
border-bottom-color: '{{background-200}}'; }
.md-THEME_NAME-theme .md-calendar-day-header {
background: '{{background-300}}';
color: '{{background-A200-0.87}}'; }
.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator {
border: 1px solid '{{primary-500}}'; }
.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today.md-calendar-date-disabled {
color: '{{primary-500-0.6}}'; }
.md-calendar-date.md-focus .md-THEME_NAME-theme .md-calendar-date-selection-indicator, .md-THEME_NAME-theme .md-calendar-date-selection-indicator:hover {
background: '{{background-300}}'; }
.md-THEME_NAME-theme .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator,
.md-THEME_NAME-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator {
background: '{{primary-500}}';
color: '{{primary-500-contrast}}';
border-color: transparent; }
.md-THEME_NAME-theme .md-calendar-date-disabled,
.md-THEME_NAME-theme .md-calendar-month-label-disabled {
color: '{{background-A200-0.435}}'; }
/** Theme styles for mdDatepicker. */
.md-THEME_NAME-theme .md-datepicker-input {
color: '{{foreground-1}}'; }
.md-THEME_NAME-theme .md-datepicker-input::-webkit-input-placeholder {
color: '{{foreground-3}}'; }
.md-THEME_NAME-theme .md-datepicker-input:-moz-placeholder {
color: '{{foreground-3}}'; }
.md-THEME_NAME-theme .md-datepicker-input::-moz-placeholder {
color: '{{foreground-3}}'; }
.md-THEME_NAME-theme .md-datepicker-input:-ms-input-placeholder {
color: '{{foreground-3}}'; }
.md-THEME_NAME-theme .md-datepicker-input::-webkit-input-placeholder {
color: '{{foreground-3}}'; }
.md-THEME_NAME-theme .md-datepicker-input-container {
border-bottom-color: '{{foreground-4}}'; }
.md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused {
border-bottom-color: '{{primary-color}}'; }
.md-accent .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused {
border-bottom-color: '{{accent-color}}'; }
.md-warn .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused {
border-bottom-color: '{{warn-A700}}'; }
.md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-invalid {
border-bottom-color: '{{warn-A700}}'; }
.md-THEME_NAME-theme .md-datepicker-calendar-pane {
border-color: '{{background-hue-1}}'; }
.md-THEME_NAME-theme .md-datepicker-triangle-button .md-datepicker-expand-triangle {
border-top-color: '{{foreground-3}}'; }
.md-THEME_NAME-theme .md-datepicker-triangle-button:hover .md-datepicker-expand-triangle {
border-top-color: '{{foreground-2}}'; }
.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon {
color: '{{primary-color}}'; }
.md-THEME_NAME-theme .md-datepicker-open.md-accent .md-datepicker-calendar-icon, .md-accent .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon {
color: '{{accent-color}}'; }
.md-THEME_NAME-theme .md-datepicker-open.md-warn .md-datepicker-calendar-icon, .md-warn .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon {
color: '{{warn-A700}}'; }
.md-THEME_NAME-theme .md-datepicker-calendar {
background: '{{background-A100}}'; }
.md-THEME_NAME-theme .md-datepicker-input-mask-opaque {
box-shadow: 0 0 0 9999px "{{background-hue-1}}"; }
.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-input-container {
background: "{{background-hue-1}}"; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/.md-calendar.md-THEME_NAME-theme{background:'{{background-A100}}';color:'{{background-A200-0.87}}'}.md-calendar.md-THEME_NAME-theme tr:last-child td{border-bottom-color:'{{background-200}}'}.md-THEME_NAME-theme .md-calendar-day-header{background:'{{background-300}}';color:'{{background-A200-0.87}}'}.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator{border:1px solid}.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today.md-calendar-date-disabled{color:'{{primary-500-0.6}}'}.md-calendar-date.md-focus .md-THEME_NAME-theme .md-calendar-date-selection-indicator,.md-THEME_NAME-theme .md-calendar-date-selection-indicator:hover{background:'{{background-300}}'}.md-THEME_NAME-theme .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator,.md-THEME_NAME-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator{background:'{{primary-500}}';color:'{{primary-500-contrast}}';border-color:transparent}.md-THEME_NAME-theme .md-calendar-date-disabled,.md-THEME_NAME-theme .md-calendar-month-label-disabled{color:'{{background-A200-0.435}}'}.md-THEME_NAME-theme .md-datepicker-input{color:'{{foreground-1}}'}.md-THEME_NAME-theme .md-datepicker-input:-moz-placeholder,.md-THEME_NAME-theme .md-datepicker-input::-moz-placeholder{color:'{{foreground-3}}'}.md-THEME_NAME-theme .md-datepicker-input:-ms-input-placeholder{color:'{{foreground-3}}'}.md-THEME_NAME-theme .md-datepicker-input::-webkit-input-placeholder{color:'{{foreground-3}}'}.md-THEME_NAME-theme .md-datepicker-input-container{border-bottom-color:'{{foreground-4}}'}.md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused{border-bottom-color:'{{primary-color}}'}.md-accent .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused{border-bottom-color:'{{accent-color}}'}.md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-invalid,.md-warn .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused{border-bottom-color:'{{warn-A700}}'}.md-THEME_NAME-theme .md-datepicker-calendar-pane{border-color:'{{background-hue-1}}'}.md-THEME_NAME-theme .md-datepicker-triangle-button .md-datepicker-expand-triangle{border-top-color:'{{foreground-3}}'}.md-THEME_NAME-theme .md-datepicker-triangle-button:hover .md-datepicker-expand-triangle{border-top-color:'{{foreground-2}}'}.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon{color:'{{primary-color}}'}.md-accent .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon,.md-THEME_NAME-theme .md-datepicker-open.md-accent .md-datepicker-calendar-icon{color:'{{accent-color}}'}.md-THEME_NAME-theme .md-datepicker-open.md-warn .md-datepicker-calendar-icon,.md-warn .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon{color:'{{warn-A700}}'}.md-THEME_NAME-theme .md-datepicker-calendar{background:'{{background-A100}}'}.md-THEME_NAME-theme .md-datepicker-input-mask-opaque{box-shadow:0 0 0 9999px "{{background-hue-1}}"}.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-input-container{background:"{{background-hue-1}}"}

View File

@@ -0,0 +1,305 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
/** Styles for mdCalendar. */
md-calendar {
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.md-calendar-scroll-mask {
display: inline-block;
overflow: hidden;
height: 308px; }
.md-calendar-scroll-mask .md-virtual-repeat-scroller {
overflow-y: scroll;
-webkit-overflow-scrolling: touch; }
.md-calendar-scroll-mask .md-virtual-repeat-scroller::-webkit-scrollbar {
display: none; }
.md-calendar-scroll-mask .md-virtual-repeat-offsetter {
width: 100%; }
.md-calendar-scroll-container {
box-shadow: inset -3px 3px 6px rgba(0, 0, 0, 0.2);
display: inline-block;
height: 308px;
width: 346px; }
.md-calendar-date {
height: 44px;
width: 44px;
text-align: center;
padding: 0;
border: none;
box-sizing: content-box; }
.md-calendar-date:first-child {
padding-left: 16px; }
[dir=rtl] .md-calendar-date:first-child {
padding-left: 0;
padding-right: 16px; }
.md-calendar-date:last-child {
padding-right: 16px; }
[dir=rtl] .md-calendar-date:last-child {
padding-right: 0;
padding-left: 16px; }
.md-calendar-date.md-calendar-date-disabled {
cursor: default; }
.md-calendar-date-selection-indicator {
-webkit-transition: background-color, color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: background-color, color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 50%;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px; }
.md-calendar-date:not(.md-disabled) .md-calendar-date-selection-indicator {
cursor: pointer; }
.md-calendar-month-label {
height: 44px;
font-size: 14px;
font-weight: 500;
padding: 0 0 0 24px; }
[dir=rtl] .md-calendar-month-label {
padding: 0 24px 0 0; }
md-calendar-month .md-calendar-month-label:not(.md-calendar-month-label-disabled) {
cursor: pointer; }
.md-calendar-month-label md-icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
[dir=rtl] .md-calendar-month-label md-icon {
-webkit-transform: none;
transform: none; }
.md-calendar-month-label span {
vertical-align: middle; }
.md-calendar-day-header {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse; }
.md-calendar-day-header th {
height: 40px;
width: 44px;
text-align: center;
padding: 0;
border: none;
box-sizing: content-box;
font-weight: normal; }
.md-calendar-day-header th:first-child {
padding-left: 16px; }
[dir=rtl] .md-calendar-day-header th:first-child {
padding-left: 0;
padding-right: 16px; }
.md-calendar-day-header th:last-child {
padding-right: 16px; }
[dir=rtl] .md-calendar-day-header th:last-child {
padding-right: 0;
padding-left: 16px; }
.md-calendar {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse; }
.md-calendar tr:last-child td {
border-bottom-width: 1px;
border-bottom-style: solid; }
.md-calendar:first-child {
border-top: 1px solid transparent; }
.md-calendar tbody, .md-calendar td, .md-calendar tr {
vertical-align: middle;
box-sizing: content-box; }
/** Styles for mdDatepicker. */
md-datepicker {
white-space: nowrap;
overflow: hidden;
padding-right: 18px;
margin-right: -18px;
vertical-align: middle; }
[dir=rtl] md-datepicker {
padding-right: 0;
padding-left: 18px; }
[dir=rtl] md-datepicker {
margin-right: auto;
margin-left: -18px; }
.md-inline-form md-datepicker {
margin-top: 12px; }
.md-datepicker-button {
display: inline-block;
box-sizing: border-box;
background: none;
vertical-align: middle;
position: relative; }
.md-datepicker-button:before {
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
content: '';
speak: none; }
.md-datepicker-input {
font-size: 14px;
box-sizing: border-box;
border: none;
box-shadow: none;
outline: none;
background: transparent;
min-width: 120px;
max-width: 328px;
padding: 0 0 5px; }
.md-datepicker-input::-ms-clear {
display: none; }
._md-datepicker-floating-label > md-datepicker {
overflow: visible; }
._md-datepicker-floating-label > md-datepicker .md-datepicker-input-container {
border: none; }
._md-datepicker-floating-label > md-datepicker .md-datepicker-button {
float: left;
margin-top: -2.5px; }
[dir=rtl] ._md-datepicker-floating-label > md-datepicker .md-datepicker-button {
float: right; }
._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
right: 18px;
left: auto;
width: calc(100% - 84px); }
[dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
right: auto; }
[dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
left: 18px; }
._md-datepicker-floating-label._md-datepicker-has-calendar-icon .md-input-message-animation {
margin-left: 64px; }
[dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon .md-input-message-animation {
margin-left: auto;
margin-right: 64px; }
.md-datepicker-input-container {
position: relative;
border-bottom-width: 1px;
border-bottom-style: solid;
display: inline-block;
width: auto; }
.md-icon-button + .md-datepicker-input-container {
margin-left: 12px; }
[dir=rtl] .md-icon-button + .md-datepicker-input-container {
margin-left: auto;
margin-right: 12px; }
.md-datepicker-input-container.md-datepicker-focused {
border-bottom-width: 2px; }
.md-datepicker-is-showing .md-scroll-mask {
z-index: 99; }
.md-datepicker-calendar-pane {
position: absolute;
top: 0;
left: -100%;
z-index: 100;
border-width: 1px;
border-style: solid;
background: transparent;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
.md-datepicker-calendar-pane.md-pane-open {
-webkit-transform: scale(1);
transform: scale(1); }
.md-datepicker-input-mask {
height: 40px;
width: 340px;
position: relative;
overflow: hidden;
background: transparent;
pointer-events: none;
cursor: text; }
.md-datepicker-calendar {
opacity: 0;
-webkit-transition: opacity 0.2s cubic-bezier(0.5, 0, 0.25, 1);
transition: opacity 0.2s cubic-bezier(0.5, 0, 0.25, 1); }
.md-pane-open .md-datepicker-calendar {
opacity: 1; }
.md-datepicker-calendar md-calendar:focus {
outline: none; }
.md-datepicker-expand-triangle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid; }
.md-datepicker-triangle-button {
position: absolute;
right: 0;
top: 5px;
-webkit-transform: translateY(-25%) translateX(45%);
transform: translateY(-25%) translateX(45%); }
[dir=rtl] .md-datepicker-triangle-button {
right: auto;
left: 0; }
[dir=rtl] .md-datepicker-triangle-button {
-webkit-transform: translateY(-25%) translateX(-45%);
transform: translateY(-25%) translateX(-45%); }
.md-datepicker-triangle-button.md-button.md-icon-button {
height: 36px;
width: 36px;
position: absolute;
padding: 8px; }
md-datepicker[disabled] .md-datepicker-input-container {
border-bottom-color: transparent; }
md-datepicker[disabled] .md-datepicker-triangle-button {
display: none; }
.md-datepicker-open {
overflow: hidden; }
.md-datepicker-open .md-datepicker-input-container,
.md-datepicker-open input.md-input {
border-bottom-color: transparent; }
.md-datepicker-open .md-datepicker-triangle-button,
.md-datepicker-open.md-input-has-value > label,
.md-datepicker-open.md-input-has-placeholder > label {
display: none; }
.md-datepicker-pos-adjusted .md-datepicker-input-mask {
display: none; }
.md-datepicker-calendar-pane .md-calendar {
-webkit-transform: translateY(-85px);
transform: translateY(-85px);
-webkit-transition: -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transition-delay: 0.125s;
transition-delay: 0.125s; }
.md-datepicker-calendar-pane.md-pane-open .md-calendar {
-webkit-transform: translateY(0);
transform: translateY(0); }

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,12 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-dialog.md-THEME_NAME-theme {
border-radius: 4px;
background-color: '{{background-hue-1}}';
color: '{{foreground-1}}'; }
md-dialog.md-THEME_NAME-theme.md-content-overflow .md-actions, md-dialog.md-THEME_NAME-theme.md-content-overflow md-dialog-actions {
border-top-color: '{{foreground-4}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-dialog.md-THEME_NAME-theme{border-radius:4px;background-color:'{{background-hue-1}}';color:'{{foreground-1}}'}md-dialog.md-THEME_NAME-theme.md-content-overflow .md-actions,md-dialog.md-THEME_NAME-theme.md-content-overflow md-dialog-actions{border-top-color:'{{foreground-4}}'}

View File

@@ -0,0 +1,131 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
.md-dialog-is-showing {
max-height: 100%; }
.md-dialog-container {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 80;
overflow: hidden; }
md-dialog {
opacity: 0;
min-width: 240px;
max-width: 80%;
max-height: 80%;
position: relative;
overflow: auto;
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column; }
md-dialog.md-transition-in {
opacity: 1;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1); }
md-dialog.md-transition-out {
opacity: 0;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transform: translate(0, 100%) scale(0.2);
transform: translate(0, 100%) scale(0.2); }
md-dialog > form {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
overflow: auto; }
md-dialog .md-dialog-content {
padding: 24px; }
md-dialog md-dialog-content {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
order: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
overflow: auto;
-webkit-overflow-scrolling: touch; }
md-dialog md-dialog-content:not([layout=row]) > *:first-child:not(.md-subheader) {
margin-top: 0; }
md-dialog md-dialog-content:focus {
outline: none; }
md-dialog md-dialog-content .md-subheader {
margin: 0; }
md-dialog md-dialog-content .md-dialog-content-body {
width: 100%; }
md-dialog md-dialog-content .md-prompt-input-container {
width: 100%;
box-sizing: border-box; }
md-dialog .md-actions, md-dialog md-dialog-actions {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
order: 2;
box-sizing: border-box;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
margin-bottom: 0;
padding-right: 8px;
padding-left: 16px;
min-height: 52px;
overflow: hidden; }
[dir=rtl] md-dialog .md-actions, [dir=rtl] md-dialog md-dialog-actions {
padding-right: 16px; }
[dir=rtl] md-dialog .md-actions, [dir=rtl] md-dialog md-dialog-actions {
padding-left: 8px; }
md-dialog .md-actions .md-button, md-dialog md-dialog-actions .md-button {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 0;
margin-top: 8px; }
[dir=rtl] md-dialog .md-actions .md-button, [dir=rtl] md-dialog md-dialog-actions .md-button {
margin-left: 0; }
[dir=rtl] md-dialog .md-actions .md-button, [dir=rtl] md-dialog md-dialog-actions .md-button {
margin-right: 8px; }
md-dialog.md-content-overflow .md-actions, md-dialog.md-content-overflow md-dialog-actions {
border-top-width: 1px;
border-top-style: solid; }
@media screen and (-ms-high-contrast: active) {
md-dialog {
border: 1px solid #fff; } }
@media (max-width: 959px) {
md-dialog.md-dialog-fullscreen {
min-height: 100%;
min-width: 100%;
border-radius: 0; } }

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/.md-dialog-is-showing{max-height:100%}.md-dialog-container{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;z-index:80;overflow:hidden}.md-dialog-container,md-dialog{display:-webkit-box;display:-webkit-flex;display:flex}md-dialog{opacity:0;min-width:240px;max-width:80%;max-height:80%;position:relative;overflow:auto;box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}md-dialog.md-transition-in{opacity:1;-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}md-dialog.md-transition-in,md-dialog.md-transition-out{-webkit-transition:all .4s cubic-bezier(.25,.8,.25,1);transition:all .4s cubic-bezier(.25,.8,.25,1)}md-dialog.md-transition-out{opacity:0;-webkit-transform:translate(0,100%) scale(.2);transform:translate(0,100%) scale(.2)}md-dialog>form{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;overflow:auto}md-dialog .md-dialog-content{padding:24px}md-dialog md-dialog-content{-webkit-box-ordinal-group:2;-webkit-order:1;order:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}md-dialog md-dialog-content:not([layout=row])>:first-child:not(.md-subheader){margin-top:0}md-dialog md-dialog-content:focus{outline:none}md-dialog md-dialog-content .md-subheader{margin:0}md-dialog md-dialog-content .md-dialog-content-body{width:100%}md-dialog md-dialog-content .md-prompt-input-container{width:100%;box-sizing:border-box}md-dialog .md-actions,md-dialog md-dialog-actions{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-ordinal-group:3;-webkit-order:2;order:2;box-sizing:border-box;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-bottom:0;padding-right:8px;padding-left:16px;min-height:52px;overflow:hidden}[dir=rtl] md-dialog .md-actions,[dir=rtl] md-dialog md-dialog-actions{padding-right:16px;padding-left:8px}md-dialog .md-actions .md-button,md-dialog md-dialog-actions .md-button{margin:8px 0 8px 8px}[dir=rtl] md-dialog .md-actions .md-button,[dir=rtl] md-dialog md-dialog-actions .md-button{margin-left:0;margin-right:8px}md-dialog.md-content-overflow .md-actions,md-dialog.md-content-overflow md-dialog-actions{border-top-width:1px;border-top-style:solid}@media screen and (-ms-high-contrast:active){md-dialog{border:1px solid #fff}}@media (max-width:959px){md-dialog.md-dialog-fullscreen{min-height:100%;min-width:100%;border-radius:0}}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,16 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-divider.md-THEME_NAME-theme {
border-top-color: '{{foreground-4}}'; }
.layout-row > md-divider.md-THEME_NAME-theme,
.layout-xs-row > md-divider.md-THEME_NAME-theme, .layout-gt-xs-row > md-divider.md-THEME_NAME-theme,
.layout-sm-row > md-divider.md-THEME_NAME-theme, .layout-gt-sm-row > md-divider.md-THEME_NAME-theme,
.layout-md-row > md-divider.md-THEME_NAME-theme, .layout-gt-md-row > md-divider.md-THEME_NAME-theme,
.layout-lg-row > md-divider.md-THEME_NAME-theme, .layout-gt-lg-row > md-divider.md-THEME_NAME-theme,
.layout-xl-row > md-divider.md-THEME_NAME-theme {
border-right-color: '{{foreground-4}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-divider.md-THEME_NAME-theme{border-top-color:'{{foreground-4}}'}.layout-gt-lg-row>md-divider.md-THEME_NAME-theme,.layout-gt-md-row>md-divider.md-THEME_NAME-theme,.layout-gt-sm-row>md-divider.md-THEME_NAME-theme,.layout-gt-xs-row>md-divider.md-THEME_NAME-theme,.layout-lg-row>md-divider.md-THEME_NAME-theme,.layout-md-row>md-divider.md-THEME_NAME-theme,.layout-row>md-divider.md-THEME_NAME-theme,.layout-sm-row>md-divider.md-THEME_NAME-theme,.layout-xl-row>md-divider.md-THEME_NAME-theme,.layout-xs-row>md-divider.md-THEME_NAME-theme{border-right-color:'{{foreground-4}}'}

View File

@@ -0,0 +1,26 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-divider {
display: block;
border-top-width: 1px;
border-top-style: solid;
margin: 0; }
md-divider[md-inset] {
margin-left: 80px; }
[dir=rtl] md-divider[md-inset] {
margin-left: auto;
margin-right: 80px; }
.layout-row > md-divider,
.layout-xs-row > md-divider, .layout-gt-xs-row > md-divider,
.layout-sm-row > md-divider, .layout-gt-sm-row > md-divider,
.layout-md-row > md-divider, .layout-gt-md-row > md-divider,
.layout-lg-row > md-divider, .layout-gt-lg-row > md-divider,
.layout-xl-row > md-divider {
border-top-width: 0;
border-right-width: 1px;
border-right-style: solid; }

View File

@@ -0,0 +1,45 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.divider');
goog.require('ngmaterial.core');
/**
* @ngdoc module
* @name material.components.divider
* @description Divider module!
*/
MdDividerDirective.$inject = ["$mdTheming"];
angular.module('material.components.divider', [
'material.core'
])
.directive('mdDivider', MdDividerDirective);
/**
* @ngdoc directive
* @name mdDivider
* @module material.components.divider
* @restrict E
*
* @description
* Dividers group and separate content within lists and page layouts using strong visual and spatial distinctions. This divider is a thin rule, lightweight enough to not distract the user from content.
*
* @param {boolean=} md-inset Add this attribute to activate the inset divider style.
* @usage
* <hljs lang="html">
* <md-divider></md-divider>
*
* <md-divider md-inset></md-divider>
* </hljs>
*
*/
function MdDividerDirective($mdTheming) {
return {
restrict: 'E',
link: $mdTheming
};
}
ngmaterial.components.divider = angular.module("material.components.divider");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-divider{display:block;border-top-width:1px;border-top-style:solid;margin:0}md-divider[md-inset]{margin-left:80px}[dir=rtl] md-divider[md-inset]{margin-left:auto;margin-right:80px}.layout-gt-lg-row>md-divider,.layout-gt-md-row>md-divider,.layout-gt-sm-row>md-divider,.layout-gt-xs-row>md-divider,.layout-lg-row>md-divider,.layout-md-row>md-divider,.layout-row>md-divider,.layout-sm-row>md-divider,.layout-xl-row>md-divider,.layout-xs-row>md-divider{border-top-width:0;border-right-width:1px;border-right-style:solid}

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
function MdDividerDirective(e){return{restrict:"E",link:e}}goog.provide("ngmaterial.components.divider"),goog.require("ngmaterial.core"),MdDividerDirective.$inject=["$mdTheming"],angular.module("material.components.divider",["material.core"]).directive("mdDivider",MdDividerDirective),ngmaterial.components.divider=angular.module("material.components.divider");

View File

@@ -0,0 +1,60 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.fabActions');
goog.require('ngmaterial.core');
(function() {
'use strict';
/**
* @ngdoc module
* @name material.components.fabActions
*/
MdFabActionsDirective.$inject = ["$mdUtil"];
angular
.module('material.components.fabActions', ['material.core'])
.directive('mdFabActions', MdFabActionsDirective);
/**
* @ngdoc directive
* @name mdFabActions
* @module material.components.fabActions
*
* @restrict E
*
* @description
* The `<md-fab-actions>` directive is used inside of a `<md-fab-speed-dial>` or
* `<md-fab-toolbar>` directive to mark an element (or elements) as the actions and setup the
* proper event listeners.
*
* @usage
* See the `<md-fab-speed-dial>` or `<md-fab-toolbar>` directives for example usage.
*/
function MdFabActionsDirective($mdUtil) {
return {
restrict: 'E',
require: ['^?mdFabSpeedDial', '^?mdFabToolbar'],
compile: function(element, attributes) {
var children = element.children();
var hasNgRepeat = $mdUtil.prefixer().hasAttribute(children, 'ng-repeat');
// Support both ng-repeat and static content
if (hasNgRepeat) {
children.addClass('md-fab-action-item');
} else {
// Wrap every child in a new div and add a class that we can scale/fling independently
children.wrap('<div class="md-fab-action-item">');
}
}
}
}
})();
ngmaterial.components.fabActions = angular.module("material.components.fabActions");

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
goog.provide("ngmaterial.components.fabActions"),goog.require("ngmaterial.core"),function(){"use strict";function a(a){return{restrict:"E",require:["^?mdFabSpeedDial","^?mdFabToolbar"],compile:function(e,t){var i=e.children(),n=a.prefixer().hasAttribute(i,"ng-repeat");n?i.addClass("md-fab-action-item"):i.wrap('<div class="md-fab-action-item">')}}}a.$inject=["$mdUtil"],angular.module("material.components.fabActions",["material.core"]).directive("mdFabActions",a)}(),ngmaterial.components.fabActions=angular.module("material.components.fabActions");

View File

@@ -0,0 +1,155 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-fab-speed-dial {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
z-index: 20;
/*
* Hide some graphics glitches if switching animation types
*/
/*
* Handle the animations
*/ }
md-fab-speed-dial.md-fab-bottom-right {
top: auto;
right: 20px;
bottom: 20px;
left: auto;
position: absolute; }
md-fab-speed-dial.md-fab-bottom-left {
top: auto;
right: auto;
bottom: 20px;
left: 20px;
position: absolute; }
md-fab-speed-dial.md-fab-top-right {
top: 20px;
right: 20px;
bottom: auto;
left: auto;
position: absolute; }
md-fab-speed-dial.md-fab-top-left {
top: 20px;
right: auto;
bottom: auto;
left: 20px;
position: absolute; }
md-fab-speed-dial:not(.md-hover-full) {
pointer-events: none; }
md-fab-speed-dial:not(.md-hover-full) md-fab-trigger, md-fab-speed-dial:not(.md-hover-full) .md-fab-action-item {
pointer-events: auto; }
md-fab-speed-dial:not(.md-hover-full).md-is-open {
pointer-events: auto; }
md-fab-speed-dial ._md-css-variables {
z-index: 20; }
md-fab-speed-dial.md-is-open .md-fab-action-item {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center; }
md-fab-speed-dial md-fab-actions {
display: -webkit-box;
display: -webkit-flex;
display: flex;
height: auto; }
md-fab-speed-dial md-fab-actions .md-fab-action-item {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-fab-speed-dial.md-down {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column; }
md-fab-speed-dial.md-down md-fab-trigger {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
order: 1; }
md-fab-speed-dial.md-down md-fab-actions {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
order: 2; }
md-fab-speed-dial.md-up {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column; }
md-fab-speed-dial.md-up md-fab-trigger {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
order: 2; }
md-fab-speed-dial.md-up md-fab-actions {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
order: 1; }
md-fab-speed-dial.md-left {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row; }
md-fab-speed-dial.md-left md-fab-trigger {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
order: 2; }
md-fab-speed-dial.md-left md-fab-actions {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
order: 1; }
md-fab-speed-dial.md-left md-fab-actions .md-fab-action-item {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-fab-speed-dial.md-right {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row; }
md-fab-speed-dial.md-right md-fab-trigger {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
order: 1; }
md-fab-speed-dial.md-right md-fab-actions {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
order: 2; }
md-fab-speed-dial.md-right md-fab-actions .md-fab-action-item {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-fab-speed-dial.md-fling-remove .md-fab-action-item > *, md-fab-speed-dial.md-scale-remove .md-fab-action-item > * {
visibility: hidden; }
md-fab-speed-dial.md-fling .md-fab-action-item {
opacity: 1; }
md-fab-speed-dial.md-fling.md-animations-waiting .md-fab-action-item {
opacity: 0;
-webkit-transition-duration: 0s;
transition-duration: 0s; }
md-fab-speed-dial.md-scale .md-fab-action-item {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-webkit-transition-duration: 0.14286s;
transition-duration: 0.14286s; }

View File

@@ -0,0 +1,563 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.fabShared');
goog.require('ngmaterial.core');
(function() {
'use strict';
MdFabController.$inject = ["$scope", "$element", "$animate", "$mdUtil", "$mdConstant", "$timeout"];
angular.module('material.components.fabShared', ['material.core'])
.controller('MdFabController', MdFabController);
function MdFabController($scope, $element, $animate, $mdUtil, $mdConstant, $timeout) {
var vm = this;
// NOTE: We use async eval(s) below to avoid conflicts with any existing digest loops
vm.open = function() {
$scope.$evalAsync("vm.isOpen = true");
};
vm.close = function() {
// Async eval to avoid conflicts with existing digest loops
$scope.$evalAsync("vm.isOpen = false");
// Focus the trigger when the element closes so users can still tab to the next item
$element.find('md-fab-trigger')[0].focus();
};
// Toggle the open/close state when the trigger is clicked
vm.toggle = function() {
$scope.$evalAsync("vm.isOpen = !vm.isOpen");
};
setupDefaults();
setupListeners();
setupWatchers();
var initialAnimationAttempts = 0;
fireInitialAnimations();
function setupDefaults() {
// Set the default direction to 'down' if none is specified
vm.direction = vm.direction || 'down';
// Set the default to be closed
vm.isOpen = vm.isOpen || false;
// Start the keyboard interaction at the first action
resetActionIndex();
// Add an animations waiting class so we know not to run
$element.addClass('md-animations-waiting');
}
function setupListeners() {
var eventTypes = [
'click', 'focusin', 'focusout'
];
// Add our listeners
angular.forEach(eventTypes, function(eventType) {
$element.on(eventType, parseEvents);
});
// Remove our listeners when destroyed
$scope.$on('$destroy', function() {
angular.forEach(eventTypes, function(eventType) {
$element.off(eventType, parseEvents);
});
// remove any attached keyboard handlers in case element is removed while
// speed dial is open
disableKeyboard();
});
}
var closeTimeout;
function parseEvents(event) {
// If the event is a click, just handle it
if (event.type == 'click') {
handleItemClick(event);
}
// If we focusout, set a timeout to close the element
if (event.type == 'focusout' && !closeTimeout) {
closeTimeout = $timeout(function() {
vm.close();
}, 100, false);
}
// If we see a focusin and there is a timeout about to run, cancel it so we stay open
if (event.type == 'focusin' && closeTimeout) {
$timeout.cancel(closeTimeout);
closeTimeout = null;
}
}
function resetActionIndex() {
vm.currentActionIndex = -1;
}
function setupWatchers() {
// Watch for changes to the direction and update classes/attributes
$scope.$watch('vm.direction', function(newDir, oldDir) {
// Add the appropriate classes so we can target the direction in the CSS
$animate.removeClass($element, 'md-' + oldDir);
$animate.addClass($element, 'md-' + newDir);
// Reset the action index since it may have changed
resetActionIndex();
});
var trigger, actions;
// Watch for changes to md-open
$scope.$watch('vm.isOpen', function(isOpen) {
// Reset the action index since it may have changed
resetActionIndex();
// We can't get the trigger/actions outside of the watch because the component hasn't been
// linked yet, so we wait until the first watch fires to cache them.
if (!trigger || !actions) {
trigger = getTriggerElement();
actions = getActionsElement();
}
if (isOpen) {
enableKeyboard();
} else {
disableKeyboard();
}
var toAdd = isOpen ? 'md-is-open' : '';
var toRemove = isOpen ? '' : 'md-is-open';
// Set the proper ARIA attributes
trigger.attr('aria-haspopup', true);
trigger.attr('aria-expanded', isOpen);
actions.attr('aria-hidden', !isOpen);
// Animate the CSS classes
$animate.setClass($element, toAdd, toRemove);
});
}
function fireInitialAnimations() {
// If the element is actually visible on the screen
if ($element[0].scrollHeight > 0) {
// Fire our animation
$animate.addClass($element, '_md-animations-ready').then(function() {
// Remove the waiting class
$element.removeClass('md-animations-waiting');
});
}
// Otherwise, try for up to 1 second before giving up
else if (initialAnimationAttempts < 10) {
$timeout(fireInitialAnimations, 100);
// Increment our counter
initialAnimationAttempts = initialAnimationAttempts + 1;
}
}
function enableKeyboard() {
$element.on('keydown', keyPressed);
// On the next tick, setup a check for outside clicks; we do this on the next tick to avoid
// clicks/touches that result in the isOpen attribute changing (e.g. a bound radio button)
$mdUtil.nextTick(function() {
angular.element(document).on('click touchend', checkForOutsideClick);
});
// TODO: On desktop, we should be able to reset the indexes so you cannot tab through, but
// this breaks accessibility, especially on mobile, since you have no arrow keys to press
//resetActionTabIndexes();
}
function disableKeyboard() {
$element.off('keydown', keyPressed);
angular.element(document).off('click touchend', checkForOutsideClick);
}
function checkForOutsideClick(event) {
if (event.target) {
var closestTrigger = $mdUtil.getClosest(event.target, 'md-fab-trigger');
var closestActions = $mdUtil.getClosest(event.target, 'md-fab-actions');
if (!closestTrigger && !closestActions) {
vm.close();
}
}
}
function keyPressed(event) {
switch (event.which) {
case $mdConstant.KEY_CODE.ESCAPE: vm.close(); event.preventDefault(); return false;
case $mdConstant.KEY_CODE.LEFT_ARROW: doKeyLeft(event); return false;
case $mdConstant.KEY_CODE.UP_ARROW: doKeyUp(event); return false;
case $mdConstant.KEY_CODE.RIGHT_ARROW: doKeyRight(event); return false;
case $mdConstant.KEY_CODE.DOWN_ARROW: doKeyDown(event); return false;
}
}
function doActionPrev(event) {
focusAction(event, -1);
}
function doActionNext(event) {
focusAction(event, 1);
}
function focusAction(event, direction) {
var actions = resetActionTabIndexes();
// Increment/decrement the counter with restrictions
vm.currentActionIndex = vm.currentActionIndex + direction;
vm.currentActionIndex = Math.min(actions.length - 1, vm.currentActionIndex);
vm.currentActionIndex = Math.max(0, vm.currentActionIndex);
// Focus the element
var focusElement = angular.element(actions[vm.currentActionIndex]).children()[0];
angular.element(focusElement).attr('tabindex', 0);
focusElement.focus();
// Make sure the event doesn't bubble and cause something else
event.preventDefault();
event.stopImmediatePropagation();
}
function resetActionTabIndexes() {
// Grab all of the actions
var actions = getActionsElement()[0].querySelectorAll('.md-fab-action-item');
// Disable all other actions for tabbing
angular.forEach(actions, function(action) {
angular.element(angular.element(action).children()[0]).attr('tabindex', -1);
});
return actions;
}
function doKeyLeft(event) {
if (vm.direction === 'left') {
doActionNext(event);
} else {
doActionPrev(event);
}
}
function doKeyUp(event) {
if (vm.direction === 'down') {
doActionPrev(event);
} else {
doActionNext(event);
}
}
function doKeyRight(event) {
if (vm.direction === 'left') {
doActionPrev(event);
} else {
doActionNext(event);
}
}
function doKeyDown(event) {
if (vm.direction === 'up') {
doActionPrev(event);
} else {
doActionNext(event);
}
}
function isTrigger(element) {
return $mdUtil.getClosest(element, 'md-fab-trigger');
}
function isAction(element) {
return $mdUtil.getClosest(element, 'md-fab-actions');
}
function handleItemClick(event) {
if (isTrigger(event.target)) {
vm.toggle();
}
if (isAction(event.target)) {
vm.close();
}
}
function getTriggerElement() {
return $element.find('md-fab-trigger');
}
function getActionsElement() {
return $element.find('md-fab-actions');
}
}
})();
(function() {
'use strict';
/**
* The duration of the CSS animation in milliseconds.
*
* @type {number}
*/
MdFabSpeedDialFlingAnimation.$inject = ["$timeout"];
MdFabSpeedDialScaleAnimation.$inject = ["$timeout"];
var cssAnimationDuration = 300;
/**
* @ngdoc module
* @name material.components.fabSpeedDial
*/
angular
// Declare our module
.module('material.components.fabSpeedDial', [
'material.core',
'material.components.fabShared',
'material.components.fabActions'
])
// Register our directive
.directive('mdFabSpeedDial', MdFabSpeedDialDirective)
// Register our custom animations
.animation('.md-fling', MdFabSpeedDialFlingAnimation)
.animation('.md-scale', MdFabSpeedDialScaleAnimation)
// Register a service for each animation so that we can easily inject them into unit tests
.service('mdFabSpeedDialFlingAnimation', MdFabSpeedDialFlingAnimation)
.service('mdFabSpeedDialScaleAnimation', MdFabSpeedDialScaleAnimation);
/**
* @ngdoc directive
* @name mdFabSpeedDial
* @module material.components.fabSpeedDial
*
* @restrict E
*
* @description
* The `<md-fab-speed-dial>` directive is used to present a series of popup elements (usually
* `<md-button>`s) for quick access to common actions.
*
* There are currently two animations available by applying one of the following classes to
* the component:
*
* - `md-fling` - The speed dial items appear from underneath the trigger and move into their
* appropriate positions.
* - `md-scale` - The speed dial items appear in their proper places by scaling from 0% to 100%.
*
* You may also easily position the trigger by applying one one of the following classes to the
* `<md-fab-speed-dial>` element:
* - `md-fab-top-left`
* - `md-fab-top-right`
* - `md-fab-bottom-left`
* - `md-fab-bottom-right`
*
* These CSS classes use `position: absolute`, so you need to ensure that the container element
* also uses `position: absolute` or `position: relative` in order for them to work.
*
* Additionally, you may use the standard `ng-mouseenter` and `ng-mouseleave` directives to
* open or close the speed dial. However, if you wish to allow users to hover over the empty
* space where the actions will appear, you must also add the `md-hover-full` class to the speed
* dial element. Without this, the hover effect will only occur on top of the trigger.
*
* See the demos for more information.
*
* ## Troubleshooting
*
* If your speed dial shows the closing animation upon launch, you may need to use `ng-cloak` on
* the parent container to ensure that it is only visible once ready. We have plans to remove this
* necessity in the future.
*
* @usage
* <hljs lang="html">
* <md-fab-speed-dial md-direction="up" class="md-fling">
* <md-fab-trigger>
* <md-button aria-label="Add..."><md-icon icon="/img/icons/plus.svg"></md-icon></md-button>
* </md-fab-trigger>
*
* <md-fab-actions>
* <md-button aria-label="Add User">
* <md-icon icon="/img/icons/user.svg"></md-icon>
* </md-button>
*
* <md-button aria-label="Add Group">
* <md-icon icon="/img/icons/group.svg"></md-icon>
* </md-button>
* </md-fab-actions>
* </md-fab-speed-dial>
* </hljs>
*
* @param {string} md-direction From which direction you would like the speed dial to appear
* relative to the trigger element.
* @param {expression=} md-open Programmatically control whether or not the speed-dial is visible.
*/
function MdFabSpeedDialDirective() {
return {
restrict: 'E',
scope: {
direction: '@?mdDirection',
isOpen: '=?mdOpen'
},
bindToController: true,
controller: 'MdFabController',
controllerAs: 'vm',
link: FabSpeedDialLink
};
function FabSpeedDialLink(scope, element) {
// Prepend an element to hold our CSS variables so we can use them in the animations below
element.prepend('<div class="_md-css-variables"></div>');
}
}
function MdFabSpeedDialFlingAnimation($timeout) {
function delayDone(done) { $timeout(done, cssAnimationDuration, false); }
function runAnimation(element) {
// Don't run if we are still waiting and we are not ready
if (element.hasClass('md-animations-waiting') && !element.hasClass('_md-animations-ready')) {
return;
}
var el = element[0];
var ctrl = element.controller('mdFabSpeedDial');
var items = el.querySelectorAll('.md-fab-action-item');
// Grab our trigger element
var triggerElement = el.querySelector('md-fab-trigger');
// Grab our element which stores CSS variables
var variablesElement = el.querySelector('._md-css-variables');
// Setup JS variables based on our CSS variables
var startZIndex = parseInt(window.getComputedStyle(variablesElement).zIndex);
// Always reset the items to their natural position/state
angular.forEach(items, function(item, index) {
var styles = item.style;
styles.transform = styles.webkitTransform = '';
styles.transitionDelay = '';
styles.opacity = 1;
// Make the items closest to the trigger have the highest z-index
styles.zIndex = (items.length - index) + startZIndex;
});
// Set the trigger to be above all of the actions so they disappear behind it.
triggerElement.style.zIndex = startZIndex + items.length + 1;
// If the control is closed, hide the items behind the trigger
if (!ctrl.isOpen) {
angular.forEach(items, function(item, index) {
var newPosition, axis;
var styles = item.style;
// Make sure to account for differences in the dimensions of the trigger verses the items
// so that we can properly center everything; this helps hide the item's shadows behind
// the trigger.
var triggerItemHeightOffset = (triggerElement.clientHeight - item.clientHeight) / 2;
var triggerItemWidthOffset = (triggerElement.clientWidth - item.clientWidth) / 2;
switch (ctrl.direction) {
case 'up':
newPosition = (item.scrollHeight * (index + 1) + triggerItemHeightOffset);
axis = 'Y';
break;
case 'down':
newPosition = -(item.scrollHeight * (index + 1) + triggerItemHeightOffset);
axis = 'Y';
break;
case 'left':
newPosition = (item.scrollWidth * (index + 1) + triggerItemWidthOffset);
axis = 'X';
break;
case 'right':
newPosition = -(item.scrollWidth * (index + 1) + triggerItemWidthOffset);
axis = 'X';
break;
}
var newTranslate = 'translate' + axis + '(' + newPosition + 'px)';
styles.transform = styles.webkitTransform = newTranslate;
});
}
}
return {
addClass: function(element, className, done) {
if (element.hasClass('md-fling')) {
runAnimation(element);
delayDone(done);
} else {
done();
}
},
removeClass: function(element, className, done) {
runAnimation(element);
delayDone(done);
}
}
}
function MdFabSpeedDialScaleAnimation($timeout) {
function delayDone(done) { $timeout(done, cssAnimationDuration, false); }
var delay = 65;
function runAnimation(element) {
var el = element[0];
var ctrl = element.controller('mdFabSpeedDial');
var items = el.querySelectorAll('.md-fab-action-item');
// Grab our element which stores CSS variables
var variablesElement = el.querySelector('._md-css-variables');
// Setup JS variables based on our CSS variables
var startZIndex = parseInt(window.getComputedStyle(variablesElement).zIndex);
// Always reset the items to their natural position/state
angular.forEach(items, function(item, index) {
var styles = item.style,
offsetDelay = index * delay;
styles.opacity = ctrl.isOpen ? 1 : 0;
styles.transform = styles.webkitTransform = ctrl.isOpen ? 'scale(1)' : 'scale(0)';
styles.transitionDelay = (ctrl.isOpen ? offsetDelay : (items.length - offsetDelay)) + 'ms';
// Make the items closest to the trigger have the highest z-index
styles.zIndex = (items.length - index) + startZIndex;
});
}
return {
addClass: function(element, className, done) {
runAnimation(element);
delayDone(done);
},
removeClass: function(element, className, done) {
runAnimation(element);
delayDone(done);
}
}
}
})();
ngmaterial.components.fabShared = angular.module("material.components.fabShared");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-fab-speed-dial{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;z-index:20}md-fab-speed-dial.md-fab-bottom-right{top:auto;right:20px;bottom:20px;left:auto;position:absolute}md-fab-speed-dial.md-fab-bottom-left{top:auto;right:auto;bottom:20px;left:20px;position:absolute}md-fab-speed-dial.md-fab-top-right{top:20px;right:20px;bottom:auto;left:auto;position:absolute}md-fab-speed-dial.md-fab-top-left{top:20px;right:auto;bottom:auto;left:20px;position:absolute}md-fab-speed-dial:not(.md-hover-full){pointer-events:none}md-fab-speed-dial:not(.md-hover-full) .md-fab-action-item,md-fab-speed-dial:not(.md-hover-full).md-is-open,md-fab-speed-dial:not(.md-hover-full) md-fab-trigger{pointer-events:auto}md-fab-speed-dial ._md-css-variables{z-index:20}md-fab-speed-dial.md-is-open .md-fab-action-item{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center}md-fab-speed-dial md-fab-actions{display:-webkit-box;display:-webkit-flex;display:flex;height:auto}md-fab-speed-dial md-fab-actions .md-fab-action-item{-webkit-transition:all .3s cubic-bezier(.55,0,.55,.2);transition:all .3s cubic-bezier(.55,0,.55,.2)}md-fab-speed-dial.md-down{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}md-fab-speed-dial.md-down md-fab-trigger{-webkit-box-ordinal-group:2;-webkit-order:1;order:1}md-fab-speed-dial.md-down md-fab-actions{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:3;-webkit-order:2;order:2}md-fab-speed-dial.md-up{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}md-fab-speed-dial.md-up md-fab-trigger{-webkit-box-ordinal-group:3;-webkit-order:2;order:2}md-fab-speed-dial.md-up md-fab-actions{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-ordinal-group:2;-webkit-order:1;order:1}md-fab-speed-dial.md-left{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row}md-fab-speed-dial.md-left md-fab-trigger{-webkit-box-ordinal-group:3;-webkit-order:2;order:2}md-fab-speed-dial.md-left md-fab-actions{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-ordinal-group:2;-webkit-order:1;order:1}md-fab-speed-dial.md-left md-fab-actions .md-fab-action-item{-webkit-transition:all .3s cubic-bezier(.55,0,.55,.2);transition:all .3s cubic-bezier(.55,0,.55,.2)}md-fab-speed-dial.md-right{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row}md-fab-speed-dial.md-right md-fab-trigger{-webkit-box-ordinal-group:2;-webkit-order:1;order:1}md-fab-speed-dial.md-right md-fab-actions{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-ordinal-group:3;-webkit-order:2;order:2}md-fab-speed-dial.md-right md-fab-actions .md-fab-action-item{-webkit-transition:all .3s cubic-bezier(.55,0,.55,.2);transition:all .3s cubic-bezier(.55,0,.55,.2)}md-fab-speed-dial.md-fling-remove .md-fab-action-item>*,md-fab-speed-dial.md-scale-remove .md-fab-action-item>*{visibility:hidden}md-fab-speed-dial.md-fling .md-fab-action-item{opacity:1}md-fab-speed-dial.md-fling.md-animations-waiting .md-fab-action-item{opacity:0;-webkit-transition-duration:0s;transition-duration:0s}md-fab-speed-dial.md-scale .md-fab-action-item{-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all .3s cubic-bezier(.55,0,.55,.2);transition:all .3s cubic-bezier(.55,0,.55,.2);-webkit-transition-duration:.14286s;transition-duration:.14286s}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,119 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-fab-toolbar {
display: block;
/*
* Closed styling
*/
/*
* Hover styling
*/ }
md-fab-toolbar.md-fab-bottom-right {
top: auto;
right: 20px;
bottom: 20px;
left: auto;
position: absolute; }
md-fab-toolbar.md-fab-bottom-left {
top: auto;
right: auto;
bottom: 20px;
left: 20px;
position: absolute; }
md-fab-toolbar.md-fab-top-right {
top: 20px;
right: 20px;
bottom: auto;
left: auto;
position: absolute; }
md-fab-toolbar.md-fab-top-left {
top: 20px;
right: auto;
bottom: auto;
left: 20px;
position: absolute; }
md-fab-toolbar .md-fab-toolbar-wrapper {
display: block;
position: relative;
overflow: hidden;
height: 68px; }
md-fab-toolbar md-fab-trigger {
position: absolute;
z-index: 20; }
md-fab-toolbar md-fab-trigger button {
overflow: visible !important; }
md-fab-toolbar md-fab-trigger .md-fab-toolbar-background {
display: block;
position: absolute;
z-index: 21;
opacity: 1;
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-fab-toolbar md-fab-trigger md-icon {
position: relative;
z-index: 22;
opacity: 1;
-webkit-transition: all 200ms ease-in;
transition: all 200ms ease-in; }
md-fab-toolbar.md-left md-fab-trigger {
right: 0; }
[dir=rtl] md-fab-toolbar.md-left md-fab-trigger {
right: auto;
left: 0; }
md-fab-toolbar.md-left .md-toolbar-tools {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse; }
md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
margin-right: 0.6rem; }
[dir=rtl] md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
margin-right: auto;
margin-left: 0.6rem; }
md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
margin-left: -0.8rem; }
[dir=rtl] md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
margin-left: auto;
margin-right: -0.8rem; }
md-fab-toolbar.md-left .md-toolbar-tools > .md-button:last-child {
margin-right: 8px; }
[dir=rtl] md-fab-toolbar.md-left .md-toolbar-tools > .md-button:last-child {
margin-right: auto;
margin-left: 8px; }
md-fab-toolbar.md-right md-fab-trigger {
left: 0; }
[dir=rtl] md-fab-toolbar.md-right md-fab-trigger {
left: auto;
right: 0; }
md-fab-toolbar.md-right .md-toolbar-tools {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row; }
md-fab-toolbar md-toolbar {
background-color: transparent !important;
pointer-events: none;
z-index: 23; }
md-fab-toolbar md-toolbar .md-toolbar-tools {
padding: 0 20px;
margin-top: 3px; }
md-fab-toolbar md-toolbar .md-fab-action-item {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-webkit-transition-duration: 0.15s;
transition-duration: 0.15s; }
md-fab-toolbar.md-is-open md-fab-trigger > button {
box-shadow: none; }
md-fab-toolbar.md-is-open md-fab-trigger > button md-icon {
opacity: 0; }
md-fab-toolbar.md-is-open .md-fab-action-item {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); }

View File

@@ -0,0 +1,209 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.fabToolbar');
goog.require('ngmaterial.components.fabActions');
goog.require('ngmaterial.components.fabShared');
goog.require('ngmaterial.core');
(function() {
'use strict';
/**
* @ngdoc module
* @name material.components.fabToolbar
*/
angular
// Declare our module
.module('material.components.fabToolbar', [
'material.core',
'material.components.fabShared',
'material.components.fabActions'
])
// Register our directive
.directive('mdFabToolbar', MdFabToolbarDirective)
// Register our custom animations
.animation('.md-fab-toolbar', MdFabToolbarAnimation)
// Register a service for the animation so that we can easily inject it into unit tests
.service('mdFabToolbarAnimation', MdFabToolbarAnimation);
/**
* @ngdoc directive
* @name mdFabToolbar
* @module material.components.fabToolbar
*
* @restrict E
*
* @description
*
* The `<md-fab-toolbar>` directive is used present a toolbar of elements (usually `<md-button>`s)
* for quick access to common actions when a floating action button is activated (via click or
* keyboard navigation).
*
* You may also easily position the trigger by applying one one of the following classes to the
* `<md-fab-toolbar>` element:
* - `md-fab-top-left`
* - `md-fab-top-right`
* - `md-fab-bottom-left`
* - `md-fab-bottom-right`
*
* These CSS classes use `position: absolute`, so you need to ensure that the container element
* also uses `position: absolute` or `position: relative` in order for them to work.
*
* @usage
*
* <hljs lang="html">
* <md-fab-toolbar md-direction='left'>
* <md-fab-trigger>
* <md-button aria-label="Add..."><md-icon icon="/img/icons/plus.svg"></md-icon></md-button>
* </md-fab-trigger>
*
* <md-toolbar>
* <md-fab-actions>
* <md-button aria-label="Add User">
* <md-icon icon="/img/icons/user.svg"></md-icon>
* </md-button>
*
* <md-button aria-label="Add Group">
* <md-icon icon="/img/icons/group.svg"></md-icon>
* </md-button>
* </md-fab-actions>
* </md-toolbar>
* </md-fab-toolbar>
* </hljs>
*
* @param {string} md-direction From which direction you would like the toolbar items to appear
* relative to the trigger element. Supports `left` and `right` directions.
* @param {expression=} md-open Programmatically control whether or not the toolbar is visible.
*/
function MdFabToolbarDirective() {
return {
restrict: 'E',
transclude: true,
template: '<div class="md-fab-toolbar-wrapper">' +
' <div class="md-fab-toolbar-content" ng-transclude></div>' +
'</div>',
scope: {
direction: '@?mdDirection',
isOpen: '=?mdOpen'
},
bindToController: true,
controller: 'MdFabController',
controllerAs: 'vm',
link: link
};
function link(scope, element, attributes) {
// Add the base class for animations
element.addClass('md-fab-toolbar');
// Prepend the background element to the trigger's button
element.find('md-fab-trigger').find('button')
.prepend('<div class="md-fab-toolbar-background"></div>');
}
}
function MdFabToolbarAnimation() {
function runAnimation(element, className, done) {
// If no className was specified, don't do anything
if (!className) {
return;
}
var el = element[0];
var ctrl = element.controller('mdFabToolbar');
// Grab the relevant child elements
var backgroundElement = el.querySelector('.md-fab-toolbar-background');
var triggerElement = el.querySelector('md-fab-trigger button');
var toolbarElement = el.querySelector('md-toolbar');
var iconElement = el.querySelector('md-fab-trigger button md-icon');
var actions = element.find('md-fab-actions').children();
// If we have both elements, use them to position the new background
if (triggerElement && backgroundElement) {
// Get our variables
var color = window.getComputedStyle(triggerElement).getPropertyValue('background-color');
var width = el.offsetWidth;
var height = el.offsetHeight;
// Make it twice as big as it should be since we scale from the center
var scale = 2 * (width / triggerElement.offsetWidth);
// Set some basic styles no matter what animation we're doing
backgroundElement.style.backgroundColor = color;
backgroundElement.style.borderRadius = width + 'px';
// If we're open
if (ctrl.isOpen) {
// Turn on toolbar pointer events when closed
toolbarElement.style.pointerEvents = 'inherit';
backgroundElement.style.width = triggerElement.offsetWidth + 'px';
backgroundElement.style.height = triggerElement.offsetHeight + 'px';
backgroundElement.style.transform = 'scale(' + scale + ')';
// Set the next close animation to have the proper delays
backgroundElement.style.transitionDelay = '0ms';
iconElement && (iconElement.style.transitionDelay = '.3s');
// Apply a transition delay to actions
angular.forEach(actions, function(action, index) {
action.style.transitionDelay = (actions.length - index) * 25 + 'ms';
});
} else {
// Turn off toolbar pointer events when closed
toolbarElement.style.pointerEvents = 'none';
// Scale it back down to the trigger's size
backgroundElement.style.transform = 'scale(1)';
// Reset the position
backgroundElement.style.top = '0';
if (element.hasClass('md-right')) {
backgroundElement.style.left = '0';
backgroundElement.style.right = null;
}
if (element.hasClass('md-left')) {
backgroundElement.style.right = '0';
backgroundElement.style.left = null;
}
// Set the next open animation to have the proper delays
backgroundElement.style.transitionDelay = '200ms';
iconElement && (iconElement.style.transitionDelay = '0ms');
// Apply a transition delay to actions
angular.forEach(actions, function(action, index) {
action.style.transitionDelay = 200 + (index * 25) + 'ms';
});
}
}
}
return {
addClass: function(element, className, done) {
runAnimation(element, className, done);
done();
},
removeClass: function(element, className, done) {
runAnimation(element, className, done);
done();
}
}
}
})();
ngmaterial.components.fabToolbar = angular.module("material.components.fabToolbar");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-fab-toolbar{display:block}md-fab-toolbar.md-fab-bottom-right{top:auto;right:20px;bottom:20px;left:auto;position:absolute}md-fab-toolbar.md-fab-bottom-left{top:auto;right:auto;bottom:20px;left:20px;position:absolute}md-fab-toolbar.md-fab-top-right{top:20px;right:20px;bottom:auto;left:auto;position:absolute}md-fab-toolbar.md-fab-top-left{top:20px;right:auto;bottom:auto;left:20px;position:absolute}md-fab-toolbar .md-fab-toolbar-wrapper{display:block;position:relative;overflow:hidden;height:68px}md-fab-toolbar md-fab-trigger{position:absolute;z-index:20}md-fab-toolbar md-fab-trigger button{overflow:visible!important}md-fab-toolbar md-fab-trigger .md-fab-toolbar-background{display:block;position:absolute;z-index:21;opacity:1;-webkit-transition:all .3s cubic-bezier(.55,0,.55,.2);transition:all .3s cubic-bezier(.55,0,.55,.2)}md-fab-toolbar md-fab-trigger md-icon{position:relative;z-index:22;opacity:1;-webkit-transition:all .2s ease-in;transition:all .2s ease-in}md-fab-toolbar.md-left md-fab-trigger{right:0}[dir=rtl] md-fab-toolbar.md-left md-fab-trigger{right:auto;left:0}md-fab-toolbar.md-left .md-toolbar-tools{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}md-fab-toolbar.md-left .md-toolbar-tools>.md-button:first-child{margin-right:.6rem}[dir=rtl] md-fab-toolbar.md-left .md-toolbar-tools>.md-button:first-child{margin-right:auto;margin-left:.6rem}md-fab-toolbar.md-left .md-toolbar-tools>.md-button:first-child{margin-left:-.8rem}[dir=rtl] md-fab-toolbar.md-left .md-toolbar-tools>.md-button:first-child{margin-left:auto;margin-right:-.8rem}md-fab-toolbar.md-left .md-toolbar-tools>.md-button:last-child{margin-right:8px}[dir=rtl] md-fab-toolbar.md-left .md-toolbar-tools>.md-button:last-child{margin-right:auto;margin-left:8px}md-fab-toolbar.md-right md-fab-trigger{left:0}[dir=rtl] md-fab-toolbar.md-right md-fab-trigger{left:auto;right:0}md-fab-toolbar.md-right .md-toolbar-tools{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row}md-fab-toolbar md-toolbar{background-color:transparent!important;pointer-events:none;z-index:23}md-fab-toolbar md-toolbar .md-toolbar-tools{padding:0 20px;margin-top:3px}md-fab-toolbar md-toolbar .md-fab-action-item{opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all .3s cubic-bezier(.55,0,.55,.2);transition:all .3s cubic-bezier(.55,0,.55,.2);-webkit-transition-duration:.15s;transition-duration:.15s}md-fab-toolbar.md-is-open md-fab-trigger>button{box-shadow:none}md-fab-toolbar.md-is-open md-fab-trigger>button md-icon{opacity:0}md-fab-toolbar.md-is-open .md-fab-action-item{opacity:1;-webkit-transform:scale(1);transform:scale(1)}

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/
goog.provide("ngmaterial.components.fabToolbar"),goog.require("ngmaterial.components.fabActions"),goog.require("ngmaterial.components.fabShared"),goog.require("ngmaterial.core"),function(){"use strict";function t(){function t(t,e,o){e.addClass("md-fab-toolbar"),e.find("md-fab-trigger").find("button").prepend('<div class="md-fab-toolbar-background"></div>')}return{restrict:"E",transclude:!0,template:'<div class="md-fab-toolbar-wrapper"> <div class="md-fab-toolbar-content" ng-transclude></div></div>',scope:{direction:"@?mdDirection",isOpen:"=?mdOpen"},bindToController:!0,controller:"MdFabController",controllerAs:"vm",link:t}}function e(){function t(t,e,o){if(e){var a=t[0],r=t.controller("mdFabToolbar"),n=a.querySelector(".md-fab-toolbar-background"),l=a.querySelector("md-fab-trigger button"),i=a.querySelector("md-toolbar"),s=a.querySelector("md-fab-trigger button md-icon"),d=t.find("md-fab-actions").children();if(l&&n){var c=window.getComputedStyle(l).getPropertyValue("background-color"),m=a.offsetWidth,f=(a.offsetHeight,2*(m/l.offsetWidth));n.style.backgroundColor=c,n.style.borderRadius=m+"px",r.isOpen?(i.style.pointerEvents="inherit",n.style.width=l.offsetWidth+"px",n.style.height=l.offsetHeight+"px",n.style.transform="scale("+f+")",n.style.transitionDelay="0ms",s&&(s.style.transitionDelay=".3s"),angular.forEach(d,function(t,e){t.style.transitionDelay=25*(d.length-e)+"ms"})):(i.style.pointerEvents="none",n.style.transform="scale(1)",n.style.top="0",t.hasClass("md-right")&&(n.style.left="0",n.style.right=null),t.hasClass("md-left")&&(n.style.right="0",n.style.left=null),n.style.transitionDelay="200ms",s&&(s.style.transitionDelay="0ms"),angular.forEach(d,function(t,e){t.style.transitionDelay=200+25*e+"ms"}))}}}return{addClass:function(e,o,a){t(e,o,a),a()},removeClass:function(e,o,a){t(e,o,a),a()}}}angular.module("material.components.fabToolbar",["material.core","material.components.fabShared","material.components.fabActions"]).directive("mdFabToolbar",t).animation(".md-fab-toolbar",e).service("mdFabToolbarAnimation",e)}(),ngmaterial.components.fabToolbar=angular.module("material.components.fabToolbar");

View File

@@ -0,0 +1,46 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-rc.5-master-26a5fb8
*/
goog.provide('ng.material.components.fabTrigger');
goog.require('ng.material.core');
(function() {
'use strict';
/**
* @ngdoc module
* @name material.components.fabTrigger
*/
angular
.module('material.components.fabTrigger', ['material.core'])
.directive('mdFabTrigger', MdFabTriggerDirective);
/**
* @ngdoc directive
* @name mdFabTrigger
* @module material.components.fabSpeedDial
*
* @restrict E
*
* @description
* The `<md-fab-trigger>` directive is used inside of a `<md-fab-speed-dial>` or
* `<md-fab-toolbar>` directive to mark an element (or elements) as the trigger and setup the
* proper event listeners.
*
* @usage
* See the `<md-fab-speed-dial>` or `<md-fab-toolbar>` directives for example usage.
*/
function MdFabTriggerDirective() {
// TODO: Remove this completely?
return {
restrict: 'E',
require: ['^?mdFabSpeedDial', '^?mdFabToolbar']
};
}
})();
ng.material.components.fabTrigger = angular.module("material.components.fabTrigger");

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-rc.5-master-26a5fb8
*/
goog.provide("ng.material.components.fabTrigger"),goog.require("ng.material.core"),function(){"use strict";function r(){return{restrict:"E",require:["^?mdFabSpeedDial","^?mdFabToolbar"]}}angular.module("material.components.fabTrigger",["material.core"]).directive("mdFabTrigger",r)}(),ng.material.components.fabTrigger=angular.module("material.components.fabTrigger");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.8.0-rc1-master-91053dc
*/

View File

@@ -0,0 +1,77 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-grid-list {
box-sizing: border-box;
display: block;
position: relative; }
md-grid-list md-grid-tile,
md-grid-list md-grid-tile > figure,
md-grid-list md-grid-tile-header,
md-grid-list md-grid-tile-footer {
box-sizing: border-box; }
md-grid-list md-grid-tile {
display: block;
position: absolute; }
md-grid-list md-grid-tile figure {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0;
margin: 0; }
md-grid-list md-grid-tile md-grid-tile-header,
md-grid-list md-grid-tile md-grid-tile-footer {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
height: 48px;
color: #fff;
background: rgba(0, 0, 0, 0.18);
overflow: hidden;
position: absolute;
left: 0;
right: 0; }
md-grid-list md-grid-tile md-grid-tile-header h3,
md-grid-list md-grid-tile md-grid-tile-header h4,
md-grid-list md-grid-tile md-grid-tile-footer h3,
md-grid-list md-grid-tile md-grid-tile-footer h4 {
font-weight: 400;
margin: 0 0 0 16px; }
md-grid-list md-grid-tile md-grid-tile-header h3,
md-grid-list md-grid-tile md-grid-tile-footer h3 {
font-size: 14px; }
md-grid-list md-grid-tile md-grid-tile-header h4,
md-grid-list md-grid-tile md-grid-tile-footer h4 {
font-size: 12px; }
md-grid-list md-grid-tile md-grid-tile-header {
top: 0; }
md-grid-list md-grid-tile md-grid-tile-footer {
bottom: 0; }
@media screen and (-ms-high-contrast: active) {
md-grid-tile {
border: 1px solid #fff; }
md-grid-tile-footer {
border-top: 1px solid #fff; } }

View File

@@ -0,0 +1,774 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.gridList');
goog.require('ngmaterial.core');
/**
* @ngdoc module
* @name material.components.gridList
*/
GridListController.$inject = ["$mdUtil"];
GridLayoutFactory.$inject = ["$mdUtil"];
GridListDirective.$inject = ["$interpolate", "$mdConstant", "$mdGridLayout", "$mdMedia"];
GridTileDirective.$inject = ["$mdMedia"];
angular.module('material.components.gridList', ['material.core'])
.directive('mdGridList', GridListDirective)
.directive('mdGridTile', GridTileDirective)
.directive('mdGridTileFooter', GridTileCaptionDirective)
.directive('mdGridTileHeader', GridTileCaptionDirective)
.factory('$mdGridLayout', GridLayoutFactory);
/**
* @ngdoc directive
* @name mdGridList
* @module material.components.gridList
* @restrict E
* @description
* Grid lists are an alternative to standard list views. Grid lists are distinct
* from grids used for layouts and other visual presentations.
*
* A grid list is best suited to presenting a homogenous data type, typically
* images, and is optimized for visual comprehension and differentiating between
* like data types.
*
* A grid list is a continuous element consisting of tessellated, regular
* subdivisions called cells that contain tiles (`md-grid-tile`).
*
* <img src="//material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7OVlEaXZ5YmU1Xzg/components_grids_usage2.png"
* style="width: 300px; height: auto; margin-right: 16px;" alt="Concept of grid explained visually">
* <img src="//material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7VGhsOE5idWlJWXM/components_grids_usage3.png"
* style="width: 300px; height: auto;" alt="Grid concepts legend">
*
* Cells are arrayed vertically and horizontally within the grid.
*
* Tiles hold content and can span one or more cells vertically or horizontally.
*
* ### Responsive Attributes
*
* The `md-grid-list` directive supports "responsive" attributes, which allow
* different `md-cols`, `md-gutter` and `md-row-height` values depending on the
* currently matching media query.
*
* In order to set a responsive attribute, first define the fallback value with
* the standard attribute name, then add additional attributes with the
* following convention: `{base-attribute-name}-{media-query-name}="{value}"`
* (ie. `md-cols-lg="8"`)
*
* @param {number} md-cols Number of columns in the grid.
* @param {string} md-row-height One of
* <ul>
* <li>CSS length - Fixed height rows (eg. `8px` or `1rem`)</li>
* <li>`{width}:{height}` - Ratio of width to height (eg.
* `md-row-height="16:9"`)</li>
* <li>`"fit"` - Height will be determined by subdividing the available
* height by the number of rows</li>
* </ul>
* @param {string=} md-gutter The amount of space between tiles in CSS units
* (default 1px)
* @param {expression=} md-on-layout Expression to evaluate after layout. Event
* object is available as `$event`, and contains performance information.
*
* @usage
* Basic:
* <hljs lang="html">
* <md-grid-list md-cols="5" md-gutter="1em" md-row-height="4:3">
* <md-grid-tile></md-grid-tile>
* </md-grid-list>
* </hljs>
*
* Fixed-height rows:
* <hljs lang="html">
* <md-grid-list md-cols="4" md-row-height="200px" ...>
* <md-grid-tile></md-grid-tile>
* </md-grid-list>
* </hljs>
*
* Fit rows:
* <hljs lang="html">
* <md-grid-list md-cols="4" md-row-height="fit" style="height: 400px;" ...>
* <md-grid-tile></md-grid-tile>
* </md-grid-list>
* </hljs>
*
* Using responsive attributes:
* <hljs lang="html">
* <md-grid-list
* md-cols-sm="2"
* md-cols-md="4"
* md-cols-lg="8"
* md-cols-gt-lg="12"
* ...>
* <md-grid-tile></md-grid-tile>
* </md-grid-list>
* </hljs>
*/
function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
return {
restrict: 'E',
controller: GridListController,
scope: {
mdOnLayout: '&'
},
link: postLink
};
function postLink(scope, element, attrs, ctrl) {
element.addClass('_md'); // private md component indicator for styling
// Apply semantics
element.attr('role', 'list');
// Provide the controller with a way to trigger layouts.
ctrl.layoutDelegate = layoutDelegate;
var invalidateLayout = angular.bind(ctrl, ctrl.invalidateLayout),
unwatchAttrs = watchMedia();
scope.$on('$destroy', unwatchMedia);
/**
* Watches for changes in media, invalidating layout as necessary.
*/
function watchMedia() {
for (var mediaName in $mdConstant.MEDIA) {
$mdMedia(mediaName); // initialize
$mdMedia.getQuery($mdConstant.MEDIA[mediaName])
.addListener(invalidateLayout);
}
return $mdMedia.watchResponsiveAttributes(
['md-cols', 'md-row-height', 'md-gutter'], attrs, layoutIfMediaMatch);
}
function unwatchMedia() {
ctrl.layoutDelegate = angular.noop;
unwatchAttrs();
for (var mediaName in $mdConstant.MEDIA) {
$mdMedia.getQuery($mdConstant.MEDIA[mediaName])
.removeListener(invalidateLayout);
}
}
/**
* Performs grid layout if the provided mediaName matches the currently
* active media type.
*/
function layoutIfMediaMatch(mediaName) {
if (mediaName == null) {
// TODO(shyndman): It would be nice to only layout if we have
// instances of attributes using this media type
ctrl.invalidateLayout();
} else if ($mdMedia(mediaName)) {
ctrl.invalidateLayout();
}
}
var lastLayoutProps;
/**
* Invokes the layout engine, and uses its results to lay out our
* tile elements.
*
* @param {boolean} tilesInvalidated Whether tiles have been
* added/removed/moved since the last layout. This is to avoid situations
* where tiles are replaced with properties identical to their removed
* counterparts.
*/
function layoutDelegate(tilesInvalidated) {
var tiles = getTileElements();
var props = {
tileSpans: getTileSpans(tiles),
colCount: getColumnCount(),
rowMode: getRowMode(),
rowHeight: getRowHeight(),
gutter: getGutter()
};
if (!tilesInvalidated && angular.equals(props, lastLayoutProps)) {
return;
}
var performance =
$mdGridLayout(props.colCount, props.tileSpans, tiles)
.map(function(tilePositions, rowCount) {
return {
grid: {
element: element,
style: getGridStyle(props.colCount, rowCount,
props.gutter, props.rowMode, props.rowHeight)
},
tiles: tilePositions.map(function(ps, i) {
return {
element: angular.element(tiles[i]),
style: getTileStyle(ps.position, ps.spans,
props.colCount, rowCount,
props.gutter, props.rowMode, props.rowHeight)
}
})
}
})
.reflow()
.performance();
// Report layout
scope.mdOnLayout({
$event: {
performance: performance
}
});
lastLayoutProps = props;
}
// Use $interpolate to do some simple string interpolation as a convenience.
var startSymbol = $interpolate.startSymbol();
var endSymbol = $interpolate.endSymbol();
// Returns an expression wrapped in the interpolator's start and end symbols.
function expr(exprStr) {
return startSymbol + exprStr + endSymbol;
}
// The amount of space a single 1x1 tile would take up (either width or height), used as
// a basis for other calculations. This consists of taking the base size percent (as would be
// if evenly dividing the size between cells), and then subtracting the size of one gutter.
// However, since there are no gutters on the edges, each tile only uses a fration
// (gutterShare = numGutters / numCells) of the gutter size. (Imagine having one gutter per
// tile, and then breaking up the extra gutter on the edge evenly among the cells).
var UNIT = $interpolate(expr('share') + '% - (' + expr('gutter') + ' * ' + expr('gutterShare') + ')');
// The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
// The position comes the size of a 1x1 tile plus gutter for each previous tile in the
// row/column (offset).
var POSITION = $interpolate('calc((' + expr('unit') + ' + ' + expr('gutter') + ') * ' + expr('offset') + ')');
// The actual size of a tile, e.g., width or height, taking rowSpan or colSpan into account.
// This is computed by multiplying the base unit by the rowSpan/colSpan, and then adding back
// in the space that the gutter would normally have used (which was already accounted for in
// the base unit calculation).
var DIMENSION = $interpolate('calc((' + expr('unit') + ') * ' + expr('span') + ' + (' + expr('span') + ' - 1) * ' + expr('gutter') + ')');
/**
* Gets the styles applied to a tile element described by the given parameters.
* @param {{row: number, col: number}} position The row and column indices of the tile.
* @param {{row: number, col: number}} spans The rowSpan and colSpan of the tile.
* @param {number} colCount The number of columns.
* @param {number} rowCount The number of rows.
* @param {string} gutter The amount of space between tiles. This will be something like
* '5px' or '2em'.
* @param {string} rowMode The row height mode. Can be one of:
* 'fixed': all rows have a fixed size, given by rowHeight,
* 'ratio': row height defined as a ratio to width, or
* 'fit': fit to the grid-list element height, divinding evenly among rows.
* @param {string|number} rowHeight The height of a row. This is only used for 'fixed' mode and
* for 'ratio' mode. For 'ratio' mode, this is the *ratio* of width-to-height (e.g., 0.75).
* @returns {Object} Map of CSS properties to be applied to the style element. Will define
* values for top, left, width, height, marginTop, and paddingTop.
*/
function getTileStyle(position, spans, colCount, rowCount, gutter, rowMode, rowHeight) {
// TODO(shyndman): There are style caching opportunities here.
// Percent of the available horizontal space that one column takes up.
var hShare = (1 / colCount) * 100;
// Fraction of the gutter size that each column takes up.
var hGutterShare = (colCount - 1) / colCount;
// Base horizontal size of a column.
var hUnit = UNIT({share: hShare, gutterShare: hGutterShare, gutter: gutter});
// The width and horizontal position of each tile is always calculated the same way, but the
// height and vertical position depends on the rowMode.
var style = {
left: POSITION({ unit: hUnit, offset: position.col, gutter: gutter }),
width: DIMENSION({ unit: hUnit, span: spans.col, gutter: gutter }),
// resets
paddingTop: '',
marginTop: '',
top: '',
height: ''
};
switch (rowMode) {
case 'fixed':
// In fixed mode, simply use the given rowHeight.
style.top = POSITION({ unit: rowHeight, offset: position.row, gutter: gutter });
style.height = DIMENSION({ unit: rowHeight, span: spans.row, gutter: gutter });
break;
case 'ratio':
// Percent of the available vertical space that one row takes up. Here, rowHeight holds
// the ratio value. For example, if the width:height ratio is 4:3, rowHeight = 1.333.
var vShare = hShare / rowHeight;
// Base veritcal size of a row.
var vUnit = UNIT({ share: vShare, gutterShare: hGutterShare, gutter: gutter });
// padidngTop and marginTop are used to maintain the given aspect ratio, as
// a percentage-based value for these properties is applied to the *width* of the
// containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
style.paddingTop = DIMENSION({ unit: vUnit, span: spans.row, gutter: gutter});
style.marginTop = POSITION({ unit: vUnit, offset: position.row, gutter: gutter });
break;
case 'fit':
// Fraction of the gutter size that each column takes up.
var vGutterShare = (rowCount - 1) / rowCount;
// Percent of the available vertical space that one row takes up.
var vShare = (1 / rowCount) * 100;
// Base vertical size of a row.
var vUnit = UNIT({share: vShare, gutterShare: vGutterShare, gutter: gutter});
style.top = POSITION({unit: vUnit, offset: position.row, gutter: gutter});
style.height = DIMENSION({unit: vUnit, span: spans.row, gutter: gutter});
break;
}
return style;
}
function getGridStyle(colCount, rowCount, gutter, rowMode, rowHeight) {
var style = {};
switch(rowMode) {
case 'fixed':
style.height = DIMENSION({ unit: rowHeight, span: rowCount, gutter: gutter });
style.paddingBottom = '';
break;
case 'ratio':
// rowHeight is width / height
var hGutterShare = colCount === 1 ? 0 : (colCount - 1) / colCount,
hShare = (1 / colCount) * 100,
vShare = hShare * (1 / rowHeight),
vUnit = UNIT({ share: vShare, gutterShare: hGutterShare, gutter: gutter });
style.height = '';
style.paddingBottom = DIMENSION({ unit: vUnit, span: rowCount, gutter: gutter});
break;
case 'fit':
// noop, as the height is user set
break;
}
return style;
}
function getTileElements() {
return [].filter.call(element.children(), function(ele) {
return ele.tagName == 'MD-GRID-TILE' && !ele.$$mdDestroyed;
});
}
/**
* Gets an array of objects containing the rowspan and colspan for each tile.
* @returns {Array<{row: number, col: number}>}
*/
function getTileSpans(tileElements) {
return [].map.call(tileElements, function(ele) {
var ctrl = angular.element(ele).controller('mdGridTile');
return {
row: parseInt(
$mdMedia.getResponsiveAttribute(ctrl.$attrs, 'md-rowspan'), 10) || 1,
col: parseInt(
$mdMedia.getResponsiveAttribute(ctrl.$attrs, 'md-colspan'), 10) || 1
};
});
}
function getColumnCount() {
var colCount = parseInt($mdMedia.getResponsiveAttribute(attrs, 'md-cols'), 10);
if (isNaN(colCount)) {
throw 'md-grid-list: md-cols attribute was not found, or contained a non-numeric value';
}
return colCount;
}
function getGutter() {
return applyDefaultUnit($mdMedia.getResponsiveAttribute(attrs, 'md-gutter') || 1);
}
function getRowHeight() {
var rowHeight = $mdMedia.getResponsiveAttribute(attrs, 'md-row-height');
if (!rowHeight) {
throw 'md-grid-list: md-row-height attribute was not found';
}
switch (getRowMode()) {
case 'fixed':
return applyDefaultUnit(rowHeight);
case 'ratio':
var whRatio = rowHeight.split(':');
return parseFloat(whRatio[0]) / parseFloat(whRatio[1]);
case 'fit':
return 0; // N/A
}
}
function getRowMode() {
var rowHeight = $mdMedia.getResponsiveAttribute(attrs, 'md-row-height');
if (!rowHeight) {
throw 'md-grid-list: md-row-height attribute was not found';
}
if (rowHeight == 'fit') {
return 'fit';
} else if (rowHeight.indexOf(':') !== -1) {
return 'ratio';
} else {
return 'fixed';
}
}
function applyDefaultUnit(val) {
return /\D$/.test(val) ? val : val + 'px';
}
}
}
/* ngInject */
function GridListController($mdUtil) {
this.layoutInvalidated = false;
this.tilesInvalidated = false;
this.$timeout_ = $mdUtil.nextTick;
this.layoutDelegate = angular.noop;
}
GridListController.prototype = {
invalidateTiles: function() {
this.tilesInvalidated = true;
this.invalidateLayout();
},
invalidateLayout: function() {
if (this.layoutInvalidated) {
return;
}
this.layoutInvalidated = true;
this.$timeout_(angular.bind(this, this.layout));
},
layout: function() {
try {
this.layoutDelegate(this.tilesInvalidated);
} finally {
this.layoutInvalidated = false;
this.tilesInvalidated = false;
}
}
};
/* ngInject */
function GridLayoutFactory($mdUtil) {
var defaultAnimator = GridTileAnimator;
/**
* Set the reflow animator callback
*/
GridLayout.animateWith = function(customAnimator) {
defaultAnimator = !angular.isFunction(customAnimator) ? GridTileAnimator : customAnimator;
};
return GridLayout;
/**
* Publish layout function
*/
function GridLayout(colCount, tileSpans) {
var self, layoutInfo, gridStyles, layoutTime, mapTime, reflowTime;
layoutTime = $mdUtil.time(function() {
layoutInfo = calculateGridFor(colCount, tileSpans);
});
return self = {
/**
* An array of objects describing each tile's position in the grid.
*/
layoutInfo: function() {
return layoutInfo;
},
/**
* Maps grid positioning to an element and a set of styles using the
* provided updateFn.
*/
map: function(updateFn) {
mapTime = $mdUtil.time(function() {
var info = self.layoutInfo();
gridStyles = updateFn(info.positioning, info.rowCount);
});
return self;
},
/**
* Default animator simply sets the element.css( <styles> ). An alternate
* animator can be provided as an argument. The function has the following
* signature:
*
* function({grid: {element: JQLite, style: Object}, tiles: Array<{element: JQLite, style: Object}>)
*/
reflow: function(animatorFn) {
reflowTime = $mdUtil.time(function() {
var animator = animatorFn || defaultAnimator;
animator(gridStyles.grid, gridStyles.tiles);
});
return self;
},
/**
* Timing for the most recent layout run.
*/
performance: function() {
return {
tileCount: tileSpans.length,
layoutTime: layoutTime,
mapTime: mapTime,
reflowTime: reflowTime,
totalTime: layoutTime + mapTime + reflowTime
};
}
};
}
/**
* Default Gridlist animator simple sets the css for each element;
* NOTE: any transitions effects must be manually set in the CSS.
* e.g.
*
* md-grid-tile {
* transition: all 700ms ease-out 50ms;
* }
*
*/
function GridTileAnimator(grid, tiles) {
grid.element.css(grid.style);
tiles.forEach(function(t) {
t.element.css(t.style);
})
}
/**
* Calculates the positions of tiles.
*
* The algorithm works as follows:
* An Array<Number> with length colCount (spaceTracker) keeps track of
* available tiling positions, where elements of value 0 represents an
* empty position. Space for a tile is reserved by finding a sequence of
* 0s with length <= than the tile's colspan. When such a space has been
* found, the occupied tile positions are incremented by the tile's
* rowspan value, as these positions have become unavailable for that
* many rows.
*
* If the end of a row has been reached without finding space for the
* tile, spaceTracker's elements are each decremented by 1 to a minimum
* of 0. Rows are searched in this fashion until space is found.
*/
function calculateGridFor(colCount, tileSpans) {
var curCol = 0,
curRow = 0,
spaceTracker = newSpaceTracker();
return {
positioning: tileSpans.map(function(spans, i) {
return {
spans: spans,
position: reserveSpace(spans, i)
};
}),
rowCount: curRow + Math.max.apply(Math, spaceTracker)
};
function reserveSpace(spans, i) {
if (spans.col > colCount) {
throw 'md-grid-list: Tile at position ' + i + ' has a colspan ' +
'(' + spans.col + ') that exceeds the column count ' +
'(' + colCount + ')';
}
var start = 0,
end = 0;
// TODO(shyndman): This loop isn't strictly necessary if you can
// determine the minimum number of rows before a space opens up. To do
// this, recognize that you've iterated across an entire row looking for
// space, and if so fast-forward by the minimum rowSpan count. Repeat
// until the required space opens up.
while (end - start < spans.col) {
if (curCol >= colCount) {
nextRow();
continue;
}
start = spaceTracker.indexOf(0, curCol);
if (start === -1 || (end = findEnd(start + 1)) === -1) {
start = end = 0;
nextRow();
continue;
}
curCol = end + 1;
}
adjustRow(start, spans.col, spans.row);
curCol = start + spans.col;
return {
col: start,
row: curRow
};
}
function nextRow() {
curCol = 0;
curRow++;
adjustRow(0, colCount, -1); // Decrement row spans by one
}
function adjustRow(from, cols, by) {
for (var i = from; i < from + cols; i++) {
spaceTracker[i] = Math.max(spaceTracker[i] + by, 0);
}
}
function findEnd(start) {
var i;
for (i = start; i < spaceTracker.length; i++) {
if (spaceTracker[i] !== 0) {
return i;
}
}
if (i === spaceTracker.length) {
return i;
}
}
function newSpaceTracker() {
var tracker = [];
for (var i = 0; i < colCount; i++) {
tracker.push(0);
}
return tracker;
}
}
}
/**
* @ngdoc directive
* @name mdGridTile
* @module material.components.gridList
* @restrict E
* @description
* Tiles contain the content of an `md-grid-list`. They span one or more grid
* cells vertically or horizontally, and use `md-grid-tile-{footer,header}` to
* display secondary content.
*
* ### Responsive Attributes
*
* The `md-grid-tile` directive supports "responsive" attributes, which allow
* different `md-rowspan` and `md-colspan` values depending on the currently
* matching media query.
*
* In order to set a responsive attribute, first define the fallback value with
* the standard attribute name, then add additional attributes with the
* following convention: `{base-attribute-name}-{media-query-name}="{value}"`
* (ie. `md-colspan-sm="4"`)
*
* @param {number=} md-colspan The number of columns to span (default 1). Cannot
* exceed the number of columns in the grid. Supports interpolation.
* @param {number=} md-rowspan The number of rows to span (default 1). Supports
* interpolation.
*
* @usage
* With header:
* <hljs lang="html">
* <md-grid-tile>
* <md-grid-tile-header>
* <h3>This is a header</h3>
* </md-grid-tile-header>
* </md-grid-tile>
* </hljs>
*
* With footer:
* <hljs lang="html">
* <md-grid-tile>
* <md-grid-tile-footer>
* <h3>This is a footer</h3>
* </md-grid-tile-footer>
* </md-grid-tile>
* </hljs>
*
* Spanning multiple rows/columns:
* <hljs lang="html">
* <md-grid-tile md-colspan="2" md-rowspan="3">
* </md-grid-tile>
* </hljs>
*
* Responsive attributes:
* <hljs lang="html">
* <md-grid-tile md-colspan="1" md-colspan-sm="3" md-colspan-md="5">
* </md-grid-tile>
* </hljs>
*/
function GridTileDirective($mdMedia) {
return {
restrict: 'E',
require: '^mdGridList',
template: '<figure ng-transclude></figure>',
transclude: true,
scope: {},
// Simple controller that exposes attributes to the grid directive
controller: ["$attrs", function($attrs) {
this.$attrs = $attrs;
}],
link: postLink
};
function postLink(scope, element, attrs, gridCtrl) {
// Apply semantics
element.attr('role', 'listitem');
// If our colspan or rowspan changes, trigger a layout
var unwatchAttrs = $mdMedia.watchResponsiveAttributes(['md-colspan', 'md-rowspan'],
attrs, angular.bind(gridCtrl, gridCtrl.invalidateLayout));
// Tile registration/deregistration
gridCtrl.invalidateTiles();
scope.$on('$destroy', function() {
// Mark the tile as destroyed so it is no longer considered in layout,
// even if the DOM element sticks around (like during a leave animation)
element[0].$$mdDestroyed = true;
unwatchAttrs();
gridCtrl.invalidateLayout();
});
if (angular.isDefined(scope.$parent.$index)) {
scope.$watch(function() { return scope.$parent.$index; },
function indexChanged(newIdx, oldIdx) {
if (newIdx === oldIdx) {
return;
}
gridCtrl.invalidateTiles();
});
}
}
}
function GridTileCaptionDirective() {
return {
template: '<figcaption ng-transclude></figcaption>',
transclude: true
};
}
ngmaterial.components.gridList = angular.module("material.components.gridList");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-grid-list{display:block;position:relative}md-grid-list,md-grid-list md-grid-tile,md-grid-list md-grid-tile-footer,md-grid-list md-grid-tile-header,md-grid-list md-grid-tile>figure{box-sizing:border-box}md-grid-list md-grid-tile{display:block;position:absolute}md-grid-list md-grid-tile figure{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%;top:0;bottom:0;padding:0;margin:0}md-grid-list md-grid-tile figure,md-grid-list md-grid-tile md-grid-tile-footer,md-grid-list md-grid-tile md-grid-tile-header{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;position:absolute;right:0;left:0}md-grid-list md-grid-tile md-grid-tile-footer,md-grid-list md-grid-tile md-grid-tile-header{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;height:48px;color:#fff;background:rgba(0,0,0,.18);overflow:hidden}md-grid-list md-grid-tile md-grid-tile-footer h3,md-grid-list md-grid-tile md-grid-tile-footer h4,md-grid-list md-grid-tile md-grid-tile-header h3,md-grid-list md-grid-tile md-grid-tile-header h4{font-weight:400;margin:0 0 0 16px}md-grid-list md-grid-tile md-grid-tile-footer h3,md-grid-list md-grid-tile md-grid-tile-header h3{font-size:14px}md-grid-list md-grid-tile md-grid-tile-footer h4,md-grid-list md-grid-tile md-grid-tile-header h4{font-size:12px}md-grid-list md-grid-tile md-grid-tile-header{top:0}md-grid-list md-grid-tile md-grid-tile-footer{bottom:0}@media screen and (-ms-high-contrast:active){md-grid-tile{border:1px solid #fff}md-grid-tile-footer{border-top:1px solid #fff}}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,14 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-icon.md-THEME_NAME-theme {
color: '{{foreground-2}}'; }
md-icon.md-THEME_NAME-theme.md-primary {
color: '{{primary-color}}'; }
md-icon.md-THEME_NAME-theme.md-accent {
color: '{{accent-color}}'; }
md-icon.md-THEME_NAME-theme.md-warn {
color: '{{warn-color}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-icon.md-THEME_NAME-theme{color:'{{foreground-2}}'}md-icon.md-THEME_NAME-theme.md-primary{color:'{{primary-color}}'}md-icon.md-THEME_NAME-theme.md-accent{color:'{{accent-color}}'}md-icon.md-THEME_NAME-theme.md-warn{color:'{{warn-color}}'}

View File

@@ -0,0 +1,22 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-icon {
margin: auto;
background-repeat: no-repeat no-repeat;
display: inline-block;
vertical-align: middle;
fill: currentColor;
height: 24px;
width: 24px;
min-height: 24px;
min-width: 24px; }
md-icon svg {
pointer-events: none;
display: block; }
md-icon[md-font-icon] {
line-height: 24px;
width: auto; }

View File

@@ -0,0 +1,916 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
goog.provide('ngmaterial.components.icon');
goog.require('ngmaterial.core');
/**
* @ngdoc module
* @name material.components.icon
* @description
* Icon
*/
angular.module('material.components.icon', ['material.core']);
angular
.module('material.components.icon')
.directive('mdIcon', ['$mdIcon', '$mdTheming', '$mdAria', '$sce', mdIconDirective]);
/**
* @ngdoc directive
* @name mdIcon
* @module material.components.icon
*
* @restrict E
*
* @description
* The `md-icon` directive makes it easier to use vector-based icons in your app (as opposed to
* raster-based icons types like PNG). The directive supports both icon fonts and SVG icons.
*
* Icons should be considered view-only elements that should not be used directly as buttons; instead nest a `<md-icon>`
* inside a `md-button` to add hover and click features.
*
* ### Icon fonts
* Icon fonts are a technique in which you use a font where the glyphs in the font are
* your icons instead of text. Benefits include a straightforward way to bundle everything into a
* single HTTP request, simple scaling, easy color changing, and more.
*
* `md-icon` lets you consume an icon font by letting you reference specific icons in that font
* by name rather than character code.
*
* ### SVG
* For SVGs, the problem with using `<img>` or a CSS `background-image` is that you can't take
* advantage of some SVG features, such as styling specific parts of the icon with CSS or SVG
* animation.
*
* `md-icon` makes it easier to use SVG icons by *inlining* the SVG into an `<svg>` element in the
* document. The most straightforward way of referencing an SVG icon is via URL, just like a
* traditional `<img>`. `$mdIconProvider`, as a convenience, lets you _name_ an icon so you can
* reference it by name instead of URL throughout your templates.
*
* Additionally, you may not want to make separate HTTP requests for every icon, so you can bundle
* your SVG icons together and pre-load them with $mdIconProvider as an icon set. An icon set can
* also be given a name, which acts as a namespace for individual icons, so you can reference them
* like `"social:cake"`.
*
* When using SVGs, both external SVGs (via URLs) or sets of SVGs [from icon sets] can be
* easily loaded and used.When use font-icons, developers must following three (3) simple steps:
*
* <ol>
* <li>Load the font library. e.g.<br/>
* `<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
* rel="stylesheet">`
* </li>
* <li>
* Use either (a) font-icon class names or (b) font ligatures to render the font glyph by using
* its textual name
* </li>
* <li>
* Use `<md-icon md-font-icon="classname" />` or <br/>
* use `<md-icon md-font-set="font library classname or alias"> textual_name </md-icon>` or <br/>
* use `<md-icon md-font-set="font library classname or alias"> numerical_character_reference </md-icon>`
* </li>
* </ol>
*
* Full details for these steps can be found:
*
* <ul>
* <li>http://google.github.io/material-design-icons/</li>
* <li>http://google.github.io/material-design-icons/#icon-font-for-the-web</li>
* </ul>
*
* The Material Design icon style <code>.material-icons</code> and the icon font references are published in
* Material Design Icons:
*
* <ul>
* <li>https://design.google.com/icons/</li>
* <li>https://design.google.com/icons/#ic_accessibility</li>
* </ul>
*
* <h2 id="material_design_icons">Material Design Icons</h2>
* Using the Material Design Icon-Selector, developers can easily and quickly search for a Material Design font-icon and
* determine its textual name and character reference code. Click on any icon to see the slide-up information
* panel with details regarding a SVG download or information on the font-icon usage.
*
* <a href="https://www.google.com/design/icons/#ic_accessibility" target="_blank" style="border-bottom:none;">
* <img src="https://cloud.githubusercontent.com/assets/210413/7902490/fe8dd14c-0780-11e5-98fb-c821cc6475e6.png"
* aria-label="Material Design Icon-Selector" style="max-width:75%;padding-left:10%">
* </a>
*
* <span class="image_caption">
* Click on the image above to link to the
* <a href="https://design.google.com/icons/#ic_accessibility" target="_blank">Material Design Icon-Selector</a>.
* </span>
*
* @param {string} md-font-icon String name of CSS icon associated with the font-face will be used
* to render the icon. Requires the fonts and the named CSS styles to be preloaded.
* @param {string} md-font-set CSS style name associated with the font library; which will be assigned as
* the class for the font-icon ligature. This value may also be an alias that is used to lookup the classname;
* internally use `$mdIconProvider.fontSet(<alias>)` to determine the style name.
* @param {string} md-svg-src String URL (or expression) used to load, cache, and display an
* external SVG.
* @param {string} md-svg-icon md-svg-icon String name used for lookup of the icon from the internal cache;
* interpolated strings or expressions may also be used. Specific set names can be used with
* the syntax `<set name>:<icon name>`.<br/><br/>
* To use icon sets, developers are required to pre-register the sets using the `$mdIconProvider` service.
* @param {string=} aria-label Labels icon for accessibility. If an empty string is provided, icon
* will be hidden from accessibility layer with `aria-hidden="true"`. If there's no aria-label on the icon
* nor a label on the parent element, a warning will be logged to the console.
* @param {string=} alt Labels icon for accessibility. If an empty string is provided, icon
* will be hidden from accessibility layer with `aria-hidden="true"`. If there's no alt on the icon
* nor a label on the parent element, a warning will be logged to the console.
*
* @usage
* When using SVGs:
* <hljs lang="html">
*
* <!-- Icon ID; may contain optional icon set prefix; icons must registered using $mdIconProvider -->
* <md-icon md-svg-icon="social:android" aria-label="android " ></md-icon>
*
* <!-- Icon urls; may be preloaded in templateCache -->
* <md-icon md-svg-src="/android.svg" aria-label="android " ></md-icon>
* <md-icon md-svg-src="{{ getAndroid() }}" aria-label="android " ></md-icon>
*
* </hljs>
*
* Use the <code>$mdIconProvider</code> to configure your application with
* svg iconsets.
*
* <hljs lang="js">
* angular.module('appSvgIconSets', ['ngMaterial'])
* .controller('DemoCtrl', function($scope) {})
* .config(function($mdIconProvider) {
* $mdIconProvider
* .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
* .defaultIconSet('img/icons/sets/core-icons.svg', 24);
* });
* </hljs>
*
*
* When using Font Icons with classnames:
* <hljs lang="html">
*
* <md-icon md-font-icon="android" aria-label="android" ></md-icon>
* <md-icon class="icon_home" aria-label="Home" ></md-icon>
*
* </hljs>
*
* When using Material Font Icons with ligatures:
* <hljs lang="html">
* <!--
* For Material Design Icons
* The class '.material-icons' is auto-added if a style has NOT been specified
* since `material-icons` is the default fontset. So your markup:
* -->
* <md-icon> face </md-icon>
* <!-- becomes this at runtime: -->
* <md-icon md-font-set="material-icons"> face </md-icon>
* <!-- If the fontset does not support ligature names, then we need to use the ligature unicode.-->
* <md-icon> &#xE87C; </md-icon>
* <!-- The class '.material-icons' must be manually added if other styles are also specified-->
* <md-icon class="material-icons md-light md-48"> face </md-icon>
* </hljs>
*
* When using other Font-Icon libraries:
*
* <hljs lang="js">
* // Specify a font-icon style alias
* angular.config(function($mdIconProvider) {
* $mdIconProvider.fontSet('md', 'material-icons');
* });
* </hljs>
*
* <hljs lang="html">
* <md-icon md-font-set="md">favorite</md-icon>
* </hljs>
*
*/
function mdIconDirective($mdIcon, $mdTheming, $mdAria, $sce) {
return {
restrict: 'E',
link : postLink
};
/**
* Directive postLink
* Supports embedded SVGs, font-icons, & external SVGs
*/
function postLink(scope, element, attr) {
$mdTheming(element);
var lastFontIcon = attr.mdFontIcon;
var lastFontSet = $mdIcon.fontSet(attr.mdFontSet);
prepareForFontIcon();
attr.$observe('mdFontIcon', fontIconChanged);
attr.$observe('mdFontSet', fontIconChanged);
// Keep track of the content of the svg src so we can compare against it later to see if the
// attribute is static (and thus safe).
var originalSvgSrc = element[0].getAttribute(attr.$attr.mdSvgSrc);
// If using a font-icon, then the textual name of the icon itself
// provides the aria-label.
var label = attr.alt || attr.mdFontIcon || attr.mdSvgIcon || element.text();
var attrName = attr.$normalize(attr.$attr.mdSvgIcon || attr.$attr.mdSvgSrc || '');
if ( !attr['aria-label'] ) {
if (label !== '' && !parentsHaveText() ) {
$mdAria.expect(element, 'aria-label', label);
$mdAria.expect(element, 'role', 'img');
} else if ( !element.text() ) {
// If not a font-icon with ligature, then
// hide from the accessibility layer.
$mdAria.expect(element, 'aria-hidden', 'true');
}
}
if (attrName) {
// Use either pre-configured SVG or URL source, respectively.
attr.$observe(attrName, function(attrVal) {
element.empty();
if (attrVal) {
$mdIcon(attrVal)
.then(function(svg) {
element.empty();
element.append(svg);
});
}
});
}
function parentsHaveText() {
var parent = element.parent();
if (parent.attr('aria-label') || parent.text()) {
return true;
}
else if(parent.parent().attr('aria-label') || parent.parent().text()) {
return true;
}
return false;
}
function prepareForFontIcon() {
if (!attr.mdSvgIcon && !attr.mdSvgSrc) {
if (attr.mdFontIcon) {
element.addClass('md-font ' + attr.mdFontIcon);
}
element.addClass(lastFontSet);
}
}
function fontIconChanged() {
if (!attr.mdSvgIcon && !attr.mdSvgSrc) {
if (attr.mdFontIcon) {
element.removeClass(lastFontIcon);
element.addClass(attr.mdFontIcon);
lastFontIcon = attr.mdFontIcon;
}
var fontSet = $mdIcon.fontSet(attr.mdFontSet);
if (lastFontSet !== fontSet) {
element.removeClass(lastFontSet);
element.addClass(fontSet);
lastFontSet = fontSet;
}
}
}
}
}
MdIconService.$inject = ["config", "$templateRequest", "$q", "$log", "$mdUtil", "$sce"];angular
.module('material.components.icon')
.constant('$$mdSvgRegistry', {
'mdTabsArrow': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyICIvPjwvZz48L3N2Zz4=',
'mdClose': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwYXRoIGQ9Ik0xOSA2LjQxbC0xLjQxLTEuNDEtNS41OSA1LjU5LTUuNTktNS41OS0xLjQxIDEuNDEgNS41OSA1LjU5LTUuNTkgNS41OSAxLjQxIDEuNDEgNS41OS01LjU5IDUuNTkgNS41OSAxLjQxLTEuNDEtNS41OS01LjU5eiIvPjwvZz48L3N2Zz4=',
'mdCancel': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwYXRoIGQ9Ik0xMiAyYy01LjUzIDAtMTAgNC40Ny0xMCAxMHM0LjQ3IDEwIDEwIDEwIDEwLTQuNDcgMTAtMTAtNC40Ny0xMC0xMC0xMHptNSAxMy41OWwtMS40MSAxLjQxLTMuNTktMy41OS0zLjU5IDMuNTktMS40MS0xLjQxIDMuNTktMy41OS0zLjU5LTMuNTkgMS40MS0xLjQxIDMuNTkgMy41OSAzLjU5LTMuNTkgMS40MSAxLjQxLTMuNTkgMy41OSAzLjU5IDMuNTl6Ii8+PC9nPjwvc3ZnPg==',
'mdMenu': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0zLDZIMjFWOEgzVjZNMywxMUgyMVYxM0gzVjExTTMsMTZIMjFWMThIM1YxNloiIC8+PC9zdmc+',
'mdToggleArrow': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Ik0yNCAxNmwtMTIgMTIgMi44MyAyLjgzIDkuMTctOS4xNyA5LjE3IDkuMTcgMi44My0yLjgzeiIvPjxwYXRoIGQ9Ik0wIDBoNDh2NDhoLTQ4eiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==',
'mdCalendar': 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM2gtMVYxaC0ydjJIOFYxSDZ2Mkg1Yy0xLjExIDAtMS45OS45LTEuOTkgMkwzIDE5YzAgMS4xLjg5IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMTZINVY4aDE0djExek03IDEwaDV2NUg3eiIvPjwvc3ZnPg==',
'mdChecked': 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwYXRoIGQ9Ik05IDE2LjE3TDQuODMgMTJsLTEuNDIgMS40MUw5IDE5IDIxIDdsLTEuNDEtMS40MXoiLz48L2c+PC9zdmc+'
})
.provider('$mdIcon', MdIconProvider);
/**
* @ngdoc service
* @name $mdIconProvider
* @module material.components.icon
*
* @description
* `$mdIconProvider` is used only to register icon IDs with URLs. These configuration features allow
* icons and icon sets to be pre-registered and associated with source URLs **before** the `<md-icon />`
* directives are compiled.
*
* If using font-icons, the developer is responsible for loading the fonts.
*
* If using SVGs, loading of the actual svg files are deferred to on-demand requests and are loaded
* internally by the `$mdIcon` service using the `$templateRequest` service. When an SVG is
* requested by name/ID, the `$mdIcon` service searches its registry for the associated source URL;
* that URL is used to on-demand load and parse the SVG dynamically.
*
* The `$templateRequest` service expects the icons source to be loaded over trusted URLs.<br/>
* This means, when loading icons from an external URL, you have to trust the URL in the `$sceDelegateProvider`.
*
* <hljs lang="js">
* app.config(function($sceDelegateProvider) {
* $sceDelegateProvider.resourceUrlWhitelist([
* // Adding 'self' to the whitelist, will allow requests from the current origin.
* 'self',
* // Using double asterisks here, will allow all URLs to load.
* // We recommend to only specify the given domain you want to allow.
* '**'
* ]);
* });
* </hljs>
*
* Read more about the [$sceDelegateProvider](https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider).
*
* **Notice:** Most font-icons libraries do not support ligatures (for example `fontawesome`).<br/>
* In such cases you are not able to use the icon's ligature name - Like so:
*
* <hljs lang="html">
* <md-icon md-font-set="fa">fa-bell</md-icon>
* </hljs>
*
* You should instead use the given unicode, instead of the ligature name.
*
* <p ng-hide="true"> ##// Notice we can't use a hljs element here, because the characters will be escaped.</p>
* ```html
* <md-icon md-font-set="fa">&#xf0f3</md-icon>
* ```
*
* All unicode ligatures are prefixed with the `&#x` string.
*
* @usage
* <hljs lang="js">
* app.config(function($mdIconProvider) {
*
* // Configure URLs for icons specified by [set:]id.
*
* $mdIconProvider
* .defaultFontSet( 'fa' ) // This sets our default fontset className.
* .defaultIconSet('my/app/icons.svg') // Register a default set of SVG icons
* .iconSet('social', 'my/app/social.svg') // Register a named icon set of SVGs
* .icon('android', 'my/app/android.svg') // Register a specific icon (by name)
* .icon('work:chair', 'my/app/chair.svg'); // Register icon in a specific set
* });
* </hljs>
*
* SVG icons and icon sets can be easily pre-loaded and cached using either (a) a build process or (b) a runtime
* **startup** process (shown below):
*
* <hljs lang="js">
* app.config(function($mdIconProvider) {
*
* // Register a default set of SVG icon definitions
* $mdIconProvider.defaultIconSet('my/app/icons.svg')
*
* })
* .run(function($templateRequest){
*
* // Pre-fetch icons sources by URL and cache in the $templateCache...
* // subsequent $templateRequest calls will look there first.
*
* var urls = [ 'imy/app/icons.svg', 'img/icons/android.svg'];
*
* angular.forEach(urls, function(url) {
* $templateRequest(url);
* });
*
* });
*
* </hljs>
*
* > <b>Note:</b> The loaded SVG data is subsequently cached internally for future requests.
*
*/
/**
* @ngdoc method
* @name $mdIconProvider#icon
*
* @description
* Register a source URL for a specific icon name; the name may include optional 'icon set' name prefix.
* These icons will later be retrieved from the cache using `$mdIcon( <icon name> )`
*
* @param {string} id Icon name/id used to register the icon
* @param {string} url specifies the external location for the data file. Used internally by
* `$templateRequest` to load the data or as part of the lookup in `$templateCache` if pre-loading
* was configured.
* @param {number=} viewBoxSize Sets the width and height the icon's viewBox.
* It is ignored for icons with an existing viewBox. Default size is 24.
*
* @returns {obj} an `$mdIconProvider` reference; used to support method call chains for the API
*
* @usage
* <hljs lang="js">
* app.config(function($mdIconProvider) {
*
* // Configure URLs for icons specified by [set:]id.
*
* $mdIconProvider
* .icon('android', 'my/app/android.svg') // Register a specific icon (by name)
* .icon('work:chair', 'my/app/chair.svg'); // Register icon in a specific set
* });
* </hljs>
*
*/
/**
* @ngdoc method
* @name $mdIconProvider#iconSet
*
* @description
* Register a source URL for a 'named' set of icons; group of SVG definitions where each definition
* has an icon id. Individual icons can be subsequently retrieved from this cached set using
* `$mdIcon(<icon set name>:<icon name>)`
*
* @param {string} id Icon name/id used to register the iconset
* @param {string} url specifies the external location for the data file. Used internally by
* `$templateRequest` to load the data or as part of the lookup in `$templateCache` if pre-loading
* was configured.
* @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
* It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
* Default value is 24.
*
* @returns {obj} an `$mdIconProvider` reference; used to support method call chains for the API
*
*
* @usage
* <hljs lang="js">
* app.config(function($mdIconProvider) {
*
* // Configure URLs for icons specified by [set:]id.
*
* $mdIconProvider
* .iconSet('social', 'my/app/social.svg') // Register a named icon set
* });
* </hljs>
*
*/
/**
* @ngdoc method
* @name $mdIconProvider#defaultIconSet
*
* @description
* Register a source URL for the default 'named' set of icons. Unless explicitly registered,
* subsequent lookups of icons will failover to search this 'default' icon set.
* Icon can be retrieved from this cached, default set using `$mdIcon(<name>)`
*
* @param {string} url specifies the external location for the data file. Used internally by
* `$templateRequest` to load the data or as part of the lookup in `$templateCache` if pre-loading
* was configured.
* @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
* It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
* Default value is 24.
*
* @returns {obj} an `$mdIconProvider` reference; used to support method call chains for the API
*
* @usage
* <hljs lang="js">
* app.config(function($mdIconProvider) {
*
* // Configure URLs for icons specified by [set:]id.
*
* $mdIconProvider
* .defaultIconSet( 'my/app/social.svg' ) // Register a default icon set
* });
* </hljs>
*
*/
/**
* @ngdoc method
* @name $mdIconProvider#defaultFontSet
*
* @description
* When using Font-Icons, Angular Material assumes the the Material Design icons will be used and automatically
* configures the default font-set == 'material-icons'. Note that the font-set references the font-icon library
* class style that should be applied to the `<md-icon>`.
*
* Configuring the default means that the attributes
* `md-font-set="material-icons"` or `class="material-icons"` do not need to be explicitly declared on the
* `<md-icon>` markup. For example:
*
* `<md-icon> face </md-icon>`
* will render as
* `<span class="material-icons"> face </span>`, and
*
* `<md-icon md-font-set="fa"> face </md-icon>`
* will render as
* `<span class="fa"> face </span>`
*
* @param {string} name of the font-library style that should be applied to the md-icon DOM element
*
* @usage
* <hljs lang="js">
* app.config(function($mdIconProvider) {
* $mdIconProvider.defaultFontSet( 'fa' );
* });
* </hljs>
*
*/
/**
* @ngdoc method
* @name $mdIconProvider#fontSet
*
* @description
* When using a font set for `<md-icon>` you must specify the correct font classname in the `md-font-set`
* attribute. If the fonset className is really long, your markup may become cluttered... an easy
* solution is to define an `alias` for your fontset:
*
* @param {string} alias of the specified fontset.
* @param {string} className of the fontset.
*
* @usage
* <hljs lang="js">
* app.config(function($mdIconProvider) {
* // In this case, we set an alias for the `material-icons` fontset.
* $mdIconProvider.fontSet('md', 'material-icons');
* });
* </hljs>
*
*/
/**
* @ngdoc method
* @name $mdIconProvider#defaultViewBoxSize
*
* @description
* While `<md-icon />` markup can also be style with sizing CSS, this method configures
* the default width **and** height used for all icons; unless overridden by specific CSS.
* The default sizing is (24px, 24px).
* @param {number=} viewBoxSize Sets the width and height of the viewBox for an icon or an icon set.
* All icons in a set should be the same size. The default value is 24.
*
* @returns {obj} an `$mdIconProvider` reference; used to support method call chains for the API
*
* @usage
* <hljs lang="js">
* app.config(function($mdIconProvider) {
*
* // Configure URLs for icons specified by [set:]id.
*
* $mdIconProvider
* .defaultViewBoxSize(36) // Register a default icon size (width == height)
* });
* </hljs>
*
*/
var config = {
defaultViewBoxSize: 24,
defaultFontSet: 'material-icons',
fontSets: []
};
function MdIconProvider() {
}
MdIconProvider.prototype = {
icon: function(id, url, viewBoxSize) {
if (id.indexOf(':') == -1) id = '$default:' + id;
config[id] = new ConfigurationItem(url, viewBoxSize);
return this;
},
iconSet: function(id, url, viewBoxSize) {
config[id] = new ConfigurationItem(url, viewBoxSize);
return this;
},
defaultIconSet: function(url, viewBoxSize) {
var setName = '$default';
if (!config[setName]) {
config[setName] = new ConfigurationItem(url, viewBoxSize);
}
config[setName].viewBoxSize = viewBoxSize || config.defaultViewBoxSize;
return this;
},
defaultViewBoxSize: function(viewBoxSize) {
config.defaultViewBoxSize = viewBoxSize;
return this;
},
/**
* Register an alias name associated with a font-icon library style ;
*/
fontSet: function fontSet(alias, className) {
config.fontSets.push({
alias: alias,
fontSet: className || alias
});
return this;
},
/**
* Specify a default style name associated with a font-icon library
* fallback to Material Icons.
*
*/
defaultFontSet: function defaultFontSet(className) {
config.defaultFontSet = !className ? '' : className;
return this;
},
defaultIconSize: function defaultIconSize(iconSize) {
config.defaultIconSize = iconSize;
return this;
},
$get: ['$templateRequest', '$q', '$log', '$mdUtil', '$sce', function($templateRequest, $q, $log, $mdUtil, $sce) {
return MdIconService(config, $templateRequest, $q, $log, $mdUtil, $sce);
}]
};
/**
* Configuration item stored in the Icon registry; used for lookups
* to load if not already cached in the `loaded` cache
*/
function ConfigurationItem(url, viewBoxSize) {
this.url = url;
this.viewBoxSize = viewBoxSize || config.defaultViewBoxSize;
}
/**
* @ngdoc service
* @name $mdIcon
* @module material.components.icon
*
* @description
* The `$mdIcon` service is a function used to lookup SVG icons.
*
* @param {string} id Query value for a unique Id or URL. If the argument is a URL, then the service will retrieve the icon element
* from its internal cache or load the icon and cache it first. If the value is not a URL-type string, then an ID lookup is
* performed. The Id may be a unique icon ID or may include an iconSet ID prefix.
*
* For the **id** query to work properly, this means that all id-to-URL mappings must have been previously configured
* using the `$mdIconProvider`.
*
* @returns {angular.$q.Promise} A promise that gets resolved to a clone of the initial SVG DOM element; which was
* created from the SVG markup in the SVG data file. If an error occurs (e.g. the icon cannot be found) the promise
* will get rejected.
*
* @usage
* <hljs lang="js">
* function SomeDirective($mdIcon) {
*
* // See if the icon has already been loaded, if not
* // then lookup the icon from the registry cache, load and cache
* // it for future requests.
* // NOTE: ID queries require configuration with $mdIconProvider
*
* $mdIcon('android').then(function(iconEl) { element.append(iconEl); });
* $mdIcon('work:chair').then(function(iconEl) { element.append(iconEl); });
*
* // Load and cache the external SVG using a URL
*
* $mdIcon('img/icons/android.svg').then(function(iconEl) {
* element.append(iconEl);
* });
* };
* </hljs>
*
* > <b>Note:</b> The `<md-icon>` directive internally uses the `$mdIcon` service to query, loaded,
* and instantiate SVG DOM elements.
*/
/* ngInject */
function MdIconService(config, $templateRequest, $q, $log, $mdUtil, $sce) {
var iconCache = {};
var svgCache = {};
var urlRegex = /[-\w@:%\+.~#?&//=]{2,}\.[a-z]{2,4}\b(\/[-\w@:%\+.~#?&//=]*)?/i;
var dataUrlRegex = /^data:image\/svg\+xml[\s*;\w\-\=]*?(base64)?,(.*)$/i;
Icon.prototype = {clone: cloneSVG, prepare: prepareAndStyle};
getIcon.fontSet = findRegisteredFontSet;
// Publish service...
return getIcon;
/**
* Actual $mdIcon service is essentially a lookup function
*/
function getIcon(id) {
id = id || '';
// If the "id" provided is not a string, the only other valid value is a $sce trust wrapper
// over a URL string. If the value is not trusted, this will intentionally throw an error
// because the user is attempted to use an unsafe URL, potentially opening themselves up
// to an XSS attack.
if (!angular.isString(id)) {
id = $sce.getTrustedUrl(id);
}
// If already loaded and cached, use a clone of the cached icon.
// Otherwise either load by URL, or lookup in the registry and then load by URL, and cache.
if (iconCache[id]) {
return $q.when(transformClone(iconCache[id]));
}
if (urlRegex.test(id) || dataUrlRegex.test(id)) {
return loadByURL(id).then(cacheIcon(id));
}
if (id.indexOf(':') == -1) {
id = '$default:' + id;
}
var load = config[id] ? loadByID : loadFromIconSet;
return load(id)
.then(cacheIcon(id));
}
/**
* Lookup registered fontSet style using its alias...
* If not found,
*/
function findRegisteredFontSet(alias) {
var useDefault = angular.isUndefined(alias) || !(alias && alias.length);
if (useDefault) return config.defaultFontSet;
var result = alias;
angular.forEach(config.fontSets, function(it) {
if (it.alias == alias) result = it.fontSet || result;
});
return result;
}
function transformClone(cacheElement) {
var clone = cacheElement.clone();
var cacheSuffix = '_cache' + $mdUtil.nextUid();
// We need to modify for each cached icon the id attributes.
// This is needed because SVG id's are treated as normal DOM ids
// and should not have a duplicated id.
if (clone.id) clone.id += cacheSuffix;
angular.forEach(clone.querySelectorAll('[id]'), function(item) {
item.id += cacheSuffix;
});
return clone;
}
/**
* Prepare and cache the loaded icon for the specified `id`
*/
function cacheIcon(id) {
return function updateCache(icon) {
iconCache[id] = isIcon(icon) ? icon : new Icon(icon, config[id]);
return iconCache[id].clone();
};
}
/**
* Lookup the configuration in the registry, if !registered throw an error
* otherwise load the icon [on-demand] using the registered URL.
*
*/
function loadByID(id) {
var iconConfig = config[id];
return loadByURL(iconConfig.url).then(function(icon) {
return new Icon(icon, iconConfig);
});
}
/**
* Loads the file as XML and uses querySelector( <id> ) to find
* the desired node...
*/
function loadFromIconSet(id) {
var setName = id.substring(0, id.lastIndexOf(':')) || '$default';
var iconSetConfig = config[setName];
return !iconSetConfig ? announceIdNotFound(id) : loadByURL(iconSetConfig.url).then(extractFromSet);
function extractFromSet(set) {
var iconName = id.slice(id.lastIndexOf(':') + 1);
var icon = set.querySelector('#' + iconName);
return icon ? new Icon(icon, iconSetConfig) : announceIdNotFound(id);
}
function announceIdNotFound(id) {
var msg = 'icon ' + id + ' not found';
$log.warn(msg);
return $q.reject(msg || id);
}
}
/**
* Load the icon by URL (may use the $templateCache).
* Extract the data for later conversion to Icon
*/
function loadByURL(url) {
/* Load the icon from embedded data URL. */
function loadByDataUrl(url) {
var results = dataUrlRegex.exec(url);
var isBase64 = /base64/i.test(url);
var data = isBase64 ? window.atob(results[2]) : results[2];
return $q.when(angular.element(data)[0]);
}
/* Load the icon by URL using HTTP. */
function loadByHttpUrl(url) {
return $q(function(resolve, reject) {
// Catch HTTP or generic errors not related to incorrect icon IDs.
var announceAndReject = function(err) {
var msg = angular.isString(err) ? err : (err.message || err.data || err.statusText);
$log.warn(msg);
reject(err);
},
extractSvg = function(response) {
if (!svgCache[url]) {
svgCache[url] = angular.element('<div>').append(response)[0].querySelector('svg');
}
resolve(svgCache[url]);
};
$templateRequest(url, true).then(extractSvg, announceAndReject);
});
}
return dataUrlRegex.test(url)
? loadByDataUrl(url)
: loadByHttpUrl(url);
}
/**
* Check target signature to see if it is an Icon instance.
*/
function isIcon(target) {
return angular.isDefined(target.element) && angular.isDefined(target.config);
}
/**
* Define the Icon class
*/
function Icon(el, config) {
if (el && el.tagName != 'svg') {
el = angular.element('<svg xmlns="http://www.w3.org/2000/svg">').append(el.cloneNode(true))[0];
}
// Inject the namespace if not available...
if (!el.getAttribute('xmlns')) {
el.setAttribute('xmlns', "http://www.w3.org/2000/svg");
}
this.element = el;
this.config = config;
this.prepare();
}
/**
* Prepare the DOM element that will be cached in the
* loaded iconCache store.
*/
function prepareAndStyle() {
var viewBoxSize = this.config ? this.config.viewBoxSize : config.defaultViewBoxSize;
angular.forEach({
'fit': '',
'height': '100%',
'width': '100%',
'preserveAspectRatio': 'xMidYMid meet',
'viewBox': this.element.getAttribute('viewBox') || ('0 0 ' + viewBoxSize + ' ' + viewBoxSize),
'focusable': false // Disable IE11s default behavior to make SVGs focusable
}, function(val, attr) {
this.element.setAttribute(attr, val);
}, this);
}
/**
* Clone the Icon DOM element.
*/
function cloneSVG() {
// If the element or any of its children have a style attribute, then a CSP policy without
// 'unsafe-inline' in the style-src directive, will result in a violation.
return this.element.cloneNode(true);
}
}
ngmaterial.components.icon = angular.module("material.components.icon");

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-icon{margin:auto;background-repeat:no-repeat;display:inline-block;vertical-align:middle;fill:currentColor;height:24px;width:24px;min-height:24px;min-width:24px}md-icon svg{pointer-events:none;display:block}md-icon[md-font-icon]{line-height:24px;width:auto}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,77 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.1
*/
md-input-container.md-THEME_NAME-theme .md-input {
color: '{{foreground-1}}';
border-color: '{{foreground-4}}'; }
md-input-container.md-THEME_NAME-theme .md-input::-webkit-input-placeholder {
color: '{{foreground-3}}'; }
md-input-container.md-THEME_NAME-theme .md-input:-moz-placeholder {
color: '{{foreground-3}}'; }
md-input-container.md-THEME_NAME-theme .md-input::-moz-placeholder {
color: '{{foreground-3}}'; }
md-input-container.md-THEME_NAME-theme .md-input:-ms-input-placeholder {
color: '{{foreground-3}}'; }
md-input-container.md-THEME_NAME-theme .md-input::-webkit-input-placeholder {
color: '{{foreground-3}}'; }
md-input-container.md-THEME_NAME-theme > md-icon {
color: '{{foreground-1}}'; }
md-input-container.md-THEME_NAME-theme label,
md-input-container.md-THEME_NAME-theme .md-placeholder {
color: '{{foreground-3}}'; }
md-input-container.md-THEME_NAME-theme label.md-required:after {
color: '{{warn-A700}}'; }
md-input-container.md-THEME_NAME-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
color: '{{foreground-2}}'; }
md-input-container.md-THEME_NAME-theme .md-input-messages-animation, md-input-container.md-THEME_NAME-theme .md-input-message-animation {
color: '{{warn-A700}}'; }
md-input-container.md-THEME_NAME-theme .md-input-messages-animation .md-char-counter, md-input-container.md-THEME_NAME-theme .md-input-message-animation .md-char-counter {
color: '{{foreground-1}}'; }
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-has-value label {
color: '{{foreground-2}}'; }
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused .md-input, md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-resized .md-input {
border-color: '{{primary-color}}'; }
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused label,
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused md-icon {
color: '{{primary-color}}'; }
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent .md-input {
border-color: '{{accent-color}}'; }
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent label,
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent md-icon {
color: '{{accent-color}}'; }
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn .md-input {
border-color: '{{warn-A700}}'; }
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn label,
md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn md-icon {
color: '{{warn-A700}}'; }
md-input-container.md-THEME_NAME-theme.md-input-invalid .md-input {
border-color: '{{warn-A700}}'; }
md-input-container.md-THEME_NAME-theme.md-input-invalid label,
md-input-container.md-THEME_NAME-theme.md-input-invalid .md-input-message-animation,
md-input-container.md-THEME_NAME-theme.md-input-invalid .md-char-counter {
color: '{{warn-A700}}'; }
md-input-container.md-THEME_NAME-theme .md-input[disabled],
[disabled] md-input-container.md-THEME_NAME-theme .md-input {
border-bottom-color: transparent;
color: '{{foreground-3}}';
background-image: -webkit-linear-gradient(left, "{{foreground-3}}" 0%, "{{foreground-3}}" 33%, transparent 0%);
background-image: linear-gradient(to right, "{{foreground-3}}" 0%, "{{foreground-3}}" 33%, transparent 0%);
background-image: -ms-linear-gradient(left, transparent 0%, "{{foreground-3}}" 100%); }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.0-master-2b98560
*/md-input-container.md-THEME_NAME-theme .md-input{color:'{{foreground-1}}';border-color:'{{foreground-4}}'}md-input-container.md-THEME_NAME-theme .md-input:-moz-placeholder,md-input-container.md-THEME_NAME-theme .md-input::-moz-placeholder{color:'{{foreground-3}}'}md-input-container.md-THEME_NAME-theme .md-input:-ms-input-placeholder{color:'{{foreground-3}}'}md-input-container.md-THEME_NAME-theme .md-input::-webkit-input-placeholder{color:'{{foreground-3}}'}md-input-container.md-THEME_NAME-theme>md-icon{color:'{{foreground-1}}'}md-input-container.md-THEME_NAME-theme .md-placeholder,md-input-container.md-THEME_NAME-theme label{color:'{{foreground-3}}'}md-input-container.md-THEME_NAME-theme label.md-required:after{color:'{{warn-A700}}'}md-input-container.md-THEME_NAME-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after{color:'{{foreground-2}}'}md-input-container.md-THEME_NAME-theme .md-input-message-animation,md-input-container.md-THEME_NAME-theme .md-input-messages-animation{color:'{{warn-A700}}'}md-input-container.md-THEME_NAME-theme .md-input-message-animation .md-char-counter,md-input-container.md-THEME_NAME-theme .md-input-messages-animation .md-char-counter{color:'{{foreground-1}}'}md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-has-value label{color:'{{foreground-2}}'}md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused .md-input,md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-resized .md-input{border-color:'{{primary-color}}'}md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused label,md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused md-icon{color:'{{primary-color}}'}md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent .md-input{border-color:'{{accent-color}}'}md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent label,md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent md-icon{color:'{{accent-color}}'}md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn .md-input{border-color:'{{warn-A700}}'}md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn label,md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn md-icon{color:'{{warn-A700}}'}md-input-container.md-THEME_NAME-theme.md-input-invalid .md-input{border-color:'{{warn-A700}}'}md-input-container.md-THEME_NAME-theme.md-input-invalid .md-char-counter,md-input-container.md-THEME_NAME-theme.md-input-invalid .md-input-message-animation,md-input-container.md-THEME_NAME-theme.md-input-invalid label{color:'{{warn-A700}}'}[disabled] md-input-container.md-THEME_NAME-theme .md-input,md-input-container.md-THEME_NAME-theme .md-input[disabled]{border-bottom-color:transparent;color:'{{foreground-3}}';background-image:-webkit-linear-gradient(left,"{{foreground-3}}","{{foreground-3}}" 33%,transparent 0);background-image:linear-gradient(90deg,"{{foreground-3}}" 0,"{{foreground-3}}" 33%,transparent 0);background-image:-ms-linear-gradient(left,transparent 0,"{{foreground-3}}" 100%)}

Some files were not shown because too many files have changed in this diff Show More