diff options
Diffstat (limited to 'vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar')
4 files changed, 341 insertions, 0 deletions
diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.css b/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.css new file mode 100644 index 00000000..502e76c2 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.css @@ -0,0 +1,119 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +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); } diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.js b/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.js new file mode 100644 index 00000000..e6df5c65 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.js @@ -0,0 +1,209 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +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 to 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 md-svg-src="/img/icons/plus.svg"></md-icon></md-button> + * </md-fab-trigger> + * + * <md-toolbar> + * <md-fab-actions> + * <md-button aria-label="Add User"> + * <md-icon md-svg-src="/img/icons/user.svg"></md-icon> + * </md-button> + * + * <md-button aria-label="Add Group"> + * <md-icon md-svg-src="/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");
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.min.css b/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.min.css new file mode 100644 index 00000000..4a40a4a8 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.min.css @@ -0,0 +1,6 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */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)}
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.min.js b/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.min.js new file mode 100644 index 00000000..9305a54e --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/fabToolbar/fabToolbar.min.js @@ -0,0 +1,7 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */ +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");
\ No newline at end of file |