├── .bowerrc ├── .gitignore ├── README.md ├── bower.json ├── doc ├── app │ ├── app.js │ ├── comp │ │ ├── button.html │ │ ├── inputBox.html │ │ ├── link.html │ │ ├── loader.html │ │ ├── modal.html │ │ ├── notify.html │ │ ├── toggle.html │ │ └── words.html │ ├── componentData.js │ ├── controllers │ │ ├── componentCtrl.js │ │ ├── demoModalCtrl.js │ │ └── demoNotifyCtrl.js │ ├── directives │ │ └── componentDir.js │ ├── partials │ │ ├── 404.html │ │ ├── component.html │ │ └── home.html │ └── rootCtrl.js ├── index.html ├── lib │ └── prism │ │ ├── prism.default.css │ │ ├── prism.min.js │ │ └── prism.okaidia.css ├── scss │ ├── _layout.scss │ ├── home.scss │ └── main.scss ├── server.go └── server.js ├── gulpfile.js ├── package.json ├── snapshot.png └── src ├── _scss ├── _color_palette.scss ├── _layout.scss ├── _mixins.scss ├── angular-ui-awesome.scss ├── common_animation.scss ├── common_style.scss └── reset.scss ├── _util └── utilSvc.js ├── app.js ├── button ├── button.js └── button.scss ├── inputbox ├── inputbox.js └── inputbox.scss ├── link ├── link.js └── link.scss ├── loader ├── loader.js ├── loader.scss └── loader2.scss ├── modal ├── modal.js └── modal.scss ├── notify ├── notify.js └── notify.scss ├── toggle ├── toggle.js └── toggle.scss └── words ├── words.js └── words.scss /.bowerrc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/angular-ui-awesome/0206c01eceb531f4db9902e6d6080d823f7a35f3/.bowerrc -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.seed 2 | *.log 3 | *.csv 4 | *.dat 5 | *.out 6 | *.pid 7 | *.gz 8 | 9 | npm-debug.log 10 | node_modules 11 | .DS_Store 12 | .nodemonignore 13 | .sass-cache/ 14 | .bower-*/ 15 | .idea/ 16 | 17 | doc/vendor/ 18 | doc/css/ 19 | doc/app/angular-ui-awesome.js 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | _ 2 | _ _(_) __ ___ _____ ___ ___ _ __ ___ ___ 3 | | | | | |_____ / _` \ \ /\ / / _ \/ __|/ _ \| '_ ` _ \ / _ \ 4 | | |_| | |_____| (_| |\ V V / __/\__ \ (_) | | | | | | __/ 5 | \__,_|_| \__,_| \_/\_/ \___||___/\___/|_| |_| |_|\___| 6 | 7 | =============== 8 | 9 | ## under development........... 10 | you can go to [http://eisneim.github.io/angular-ui-awesome](http://eisneim.github.io/angular-ui-awesome) take look at some pretty awesome demoes 11 | 12 | ![img](snapshot.png 'preview') -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ui-awesome", 3 | "version": "1.0.0", 4 | "homepage": "http://eisneim.github.io/angular-ui-awesome", 5 | "authors": [ 6 | "eisneim " 7 | ], 8 | "description": "a collection of awesome ui directives for your AngularJS app", 9 | "dependencies": { 10 | "angular": ">=1.2", 11 | "angular-route": ">=1.2" 12 | }, 13 | "main": "./build/angular-ui-awesome.js", 14 | "license": "MIT", 15 | "dependencies": { 16 | "angular": ">= 1.2" 17 | }, 18 | "keywords":["ui components","angular ui collection"], 19 | "ignore": [ 20 | "**/.*", 21 | "node_modules", 22 | "bower_components", 23 | "test", 24 | "tests" 25 | ] 26 | 27 | } -------------------------------------------------------------------------------- /doc/app/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var app = angular.module('ua-doc',['ngRoute','ngUiAwesome']); 4 | 5 | app.run([function(){ 6 | document.getElementsByTagName('html')[0].classList.remove('no-js'); 7 | document.body.classList.remove('hide'); 8 | 9 | }]); 10 | 11 | app.config(function($routeProvider,$locationProvider){ 12 | // $locationProvider.html5Mode(true); 13 | 14 | $routeProvider 15 | .when('/',{ 16 | templateUrl:'app/partials/home.html', 17 | // controller:'homeCtrl', 18 | // controllerAs:'homeCtrl', 19 | title:'a collection of awesome ui components', 20 | } 21 | ).when('/component/:component',{ 22 | templateUrl:'app/partials/component.html', 23 | controller:'componentCtrl', 24 | controllerAs:'comCtrl', 25 | title:'', 26 | } 27 | ).when('/404',{ 28 | templateUrl:'app/partials/404.html', 29 | title:'404 page not found' 30 | }) 31 | .otherwise({ 32 | redirectTo:'/404', 33 | }) 34 | 35 | }); 36 | 37 | -------------------------------------------------------------------------------- /doc/app/comp/button.html: -------------------------------------------------------------------------------- 1 | 12 |
13 |
14 | 15 | <ua-button>default</ua-button> 16 | <ua-button href="" class="ua-btn-red">ua-btn-red</ua-button> 17 | 18 |
19 |
20 | default 21 | ua-btn-red 22 | ua-btn-pink 23 | ua-btn-purple 24 | ua-btn-deep-purple 25 | ua-btn-indigo 26 | ua-btn-blue 27 | ua-btn-light-blue 28 | ua-btn-cyan 29 | ua-btn-teal 30 | ua-btn-green 31 | ua-btn-light-green 32 | ua-btn-lime 33 | ua-btn-yellow 34 | ua-btn-amber 35 | ua-btn-orange 36 | ua-btn-deep-orange 37 | ua-btn-brown 38 | ua-btn-grey 39 | ua-btn-blue-grey 40 |
41 |
42 | 43 | <ua-button class="ua-raised">default</ua-button> 44 | <ua-button class="ua-raised ua-btn-red">ua-btn-red</ua-button> 45 | 46 |
47 |
48 | default 49 | ua-btn-red 50 | ua-btn-pink 51 | ua-btn-purple 52 | ua-btn-deep-purple 53 | ua-btn-indigo 54 | ua-btn-blue 55 | ua-btn-light-blue 56 | ua-btn-cyan 57 | ua-btn-teal 58 | ua-btn-green 59 | ua-btn-light-green 60 | ua-btn-lime 61 | ua-btn-yellow 62 | ua-btn-amber 63 | ua-btn-orange 64 | ua-btn-deep-orange 65 | ua-btn-brown 66 | ua-btn-grey 67 | ua-btn-blue-grey 68 |
69 |
70 | 71 | <ua-button class="ua-ghost">default</ua-button> 72 | <ua-button class="ua-ghost ua-btn-red">ua-btn-red</ua-button> 73 | ... 74 | 75 |
76 |
77 | button 78 | ua-btn-red 79 | ua-btn-pink 80 | ua-btn-purple 81 | ua-btn-deep-purple 82 | ua-btn-indigo 83 | ua-btn-blue 84 | ua-btn-light-blue 85 | ua-btn-cyan 86 | ua-btn-teal 87 | ua-btn-green 88 | ua-btn-light-green 89 | ua-btn-lime 90 | ua-btn-yellow 91 | ua-btn-amber 92 | ua-btn-orange 93 | ua-btn-deep-orange 94 | ua-btn-brown 95 | ua-btn-grey 96 | ua-btn-blue-grey 97 |
98 |
99 | 100 | <ua-button>default</ua-button> 101 | <ua-button href="" class="ua-btn-red">ua-btn-red</ua-button> 102 | 103 |
104 |
105 | ua-btn-xlg 106 | ua-btn-lg 107 | default 108 | ua-btn-sm 109 | ua-btn-xs 110 |
111 | 112 |
-------------------------------------------------------------------------------- /doc/app/comp/inputBox.html: -------------------------------------------------------------------------------- 1 | 9 |
10 |
11 | 12 | <ua-input ua-label="theme: nao" ua-theme="nao" ng-model="someval" required ></ua-input> 13 | <ua-input ua-label="theme: shoko" ng-model="test" ua-theme="shoko"></ua-input> 14 | <ua-input ua-label="theme: kozakura" ng-model="test" ua-theme="kozakura"></ua-input> 15 | <ua-input ua-label="theme: manami" ua-theme="manami" ng-model="someval" required ></ua-input> 16 | ... 17 | 18 |
19 |

{{someval}}

20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 |

34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
47 |
-------------------------------------------------------------------------------- /doc/app/comp/link.html: -------------------------------------------------------------------------------- 1 | 10 |
11 |
12 | 13 | <ua-link href="#" class="ua-link-brucket">brucket</ua-link> 14 | <ua-link href="#" class="ua-link-rolling" data-hover="behind">rolling</ua-link> 15 | <ua-link href="#" class="ua-link-lineup">lineup</ua-link> 16 | <ua-link href="#" class="ua-link-subtext" data-hover="blah blah blah">subtext</ua-link> 17 | ... 18 | 19 |
20 | 86 |
-------------------------------------------------------------------------------- /doc/app/comp/loader.html: -------------------------------------------------------------------------------- 1 | 13 |
14 |
15 |
16 | flipDot 17 |
18 |
19 | fourdots 20 |
21 |
22 | bokeh 23 |
24 |
25 | kiri 26 |
27 |
28 | sail 29 |
30 |
31 | squarePuls 32 |
33 |
34 | breath 35 |
36 |
37 | stroke 38 |
39 | 40 | 41 |
42 | wave 43 |
44 |
45 | orbit 46 |
47 | 50 |
51 |
52 | 53 | app.directive('uaDemoLoaders',['$uaLoader',function($uaLoader){ 54 | return function($scope,elm,attrs){ 55 | var circleContainer = document.getElementById('ua-loader-stroke'); 56 | var circleLoader = $uaLoader({ 57 | container: circleContainer, 58 | }); 59 | 60 | var liquidsquare = $uaLoader({ 61 | container: document.getElementById('ua-loader-liquidsquare'), 62 | theme:'liquidSquare', 63 | }); 64 | 65 | var fourdots = $uaLoader({ 66 | container: document.getElementById('ua-loader-fourdots'), 67 | theme: 'fourdots' 68 | }) 69 | // fourdots.show(), fourdots.hide([delay=0]), fourdots.remove() 70 | } 71 | ... 72 | }]) 73 | 74 |
75 |
76 | 77 | -------------------------------------------------------------------------------- /doc/app/comp/modal.html: -------------------------------------------------------------------------------- 1 | 6 |
7 |
8 | 9 | alert 10 | confirm 11 | prompt 12 | custom content 13 |
14 |
15 | 16 | 17 | 18 | 19 | app.controller('demoModalCtrl',['$scope','$uaModal',function($scope,$uaModal){ 20 | 21 | }]) 22 | 23 |
24 | 25 |
-------------------------------------------------------------------------------- /doc/app/comp/notify.html: -------------------------------------------------------------------------------- 1 | 16 |
17 |
18 | 19 |
20 | 21 | 22 | 23 |
24 | Notify Type:
25 | 26 | 27 |
28 |
29 |
30 | alignVertical:
31 | 32 | 33 |

34 |
35 | alignHorizontal:
36 | 37 | 38 |
39 |
40 |
41 | theme:
42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | 50 |



51 |
52 | 53 | error 54 | warn 55 | info 56 | success 57 |
58 |
59 | 60 | <ua-button ng-click="noti.showNotify('error')" class="ua-raised ua-btn-red">error</ua-button> 61 | <ua-button ng-click="noti.showNotify('warn')" class="ua-raised ua-btn-orange">warn</ua-button> 62 | <ua-button ng-click="noti.showNotify('info')" class="ua-raised ua-btn-blue">info</ua-button> 63 | <ua-button ng-click="noti.showNotify('success')" class="ua-raised ua-btn-green">success</ua-button> 64 | 65 | 66 | app.controller('demoNotifyCtrl',['$scope','$uaNotify', 67 | function($scope,$uaNotify){ 68 | var ctrl = this; 69 | this.notify = { 70 | msg: 'you can add message and title, and even select type', 71 | } 72 | 73 | this.options = { 74 | life: 4000, 75 | type:'block', 76 | alignVertical: 'top', 77 | alignHorizontal: 'right', 78 | theme: 'flip', 79 | }; 80 | 81 | this.showNotify = function(type ) { 82 | $uaNotify.create( ctrl.options )[type]( ctrl.notify.msg, ctrl.notify.title ); 83 | } 84 | /* you can simply call error,warn,info or success, this will use default config; 85 | $uaNotify.error('some message') 86 | $uaNotify.success('some message') 87 | 88 | or, you can create({option_here}) once, then your config will be used every time you call error,info... etc. 89 | 90 | */ 91 | }]) 92 | 93 |
94 |
-------------------------------------------------------------------------------- /doc/app/comp/toggle.html: -------------------------------------------------------------------------------- 1 | 7 |
8 |

ua-toggle-bar-arrow

9 | 10 | <ua-toggle-bar-arrow ng-click=""></ua-toggle-bar-arrow> 11 | <ua-toggle-bar-arrow ua-direction="right"></ua-toggle-bar-arrow> 12 | 13 |
14 | 15 | 16 |
17 |
18 |

ua-toggle-bar-cricle

19 | 20 | <ua-toggle-bar-circle ng-click=""></ua-toggle-bar-circle> 21 | 22 | 23 |
24 | 25 |
26 |

ua-toggle-switch

27 | 28 | <ua-toggle-switch></ua-toggle-switch> 29 | <ua-toggle-switch ua-theme="light"></ua-toggle-switch> 30 | <ua-toggle-switch ua-theme="flat"></ua-toggle-switch> 31 | <ua-toggle-switch ua-theme="skewed"></ua-toggle-switch> 32 | <ua-toggle-switch ua-theme="flip"></ua-toggle-switch> 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
-------------------------------------------------------------------------------- /doc/app/comp/words.html: -------------------------------------------------------------------------------- 1 | 7 |
8 |
9 | 10 | I'm good at <ua-words data-words="design||| parkour |||webDev ||| programming" ua-duration="2500"></ua-words> 11 | I'm good at <ua-words data-words="design||| parkour |||webDev ||| programming" ua-theme="rotate" ></ua-words> 12 | ... 13 | <!-- available atributes: --> 14 | ua-theme , ua-duration 15 | 16 |

17 |
18 |

19 | (rotate)I'm good at 20 | 23 |

24 |

25 | (loading)I'm good at 26 | 29 |

30 |

31 | (slide)I'm good at 32 | 35 |

36 |

37 | (clip)I'm good at 38 | 41 |

42 |

43 | (zoom)I'm good at 44 | 47 |

48 |

49 | (push)I'm good at 50 | 53 |

54 |

55 | (letter-rotatex)I'm good at 56 | 59 |

60 |

61 | (letter-rotatey)I'm good at 62 | 65 |

66 |

67 | (letter-scale)I'm good at 68 | 71 |

72 |

73 | (letter-type)I'm good at 74 | 77 |

78 |
79 |
-------------------------------------------------------------------------------- /doc/app/componentData.js: -------------------------------------------------------------------------------- 1 | angular.module('ua-doc').constant('COMDATA', [ 2 | { 3 | "name": "toggle", 4 | "path": 'app/comp/toggle.html', 5 | "url": "" 6 | }, 7 | { 8 | "name": "loader", 9 | "path": 'app/comp/loader.html', 10 | "url": "" 11 | }, 12 | { 13 | "name": "link", 14 | "path": 'app/comp/link.html', 15 | "url": "" 16 | }, 17 | { 18 | "name": "words", 19 | "path": 'app/comp/words.html', 20 | "url": "" 21 | }, 22 | { 23 | "name": "button", 24 | "path": 'app/comp/button.html', 25 | "url": "" 26 | }, 27 | { 28 | "name": "inputBox", 29 | "path": 'app/comp/inputBox.html', 30 | "url": "" 31 | }, 32 | { 33 | "name": "notify", 34 | "path": 'app/comp/notify.html', 35 | "url": "" 36 | }, 37 | { 38 | "name": "modal", 39 | "path": 'app/comp/modal.html', 40 | "url": "" 41 | }, 42 | 43 | ]); -------------------------------------------------------------------------------- /doc/app/controllers/componentCtrl.js: -------------------------------------------------------------------------------- 1 | app.controller('componentCtrl',['$scope','$routeParams','COMDATA','$location', 2 | function($scope,$routeParams,COMDATA,$location){ 3 | var ctrl = this; 4 | if(!$routeParams.component) return $location.path('/404'); 5 | 6 | this.component = $routeParams.component; 7 | 8 | COMDATA.forEach(function(com,index){ 9 | if(com.name == ctrl.component ) ctrl.compData = COMDATA[ index ]; 10 | }); 11 | // console.log(this.) 12 | if(!this.compData) return $location.path('/404'); 13 | 14 | // change page title 15 | document.title = this.component + ' - angular-ui-awesome'; 16 | 17 | 18 | 19 | }]) -------------------------------------------------------------------------------- /doc/app/controllers/demoModalCtrl.js: -------------------------------------------------------------------------------- 1 | app.controller('demoModalCtrl',['$scope','$uaModal', 2 | function($scope,$uaModal){ 3 | var ctrl = this; 4 | 5 | 6 | 7 | }]) -------------------------------------------------------------------------------- /doc/app/controllers/demoNotifyCtrl.js: -------------------------------------------------------------------------------- 1 | app.controller('demoNotifyCtrl',['$scope','$uaNotify', 2 | function($scope,$uaNotify){ 3 | var ctrl = this; 4 | this.notify = { 5 | msg: 'you can add message and title, and even select type', 6 | } 7 | 8 | this.options = { 9 | life: 4000, 10 | type:'block', 11 | alignVertical: 'top', 12 | alignHorizontal: 'right', 13 | theme: 'flip', 14 | }; 15 | 16 | this.showNotify = function(type ) { 17 | $uaNotify.create( ctrl.options )[type]( ctrl.notify.msg, ctrl.notify.title ); 18 | } 19 | 20 | 21 | }]) -------------------------------------------------------------------------------- /doc/app/directives/componentDir.js: -------------------------------------------------------------------------------- 1 | app.directive('coding',function(){ 2 | return { 3 | restrict:'E', 4 | replace: true, 5 | compile:function(tElm,attr){ 6 | var text = tElm[0].innerHTML.trim().replace(/\</g,'<').replace(/\>/g,'>'); 7 | var codeTextNode = document.createTextNode( text ); 8 | 9 | var lan = ''; 10 | if(attr.lan && attr.lan.length>0) lan='class="language-'+ attr.lan+'"'; 11 | 12 | var tpl = '
'; 13 | tElm.html(tpl); 14 | var codeElm = tElm.find('code'); 15 | 16 | codeElm[0].appendChild(codeTextNode); 17 | return function($scope,elm,attr){ 18 | Prism.highlightElement( codeElm[0],false,function(){}); 19 | } 20 | } 21 | } 22 | }); 23 | app.directive('highlight',function(){ 24 | return function(){ 25 | Prism.highlightAll(false,function(){}); 26 | } 27 | }) 28 | 29 | app.directive('uaDemoLoaders',['$uaLoader',function($uaLoader){ 30 | return function($scope,elm,attrs){ 31 | var circleContainer = document.getElementById('ua-loader-stroke'); 32 | var circleLoader = $uaLoader({ 33 | container: circleContainer, 34 | }); 35 | 36 | // var liquidsquare = $uaLoader({ 37 | // container: document.getElementById('ua-loader-liquidsquare'), 38 | // theme:'liquidSquare', 39 | // }); 40 | 41 | var fourdots = $uaLoader({ 42 | container: document.getElementById('ua-loader-fourdots'), 43 | theme: 'fourdots' 44 | }); 45 | 46 | var bokeh = $uaLoader({ 47 | container: document.getElementById('ua-loader-bokeh'), 48 | theme: 'bokeh' 49 | }); 50 | 51 | var kiri = $uaLoader({ 52 | container: document.getElementById('ua-loader-kiri'), 53 | theme: 'kiri' 54 | }); 55 | 56 | var sail = $uaLoader({ 57 | container: document.getElementById('ua-loader-sail'), 58 | theme: 'sail' 59 | }); 60 | 61 | var breath = $uaLoader({ 62 | container: document.getElementById('ua-loader-breath'), 63 | theme: 'breath' 64 | }); 65 | var flipDot = $uaLoader({ 66 | container: document.getElementById('ua-loader-flipdot'), 67 | theme: 'flipDot' 68 | }); 69 | var squarePuls = $uaLoader({ 70 | container: document.getElementById('ua-loader-squarepuls'), 71 | theme: 'squarePuls' 72 | }); 73 | var wave = $uaLoader({ 74 | container: document.getElementById('ua-loader-wave'), 75 | theme: 'wave' 76 | }); 77 | var orbit = $uaLoader({ 78 | container: document.getElementById('ua-loader-orbit'), 79 | theme: 'orbit' 80 | }); 81 | } 82 | }]) -------------------------------------------------------------------------------- /doc/app/partials/404.html: -------------------------------------------------------------------------------- 1 |
2 |

Will be available soon

3 |

This component / service is under development......

4 | 5 |
-------------------------------------------------------------------------------- /doc/app/partials/component.html: -------------------------------------------------------------------------------- 1 |
2 |

{{comCtrl.component}}

3 | 4 |
-------------------------------------------------------------------------------- /doc/app/partials/home.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Angular-UI-Awesome

4 |

a collection of awesome ui directives for your AngularJS app

5 | 6 |
    7 | 8 |
  • 9 | 10 |
    • 11 |
  • 12 | 13 |
    • 14 |
  • 15 | 16 |
    • 17 |
18 |
19 |



20 |
21 |

Install

22 | 23 | <link rel="stylesheet" href="path_to/angular-ui-awesome.js"> 24 | <script src="path_to/angular.js"></script> 25 | <script src="path_to/angular-ui-awesome.js"></script> 26 | 27 | 28 |

Custom Build

29 |

working in progress......

30 |
31 |
-------------------------------------------------------------------------------- /doc/app/rootCtrl.js: -------------------------------------------------------------------------------- 1 | app.controller('rootCtrl',['$scope','$q',function($scope,$q){ 2 | var rootCtrl = this; 3 | 4 | var $viewContainer = null,isAnimating = true,isRouteSuccess = false; 5 | $scope.$root.$on('$routeChangeStart',function(e,current,prev){ 6 | // do route change animation: 7 | if(!$viewContainer) $viewContainer = document.getElementById('ua-doc-main'); 8 | $viewContainer.classList.add('hidding'); 9 | 10 | // create our promise 11 | var defered = $q.defer(); 12 | if(!current.resolve) current.resolve = {}; 13 | current.resolve.aniDelay = function(){ 14 | return defered.promise; 15 | }; 16 | 17 | setTimeout(function(){ 18 | isAnimating = false; 19 | defered.resolve('done'); 20 | checkRouteAnimation(); 21 | },300); 22 | 23 | return defered.promise; 24 | }) 25 | 26 | $scope.$root.$on('$routeChangeSuccess',function(e,current){ 27 | // change page title 28 | if( current.$$route && current.$$route.title) 29 | document.title = current.$$route.title + ' - Angular-UI-Awesome'; 30 | 31 | isRouteSuccess = true; 32 | checkRouteAnimation(); 33 | }); 34 | 35 | function checkRouteAnimation(){ 36 | if(!isAnimating && isRouteSuccess ){ 37 | // finish route change animation 38 | $viewContainer.classList.remove('hidding'); 39 | // reset 40 | isRouteSuccess = false; 41 | isAnimating = true; 42 | } 43 | } 44 | 45 | }]); 46 | 47 | app.controller('navCtrl',['$scope','$location',function($scope,$location){ 48 | var navCtrl = this; 49 | this.ui = {}; 50 | 51 | this.components = [ 52 | 'words', 53 | 'toggle', 54 | 'link', 55 | 'loader', 56 | 'button', 57 | 'inputBox', 58 | 'notify', 59 | 'modal', 60 | 'dropdown', 61 | 'date-picker', 62 | 'slider', 63 | 'checkbox', 64 | 'radioButton', 65 | 'pageTransition', 66 | 67 | ]; 68 | 69 | this.services = [ 70 | '$uaNotify', 71 | '$uaModal', 72 | '$uaSideOverlay', 73 | ]; 74 | 75 | $scope.$root.$on('$routeChangeSuccess',function(e,route){ 76 | if(route.params.component ){ 77 | navCtrl.ui.selectedComp = route.params.component; 78 | } 79 | }); 80 | 81 | // this.ui.switchComp = function(comp){ 82 | 83 | // } 84 | 85 | }]); -------------------------------------------------------------------------------- /doc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | angular-ui-awesome 11 | 12 | 13 | 14 | 37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /doc/lib/prism/prism.default.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+go&plugins=line-numbers+show-language */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | text-shadow: 0 1px white; 12 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 32 | text-shadow: none; 33 | background: #b3d4fc; 34 | } 35 | 36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 37 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 38 | text-shadow: none; 39 | background: #b3d4fc; 40 | } 41 | 42 | @media print { 43 | code[class*="language-"], 44 | pre[class*="language-"] { 45 | text-shadow: none; 46 | } 47 | } 48 | 49 | /* Code blocks */ 50 | pre[class*="language-"] { 51 | padding: 1em; 52 | margin: .5em 0; 53 | overflow: auto; 54 | } 55 | 56 | :not(pre) > code[class*="language-"], 57 | pre[class*="language-"] { 58 | background: #f5f2f0; 59 | } 60 | 61 | /* Inline code */ 62 | :not(pre) > code[class*="language-"] { 63 | padding: .1em; 64 | border-radius: .3em; 65 | } 66 | 67 | .token.comment, 68 | .token.prolog, 69 | .token.doctype, 70 | .token.cdata { 71 | color: slategray; 72 | } 73 | 74 | .token.punctuation { 75 | color: #999; 76 | } 77 | 78 | .namespace { 79 | opacity: .7; 80 | } 81 | 82 | .token.property, 83 | .token.tag, 84 | .token.boolean, 85 | .token.number, 86 | .token.constant, 87 | .token.symbol, 88 | .token.deleted { 89 | color: #905; 90 | } 91 | 92 | .token.selector, 93 | .token.attr-name, 94 | .token.string, 95 | .token.char, 96 | .token.builtin, 97 | .token.inserted { 98 | color: #690; 99 | } 100 | 101 | .token.operator, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .style .token.string { 106 | color: #a67f59; 107 | background: hsla(0, 0%, 100%, .5); 108 | } 109 | 110 | .token.atrule, 111 | .token.attr-value, 112 | .token.keyword { 113 | color: #07a; 114 | } 115 | 116 | .token.function { 117 | color: #DD4A68; 118 | } 119 | 120 | .token.regex, 121 | .token.important, 122 | .token.variable { 123 | color: #e90; 124 | } 125 | 126 | .token.important, 127 | .token.bold { 128 | font-weight: bold; 129 | } 130 | .token.italic { 131 | font-style: italic; 132 | } 133 | 134 | .token.entity { 135 | cursor: help; 136 | } 137 | 138 | pre.line-numbers { 139 | position: relative; 140 | padding-left: 3.8em; 141 | counter-reset: linenumber; 142 | } 143 | 144 | pre.line-numbers > code { 145 | position: relative; 146 | } 147 | 148 | .line-numbers .line-numbers-rows { 149 | position: absolute; 150 | pointer-events: none; 151 | top: 0; 152 | font-size: 100%; 153 | left: -3.8em; 154 | width: 3em; /* works for line-numbers below 1000 lines */ 155 | letter-spacing: -1px; 156 | border-right: 1px solid #999; 157 | 158 | -webkit-user-select: none; 159 | -moz-user-select: none; 160 | -ms-user-select: none; 161 | user-select: none; 162 | 163 | } 164 | 165 | .line-numbers-rows > span { 166 | pointer-events: none; 167 | display: block; 168 | counter-increment: linenumber; 169 | } 170 | 171 | .line-numbers-rows > span:before { 172 | content: counter(linenumber); 173 | color: #999; 174 | display: block; 175 | padding-right: 0.8em; 176 | text-align: right; 177 | } 178 | pre[class*='language-'] { 179 | position: relative; 180 | } 181 | pre[class*='language-'] > code[data-language] { 182 | overflow: scroll; 183 | max-height: 28em; 184 | display: block; 185 | } 186 | pre[class*='language-'] > code[data-language]::before { 187 | content: attr(data-language); 188 | color: black; 189 | background-color: #CFCFCF; 190 | display: inline-block; 191 | position: absolute; 192 | top: 0; 193 | right: 0; 194 | font-size: 0.9em; 195 | border-radius: 0 0 0 5px; 196 | padding: 0 0.5em; 197 | text-shadow: none; 198 | } 199 | -------------------------------------------------------------------------------- /doc/lib/prism/prism.min.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+go&plugins=line-numbers+show-language */ 2 | self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var s="";for(var o in i.attributes)s+=o+'="'+(i.attributes[o]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+s+">"+i.content+""},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((?:(["'])(\\\n|\\?.)*?\1|.*?)\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,string:/("|')(\\\n|\\?.)*?\1/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css},alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/gi,inside:{"attr-name":{pattern:/^\s*style/gi,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/gi,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));; 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\\n|\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|-?Infinity)\b/g,"function":/(?!\d)[a-z0-9_$]+(?=\()/gi}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});; 7 | Prism.languages.go=Prism.languages.extend("clike",{keyword:/\b(break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/g,builtin:/\b(bool|byte|complex(64|128)|error|float(32|64)|rune|string|u?int(8|16|32|64|)|uintptr|append|cap|close|complex|copy|delete|imag|len|make|new|panic|print(ln)?|real|recover)\b/g,"boolean":/\b(_|iota|nil|true|false)\b/g,operator:/([(){}\[\]]|[*\/%^!]=?|\+[=+]?|-[>=-]?|\|[=|]?|>[=>]?|<(<|[=-])?|==?|&(&|=|^=?)?|\.(\.\.)?|[,;]|:=?)/g,number:/\b(-?(0x[a-f\d]+|(\d+\.?\d*|\.\d+)(e[-+]?\d+)?)i?)\b/gi,string:/("|'|`)(\\?.|\r|\n)*?\1/g}),delete Prism.languages.go["class-name"];; 8 | Prism.hooks.add("after-highlight",function(e){var n=e.element.parentNode;if(n&&/pre/i.test(n.nodeName)&&-1!==n.className.indexOf("line-numbers")){var t,a=1+e.code.split("\n").length;lines=new Array(a),lines=lines.join(""),t=document.createElement("span"),t.className="line-numbers-rows",t.innerHTML=lines,n.hasAttribute("data-start")&&(n.style.counterReset="linenumber "+(parseInt(n.getAttribute("data-start"),10)-1)),e.element.appendChild(t)}});; 9 | !function(){if(self.Prism){var a={csharp:"C#",cpp:"C++"};Prism.hooks.add("before-highlight",function(e){var t=a[e.language]||e.language;e.element.setAttribute("data-language",t)})}}();; -------------------------------------------------------------------------------- /doc/lib/prism/prism.okaidia.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+go&plugins=line-numbers+show-language */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | text-shadow: 0 1px white; 12 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 32 | text-shadow: none; 33 | background: #b3d4fc; 34 | } 35 | 36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 37 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 38 | text-shadow: none; 39 | background: #b3d4fc; 40 | } 41 | 42 | @media print { 43 | code[class*="language-"], 44 | pre[class*="language-"] { 45 | text-shadow: none; 46 | } 47 | } 48 | 49 | /* Code blocks */ 50 | pre[class*="language-"] { 51 | padding: 1em; 52 | margin: .5em 0; 53 | overflow: auto; 54 | } 55 | 56 | :not(pre) > code[class*="language-"], 57 | pre[class*="language-"] { 58 | background: #f5f2f0; 59 | } 60 | 61 | /* Inline code */ 62 | :not(pre) > code[class*="language-"] { 63 | padding: .1em; 64 | border-radius: .3em; 65 | } 66 | 67 | .token.comment, 68 | .token.prolog, 69 | .token.doctype, 70 | .token.cdata { 71 | color: slategray; 72 | } 73 | 74 | .token.punctuation { 75 | color: #999; 76 | } 77 | 78 | .namespace { 79 | opacity: .7; 80 | } 81 | 82 | .token.property, 83 | .token.tag, 84 | .token.boolean, 85 | .token.number, 86 | .token.constant, 87 | .token.symbol, 88 | .token.deleted { 89 | color: #905; 90 | } 91 | 92 | .token.selector, 93 | .token.attr-name, 94 | .token.string, 95 | .token.char, 96 | .token.builtin, 97 | .token.inserted { 98 | color: #690; 99 | } 100 | 101 | .token.operator, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .style .token.string { 106 | color: #a67f59; 107 | background: hsla(0, 0%, 100%, .5); 108 | } 109 | 110 | .token.atrule, 111 | .token.attr-value, 112 | .token.keyword { 113 | color: #07a; 114 | } 115 | 116 | .token.function { 117 | color: #DD4A68; 118 | } 119 | 120 | .token.regex, 121 | .token.important, 122 | .token.variable { 123 | color: #e90; 124 | } 125 | 126 | .token.important, 127 | .token.bold { 128 | font-weight: bold; 129 | } 130 | .token.italic { 131 | font-style: italic; 132 | } 133 | 134 | .token.entity { 135 | cursor: help; 136 | } 137 | 138 | pre.line-numbers { 139 | position: relative; 140 | padding-left: 3.8em; 141 | counter-reset: linenumber; 142 | } 143 | 144 | pre.line-numbers > code { 145 | position: relative; 146 | } 147 | 148 | .line-numbers .line-numbers-rows { 149 | position: absolute; 150 | pointer-events: none; 151 | top: 0; 152 | font-size: 100%; 153 | left: -3.8em; 154 | width: 3em; /* works for line-numbers below 1000 lines */ 155 | letter-spacing: -1px; 156 | border-right: 1px solid #999; 157 | 158 | -webkit-user-select: none; 159 | -moz-user-select: none; 160 | -ms-user-select: none; 161 | user-select: none; 162 | 163 | } 164 | 165 | .line-numbers-rows > span { 166 | pointer-events: none; 167 | display: block; 168 | counter-increment: linenumber; 169 | } 170 | 171 | .line-numbers-rows > span:before { 172 | content: counter(linenumber); 173 | color: #999; 174 | display: block; 175 | padding-right: 0.8em; 176 | text-align: right; 177 | } 178 | pre[class*='language-'] { 179 | position: relative; 180 | } 181 | pre[class*='language-'] > code[data-language] { 182 | overflow: scroll; 183 | max-height: 28em; 184 | display: block; 185 | } 186 | pre[class*='language-'] > code[data-language]::before { 187 | content: attr(data-language); 188 | color: black; 189 | background-color: #CFCFCF; 190 | display: inline-block; 191 | position: absolute; 192 | top: 0; 193 | right: 0; 194 | font-size: 0.9em; 195 | border-radius: 0 0 0 5px; 196 | padding: 0 0.5em; 197 | text-shadow: none; 198 | } -------------------------------------------------------------------------------- /doc/scss/_layout.scss: -------------------------------------------------------------------------------- 1 | html,body{ 2 | height:100%; 3 | font-family: Lato,Helvetica Neue,"Hiragino Sans GB","Microsoft YaHei","微软雅黑","STHeiti","WenQuanYi Micro Hei",SimSun,sans-serif,Arial; 4 | } 5 | 6 | h1,h2,h3,h4,h5,*{ 7 | // really thin 8 | font-weight: 200; 9 | } 10 | 11 | ul,li{ 12 | list-style: none; 13 | margin: 0; 14 | padding:0; 15 | } 16 | 17 | a{ 18 | text-decoration: none; 19 | color: $c-main-light; 20 | transition: color 0.3s ease-out; 21 | &:hover,&:focus,.active > &{ 22 | outline: none; 23 | // border:none; 24 | color:inherit; 25 | } 26 | } 27 | // ------------------ initial load animation ------ 28 | body{ 29 | transition: opacity 0.5s; 30 | } 31 | .hide{ 32 | opacity: 0; 33 | visibility: hidden; 34 | } 35 | 36 | // doc styles here: 37 | #ua-doc-side-nav{ 38 | width:300px; 39 | height: 100%; 40 | // overflow-y:scroll; 41 | // overflow-x:hidden; 42 | border-right: $border; 43 | padding-left: 2em; 44 | h2{font-size: 2em;margin-bottom: 0.2em;} 45 | .ua-side-nav-list{ 46 | font-size: 1.2em; 47 | li{ 48 | transition: font-size 0.2s ease-out; 49 | padding: 0.1em 0; 50 | &:hover,&.active{ 51 | font-size:1.5em; 52 | } 53 | } 54 | } 55 | .ua-side-nav-title{ 56 | cursor: pointer; 57 | } 58 | } 59 | 60 | #ua-doc-main{ 61 | position: relative; 62 | height:100%; 63 | visibility: visible; 64 | opacity: 1; 65 | transition: opacity 0.3s ease, visibility 0s; 66 | &.hidding{ 67 | opacity: 0; 68 | visibility: hidden; 69 | transition: opacity 0.3s ease, visibility 0s 0.4s; 70 | } 71 | &>div{ 72 | padding: 1em 1.5em; 73 | overflow-y: auto; 74 | width:100%; 75 | height:100%; 76 | } 77 | } -------------------------------------------------------------------------------- /doc/scss/home.scss: -------------------------------------------------------------------------------- 1 | #ua-doc-page-home{ 2 | header{ 3 | text-align: center; 4 | padding-top: 5em; 5 | h1{font-size: 2.5em;} 6 | p{font-size: 1.5em; 7 | color:$c-main-light; 8 | } 9 | } 10 | .gh-btns{ 11 | li{ 12 | display:inline-block; 13 | iframe{ 14 | width:140px; 15 | } 16 | } 17 | } 18 | .container { 19 | max-width: 960px; 20 | margin: 0 auto; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /doc/scss/main.scss: -------------------------------------------------------------------------------- 1 | // import ui awesome 2 | @import '../../src/_scss/angular-ui-awesome.scss'; 3 | 4 | 5 | $border: solid 1px rgba(0,0,0,0.1); 6 | $c-main: #000; 7 | $c-main-light: #777; 8 | $c-main-bright: #aaa; 9 | 10 | 11 | @import '_layout.scss'; 12 | 13 | @import 'home.scss'; 14 | 15 | -------------------------------------------------------------------------------- /doc/server.go: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | */ 4 | package main 5 | 6 | import ( 7 | "flag" 8 | "fmt" 9 | "log" 10 | "net/http" 11 | ) 12 | 13 | func main() { 14 | // commandline flag 15 | port := flag.Int("port", 8080, "port serves on") 16 | dir := flag.String("directory", "./", "directory of your files") 17 | flag.Parse() 18 | 19 | // handle all requests by serving a file of the same name 20 | fs := http.Dir(*dir) 21 | handler := http.FileServer(fs) 22 | http.Handle("/", handler) 23 | 24 | log.Printf("Running on port %d\n", *port) 25 | 26 | addr := fmt.Sprintf("localhost:%d", *port) 27 | err := http.ListenAndServe(addr, nil) 28 | fmt.Println(err.Error()) 29 | } 30 | -------------------------------------------------------------------------------- /doc/server.js: -------------------------------------------------------------------------------- 1 | var http = require('http'), 2 | url = require('url'), 3 | path = require('path'), 4 | fs = require('fs'); 5 | 6 | var port = 8080; 7 | 8 | http.createServer(function(req,res){ 9 | 10 | req.parsed_url = url.parse(req.url,true); 11 | var core_url = req.parsed_url.pathname == '/'?'index.html': req.parsed_url.pathname.substr(1); 12 | 13 | var rs = fs.createReadStream( core_url ); 14 | var ct = getContentType(core_url); 15 | 16 | rs.on('error',function(){ 17 | // res.writeHead(404,{'Content-Type':'text/plain'}); 18 | // res.end('not found'); 19 | rs = fs.createReadStream( 'index.html' ); 20 | res.writeHead(200,{'Content-Type':'text/html'}); 21 | rs.pipe(res); 22 | }) 23 | 24 | res.writeHead(200,{'Content-Type':ct}); 25 | 26 | rs.pipe(res); 27 | 28 | console.log(""+core_url+''); 29 | 30 | }).listen(port); 31 | console.log('dev file server listening on port: '+port); 32 | 33 | function getContentType(filename){ 34 | var ext = path.extname(filename).toLowerCase(); 35 | 36 | switch(ext){ 37 | case '.jpg': case '.jpeg': 38 | return 'image/jpeg' 39 | case '.png': 40 | return 'image/png'; 41 | case '.gif': 42 | return 'image/gif'; 43 | case '.html': 44 | return 'text/html'; 45 | case '.js': 46 | return 'text/javascript'; 47 | case '.css' : 48 | return 'text/css'; 49 | default: 50 | return 'text/plain'; 51 | 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | gutil = require('gulp-util'), 3 | livereload = require('gulp-livereload'), 4 | watch = require('gulp-watch'); 5 | 6 | 7 | // js file 8 | var concat = require('gulp-concat'), 9 | babel = require('gulp-babel'), 10 | uglify = require('gulp-uglify'); 11 | 12 | // angularjs 13 | var templateCache = require('gulp-angular-templatecache'); 14 | var htmlify = require('gulp-angular-htmlify'); 15 | var minifyHtml = require("gulp-minify-html"); 16 | var gettext = require('gulp-angular-gettext'); 17 | var ngAnnotate = require('gulp-ng-annotate'); 18 | 19 | // less->css 20 | var sass = require('gulp-sass'), 21 | autoprefix = require('gulp-autoprefixer'), 22 | minifyCSS = require('gulp-minify-css'); 23 | 24 | // html 25 | var minifyHtml = require('gulp-minify-html'); 26 | 27 | 28 | 29 | var paths = { 30 | js: './src/**/*.js', 31 | sass: './src/**/*.scss', 32 | html: './src/**/*.html', 33 | plugins:[], 34 | }; 35 | 36 | // ---------------------------------------------------- sass 37 | gulp.task('sass-doc', function() { 38 | // console.log('-----build main.scss'); 39 | gulp.src('./doc/scss/main.scss') 40 | .pipe(sass()) 41 | .on( "error", handleError) 42 | .pipe(autoprefix('last 2 versions')) 43 | .pipe(minifyCSS()) 44 | .pipe(gulp.dest('./doc/css/')) 45 | .pipe(livereload()); 46 | }); 47 | gulp.task('sass-build', function() { 48 | gulp.src('./src/_scss/angular-ui-awesome.scss') 49 | .pipe(sass()) 50 | .pipe(autoprefix('last 2 versions')) 51 | .pipe(minifyCSS()) 52 | .pipe(gulp.dest('./build/')) 53 | }); 54 | 55 | gulp.task('sass-watch',function() { 56 | watch({glob: paths.sass}, ['sass-doc'] ) 57 | }); 58 | 59 | // ---------------------------------------------------- js 60 | gulp.task('js-build', function() { 61 | gulp.src(paths.js) 62 | .pipe(ngAnnotate() ) 63 | .pipe(babel()) 64 | .pipe(concat('angular-ui-awesome.js')) 65 | .pipe( uglify({ 66 | compress:true, 67 | mangle:false, 68 | }) ) 69 | .pipe(gulp.dest('./build/')) 70 | }); 71 | 72 | gulp.task('js-doc', function() { 73 | gulp.src(paths.js) 74 | .pipe(babel()) 75 | .on( "error", handleError) 76 | .pipe(concat('angular-ui-awesome.js')) 77 | .pipe(gulp.dest('./doc/app/')) 78 | }); 79 | 80 | // gulp.task('join-modules', function() { 81 | // gulp.src(paths.plugins) 82 | // .pipe(concat('modules.js')) 83 | // .pipe(uglify()) 84 | // .pipe(gulp.dest('./public/build/')) 85 | // }); 86 | 87 | // ============ template cache =====>>>>>>>>>>>>>>>>>>>>>>> 88 | gulp.task('tplCache', function () { 89 | gulp.src(paths.html) 90 | .pipe( htmlify() ) 91 | .pipe(minifyHtml({ 92 | empty: true, 93 | spare: true, 94 | quotes: true 95 | })) 96 | .pipe(templateCache({ 97 | standalone:true, 98 | module:'ngUiAwesomeTemp', 99 | root:'build/' 100 | }) ) 101 | .pipe(gulp.dest('./build/')); 102 | }); 103 | 104 | // gulp.task('html', function() { 105 | // gulp.src(paths.html) 106 | // .pipe( htmlify() ) 107 | // .pipe(minifyHtml()) 108 | // .pipe(gulp.dest('./public/build/html/')); 109 | // }); 110 | 111 | 112 | // --------------------------------------------------------------watch 113 | gulp.task('watch', function() { 114 | livereload.listen(); 115 | gulp.watch([paths.html,'./doc/app/**/*.html']).on('change', livereload.changed); 116 | gulp.watch(paths.js,['js-doc']) 117 | // gulp.watch(paths.js ).on('change', livereload.changed); 118 | 119 | gulp.watch('./doc/app/**/*.js').on('change', livereload.changed); 120 | gulp.watch('./doc/scss/**/*.scss', ['sass-doc']); 121 | gulp.watch(paths.sass, ['sass-doc']); 122 | }); 123 | 124 | // ---------------------------------------- production ------------- 125 | gulp.task('default', ['watch']); 126 | 127 | gulp.task('build', ['tplCache','sass-build','js-build']); // 'join-modules', 128 | 129 | 130 | // --------- utils ------------ 131 | function handleError(err) { 132 | console.log(err.toString()); 133 | this.emit('end'); 134 | } 135 | 136 | 137 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ui-awesome", 3 | "description": " ", 4 | "version": "0.0.1", 5 | "private": true, 6 | "author": "Eisneim ", 7 | "contributors": [], 8 | "engines": { 9 | "node": "0.10.x", 10 | "npm": "1.3.x" 11 | }, 12 | "scripts": { 13 | "build": "gulp build", 14 | "watch": "gulp watch", 15 | "postinstall": "node node_modules/bower/bin/bower install" 16 | }, 17 | "dependencies": { 18 | "bower": "^1.3.3" 19 | }, 20 | "devDependencies": { 21 | "gulp": "~3.5.5", 22 | "gulp-angular-gettext": "~0.2.0", 23 | "gulp-angular-htmlify": "^0.2.2", 24 | "gulp-angular-templatecache": "~1.1.0", 25 | "gulp-autoprefixer": "0.0.7", 26 | "gulp-babel": "^5.1.0", 27 | "gulp-concat": "~2.1.7", 28 | "gulp-imagemin": "^0.6.1", 29 | "gulp-include": "^0.2.3", 30 | "gulp-livereload": "^2.1.0", 31 | "gulp-minify-css": "^0.3.4", 32 | "gulp-minify-html": "~0.1.1", 33 | "gulp-ng-annotate": "^0.2.0", 34 | "gulp-sass": "^1.3.3", 35 | "gulp-uglify": "~0.2.1", 36 | "gulp-util": "~2.2.14", 37 | "gulp-wait": "0.0.2", 38 | "gulp-watch": "^0.6.6", 39 | "node-sass": "^2.1.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eisneim/angular-ui-awesome/0206c01eceb531f4db9902e6d6080d823f7a35f3/snapshot.png -------------------------------------------------------------------------------- /src/_scss/_color_palette.scss: -------------------------------------------------------------------------------- 1 | $color-red: ( 2 | '50': #ffebee, 3 | '100': #ffcdd2, 4 | '200': #ef9a9a, 5 | '300': #e57373, 6 | '400': #ef5350, 7 | '500': #f44336, 8 | '600': #e53935, 9 | '700': #d32f2f, 10 | '800': #c62828, 11 | '900': #b71c1c, 12 | 'A100': #ff8a80, 13 | 'A200': #ff5252, 14 | 'A400': #ff1744, 15 | 'A700': #d50000 16 | ); 17 | 18 | // Pink 19 | // ---------------------------- 20 | 21 | $color-pink: ( 22 | '50': #fce4ec, 23 | '100': #f8bbd0, 24 | '200': #f48fb1, 25 | '300': #f06292, 26 | '400': #ec407a, 27 | '500': #e91e63, 28 | '600': #d81b60, 29 | '700': #c2185b, 30 | '800': #ad1457, 31 | '900': #880E4F, 32 | 'A100': #ff80ab, 33 | 'A200': #ff4081, 34 | 'A400': #f50057, 35 | 'A700': #c51162, 36 | ); 37 | 38 | // Purple 39 | // ---------------------------- 40 | 41 | $color-purple: ( 42 | '50': #f3e5f5, 43 | '100': #e1bee7, 44 | '200': #ce93d8, 45 | '300': #ba68c8, 46 | '400': #ab47bc, 47 | '500': #9c27b0, 48 | '600': #8e24aa, 49 | '700': #7b1fa2, 50 | '800': #6a1b9a, 51 | '900': #4a148c, 52 | 'A100': #ea80fc, 53 | 'A200': #e040fb, 54 | 'A400': #d500f9, 55 | 'A700': #aa00ff 56 | ); 57 | 58 | 59 | // Deep Purple 60 | // ---------------------------- 61 | 62 | $color-deep-purple: ( 63 | '50': #ede7f6, 64 | '100': #d1c4e9, 65 | '200': #b39ddb, 66 | '300': #9575cd, 67 | '400': #7e57c2, 68 | '500': #673ab7, 69 | '600': #5e35b1, 70 | '700': #512da8, 71 | '800': #4527a0, 72 | '900': #311b92, 73 | 'A100': #b388ff, 74 | 'A200': #7c4dff, 75 | 'A400': #651fff, 76 | 'A700': #6200ea 77 | ); 78 | 79 | // Indigo 80 | // ---------------------------- 81 | 82 | $color-indigo: ( 83 | '50': #e8eaf6, 84 | '100': #c5cae9, 85 | '200': #9fa8da, 86 | '300': #7986cb, 87 | '400': #5c6bc0, 88 | '500': #3f51b5, 89 | '600': #3949ab, 90 | '700': #303f9f, 91 | '800': #283593, 92 | '900': #1a237e, 93 | 'A100': #8c9eff, 94 | 'A200': #536dfe, 95 | 'A400': #3d5afe, 96 | 'A700': #304ffe 97 | ); 98 | 99 | 100 | // Blue 101 | // ---------------------------- 102 | 103 | $color-blue: ( 104 | '50': #e3f2fd, 105 | '100': #bbdefb, 106 | '200': #90caf9, 107 | '300': #64b5f6, 108 | '400': #42a5f5, 109 | '500': #2196f3, 110 | '600': #1e88e5, 111 | '700': #1976d2, 112 | '800': #1565c0, 113 | '900': #0d47a1, 114 | 'A100': #82b1ff, 115 | 'A200': #448aff, 116 | 'A400': #2979ff, 117 | 'A700': #2962ff 118 | ); 119 | 120 | 121 | // Light Blue 122 | // ---------------------------- 123 | 124 | $color-light-blue: ( 125 | '50': #e1f5fe, 126 | '100': #b3e5fc, 127 | '200': #81d4fa, 128 | '300': #4fc3f7, 129 | '400': #29b6f6, 130 | '500': #03a9f4, 131 | '600': #039be5, 132 | '700': #0288d1, 133 | '800': #0277bd, 134 | '900': #01579b, 135 | 'A100': #80d8ff, 136 | 'A200': #40c4ff, 137 | 'A400': #00b0ff, 138 | 'A700': #0091ea 139 | ); 140 | 141 | 142 | // Cyan 143 | // ---------------------------- 144 | 145 | $color-cyan: ( 146 | '50': #e0f7fa, 147 | '100': #b2ebf2, 148 | '200': #80deea, 149 | '300': #4dd0e1, 150 | '400': #26c6da, 151 | '500': #00bcd4, 152 | '600': #00acc1, 153 | '700': #0097a7, 154 | '800': #00838f, 155 | '900': #006064, 156 | 'A100': #84ffff, 157 | 'A200': #18ffff, 158 | 'A400': #00e5ff, 159 | 'A700': #00b8d4 160 | ); 161 | 162 | 163 | // Teal 164 | // ---------------------------- 165 | 166 | $color-teal: ( 167 | '50': #e0f2f1, 168 | '100': #b2dfdb, 169 | '200': #80cbc4, 170 | '300': #4db6ac, 171 | '400': #26a69a, 172 | '500': #009688, 173 | '600': #00897b, 174 | '700': #00796b, 175 | '800': #00695c, 176 | '900': #004d40, 177 | 'A100': #a7ffeb, 178 | 'A200': #64ffda, 179 | 'A400': #1de9b6, 180 | 'A700': #00bfa5 181 | ); 182 | 183 | 184 | // Green 185 | // ---------------------------- 186 | 187 | $color-green: ( 188 | '50': #e8f5e9, 189 | '100': #c8e6c9, 190 | '200': #a5d6a7, 191 | '300': #81c784, 192 | '400': #66bb6a, 193 | '500': #4caf50, 194 | '600': #43a047, 195 | '700': #388e3c, 196 | '800': #2e7d32, 197 | '900': #1b5e20, 198 | 'A100': #b9f6ca, 199 | 'A200': #69f0ae, 200 | 'A400': #00e676, 201 | 'A700': #00c853 202 | ); 203 | 204 | 205 | // Light Green 206 | // ---------------------------- 207 | 208 | $color-light-green: ( 209 | '50': #f1f8e9, 210 | '100': #dcedc8, 211 | '200': #c5e1a5, 212 | '300': #aed581, 213 | '400': #9ccc65, 214 | '500': #8bc34a, 215 | '600': #7cb342, 216 | '700': #689f38, 217 | '800': #558b2f, 218 | '900': #33691e, 219 | 'A100': #ccff90, 220 | 'A200': #b2ff59, 221 | 'A400': #76ff03, 222 | 'A700': #64dd17 223 | ); 224 | 225 | 226 | // Lime 227 | // ---------------------------- 228 | 229 | $color-lime: ( 230 | '50': #f9fbe7, 231 | '100': #f0f4c3, 232 | '200': #e6ee9c, 233 | '300': #dce775, 234 | '400': #d4e157, 235 | '500': #cddc39, 236 | '600': #c0ca33, 237 | '700': #afb42b, 238 | '800': #9e9d24, 239 | '900': #827717, 240 | 'A100': #f4ff81, 241 | 'A200': #eeff41, 242 | 'A400': #c6ff00, 243 | 'A700': #aeea00 244 | ); 245 | 246 | 247 | // Yellow 248 | // ---------------------------- 249 | $color-yellow: ( 250 | '50': #fffde7, 251 | '100': #fff9c4, 252 | '200': #fff59d, 253 | '300': #fff176, 254 | '400': #ffee58, 255 | '500': #ffeb3b, 256 | '600': #fdd835, 257 | '700': #fbc02d, 258 | '800': #f9a825, 259 | '900': #f57f17, 260 | 'A100': #ffff8d, 261 | 'A200': #ffff00, 262 | 'A400': #ffea00, 263 | 'A700': #ffd600 264 | ); 265 | 266 | 267 | // Amber 268 | // ---------------------------- 269 | 270 | $color-amber: ( 271 | '50': #fff8e1, 272 | '100': #ffecb3, 273 | '200': #ffe082, 274 | '300': #ffd54f, 275 | '400': #ffca28, 276 | '500': #ffc107, 277 | '600': #ffb300, 278 | '700': #ffa000, 279 | '800': #ff8f00, 280 | '900': #ff6f00, 281 | 'A100': #ffe57f, 282 | 'A200': #ffd740, 283 | 'A400': #ffc400, 284 | 'A700': #ffab00 285 | ); 286 | 287 | 288 | // Orange 289 | // ---------------------------- 290 | 291 | $color-orange: ( 292 | '50': #fff3e0, 293 | '100': #ffe0b2, 294 | '200': #ffcc80, 295 | '300': #ffb74d, 296 | '400': #ffa726, 297 | '500': #ff9800, 298 | '600': #fb8c00, 299 | '700': #f57c00, 300 | '800': #ef6c00, 301 | '900': #e65100, 302 | 'A100': #ffd180, 303 | 'A200': #ffab40, 304 | 'A400': #ff9100, 305 | 'A700': #ff6d00 306 | ); 307 | 308 | 309 | // Deep Orange 310 | // ---------------------------- 311 | 312 | $color-deep-orange: ( 313 | '50': #fbe9e7, 314 | '100': #ffccbc, 315 | '200': #ffab91, 316 | '300': #ff8a65, 317 | '400': #ff7043, 318 | '500': #ff5722, 319 | '600': #f4511e, 320 | '700': #e64a19, 321 | '800': #d84315, 322 | '900': #bf360c, 323 | 'A100': #ff9e80, 324 | 'A200': #ff6e40, 325 | 'A400': #ff3d00, 326 | 'A700': #dd2c00 327 | ); 328 | 329 | 330 | // Brown 331 | // ---------------------------- 332 | 333 | $color-brown: ( 334 | '50': #efebe9, 335 | '100': #d7ccc8, 336 | '200': #bcaaa4, 337 | '300': #a1887f, 338 | '400': #8d6e63, 339 | '500': #795548, 340 | '600': #6d4c41, 341 | '700': #5d4037, 342 | '800': #4e342e, 343 | '900': #3e2723 344 | ); 345 | 346 | 347 | // Grey 348 | // ---------------------------- 349 | $color-grey: ( 350 | '0': #ffffff, 351 | '50': #fafafa, 352 | '100': #f5f5f5, 353 | '200': #eeeeee, 354 | '300': #e0e0e0, 355 | '400': #bdbdbd, 356 | '500': #9e9e9e, 357 | '600': #757575, 358 | '700': #616161, 359 | '800': #424242, 360 | '900': #212121, 361 | '1000': #000000, 362 | 'A100': #ffffff 363 | ); 364 | 365 | // Blue Grey 366 | // ---------------------------- 367 | $color-blue-grey: ( 368 | '50': #eceff1, 369 | '100': #cfd8dc, 370 | '200': #b0bec5, 371 | '300': #90a4ae, 372 | '400': #78909c, 373 | '500': #607d8b, 374 | '600': #546e7a, 375 | '700': #455a64, 376 | '800': #37474f, 377 | '900': #263238 378 | ); 379 | -------------------------------------------------------------------------------- /src/_scss/_layout.scss: -------------------------------------------------------------------------------- 1 | // breakpoints 2 | 3 | $S: 480px; 4 | $M: 768px; 5 | $L: 1170px; 6 | 7 | // media queries 8 | 9 | @mixin MQ($canvas) { 10 | @if $canvas == S { 11 | @media only screen and (min-width: $S) { @content; } 12 | } 13 | @else if $canvas == M { 14 | @media only screen and (min-width: $M) { @content; } 15 | } 16 | @else if $canvas == L { 17 | @media only screen and (min-width: $L) { @content; } 18 | } 19 | } 20 | 21 | // super light grid - it works with the .cd-container class inside style.scss 22 | 23 | @mixin column($percentage, $float-direction:left) { 24 | width: 100% * $percentage; 25 | float: $float-direction; 26 | } 27 | 28 | -------------------------------------------------------------------------------- /src/_scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // center vertically and/or horizontally an absolute positioned element 2 | 3 | @mixin center($xy:xy) { 4 | @if $xy == xy { 5 | left: 50%; 6 | top: 50%; 7 | bottom: auto; 8 | right: auto; 9 | transform:translateX(-50%) translateY(-50%); 10 | } 11 | @else if $xy == x { 12 | left: 50%; 13 | right: auto; 14 | transform:translateX(-50%); 15 | } 16 | @else if $xy == y { 17 | top: 50%; 18 | bottom: auto; 19 | transform:translateY(-50%); 20 | } 21 | } 22 | 23 | // antialiasing mode font rendering 24 | 25 | @mixin font-smoothing { 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | } 29 | -------------------------------------------------------------------------------- /src/_scss/angular-ui-awesome.scss: -------------------------------------------------------------------------------- 1 | @import 'reset.scss'; 2 | @import '_color_palette.scss'; 3 | @import '_mixins.scss'; 4 | @import '_layout.scss'; 5 | 6 | @import 'common_style.scss'; 7 | @import 'common_animation.scss'; 8 | 9 | @import '../toggle/toggle.scss'; 10 | @import '../loader/loader.scss'; 11 | @import '../loader/loader2.scss'; 12 | @import '../link/link.scss'; 13 | @import '../words/words.scss'; 14 | @import '../button/button.scss'; 15 | @import '../inputbox/inputbox.scss'; 16 | @import '../notify/notify.scss'; -------------------------------------------------------------------------------- /src/_scss/common_animation.scss: -------------------------------------------------------------------------------- 1 | // ----------==== animation 2 | @keyframes fade{ 3 | from{ 4 | opacity: 0; 5 | } 6 | to{ 7 | opacity: 1; 8 | } 9 | } 10 | .fade-in{ 11 | animation:fade .3s ease; 12 | animation-fill-mode: forwards; 13 | } 14 | .fade-out{ 15 | animation:fade .3s ease; 16 | animation-fill-mode: forwards; 17 | animation-direction: reverse; 18 | } 19 | // ---------- 20 | @keyframes sway-up-down { 21 | from{ 22 | transform:translateY(-5px) 23 | } 24 | to{ 25 | transform:translateY(5px) 26 | } 27 | } -------------------------------------------------------------------------------- /src/_scss/common_style.scss: -------------------------------------------------------------------------------- 1 | // ------------ line strip when load in ------------- 2 | .ua-line-loadin{ 3 | position: relative; 4 | &::after{ 5 | content:''; 6 | display: block; 7 | position: absolute; 8 | top: 50%; 9 | // left: 0; 10 | width:0; 11 | // right: 0; 12 | height: 4px; 13 | background: map-get($color-green, '300'); 14 | animation: uac-line-load-in 1s 0.3s ease-out; 15 | } 16 | } 17 | 18 | @keyframes uac-line-load-in { 19 | 0% { 20 | // left: 0; 21 | width:0; 22 | } 23 | 30%{ 24 | // left:0; 25 | width: 100%; 26 | } 27 | 35%{ 28 | // left:0; 29 | width: 100%; 30 | } 31 | 50%{ 32 | // right: 0; 33 | width: 100%; 34 | } 35 | 100% { 36 | right: 0; 37 | width: 0; 38 | } 39 | } -------------------------------------------------------------------------------- /src/_scss/reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | *, *:before, *:after { 6 | -webkit-box-sizing: border-box; 7 | -moz-box-sizing: border-box; 8 | box-sizing: border-box; 9 | } 10 | 11 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} 12 | h1,h2,h3,h4,h5{font-weight: normal;} 13 | // -------------------------- 14 | .clearfix { 15 | &:before, 16 | &:after { 17 | content: " "; /* 1 */ 18 | display: table; /* 2 */ 19 | } 20 | &:after { 21 | clear: both; 22 | } 23 | } 24 | .center { 25 | display: block; 26 | margin-left: auto; 27 | margin-right: auto; 28 | } 29 | .pull-right { 30 | float: right !important; 31 | } 32 | .pull-left { 33 | float: left !important; 34 | } 35 | .text-left{text-align: left !important;} 36 | .text-center{text-align: center !important;} 37 | .text-right{text-align: right !important;} 38 | // ------------------------ 39 | // ------------flex box--------- 40 | .flex-conainer{ 41 | display: flex; 42 | &.flex-row{ 43 | flex-direction: row; 44 | } 45 | &.flex-column{ 46 | flex-direction: column; 47 | } 48 | } 49 | .flex{ 50 | // flex:1 1 auto; 51 | // flex-grow:auto; 52 | flex:1; 53 | // 用下面参数指定自己的位置 54 | // align-self: auto | flex-start | flex-end | center | baseline | stretch; 55 | } 56 | // older version, what i used before, put it here 以防万一 57 | .grid { 58 | /* As of August 2012, only supported in Chrome 21+ */ 59 | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 60 | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 61 | display: -ms-flexbox; /* TWEENER - IE 10 */ 62 | display: -webkit-flex; 63 | display: flex; 64 | min-height: 200px; 65 | } 66 | .fluid { 67 | -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ 68 | -moz-box-flex: 1; /* OLD - Firefox 19- */ 69 | -webkit-flex: 1; /* Chrome */ 70 | -ms-flex: 1; 71 | flex: 1; 72 | } 73 | // ----------------- 74 | // -======================================= center an div ============= 75 | /* This parent can be any width and height */ 76 | .ua-centered-wraper { 77 | text-align: center; 78 | } 79 | /* The ghost, nudged to maintain perfect centering */ 80 | .ua-centered-wraper:before { 81 | content: ''; 82 | display: inline-block; 83 | height: 100%; 84 | vertical-align: middle; 85 | margin-right: -0.25em; /* Adjusts for spacing */ 86 | } 87 | 88 | /* The element to be centered, can 89 | also be of any width and height */ 90 | .ua-centered { 91 | display: inline-block; 92 | vertical-align: middle; 93 | max-width: 95%; 94 | } 95 | -------------------------------------------------------------------------------- /src/_util/utilSvc.js: -------------------------------------------------------------------------------- 1 | ua.factory('uaUtil',[function(){ 2 | var dom = {}; 3 | /** 4 | * in order to calculate top,left value of ripple center , 5 | * @param {[type]} elm [description] 6 | * @return {Node} [description] 7 | */ 8 | dom.findParentScrolled = function (elm){ 9 | var parent = elm.parentNode; 10 | if(parent.isEqualNode(document.body) ) return false; 11 | 12 | var styles = getComputedStyle(parent); 13 | 14 | if( 15 | elm.scrollHeight > parent.clientHeight && 16 | ( styles['overflow']=='scroll'|| styles['overflow-y'] =='scroll'||styles['overflow'] =='auto'||styles['overflow-y'] =='auto' ) 17 | ){ 18 | return parent; 19 | }else{ 20 | return findParentScrolled( parent ); 21 | } 22 | }; 23 | 24 | // ------------------------------ 25 | 26 | var _id = 0; 27 | /** 28 | * generate an id for element 29 | * @param {string} prefix 30 | * @return {string} 31 | */ 32 | function idGen(prefix){ 33 | return (prefix || 'uac-comp-')+ _id++; 34 | } 35 | /** 36 | * dirAttrToString 37 | * @param {object} attr [description] 38 | * @return {string} [description] 39 | */ 40 | function dirAttrToString(attr){ 41 | var attributes = ''; 42 | for(var aa in attr ){ 43 | if(!attr.hasOwnProperty(aa) || ['$attr','$$element'].indexOf(aa)>=0){ 44 | continue; 45 | } 46 | var upperCaseIdx = aa.search(/[A-Z]/); 47 | if( upperCaseIdx >0 ) { 48 | var newAttr = aa.substr(0,upperCaseIdx) + '-'+ aa.substr(upperCaseIdx); 49 | attributes +=( newAttr +'="'+attr[aa]+'" '); 50 | }else{ 51 | attributes += aa+'="'+attr[aa]+'" '; 52 | } 53 | } 54 | return attributes; 55 | } 56 | 57 | return { 58 | dom:dom, 59 | idGen:idGen, 60 | dirAttrToString: dirAttrToString, 61 | } 62 | 63 | }]) -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | /*! 2 | _ _ 3 | /_\ _ __ __ _ _ _| | __ _ _ __ 4 | //_\\| '_ \ / _` | | | | |/ _` | '__| 5 | / _ \ | | | (_| | |_| | | (_| | | 6 | \_/ \_/_| |_|\__, |\__,_|_|\__,_|_| 7 | |___/ 8 | _ 9 | _ _(_) __ ___ _____ ___ ___ _ __ ___ ___ 10 | | | | | |_____ / _` \ \ /\ / / _ \/ __|/ _ \| '_ ` _ \ / _ \ 11 | | |_| | |_____| (_| |\ V V / __/\__ \ (_) | | | | | | __/ 12 | \__,_|_| \__,_| \_/\_/ \___||___/\___/|_| |_| |_|\___| 13 | 14 | * angular-ui-awesome 15 | * 16 | * Copyright(c) 2015 Eisneim Terry 17 | * MIT Licensed 18 | */ 19 | 20 | 'use strict'; 21 | 22 | var ua = angular.module('ngUiAwesome',[]); 23 | 24 | // app.run() -------------------------------------------------------------------------------- /src/button/button.js: -------------------------------------------------------------------------------- 1 | ua.directive('uaButton',['uaUtil',function(uaUtil){ 2 | function linkFunc($scoe,elm,attr){ 3 | var rippleElm = document.createElement('span'); 4 | rippleElm.className = 'uac-button-ripple'; 5 | 6 | var rect = elm[0].getBoundingClientRect(); 7 | 8 | rippleElm.style.height = rippleElm.style.width = Math.max(rect.width, rect.height) + 'px'; 9 | 10 | elm[0].appendChild(rippleElm); 11 | 12 | function clickHandel(e){ 13 | rippleElm.classList.remove('uac-animate'); 14 | rect = elm[0].getBoundingClientRect(); 15 | var top = (e.clientY - rect.top) - rippleElm.offsetHeight / 2 - document.body.scrollTop; 16 | var left = e.clientX - rect.left - rippleElm.offsetWidth / 2 - document.body.scrollLeft; 17 | 18 | // var top = (e.clientY - rect.top) - rippleElm.offsetHeight / 2; 19 | // var left = e.clientX - rect.left - rippleElm.offsetWidth / 2; 20 | 21 | rippleElm.style.top = top + 'px'; 22 | rippleElm.style.left = left +'px'; 23 | 24 | rippleElm.classList.add('uac-animate'); 25 | } 26 | 27 | elm.on('click',clickHandel); 28 | }; 29 | 30 | function stringToNode(string){ 31 | 32 | var div = document.createElement('div'); 33 | div.innerHTML = string; 34 | return div.childNodes; 35 | } 36 | // forEach method, could be shipped as part of an Object Literal/Module 37 | function forEach(array, callback, scope) { 38 | for (var i = 0; i < array.length; i++) { 39 | callback.call(scope, array[i], i ); // passes back stuff we need 40 | } 41 | }; 42 | 43 | 44 | return { 45 | restrict: 'E', 46 | // replace: true, 47 | // scope:{}, 48 | compile:function(tElm,attr){ 49 | var inner = tElm[0].innerHTML; 50 | var tpl; 51 | // add all attributes to it; 52 | if('href' in attr){ 53 | tpl = '__replaceme__'; 54 | }else{ 55 | tpl = '' 56 | } 57 | 58 | var topElm = tpl.match(/^\<.+?\>/); 59 | if(!topElm || !topElm[0]) throw new TypeError('invalid tpl string, it must have a top level element'); 60 | 61 | // attributes 62 | var attributes = ''; 63 | for(var aa in attr ){ 64 | if(!attr.hasOwnProperty(aa) || ['$attr','$$element'].indexOf(aa)>=0){ 65 | continue; 66 | } 67 | // if this attribute already exitst 68 | var attrIndex = topElm[0].indexOf( aa+'="'); 69 | if( attrIndex > -1 ){ 70 | tpl = tpl.replace(aa+'="', aa+'="'+ attr[aa]+ ' '); 71 | }else { 72 | attributes += aa+'="'+attr[aa]+'"'; 73 | } 74 | 75 | } 76 | 77 | // now replace old Node with new nodes 78 | var innerNodes = stringToNode( 79 | tpl.replace('__replaceme__',inner ).replace('__attr__',attributes) 80 | ); 81 | forEach(innerNodes,function(node,index){ 82 | tElm[0].parentNode.insertBefore(node, tElm[0].nextSibling ); 83 | }); 84 | tElm[0].remove(); 85 | return linkFunc; 86 | } 87 | } 88 | }]); 89 | -------------------------------------------------------------------------------- /src/button/button.scss: -------------------------------------------------------------------------------- 1 | .uac-button{ 2 | user-select: none; 3 | position: relative; 4 | outline: none; 5 | border: 0; 6 | padding: 0.5em 1em; 7 | margin: 0 0.2em; 8 | background: transparent; 9 | white-space: nowrap; 10 | text-align: center; 11 | text-transform: uppercase; 12 | font-weight: inherit; 13 | font-style: inherit; 14 | font-variant: inherit; 15 | font-size: inherit; 16 | font-family: inherit; 17 | line-height: inherit; 18 | text-decoration: none; 19 | cursor: pointer; 20 | overflow: hidden; 21 | border-radius: 3px; 22 | transition: box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1), 23 | background-color 0.3s cubic-bezier(0.35, 0, 0.25, 1), 24 | transform 0.3s cubic-bezier(0.35, 0, 0.25, 1); 25 | &:hover,&:focus{ 26 | background-color: rgba(158, 158, 158, 0.1); 27 | } 28 | &.ua-raised:not([disabled]){ 29 | background-color: rgba(158, 158, 158, 0.1); 30 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); 31 | &:hover { 32 | box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.26); 33 | } 34 | } 35 | } 36 | 37 | .uac-button-ripple{ 38 | position: absolute; 39 | background: rgba(0,0,0,.15); 40 | border-radius: 100%; 41 | transform: scale(0); 42 | pointer-events: none; 43 | &.uac-animate{ 44 | animation: uac-btn-ripple .75s ease-out; 45 | } 46 | } 47 | @keyframes uac-btn-ripple { 48 | to { 49 | transform: scale(2); 50 | opacity: 0; 51 | } 52 | } 53 | // ------------ 54 | .uac-button.ua-ghost{ 55 | border: solid 1px #333; 56 | background-color: rgba(0,0,0,0); 57 | box-shadow: none; 58 | &:hover{ 59 | background-color: rgba(255,255,255,0.1); 60 | box-shadow: none; 61 | } 62 | } 63 | // ---------- size -------- 64 | .uac-button.ua-btn-xlg{ 65 | font-size: 2em; 66 | border-radius: 6px; 67 | } 68 | .uac-button.ua-btn-lg{ 69 | font-size: 1.5em; 70 | } 71 | .uac-button.ua-btn-sm{ 72 | font-size: 0.8em; 73 | } 74 | .uac-button.ua-btn-xs{ 75 | font-size: 0.4em; 76 | padding: 2px 10px; 77 | } 78 | // ------------------------------ colors ----------------- 79 | .uac-button.ua-btn-red { 80 | color: map-get($color-red,'400'); 81 | &.ua-raised{ 82 | background-color: map-get($color-red,'400'); 83 | color: #fff; 84 | } 85 | &.ua-ghost{ 86 | border-color: map-get($color-red,'400'); 87 | color: map-get($color-red,'400'); 88 | } 89 | } 90 | .uac-button.ua-btn-pink { 91 | color: map-get($color-pink,'400'); 92 | &.ua-raised{ 93 | background-color: map-get($color-pink,'400'); 94 | color: #fff; 95 | } 96 | &.ua-ghost{ 97 | border-color: map-get($color-pink,'400'); 98 | color: map-get($color-pink,'400'); 99 | } 100 | } 101 | .uac-button.ua-btn-purple { 102 | color: map-get($color-purple,'400'); 103 | &.ua-raised{ 104 | background-color: map-get($color-purple,'400'); 105 | color: #fff; 106 | } 107 | &.ua-ghost{ 108 | border-color: map-get($color-purple,'400'); 109 | color: map-get($color-purple,'400'); 110 | } 111 | } 112 | .uac-button.ua-btn-deep-purple { 113 | color: map-get($color-deep-purple,'400'); 114 | &.ua-raised{ 115 | background-color: map-get($color-deep-purple,'400'); 116 | color: #fff; 117 | } 118 | &.ua-ghost{ 119 | border-color: map-get($color-deep-purple,'400'); 120 | color: map-get($color-deep-purple,'400'); 121 | } 122 | } 123 | .uac-button.ua-btn-indigo { 124 | color: map-get($color-indigo,'400'); 125 | &.ua-raised{ 126 | background-color: map-get($color-indigo,'400'); 127 | color: #fff; 128 | } 129 | &.ua-ghost{ 130 | border-color: map-get($color-indigo,'400'); 131 | color: map-get($color-indigo,'400'); 132 | } 133 | } 134 | .uac-button.ua-btn-blue { 135 | color: map-get($color-blue,'400'); 136 | &.ua-raised{ 137 | background-color: map-get($color-blue,'400'); 138 | color: #fff; 139 | } 140 | &.ua-ghost{ 141 | border-color: map-get($color-blue,'400'); 142 | color: map-get($color-blue,'400'); 143 | } 144 | } 145 | .uac-button.ua-btn-light-blue { 146 | color: map-get($color-light-blue,'400'); 147 | &.ua-raised{ 148 | background-color: map-get($color-light-blue,'400'); 149 | color: #fff; 150 | } 151 | &.ua-ghost{ 152 | border-color: map-get($color-light-blue,'400'); 153 | color: map-get($color-light-blue,'400'); 154 | } 155 | } 156 | .uac-button.ua-btn-cyan { 157 | color: map-get($color-cyan,'400'); 158 | &.ua-raised{ 159 | background-color: map-get($color-cyan,'400'); 160 | color: #fff; 161 | } 162 | &.ua-ghost{ 163 | border-color: map-get($color-cyan,'400'); 164 | color: map-get($color-cyan,'400'); 165 | } 166 | } 167 | .uac-button.ua-btn-teal { 168 | color: map-get($color-teal,'400'); 169 | &.ua-raised{ 170 | background-color: map-get($color-teal,'400'); 171 | color: #fff; 172 | } 173 | &.ua-ghost{ 174 | border-color: map-get($color-teal,'400'); 175 | color: map-get($color-teal,'400'); 176 | } 177 | }.uac-button.ua-btn-green { 178 | color: map-get($color-green,'400'); 179 | &.ua-raised{ 180 | background-color: map-get($color-green,'400'); 181 | color: #fff; 182 | } 183 | &.ua-ghost{ 184 | border-color: map-get($color-green,'400'); 185 | color: map-get($color-green,'400'); 186 | } 187 | } 188 | .uac-button.ua-btn-light-green { 189 | color: map-get($color-light-green,'400'); 190 | &.ua-raised{ 191 | background-color: map-get($color-light-green,'400'); 192 | color: #fff; 193 | } 194 | &.ua-ghost{ 195 | border-color: map-get($color-light-green,'400'); 196 | color: map-get($color-light-green,'400'); 197 | } 198 | } 199 | .uac-button.ua-btn-lime { 200 | color: map-get($color-lime,'400'); 201 | &.ua-raised{ 202 | background-color: map-get($color-lime,'400'); 203 | color: #fff; 204 | } 205 | &.ua-ghost{ 206 | border-color: map-get($color-lime,'400'); 207 | color: map-get($color-lime,'400'); 208 | } 209 | } 210 | .uac-button.ua-btn-yellow { 211 | color: map-get($color-yellow,'400'); 212 | &.ua-raised{ 213 | background-color: map-get($color-yellow,'400'); 214 | color: #fff; 215 | } 216 | &.ua-ghost{ 217 | border-color: map-get($color-yellow,'400'); 218 | color: map-get($color-yellow,'400'); 219 | } 220 | } 221 | .uac-button.ua-btn-amber { 222 | color: map-get($color-amber,'400'); 223 | &.ua-raised{ 224 | background-color: map-get($color-amber,'400'); 225 | color: #fff; 226 | } 227 | &.ua-ghost{ 228 | border-color: map-get($color-amber,'400'); 229 | color: map-get($color-amber,'400'); 230 | } 231 | } 232 | .uac-button.ua-btn-orange { 233 | color: map-get($color-orange,'400'); 234 | &.ua-raised{ 235 | background-color: map-get($color-orange,'400'); 236 | color: #fff; 237 | } 238 | &.ua-ghost{ 239 | border-color: map-get($color-orange,'400'); 240 | color: map-get($color-orange,'400'); 241 | } 242 | } 243 | .uac-button.ua-btn-deep-orange { 244 | color: map-get($color-deep-orange,'400'); 245 | &.ua-raised{ 246 | background-color: map-get($color-deep-orange,'400'); 247 | color: #fff; 248 | } 249 | &.ua-ghost{ 250 | border-color: map-get($color-deep-orange,'400'); 251 | color: map-get($color-deep-orange,'400'); 252 | } 253 | } 254 | .uac-button.ua-btn-brown { 255 | color: map-get($color-brown,'400'); 256 | &.ua-raised{ 257 | background-color: map-get($color-brown,'400'); 258 | color: #fff; 259 | } 260 | &.ua-ghost{ 261 | border-color: map-get($color-brown,'400'); 262 | color: map-get($color-brown,'400'); 263 | } 264 | } 265 | .uac-button.ua-btn-grey { 266 | color: map-get($color-grey,'400'); 267 | &.ua-raised{ 268 | background-color: map-get($color-grey,'400'); 269 | color: #fff; 270 | } 271 | &.ua-ghost{ 272 | border-color: map-get($color-grey,'400'); 273 | color: map-get($color-grey,'400'); 274 | } 275 | } 276 | .uac-button.ua-btn-blue-grey { 277 | color: map-get($color-blue-grey,'400'); 278 | &.ua-raised{ 279 | background-color: map-get($color-blue-grey,'400'); 280 | color: #fff; 281 | } 282 | &.ua-ghost{ 283 | border-color: map-get($color-blue-grey,'400'); 284 | color: map-get($color-blue-grey,'400'); 285 | } 286 | } 287 | 288 | 289 | -------------------------------------------------------------------------------- /src/inputbox/inputbox.js: -------------------------------------------------------------------------------- 1 | ua.directive('uaInput',['uaUtil',function(uaUtil){ 2 | 3 | return { 4 | restrict: 'E', 5 | replace: true, 6 | template:function(tElm,attr ){ 7 | var theme = attr['uaTheme'] || 'nao'; 8 | var label = attr['uaLabel'] || 'input box'; 9 | var inputId = uaUtil.idGen('uainput'); 10 | 11 | 12 | var tpl = '' 15 | 16 | var attributes = uaUtil.dirAttrToString(attr); 17 | 18 | tpl += ' '; 19 | 20 | var labelContent = ''; 21 | if(['yoshiko','chisato','kozakura'].indexOf(theme)>-1){ 22 | labelContent = attr['uaContent']||label; 23 | } 24 | // --- the label ---- 25 | tpl += ''; 28 | 29 | // ------------------- some special theme's templates --------------- 30 | if(theme == 'nao'){ 31 | tpl += ''; 32 | }else if(theme == 'shoko'){ 33 | tpl += ''; 34 | }else if(theme == 'kozakura'){ 35 | tpl += ''; 36 | } 37 | 38 | tpl +=''; 39 | return tpl; 40 | }, 41 | } 42 | }]); -------------------------------------------------------------------------------- /src/inputbox/inputbox.scss: -------------------------------------------------------------------------------- 1 | .uac-input { 2 | position: relative; 3 | z-index: 1; 4 | display: inline-block; 5 | margin: 1em; 6 | max-width: 350px; 7 | width: calc(100% - 2em); 8 | vertical-align: top; 9 | .input__field { 10 | position: relative; 11 | display: block; 12 | float: right; 13 | padding: 0.8em; 14 | width: 60%; 15 | border: none; 16 | border-radius: 0; 17 | background: #f0f0f0; 18 | color: #aaa; 19 | font-weight: 400; 20 | font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; 21 | -webkit-appearance: none; /* for box shadows to show on iOS */ 22 | } 23 | 24 | .input__field:focus { 25 | outline: none; 26 | } 27 | 28 | .input__label { 29 | display: inline-block; 30 | float: right; 31 | padding: 0 1em; 32 | width: 40%; 33 | color: #696969; 34 | font-weight: bold; 35 | font-size: 70.25%; 36 | -webkit-font-smoothing: antialiased; 37 | -moz-osx-font-smoothing: grayscale; 38 | -webkit-touch-callout: none; 39 | -khtml-user-select: none; 40 | user-select: none; 41 | } 42 | 43 | .input__label-content { 44 | position: relative; 45 | display: block; 46 | padding: 1.6em 0; 47 | width: 100%; 48 | } 49 | .graphic { 50 | position: absolute; 51 | top: 0; 52 | left: 0; 53 | fill: none; 54 | } 55 | 56 | .icon { 57 | color: #ddd; 58 | font-size: 150%; 59 | } 60 | } // .uac-input 61 | // -------------------------------- different themes -------------- 62 | /* Nao */ 63 | .uac-input.input--nao { 64 | overflow: hidden; 65 | padding-top: 1em; 66 | .input__field--nao { 67 | padding: 0.5em 0em 0.25em; 68 | width: 100%; 69 | background: transparent; 70 | color: #9da8b2; 71 | font-size: 1.25em; 72 | } 73 | 74 | .input__label--nao { 75 | position: absolute; 76 | top: 0.95em; 77 | font-size: 0.85em; 78 | left: 0; 79 | display: block; 80 | width: 100%; 81 | text-align: left; 82 | padding: 0em; 83 | pointer-events: none; 84 | -webkit-transform-origin: 0 0; 85 | transform-origin: 0 0; 86 | -webkit-transition: -webkit-transform 0.2s 0.15s, color 1s; 87 | transition: transform 0.2s 0.15s, color 1s; 88 | -webkit-transition-timing-function: ease-out; 89 | transition-timing-function: ease-out; 90 | } 91 | 92 | .graphic--nao { 93 | stroke: #92989e; 94 | pointer-events: none; 95 | -webkit-transition: -webkit-transform 0.7s, stroke 0.7s; 96 | transition: transform 0.7s, stroke 0.7s; 97 | -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); 98 | transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); 99 | } 100 | 101 | .input__field--nao:focus + .input__label--nao, 102 | &.input--filled .input__label--nao { 103 | color: #333; 104 | -webkit-transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1); 105 | transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1); 106 | } 107 | 108 | .input__field--nao:focus ~ .graphic--nao, 109 | &.input--filled .graphic--nao { 110 | stroke: #333; 111 | -webkit-transform: translate3d(-66.6%, 0, 0); 112 | transform: translate3d(-66.6%, 0, 0); 113 | } 114 | } 115 | 116 | /* Shoko */ 117 | .uac-input.input--shoko { 118 | overflow: hidden; 119 | padding-bottom: 2.5em; 120 | .input__field--shoko { 121 | padding: 0; 122 | margin-top: 1.2em; 123 | width: 100%; 124 | background: transparent; 125 | // color: #fff; 126 | color: #f18292; 127 | font-size: 1.55em; 128 | } 129 | 130 | .input__label--shoko { 131 | position: absolute; 132 | top: 2em; 133 | left: 0; 134 | display: block; 135 | width: 100%; 136 | text-align: left; 137 | padding: 0em; 138 | text-transform: uppercase; 139 | letter-spacing: 1px; 140 | color: #A09C9C; 141 | pointer-events: none; 142 | -webkit-transform-origin: 0 0; 143 | transform-origin: 0 0; 144 | -webkit-transition: -webkit-transform 0.2s 0.1s, color 0.3s; 145 | transition: transform 0.2s 0.1s, color 0.3s; 146 | -webkit-transition-timing-function: ease-out; 147 | transition-timing-function: ease-out; 148 | } 149 | 150 | .graphic--shoko { 151 | stroke: #A09C9C; 152 | pointer-events: none; 153 | stroke-width: 2px; 154 | top: 1.25em; 155 | bottom: 0px; 156 | height: 3.275em; 157 | -webkit-transition: -webkit-transform 0.7s, stroke 0.7s; 158 | transition: transform 0.7s, stroke 0.7s; 159 | -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); 160 | transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); 161 | } 162 | 163 | .input__field--shoko:focus + .input__label--shoko, 164 | &.input--filled .input__label--shoko { 165 | color: #A58282; 166 | -webkit-transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1); 167 | transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1); 168 | } 169 | 170 | .input__field--shoko:focus ~ .graphic--shoko, 171 | &.input--filled .graphic--shoko { 172 | stroke: #A58282; 173 | -webkit-transform: translate3d(-66.6%, 0, 0); 174 | transform: translate3d(-66.6%, 0, 0); 175 | } 176 | } 177 | 178 | 179 | /* Manami ---------*/ 180 | .uac-input.input--manami { 181 | overflow: hidden; 182 | .input__field--manami { 183 | width: 100%; 184 | background: transparent; 185 | padding: 0.5em; 186 | margin-bottom: 2em; 187 | color: #f9f7f6; 188 | z-index: 100; 189 | opacity: 0; 190 | } 191 | 192 | .input__label--manami { 193 | width: 100%; 194 | position: absolute; 195 | text-align: left; 196 | padding: 0.5em 0; 197 | pointer-events: none; 198 | font-size: 1em; 199 | } 200 | 201 | .input__label--manami::before, 202 | .input__label--manami::after { 203 | content: ''; 204 | position: absolute; 205 | width: 100%; 206 | left: 0; 207 | } 208 | 209 | .input__label--manami::before { 210 | height: 100%; 211 | background: #A8A8A8; 212 | top: 0; 213 | -webkit-transform: translate3d(0, -100%, 0); 214 | transform: translate3d(0, -100%, 0); 215 | -webkit-transition: -webkit-transform 0.2s; 216 | transition: transform 0.2s; 217 | } 218 | 219 | .input__label--manami::after { 220 | height: 2px; 221 | background: #A8A8A8; 222 | top: 100%; 223 | -webkit-transition: opacity 0.2s; 224 | transition: opacity 0.2s; 225 | } 226 | 227 | .input__label-content--manami { 228 | padding: 0; 229 | -webkit-transform-origin: 0 0; 230 | transform-origin: 0 0; 231 | -webkit-transition: -webkit-transform 0.2s, color 0.2s; 232 | transition: transform 0.2s, color 0.2s; 233 | } 234 | 235 | .input__field--manami:focus, 236 | &.input--filled .input__field--manami { 237 | opacity: 1; 238 | -webkit-transition: opacity 0s 0.2s; 239 | transition: opacity 0s 0.2s; 240 | } 241 | 242 | .input__label--manami::before, 243 | .input__label--manami::after, 244 | .input__label-content--manami, 245 | .input__field--manami:focus, 246 | &.input--filled .input__field--manami { 247 | -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); 248 | transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); 249 | } 250 | 251 | .input__field--manami:focus + .input__label--manami::before, 252 | &.input--filled .input__label--manami::before { 253 | -webkit-transform: translate3d(0, 0, 0); 254 | transform: translate3d(0, 0, 0); 255 | } 256 | 257 | .input__field--manami:focus + .input__label--manami::after, 258 | &.input--filled .input__label--manami::after { 259 | opacity: 0; 260 | } 261 | 262 | .input__field--manami:focus + .input__label--manami .input__label-content--manami, 263 | &.input--filled .input__label--manami .input__label-content--manami { 264 | color: #cbc4c6; 265 | -webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1); 266 | transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1); 267 | } 268 | } 269 | 270 | /* Nariko */ 271 | .uac-input.input--nariko { 272 | overflow: hidden; 273 | padding-top: 2em; 274 | .input__field--nariko { 275 | width: 100%; 276 | background: transparent; 277 | opacity: 0; 278 | padding: 0.35em; 279 | z-index: 100; 280 | color: #f18292; 281 | } 282 | 283 | .input__label--nariko { 284 | width: 100%; 285 | bottom: 0; 286 | position: absolute; 287 | pointer-events: none; 288 | text-align: left; 289 | color: #8E9191; 290 | padding: 0 0.5em; 291 | } 292 | 293 | .input__label--nariko::before { 294 | content: ''; 295 | position: absolute; 296 | width: 100%; 297 | height: 4em; 298 | top: 100%; 299 | left: 0; 300 | background: #fff; 301 | border-top: 4px solid #9B9F9F; 302 | -webkit-transform: translate3d(0, -3px, 0); 303 | transform: translate3d(0, -3px, 0); 304 | -webkit-transition: -webkit-transform 0.4s; 305 | transition: transform 0.4s; 306 | -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 307 | transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 308 | } 309 | 310 | .input__label-content--nariko { 311 | padding: 0.5em 0; 312 | -webkit-transform-origin: 0% 100%; 313 | transform-origin: 0% 100%; 314 | -webkit-transition: -webkit-transform 0.4s, color 0.4s; 315 | transition: transform 0.4s, color 0.4s; 316 | -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 317 | transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 318 | } 319 | 320 | .input__field--nariko:focus, 321 | &.input--filled .input__field--nariko { 322 | cursor: text; 323 | opacity: 1; 324 | -webkit-transition: opacity 0s 0.4s; 325 | transition: opacity 0s 0.4s; 326 | } 327 | 328 | .input__field--nariko:focus + .input__label--nariko::before, 329 | &.input--filled .input__label--nariko::before { 330 | -webkit-transition-delay: 0.05s; 331 | transition-delay: 0.05s; 332 | -webkit-transform: translate3d(0, -3.3em, 0); 333 | transform: translate3d(0, -3.3em, 0); 334 | } 335 | 336 | .input__field--nariko:focus + .input__label--nariko .input__label-content--nariko, 337 | &.input--filled .input__label-content--nariko { 338 | color: #6B6E6E; 339 | -webkit-transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1); 340 | transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1); 341 | } 342 | } 343 | 344 | 345 | /* Yoshiko */ 346 | .uac-input.input--yoshiko{ 347 | .input__field--yoshiko { 348 | width: 100%; 349 | background-color: #d0d1d0; 350 | border: 2px solid transparent; 351 | -webkit-transition: background-color 0.25s, border-color 0.25s; 352 | transition: background-color 0.25s, border-color 0.25s; 353 | } 354 | .input__label--yoshiko { 355 | width: 100%; 356 | text-align: left; 357 | position: absolute; 358 | bottom: 100%; 359 | pointer-events: none; 360 | overflow: hidden; 361 | padding: 0 1.25em; 362 | -webkit-transform: translate3d(0, 3em, 0); 363 | transform: translate3d(0, 3em, 0); 364 | -webkit-transition: -webkit-transform 0.25s; 365 | transition: transform 0.25s ; 366 | -webkit-transition-timing-function: ease-in-out; 367 | transition-timing-function: ease-in-out; 368 | } 369 | .input__label-content--yoshiko { 370 | color: #8B8C8B; 371 | padding: 0.25em 0; 372 | -webkit-transition: -webkit-transform 0.25s; 373 | transition: transform 0.25s; 374 | -webkit-transition-timing-function: ease-in-out; 375 | transition-timing-function: ease-in-out; 376 | } 377 | .input__label-content--yoshiko::after { 378 | content: attr(data-content); 379 | position: absolute; 380 | font-weight: 800; 381 | bottom: 100%; 382 | left: 0; 383 | height: 100%; 384 | width: 100%; 385 | color: #a3d39c; 386 | padding: 0.25em 0; 387 | text-transform: uppercase; 388 | letter-spacing: 1px; 389 | font-size: 0.85em; 390 | } 391 | .input__field--yoshiko:focus + .input__label--yoshiko, 392 | &.input--filled .input__label--yoshiko { 393 | -webkit-transform: translate3d(0, 0, 0); 394 | transform: translate3d(0, 0, 0); 395 | } 396 | .input__field--yoshiko:focus + .input__label--yoshiko .input__label-content--yoshiko, 397 | &.input--filled .input__label-content--yoshiko { 398 | -webkit-transform: translate3d(0, 100%, 0); 399 | transform: translate3d(0, 100%, 0); 400 | } 401 | .input__field--yoshiko:focus, 402 | &.input--filled .input__field--yoshiko { 403 | background-color: transparent; 404 | border-color: #a3d39c; 405 | } 406 | } 407 | 408 | 409 | /* Chisato */ 410 | 411 | .uac-input.input--chisato { 412 | padding-top: 1em; 413 | .input__field--chisato { 414 | width: 100%; 415 | padding: 0.8em 0.5em; 416 | background: transparent; 417 | border: 2px solid; 418 | color: #b5b5b5; 419 | -webkit-transition: border-color 0.25s; 420 | transition: border-color 0.25s; 421 | } 422 | 423 | .input__label--chisato { 424 | width: 100%; 425 | position: absolute; 426 | top: 0; 427 | text-align: left; 428 | overflow: hidden; 429 | padding: 0; 430 | pointer-events: none; 431 | -webkit-transform: translate3d(0, 3em, 0); 432 | transform: translate3d(0, 3em, 0); 433 | } 434 | 435 | .input__label-content--chisato { 436 | padding: 0 1em; 437 | font-weight: 400; 438 | color: #b5b5b5; 439 | } 440 | 441 | .input__label-content--chisato::after { 442 | content: attr(data-content); 443 | position: absolute; 444 | top: -200%; 445 | left: 0; 446 | color: #da6484; 447 | font-weight: 800; 448 | } 449 | 450 | .input__field--chisato:focus, 451 | &.input--filled .input__field--chisato { 452 | border-color: #da6484; 453 | } 454 | 455 | .input__field--chisato:focus + .input__label--chisato, 456 | &.input--filled .input__label--chisato { 457 | -webkit-animation: anim-chisato-1 0.25s forwards; 458 | animation: anim-chisato-1 0.25s forwards; 459 | } 460 | 461 | .input__field--chisato:focus + .input__label--chisato .input__label-content--chisato, 462 | &.input--filled .input__label-content--chisato { 463 | -webkit-animation: anim-chisato-2 0.25s forwards ease-in; 464 | animation: anim-chisato-2 0.25s forwards ease-in; 465 | } 466 | } 467 | 468 | 469 | 470 | @-webkit-keyframes anim-chisato-1 { 471 | 0%, 70% { 472 | -webkit-transform: translate3d(0, 3em, 0); 473 | transform: translate3d(0, 3em, 0); 474 | } 475 | 71%, 100% { 476 | -webkit-transform: translate3d(0, 0, 0); 477 | transform: translate3d(0, 0, 0); 478 | } 479 | } 480 | 481 | @-webkit-keyframes anim-chisato-2 { 482 | 0% { 483 | -webkit-transform: translate3d(0, 0, 0); 484 | transform: translate3d(0, 0, 0); 485 | } 486 | 70%, 71% { 487 | -webkit-transform: translate3d(0, 125%, 0); 488 | transform: translate3d(0, 125%, 0); 489 | opacity: 0; 490 | -webkit-animation-timing-function: ease-out; 491 | } 492 | 100% { 493 | color: transparent; 494 | -webkit-transform: translate3d(0, 200%, 0); 495 | transform: translate3d(0, 200%, 0); 496 | } 497 | } 498 | 499 | @keyframes anim-chisato-1 { 500 | 0%, 70% { 501 | -webkit-transform: translate3d(0, 3em, 0); 502 | transform: translate3d(0, 3em, 0); 503 | } 504 | 71%, 100% { 505 | -webkit-transform: translate3d(0, 0, 0); 506 | transform: translate3d(0, 0, 0); 507 | } 508 | } 509 | 510 | @keyframes anim-chisato-2 { 511 | 0% { 512 | -webkit-transform: translate3d(0, 0, 0); 513 | transform: translate3d(0, 0, 0); 514 | } 515 | 70%, 71% { 516 | -webkit-transform: translate3d(0, 125%, 0); 517 | transform: translate3d(0, 125%, 0); 518 | opacity: 0; 519 | -webkit-animation-timing-function: ease-out; 520 | } 521 | 100% { 522 | color: transparent; 523 | -webkit-transform: translate3d(0, 200%, 0); 524 | transform: translate3d(0, 200%, 0); 525 | } 526 | } 527 | 528 | /* Kozakura */ 529 | .uac-input.input--kozakura { 530 | overflow: hidden; 531 | margin-top: -1em; 532 | // padding-bottom: 1em; 533 | .input__field--kozakura { 534 | padding: 0.25em 0.5em; 535 | margin-top: 1.25em; 536 | width: 100%; 537 | background: transparent; 538 | color: #2F3238; 539 | font-size: 1.55em; 540 | opacity: 0; 541 | } 542 | 543 | .input__label--kozakura { 544 | width: 100%; 545 | text-align: left; 546 | position: absolute; 547 | top: 1em; 548 | pointer-events: none; 549 | overflow: hidden; 550 | padding: 0 0.25em; 551 | -webkit-transform: translate3d(1em, 2.75em, 0); 552 | transform: translate3d(1em, 2.75em, 0); 553 | -webkit-transition: -webkit-transform 0.3s; 554 | transition: transform 0.3s; 555 | } 556 | 557 | .input__label-content--kozakura { 558 | color: #A4A5A6; 559 | padding: 0.4em 0 0.25em; 560 | -webkit-transition: -webkit-transform 0.3s; 561 | transition: transform 0.3s; 562 | } 563 | 564 | .input__label-content--kozakura::after { 565 | content: attr(data-content); 566 | position: absolute; 567 | font-weight: 800; 568 | top: 100%; 569 | left: 0; 570 | height: 100%; 571 | width: 100%; 572 | // color: #fff; 573 | padding: 0.25em 0; 574 | text-transform: uppercase; 575 | letter-spacing: 1px; 576 | font-size: 0.85em; 577 | } 578 | 579 | .graphic--kozakura { 580 | fill: #494E57; 581 | pointer-events: none; 582 | top: 1em; 583 | bottom: 0px; 584 | height: 4.5em; 585 | z-index: -1; 586 | -webkit-transition: -webkit-transform 0.7s, fill 0.7s; 587 | transition: transform 0.7s, fill 0.7s; 588 | -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); 589 | transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1); 590 | } 591 | 592 | .input__field--kozakura:focus, 593 | &.input--filled .input__field--kozakura { 594 | -webkit-transition: opacity 0s 0.35s; 595 | transition: opacity 0s 0.35s; 596 | opacity: 1; 597 | } 598 | 599 | .input__field--kozakura:focus + .input__label--kozakura, 600 | &.input--filled .input__label--kozakura { 601 | -webkit-transition-delay: 0.15s; 602 | transition-delay: 0.15s; 603 | -webkit-transform: translate3d(0, 0, 0); 604 | transform: translate3d(0, 0, 0); 605 | } 606 | 607 | .input__field--kozakura:focus + .input__label--kozakura .input__label-content--kozakura, 608 | &.input--filled .input__label-content--kozakura { 609 | -webkit-transition-delay: 0.15s; 610 | transition-delay: 0.15s; 611 | -webkit-transform: translate3d(0, -100%, 0); 612 | transform: translate3d(0, -100%, 0); 613 | } 614 | 615 | .input__field--kozakura:focus ~ .graphic--kozakura, 616 | &.input--filled .graphic--kozakura { 617 | fill: #fff; 618 | -webkit-transform: translate3d(-66.6%, 0, 0); 619 | transform: translate3d(-66.6%, 0, 0); 620 | } 621 | } 622 | 623 | 624 | /* Ruri */ 625 | .uac-input.input--ruri{ 626 | .input__field--ruri { 627 | width: 100%; 628 | background: transparent; 629 | padding: 0.5em 0; 630 | margin-bottom: 2em; 631 | // color: #fff; 632 | } 633 | .input__label--ruri { 634 | width: 100%; 635 | position: absolute; 636 | text-align: left; 637 | font-size: 1em; 638 | padding: 10px 0 5px; 639 | pointer-events: none; 640 | } 641 | 642 | .input__label--ruri::after { 643 | content: ''; 644 | position: absolute; 645 | width: 100%; 646 | height: 7px; 647 | background: #B7C3AC; 648 | left: 0; 649 | top: 100%; 650 | -webkit-transform-origin: 50% 100%; 651 | transform-origin: 50% 100%; 652 | -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; 653 | transition: transform 0.3s, background-color 0.3s; 654 | } 655 | 656 | .input__label-content--ruri { 657 | padding: 0; 658 | -webkit-transform-origin: 0 0; 659 | transform-origin: 0 0; 660 | -webkit-transition: -webkit-transform 0.3s, color 0.3s; 661 | transition: transform 0.3s, color 0.3s; 662 | } 663 | 664 | .input__field--ruri:focus + .input__label--ruri::after, 665 | &.input--filled .input__label--ruri::after { 666 | background: #a3d39c; 667 | -webkit-transform: scale3d(1, 0.25, 1); 668 | transform: scale3d(1, 0.25, 1); 669 | } 670 | 671 | .input__field--ruri:focus + .input__label--ruri .input__label-content--ruri, 672 | &.input--filled .input__label--ruri .input__label-content--ruri { 673 | color: #a3d39c; 674 | -webkit-transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1); 675 | transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1); 676 | } 677 | } 678 | 679 | 680 | 681 | -------------------------------------------------------------------------------- /src/link/link.js: -------------------------------------------------------------------------------- 1 | ua.directive('uaLink',function(){ 2 | return { 3 | restrict:'E', 4 | replace:true, 5 | transclude:true, 6 | template:function(elm,attr){ 7 | // console.log(attr) 8 | var atribute = ''; 9 | if(attr['hover']) atribute+= 'data-hover="'+ attr['hover'] +'"'; 10 | var theme = attr['uaTheme'] == 'light'?'uac-light':'uac-dark' 11 | 12 | return ''; 13 | }, 14 | link:function($scope,elm,attr){ 15 | 16 | } 17 | } 18 | }); -------------------------------------------------------------------------------- /src/link/link.scss: -------------------------------------------------------------------------------- 1 | .ua-link{ 2 | position: relative; 3 | display: inline-block; 4 | outline: none; 5 | text-decoration: none; 6 | text-transform: uppercase; 7 | &:hover,&:focus{ 8 | color: rgba(0,0,0,0.9); 9 | } 10 | } 11 | /* Effect 1: Brackets */ 12 | .ua-link-brucket{ 13 | &::before,&::after{ 14 | display: inline-block; 15 | opacity: 0; 16 | transition: transform 0.3s, opacity 0.2s; 17 | } 18 | &::before{ 19 | margin-right: 10px; 20 | content: '['; 21 | transform: translateX(20px); 22 | } 23 | &::after{ 24 | margin-left: 10px; 25 | content: ']'; 26 | transform: translateX(-20px); 27 | } 28 | &:hover,&:focus{ 29 | &::before,&::after{ 30 | opacity: 1; 31 | transform: translateX(0px); 32 | } 33 | } 34 | } 35 | 36 | 37 | /* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */ 38 | $ua-link-rolling-bg: rgba(0,0,0,0.1);//#2195de; 39 | .ua-link-rolling{ 40 | line-height: 25px; 41 | perspective: 1000px; 42 | &>span{ 43 | position: relative; 44 | display: inline-block; 45 | padding: 0 1em; 46 | background-color:$ua-link-rolling-bg; 47 | transition: transform 0.3s; 48 | transform-origin: 50% 0; 49 | transform-style: preserve-3d; 50 | &::before{ 51 | position: absolute; 52 | top: 100%; 53 | left: 0; 54 | width: 100%; 55 | height: 100%; 56 | background-color: rgba(0,0,0,0.2); 57 | content: attr(data-hover); 58 | transition: background-color 0.3s; 59 | transform: rotateX(-90deg); 60 | transform-origin: 50% 0; 61 | } 62 | } 63 | &:hover>span,&:focus>span{ 64 | transform: rotateX(90deg) translateY(-22px); 65 | } 66 | } 67 | 68 | 69 | /* Effect 3: bottom line slides/fades in */ 70 | .ua-link-lineup{ 71 | // padding: 0.5em 0; 72 | &::after{ 73 | position: absolute; 74 | top: 100%; 75 | left: 0; 76 | width: 100%; 77 | height: 4px; 78 | background: rgba(0,0,0,0.2); 79 | content: ''; 80 | opacity: 0; 81 | transition: opacity 0.3s, transform 0.3s; 82 | transform: translateY(15px); 83 | } 84 | &:hover,&:focus{ 85 | &::after{ 86 | opacity: 1; 87 | transform: translateY(5px); 88 | } 89 | } 90 | } 91 | 92 | /* Effect 4: bottom border enlarge */ 93 | .ua-link-linedown{ 94 | padding: 0 0 0.3em; 95 | &::after{ 96 | position: absolute; 97 | top: 100%; 98 | left: 0; 99 | width: 100%; 100 | height: 1px; 101 | background: rgba(0,0,0,0.2); 102 | content: ''; 103 | opacity: 0; 104 | transition: height 0.3s, opacity 0.3s, transform 0.3s; 105 | transform: translateY(-10px); 106 | } 107 | &:hover,&:focus{ 108 | &::after{ 109 | height: 5px; 110 | opacity: 1; 111 | transform: translateY(0px); 112 | } 113 | } 114 | } 115 | 116 | 117 | /* Effect 5: same word slide in */ 118 | .ua-link-slideup{ 119 | overflow: hidden; 120 | padding: 0 4px; 121 | height: 1em; 122 | &>span{ 123 | position: relative; 124 | display: inline-block; 125 | transition: transform 0.3s; 126 | &::before{ 127 | position: absolute; 128 | top: 100%; 129 | content: attr(data-hover); 130 | font-weight: 700; 131 | -webkit-transform: translate3d(0,0,0); 132 | -moz-transform: translate3d(0,0,0); 133 | transform: translate3d(0,0,0); 134 | } 135 | } 136 | &:hover>span,&:focus>span{ 137 | transform: translateY(-100%); 138 | } 139 | } 140 | 141 | /* Effect 6: same word slide in and border bottom */ 142 | .ua-link-linedrop{ 143 | margin: 0 10px; 144 | padding:0 1em 0.2em; 145 | &::before{ 146 | position: absolute; 147 | top: -0.2em; 148 | left: 0; 149 | width: 100%; 150 | height: 2px; 151 | background: rgba(0,0,0,0.2); 152 | content: ''; 153 | transition: top 0.3s; 154 | } 155 | &::after{ 156 | position: absolute; 157 | top: 0; 158 | left: 0; 159 | width: 2px; 160 | height: 0px; 161 | background: rgba(0,0,0,0.2); 162 | content: ''; 163 | transition: height 0.3s; 164 | } 165 | &:hover,&:focus{ 166 | &::before{ 167 | top: 100%; 168 | opacity: 1; 169 | } 170 | &::after{ 171 | height: 100%; 172 | } 173 | } 174 | } 175 | 176 | 177 | /* Effect 7: second border slides up */ 178 | .ua-link-lineraise{ 179 | padding: 0 0.5em 0.3em; 180 | &::before,&::after{ 181 | position: absolute; 182 | top: 100%; 183 | left: 0; 184 | width: 100%; 185 | height: 2px; 186 | background: rgba(0,0,0,0.2); 187 | content: ''; 188 | transition: transform 0.3s; 189 | transform: scale(0.85); 190 | } 191 | &::after{ 192 | opacity: 0; 193 | transition: top 0.3s, opacity 0.3s, transform 0.3s; 194 | } 195 | &:hover,&:focus{ 196 | &::before,&::after{ 197 | transform: scale(1); 198 | } 199 | &::after{ 200 | top: -0.3em; 201 | opacity: 1; 202 | } 203 | } 204 | } 205 | 206 | 207 | /* Effect 8: border slight translate */ 208 | .ua-link-border{ 209 | padding: 0.5em 2em; 210 | &::before,&::after{ 211 | position: absolute; 212 | top: 0; 213 | left: 0; 214 | width: 100%; 215 | height: 100%; 216 | border: 2px solid rgba(0,0,0,0.1); 217 | content: ''; 218 | transition: transform 0.3s, opacity 0.3s; 219 | } 220 | &::after{ 221 | border-color: rgba(0,0,0,0.8); 222 | opacity: 0; 223 | transform: translateY(-7px) translateX(6px); 224 | } 225 | &:hover,&:focus{ 226 | &::before{ 227 | opacity: 0; 228 | transform: translateY(5px) translateX(-5px); 229 | } 230 | &::after{ 231 | opacity: 1; 232 | transform: translateY(0px) translateX(0px); 233 | } 234 | } 235 | } 236 | 237 | /* Effect 9: second text and borders */ 238 | .ua-link-subtext{ 239 | // margin: 0 20px; 240 | padding: 0 2em; 241 | &::before,&::after{ 242 | position: absolute; 243 | top: -0.5em; 244 | left: 0; 245 | width: 100%; 246 | height: 1px; 247 | background: rgba(0,0,0,0.2); 248 | content: ''; 249 | opacity: 1; 250 | transition: opacity 0.3s, height 0.3s; 251 | } 252 | &::after{ 253 | top: 100%; 254 | opacity: 0; 255 | transition: transform 0.3s, opacity 0.3s; 256 | transform: translateY(-10px); 257 | } 258 | &>span{ 259 | z-index: 2; 260 | display: block; 261 | font-weight: 300; 262 | } 263 | &>span::after{ 264 | content: attr(data-hover); 265 | z-index: 1; 266 | display: block; 267 | padding: 8px 0 0 0; 268 | color: rgba(0,0,0,0.3); 269 | text-transform: none; 270 | opacity: 0; 271 | transition: transform 0.3s, opacity 0.3s; 272 | transform: translateY(-100%); 273 | } 274 | &:hover,&:focus{ 275 | &::before{ 276 | height: 6px; 277 | } 278 | &::before,&::after{ 279 | opacity: 1; 280 | transform: translateY(0px); 281 | } 282 | &>span::after{ 283 | opacity:1; 284 | transform: translateY(-0.3em); 285 | } 286 | } 287 | } 288 | 289 | 290 | /* Effect 10: reveal, push out */ 291 | .ua-link-push{ 292 | z-index: 1; 293 | overflow: hidden; 294 | // margin: 0 15px; 295 | color: #fff; 296 | &>span{ 297 | display: block; 298 | padding: 0.5em 2em; 299 | background: #0f7c67; 300 | transition: transform 0.3s; 301 | } 302 | &:before{ 303 | position: absolute; 304 | top: 0; 305 | left: 0; 306 | z-index: -1; 307 | padding: 10px 20px; 308 | width: 100%; 309 | height: 100%; 310 | background: rgba(0,0,0,0.1); 311 | color: #0f7c67; 312 | content: attr(data-hover); 313 | -webkit-transition: -webkit-transform 0.3s; 314 | -moz-transition: -moz-transform 0.3s; 315 | transition: transform 0.3s; 316 | -webkit-transform: translateX(-25%); 317 | } 318 | &:hover,&:focus { 319 | &>span{ 320 | transform: translateX(100%); 321 | } 322 | &::before{ 323 | transform: translateX(0%); 324 | } 325 | } 326 | } 327 | 328 | 329 | /* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */ 330 | $ua-link-textfill-color: #000; 331 | .ua-link-textfill{ 332 | padding: 0.3em 0; 333 | border-top: 2px solid rgba(0,0,0,0.2); 334 | text-shadow: none; 335 | &::before{ 336 | position: absolute; 337 | top: 0; 338 | left: 0; 339 | overflow: hidden; 340 | padding: 0.3em 0; 341 | max-width: 0; 342 | border-bottom: 2px solid $ua-link-textfill-color; 343 | color: $ua-link-textfill-color; 344 | content: attr(data-hover); 345 | transition: max-width 0.5s; 346 | } 347 | &:hover,&:focus{ 348 | &::before{ 349 | max-width: 100%; 350 | } 351 | } 352 | } 353 | 354 | /* Effect 12: circle */ 355 | .ua-link-circle{ 356 | &::before,&::after{ 357 | position: absolute; 358 | top: 50%; 359 | left: 50%; 360 | width: 100px; 361 | height: 100px; 362 | border: 2px solid rgba(0,0,0,0.1); 363 | border-radius: 50%; 364 | content: ''; 365 | opacity: 0; 366 | transition: transform 0.3s, opacity 0.3s; 367 | transform: translateX(-50%) translateY(-50%) scale(0.2); 368 | } 369 | &::after{ 370 | width: 90px; 371 | height: 90px; 372 | border-width: 6px; 373 | transform: translateX(-50%) translateY(-50%) scale(0.8); 374 | } 375 | &:hover,&:focus{ 376 | &::before,&::after{ 377 | opacity: 1; 378 | transform: translateX(-50%) translateY(-50%) scale(1); 379 | } 380 | } 381 | } 382 | 383 | /* Effect 13: three circles */ 384 | $ua-link-dots-color:rgba(0,0,0,0.2); 385 | .ua-link-dots{ 386 | transition: color 0.3s; 387 | &::before{ 388 | position: absolute; 389 | top: 100%; 390 | left: 50%; 391 | color: transparent; 392 | content: '•'; 393 | text-shadow: 0 0 transparent; 394 | font-size: 1.2em; 395 | transition: text-shadow 0.3s, color 0.3s; 396 | transform: translateX(-50%); 397 | pointer-events: none; 398 | } 399 | &:hover,&:focus{ 400 | color:rgba(0,0,0,0.4); 401 | &::before{ 402 | color: $ua-link-dots-color; 403 | text-shadow: 10px 0 $ua-link-dots-color, -10px 0 $ua-link-dots-color; 404 | } 405 | } 406 | } 407 | 408 | /* Effect 14: border switch */ 409 | .ua-link-switchborder{ 410 | padding: 0 20px; 411 | height: 45px; 412 | line-height: 45px; 413 | &::before,&::after{ 414 | position: absolute; 415 | width: 45px; 416 | height: 2px; 417 | background-color: rgba(0,0,0,0.2); 418 | content: ''; 419 | opacity: 0.2; 420 | transition: all 0.3s; 421 | pointer-events: none; 422 | } 423 | &::before{ 424 | top: 0; 425 | left: 0; 426 | transform: rotate(90deg); 427 | transform-origin: 0 0; 428 | } 429 | &::after{ 430 | right: 0; 431 | bottom: 0; 432 | transform: rotate(90deg); 433 | transform-origin: 100% 0; 434 | } 435 | &:hover,&:focus{ 436 | &::before{ 437 | left: 50%; 438 | transform: rotate(0deg) translateX(-50%); 439 | } 440 | &::after{ 441 | right: 50%; 442 | transform: rotate(0deg) translateX(50%); 443 | } 444 | &::before,&::after{ 445 | opacity:1; 446 | } 447 | } 448 | } 449 | 450 | /* Effect 15: scale down, reveal */ 451 | .ua-link-shrink{ 452 | color: rgba(0,0,0,0.2); 453 | font-weight: bolder; 454 | font-family: arial,time-new-roman; 455 | &::before{ 456 | // color: #fff; 457 | content: attr(data-hover); 458 | position: absolute; 459 | transition: transform 0.3s, opacity 0.3s; 460 | } 461 | &:hover,&:focus{ 462 | &::before{ 463 | transform: scale(0.9); 464 | opacity: 0; 465 | } 466 | } 467 | } 468 | 469 | /* Effect 16: fall down */ 470 | .ua-link-fall{ 471 | color: #6f8686; 472 | text-shadow: 0 0 1px rgba(111,134,134,0.3); 473 | &::before{ 474 | color: #000; 475 | content: attr(data-hover); 476 | position: absolute; 477 | opacity: 0; 478 | text-shadow: 0 0 1px rgba(0,0,0,0.3); 479 | transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); 480 | transition: transform 0.3s, opacity 0.3s; 481 | pointer-events: none; 482 | } 483 | &:hover,&:focus{ 484 | &::before{ 485 | transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); 486 | opacity: 1; 487 | } 488 | } 489 | } 490 | 491 | 492 | /* Effect 17: move up fade out, push border */ 493 | .ua-link-pushup{ 494 | color: #10649b; 495 | text-shadow: none; 496 | padding: 10px 0; 497 | font-weight: bold; 498 | font-family: sans-serif,arial; 499 | &::before{ 500 | color: #000; 501 | text-shadow: 0 0 1px rgba(255,255,255,0.3); 502 | content: attr(data-hover); 503 | position: absolute; 504 | transition: transform 0.3s, opacity 0.3s; 505 | pointer-events: none; 506 | } 507 | &::after{ 508 | content: ''; 509 | position: absolute; 510 | left: 0; 511 | bottom: 0; 512 | width: 100%; 513 | height: 2px; 514 | background: rgba(0,0,0,0.2); 515 | opacity: 0; 516 | transform: translateY(5px); 517 | transition: transform 0.3s, opacity 0.3s; 518 | pointer-events: none; 519 | } 520 | &:hover,&:focus{ 521 | &::before{ 522 | opacity: 0; 523 | transform: translateY(-2px); 524 | } 525 | &::after{ 526 | opacity: 1; 527 | transform: translateY(0px); 528 | } 529 | } 530 | } 531 | 532 | /* Effect 18: cross */ 533 | .ua-link-cross{ 534 | // position: relative; 535 | z-index: 1; 536 | padding: 0 5px; 537 | color:rgba(0,0,0,0.5); 538 | font-weight: bold; 539 | transition: color 0.3s; 540 | &::before,&::after{ 541 | position: absolute; 542 | width: 100%; 543 | left: 0; 544 | top: 50%; 545 | height: 2px; 546 | margin-top: -1px; 547 | background-color: rgba(0,0,0,0.2) ; 548 | content: ''; 549 | z-index: -1; 550 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 551 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 552 | transition: transform 0.3s, opacity 0.3s; 553 | pointer-events: none; 554 | } 555 | &::before{ 556 | transform: translateY(-20px); 557 | } 558 | &::after{ 559 | transform: translateY(20px); 560 | } 561 | &:hover,&:focus{ 562 | color: #000; 563 | &::before,&::after{ 564 | opacity: 0.7; 565 | } 566 | &::before{ 567 | transform: rotate(45deg); 568 | } 569 | &::after{ 570 | transform: rotate(-45deg); 571 | } 572 | } 573 | 574 | } 575 | 576 | 577 | /* Effect 19: 3D side */ 578 | .ua-link-slide3d{ 579 | line-height: 2em; 580 | -webkit-perspective: 800px; 581 | -moz-perspective: 800px; 582 | perspective: 800px; 583 | // width: 200px; 584 | position: relative; 585 | &>span{ 586 | position: relative; 587 | display: inline-block; 588 | padding: 0 24px; 589 | background: rgba(0,0,0,0.1); 590 | transition: transform 0.4s, background 0.4s; 591 | transform-style: preserve-3d; 592 | transform-origin: 50% 50% -50px; 593 | &::before{ 594 | position: absolute; 595 | top: 0; 596 | left: 100%; 597 | width: 100%; 598 | height: 100%; 599 | background: rgba(0,0,0,0.15); 600 | content: attr(data-hover); 601 | transition: background 0.4s; 602 | transform: rotateY(90deg); 603 | transform-origin: 0 50%; 604 | pointer-events: none; 605 | backface-visibility:hidden; 606 | } 607 | } 608 | &:hover,&:focus{ 609 | &>span{ 610 | background: rgba(0,0,0,0.2); 611 | -webkit-transform: rotateY(-90deg); 612 | -moz-transform: rotateY(-90deg); 613 | transform: rotateY(-90deg); 614 | &::before{ 615 | background: rgba(0,0,0,0.2); 616 | } 617 | } 618 | } 619 | } 620 | 621 | /* Effect 20: 3D side */ 622 | .ua-link-flip3d{ 623 | line-height: 2em; 624 | perspective: 800px; 625 | &>span{ 626 | position: relative; 627 | display: inline-block; 628 | padding: 3px 1.5em 0; 629 | background: rgba(0,0,0,0.1); 630 | box-shadow: inset 0 3px #2f4351; 631 | transition: background 0.6s; 632 | transform-origin: 50% 0; 633 | transform-style: preserve-3d; 634 | transform-origin: 0% 50%; 635 | &::before{ 636 | position: absolute; 637 | top: 0; 638 | left: 0; 639 | width: 100%; 640 | height: 100%; 641 | background: rgba(0,0,0,0.8); 642 | color: #fff; 643 | content: attr(data-hover); 644 | transform: rotateX(270deg); 645 | transition: transform 0.6s; 646 | transform-origin: 0 0; 647 | pointer-events: none; 648 | } 649 | } 650 | &:hover,&:focus{ 651 | // background: #; 652 | &>span::before{ 653 | transform: rotateX(10deg); 654 | } 655 | } 656 | } 657 | 658 | /* Effect 21: borders slight translate */ 659 | .ua-link-borderin{ 660 | padding: 10px; 661 | color: #237546; 662 | font-weight: 700; 663 | text-shadow: none; 664 | transition: color 0.3s; 665 | &::before,&::after{ 666 | position: absolute; 667 | left: 0; 668 | width: 100%; 669 | height: 2px; 670 | background: rgba(0,0,0,0.2); 671 | content: ''; 672 | opacity: 0; 673 | transition: opacity 0.3s, transform 0.3s; 674 | transform: translateY(-10px); 675 | } 676 | &::before{ 677 | top: 0; 678 | transform: translateY(-10px); 679 | } 680 | &::after{ 681 | bottom: 0; 682 | transform: translateY(10px); 683 | } 684 | &:hover,&:focus{ 685 | color: rgba(0,0,0,0.2); 686 | &::before,&::after{ 687 | opacity: 1; 688 | transform: translateY(0px); 689 | } 690 | } 691 | } 692 | -------------------------------------------------------------------------------- /src/loader/loader.js: -------------------------------------------------------------------------------- 1 | 2 | ua.factory('$uaLoader',()=> { 3 | var tpls = {}; 4 | tpls.stroke = '
\ 5 | \ 6 | \ 7 | \ 8 |
'; 9 | tpls.liquidSquare = '
'; 10 | 11 | tpls.fourdots = '
\ 12 |
\ 13 |
\ 14 |
\ 15 |
\ 16 |
'; 17 | 18 | tpls.bokeh = '
'; 19 | 20 | tpls.kiri = '
'; 21 | 22 | tpls.sail = '
'; 23 | 24 | tpls.breath = '
'; 25 | 26 | tpls.flipDot = '
\ 27 |
\ 28 |
\ 29 |
\ 30 |
\ 31 |
'; 32 | tpls.squarePuls = '
'; 33 | tpls.wave = '
'; 34 | tpls.orbit = '
'; 35 | 36 | var count = 0; 37 | 38 | class Loader{ 39 | constructor(option){ 40 | this.elm = null; 41 | if(!option) var option = { 42 | theme:'stroke', 43 | }; 44 | var $container = option.container || document.body; 45 | var tpl = tpls[ option.theme ] || tpls['stroke']; 46 | 47 | this.id = idGen(); 48 | 49 | this.elm = angular.element( 50 | tpl.replace('__id__',this.id) 51 | .replace('__className__',option.className || '') 52 | )[0]; 53 | $container.appendChild(this.elm); 54 | } 55 | 56 | hide() { 57 | this.elm.style.display = 'none'; 58 | } 59 | show(){ 60 | this.elm.style.display = 'block'; 61 | } 62 | remove(delay){ 63 | delay = delay || 0; 64 | setTimeout(function(){ 65 | this.elm.remove(); 66 | 67 | }.bind(this),delay); 68 | } 69 | 70 | } 71 | 72 | function idGen(){ 73 | return 'uac-loader-elm-'+ (count++); 74 | } 75 | 76 | return (opt) => { 77 | return new Loader( opt ); 78 | }; 79 | 80 | }); 81 | 82 | 83 | -------------------------------------------------------------------------------- /src/loader/loader.scss: -------------------------------------------------------------------------------- 1 | .uac-loader{ 2 | position: absolute; 3 | left: 50%; 4 | top: 20%; 5 | z-index: 100; 6 | 7 | } 8 | 9 | // -------------------------------------- 10 | $loader-green: map-get($color-green,'400'); 11 | $loader-blue: map-get($color-blue,'400'); 12 | $loader-red: map-get($color-red,'400'); 13 | $loader-yellow: map-get($color-pink,'400'); 14 | 15 | $dot-red: #e7524e; 16 | $dot-blue: #00ade4; 17 | $dot-green: #71c458; 18 | $dot-yellow:#fdc331; 19 | 20 | .uac-loader-stroke { 21 | width: 100px; 22 | height: 100px; 23 | margin-left: -50px; 24 | background-color:rgba(255,255,255,0.8); 25 | // box-shadow: 0 0 6px rgba(0,0,0,0.1); 26 | border-radius: 50%; 27 | .circular{ 28 | animation: ualoader-rotate 2s linear infinite; 29 | height: 100px; 30 | position: relative; 31 | width: 100px; 32 | } 33 | .path { 34 | // dash的 长度，间隙 35 | stroke-dasharray: 1,200; 36 | stroke-dashoffset: 0; 37 | stroke:$loader-yellow; 38 | animation: 39 | ualoader-dash 1.5s ease-in-out infinite, 40 | ualoader-color 6s ease-in-out infinite 41 | ; 42 | stroke-linecap: round; 43 | } 44 | 45 | } 46 | 47 | @keyframes ualoader-rotate{ 48 | 100%{ 49 | transform:rotate(360deg); 50 | } 51 | } 52 | @keyframes ualoader-dash{ 53 | 0%{ 54 | stroke-dasharray: 1,200; 55 | stroke-dashoffset: 0; 56 | } 57 | 50%{ 58 | stroke-dasharray: 89,200; 59 | stroke-dashoffset: -35; 60 | } 61 | 100%{ 62 | stroke-dasharray: 89,200; 63 | stroke-dashoffset: -124; 64 | } 65 | } 66 | @keyframes ualoader-color{ 67 | 100%, 0%{ 68 | stroke: $loader-red; 69 | } 70 | 40%{ 71 | stroke: $loader-blue; 72 | } 73 | 66%{ 74 | stroke: $loader-green; 75 | } 76 | 80%, 90%{ 77 | stroke: $loader-yellow; 78 | } 79 | } 80 | // ========================== liquid square ====================---------------- 81 | // http://codepen.io/TimPietrusky/pen/Indcm?editors=010 82 | $liquidsquare-alpha: 8em; 83 | $liquidsquare-beta: 50%; 84 | $liquidsquare-gamma: 2.25s; 85 | $liquidsquare-delta: .75; 86 | 87 | $color-alpha: rgba(#e74c3c, $liquidsquare-delta); 88 | $color-beta: rgba(#e67e22, $liquidsquare-delta); 89 | $color-gamma: rgba(#8e44ad, $liquidsquare-delta); 90 | $color-delta: rgba(#2980d9, $liquidsquare-delta); 91 | 92 | .uac-loader-liquidsquare { 93 | position: absolute; 94 | left: 50%; 95 | top: 50%; 96 | width: $liquidsquare-alpha; 97 | height: $liquidsquare-alpha; 98 | margin: (-$liquidsquare-alpha / 2) 0 0 (-$liquidsquare-alpha / 2); 99 | overflow: hidden; 100 | background: rgba(#000, .35); 101 | // border-radius: 50%; 102 | 103 | > div { 104 | position: absolute; 105 | width: $liquidsquare-alpha; 106 | height: $liquidsquare-alpha; 107 | animation: liquidsquare-alpha $liquidsquare-gamma linear infinite forwards; 108 | background: $color-alpha; 109 | 110 | &:nth-child(1) { 111 | top: -$liquidsquare-beta; 112 | left: -$liquidsquare-beta; 113 | } 114 | 115 | &:nth-child(2) { 116 | top: -$liquidsquare-beta; 117 | right: -$liquidsquare-beta; 118 | } 119 | 120 | &:nth-child(3) { 121 | bottom: -$liquidsquare-beta; 122 | right: -$liquidsquare-beta; 123 | } 124 | 125 | &:nth-child(4) { 126 | bottom: -$liquidsquare-beta; 127 | left: -$liquidsquare-beta; 128 | } 129 | } 130 | } 131 | 132 | @keyframes liquidsquare-alpha { 133 | 0% { 134 | transform:rotate(0); 135 | background: $color-alpha; 136 | } 137 | 138 | 25% { 139 | background: $color-beta; 140 | } 141 | 142 | 50% { 143 | border-radius: 50%; 144 | background: $color-gamma; 145 | } 146 | 147 | 75% { 148 | background: $color-delta; 149 | } 150 | 151 | 100% { 152 | transform:rotate(360deg); 153 | background: $color-alpha; 154 | } 155 | } 156 | // ---------------========== win8 ================================== 157 | // http://codepen.io/janrubio/pen/DusIE?editors=110 158 | 159 | 160 | // ------------------------- fourdots ------------- 161 | .uac-loader-fourdots { 162 | width: 100px; 163 | height: 100px; 164 | position: absolute; 165 | left: 50%; 166 | top: 50%; 167 | margin: -50px 0 0 -50px; 168 | border-radius: 20px; 169 | animation: uac-loader-4dotsrotate 4s ease-in-out infinite; 170 | .uac-loader-dot { 171 | width: 20px; 172 | height: 20px; 173 | border-radius: 20px; 174 | -moz-border-radius: 20px; 175 | -webkit-border-radius: 20px; 176 | position: absolute; 177 | top: 50%; 178 | left: 50%; 179 | margin-top: -10px; 180 | margin-left: -10px; 181 | } 182 | .uac-loader-red { 183 | background: #e7524e; 184 | -webkit-border-radius: 20px; 185 | animation: uac-firstcolor 1.05s ease-in-out infinite; 186 | } 187 | .uac-loader-blue { 188 | background: #00ade4; 189 | animation: uac-secondcolor 1.05s ease-in-out infinite; 190 | } 191 | .uac-loader-green { 192 | background: #71c458; 193 | -webkit-border-radius: 20px; 194 | animation: uac-thirdcolor 1.05s ease-in-out infinite; 195 | } 196 | .uac-loader-yellow { 197 | background: #fdc331; 198 | -webkit-border-radius: 20px; 199 | animation: uac-fourthcolor 1.05s ease-in-out infinite; 200 | } 201 | } 202 | 203 | /*-----Animations----*/ 204 | @keyframes uac-firstcolor { 205 | 0% { 206 | z-index: 1; 207 | } 208 | 50% { 209 | transform: translateX(24px); 210 | } 211 | } 212 | @keyframes uac-secondcolor { 213 | 0% { 214 | z-index: 1; 215 | } 216 | 50% { 217 | transform: translateX(-24px); 218 | } 219 | } 220 | @keyframes uac-thirdcolor { 221 | 0% { 222 | z-index: 1; 223 | } 224 | 50% { 225 | transform: translateY(-24px); 226 | } 227 | } 228 | @keyframes uac-fourthcolor { 229 | 0% { 230 | z-index: 1; 231 | } 232 | 50% { 233 | transform: translateY(24px); 234 | } 235 | } 236 | 237 | @keyframes uac-loader-4dotsrotate { 238 | 0% { 239 | z-index: 1; 240 | } 241 | 50% { 242 | transform: rotate(360deg); 243 | } 244 | } 245 | // ----------------------------- from http://tympanus.net/codrops 246 | .uac-loader-bokeh { 247 | font-size: 100px; 248 | margin-left: -50px; 249 | width: 1em; 250 | height: 1em; 251 | position: relative; 252 | // margin: 100px auto; 253 | border-radius: 50%; 254 | border: .01em solid rgba(150,150,150,0.1); 255 | list-style: none; 256 | } 257 | 258 | .uac-loader-bokeh li { 259 | position: absolute; 260 | width: .2em; 261 | height: .2em; 262 | border-radius: 50%; 263 | } 264 | 265 | .uac-loader-bokeh li:nth-child(1) { 266 | left: 50%; 267 | top: 0; 268 | margin: 0 0 0 -.1em; 269 | background: #00C176; 270 | transform-origin: 50% 250%; 271 | animation: 272 | uac-rota 1.13s linear infinite, 273 | uac-opa 3.67s ease-in-out infinite alternate; 274 | } 275 | 276 | .uac-loader-bokeh li:nth-child(2) { 277 | top: 50%; 278 | right: 0; 279 | margin: -.1em 0 0 0; 280 | background: #FF003C; 281 | transform-origin: -150% 50%; 282 | animation: 283 | uac-rota 1.86s linear infinite, 284 | uac-opa 4.29s ease-in-out infinite alternate; 285 | } 286 | 287 | .uac-loader-bokeh li:nth-child(3) { 288 | left: 50%; 289 | bottom: 0; 290 | margin: 0 0 0 -.1em; 291 | background: #FABE28; 292 | transform-origin: 50% -150%; 293 | animation: 294 | uac-rota 1.45s linear infinite, 295 | uac-opa 5.12s ease-in-out infinite alternate; 296 | } 297 | 298 | .uac-loader-bokeh li:nth-child(4) { 299 | top: 50%; 300 | left: 0; 301 | margin: -.1em 0 0 0; 302 | background: #88C100; 303 | transform-origin: 250% 50%; 304 | animation: 305 | uac-rota 1.72s linear infinite, 306 | uac-opa 5.25s ease-in-out infinite alternate; 307 | } 308 | 309 | @keyframes uac-rota { 310 | from { } 311 | to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 312 | } 313 | 314 | 315 | @keyframes uac-opa { 316 | 0% { } 317 | 12.0% { opacity: 0.80; } 318 | 19.5% { opacity: 0.88; } 319 | 37.2% { opacity: 0.64; } 320 | 40.5% { opacity: 0.52; } 321 | 52.7% { opacity: 0.69; } 322 | 60.2% { opacity: 0.60; } 323 | 66.6% { opacity: 0.52; } 324 | 70.0% { opacity: 0.63; } 325 | 79.9% { opacity: 0.60; } 326 | 84.2% { opacity: 0.75; } 327 | 91.0% { opacity: 0.87; } 328 | } 329 | 330 | // -------------------- uac kiri----- 331 | // http://codepen.io/hafizfattah/pen/AbBtc 332 | .uac-loader-kiri{ 333 | position: absolute; 334 | width: 100px; 335 | height: 100px; 336 | margin-left: -50px; 337 | // line-height: 200px; 338 | // border-radius: 50%; 339 | // top: 50%; 340 | // left: 50%; 341 | // margin-left: -100px; 342 | // margin-top: -100px; 343 | } 344 | .uac-loader-kiri span{ 345 | width:16px; 346 | height:16px; 347 | position:absolute; 348 | top: 50%; 349 | left: 50%; 350 | border-radius:50%; 351 | display:inline-block; 352 | margin-left:-10px; 353 | animation:3s infinite linear; 354 | } 355 | 356 | .uac-loader-kiri span:nth-child(1){ 357 | background:#E84C3D; 358 | animation:kiri 1.2s infinite linear; 359 | } 360 | .uac-loader-kiri span:nth-child(2){ 361 | background:#F1C40F; 362 | z-index:100; 363 | } 364 | .uac-loader-kiri span:nth-child(3){ 365 | background:#2FCC71; 366 | animation:kanan 1.2s infinite linear; 367 | } 368 | @keyframes kanan { 369 | 0% {transform:translateX(20px); 370 | } 371 | 372 | 50%{transform:translateX(-20px); 373 | } 374 | 375 | 100%{transform:translateX(20px); 376 | z-index:200; 377 | } 378 | } 379 | 380 | @keyframes kiri { 381 | 0% { 382 | transform:translateX(-20px); 383 | z-index:200; 384 | } 385 | 50%{ 386 | transform:translateX(20px); 387 | } 388 | 100%{ 389 | transform:translateX(-20px); 390 | } 391 | } 392 | // ------------------ sail theme------------------ 393 | .uac-loader-sail { 394 | width: 80px; 395 | height: 80px; 396 | position: absolute; 397 | left: 50%; 398 | top: 50%; 399 | margin: -40px 0 0 -40px; 400 | // border-radius: 20px; 401 | // animation: uac-loader-4dotsrotate 4s ease-in-out infinite; 402 | &>span { 403 | width: 20px; 404 | height: 20px; 405 | border-radius: 20px; 406 | position: absolute; 407 | top: 50%; 408 | // left: 50%; 409 | margin-top: -10px; 410 | margin-left: -10px; 411 | } 412 | &>span:nth-child(1) { //red 413 | background: $dot-red; 414 | left:0; 415 | animation: uac-sail-toRight 2s linear infinite; 416 | } 417 | &>span:nth-child(2) { //blue 418 | background: $dot-blue; 419 | left:25%; 420 | animation: uac-sail-toRight 2s linear infinite; 421 | animation-delay: -1.5s; 422 | } 423 | &>span:nth-child(3) { //green 424 | background: $dot-green; 425 | left:50%; 426 | animation: uac-sail-toRight 2s linear infinite; 427 | animation-delay: -1s; 428 | } 429 | &>span:nth-child(4) { // yellow 430 | background: $dot-yellow; 431 | left:75%; 432 | animation: uac-sail-toRight 2s linear infinite; 433 | animation-delay: -0.5s; 434 | } 435 | } 436 | @keyframes uac-sail-toRight{ 437 | 0%{ 438 | left: 0; 439 | transform:scale(0.5); 440 | opacity:0; 441 | } 442 | 25%{ 443 | opacity:1; 444 | transform:scale(1); 445 | } 446 | 75%{ 447 | opacity:1; 448 | transform:scale(1); 449 | } 450 | 100%{ 451 | transform:scale(0.5); 452 | opacity:0; 453 | left:100%; 454 | } 455 | } 456 | 457 | // ------------------- breath -------- 458 | .uac-loader-breath { 459 | width: 100px; 460 | height: 100px; 461 | position: absolute; 462 | left: 50%; 463 | top: 50%; 464 | margin: -50px 0 0 -50px; 465 | // animation: uac-loader-breath 2s cubic-bezier(0.59, 0.01, 0.52, 1.02) infinite; 466 | &>span { 467 | width: 100px; 468 | height: 100px; 469 | background-color: $dot-red; 470 | border-radius: 50%; 471 | position: absolute; 472 | top: 50%; 473 | left: 50%; 474 | margin-top: -50px; 475 | margin-left: -50px; 476 | opacity:0.7; 477 | animation: uac-loader-breath-color 8s cubic-bezier(0.59, 0.01, 0.52, 1.02) infinite, 478 | uac-loader-breath 2s cubic-bezier(0.59, 0.01, 0.52, 1.02) infinite; 479 | } 480 | &>span:nth-child(2){ 481 | animation-delay: 1s; 482 | } 483 | } 484 | @keyframes uac-loader-breath{ 485 | 0%{ 486 | transform: scale(0); 487 | } 488 | 50%{ 489 | transform: scale(1); 490 | } 491 | 100%{ 492 | transform: scale(0); 493 | } 494 | } 495 | @keyframes uac-loader-breath-color{ 496 | 0%{ 497 | background-color: $dot-red; 498 | } 499 | 25%{ 500 | background-color: $dot-blue; 501 | } 502 | 50%{ 503 | background-color: $dot-green; 504 | } 505 | 75%{ 506 | background-color: $dot-yellow; 507 | } 508 | } 509 | // ------------------------ http://codepen.io/The_Animator/pen/mpahL?editors=110 510 | .uac-loader-flipdot{ 511 | width: 100px; 512 | height: 100px; 513 | top: 50%; 514 | left: 50%; 515 | margin-left: -50px; 516 | margin-top: -50px; 517 | .semicircle { 518 | position: absolute; 519 | top: 50%; 520 | left: 50%; 521 | width: 40px; 522 | height: 40px; 523 | margin-left: -20px; 524 | margin-top: -20px; 525 | animation-fill-mode: both; 526 | animation-duration: 2.5s; 527 | animation-timing-function: linear; 528 | animation-iteration-count: infinite; 529 | } 530 | 531 | .semicircle .semicircle-inner { 532 | width: 40px; 533 | height: 20px; 534 | border-radius: 20px 20px 0 0; 535 | animation-fill-mode: both; 536 | animation-duration: 2.5s; 537 | animation-timing-function: linear; 538 | animation-iteration-count: infinite; 539 | } 540 | 541 | .semicircle.upper-base { 542 | animation-name: base-rotate; 543 | } 544 | .semicircle.upper-base .semicircle-inner { 545 | animation-name: upper-color; 546 | } 547 | .semicircle.upper-move { 548 | animation-name: upper-move; 549 | } 550 | .semicircle.upper-move .semicircle-inner { 551 | animation-name: lower-color-shadow; 552 | } 553 | .semicircle.lower-base { 554 | animation-name: base-rotate; 555 | } 556 | .semicircle.lower-base .semicircle-inner { 557 | border-radius: 0 0 20px 20px; 558 | margin-top: 20px; 559 | animation-name: lower-color; 560 | } 561 | .semicircle.lower-move { 562 | animation-name: lower-move; 563 | } 564 | .semicircle.lower-move .semicircle-inner { 565 | animation-name: upper-color-shadow; 566 | } 567 | } 568 | 569 | @keyframes upper-move { 570 | 0% { 571 | transform: rotateX(360deg) rotate(0deg); 572 | } 573 | 574 | 12.5% { 575 | transform: rotateX(270deg) rotate(0deg); 576 | } 577 | 578 | 25% { 579 | transform: rotateX(270deg) rotate(0deg); 580 | } 581 | 582 | 25.01% { 583 | transform: rotateY(90deg) rotate(270deg); 584 | } 585 | 586 | 37.5% { 587 | transform: rotateY(90deg) rotate(270deg); 588 | } 589 | 590 | 50% { 591 | transform: rotateY(0deg) rotate(270deg); 592 | } 593 | 594 | 50.01% { 595 | transform: rotateX(180deg) rotate(0deg); 596 | } 597 | 598 | 62.5% { 599 | transform: rotateX(270deg) rotate(0deg); 600 | } 601 | 602 | 75% { 603 | transform: rotateX(270deg) rotate(0deg); 604 | } 605 | 606 | 75.01% { 607 | transform: rotateY(270deg) rotate(90deg); 608 | } 609 | 610 | 87.5% { 611 | transform: rotateY(270deg) rotate(90deg); 612 | } 613 | 614 | 100% { 615 | transform: rotateY(360deg) rotate(90deg); 616 | } 617 | } 618 | 619 | 620 | 621 | @keyframes lower-move { 622 | 0% { 623 | transform: rotateX(270deg) rotate(0deg); 624 | } 625 | 626 | 12.5% { 627 | transform: rotateX(270deg) rotate(0deg); 628 | } 629 | 630 | 25% { 631 | transform: rotateX(180deg) rotate(0deg); 632 | } 633 | 634 | 25.01% { 635 | transform: rotateY(180deg) rotate(270deg); 636 | } 637 | 638 | 37.5% { 639 | transform: rotateY(270deg) rotate(270deg); 640 | } 641 | 50% { 642 | transform: rotateY(270deg) rotate(270deg); 643 | } 644 | 645 | 50.01% { 646 | transform: rotateX(270deg) rotate(0deg); 647 | } 648 | 649 | 62.5% { 650 | transform: rotateX(270deg) rotate(0deg); 651 | } 652 | 653 | 75% { 654 | transform: rotateX(360deg) rotate(0deg); 655 | } 656 | 657 | 75.01% { 658 | transform: rotateY(180deg) rotate(90deg); 659 | } 660 | 661 | 87.5% { 662 | transform: rotateY(270deg) rotate(90deg); 663 | } 664 | 665 | 100% { 666 | transform: rotateY(270deg) rotate(90deg); 667 | } 668 | } 669 | 670 | 671 | @keyframes base-rotate { 672 | 0% { 673 | transform: rotate(0deg); 674 | } 675 | 25% { 676 | transform: rotate(0deg); 677 | } 678 | 25.01% { 679 | transform: rotate(-90deg); 680 | } 681 | 50% { 682 | transform: rotate(-90deg); 683 | } 684 | 50.01% { 685 | transform: rotate(180deg); 686 | } 687 | 75% { 688 | transform: rotate(180deg); 689 | } 690 | 75.01% { 691 | transform: rotate(90deg); 692 | } 693 | 100% { 694 | transform: rotate(90deg); 695 | } 696 | } 697 | 698 | 699 | 700 | @keyframes upper-color { 701 | 0% { 702 | background: #f52d27; 703 | } 704 | 50% { 705 | background: #f52d27; 706 | } 707 | 50.01% { 708 | background: #00b262; 709 | } 710 | 100% { 711 | background: #00b262; 712 | } 713 | } 714 | 715 | 716 | @keyframes upper-color-shadow { 717 | 0% { 718 | background: #7d0906; 719 | } 720 | 25% { 721 | background: #f52d27; 722 | } 723 | 50% { 724 | background: #7d0906; 725 | } 726 | 50.01% { 727 | background: #00190e; 728 | } 729 | 75% { 730 | background: #00b262; 731 | } 732 | 100% { 733 | background: #00190e; 734 | } 735 | } 736 | 737 | 738 | 739 | @keyframes lower-color { 740 | 0% { 741 | background: #3a71f8; 742 | } 743 | 25% { 744 | background: #3a71f8; 745 | } 746 | 25.01% { 747 | background: #ffd539; 748 | } 749 | 75% { 750 | background: #ffd539; 751 | } 752 | 75.01% { 753 | background: #3a71f8; 754 | } 755 | 100% { 756 | background: #3a71f8; 757 | } 758 | } 759 | 760 | @keyframes lower-color-shadow { 761 | 0% { 762 | background: #3a71f8; 763 | } 764 | 25% { 765 | background: #052e94; 766 | } 767 | 25.01% { 768 | background: #9f7d00; 769 | } 770 | 50% { 771 | background: #ffd539; 772 | } 773 | 75% { 774 | background: #9f7d00; 775 | } 776 | 75.01% { 777 | background: #052e94; 778 | } 779 | 100% { 780 | background: #3a71f8; 781 | } 782 | } 783 | 784 | // ----------------------------- 785 | -------------------------------------------------------------------------------- /src/loader/loader2.scss: -------------------------------------------------------------------------------- 1 | // http://codepen.io/MichaelRyanSmith/pen/yyKWpq?editors=110 2 | .uac-loader.uac-loader-squarepuls{ 3 | width:106px; 4 | height: 106px; 5 | margin-left: -53px; 6 | 7 | &>span:nth-child(1),&>span:nth-child(2){ 8 | display: block; 9 | position: absolute; 10 | left:50%; 11 | top:50%; 12 | width: 76px; 13 | height: 76px; 14 | margin-top: -38px; 15 | margin-left: -38px; 16 | // margin-top: 0px auto; 17 | transform: rotate(45deg); 18 | &:after, &:before { 19 | position: absolute; 20 | content: ''; 21 | height: 10px; 22 | width: 10px; 23 | display: block; 24 | top: 0; 25 | border-radius: 3px; 26 | animation-delay: -.5s; 27 | } 28 | 29 | &:after { 30 | background: $dot-red ; 31 | right: 0; 32 | animation: square-tr 2s ease infinite; 33 | animation-delay: .125s; 34 | } 35 | 36 | &:before { 37 | background: $dot-blue ; 38 | animation: square-tl 2s ease infinite; 39 | animation-delay: .125s; 40 | } 41 | 42 | } 43 | &>span:nth-child(2){ 44 | position: relative; 45 | 46 | &:after, &:before { 47 | background: $dot-green ; 48 | bottom: 0; 49 | top: initial; 50 | } 51 | 52 | &:after { 53 | background: $dot-yellow ; 54 | animation: square-br 2s ease infinite; 55 | animation-direction: reverse; 56 | } 57 | 58 | &:before { 59 | animation: square-bl 2s ease infinite; 60 | animation-direction: reverse; 61 | } 62 | } 63 | &>span:nth-child(3){ // center square 64 | display: inline-block; 65 | position: absolute; 66 | background: map-get($color-indigo,'400') ; 67 | transform: rotate(45deg); 68 | height: 30px; 69 | width: 30px; 70 | left: 50%; 71 | top: 50%; 72 | margin-left: -15px; 73 | margin-top: -15px; 74 | border-radius: 3px; 75 | animation: pulse 1s ease infinite; 76 | } 77 | } 78 | @keyframes square-tl { 79 | 0% { 80 | transform: translate(0, 0); 81 | } 82 | 25% { 83 | transform: translate(0, 62.5px); 84 | } 85 | 50% { 86 | transform: translate(62.5px, 62.5px); 87 | } 88 | 75% { 89 | transform: translate(62.5px, 0); 90 | } 91 | } 92 | 93 | @keyframes square-bl { 94 | 0% { 95 | transform: translate(0, 0); 96 | } 97 | 25% { 98 | transform: translate(0, -62.5px); 99 | } 100 | 50% { 101 | transform: translate(62.5px, -62.5px); 102 | } 103 | 75% { 104 | transform: translate(62.5px, 0); 105 | } 106 | } 107 | 108 | @keyframes square-tr { 109 | 0% { 110 | transform: translate(0, 0); 111 | } 112 | 25% { 113 | transform: translate(-62.5px, 0); 114 | } 115 | 50% { 116 | transform: translate(-62.5px, 62.5px); 117 | } 118 | 75% { 119 | transform: translate(0, 62.5px); 120 | } 121 | } 122 | 123 | @keyframes square-br { 124 | 0% { 125 | transform: translate(0, 0); 126 | } 127 | 25% { 128 | transform: translate(-62.5px, 0); 129 | } 130 | 50% { 131 | transform: translate(-62.5px, -62.5px); 132 | } 133 | 75% { 134 | transform: translate(0, -62.5px); 135 | } 136 | } 137 | 138 | 139 | @keyframes pulse { 140 | 0%, 100% { 141 | transform: scale(inherit) rotate(45deg); 142 | } 143 | 75% { 144 | transform: scale(.25) rotate(45deg) 145 | } 146 | } 147 | 148 | // -------------------------- wave ------------ 149 | .uac-loader.uac-loader-wave{ 150 | width:100px; 151 | height: 100px; 152 | margin-left: -50px; 153 | padding-top: 20px; 154 | &>span{ 155 | width: 6px; 156 | height: 60px; 157 | display: inline-block; 158 | margin-right: 4px; 159 | background-color: red; 160 | animation: stretchdelay 1.2s infinite ease-in-out; 161 | } 162 | &>span:nth-child(1){ 163 | animation-delay: -1.2s; 164 | background: map-get($color-red,'400'); 165 | } 166 | &>span:nth-child(2){ 167 | animation-delay: -1.1s; 168 | background: map-get($color-pink,'400'); 169 | } 170 | &>span:nth-child(3){ 171 | animation-delay: -1s; 172 | background: map-get($color-deep-orange,'400'); 173 | } 174 | &>span:nth-child(4){ 175 | animation-delay: -0.9s; 176 | background: map-get($color-orange,'400'); 177 | } 178 | &>span:nth-child(5){ 179 | background: map-get($color-amber,'400'); 180 | animation-delay: -0.8s; 181 | } 182 | &>span:nth-child(6){ 183 | background: map-get($color-yellow,'400'); 184 | animation-delay: -0.7s; 185 | } 186 | } 187 | @keyframes stretchdelay { 188 | 0%, 40%, 100% { 189 | transform: scaleY(0.4); 190 | } 20% { 191 | transform: scaleY(1.0); 192 | } 193 | } 194 | 195 | // -------------------------- 196 | .uac-loader.uac-loader-orbit { 197 | position: absolute; 198 | width: 66px; 199 | left: 50%; 200 | margin-left: -33px; 201 | 202 | .uac-loader-dot { 203 | position: absolute; 204 | width: 66px; 205 | height: 66px; 206 | opacity: 0; 207 | transform: rotate(225deg); 208 | animation-iteration-count: infinite; 209 | animation-name: orbit; 210 | animation-duration: 5.5s; 211 | 212 | &:after { 213 | content: ''; 214 | position: absolute; 215 | width: 8px; 216 | height: 8px; 217 | border-radius: 8px; 218 | background: red; /* Pick a color */ 219 | } 220 | &:nth-child(1):after { background-color: map-get($color-light-green,'400'); } 221 | &:nth-child(2) { animation-delay: 240ms; 222 | &:after{ 223 | background-color: map-get($color-light-blue,'400'); 224 | } 225 | } 226 | &:nth-child(3) { animation-delay: 480ms; 227 | &:after{ 228 | background-color: map-get($color-purple,'400'); 229 | } 230 | } 231 | &:nth-child(4) { animation-delay: 720ms; 232 | &:after{ 233 | background-color: map-get($color-orange,'400'); 234 | } 235 | } 236 | &:nth-child(5) { animation-delay: 960ms; 237 | &:after{ 238 | background-color: map-get($color-pink,'400'); 239 | } 240 | } 241 | } 242 | } 243 | 244 | @keyframes orbit { 245 | 0% { transform:rotate(225deg); opacity: 1; 246 | animation-timing-function: ease-out; } 247 | 248 | 7% { transform:rotate(345deg); 249 | animation-timing-function: linear; } 250 | 251 | 30% { transform:rotate(455deg); 252 | animation-timing-function: ease-in-out; } 253 | 254 | 39% { transform:rotate(690deg); 255 | animation-timing-function: linear; } 256 | 257 | 70% { transform:rotate(815deg); opacity: 1; 258 | animation-timing-function: ease-out; } 259 | 260 | 75% { transform:rotate(945deg); 261 | animation-timing-function: ease-out; } 262 | 263 | 76% { transform:rotate(945deg); opacity: 0; } 264 | 100% { transform:rotate(945deg); opacity: 0; } 265 | } -------------------------------------------------------------------------------- /src/modal/modal.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TODO 3 | * 1.load custom template via xhr request,then compile template 4 | * 5 | * 6 | */ 7 | ua.factory('$uaModal',[function(){ 8 | 9 | class Modal { 10 | constructor( opt ) { 11 | this.type = opt.type || 'confirm';// prompt 12 | // this.event = opt.event; // get starting x,y position 13 | 14 | } 15 | 16 | _show(){ 17 | 18 | } 19 | 20 | _destory( ){ 21 | 22 | } 23 | 24 | alter(message){ 25 | 26 | } 27 | 28 | confirm( message ){ 29 | 30 | } 31 | 32 | prompt( message ){ 33 | 34 | } 35 | 36 | custom( opt ){ 37 | 38 | 39 | } 40 | 41 | 42 | } 43 | 44 | return function(opt){ 45 | return new Modal( opt ); 46 | } 47 | 48 | }]) -------------------------------------------------------------------------------- /src/modal/modal.scss: -------------------------------------------------------------------------------- 1 | .ua-modal{ 2 | 3 | } 4 | 5 | .ua-modal.modal-jelly{ 6 | 7 | } 8 | 9 | .ua-modal.modal-scale{ 10 | 11 | } 12 | 13 | .ua-modal.modal-flip{ 14 | 15 | } 16 | 17 | .ua-modal.modal-flipBounce{ 18 | 19 | } -------------------------------------------------------------------------------- /src/notify/notify.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TODO. 3 | * 1.hover over to pause suicide timeout 4 | * 2. 5 | */ 6 | 7 | ua.factory('$uaNotify',function(){ 8 | /** 9 | * store id for notification; 10 | */ 11 | var id = 0; 12 | // store all added notify, so according previous notify, we can postion next notify 13 | // [instacne,instance] 14 | window.notifiers = []; 15 | 16 | class Notify{ 17 | constructor( opt ){ 18 | this.id = opt.id || _idGen(); 19 | this.container = opt.container || document.body ; 20 | this.life = opt.life || 4000, 21 | // defaults to true; 22 | this.clickToHide = !opt.clickNotHide; 23 | this.type = opt.type || 'block';// full, block 24 | 25 | this.theme = ['flip','bouncyflip','jelly','scale','slide','genie'].indexOf(opt.theme)?opt.theme:'flip'; 26 | /** 27 | * if type is block, you have to provide alignment 28 | */ 29 | this.alignVertical = opt.alignVertical == 'bottom'? 'bottom' : 'top'; 30 | this.alignHorizontal = opt.alignHorizontal == 'left'? 'left' : 'right'; 31 | 32 | this.wraper = this.getWraper( this.container ); 33 | } 34 | /** 35 | * in order to show mutible 36 | * @return {[type]} [description] 37 | */ 38 | getWraper(container){ 39 | var wraper = document.getElementById('ua-notify-waper'); 40 | if(!wraper ){ 41 | wraper = document.createElement( 'div' ); 42 | container.appendChild(wraper); 43 | wraper.id = 'ua-notify-waper'; 44 | wraper.style.position = 'absolute'; 45 | 46 | } 47 | 48 | wraper.style[ this.alignVertical ] = '0'; 49 | if(this.alignVertical == 'top'){ 50 | wraper.style[ 'bottom' ] = 'auto'; 51 | }else{ 52 | wraper.style[ 'top' ] = 'auto'; 53 | } 54 | 55 | 56 | wraper.style[ this.alignHorizontal ] = '0'; 57 | 58 | if(this.type == 'full') wraper.style.width ='100%'; 59 | 60 | return wraper; 61 | } 62 | 63 | _showMsg (type,msg,title){ 64 | 65 | this.elm = document.createElement('div'); 66 | this.elm.classList.add('clearfix'); 67 | 68 | var styleString = ''; 69 | if(this.type == 'block'){ 70 | styleString = 'float:'+ this.alignHorizontal; 71 | } 72 | 73 | var titleTpl = '
'+title+'
'; 74 | var tpl = `
75 | ${title? titleTpl : ''}

${msg}

76 |
` 77 | 78 | this.elm.innerHTML = tpl; 79 | 80 | // append to container 81 | this.wraper.appendChild(this.elm); 82 | 83 | if(this.clickToHide){ 84 | this.elm.onclick = this.suicide.bind(this); 85 | } 86 | // suicide timer 87 | setTimeout( this.suicide.bind(this), this.life ); 88 | } 89 | 90 | 91 | /** 92 | * for suicide: remove element and remove itself from notifiers array; 93 | */ 94 | suicide(){ 95 | // prevent click multi times 96 | if( this.leaving ) return; 97 | 98 | this.leaving = true; 99 | 100 | this.elm.children[0].classList.add('ua-notify-hidding'); 101 | 102 | setTimeout(function(){ 103 | notifiers.shift(); 104 | this.leaving = false; 105 | 106 | this.elm.remove(); 107 | }.bind(this),500) 108 | } 109 | 110 | error( msg, title ){ 111 | this._showMsg('error',msg,title ); 112 | } 113 | 114 | success(msg, title){ 115 | Array.prototype.unshift.call(arguments,'success'); 116 | this._showMsg.apply(this, arguments ) 117 | } 118 | 119 | info(msg, title){ 120 | Array.prototype.unshift.call(arguments,'info'); 121 | this._showMsg.apply(this, arguments ) 122 | } 123 | 124 | warn(msg, title){ 125 | Array.prototype.unshift.call(arguments,'warn'); 126 | this._showMsg.apply(this, arguments ) 127 | } 128 | } 129 | 130 | function _idGen(prefix){ 131 | return (prefix||'uaNoti-elm-') + id++; 132 | } 133 | 134 | function registerAllMethod( instance, defaultOption ){ 135 | ['error','warn','info','success'].forEach(function( property,index ){ 136 | instance[ property ] = (msg,title) =>{ 137 | instance.notifier = new Notify( instance.options || defaultOption ); 138 | notifiers.push( instance.notifier ); 139 | return instance.notifier[ property ](msg,title); 140 | } 141 | 142 | }) 143 | } 144 | 145 | return ( ()=>{ 146 | var defaultOption = { 147 | container: document.body, 148 | life: 4000, 149 | type: 'full', 150 | position: { 151 | top: '0px', 152 | left: '0px', 153 | } 154 | }; 155 | 156 | var notifier = { 157 | options:null, 158 | notifier: null, 159 | } 160 | 161 | registerAllMethod( notifier , defaultOption ); 162 | 163 | notifier.config = (opt) =>{ 164 | if(typeof opt != 'object') throw Error('option must be an object'); 165 | this.options = opt; 166 | } 167 | 168 | notifier.create = (opt)=>{ 169 | notifier.config(opt); 170 | 171 | this.notifier = new Notify(opt); 172 | notifiers.push(this.notifier); 173 | 174 | return this.notifier; 175 | } 176 | 177 | return notifier 178 | 179 | })() 180 | 181 | 182 | }); -------------------------------------------------------------------------------- /src/notify/notify.scss: -------------------------------------------------------------------------------- 1 | #ua-notify-waper{ 2 | position:absolute; 3 | height: auto; 4 | // left:0; 5 | z-index: 100; 6 | &>div{ 7 | pointer-events:none; 8 | } 9 | &>div:first-of-type .notify-block{ 10 | margin-top: 1em; 11 | } 12 | } 13 | .ua-notify{ 14 | padding:1em; 15 | // width:auto; 16 | color: #fff; 17 | cursor: pointer; 18 | pointer-events:all; 19 | // transition: all 0.3s ease; 20 | // transition: top 0.3s ease-out; 21 | // animation: noti-showDown 0.3s ease-out; 22 | .notify-title{ 23 | margin:0; 24 | font-size: 1.5em; 25 | } 26 | p{ 27 | margin:0; 28 | } 29 | &.notify-block{ 30 | width: auto; 31 | display:inline-block; 32 | max-width: 400px; 33 | border-radius: 3px; 34 | margin: 0.2em 1em; 35 | box-shadow: 0 2px 12px rgba(0,0,0,0.2); 36 | } 37 | 38 | &.notify-full{ 39 | width: 100%; 40 | text-align: center; 41 | } 42 | &.notify-error{ 43 | // background-color: map-get($color-red,'400'); 44 | background-color: rgba(239,83,80, 0.9); 45 | } 46 | &.notify-info{ 47 | // background-color: map-get($color-orange,'400'); 48 | background-color: rgba(66,165,245,0.9) 49 | } 50 | &.notify-success{ 51 | // background-color: map-get($color-green,'400'); 52 | background-color: rgba(102,187,106,0.9) 53 | } 54 | &.notify-warn{ 55 | // background-color: map-get($color-orange,'400'); 56 | background-color: rgba(255,167,38,0.9) 57 | } 58 | 59 | 60 | } 61 | 62 | [class^="ua-notify"].ua-notify.ua-notify-hidding, 63 | [class*=" ua-notify-"].ua-notify.ua-notify-hidding { 64 | -webkit-animation-direction: reverse; 65 | animation-direction: reverse; 66 | animation-fill-mode: forwards; 67 | } 68 | // =================== differnt themes ============= 69 | .ua-notify-flip { 70 | -webkit-transform-origin: 50% 0; 71 | transform-origin: 50% 0; 72 | // bottom: 0px; 73 | // font-size: 1.15em; 74 | // padding: 1.5em; 75 | // max-width: 280px; 76 | backface-visibility: hidden; 77 | } 78 | 79 | .ua-notify-flip, 80 | .ua-notify-flip.ua-notify-hidding { 81 | -webkit-animation-name: animFlipFront; 82 | animation-name: animFlipFront; 83 | -webkit-animation-duration: 0.3s; 84 | animation-duration: 0.3s; 85 | } 86 | 87 | .ua-notify-flip.ua-notify-hidding { 88 | -webkit-animation-name: animFlipBack; 89 | animation-name: animFlipBack; 90 | } 91 | 92 | 93 | @keyframes animFlipFront { 94 | 0% { -webkit-transform: perspective(1000px) rotate3d(1,0,0,-90deg); transform: perspective(1000px) rotate3d(1,0,0,-90deg); } 95 | 100% { -webkit-transform: perspective(1000px); transform: perspective(1000px); } 96 | } 97 | 98 | 99 | @keyframes animFlipBack { 100 | 0% { -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg); transform: perspective(1000px) rotate3d(1,0,0,90deg); } 101 | 100% { -webkit-transform: perspective(1000px); transform: perspective(1000px); } 102 | } 103 | 104 | /* Bouncy Flip adapted from animate.css by Dan Eden: http://daneden.github.io/animate.css/ */ 105 | .ua-notify-bouncyflip { 106 | -webkit-transform-origin: 50% 0%; 107 | transform-origin: 50% 0%; 108 | top: 0; 109 | } 110 | 111 | .ua-notify-bouncyflip, 112 | .ua-notify-bouncyflip.ua-notify-hidding { 113 | -webkit-animation-name: flipInX; 114 | animation-name: flipInX; 115 | -webkit-animation-duration: 0.8s; 116 | animation-duration: 0.8s; 117 | } 118 | 119 | @keyframes flipInX { 120 | 0% { 121 | -webkit-transform: perspective(400px) rotate3d(1,0,0,-90deg); 122 | transform: perspective(400px) rotate3d(1,0,0,-90deg); 123 | -webkit-transition-timing-function: ease-in; 124 | transition-timing-function: ease-in; 125 | } 126 | 127 | 40% { 128 | -webkit-transform: perspective(400px) rotate3d(1,0,0,20deg); 129 | transform: perspective(400px) rotate3d(1,0,0,20deg); 130 | -webkit-transition-timing-function: ease-out; 131 | transition-timing-function: ease-out; 132 | } 133 | 134 | 60% { 135 | -webkit-transform: perspective(400px) rotate3d(1,0,0,-10deg); 136 | transform: perspective(400px) rotate3d(1,0,0,-10deg); 137 | -webkit-transition-timing-function: ease-in; 138 | transition-timing-function: ease-in; 139 | opacity: 1; 140 | } 141 | 142 | 80% { 143 | -webkit-transform: perspective(400px) rotate3d(1,0,0,5deg); 144 | transform: perspective(400px) rotate3d(1,0,0,5deg); 145 | -webkit-transition-timing-function: ease-out; 146 | transition-timing-function: ease-out; 147 | } 148 | 149 | 100% { 150 | -webkit-transform: perspective(400px); 151 | transform: perspective(400px); 152 | } 153 | } 154 | 155 | .ua-notify-bouncyflip.ua-notify-hidding { 156 | -webkit-animation-name: flipInXSimple; 157 | animation-name: flipInXSimple; 158 | -webkit-animation-duration: 0.3s; 159 | animation-duration: 0.3s; 160 | } 161 | 162 | 163 | @keyframes flipInXSimple { 164 | 0% { 165 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg); 166 | transform: perspective(400px) rotate3d(1, 0, 0, -90deg); 167 | -webkit-transition-timing-function: ease-in; 168 | transition-timing-function: ease-in; 169 | } 170 | 100% { 171 | -webkit-transform: perspective(400px); 172 | transform: perspective(400px); 173 | } 174 | } 175 | 176 | // ============================================================================ 177 | .ua-notify-scale { 178 | } 179 | 180 | .ua-notify-scale,.ua-notify-jelly.ua-notify-hidding{ 181 | animation-name: animScale; 182 | animation-duration: 0.25s; 183 | } 184 | 185 | .ua-notify-jelly.ua-notify-hidding { 186 | transition: transform 0.3s ,opacity 0.3s; 187 | } 188 | 189 | @keyframes animScale { 190 | 0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); } 191 | 100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); transform: translate3d(0,0,0) scale3d(1,1,1); } 192 | } 193 | 194 | /* Jelly */ 195 | .ua-notify-jelly { 196 | } 197 | 198 | 199 | .ua-notify-jelly { 200 | animation-name: animJelly; 201 | animation-duration: 1s; 202 | animation-timing-function: linear; 203 | } 204 | 205 | .ua-notify-jelly.ua-notify-hidding { 206 | -webkit-animation-name: animFade; 207 | animation-name: animFade; 208 | -webkit-animation-duration: 0.3s; 209 | animation-duration: 0.3s; 210 | } 211 | 212 | @keyframes animFade { 213 | 0% { opacity: 0; } 214 | 100% { opacity: 1; } 215 | } 216 | 217 | /* Generated with Bounce.js. Edit at http://goo.gl/6iLZu5 */ 218 | @keyframes animJelly { 219 | 0% { -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 220 | 2.083333% { -webkit-transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 221 | 4.166667% { -webkit-transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 222 | 6.25% { -webkit-transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 223 | 8.333333% { -webkit-transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 224 | 10.416667% { -webkit-transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 225 | 12.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 226 | 14.583333% { -webkit-transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 227 | 16.666667% { -webkit-transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 228 | 18.75% { -webkit-transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 229 | 20.833333% { -webkit-transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 230 | 22.916667% { -webkit-transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 231 | 25% { -webkit-transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 232 | 27.083333% { -webkit-transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 233 | 29.166667% { -webkit-transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 234 | 31.25% { -webkit-transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 235 | 33.333333% { -webkit-transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 236 | 35.416667% { -webkit-transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 237 | 37.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 238 | 39.583333% { -webkit-transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 239 | 41.666667% { -webkit-transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 240 | 43.75% { -webkit-transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 241 | 45.833333% { -webkit-transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 242 | 47.916667% { -webkit-transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 243 | 50% { -webkit-transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 244 | 52.083333% { -webkit-transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 245 | 54.166667% { -webkit-transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 246 | 56.25% { -webkit-transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 247 | 58.333333% { -webkit-transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 248 | 60.416667% { -webkit-transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 249 | 62.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 250 | 64.583333% { -webkit-transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 251 | 66.666667% { -webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 252 | 68.75% { -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 253 | 70.833333% { -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 254 | 72.916667% { -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 255 | 75% { -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 256 | 77.083333% { -webkit-transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 257 | 79.166667% { -webkit-transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 258 | 81.25% { -webkit-transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 259 | 83.333333% { -webkit-transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 260 | 85.416667% { -webkit-transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 261 | 87.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 262 | 89.583333% { -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 263 | 91.666667% { -webkit-transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 264 | 93.75% { -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 265 | 95.833333% { -webkit-transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 266 | 97.916667% { -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 267 | 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 268 | } 269 | 270 | /* Slide */ 271 | .ua-notify-slide { 272 | } 273 | 274 | 275 | .ua-notify-slide { 276 | -webkit-animation-name: animSlideElastic; 277 | animation-name: animSlideElastic; 278 | -webkit-animation-duration: 1s; 279 | animation-duration: 1s; 280 | -webkit-animation-timing-function: linear; 281 | animation-timing-function: linear; 282 | } 283 | 284 | /* Generated with Bounce.js. Edit at http://goo.gl/akZHSq */ 285 | 286 | @keyframes animSlideElastic { 287 | 0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1000, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1000, 0, 0, 1); } 288 | 1.666667% { -webkit-transform: matrix3d(1.92933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -739.26805, 0, 0, 1); transform: matrix3d(1.92933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -739.26805, 0, 0, 1); } 289 | 3.333333% { -webkit-transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.82545, 0, 0, 1); transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.82545, 0, 0, 1); } 290 | 5% { -webkit-transform: matrix3d(1.70901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -349.26115, 0, 0, 1); transform: matrix3d(1.70901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -349.26115, 0, 0, 1); } 291 | 6.666667% { -webkit-transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -218.3238, 0, 0, 1); transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -218.3238, 0, 0, 1); } 292 | 8.333333% { -webkit-transform: matrix3d(1.21065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.29848, 0, 0, 1); transform: matrix3d(1.21065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.29848, 0, 0, 1); } 293 | 10% { -webkit-transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -57.59273, 0, 0, 1); transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -57.59273, 0, 0, 1); } 294 | 11.666667% { -webkit-transform: matrix3d(1.0165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.72371, 0, 0, 1); transform: matrix3d(1.0165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.72371, 0, 0, 1); } 295 | 13.333333% { -webkit-transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.12794, 0, 0, 1); transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.12794, 0, 0, 1); } 296 | 15% { -webkit-transform: matrix3d(0.98478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.86339, 0, 0, 1); transform: matrix3d(0.98478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.86339, 0, 0, 1); } 297 | 16.666667% { -webkit-transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.40503, 0, 0, 1); transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.40503, 0, 0, 1); } 298 | 18.333333% { -webkit-transform: matrix3d(0.9916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.75275, 0, 0, 1); transform: matrix3d(0.9916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.75275, 0, 0, 1); } 299 | 20% { -webkit-transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.10141, 0, 0, 1); transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.10141, 0, 0, 1); } 300 | 21.666667% { -webkit-transform: matrix3d(0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.98271, 0, 0, 1); transform: matrix3d(0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.98271, 0, 0, 1); } 301 | 23.333333% { -webkit-transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.40752, 0, 0, 1); transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.40752, 0, 0, 1); } 302 | 25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.99558, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.99558, 0, 0, 1); } 303 | 26.666667% { -webkit-transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.08575, 0, 0, 1); transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.08575, 0, 0, 1); } 304 | 28.333333% { -webkit-transform: matrix3d(1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.82507, 0, 0, 1); transform: matrix3d(1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.82507, 0, 0, 1); } 305 | 30% { -webkit-transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.23737, 0, 0, 1); transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.23737, 0, 0, 1); } 306 | 31.666667% { -webkit-transform: matrix3d(1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.27389, 0, 0, 1); transform: matrix3d(1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.27389, 0, 0, 1); } 307 | 33.333333% { -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.84893, 0, 0, 1); transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.84893, 0, 0, 1); } 308 | 35% { -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.86364, 0, 0, 1); transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.86364, 0, 0, 1); } 309 | 36.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22079, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22079, 0, 0, 1); } 310 | 38.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16687, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16687, 0, 0, 1); } 311 | 40% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.37284, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.37284, 0, 0, 1); } 312 | 41.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.45594, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.45594, 0, 0, 1); } 313 | 43.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.46116, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.46116, 0, 0, 1); } 314 | 45% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.4214, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.4214, 0, 0, 1); } 315 | 46.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.35963, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.35963, 0, 0, 1); } 316 | 48.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.29103, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.29103, 0, 0, 1); } 317 | 50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22487, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22487, 0, 0, 1); } 318 | 51.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16624, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16624, 0, 0, 1); } 319 | 53.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.11734, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.11734, 0, 0, 1); } 320 | 55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.07854, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.07854, 0, 0, 1); } 321 | 56.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.04909, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.04909, 0, 0, 1); } 322 | 58.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.02773, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.02773, 0, 0, 1); } 323 | 60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01295, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01295, 0, 0, 1); } 324 | 61.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00331, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00331, 0, 0, 1); } 325 | 63.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0025, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0025, 0, 0, 1); } 326 | 65% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00559, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00559, 0, 0, 1); } 327 | 66.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00684, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00684, 0, 0, 1); } 328 | 68.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00692, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00692, 0, 0, 1); } 329 | 70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00632, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00632, 0, 0, 1); } 330 | 71.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00539, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00539, 0, 0, 1); } 331 | 73.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00436, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00436, 0, 0, 1); } 332 | 75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00337, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00337, 0, 0, 1); } 333 | 76.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00249, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00249, 0, 0, 1); } 334 | 78.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00176, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00176, 0, 0, 1); } 335 | 80% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00118, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00118, 0, 0, 1); } 336 | 81.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00074, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00074, 0, 0, 1); } 337 | 83.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00042, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00042, 0, 0, 1); } 338 | 85% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00019, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00019, 0, 0, 1); } 339 | 86.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00005, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00005, 0, 0, 1); } 340 | 88.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00004, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00004, 0, 0, 1); } 341 | 90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); } 342 | 91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); } 343 | 93.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); } 344 | 95% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00009, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00009, 0, 0, 1); } 345 | 96.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); } 346 | 98.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00007, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00007, 0, 0, 1); } 347 | 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 348 | } 349 | 350 | .ua-notify-slide.ua-notify-hidding { 351 | -webkit-animation-name: animSlide; 352 | animation-name: animSlide; 353 | -webkit-animation-duration: 0.25s; 354 | animation-duration: 0.25s; 355 | } 356 | 357 | 358 | @keyframes animSlide { 359 | 0% { transform: translate3d(-30px,0,0) translate3d(-100%,0,0);opacity:0} 360 | 100% { transform: translate3d(0,0,0);opacity:1; } 361 | } 362 | 363 | /* Fly up */ 364 | .ua-notify-genie { 365 | // top: auto; 366 | // bottom: 30px; 367 | } 368 | 369 | .ua-notify-genie, 370 | .ua-notify-genie.ua-notify-hidding { 371 | animation-name: animGenie; 372 | animation-duration: 0.4s; 373 | } 374 | .ua-notify-genie.ua-notify-hidding{ 375 | animation-name: fade; 376 | animation-duration: 0.4s; 377 | } 378 | 379 | @keyframes animGenie { 380 | 0% { opacity:0; -webkit-transform: translate3d(0,calc(200% + 30px),0) scale3d(0,1,1); -webkit-animation-timing-function: ease-in; transform: translate3d(0,calc(200% + 30px),0) scale3d(0,1,1); animation-timing-function: ease-in; } 381 | 40% { opacity:0.5; -webkit-transform: translate3d(0,0,0) scale3d(0.02,1.1,1); -webkit-animation-timing-function: ease-out; transform: translate3d(0,0,0) scale3d(0.02,1.1,1); animation-timing-function: ease-out; } 382 | 70% { opacity:0.6; -webkit-transform: translate3d(0,-40px,0) scale3d(0.8,1.1,1); transform: translate3d(0,-40px,0) scale3d(0.8,1.1,1); } 383 | 100% { opacity:1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); transform: translate3d(0,0,0) scale3d(1,1,1); } 384 | } 385 | 386 | -------------------------------------------------------------------------------- /src/toggle/toggle.js: -------------------------------------------------------------------------------- 1 | ua.directive('uaToggleBarArrow',function(){ 2 | return { 3 | restric:'EA', 4 | template:'Menu \ 5 | \ 6 | \ 7 | \ 8 | \ 9 | ', 10 | replace:true, 11 | scope:{}, 12 | link:function($scope,elm,attrs,ctrl){ 13 | var isLateralNavAnimating = false; 14 | var direction = (attrs.uaDirection && attrs.uaDirection == 'right') ? 'uac-right' : 'uac-left'; 15 | 16 | elm.addClass(direction); 17 | 18 | elm.on('click',function(e){ 19 | // e.preventDefault(); 20 | elm.toggleClass('open'); 21 | isLateralNavAnimating = !isLateralNavAnimating; 22 | }); 23 | } 24 | } 25 | }) 26 | 27 | ua.directive('uaToggleBarCircle',function(){ 28 | return { 29 | restric:'EA', 30 | template:'
\ 31 |
\ 32 | \ 33 | \ 34 |
\ 35 |
', 36 | replace:true, 37 | scope:{}, 38 | link:function($scope,elm,attrs,ctrl){ 39 | var isLateralNavAnimating = false; 40 | var theme = (attrs.uaTheme && attrs.uaTheme == 'dark') ? 'uac-dark' : 'uac-light'; 41 | 42 | elm.addClass(theme); 43 | 44 | elm.on('click',function(e){ 45 | // e.preventDefault(); 46 | elm.toggleClass('uac-close'); 47 | isLateralNavAnimating = !isLateralNavAnimating; 48 | }); 49 | } 50 | } 51 | }) 52 | 53 | ua.directive('uaToggleSwitch',function(){ 54 | return { 55 | restrict:'EA', 56 | template:function(elm,attr){ 57 | var id = Math.floor(1+Math.random()*10000); 58 | return '
\ 59 | \ 60 | \ 61 |
' 62 | }, 63 | replace: true, 64 | scope:{}, 65 | link:function( $scope,elm,attrs,ctrl){ 66 | var themes = ['skewed','ios','light','flat','flip'] 67 | var theme = (attrs.uaTheme && themes.indexOf(attrs.uaTheme) != -1 )? attrs.uaTheme : 'ios'; 68 | elm.find('input').addClass( 'uac-toggle-switch-'+theme ); 69 | 70 | }, 71 | } 72 | }); 73 | -------------------------------------------------------------------------------- /src/toggle/toggle.scss: -------------------------------------------------------------------------------- 1 | $bg_color: #243040; // Ebony Clay 2 | $front_color: #ffffff; // White 3 | 4 | // fonts 5 | 6 | $primary-font: 'Open Sans', sans-serif; 7 | $secondary-font: 'Merriweather', serif; 8 | 9 | // animation 10 | $animation-duration: 0.7s; 11 | 12 | .uac-toggle-bararrow { 13 | display: block; 14 | position: relative; 15 | z-index: 3; 16 | 17 | height: 54px; 18 | width: 54px; 19 | background-color: $bg_color; 20 | border-radius: 50%; 21 | margin: 10px; 22 | 23 | /* image replacement */ 24 | overflow: hidden; 25 | text-indent: 100%; 26 | white-space: nowrap; 27 | 28 | transition:transform 0.5s; 29 | 30 | .uac-togglebararrow-bar { 31 | /* icon created in CSS */ 32 | position: absolute; 33 | @include center; // mixin inside partials > _mixins.scss 34 | width: 22px; 35 | height: 2px; 36 | background-color: $front_color; 37 | 38 | &::before, &:after { 39 | /* upper and lower lines of the menu icon */ 40 | content: ''; 41 | position: absolute; 42 | top: 0; 43 | right: 0; 44 | width: 100%; 45 | height: 100%; 46 | background-color: inherit; 47 | 48 | /* Force Hardware Acceleration in WebKit */ 49 | transform:translateZ(0); 50 | -webkit-backface-visibility: hidden; 51 | backface-visibility: hidden; 52 | 53 | transition: transform 0.5s, width 0.5s, top .3s ; 54 | } 55 | 56 | &::before { 57 | transform-origin:right top; 58 | transform: translateY(-6px); 59 | } 60 | 61 | &::after { 62 | transform-origin:right bottom; 63 | transform:translateY(6px); 64 | } 65 | 66 | } 67 | 68 | .no-touch &:hover .uac-togglebararrow-bar::after { 69 | top: 2px; 70 | } 71 | 72 | .no-touch &:hover .uac-togglebararrow-bar::before { 73 | top: -2px; 74 | } 75 | 76 | svg { 77 | position: absolute; 78 | top: 0; 79 | left: 0; 80 | } 81 | 82 | circle { 83 | /* circle border animation */ 84 | transition:stroke-dashoffset 0.4s 0s; 85 | } 86 | &.uac-right{ 87 | .uac-togglebararrow-bar { 88 | &::before { 89 | left:0; 90 | transform-origin:left top; 91 | transform: translateY(-6px); 92 | } 93 | 94 | &::after { 95 | left:0; 96 | transform-origin:left bottom; 97 | transform:translateY(6px); 98 | } 99 | 100 | } 101 | } 102 | .open>&, &.open { 103 | /* rotate trigger when navigation becomes visible */ 104 | transform:rotate(180deg); 105 | 106 | .uac-togglebararrow-bar::after, 107 | .uac-togglebararrow-bar::before { 108 | /* animate arrow --> from hamburger to arrow */ 109 | width: 50%; 110 | transition:transform 0.5s, width 0.5s; 111 | } 112 | 113 | .uac-togglebararrow-bar::before { 114 | transform:rotate(45deg); 115 | } 116 | 117 | .uac-togglebararrow-bar::after { 118 | transform:rotate(-45deg); 119 | } 120 | 121 | .no-touch &:hover .uac-togglebararrow-bar::after, 122 | .no-touch &:hover .uac-togglebararrow-bar::before { 123 | top: 0; 124 | } 125 | 126 | circle { 127 | stroke-dashoffset: 0; 128 | transition:stroke-dashoffset 0.4s 0.3s; 129 | } 130 | &.uac-right{ 131 | transform:rotate(-180deg); 132 | .uac-togglebararrow-bar::before { 133 | transform:rotate(-45deg); 134 | } 135 | 136 | .uac-togglebararrow-bar::after { 137 | transform:rotate(45deg); 138 | left: 0; 139 | } 140 | } 141 | } 142 | } 143 | 144 | 145 | // -------------------------------- 146 | .uac-toggle-barcircle { 147 | float: left; 148 | cursor: pointer; 149 | position: relative; 150 | display: block; 151 | width: 68px; 152 | height: 68px; 153 | -webkit-touch-callout: none; 154 | -webkit-user-select: none; 155 | -moz-user-select: none; 156 | -ms-user-select: none; 157 | user-select: none; 158 | margin: 10px; 159 | /*--- make the size fit you need ---*/ 160 | transform:scale(0.8); 161 | .uac-bottom,.uac-top{ 162 | background: #fff; 163 | position: absolute; 164 | display: block; 165 | height: 4px; 166 | width: 36px; 167 | border-radius: 2px; 168 | 169 | transform-origin: 34px 2px; 170 | transform: rotate(0deg); 171 | transition: all 500ms cubic-bezier(0.8, -1.1, 0.5, 1.9); 172 | } 173 | .uac-top{ 174 | top: 19px; 175 | left: 14px; 176 | } 177 | .uac-bottom{ 178 | top: 41px; 179 | left: 14px; 180 | } 181 | path,line{ 182 | stroke: white; 183 | stroke-linecap: round; 184 | } 185 | .uac-circle { 186 | display: inline-block; 187 | border-radius: 50px; 188 | vertical-align: middle; 189 | margin: 0 5px; 190 | 191 | stroke-dasharray: 1 100 32 300; 192 | stroke-dashoffset: 101; 193 | transition: all 750ms ease; 194 | } 195 | &.uac-close{ 196 | .uac-top{ 197 | transform: translateX(-4.5px) rotate(-45deg); 198 | } 199 | .uac-bottom{ 200 | transform: translateX(-4.5px) rotate(45deg); 201 | } 202 | .uac-circle { 203 | stroke-dasharray: 1 100 190 300; 204 | stroke-dashoffset: 1; 205 | } 206 | } 207 | &.uac-dark{ 208 | .uac-bottom,.uac-top{ 209 | background: #333; 210 | } 211 | path,line{ 212 | stroke: #333; 213 | } 214 | } 215 | } 216 | // ---------------------------------- 217 | // ---------------------------- http://codepen.io/mallendeo/pen/eLIiG ----- 218 | .uac-toggle-switch{ 219 | display: none; 220 | // add default box-sizing for this scope 221 | &, &:after, &:before, 222 | & *, & *:after, & *:before, 223 | & + .uac-toggle-switch-btn{ 224 | box-sizing: border-box; 225 | &::selection{ 226 | background: none; 227 | } 228 | } 229 | + .uac-toggle-switch-btn{ 230 | outline: 0; 231 | display: block; 232 | width: 4em; 233 | height: 2em; 234 | position: relative; 235 | cursor: pointer; 236 | user-select: none; 237 | &:after, &:before{ 238 | position: relative; 239 | display: block; 240 | content: ""; 241 | width: 50%; 242 | height: 100%; 243 | } 244 | &:after{ 245 | left: 0; 246 | } 247 | &:before{ 248 | display: none; 249 | } 250 | } 251 | &:checked{ 252 | + .uac-toggle-switch-btn{ 253 | &:after{ 254 | left: 50%; 255 | } 256 | } 257 | } 258 | } 259 | .uac-toggle-switch-ios{ 260 | + .uac-toggle-switch-btn{ 261 | background: #fbfbfb; 262 | border-radius: 2em; 263 | padding: 2px; 264 | transition: all .4s ease; 265 | border: 1px solid #e8eae9; 266 | &:after{ 267 | border-radius: 2em; 268 | background: #fbfbfb; 269 | transition: 270 | left .3s cubic-bezier( 271 | 0.175, 0.885, 0.320, 1.275 272 | ), 273 | padding .3s ease, margin .3s ease; 274 | box-shadow: 275 | 0 0 0 1px rgba(0,0,0,.1), 276 | 0 4px 0 rgba(0,0,0,.08); 277 | } 278 | &:active{ 279 | box-shadow: inset 0 0 0 2em #e8eae9; 280 | &:after{ 281 | padding-right: .8em; 282 | } 283 | } 284 | } 285 | &:checked{ 286 | + .uac-toggle-switch-btn{ 287 | background: #86d993; 288 | &:active{ 289 | box-shadow: none; 290 | &:after{ 291 | margin-left: -.8em; 292 | } 293 | } 294 | } 295 | } 296 | } 297 | // themes 298 | .uac-toggle-switch-light{ 299 | + .uac-toggle-switch-btn{ 300 | background: #f0f0f0; 301 | border-radius: 2em; 302 | padding: 2px; 303 | transition: all .4s ease; 304 | &:after{ 305 | border-radius: 50%; 306 | background: #fff; 307 | transition: all .2s ease; 308 | } 309 | } 310 | &:checked{ 311 | + .uac-toggle-switch-btn{ 312 | background: #9FD6AE; 313 | } 314 | } 315 | } 316 | .uac-toggle-switch-skewed{ 317 | + .uac-toggle-switch-btn{ 318 | overflow: hidden; 319 | transform: skew(-10deg); 320 | backface-visibility: hidden; 321 | transition: all .2s ease; 322 | font-family: sans-serif; 323 | background: #888; 324 | &:after, &:before{ 325 | transform: skew(10deg); 326 | display: inline-block; 327 | transition: all .2s ease; 328 | width: 100%; 329 | text-align: center; 330 | position: absolute; 331 | line-height: 2em; 332 | font-weight: bold; 333 | color: #fff; 334 | 335 | text-shadow: 0 1px 0 rgba(0,0,0,.4); 336 | } 337 | &:after{ 338 | left: 100%; 339 | content: attr(data-tg-on); 340 | } 341 | &:before{ 342 | left: 0; 343 | content: attr(data-tg-off); 344 | } 345 | &:active{ 346 | background: #888; 347 | &:before{ 348 | left: -10%; 349 | } 350 | } 351 | } 352 | &:checked{ 353 | + .uac-toggle-switch-btn{ 354 | background: #86d993; 355 | &:before{ 356 | left: -100%; 357 | } 358 | &:after{ 359 | left: 0; 360 | } 361 | &:active{ 362 | &:after{ 363 | left: 10%; 364 | } 365 | } 366 | } 367 | } 368 | } 369 | .uac-toggle-switch-flat{ 370 | + .uac-toggle-switch-btn{ 371 | padding: 2px; 372 | transition: all .2s ease; 373 | background: #fff; 374 | border: 4px solid #f2f2f2; 375 | border-radius: 2em; 376 | &:after{ 377 | transition: all .2s ease; 378 | background: #f2f2f2; 379 | content: ""; 380 | border-radius: 1em; 381 | } 382 | } 383 | &:checked{ 384 | + .uac-toggle-switch-btn{ 385 | border: 4px solid #7FC6A6; 386 | &:after{ 387 | left: 50%; 388 | background: #7FC6A6; 389 | } 390 | } 391 | } 392 | } 393 | 394 | .uac-toggle-switch-flip{ 395 | + .uac-toggle-switch-btn{ 396 | padding: 2px; 397 | transition: all .2s ease; 398 | font-family: sans-serif; 399 | perspective: 100px; 400 | &:after, &:before{ 401 | display: inline-block; 402 | transition: all .4s ease; 403 | width: 100%; 404 | text-align: center; 405 | position: absolute; 406 | line-height: 2em; 407 | font-weight: bold; 408 | color: #fff; 409 | position: absolute; 410 | top: 0; 411 | left: 0; 412 | backface-visibility: hidden; 413 | border-radius: 4px; 414 | } 415 | &:after{ 416 | content: attr(data-tg-on); 417 | background: #02C66F; 418 | transform: rotateY(-180deg); 419 | } 420 | &:before{ 421 | background: #FF3A19; 422 | content: attr(data-tg-off); 423 | } 424 | 425 | &:active{ 426 | &:before{ 427 | transform: rotateY(-20deg); 428 | } 429 | } 430 | } 431 | &:checked{ 432 | + .uac-toggle-switch-btn{ 433 | &:before{ 434 | transform: rotateY(180deg); 435 | } 436 | &:after{ 437 | transform: rotateY(0); 438 | left: 0; 439 | background: #7FC6A6; 440 | } 441 | &:active{ 442 | &:after{ 443 | transform: rotateY(20deg); 444 | } 445 | } 446 | } 447 | } 448 | } -------------------------------------------------------------------------------- /src/words/words.js: -------------------------------------------------------------------------------- 1 | ua.directive('uaWords',function(){ 2 | function parseWords(string){ 3 | return string.split('|||'); 4 | } 5 | 6 | function wordToLetter(word){ 7 | var letters = ''; 8 | for(var ii=0;ii'; 10 | } 11 | return letters; 12 | } 13 | 14 | var letterAnimThemes = ['letter-rotatex','letter-rotatey','letter-scale','letter-roll','letter-type']; 15 | 16 | return { 17 | restric:'E', 18 | template:function(elem,attr){ 19 | var theme = attr.uaTheme ||'rotate'; 20 | var words = attr.words || 'no|||words|||specified'; 21 | 22 | words = parseWords(words); 23 | // build up template 24 | var tpl = ''; 25 | if( letterAnimThemes.indexOf(theme) > -1 ){ 26 | for(var ii=0;ii'+wordToLetter( words[ii].trim() ) + ''; 28 | } 29 | 30 | }else{ 31 | for(var ii=0;ii'+ words[ii].trim() + ''; 33 | } 34 | } 35 | tpl += ''; 36 | 37 | return tpl; 38 | }, 39 | replace:true, 40 | // scope:{}, 41 | link:function($scope,elm,attr,ctrl){ 42 | var _duration = parseInt(attr.uaDuration,10) || 2500; 43 | var animationDuration = 1200;// in and out duration; 44 | var letterAnimDelay = 80; 45 | 46 | var _letterDuration = 800; 47 | 48 | var theme = attr.uaTheme ||'rotate'; 49 | elm.addClass(( theme.indexOf('letter')>-1?'uac-':'uac-words-')+theme ); 50 | 51 | var $words = elm.find('b'); 52 | 53 | var wordAnimatorTimeout; 54 | 55 | var activeWordIndex=0,$current = $words[0],$previous, $next; 56 | function wordAnimator(){ 57 | if(activeWordIndex >= $words.length ) activeWordIndex = 0; 58 | $current = getByIndex($words, activeWordIndex ); 59 | $previous = getByIndex($words, activeWordIndex - 1 ); 60 | $next = getByIndex($words, activeWordIndex +1 ); 61 | 62 | $current.classList.remove('uac-hidden'); 63 | $current.classList.add('uac-visible'); 64 | 65 | $previous.classList.remove('uac-visible'); 66 | $previous.classList.add('uac-hidden'); 67 | // check for extra theme; 68 | extraThemeAfter(); 69 | // check if this need letter animation 70 | if(letterAnimThemes.indexOf(theme) > -1){ 71 | letterIn($current.childNodes ); 72 | letterOut($previous.childNodes ); 73 | } 74 | 75 | activeWordIndex ++; 76 | // self call 77 | wordAnimatorTimeout = setTimeout(wordAnimator,_duration + animationDuration ); 78 | } 79 | function extraThemeAfter(){ 80 | switch(theme){ 81 | case 'loading': 82 | elm.removeClass('uac-loading'); 83 | setTimeout(function(){ elm.addClass('uac-loading'); }, 200); 84 | break; 85 | case 'clip': 86 | // delay 1 loop; 87 | setTimeout(cliping , _duration + 100 ) 88 | break; 89 | case 'letter-type': 90 | elm.removeClass('uac-waiting'); 91 | setTimeout(function(){ 92 | // select words 93 | elm.addClass('uac-selected'); 94 | } , _duration + 100 ) 95 | break; 96 | default: ''; 97 | } 98 | } 99 | /** 100 | * trigger cliping animation onece; 101 | */ 102 | function cliping(){ 103 | // calculate length of word; 104 | var width = $next.getBoundingClientRect().width; 105 | elm[0].style.width = '0px' ; 106 | setTimeout(function(){ 107 | elm[0].style.width = (width + 15 )+'px' ; 108 | },1000) 109 | } 110 | 111 | // sequencially add .uac-in and .uac-out to letters 112 | var inLetterIndex = 0, outLetterIndex = 0; 113 | function letterIn(letters){ 114 | if(theme == 'letter-type'){ 115 | elm.removeClass('uac-selected'); 116 | } 117 | 118 | if(letters[inLetterIndex]) { 119 | letters[inLetterIndex].classList.remove('uac-out'); 120 | letters[inLetterIndex].classList.add('uac-in'); 121 | } 122 | 123 | inLetterIndex++; 124 | if( inLetterIndex < letters.length ) { 125 | setTimeout(function(){ letterIn(letters) },letterAnimDelay ); 126 | }else{ // finished all letter animation , now waitting for next 127 | inLetterIndex = 0; 128 | // flicker effect 129 | if(theme == 'letter-type'){ 130 | elm.addClass('uac-waiting'); 131 | } 132 | } 133 | } 134 | 135 | function letterOut(letters){ 136 | if(theme == 'letter-type'){ 137 | // hide all at onece; 138 | for(var ii=0;ii= arr.length ){ 164 | return arr[0]; 165 | }else if( index < 0 ){ 166 | return arr[ arr.length-1 ]; 167 | }else{ 168 | return arr[index]; 169 | } 170 | } 171 | 172 | // --------- run ------------- 173 | wordAnimator(); 174 | if(theme == 'clip') cliping(); 175 | 176 | $scope.$on('$destroy',function(){ 177 | // clear timeouts 178 | clearTimeout(wordAnimatorTimeout); 179 | }) 180 | } 181 | } 182 | }) -------------------------------------------------------------------------------- /src/words/words.scss: -------------------------------------------------------------------------------- 1 | .uac-words{ 2 | display: inline-block; 3 | position: relative; 4 | text-align: left; 5 | b { 6 | display: inline-block; 7 | position: absolute; 8 | white-space: nowrap; 9 | left: 0; 10 | top: 0; 11 | 12 | &.uac-visible { 13 | position: relative; 14 | } 15 | i,em{ 16 | font-style: normal; 17 | font-weight: bold; 18 | } 19 | } 20 | } 21 | // -----------------------rotate---------------------- 22 | .uac-words.uac-words-rotate{ 23 | perspective:300px; 24 | b{ 25 | opacity:0; 26 | transform-origin: 50% 100%; 27 | transform: rotateX(180deg); 28 | &.uac-visible{ 29 | opacity:1; 30 | transform: rotateX(0deg); 31 | animation: uac-words-rotatein 1.2s linear; 32 | } 33 | &.uac-hidden { 34 | transform:rotateX(180deg); 35 | animation:uac-words-rotateout 1.2s linear; 36 | } 37 | } 38 | } 39 | @keyframes uac-words-rotatein { 40 | 0% { 41 | transform:rotateX(180deg); 42 | opacity: 0; 43 | } 44 | 45 | 35% { 46 | transform:rotateX(120deg); 47 | opacity: 0; 48 | } 49 | 50 | 65% { 51 | opacity: 0; 52 | } 53 | 54 | 100% { 55 | transform:rotateX(360deg); 56 | opacity: 1; 57 | } 58 | } 59 | @keyframes uac-words-rotateout { 60 | 0% { 61 | transform:rotateX(0deg); 62 | opacity: 1; 63 | } 64 | 65 | 35% { 66 | transform:rotateX(-40deg); 67 | opacity: 1; 68 | } 69 | 70 | 65% { 71 | opacity: 0; 72 | } 73 | 74 | 100% { 75 | transform:rotateX(180deg); 76 | opacity: 0; 77 | } 78 | } 79 | // -------------------loading bar-------------------------- 80 | .uac-words.uac-words-loading{ 81 | // padding: .2em 0; 82 | overflow: hidden; 83 | padding-bottom: 0.2em; 84 | vertical-align: top; 85 | &::after { 86 | /* loading bar */ 87 | content: ''; 88 | position: absolute; 89 | left: 0; 90 | bottom: 0; 91 | height: 3px; 92 | width: 0; 93 | background: map-get($color-blue,'300'); 94 | z-index: 2; 95 | transition:width .3s -0.1s; 96 | } 97 | &.uac-loading::after { 98 | width: 100%; 99 | transition:width 4s; 100 | } 101 | b{ 102 | // top: .2em; 103 | opacity: 0; 104 | transition: opacity .3s; 105 | 106 | &.uac-visible { 107 | opacity: 1; 108 | top: 0; 109 | } 110 | } 111 | } 112 | 113 | // ------------------ slide --------------------------- 114 | .uac-words.uac-words-slide{ 115 | padding:0.4em 0; 116 | margin-top: -0.4em; 117 | overflow: hidden; 118 | vertical-align: top; 119 | b { 120 | opacity: 0; 121 | top: 0; 122 | &.uac-visible { 123 | top: 0; 124 | opacity: 1; 125 | animation:uac-words-slide-in .6s; 126 | } 127 | &.uac-hidden { 128 | animation:uac-words-slide-out .6s; 129 | opacity: 0; 130 | } 131 | } 132 | } 133 | 134 | @keyframes uac-words-slide-in { 135 | 0% { 136 | opacity: 0; 137 | transform:translateY(-100%); 138 | } 139 | 60% { 140 | opacity: 1; 141 | transform:translateY(20%); 142 | } 143 | 100% { 144 | opacity: 1; 145 | transform:translateY(0); 146 | } 147 | } 148 | 149 | @keyframes uac-words-slide-out { 150 | 0% { 151 | opacity: 1; 152 | transform:translateY(0); 153 | } 154 | 60% { 155 | opacity: 0; 156 | transform:translateY(120%); 157 | } 158 | 100% { 159 | opacity: 0; 160 | transform:translateY(100%); 161 | } 162 | } 163 | 164 | // ----------------------clip----------------------- 165 | .uac-words.uac-words-clip { 166 | display: inline-block; 167 | padding: .2em 0.2em 0.2em 0.1em; 168 | margin-top: -0.2em; 169 | overflow: hidden; 170 | vertical-align: top; 171 | transition: width 1s ease; 172 | &::after { 173 | /* line */ 174 | content: ''; 175 | display: block; 176 | position: absolute; 177 | top: 0; 178 | right: 0; 179 | width: 2px; 180 | height: 100%; 181 | background: rgba(0,0,0,0.5); 182 | } 183 | b { 184 | opacity: 0; 185 | left: 0.1em; 186 | &.uac-visible { 187 | opacity: 1; 188 | } 189 | } 190 | } 191 | 192 | 193 | // ---------------------- zoom ----------------------- 194 | .uac-words.uac-words-zoom { 195 | perspective:300px; 196 | b { 197 | opacity: 0; 198 | 199 | &.uac-visible { 200 | opacity: 1; 201 | animation:uac-words-zoom-in .8s; 202 | } 203 | 204 | &.uac-hidden { 205 | animation:uac-words-zoom-out .8s; 206 | } 207 | } 208 | } 209 | 210 | @keyframes uac-words-zoom-in { 211 | 0% { 212 | opacity: 0; 213 | transform:translateZ(100px); 214 | } 215 | 100% { 216 | opacity: 1; 217 | transform:translateZ(0); 218 | } 219 | } 220 | @keyframes uac-words-zoom-out { 221 | 0% { 222 | opacity: 1; 223 | transform:translateZ(0); 224 | } 225 | 100% { 226 | opacity: 0; 227 | transform:translateZ(-100px); 228 | } 229 | } 230 | // ------------------ push -------------------------- 231 | .uac-words.uac-words-push { 232 | 233 | b { 234 | opacity: 0; 235 | 236 | &.uac-visible { 237 | opacity: 1; 238 | animation:uac-words-push-in .6s; 239 | } 240 | 241 | &.uac-hidden { 242 | animation:uac-words-push-out .6s; 243 | } 244 | } 245 | } 246 | 247 | @keyframes uac-words-push-in { 248 | 0% { 249 | opacity: 0; 250 | transform:translateX(-100%); 251 | } 252 | 253 | 60% { 254 | opacity: 1; 255 | transform:translateX(10%); 256 | } 257 | 258 | 100% { 259 | opacity: 1; 260 | transform:translateX(0); 261 | } 262 | } 263 | 264 | @keyframes uac-words-push-out { 265 | 0% { 266 | opacity: 1; 267 | transform:translateX(0); 268 | } 269 | 270 | 60% { 271 | opacity: 0; 272 | transform:translateX(110%); 273 | } 274 | 275 | 100% { 276 | opacity: 0; 277 | transform:translateX(100%); 278 | } 279 | } 280 | 281 | // ------------------ letter animations ---------------------------======== 282 | .uac-words.uac-letter-rotatex{ 283 | perspective:300px; 284 | i, em { 285 | display: inline-block; 286 | backface-visibility:hidden; 287 | } 288 | b{ 289 | // opacity: 0; 290 | &.uac-visible { 291 | opacity: 1; 292 | i { 293 | opacity: 1; 294 | } 295 | } 296 | } 297 | 298 | i { 299 | transform-style:preserve-3d; 300 | transform:translateZ(-20px) rotateX(90deg); 301 | opacity: 0; 302 | &.uac-in { 303 | animation: uac-letter-rotatex-in .4s forwards; 304 | } 305 | &.uac-out { 306 | animation: uac-letter-rotatex-out .4s forwards; 307 | } 308 | } 309 | 310 | em { 311 | transform:translateZ(20px); 312 | } 313 | } 314 | 315 | @keyframes uac-letter-rotatex-in { 316 | 0% { 317 | opacity: 0; 318 | transform:translateZ(-20px) rotateX(90deg); 319 | } 320 | 321 | 60% { 322 | opacity: 1; 323 | transform:translateZ(-20px) rotateX(-10deg); 324 | } 325 | 326 | 100% { 327 | opacity: 1; 328 | transform:translateZ(-20px) rotateX(0deg); 329 | } 330 | } 331 | 332 | @keyframes uac-letter-rotatex-out { 333 | 0% { 334 | opacity: 1; 335 | transform:translateZ(-20px) rotateX(0deg); 336 | } 337 | 338 | 60% { 339 | opacity: 0; 340 | transform:translateZ(-20px) rotateX(-100deg); 341 | } 342 | 343 | 100% { 344 | opacity: 0; 345 | transform:translateZ(-20px) rotateX(-90deg); 346 | } 347 | } 348 | 349 | // --------------------------------------------- 350 | .uac-words.uac-letter-rotatey{ 351 | perspective:300px; 352 | i { 353 | display: inline-block; 354 | transform:rotateY(180deg); 355 | backface-visibility:hidden; 356 | 357 | .uac-visible & { 358 | transform: rotateY(0deg) ; 359 | } 360 | 361 | &.uac-in { 362 | animation: uac-letter-rotatey-in .6s forwards; 363 | } 364 | 365 | &.uac-out { 366 | animation: uac-letter-rotatey-out .6s forwards; 367 | } 368 | } 369 | } 370 | @keyframes uac-letter-rotatey-in { 371 | 0% { 372 | transform: rotateY(180deg); 373 | } 374 | 375 | 100% { 376 | transform: rotateY(0deg); 377 | } 378 | } 379 | 380 | @keyframes uac-letter-rotatey-out { 381 | 0% { 382 | transform: rotateY(0); 383 | } 384 | 385 | 100% { 386 | transform: rotateY(-180deg); 387 | } 388 | } 389 | 390 | // --------------------------------------------- 391 | .uac-words.uac-letter-scale{ 392 | i { 393 | display: inline-block; 394 | opacity: 0; 395 | transform:scale(0); 396 | 397 | .uac-visible & { 398 | opacity: 1; 399 | } 400 | 401 | &.uac-in { 402 | animation:uac-letter-scale-up .6s forwards; 403 | } 404 | 405 | &.out { 406 | animation:uac-letter-scale-down .6s forwards; 407 | } 408 | } 409 | } 410 | @keyframes uac-letter-scale-up { 411 | 0% { 412 | transform:scale(0); 413 | opacity: 0; 414 | } 415 | 416 | 60% { 417 | transform:scale(1.2); 418 | opacity: 1; 419 | } 420 | 421 | 100% { 422 | transform:scale(1); 423 | opacity: 1; 424 | } 425 | } 426 | @keyframes uac-letter-scale-down { 427 | 0% { 428 | transform:scale(1); 429 | opacity: 1; 430 | } 431 | 432 | 60% { 433 | transform:scale(0); 434 | opacity: 0; 435 | } 436 | } 437 | // --------------------------------------------- 438 | // 439 | .uac-words.uac-letter-type{ 440 | vertical-align: top; 441 | overflow: hidden; 442 | padding-right: 0.1em; 443 | &::after { 444 | /* vertical bar */ 445 | content: ''; 446 | position: absolute; 447 | right: 0; 448 | bottom:0 ; 449 | height: 90%; 450 | width: 2px; 451 | background-color: rgba(0,0,0,0.5); 452 | } 453 | &.uac-waiting::after { 454 | animation:uac-pulse 1s infinite; 455 | } 456 | 457 | &.uac-selected { 458 | background-color: map-get($color-blue,'200');//rgba(0,88,180,0.5) 459 | &::after { 460 | visibility: hidden; 461 | } 462 | 463 | b { 464 | color: #fff; 465 | } 466 | } 467 | b { 468 | visibility: hidden; 469 | &.uac-visible { 470 | visibility: visible; 471 | } 472 | &.uac-hidden { 473 | visibility: hidden; 474 | } 475 | } 476 | i { 477 | position: absolute; 478 | visibility: hidden; 479 | &.uac-in { 480 | position: relative; 481 | visibility: visible; 482 | } 483 | } 484 | 485 | } 486 | @keyframes uac-pulse { 487 | 0% { 488 | transform: scale(1); 489 | opacity: 1; 490 | } 491 | 492 | 40% { 493 | transform: scale(0.9); 494 | opacity: 0; 495 | } 496 | 497 | 100% { 498 | transform: scale(0); 499 | opacity: 0; 500 | } 501 | } 502 | // --------------------------------------------- 503 | 504 | // --------------------------------------------- 505 | 506 | // --------------------------------------------- 507 | 508 | // --------------------------------------------- --------------------------------------------------------------------------------