Material und Hintergruende eingebunden
This commit is contained in:
Hilmer, Carsten
50
www/lib/ionic-material/.bower.json
Normal file
50
www/lib/ionic-material/.bower.json
Normal file
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "ionic-material",
|
||||
"version": "0.4.2",
|
||||
"authors": [
|
||||
"Rai Butera",
|
||||
"Zach Fitzgerald"
|
||||
],
|
||||
"description": "Ionic Material - Material Design for the Ionic Framework",
|
||||
"main": [
|
||||
"./dist/ionic.material.css",
|
||||
"./dist/ionic.material.min.css",
|
||||
"./dist/ionic.material.js",
|
||||
"./dist/ionic.material.min.js"
|
||||
],
|
||||
"keywords": [
|
||||
"Ionic",
|
||||
"Material",
|
||||
"Design",
|
||||
"AngularJS",
|
||||
"Framework",
|
||||
"Hybrid",
|
||||
"Apps",
|
||||
"Mobile"
|
||||
],
|
||||
"license": "MIT",
|
||||
"homepage": "http://ionicmaterial.com",
|
||||
"private": false,
|
||||
"ignore": [
|
||||
"bower_components",
|
||||
"demo",
|
||||
"docs",
|
||||
"Gulpfile.js",
|
||||
"index.html",
|
||||
"node_modules"
|
||||
],
|
||||
"dependencies": {
|
||||
"ionic": "~1.0.0",
|
||||
"waves": "0.6"
|
||||
},
|
||||
"_release": "0.4.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v0.4.2",
|
||||
"commit": "b22187c9bc2041ef9e2494c04f885c468f38a117"
|
||||
},
|
||||
"_source": "https://github.com/zachsoft/Ionic-Material.git",
|
||||
"_target": "^0.4.2",
|
||||
"_originalSource": "ionic-material",
|
||||
"_direct": true
|
||||
}
|
||||
3
www/lib/ionic-material/.cz.json
Normal file
3
www/lib/ionic-material/.cz.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"path": "node_modules/cz-conventional-changelog/"
|
||||
}
|
||||
159
www/lib/ionic-material/.gitignore
vendored
Normal file
159
www/lib/ionic-material/.gitignore
vendored
Normal file
@@ -0,0 +1,159 @@
|
||||
####################################
|
||||
## OSX
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
|
||||
# Icon must end with two \r
|
||||
Icon
|
||||
|
||||
|
||||
# Thumbnails
|
||||
._*
|
||||
|
||||
# Files that might appear in the root of a volume
|
||||
.DocumentRevisions-V100
|
||||
.fseventsd
|
||||
.Spotlight-V100
|
||||
.TemporaryItems
|
||||
.Trashes
|
||||
.VolumeIcon.icns
|
||||
|
||||
# Directories potentially created on remote AFP share
|
||||
.AppleDB
|
||||
.AppleDesktop
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
|
||||
####################################
|
||||
## editors (webstorm etc)
|
||||
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion
|
||||
|
||||
*.iml
|
||||
|
||||
## Directory-based project format:
|
||||
.idea/
|
||||
# if you remove the above rule, at least ignore the following:
|
||||
|
||||
# User-specific stuff:
|
||||
# .idea/workspace.xml
|
||||
# .idea/tasks.xml
|
||||
# .idea/dictionaries
|
||||
|
||||
# Sensitive or high-churn files:
|
||||
# .idea/dataSources.ids
|
||||
# .idea/dataSources.xml
|
||||
# .idea/sqlDataSources.xml
|
||||
# .idea/dynamic.xml
|
||||
# .idea/uiDesigner.xml
|
||||
|
||||
# Gradle:
|
||||
# .idea/gradle.xml
|
||||
# .idea/libraries
|
||||
|
||||
# Mongo Explorer plugin:
|
||||
# .idea/mongoSettings.xml
|
||||
|
||||
## File-based project format:
|
||||
*.ipr
|
||||
*.iws
|
||||
|
||||
## Plugin-specific files:
|
||||
|
||||
# IntelliJ
|
||||
/out/
|
||||
|
||||
# mpeltonen/sbt-idea plugin
|
||||
.idea_modules/
|
||||
|
||||
# JIRA plugin
|
||||
atlassian-ide-plugin.xml
|
||||
|
||||
# Crashlytics plugin (for Android Studio and IntelliJ)
|
||||
com_crashlytics_export_strings.xml
|
||||
crashlytics.properties
|
||||
crashlytics-build.properties
|
||||
|
||||
# cache files for sublime text
|
||||
*.tmlanguage.cache
|
||||
*.tmPreferences.cache
|
||||
*.stTheme.cache
|
||||
|
||||
# workspace files are user-specific
|
||||
*.sublime-workspace
|
||||
|
||||
# project files should be checked into the repository, unless a significant
|
||||
# proportion of contributors will probably not be using SublimeText
|
||||
# *.sublime-project
|
||||
|
||||
# sftp configuration file
|
||||
sftp-config.json
|
||||
|
||||
####################################
|
||||
## node.js
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||
node_modules
|
||||
|
||||
####################################
|
||||
## client-side JS
|
||||
bower_components
|
||||
|
||||
## generator-angular-famous-ionic
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage/
|
||||
# Reports directory used by tools like protractor
|
||||
reports/
|
||||
|
||||
|
||||
# Temp directories
|
||||
temp/
|
||||
test/tmp
|
||||
test/temp
|
||||
|
||||
# Other temp
|
||||
.sass-cache
|
||||
.grunt
|
||||
|
||||
# Build
|
||||
.tmp
|
||||
|
||||
*.sublime-project
|
||||
####################################
|
||||
21
www/lib/ionic-material/.jshintrc
Normal file
21
www/lib/ionic-material/.jshintrc
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"node": true,
|
||||
"esnext": true,
|
||||
"bitwise": true,
|
||||
"camelcase": true,
|
||||
"eqeqeq": true,
|
||||
"eqnull": true,
|
||||
"immed": true,
|
||||
"indent": 2,
|
||||
"latedef": "nofunc",
|
||||
"newcap": true,
|
||||
"nonew": true,
|
||||
"noarg": true,
|
||||
"quotmark": true,
|
||||
"regexp": true,
|
||||
"undef": true,
|
||||
"unused": false,
|
||||
"trailing": true,
|
||||
"sub": true,
|
||||
"maxlen": false
|
||||
}
|
||||
26
www/lib/ionic-material/CONTRIBUTING.md
Normal file
26
www/lib/ionic-material/CONTRIBUTING.md
Normal file
@@ -0,0 +1,26 @@
|
||||
# Contributing to Ionic Material
|
||||
## General
|
||||
- When posting an issue please include a codepen or plunkr and instructions to reproduce.
|
||||
|
||||
## Development
|
||||
### Workflow
|
||||
1. **Create an [Issue](http://github.com/webchat/webchat-hybrid/issues)** (feature/bug/enhancement)
|
||||
- Issues are our to-do list.
|
||||
- Check for an existing issue related to subject
|
||||
2. **Use [Git Flow](http://nvie.com/posts/a-successful-git-branching-model/)**
|
||||
a. Fork and Make Feature/Hotfix Branch
|
||||
- If simple, write unit tests
|
||||
- Implement solution for feature/hotfix
|
||||
- Run tests
|
||||
3. **Commit**
|
||||
- **NB:** Please Use [Conventional Changelog Commit Guidelines](http://github.com/ajoslin/conventional-changelog/blog/master/)
|
||||
+ use [commitizen](https://github.com/commitizen/cz-cli) to make your life easier with this
|
||||
+ Remember to reference related issues, e.g: `"fixes #123"`
|
||||
4. Submit a **Pull Request** for finished feature/hotfix
|
||||
5. Merge PR if no conflicts.
|
||||
|
||||
Rinse & Repeat until all Ionic Apps look amazing and materialized.
|
||||
|
||||
### Running Tests (TODO)
|
||||
<!-- TODO: Tests Documentation -->
|
||||
- blah blah blah Karma etc.
|
||||
23
www/lib/ionic-material/LICENSE
Normal file
23
www/lib/ionic-material/LICENSE
Normal file
@@ -0,0 +1,23 @@
|
||||
Copyright 2015 Zach Fitzgerald
|
||||
http://zachfitzgerald.com/
|
||||
|
||||
MIT License
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
128
www/lib/ionic-material/README.md
Normal file
128
www/lib/ionic-material/README.md
Normal file
@@ -0,0 +1,128 @@
|
||||
# Ionic Material
|
||||
Ionic Framework ♥ Material Design
|
||||
|
||||
#### NB: all versions pre-1.0 are intended as a work in progress 'Alpha'
|
||||
[](http://badge.fury.io/gh/zachsoft%2Fionic-material)
|
||||
[](http://commitizen.github.io/cz-cli/)
|
||||
|
||||
See our [releases](https://github.com/zachsoft/ionic-material/releases) and other [versions](https://github.com/zachsoft/ionic-material/tags)
|
||||
|
||||
## Documentation and Demo App (in-browser simulation)
|
||||
[Documentation Application @ ionicmaterial.com](http://ionicmaterial.com/demo/)
|
||||
(Use the ☰ menu for Documentation sections)
|
||||
|
||||
# Quick Start
|
||||
## Step 1: Install using [Bower](http://bower.io)
|
||||
|
||||
```shell
|
||||
cd /PATH/TO/YOUR/PROJECT
|
||||
bower install ionic-material
|
||||
```
|
||||
|
||||
### Step 2: Add `RobotoDraft` font (by **Google**)
|
||||
#### Via CDN:
|
||||
```html
|
||||
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
|
||||
```
|
||||
|
||||
#### via Bower
|
||||
Check out [RobotoDraft by RaiButera on Github](https://github.com/raibutera/robotodraft)
|
||||
|
||||
```shell
|
||||
bower install robotodraft
|
||||
```
|
||||
|
||||
**using Sass?** instructions for [raibutera/robotodraft](https://github.com/raibutera/robotodraft) + scss:
|
||||
|
||||
```scss
|
||||
$RobotoDraftFontPath: "../fonts"; // REMINDER: edit as appropriate!
|
||||
$RobotoDraftFontName: "RobotoDraft";
|
||||
$RobotoDraftFontVersion: "1.0.0";
|
||||
|
||||
@import "/PATH/TO/YOUR/PROJECT/bower_components/robotodraft/sass/robotodraft.scss"; // REMINDER: edit as appropriate!
|
||||
```
|
||||
**NB**: the above assumes you are using [Bower](http://bower.io)
|
||||
|
||||
### Step 3: Add Ionic Material stylesheets and scripts
|
||||
Add `ionic.material.min.css` and `ionic.material.min.js` to your `index.html`
|
||||
|
||||
```html
|
||||
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
|
||||
<link href="lib/ionic-material/ionic.material.min.css" rel="stylesheet">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
|
||||
<script src="lib/ionic/js/ionic.bundle.js"></script>
|
||||
<script src="lib/ionic-material/ionic.material.min.js"></script>
|
||||
```
|
||||
|
||||
### Step 4: Inject Ionic & Ionic Material into your Ionic App
|
||||
|
||||
```javascript
|
||||
var app = angular.module('YOUR_APP_NAME', ['ionic', 'ionic-material']);
|
||||
```
|
||||
|
||||
### Step 5: Where appropriate, inject *ionicMaterialInk* and/or *ionicMaterialMotion*
|
||||
|
||||
The angular services `ionicMaterialInk` and `ionicMaterialMotion` are used to activate animations.
|
||||
|
||||
**You are all set to go!** :thumbsup:
|
||||
|
||||
### Activating Animations
|
||||
|
||||
**NB:** Make sure the relevant services are injected into your controllers.
|
||||
|
||||
In your controllers:
|
||||
- `ionicMaterialInk.displayEffect()` (will need to happen once on controller activation and then repeat every time the objects update)
|
||||
- `ionicMaterialMotion.ripple()` (etc.)
|
||||
|
||||
## Sample App
|
||||
Ionic demo app "Thronester" is found within './demo' - You can also run 'index.html' locally to view in a webkit browser on a computer.
|
||||
|
||||
## Builds
|
||||
Instructions:
|
||||
- `npm install`
|
||||
- `gulp build` (or `gulp style` for just the stylesheets)
|
||||
|
||||
Look at `gulpfile.js` for how the process works.
|
||||
|
||||
## Development
|
||||
This project uses [Webpack](http://webpack.github.io/)
|
||||
|
||||
## Contributing
|
||||
See our [CONTRIBUTING INSTRUCTIONS](./CONTRIBUTING.md)
|
||||
|
||||
## Website
|
||||
[http://ionicmaterial.com/](http://ionicmaterial.com/)
|
||||
|
||||
## FAQ
|
||||
### What is Ionic Material?
|
||||
Ionic material is aimed at being an extension library for the Ionic Framework, meaning you won't change the way you develop your Ionic hybrid apps to have them materialized. Ionic Material aims to integrate the best representations of Material Design into a single add-on library for Ionic Developers. With the Polymer Project, ngMaterial, and other open source projects arising, we aim to be actively engaged and aligned with these, and other, related projects.
|
||||
|
||||
As a 100% free open-source project, **developer participation is encouraged**, as much or little as possible.
|
||||
|
||||
### Can I use Ionic and Angular Material together?
|
||||
*Ionic* and *Angular Material* are fairly incompatible (you can add them to the same project, but the styling will be extremely inconsistent and none of the UI components will work cross-framework, eg. an ionic side menu with material tabs). Ionic is 1.0 and angular material is still pre-1.0.
|
||||
|
||||
**Ionic Material** is best explained as a "material extension" to Ionic, rather than to Angular as a whole. The difference isn't just semantics - Ionic Material extends the actual ionic framework namespace (in JS), renders material styles on the ionic elements (following ionic's conventions), and will aim to follow the releases of Ionic, and support material theming, ink, and motion for any new Ionic release.
|
||||
|
||||
Ionic Material will pull in the best ideas of Angular Material, Paper/Polymer, etc. and by the same tune, Ionic Material will also abstract the parts of the framework that would be beneficial outside of ionic apps (like animations, motions) into their standalone git projects so they can be adopted for use in -any- web project that uses material design.
|
||||
|
||||
### How can I contribute?
|
||||
Please see our [contribution guidelines](CONTRIBUTING.md)
|
||||
|
||||
Want to become an official collaborator? Please contact @zachsoft
|
||||
|
||||
|
||||
## Roadmap and the Future
|
||||
See [Milestones](https://github.com/zachsoft/ionic-material/milestones)
|
||||
|
||||
### Rough Ideas
|
||||
0. Complete implementation of Material Design specification.
|
||||
|
||||
1. Full UI Kit w/ dozens of templates for rapid application development. Inspired by amazing kits like: https://ui8.net/product/material-ui-kit.
|
||||
|
||||
2. Increase animation performance. We're really stretching the limits of hybrid app animations - if **you** have ideas on performance adjustments, we're all ears and would love the insight.
|
||||
|
||||
3. Port animate.js with bezier curve adjustments to match "authentic motion" spec of Material Design.
|
||||
|
||||
4. Bug fixes
|
||||
40
www/lib/ionic-material/bower.json
Normal file
40
www/lib/ionic-material/bower.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "ionic-material",
|
||||
"version": "0.4.2",
|
||||
"authors": [
|
||||
"Rai Butera",
|
||||
"Zach Fitzgerald"
|
||||
],
|
||||
"description": "Ionic Material - Material Design for the Ionic Framework",
|
||||
"main": [
|
||||
"./dist/ionic.material.css",
|
||||
"./dist/ionic.material.min.css",
|
||||
"./dist/ionic.material.js",
|
||||
"./dist/ionic.material.min.js"
|
||||
],
|
||||
"keywords": [
|
||||
"Ionic",
|
||||
"Material",
|
||||
"Design",
|
||||
"AngularJS",
|
||||
"Framework",
|
||||
"Hybrid",
|
||||
"Apps",
|
||||
"Mobile"
|
||||
],
|
||||
"license": "MIT",
|
||||
"homepage": "http://ionicmaterial.com",
|
||||
"private": false,
|
||||
"ignore": [
|
||||
"bower_components",
|
||||
"demo",
|
||||
"docs",
|
||||
"Gulpfile.js",
|
||||
"index.html",
|
||||
"node_modules"
|
||||
],
|
||||
"dependencies": {
|
||||
"ionic": "~1.0.0",
|
||||
"waves": "0.6"
|
||||
}
|
||||
}
|
||||
2933
www/lib/ionic-material/dist/ionic.material.css
vendored
Normal file
2933
www/lib/ionic-material/dist/ionic.material.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
957
www/lib/ionic-material/dist/ionic.material.js
vendored
Normal file
957
www/lib/ionic-material/dist/ionic.material.js
vendored
Normal file
@@ -0,0 +1,957 @@
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory((function webpackLoadOptionalExternalModule() { try { return require("angular"); } catch(e) {} }()));
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define(["angular"], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["ionicMaterial"] = factory((function webpackLoadOptionalExternalModule() { try { return require("angular"); } catch(e) {} }()));
|
||||
else
|
||||
root["ionicMaterial"] = factory(root["angular"]);
|
||||
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId])
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ exports: {},
|
||||
/******/ id: moduleId,
|
||||
/******/ loaded: false
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.loaded = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
/**
|
||||
* Ionic Material
|
||||
* "Bundle Index" / "Entryfile"
|
||||
* https://github.com/zachsoft/ionic-material
|
||||
*
|
||||
* Recommended: use a compiled version, especially in production!
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = (function(){
|
||||
|
||||
var angular;
|
||||
|
||||
try {
|
||||
angular = __webpack_require__(1);
|
||||
} catch(err){ }
|
||||
|
||||
if(!angular || !angular.version){
|
||||
/*global window: true*/
|
||||
angular = window.angular;
|
||||
/*global window: false*/
|
||||
}
|
||||
|
||||
if(!angular || !angular.version){
|
||||
throw new Error('ionic-material could not load angular module :(');
|
||||
}
|
||||
|
||||
// set up angular module
|
||||
var app = angular.module('ionic-material', ['ionic']);
|
||||
|
||||
// Import Dependencies
|
||||
__webpack_require__(2)(app);
|
||||
__webpack_require__(3)(app);
|
||||
|
||||
return 'ionic-material';
|
||||
})();
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 1 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
if(typeof __WEBPACK_EXTERNAL_MODULE_1__ === 'undefined') {var e = new Error("Cannot find module \"angular\""); e.code = 'MODULE_NOT_FOUND'; throw e;}
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
|
||||
|
||||
/***/ },
|
||||
/* 2 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/*!
|
||||
* Fork by Zach Fitzgerald and other contributors of Ionic Material
|
||||
*
|
||||
* Waves v0.5.4
|
||||
* http://fian.my.id/Waves
|
||||
*
|
||||
* Copyright 2014 Alfiana E. Sibuea and other contributors
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/fians/Waves/blob/master/LICENSE
|
||||
*
|
||||
*/
|
||||
module.exports = function (angularApp) {
|
||||
|
||||
angularApp.factory('ionicMaterialInk', ink);
|
||||
|
||||
function ink (){
|
||||
/*global document*/
|
||||
var Ink = Ink || {};
|
||||
|
||||
// all DOM nodes
|
||||
var $$;
|
||||
|
||||
// phantomJS throws an error when you try to use document.querySelectorAll.bind
|
||||
if(document && document.querySelectorAll && document.querySelectorAll.bind){
|
||||
try{
|
||||
// all DOM nodes
|
||||
$$ = document.querySelectorAll.bind(document);
|
||||
|
||||
} catch(e){}
|
||||
} else if (window && window.angular && window.angular.element) {
|
||||
// we can use angular.element instead
|
||||
$$ = window.angular.element;
|
||||
} else {
|
||||
|
||||
|
||||
/**
|
||||
* mout.js 0.11.0 bind and slice polyfills (substitutes?)
|
||||
* TODO: pull out mout.js bind and slice molyfills and inject into material.ink
|
||||
*/
|
||||
|
||||
/**
|
||||
* Create slice of source array or array-like object
|
||||
*/
|
||||
var slicePolyfill = function moutslicePolyfill(arr, start, end){
|
||||
var len = arr.length;
|
||||
/*jshint eqnull:true */
|
||||
if (start == null) {
|
||||
start = 0;
|
||||
} else if (start < 0) {
|
||||
start = Math.max(len + start, 0);
|
||||
} else {
|
||||
start = Math.min(start, len);
|
||||
}
|
||||
|
||||
|
||||
if (end == null) {
|
||||
|
||||
end = len;
|
||||
} else if (end < 0) {
|
||||
end = Math.max(len + end, 0);
|
||||
} else {
|
||||
end = Math.min(end, len);
|
||||
}
|
||||
|
||||
var result = [];
|
||||
while (start < end) {
|
||||
result.push(arr[start++]);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Return a function that will execute in the given context, optionally adding any additional supplied parameters to the beginning of the arguments collection.
|
||||
* @param {Function} fn Function.
|
||||
* @param {object} context Execution context.
|
||||
* @param {rest} args Arguments (0...n arguments).
|
||||
* @return {Function} Wrapped Function.
|
||||
*/
|
||||
var bindPolyfill = function moutBind(fn, context, args){
|
||||
var argsArr = slicePolyfill(arguments, 2); //curried args
|
||||
return function(){
|
||||
return fn.apply(context, argsArr.concat(slicePolyfill(arguments)));
|
||||
};
|
||||
};
|
||||
|
||||
$$ = bindPolyfill(document.querySelectorAll, document);
|
||||
/*jshint ignore:end */
|
||||
}
|
||||
|
||||
if (!$$){
|
||||
throw new Error('ionic material ink module could not create reference of DOM nodes');
|
||||
}
|
||||
|
||||
// Find exact position of element
|
||||
function isWindow(obj) {
|
||||
return obj !== null && obj === obj.window;
|
||||
}
|
||||
|
||||
function getWindow(elem) {
|
||||
return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
|
||||
}
|
||||
|
||||
function offset(elem) {
|
||||
var docElem, win,
|
||||
box = {
|
||||
top: 0,
|
||||
left: 0
|
||||
},
|
||||
doc = elem && elem.ownerDocument;
|
||||
|
||||
docElem = doc.documentElement;
|
||||
|
||||
if (typeof elem.getBoundingClientRect !== typeof undefined) {
|
||||
box = elem.getBoundingClientRect();
|
||||
}
|
||||
win = getWindow(doc);
|
||||
return {
|
||||
top: box.top + win.pageYOffset - docElem.clientTop,
|
||||
left: box.left + win.pageXOffset - docElem.clientLeft
|
||||
};
|
||||
}
|
||||
|
||||
function hexToRgb(hex) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function convertStyle(obj) {
|
||||
var style = '';
|
||||
|
||||
for (var a in obj) {
|
||||
if (obj.hasOwnProperty(a)) {
|
||||
style += (a + ':' + obj[a] + ';');
|
||||
}
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
|
||||
var Effect = {
|
||||
|
||||
// Effect delay
|
||||
duration: 500,
|
||||
|
||||
show: function(e) {
|
||||
|
||||
// Disable right click
|
||||
if (e.button === 2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var el = this;
|
||||
|
||||
// Create ripple
|
||||
var ripple = document.createElement('div');
|
||||
var customColor = this.dataset.inkColor;
|
||||
var customOpacity = this.dataset.inkOpacity;
|
||||
var hasCustomRipple = customColor || customOpacity;
|
||||
ripple.className = 'ink-ripple';
|
||||
el.appendChild(ripple);
|
||||
|
||||
// Get click coordinate and element witdh
|
||||
var pos = offset(el);
|
||||
var relativeY = (e.pageY - pos.top);
|
||||
var relativeX = (e.pageX - pos.left);
|
||||
var scale = 'scale(' + ((el.clientWidth / 100) * 2.5) + ')';
|
||||
|
||||
// Support for touch devices
|
||||
if ('touches' in e) {
|
||||
relativeY = (e.touches[0].pageY - pos.top);
|
||||
relativeX = (e.touches[0].pageX - pos.left);
|
||||
}
|
||||
|
||||
// Attach data to element
|
||||
ripple.setAttribute('data-hold', Date.now());
|
||||
ripple.setAttribute('data-scale', scale);
|
||||
ripple.setAttribute('data-x', relativeX);
|
||||
ripple.setAttribute('data-y', relativeY);
|
||||
|
||||
// Set ripple position
|
||||
var rippleStyle = {
|
||||
'top': relativeY + 'px',
|
||||
'left': relativeX + 'px'
|
||||
};
|
||||
|
||||
ripple.className = ripple.className + ' ink-notransition';
|
||||
|
||||
if (hasCustomRipple) {
|
||||
var colorRgb;
|
||||
if (customColor) {
|
||||
var fromHex = hexToRgb(customColor);
|
||||
colorRgb = fromHex.r + ',' + fromHex.g + ',' + fromHex.b;
|
||||
} else {
|
||||
colorRgb = '0,0,0';
|
||||
}
|
||||
if (!customOpacity) {
|
||||
customOpacity = 0.2;
|
||||
}
|
||||
var bg = 'rgba(' + colorRgb + ',' + customOpacity + ')';
|
||||
rippleStyle['background-color'] = bg;
|
||||
}
|
||||
|
||||
ripple.setAttribute('style', convertStyle(rippleStyle));
|
||||
ripple.className = ripple.className.replace('ink-notransition', '');
|
||||
|
||||
// Scale the ripple
|
||||
rippleStyle['-webkit-transform'] = scale;
|
||||
rippleStyle['-moz-transform'] = scale;
|
||||
rippleStyle['-ms-transform'] = scale;
|
||||
rippleStyle['-o-transform'] = scale;
|
||||
rippleStyle.transform = scale;
|
||||
rippleStyle.opacity = '1';
|
||||
|
||||
rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
|
||||
rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms';
|
||||
rippleStyle['-o-transition-duration'] = Effect.duration + 'ms';
|
||||
rippleStyle['transition-duration'] = Effect.duration + 'ms';
|
||||
|
||||
ripple.setAttribute('style', convertStyle(rippleStyle));
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
|
||||
var el = this;
|
||||
|
||||
var width = el.clientWidth * 1.4;
|
||||
|
||||
// Get first ripple
|
||||
var ripple = null;
|
||||
|
||||
var childrenLength = el.children.length;
|
||||
|
||||
for (var a = 0; a < childrenLength; a++) {
|
||||
if (el.children[a].className.indexOf('ink-ripple') !== -1) {
|
||||
ripple = el.children[a];
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (!ripple) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var relativeX = ripple.getAttribute('data-x');
|
||||
var relativeY = ripple.getAttribute('data-y');
|
||||
var scale = ripple.getAttribute('data-scale');
|
||||
|
||||
// Get delay beetween mousedown and mouse leave
|
||||
var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
|
||||
var delay = 500 - diff;
|
||||
|
||||
if (delay < 0) {
|
||||
delay = 0;
|
||||
}
|
||||
|
||||
// Fade out ripple after delay
|
||||
setTimeout(function() {
|
||||
|
||||
var style = {
|
||||
'top': relativeY + 'px',
|
||||
'left': relativeX + 'px',
|
||||
'opacity': '0',
|
||||
|
||||
// Duration
|
||||
'-webkit-transition-duration': Effect.duration + 'ms',
|
||||
'-moz-transition-duration': Effect.duration + 'ms',
|
||||
'-o-transition-duration': Effect.duration + 'ms',
|
||||
'transition-duration': Effect.duration + 'ms',
|
||||
'-webkit-transform': scale,
|
||||
'-moz-transform': scale,
|
||||
'-ms-transform': scale,
|
||||
'-o-transform': scale,
|
||||
'transform': scale,
|
||||
};
|
||||
|
||||
ripple.setAttribute('style', convertStyle(style));
|
||||
|
||||
setTimeout(function() {
|
||||
try {
|
||||
el.removeChild(ripple);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}, Effect.duration);
|
||||
}, delay);
|
||||
},
|
||||
|
||||
// Little hack to make <input> can perform ink effect
|
||||
wrapInput: function(elements) {
|
||||
|
||||
for (var a = 0; a < elements.length; a++) {
|
||||
|
||||
var el = elements[a];
|
||||
|
||||
if (el.tagName.toLowerCase() === 'input') {
|
||||
|
||||
var parent = el.parentNode;
|
||||
|
||||
// If input already have parent just pass through
|
||||
if (parent.tagName.toLowerCase() === 'i' &&
|
||||
parent.className.indexOf('ink') !== -1 &&
|
||||
parent.className.indexOf('tab-item') !== -1 &&
|
||||
parent.className.indexOf('button-fab') !== -1 &&
|
||||
parent.className.indexOf('button-raised') !== -1 &&
|
||||
parent.className.indexOf('button-flat') !== -1 &&
|
||||
parent.className.indexOf('button-clear') !== -1 &&
|
||||
parent.className.indexOf('button') !== -1 &&
|
||||
parent.className.indexOf('item') !== -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Put element class and style to the specified parent
|
||||
var wrapper = document.createElement('i');
|
||||
wrapper.className = el.className + ' ink-input-wrapper';
|
||||
|
||||
var elementStyle = el.getAttribute('style');
|
||||
|
||||
if (!elementStyle) {
|
||||
elementStyle = '';
|
||||
}
|
||||
|
||||
wrapper.setAttribute('style', elementStyle);
|
||||
|
||||
el.className = 'ink-button-input';
|
||||
el.removeAttribute('style');
|
||||
|
||||
// Put element as child
|
||||
parent.replaceChild(wrapper, el);
|
||||
wrapper.appendChild(el);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Ink.displayEffect = function(options) {
|
||||
options = options || {};
|
||||
|
||||
if ('duration' in options) {
|
||||
Effect.duration = options.duration;
|
||||
}
|
||||
|
||||
//Wrap input inside <i> tag
|
||||
var selectors = '.ink,.tab-item,.button-fab,.button-raised,.button-flat,.button-clear,a.item,.popup .button';
|
||||
Effect.wrapInput($$(selectors));
|
||||
|
||||
Array.prototype.forEach.call($$(selectors), function(i) {
|
||||
if ('ontouchstart' in window) {
|
||||
i.addEventListener('touchstart', Effect.show, false);
|
||||
i.addEventListener('touchend', Effect.hide, false);
|
||||
i.addEventListener('touchcancel', Effect.hide, false);
|
||||
} else {
|
||||
i.addEventListener('mousedown', Effect.show, false);
|
||||
i.addEventListener('mouseup', Effect.hide, false);
|
||||
i.addEventListener('mouseleave', Effect.hide, false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return Ink;
|
||||
}
|
||||
|
||||
ink.inject = [];
|
||||
};
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 3 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = function(angularApp) {
|
||||
angularApp.factory('ionicMaterialMotion', Motion);
|
||||
|
||||
function Motion() {
|
||||
/*global document, window*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/*============================================================================*/
|
||||
/* HELPERS (non-exports)
|
||||
/=============================================================================*
|
||||
/ Abstract common lookups and manipulations in case better alternatives
|
||||
/ arise or future cross-platform differences warrant separate handling
|
||||
/=============================================================================*/
|
||||
|
||||
function getViewportHeight() {
|
||||
return window.innerHeight;
|
||||
}
|
||||
|
||||
function getBoundingClientRect(domNode) {
|
||||
return domNode.getBoundingClientRect;
|
||||
}
|
||||
|
||||
function showNotAnimatedElements(elements, total) {
|
||||
// Load the elements without effect
|
||||
for (var i = 0; i < total; i++) {
|
||||
var child = elements[i];
|
||||
child.className += ' in';
|
||||
child.className += ' done';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*============================================================================*/
|
||||
/* MOTION (EXPORT)
|
||||
/=============================================================================*
|
||||
/ Animation methods for the library
|
||||
/=============================================================================*/
|
||||
|
||||
var motion = {
|
||||
blinds: blinds,
|
||||
fadeSlideIn: fadeSlideIn,
|
||||
fadeSlideInRight: fadeSlideInRight,
|
||||
panInLeft: panInLeft,
|
||||
pushDown: pushDown,
|
||||
ripple: ripple,
|
||||
slideUp: slideUp
|
||||
};
|
||||
|
||||
function blinds(options) {
|
||||
|
||||
// Declare our defaults
|
||||
var defaults = {
|
||||
finishDelayThrottle: 2,
|
||||
finishSpeedPercent: 0.5,
|
||||
leftOffsetPercentage: 0.8,
|
||||
selector: '.animate-blinds .item',
|
||||
startVelocity: 1100
|
||||
};
|
||||
|
||||
// Apply defaults if properties are not passed
|
||||
if (typeof options === 'undefined') {
|
||||
options = {};
|
||||
}
|
||||
|
||||
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
||||
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
||||
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
||||
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
||||
|
||||
if (typeof options.selector == 'undefined') {
|
||||
options.selector = defaults.selector;
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid blinds selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateBlindsDom = document.querySelectorAll(options.selector);
|
||||
var elementsCount = animateBlindsDom.length;
|
||||
var elementAnimationCount = 0;
|
||||
|
||||
// Count the elements within the starting viewport so we're not exacting
|
||||
// more effort than required...
|
||||
//
|
||||
// We use css visiblity: hidden instead of display: none so the elements
|
||||
// maintain their DOM flow
|
||||
|
||||
var viewportHeight = getViewportHeight();
|
||||
for (var i = 0; i < elementsCount; i++) {
|
||||
if (animateBlindsDom[i].offsetTop < viewportHeight) {
|
||||
elementAnimationCount += 1;
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Sequentially animate with a delay based on proximity
|
||||
var speed = options.startVelocity;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateBlindsDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed).toFixed(2);
|
||||
child.style.webkitTransitionDelay = delay + "s";
|
||||
child.style.transitionDelay = delay + "s";
|
||||
child.className += ' in';
|
||||
}
|
||||
|
||||
// When we're done animating, switch the class to 'done'
|
||||
setTimeout(function() {
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateBlindsDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed / options.finishDelayThrottle).toFixed(2);
|
||||
//child.querySelector('img').style.webkitTransitionDelay = delay + "s";
|
||||
//child.querySelector('img').style.transitionDelay = delay + "s";
|
||||
//child.querySelector('img').className += ' in';
|
||||
animateBlindsDom[i].className += ' done';
|
||||
}
|
||||
|
||||
}, speed * options.finishSpeedPercent);
|
||||
|
||||
// Load the elements without effect
|
||||
showNotAnimatedElements(animateBlindsDom, elementsCount);
|
||||
}
|
||||
|
||||
function fadeSlideIn(options) {
|
||||
|
||||
// Declare our defaults
|
||||
var defaults = {
|
||||
finishDelayThrottle: 2,
|
||||
finishSpeedPercent: 0.72,
|
||||
leftOffsetPercentage: 0.8,
|
||||
selector: '.animate-fade-slide-in .item',
|
||||
startVelocity: 1100
|
||||
};
|
||||
|
||||
// Apply defaults if properties are not passed
|
||||
if (typeof options === 'undefined') {
|
||||
options = {};
|
||||
}
|
||||
|
||||
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
||||
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
||||
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
||||
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
||||
|
||||
if (typeof options.selector == 'undefined') {
|
||||
options.selector = defaults.selector;
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid fadeSlideIn selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateFadeSlideInDom = document.querySelectorAll(options.selector);
|
||||
var elementsCount = animateFadeSlideInDom.length;
|
||||
var elementAnimationCount = 0;
|
||||
|
||||
// Count the elements within the starting viewport so we're not exacting
|
||||
// more effort than required...
|
||||
//
|
||||
// We use css visiblity: hidden instead of display: none so the elements
|
||||
// maintain their DOM flow
|
||||
|
||||
var viewportHeight = getViewportHeight();
|
||||
for (var i = 0; i < elementsCount; i++) {
|
||||
if (animateFadeSlideInDom[i].offsetTop < viewportHeight) {
|
||||
elementAnimationCount += 1;
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Sequentially animate with a delay based on proximity
|
||||
var speed = options.startVelocity;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateFadeSlideInDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed).toFixed(2);
|
||||
child.style.webkitTransitionDelay = delay + "s";
|
||||
child.style.transitionDelay = delay + "s";
|
||||
child.className += ' in';
|
||||
}
|
||||
|
||||
// When we're done animating, switch the class to 'done'
|
||||
setTimeout(function() {
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateFadeSlideInDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delayValue = offset / speed / options.finishDelayThrottle;
|
||||
var delay = parseFloat(delayValue).toFixed(2);
|
||||
}
|
||||
animateFadeSlideInDom[0].className += ' done';
|
||||
|
||||
}, speed * options.finishSpeedPercent);
|
||||
|
||||
// Load the elements without effect
|
||||
showNotAnimatedElements(animateFadeSlideInDom, elementsCount);
|
||||
}
|
||||
|
||||
function fadeSlideInRight(options) {
|
||||
|
||||
// Declare our defaults
|
||||
var defaults = {
|
||||
finishDelayThrottle: 2,
|
||||
finishSpeedPercent: 0.72,
|
||||
leftOffsetPercentage: 0.8,
|
||||
selector: '.animate-fade-slide-in-right .item',
|
||||
startVelocity: 1100
|
||||
};
|
||||
|
||||
// Apply defaults if properties are not passed
|
||||
if (typeof options === 'undefined') {
|
||||
options = {};
|
||||
}
|
||||
|
||||
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
||||
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
||||
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
||||
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
||||
|
||||
if (typeof options.selector == 'undefined') {
|
||||
options.selector = defaults.selector;
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid fadeSlideInRight selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateSlideInRightDom = document.querySelectorAll(options.selector);
|
||||
var elementsCount = animateSlideInRightDom.length;
|
||||
var elementAnimationCount = 0;
|
||||
|
||||
// Count the elements within the starting viewport so we're not
|
||||
// exacting more effort than required...
|
||||
//
|
||||
// We use css visiblity: hidden instead of display: none so the
|
||||
// elements maintain their DOM flow
|
||||
|
||||
var viewportHeight = getViewportHeight();
|
||||
for (var i = 0; i < elementsCount; i++) {
|
||||
if (animateSlideInRightDom[i].offsetTop < viewportHeight) {
|
||||
elementAnimationCount += 1;
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Sequentially animate with a delay based on proximity
|
||||
var speed = options.startVelocity;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateSlideInRightDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed).toFixed(2);
|
||||
child.style.webkitTransitionDelay = delay + "s";
|
||||
child.style.transitionDelay = delay + "s";
|
||||
child.className += ' in';
|
||||
}
|
||||
|
||||
// When we're done animating, switch the class to 'done'
|
||||
setTimeout(function() {
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateSlideInRightDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delayValue = offset / speed / options.finishDelayThrottle;
|
||||
var delay = parseFloat(delayValue).toFixed(2);
|
||||
}
|
||||
animateSlideInRightDom[0].className += ' done';
|
||||
|
||||
}, speed * options.finishSpeedPercent);
|
||||
|
||||
// Load the elements without effect
|
||||
showNotAnimatedElements(animateSlideInRightDom, elementsCount);
|
||||
|
||||
}
|
||||
|
||||
function ripple(options) {
|
||||
|
||||
// Declare our defaults
|
||||
var defaults = {
|
||||
finishDelayThrottle: 2,
|
||||
finishSpeedPercent: 0.72,
|
||||
leftOffsetPercentage: 0.8,
|
||||
selector: '.animate-ripple .item',
|
||||
startVelocity: 1100
|
||||
};
|
||||
|
||||
// Apply defaults if properties are not passed
|
||||
if (typeof options === 'undefined') {
|
||||
options = {};
|
||||
}
|
||||
|
||||
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
||||
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
||||
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
||||
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
||||
|
||||
if (typeof options.selector == 'undefined') {
|
||||
options.selector = defaults.selector;
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid ripple selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateRippleDom = document.querySelectorAll(options.selector);
|
||||
var elementsCount = animateRippleDom.length;
|
||||
var elementAnimationCount = 0;
|
||||
|
||||
// Count the elements within the starting viewport so we're not
|
||||
// exacting more effort than required...
|
||||
//
|
||||
// We use css visiblity: hidden instead of display: none so the
|
||||
// elements maintain their DOM flow
|
||||
|
||||
var viewportHeight = getViewportHeight();
|
||||
for (var i = 0; i < animateRippleDom.length; i++) {
|
||||
if (animateRippleDom[i].offsetTop < viewportHeight) {
|
||||
elementAnimationCount += 1;
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Sequentially animate with a delay based on proximity
|
||||
var speed = options.startVelocity;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateRippleDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed).toFixed(2);
|
||||
child.style.webkitTransitionDelay = delay + "s";
|
||||
child.style.transitionDelay = delay + "s";
|
||||
child.className += ' in';
|
||||
}
|
||||
|
||||
// When we're done animating, switch the class to 'done'
|
||||
setTimeout(function() {
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateRippleDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delayValue = offset / speed / options.finishDelayThrottle;
|
||||
var delay = parseFloat(delayValue).toFixed(2);
|
||||
}
|
||||
animateRippleDom[0].className += ' done';
|
||||
|
||||
}, speed * options.finishSpeedPercent);
|
||||
|
||||
// Load the elements without effect
|
||||
showNotAnimatedElements(animateRippleDom, elementsCount);
|
||||
}
|
||||
|
||||
function panInLeft(options) {
|
||||
|
||||
// We have a single option, so it may be passed as a string or property
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
selector: options
|
||||
};
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid pushDown selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animatePanInLeftDom = document.querySelectorAll(options.selector);
|
||||
var elementAnimationCount = animatePanInLeftDom.length;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var element = animatePanInLeftDom[i];
|
||||
var classNameToRemove = 'animate-pan-in-left';
|
||||
var indexOfClassNameToRemove = element.className.lastIndexOf(classNameToRemove);
|
||||
element.className = element.className.substr(0, indexOfClassNameToRemove);
|
||||
}
|
||||
}
|
||||
|
||||
function pushDown(options) {
|
||||
|
||||
// We have a single option, so it may be passed as a string or property
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
selector: options
|
||||
};
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid pushDown selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animatePushDownDom = document.querySelectorAll(options.selector);
|
||||
var elementAnimationCount = animatePushDownDom.length;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var element = animatePushDownDom[i];
|
||||
var classNameToRemove = options.selector.split('.')[1];
|
||||
var indexOfClassNameToRemove = element.className.lastIndexOf(classNameToRemove);
|
||||
element.className = element.className.substr(0, indexOfClassNameToRemove);
|
||||
}
|
||||
}
|
||||
|
||||
function slideUp(options) {
|
||||
|
||||
// We have a single option, so it may be passed as a string or property
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
selector: options
|
||||
};
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid pushDown selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateSlideUpDom = document.querySelectorAll(options.selector);
|
||||
var elementAnimationCount = animateSlideUpDom.length;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var element = animateSlideUpDom[i];
|
||||
var classNameToRemove = options.selector.split('.')[1];
|
||||
var indexOfClassNameToRemove = element.className.lastIndexOf(classNameToRemove);
|
||||
element.className = element.className.substr(0, indexOfClassNameToRemove);
|
||||
}
|
||||
}
|
||||
|
||||
/* Export object
|
||||
/============================================================================*/
|
||||
return motion;
|
||||
}
|
||||
|
||||
Motion.$inject = [];
|
||||
};
|
||||
|
||||
|
||||
/***/ }
|
||||
/******/ ])
|
||||
});
|
||||
;
|
||||
//# sourceMappingURL=ionic.material.min.js.map
|
||||
12
www/lib/ionic-material/dist/ionic.material.min.css
vendored
Normal file
12
www/lib/ionic-material/dist/ionic.material.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
14
www/lib/ionic-material/dist/ionic.material.min.js
vendored
Normal file
14
www/lib/ionic-material/dist/ionic.material.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
www/lib/ionic-material/dist/ionic.material.min.js.map
vendored
Normal file
1
www/lib/ionic-material/dist/ionic.material.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
49
www/lib/ionic-material/package.json
Normal file
49
www/lib/ionic-material/package.json
Normal file
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "ionic-material",
|
||||
"version": "0.4.0",
|
||||
"authors": [
|
||||
"Zach Fitzgerald"
|
||||
],
|
||||
"description": "Ionic Material - Material Design for the Ionic Framework",
|
||||
"main": "dist/ionic-material.min.js",
|
||||
"keywords": [
|
||||
"Ionic",
|
||||
"Material",
|
||||
"Design",
|
||||
"Angular",
|
||||
"Framework",
|
||||
"Hybrid",
|
||||
"Apps",
|
||||
"Mobile"
|
||||
],
|
||||
"license": "MIT",
|
||||
"homepage": "http://ionicmaterial.com",
|
||||
"private": false,
|
||||
"bugs": {
|
||||
"url": "https://github.com/zachsoft/Ionic-Material/issues"
|
||||
},
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"gulp": "^3.7.0",
|
||||
"gulp-concat": "^2.1.7",
|
||||
"gulp-livereload": "^3.0.0",
|
||||
"gulp-minify-css": "^0.3.0",
|
||||
"gulp-rename": "^1.1.0",
|
||||
"gulp-uglify": "^0.2.1",
|
||||
"lodash": "^3.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cz-conventional-changelog": "^1.1.0",
|
||||
"gulp-sass": "^2.0.0",
|
||||
"gulp-sourcemaps": "^1.5.2",
|
||||
"gulp-webpack": "^1.4.0",
|
||||
"node-libs-browser": "^0.5.0",
|
||||
"webpack": "^1.9.7"
|
||||
}
|
||||
}
|
||||
37
www/lib/ionic-material/src/js/ionic-material.js
Normal file
37
www/lib/ionic-material/src/js/ionic-material.js
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Ionic Material
|
||||
* "Bundle Index" / "Entryfile"
|
||||
* https://github.com/zachsoft/ionic-material
|
||||
*
|
||||
* Recommended: use a compiled version, especially in production!
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = (function(){
|
||||
|
||||
var angular;
|
||||
|
||||
try {
|
||||
angular = require('angular');
|
||||
} catch(err){ }
|
||||
|
||||
if(!angular || !angular.version){
|
||||
/*global window: true*/
|
||||
angular = window.angular;
|
||||
/*global window: false*/
|
||||
}
|
||||
|
||||
if(!angular || !angular.version){
|
||||
throw new Error('ionic-material could not load angular module :(');
|
||||
}
|
||||
|
||||
// set up angular module
|
||||
var app = angular.module('ionic-material', ['ionic']);
|
||||
|
||||
// Import Dependencies
|
||||
require('./lib/_ink')(app);
|
||||
require('./lib/_motion')(app);
|
||||
|
||||
return 'ionic-material';
|
||||
})();
|
||||
373
www/lib/ionic-material/src/js/lib/_ink.js
Normal file
373
www/lib/ionic-material/src/js/lib/_ink.js
Normal file
@@ -0,0 +1,373 @@
|
||||
'use strict';
|
||||
|
||||
/*!
|
||||
* Fork by Zach Fitzgerald and other contributors of Ionic Material
|
||||
*
|
||||
* Waves v0.5.4
|
||||
* http://fian.my.id/Waves
|
||||
*
|
||||
* Copyright 2014 Alfiana E. Sibuea and other contributors
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/fians/Waves/blob/master/LICENSE
|
||||
*
|
||||
*/
|
||||
module.exports = function (angularApp) {
|
||||
|
||||
angularApp.factory('ionicMaterialInk', ink);
|
||||
|
||||
function ink (){
|
||||
/*global document*/
|
||||
var Ink = Ink || {};
|
||||
|
||||
// all DOM nodes
|
||||
var $$;
|
||||
|
||||
// phantomJS throws an error when you try to use document.querySelectorAll.bind
|
||||
if(document && document.querySelectorAll && document.querySelectorAll.bind){
|
||||
try{
|
||||
// all DOM nodes
|
||||
$$ = document.querySelectorAll.bind(document);
|
||||
|
||||
} catch(e){}
|
||||
} else if (window && window.angular && window.angular.element) {
|
||||
// we can use angular.element instead
|
||||
$$ = window.angular.element;
|
||||
} else {
|
||||
|
||||
|
||||
/**
|
||||
* mout.js 0.11.0 bind and slice polyfills (substitutes?)
|
||||
* TODO: pull out mout.js bind and slice molyfills and inject into material.ink
|
||||
*/
|
||||
|
||||
/**
|
||||
* Create slice of source array or array-like object
|
||||
*/
|
||||
var slicePolyfill = function moutslicePolyfill(arr, start, end){
|
||||
var len = arr.length;
|
||||
/*jshint eqnull:true */
|
||||
if (start == null) {
|
||||
start = 0;
|
||||
} else if (start < 0) {
|
||||
start = Math.max(len + start, 0);
|
||||
} else {
|
||||
start = Math.min(start, len);
|
||||
}
|
||||
|
||||
|
||||
if (end == null) {
|
||||
|
||||
end = len;
|
||||
} else if (end < 0) {
|
||||
end = Math.max(len + end, 0);
|
||||
} else {
|
||||
end = Math.min(end, len);
|
||||
}
|
||||
|
||||
var result = [];
|
||||
while (start < end) {
|
||||
result.push(arr[start++]);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Return a function that will execute in the given context, optionally adding any additional supplied parameters to the beginning of the arguments collection.
|
||||
* @param {Function} fn Function.
|
||||
* @param {object} context Execution context.
|
||||
* @param {rest} args Arguments (0...n arguments).
|
||||
* @return {Function} Wrapped Function.
|
||||
*/
|
||||
var bindPolyfill = function moutBind(fn, context, args){
|
||||
var argsArr = slicePolyfill(arguments, 2); //curried args
|
||||
return function(){
|
||||
return fn.apply(context, argsArr.concat(slicePolyfill(arguments)));
|
||||
};
|
||||
};
|
||||
|
||||
$$ = bindPolyfill(document.querySelectorAll, document);
|
||||
/*jshint ignore:end */
|
||||
}
|
||||
|
||||
if (!$$){
|
||||
throw new Error('ionic material ink module could not create reference of DOM nodes');
|
||||
}
|
||||
|
||||
// Find exact position of element
|
||||
function isWindow(obj) {
|
||||
return obj !== null && obj === obj.window;
|
||||
}
|
||||
|
||||
function getWindow(elem) {
|
||||
return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
|
||||
}
|
||||
|
||||
function offset(elem) {
|
||||
var docElem, win,
|
||||
box = {
|
||||
top: 0,
|
||||
left: 0
|
||||
},
|
||||
doc = elem && elem.ownerDocument;
|
||||
|
||||
docElem = doc.documentElement;
|
||||
|
||||
if (typeof elem.getBoundingClientRect !== typeof undefined) {
|
||||
box = elem.getBoundingClientRect();
|
||||
}
|
||||
win = getWindow(doc);
|
||||
return {
|
||||
top: box.top + win.pageYOffset - docElem.clientTop,
|
||||
left: box.left + win.pageXOffset - docElem.clientLeft
|
||||
};
|
||||
}
|
||||
|
||||
function hexToRgb(hex) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function convertStyle(obj) {
|
||||
var style = '';
|
||||
|
||||
for (var a in obj) {
|
||||
if (obj.hasOwnProperty(a)) {
|
||||
style += (a + ':' + obj[a] + ';');
|
||||
}
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
|
||||
var Effect = {
|
||||
|
||||
// Effect delay
|
||||
duration: 500,
|
||||
|
||||
show: function(e) {
|
||||
|
||||
// Disable right click
|
||||
if (e.button === 2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var el = this;
|
||||
|
||||
// Create ripple
|
||||
var ripple = document.createElement('div');
|
||||
var customColor = this.dataset.inkColor;
|
||||
var customOpacity = this.dataset.inkOpacity;
|
||||
var hasCustomRipple = customColor || customOpacity;
|
||||
ripple.className = 'ink-ripple';
|
||||
el.appendChild(ripple);
|
||||
|
||||
// Get click coordinate and element witdh
|
||||
var pos = offset(el);
|
||||
var relativeY = (e.pageY - pos.top);
|
||||
var relativeX = (e.pageX - pos.left);
|
||||
var scale = 'scale(' + ((el.clientWidth / 100) * 2.5) + ')';
|
||||
|
||||
// Support for touch devices
|
||||
if ('touches' in e) {
|
||||
relativeY = (e.touches[0].pageY - pos.top);
|
||||
relativeX = (e.touches[0].pageX - pos.left);
|
||||
}
|
||||
|
||||
// Attach data to element
|
||||
ripple.setAttribute('data-hold', Date.now());
|
||||
ripple.setAttribute('data-scale', scale);
|
||||
ripple.setAttribute('data-x', relativeX);
|
||||
ripple.setAttribute('data-y', relativeY);
|
||||
|
||||
// Set ripple position
|
||||
var rippleStyle = {
|
||||
'top': relativeY + 'px',
|
||||
'left': relativeX + 'px'
|
||||
};
|
||||
|
||||
ripple.className = ripple.className + ' ink-notransition';
|
||||
|
||||
if (hasCustomRipple) {
|
||||
var colorRgb;
|
||||
if (customColor) {
|
||||
var fromHex = hexToRgb(customColor);
|
||||
colorRgb = fromHex.r + ',' + fromHex.g + ',' + fromHex.b;
|
||||
} else {
|
||||
colorRgb = '0,0,0';
|
||||
}
|
||||
if (!customOpacity) {
|
||||
customOpacity = 0.2;
|
||||
}
|
||||
var bg = 'rgba(' + colorRgb + ',' + customOpacity + ')';
|
||||
rippleStyle['background-color'] = bg;
|
||||
}
|
||||
|
||||
ripple.setAttribute('style', convertStyle(rippleStyle));
|
||||
ripple.className = ripple.className.replace('ink-notransition', '');
|
||||
|
||||
// Scale the ripple
|
||||
rippleStyle['-webkit-transform'] = scale;
|
||||
rippleStyle['-moz-transform'] = scale;
|
||||
rippleStyle['-ms-transform'] = scale;
|
||||
rippleStyle['-o-transform'] = scale;
|
||||
rippleStyle.transform = scale;
|
||||
rippleStyle.opacity = '1';
|
||||
|
||||
rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
|
||||
rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms';
|
||||
rippleStyle['-o-transition-duration'] = Effect.duration + 'ms';
|
||||
rippleStyle['transition-duration'] = Effect.duration + 'ms';
|
||||
|
||||
ripple.setAttribute('style', convertStyle(rippleStyle));
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
|
||||
var el = this;
|
||||
|
||||
var width = el.clientWidth * 1.4;
|
||||
|
||||
// Get first ripple
|
||||
var ripple = null;
|
||||
|
||||
var childrenLength = el.children.length;
|
||||
|
||||
for (var a = 0; a < childrenLength; a++) {
|
||||
if (el.children[a].className.indexOf('ink-ripple') !== -1) {
|
||||
ripple = el.children[a];
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (!ripple) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var relativeX = ripple.getAttribute('data-x');
|
||||
var relativeY = ripple.getAttribute('data-y');
|
||||
var scale = ripple.getAttribute('data-scale');
|
||||
|
||||
// Get delay beetween mousedown and mouse leave
|
||||
var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
|
||||
var delay = 500 - diff;
|
||||
|
||||
if (delay < 0) {
|
||||
delay = 0;
|
||||
}
|
||||
|
||||
// Fade out ripple after delay
|
||||
setTimeout(function() {
|
||||
|
||||
var style = {
|
||||
'top': relativeY + 'px',
|
||||
'left': relativeX + 'px',
|
||||
'opacity': '0',
|
||||
|
||||
// Duration
|
||||
'-webkit-transition-duration': Effect.duration + 'ms',
|
||||
'-moz-transition-duration': Effect.duration + 'ms',
|
||||
'-o-transition-duration': Effect.duration + 'ms',
|
||||
'transition-duration': Effect.duration + 'ms',
|
||||
'-webkit-transform': scale,
|
||||
'-moz-transform': scale,
|
||||
'-ms-transform': scale,
|
||||
'-o-transform': scale,
|
||||
'transform': scale,
|
||||
};
|
||||
|
||||
ripple.setAttribute('style', convertStyle(style));
|
||||
|
||||
setTimeout(function() {
|
||||
try {
|
||||
el.removeChild(ripple);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}, Effect.duration);
|
||||
}, delay);
|
||||
},
|
||||
|
||||
// Little hack to make <input> can perform ink effect
|
||||
wrapInput: function(elements) {
|
||||
|
||||
for (var a = 0; a < elements.length; a++) {
|
||||
|
||||
var el = elements[a];
|
||||
|
||||
if (el.tagName.toLowerCase() === 'input') {
|
||||
|
||||
var parent = el.parentNode;
|
||||
|
||||
// If input already have parent just pass through
|
||||
if (parent.tagName.toLowerCase() === 'i' &&
|
||||
parent.className.indexOf('ink') !== -1 &&
|
||||
parent.className.indexOf('tab-item') !== -1 &&
|
||||
parent.className.indexOf('button-fab') !== -1 &&
|
||||
parent.className.indexOf('button-raised') !== -1 &&
|
||||
parent.className.indexOf('button-flat') !== -1 &&
|
||||
parent.className.indexOf('button-clear') !== -1 &&
|
||||
parent.className.indexOf('button') !== -1 &&
|
||||
parent.className.indexOf('item') !== -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Put element class and style to the specified parent
|
||||
var wrapper = document.createElement('i');
|
||||
wrapper.className = el.className + ' ink-input-wrapper';
|
||||
|
||||
var elementStyle = el.getAttribute('style');
|
||||
|
||||
if (!elementStyle) {
|
||||
elementStyle = '';
|
||||
}
|
||||
|
||||
wrapper.setAttribute('style', elementStyle);
|
||||
|
||||
el.className = 'ink-button-input';
|
||||
el.removeAttribute('style');
|
||||
|
||||
// Put element as child
|
||||
parent.replaceChild(wrapper, el);
|
||||
wrapper.appendChild(el);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Ink.displayEffect = function(options) {
|
||||
options = options || {};
|
||||
|
||||
if ('duration' in options) {
|
||||
Effect.duration = options.duration;
|
||||
}
|
||||
|
||||
//Wrap input inside <i> tag
|
||||
var selectors = '.ink,.tab-item,.button-fab,.button-raised,.button-flat,.button-clear,a.item,.popup .button';
|
||||
Effect.wrapInput($$(selectors));
|
||||
|
||||
Array.prototype.forEach.call($$(selectors), function(i) {
|
||||
if ('ontouchstart' in window) {
|
||||
i.addEventListener('touchstart', Effect.show, false);
|
||||
i.addEventListener('touchend', Effect.hide, false);
|
||||
i.addEventListener('touchcancel', Effect.hide, false);
|
||||
} else {
|
||||
i.addEventListener('mousedown', Effect.show, false);
|
||||
i.addEventListener('mouseup', Effect.hide, false);
|
||||
i.addEventListener('mouseleave', Effect.hide, false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return Ink;
|
||||
}
|
||||
|
||||
ink.inject = [];
|
||||
};
|
||||
465
www/lib/ionic-material/src/js/lib/_motion.js
Normal file
465
www/lib/ionic-material/src/js/lib/_motion.js
Normal file
@@ -0,0 +1,465 @@
|
||||
module.exports = function(angularApp) {
|
||||
angularApp.factory('ionicMaterialMotion', Motion);
|
||||
|
||||
function Motion() {
|
||||
/*global document, window*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/*============================================================================*/
|
||||
/* HELPERS (non-exports)
|
||||
/=============================================================================*
|
||||
/ Abstract common lookups and manipulations in case better alternatives
|
||||
/ arise or future cross-platform differences warrant separate handling
|
||||
/=============================================================================*/
|
||||
|
||||
function getViewportHeight() {
|
||||
return window.innerHeight;
|
||||
}
|
||||
|
||||
function getBoundingClientRect(domNode) {
|
||||
return domNode.getBoundingClientRect;
|
||||
}
|
||||
|
||||
function showNotAnimatedElements(elements, total) {
|
||||
// Load the elements without effect
|
||||
for (var i = 0; i < total; i++) {
|
||||
var child = elements[i];
|
||||
child.className += ' in';
|
||||
child.className += ' done';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*============================================================================*/
|
||||
/* MOTION (EXPORT)
|
||||
/=============================================================================*
|
||||
/ Animation methods for the library
|
||||
/=============================================================================*/
|
||||
|
||||
var motion = {
|
||||
blinds: blinds,
|
||||
fadeSlideIn: fadeSlideIn,
|
||||
fadeSlideInRight: fadeSlideInRight,
|
||||
panInLeft: panInLeft,
|
||||
pushDown: pushDown,
|
||||
ripple: ripple,
|
||||
slideUp: slideUp
|
||||
};
|
||||
|
||||
function blinds(options) {
|
||||
|
||||
// Declare our defaults
|
||||
var defaults = {
|
||||
finishDelayThrottle: 2,
|
||||
finishSpeedPercent: 0.5,
|
||||
leftOffsetPercentage: 0.8,
|
||||
selector: '.animate-blinds .item',
|
||||
startVelocity: 1100
|
||||
};
|
||||
|
||||
// Apply defaults if properties are not passed
|
||||
if (typeof options === 'undefined') {
|
||||
options = {};
|
||||
}
|
||||
|
||||
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
||||
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
||||
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
||||
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
||||
|
||||
if (typeof options.selector == 'undefined') {
|
||||
options.selector = defaults.selector;
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid blinds selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateBlindsDom = document.querySelectorAll(options.selector);
|
||||
var elementsCount = animateBlindsDom.length;
|
||||
var elementAnimationCount = 0;
|
||||
|
||||
// Count the elements within the starting viewport so we're not exacting
|
||||
// more effort than required...
|
||||
//
|
||||
// We use css visiblity: hidden instead of display: none so the elements
|
||||
// maintain their DOM flow
|
||||
|
||||
var viewportHeight = getViewportHeight();
|
||||
for (var i = 0; i < elementsCount; i++) {
|
||||
if (animateBlindsDom[i].offsetTop < viewportHeight) {
|
||||
elementAnimationCount += 1;
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Sequentially animate with a delay based on proximity
|
||||
var speed = options.startVelocity;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateBlindsDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed).toFixed(2);
|
||||
child.style.webkitTransitionDelay = delay + "s";
|
||||
child.style.transitionDelay = delay + "s";
|
||||
child.className += ' in';
|
||||
}
|
||||
|
||||
// When we're done animating, switch the class to 'done'
|
||||
setTimeout(function() {
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateBlindsDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed / options.finishDelayThrottle).toFixed(2);
|
||||
//child.querySelector('img').style.webkitTransitionDelay = delay + "s";
|
||||
//child.querySelector('img').style.transitionDelay = delay + "s";
|
||||
//child.querySelector('img').className += ' in';
|
||||
animateBlindsDom[i].className += ' done';
|
||||
}
|
||||
|
||||
}, speed * options.finishSpeedPercent);
|
||||
|
||||
// Load the elements without effect
|
||||
showNotAnimatedElements(animateBlindsDom, elementsCount);
|
||||
}
|
||||
|
||||
function fadeSlideIn(options) {
|
||||
|
||||
// Declare our defaults
|
||||
var defaults = {
|
||||
finishDelayThrottle: 2,
|
||||
finishSpeedPercent: 0.72,
|
||||
leftOffsetPercentage: 0.8,
|
||||
selector: '.animate-fade-slide-in .item',
|
||||
startVelocity: 1100
|
||||
};
|
||||
|
||||
// Apply defaults if properties are not passed
|
||||
if (typeof options === 'undefined') {
|
||||
options = {};
|
||||
}
|
||||
|
||||
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
||||
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
||||
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
||||
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
||||
|
||||
if (typeof options.selector == 'undefined') {
|
||||
options.selector = defaults.selector;
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid fadeSlideIn selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateFadeSlideInDom = document.querySelectorAll(options.selector);
|
||||
var elementsCount = animateFadeSlideInDom.length;
|
||||
var elementAnimationCount = 0;
|
||||
|
||||
// Count the elements within the starting viewport so we're not exacting
|
||||
// more effort than required...
|
||||
//
|
||||
// We use css visiblity: hidden instead of display: none so the elements
|
||||
// maintain their DOM flow
|
||||
|
||||
var viewportHeight = getViewportHeight();
|
||||
for (var i = 0; i < elementsCount; i++) {
|
||||
if (animateFadeSlideInDom[i].offsetTop < viewportHeight) {
|
||||
elementAnimationCount += 1;
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Sequentially animate with a delay based on proximity
|
||||
var speed = options.startVelocity;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateFadeSlideInDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed).toFixed(2);
|
||||
child.style.webkitTransitionDelay = delay + "s";
|
||||
child.style.transitionDelay = delay + "s";
|
||||
child.className += ' in';
|
||||
}
|
||||
|
||||
// When we're done animating, switch the class to 'done'
|
||||
setTimeout(function() {
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateFadeSlideInDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delayValue = offset / speed / options.finishDelayThrottle;
|
||||
var delay = parseFloat(delayValue).toFixed(2);
|
||||
}
|
||||
animateFadeSlideInDom[0].className += ' done';
|
||||
|
||||
}, speed * options.finishSpeedPercent);
|
||||
|
||||
// Load the elements without effect
|
||||
showNotAnimatedElements(animateFadeSlideInDom, elementsCount);
|
||||
}
|
||||
|
||||
function fadeSlideInRight(options) {
|
||||
|
||||
// Declare our defaults
|
||||
var defaults = {
|
||||
finishDelayThrottle: 2,
|
||||
finishSpeedPercent: 0.72,
|
||||
leftOffsetPercentage: 0.8,
|
||||
selector: '.animate-fade-slide-in-right .item',
|
||||
startVelocity: 1100
|
||||
};
|
||||
|
||||
// Apply defaults if properties are not passed
|
||||
if (typeof options === 'undefined') {
|
||||
options = {};
|
||||
}
|
||||
|
||||
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
||||
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
||||
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
||||
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
||||
|
||||
if (typeof options.selector == 'undefined') {
|
||||
options.selector = defaults.selector;
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid fadeSlideInRight selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateSlideInRightDom = document.querySelectorAll(options.selector);
|
||||
var elementsCount = animateSlideInRightDom.length;
|
||||
var elementAnimationCount = 0;
|
||||
|
||||
// Count the elements within the starting viewport so we're not
|
||||
// exacting more effort than required...
|
||||
//
|
||||
// We use css visiblity: hidden instead of display: none so the
|
||||
// elements maintain their DOM flow
|
||||
|
||||
var viewportHeight = getViewportHeight();
|
||||
for (var i = 0; i < elementsCount; i++) {
|
||||
if (animateSlideInRightDom[i].offsetTop < viewportHeight) {
|
||||
elementAnimationCount += 1;
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Sequentially animate with a delay based on proximity
|
||||
var speed = options.startVelocity;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateSlideInRightDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed).toFixed(2);
|
||||
child.style.webkitTransitionDelay = delay + "s";
|
||||
child.style.transitionDelay = delay + "s";
|
||||
child.className += ' in';
|
||||
}
|
||||
|
||||
// When we're done animating, switch the class to 'done'
|
||||
setTimeout(function() {
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateSlideInRightDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delayValue = offset / speed / options.finishDelayThrottle;
|
||||
var delay = parseFloat(delayValue).toFixed(2);
|
||||
}
|
||||
animateSlideInRightDom[0].className += ' done';
|
||||
|
||||
}, speed * options.finishSpeedPercent);
|
||||
|
||||
// Load the elements without effect
|
||||
showNotAnimatedElements(animateSlideInRightDom, elementsCount);
|
||||
|
||||
}
|
||||
|
||||
function ripple(options) {
|
||||
|
||||
// Declare our defaults
|
||||
var defaults = {
|
||||
finishDelayThrottle: 2,
|
||||
finishSpeedPercent: 0.72,
|
||||
leftOffsetPercentage: 0.8,
|
||||
selector: '.animate-ripple .item',
|
||||
startVelocity: 1100
|
||||
};
|
||||
|
||||
// Apply defaults if properties are not passed
|
||||
if (typeof options === 'undefined') {
|
||||
options = {};
|
||||
}
|
||||
|
||||
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
||||
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
||||
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
||||
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
||||
|
||||
if (typeof options.selector == 'undefined') {
|
||||
options.selector = defaults.selector;
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid ripple selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateRippleDom = document.querySelectorAll(options.selector);
|
||||
var elementsCount = animateRippleDom.length;
|
||||
var elementAnimationCount = 0;
|
||||
|
||||
// Count the elements within the starting viewport so we're not
|
||||
// exacting more effort than required...
|
||||
//
|
||||
// We use css visiblity: hidden instead of display: none so the
|
||||
// elements maintain their DOM flow
|
||||
|
||||
var viewportHeight = getViewportHeight();
|
||||
for (var i = 0; i < animateRippleDom.length; i++) {
|
||||
if (animateRippleDom[i].offsetTop < viewportHeight) {
|
||||
elementAnimationCount += 1;
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Sequentially animate with a delay based on proximity
|
||||
var speed = options.startVelocity;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateRippleDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delay = parseFloat(offset / speed).toFixed(2);
|
||||
child.style.webkitTransitionDelay = delay + "s";
|
||||
child.style.transitionDelay = delay + "s";
|
||||
child.className += ' in';
|
||||
}
|
||||
|
||||
// When we're done animating, switch the class to 'done'
|
||||
setTimeout(function() {
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var child = animateRippleDom[i];
|
||||
var childOffset = child.getBoundingClientRect();
|
||||
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
||||
var delayValue = offset / speed / options.finishDelayThrottle;
|
||||
var delay = parseFloat(delayValue).toFixed(2);
|
||||
}
|
||||
animateRippleDom[0].className += ' done';
|
||||
|
||||
}, speed * options.finishSpeedPercent);
|
||||
|
||||
// Load the elements without effect
|
||||
showNotAnimatedElements(animateRippleDom, elementsCount);
|
||||
}
|
||||
|
||||
function panInLeft(options) {
|
||||
|
||||
// We have a single option, so it may be passed as a string or property
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
selector: options
|
||||
};
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid pushDown selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animatePanInLeftDom = document.querySelectorAll(options.selector);
|
||||
var elementAnimationCount = animatePanInLeftDom.length;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var element = animatePanInLeftDom[i];
|
||||
var classNameToRemove = 'animate-pan-in-left';
|
||||
var indexOfClassNameToRemove = element.className.lastIndexOf(classNameToRemove);
|
||||
element.className = element.className.substr(0, indexOfClassNameToRemove);
|
||||
}
|
||||
}
|
||||
|
||||
function pushDown(options) {
|
||||
|
||||
// We have a single option, so it may be passed as a string or property
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
selector: options
|
||||
};
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid pushDown selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animatePushDownDom = document.querySelectorAll(options.selector);
|
||||
var elementAnimationCount = animatePushDownDom.length;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var element = animatePushDownDom[i];
|
||||
var classNameToRemove = options.selector.split('.')[1];
|
||||
var indexOfClassNameToRemove = element.className.lastIndexOf(classNameToRemove);
|
||||
element.className = element.className.substr(0, indexOfClassNameToRemove);
|
||||
}
|
||||
}
|
||||
|
||||
function slideUp(options) {
|
||||
|
||||
// We have a single option, so it may be passed as a string or property
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
selector: options
|
||||
};
|
||||
}
|
||||
|
||||
// Fail early & silently log
|
||||
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
||||
|
||||
if (isInvalidSelector) {
|
||||
console.log('invalid pushDown selector');
|
||||
return false;
|
||||
}
|
||||
|
||||
var animateSlideUpDom = document.querySelectorAll(options.selector);
|
||||
var elementAnimationCount = animateSlideUpDom.length;
|
||||
for (var i = 0; i < elementAnimationCount; i++) {
|
||||
var element = animateSlideUpDom[i];
|
||||
var classNameToRemove = options.selector.split('.')[1];
|
||||
var indexOfClassNameToRemove = element.className.lastIndexOf(classNameToRemove);
|
||||
element.className = element.className.substr(0, indexOfClassNameToRemove);
|
||||
}
|
||||
}
|
||||
|
||||
/* Export object
|
||||
/============================================================================*/
|
||||
return motion;
|
||||
}
|
||||
|
||||
Motion.$inject = [];
|
||||
};
|
||||
92
www/lib/ionic-material/src/scss/directives/md-label.scss
Normal file
92
www/lib/ionic-material/src/scss/directives/md-label.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
|
||||
/* Directives : MD Label
|
||||
==================================*/
|
||||
|
||||
.item-md-label {
|
||||
display: block;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
padding: 30px 0 0;
|
||||
}
|
||||
.item-md-label .input-label {
|
||||
position: absolute;
|
||||
padding: 5px 0 0;
|
||||
z-index: 2;
|
||||
-webkit-transform: translate3d(0, -30px, 0) scale(1);
|
||||
transform: translate3d(0, -30px, 0) scale(1);
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
-webkit-transform-origin: 0;
|
||||
-ms-transform-origin: 0;
|
||||
transform-origin: 0;
|
||||
}
|
||||
.item-md-label input {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
letter-spacing: 0.25rem;
|
||||
padding: 20px 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.item-md-label .highlight {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
-webkit-transition: all 0.15s ease;
|
||||
transition: all 0.15s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
.item-md-label .highlight-light {
|
||||
background: #fff;
|
||||
}
|
||||
.item-md-label .highlight-stable {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.item-md-label .highlight-positive {
|
||||
background: #387ef5;
|
||||
}
|
||||
.item-md-label .highlight-calm {
|
||||
background: #11c1f3;
|
||||
}
|
||||
.item-md-label .highlight-balanced {
|
||||
background: #33cd5f;
|
||||
}
|
||||
.item-md-label .highlight-energized {
|
||||
background: #ffc900;
|
||||
}
|
||||
.item-md-label .highlight-assertive {
|
||||
background: #ef473a;
|
||||
}
|
||||
.item-md-label .highlight-royal {
|
||||
background: #886aea;
|
||||
}
|
||||
.item-md-label .highlight-dark {
|
||||
background: #444;
|
||||
}
|
||||
.item-md-label .input-label {
|
||||
letter-spacing: 0.25rem;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.item-md-label input:focus ~ .input-label, .item-md-label input.used ~ .input-label {
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
filter: alpha(opacity=70);
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
-webkit-transform: translate3d(0, -60px, 0) scale(0.9);
|
||||
transform: translate3d(0, -60px, 0) scale(0.9);
|
||||
}
|
||||
.item-md-label input:focus ~ .highlight {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
|
||||
/* Bar - Header - Expanded
|
||||
==================================*/
|
||||
|
||||
.expanded .bar.bar-header,
|
||||
.bar.bar-header.expanded {
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.expanded.bar.bar-header .title,
|
||||
.bar.bar-header.expanded .title {
|
||||
bottom: 0;
|
||||
top: initial;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.expanded .bar.bar-header .title.fab-left,
|
||||
.bar.bar-header.expanded .title.fab-left {
|
||||
bottom: 0;
|
||||
left: 90px;
|
||||
position: absolute;
|
||||
right: initial;
|
||||
top: initial;
|
||||
}
|
||||
.expanded .bar.bar-header .title.fab-right,
|
||||
.bar.bar-header.expanded .title.fab-right {
|
||||
bottom: 0;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: initial;
|
||||
right: initial;
|
||||
}
|
||||
.expanded .bar.bar-header + .button-fab,
|
||||
.bar.bar-header.expanded + .button-fab {
|
||||
top: 50px;
|
||||
}
|
||||
.expanded .bar.bar-header.push-down,
|
||||
.bar.bar-header.expanded.push-down {
|
||||
height: 44px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.expanded .bar.bar-header,
|
||||
.bar.bar-header.expanded {
|
||||
-webkit-transition: height 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: height 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.expanded .bar.bar-header + .button-fab,
|
||||
.bar.bar-header.expanded + .button-fab {
|
||||
-webkit-transition: all 1.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: all 1.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(1);
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
.expanded .bar.bar-header.push-down + .button-fab,
|
||||
.bar.bar-header.expanded.push-down + .button-fab {
|
||||
top: 0;
|
||||
-webkit-transform: translate3d(-100px, -100px, 0) scale(2.5);
|
||||
transform: translate3d(-100px, -100px, 0) scale(2.5);
|
||||
}
|
||||
.expanded .bar.bar-header.push-down .title,
|
||||
.bar.bar-header.expanded.push-down .title {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
left: initial;
|
||||
right: initial;
|
||||
}
|
||||
.expanded .bar.bar-header .title,
|
||||
.bar.bar-header.expanded .title {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
-webkit-transition: all 2s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: all 2s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
.expanded .bar.bar-header .title, .bar.bar-header.expanded .title {
|
||||
bottom: 0;
|
||||
left: 42px !important;
|
||||
top: initial;
|
||||
}
|
||||
.expanded.has-header-fab-left .bar.bar-header .title, .bar.bar-header.expanded.has-header-fab-left .title {
|
||||
left: 76px !important;
|
||||
}
|
||||
41
www/lib/ionic-material/src/scss/elements/bar.scss
Normal file
41
www/lib/ionic-material/src/scss/elements/bar.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
/* Bar
|
||||
==================================*/
|
||||
// variables
|
||||
$base-bar-height: 46px;
|
||||
|
||||
// rules
|
||||
.bar {
|
||||
z-index: 2;
|
||||
font-size: 1.3em;
|
||||
width: 100%;
|
||||
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.bar .button {
|
||||
min-width: 38px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.bar .no-text span.back-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bar .title sup {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.bar.bar-header .button + .title {
|
||||
text-align: left;
|
||||
left: 35px;
|
||||
line-height: $base-bar-height;
|
||||
}
|
||||
|
||||
|
||||
// .bar-double{
|
||||
// height: $base-bar-height * 2;
|
||||
// }
|
||||
|
||||
// .bar-triple{
|
||||
// height: $base-bar-height * 3;
|
||||
// }
|
||||
49
www/lib/ionic-material/src/scss/elements/button-bar.scss
Normal file
49
www/lib/ionic-material/src/scss/elements/button-bar.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
/* Button Bar
|
||||
==================================*/
|
||||
|
||||
.button-bar {
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.button-bar > .button {
|
||||
box-shadow: none;
|
||||
/* line-height: initial; */
|
||||
}
|
||||
|
||||
.button-bar>.button .icon:before,
|
||||
.button-bar>.button:before {
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.bar-footer .button-fab {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
bottom: initial;
|
||||
}
|
||||
|
||||
.bar-footer .buttons-left .button-fab {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.bar-footer .buttons-right .button-fab {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.bar .button.button-clear {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.left-buttons .button-fab {
|
||||
left: 8px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.right-buttons .button-fab {
|
||||
right: 8px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.fab-left.title-left,
|
||||
.fab-left.title.title-left {
|
||||
left: 68px;
|
||||
}
|
||||
236
www/lib/ionic-material/src/scss/elements/button-fab.scss
Normal file
236
www/lib/ionic-material/src/scss/elements/button-fab.scss
Normal file
@@ -0,0 +1,236 @@
|
||||
/* Button : FAB
|
||||
==================================*/
|
||||
|
||||
.button.button-fab,
|
||||
.bar .button.button-fab {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
z-index: 9999;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
max-height: initial;
|
||||
max-width: initial;
|
||||
border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition: 0.3s fade-in-out;
|
||||
transition: 0.3s fade-in-out;
|
||||
-webkit-transition-property: -webkit-transform, box-shadow;
|
||||
transition-property: transform, box-shadow;
|
||||
}
|
||||
|
||||
.button.button-fab.button-fab-bottom-right,
|
||||
.bar .button.button-fab.button-fab-bottom-right {
|
||||
top: auto;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.button.button-fab.button-fab-bottom-left,
|
||||
.bar .button.button-fab.button-fab-bottom-left {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.button.button-fab.button-fab-top-right,
|
||||
.bar .button.button-fab.button-fab-top-right {
|
||||
top: 32px;
|
||||
right: 16px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.button.button-fab.button-fab-top-left,
|
||||
.bar .button.button-fab.button-fab-top-left {
|
||||
top: 32px;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
.button.button-fab.button-fab-top-left.expanded,
|
||||
.button.button-fab.button-fab-top-right.expanded,
|
||||
.bar .button.button-fab.button-fab-top-left.expanded,
|
||||
.bar .button.button-fab.button-fab-top-right.expanded {
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.button.button-fab i,
|
||||
.bar .button.button-fab i {
|
||||
font-size: 2.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.button.button-fab.mini,
|
||||
.bar .button.button-fab.mini {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.button.button-fab.mini i,
|
||||
.bar .button.button-fab.mini i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
/* Motion */
|
||||
.motion {
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.fade {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transition: all 0.1s ease-out !important;
|
||||
transition: all 0.1s ease-out !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.spin-back {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotate(360deg) scale(0) !important;
|
||||
transform: translateZ(0) rotate(360deg) scale(0) !important;
|
||||
-webkit-transition: all 0.1s ease-out !important;
|
||||
transition: all 0.1s ease-out !important;
|
||||
}
|
||||
.spiral {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
|
||||
transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
|
||||
-webkit-transition: all 0.1s ease-out !important;
|
||||
transition: all 0.1s ease-out !important;
|
||||
}
|
||||
.spiral-back {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
|
||||
transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
|
||||
-webkit-transition: all 0.1s ease-out !important;
|
||||
transition: all 0.1s ease-out !important;
|
||||
}
|
||||
.menu-open .avatar {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
-webkit-transform: translateZ(0) rotate(0) scale(1) !important;
|
||||
transform: translateZ(0) rotate(0) scale(1) !important;
|
||||
-webkit-transition: all 0.3s ease-out !important;
|
||||
transition: all 0.3s ease-out !important;
|
||||
}
|
||||
|
||||
.button.button-fab.button-fab-top-left.motion {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(-120px, 60px, 0);
|
||||
transform: translate3d(-120px, 60px, 0);
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
.button.button-fab.button-fab-top-right.motion {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(120px, 60px, 0);
|
||||
transform: translate3d(120px, 60px, 0);
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
.button.button-fab.button-fab-bottom-left.motion {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(-120px, 60px, 0);
|
||||
transform: translate3d(-120px, 60px, 0);
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
.button.button-fab.button-fab-bottom-right.motion {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(120px, 60px, 0);
|
||||
transform: translate3d(120px, 60px, 0);
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.spin {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotate(0) scale(0) !important;
|
||||
transform: translateZ(0) rotate(0) scale(0) !important;
|
||||
-webkit-transition: all 0.3s ease-out !important;
|
||||
transition: all 0.3s ease-out !important;
|
||||
}
|
||||
.spin.on {
|
||||
-webkit-transform: translateZ(0) rotate(-360deg) scale(1) !important;
|
||||
transform: translateZ(0) rotate(-360deg) scale(1) !important;
|
||||
}
|
||||
.flap {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
|
||||
transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.flap.on {
|
||||
-webkit-transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
|
||||
transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.drop {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) scale(3) !important;
|
||||
transform: translateZ(0) scale(3) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.drop.on {
|
||||
-webkit-transform: translateZ(0) scale(1) !important;
|
||||
transform: translateZ(0) scale(1) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.flip {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotateY(0) scale(0) !important;
|
||||
transform: translateZ(0) rotateY(0) scale(0) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.flip.on {
|
||||
-webkit-transform: translateZ(0) rotateY(-720deg) scale(1) !important;
|
||||
transform: translateZ(0) rotateY(-720deg) scale(1) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
|
||||
/* Button : Floating
|
||||
==================================*/
|
||||
|
||||
.button.button-floating, .bar .button.button-floating {
|
||||
display: inline-block;
|
||||
color: #FFF;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
line-height: 37px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
background-clip: padding-box;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button.button-floating i, .bar .button.button-floating i {
|
||||
width: inherit;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
font-size: 1.6rem;
|
||||
line-height: 37px;
|
||||
}
|
||||
.button.button-floating.button-large, .bar .button.button-floating.button-large {
|
||||
width: 55.5px;
|
||||
height: 55.5px;
|
||||
}
|
||||
.button.button-floating.button-large i, .bar .button.button-floating.button-large i {
|
||||
line-height: 55.5px;
|
||||
}
|
||||
221
www/lib/ionic-material/src/scss/elements/button.scss
Normal file
221
www/lib/ionic-material/src/scss/elements/button.scss
Normal file
@@ -0,0 +1,221 @@
|
||||
/* Button
|
||||
==================================*/
|
||||
|
||||
.button,
|
||||
.button.button-large,
|
||||
.button.button-flat,
|
||||
.bar .button,
|
||||
.bar .button.button-large,
|
||||
.bar .button.button-flat {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
padding: 0 2rem;
|
||||
border-radius: 2px;
|
||||
background-clip: padding-box;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
outline: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.button.disabled,
|
||||
.button.disabled.button-large,
|
||||
.button.button-floating.disabled,
|
||||
.button.button-large.disabled,
|
||||
.button.button:disabled,
|
||||
.button.button-large:disabled,
|
||||
.button.button-large:disabled,
|
||||
.button.button-floating:disabled,
|
||||
.bar .button.disabled,
|
||||
.bar .button.disabled.button-large,
|
||||
.bar .button.button-floating.disabled,
|
||||
.bar .button.button-large.disabled,
|
||||
.bar .button.button:disabled,
|
||||
.bar .button.button-large:disabled,
|
||||
.bar .button.button-large:disabled,
|
||||
.bar .button.button-floating:disabled {
|
||||
background-color: #DFDFDF;
|
||||
box-shadow: none;
|
||||
color: #9F9F9F;
|
||||
}
|
||||
|
||||
.button.disabled:hover,
|
||||
.button.disabled.button-large:hover,
|
||||
.button.button-floating.disabled:hover,
|
||||
.button.button-large.disabled:hover,
|
||||
.button.button:disabled:hover,
|
||||
.button.button-large:disabled:hover,
|
||||
.button.button-large:disabled:hover,
|
||||
.button.button-floating:disabled:hover,
|
||||
.bar .button.disabled:hover,
|
||||
.bar .button.disabled.button-large:hover,
|
||||
.bar .button.button-floating.disabled:hover,
|
||||
.bar .button.button-large.disabled:hover,
|
||||
.bar .button.button:disabled:hover,
|
||||
.bar .button.button-large:disabled:hover,
|
||||
.bar .button.button-large:disabled:hover,
|
||||
.bar .button.button-floating:disabled:hover {
|
||||
background-color: #DFDFDF;
|
||||
color: #9F9F9F;
|
||||
}
|
||||
|
||||
.button i,
|
||||
.button.button-large i,
|
||||
.button.button-floating i,
|
||||
.button.button-large i,
|
||||
.button.button-flat i,
|
||||
.bar .button i,
|
||||
.bar .button.button-large i,
|
||||
.bar .button.button-floating i,
|
||||
.bar .button.button-large i,
|
||||
.bar .button.button-flat i {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.button-bar .button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.button,
|
||||
.button-large,
|
||||
.bar .button,
|
||||
.bar .button-large {
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
letter-spacing: 0.5px;
|
||||
-webkit-transition: 0.2s ease-out;
|
||||
transition: 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
/* background: transparent; */
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-style: inherit;
|
||||
font-variant: inherit;
|
||||
font-size: inherit;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
-webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button.ng-hide {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.button.cornered {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.button.raised {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.button-outline,
|
||||
.button-outline:hover,
|
||||
.button-outline:active {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.button.button-outline.button-assertive,
|
||||
.button.button-outline.button-balanced,
|
||||
.button.button-outline.button-calm,
|
||||
.button.button-outline.button-dark,
|
||||
.button.button-outline.button-energized,
|
||||
.button.button-outline.button-light,
|
||||
.button.button-outline.button-positive,
|
||||
.button.button-outline.button-royal,
|
||||
.button.button-outline.button-stable,
|
||||
.button.button-outline {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button-flat,
|
||||
.bar .button-flat {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: #343434;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button.button-flat.disabled,
|
||||
.bar .button.button-flat.disabled {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.button.button-large i,
|
||||
.bar .button.button-large i {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.button-pin-header.button-floating {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.button-pin-header.button-pin-left {
|
||||
left: 24px;
|
||||
top: -24px;
|
||||
}
|
||||
|
||||
.button-pin-header.button-pin-right {
|
||||
right: 24px;
|
||||
top: -24px;
|
||||
}
|
||||
|
||||
.button:not([disabled]).raised:focus,
|
||||
.button:not([disabled]).raised:hover,
|
||||
.button:not([disabled]).floating:focus,
|
||||
.button:not([disabled]).floating:hover {
|
||||
-webkit-transform: translate3d(0, -1px, 0);
|
||||
transform: translate3d(0, -1px, 0);
|
||||
}
|
||||
|
||||
.button.button-flat {
|
||||
box-shadow: none;
|
||||
/* background: transparent; */
|
||||
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.button.button-flat:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.button.button-flat,
|
||||
.button.button-flat:hover,
|
||||
.button.button-flat:active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.button-clear,
|
||||
.button.button-clear:hover,
|
||||
.button.button-clear:active {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
.button-full.ink,
|
||||
.button-block.ink {
|
||||
display: block;
|
||||
}
|
||||
68
www/lib/ionic-material/src/scss/elements/card.scss
Normal file
68
www/lib/ionic-material/src/scss/elements/card.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
|
||||
/* Card
|
||||
==================================*/
|
||||
|
||||
.card-item.item {
|
||||
border: none;
|
||||
padding-bottom: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.card-item.item:first-child {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
.card .image {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.card img {
|
||||
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: initial;
|
||||
position: static;
|
||||
}
|
||||
.card.card-gallery img {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
}
|
||||
.card .card-footer {
|
||||
font-size: 90%;
|
||||
opacity: 0.8;
|
||||
filter: alpha(opacity=80);
|
||||
padding-top: 10px;
|
||||
}
|
||||
.card > .item {
|
||||
border: none;
|
||||
}
|
||||
.card.card-gallery > .item {
|
||||
background: inherit;
|
||||
}
|
||||
.card .icon + .icon {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.card.animate-fade-in {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transform: translate3d(-30px, 1px, 0);
|
||||
-webkit-transition: all 1s ease-in-out;
|
||||
}
|
||||
.card.animate-fade-in.done {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.card .item.item-avatar {
|
||||
min-height: 88px;
|
||||
padding-left: 88px;
|
||||
}
|
||||
119
www/lib/ionic-material/src/scss/elements/hero.scss
Normal file
119
www/lib/ionic-material/src/scss/elements/hero.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
|
||||
/* Hero
|
||||
==================================*/
|
||||
|
||||
.hero {
|
||||
background-size: cover;
|
||||
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
color: #fff;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
-webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero > * {
|
||||
-webkit-transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
|
||||
.hero + .mid-bar {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
height: initial;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
|
||||
.hero .hero-icon {
|
||||
box-shadow: 0px 0 2px 0 rgba(0, 0, 0, 0.26);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
font-size: 65px;
|
||||
height: 150px;
|
||||
padding: 10px 30px;
|
||||
line-height: 136px;
|
||||
width: 150px;
|
||||
}
|
||||
.hero.no-header {
|
||||
height: 244px;
|
||||
}
|
||||
.hero > .content {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.hero > .content > .avatar {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border: solid 1px rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 88px;
|
||||
left: auto;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
width: 88px;
|
||||
}
|
||||
.hero h1 .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.hero h4 {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin: 3px 0 16px;
|
||||
}
|
||||
.hero h1 > a, .hero h2 > a, .hero h3 > a, .hero h4 > a, .hero h5 > a, .hero h6 > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.hero + .button-bar {
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
.hero + .button-bar > .button:first-child, .hero + .button-bar > .button:last-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
.hero .hero-icon {
|
||||
color: #fff;
|
||||
font-size: 96px;
|
||||
}
|
||||
.hero .hero-icon + h1 {
|
||||
color: rgb(255, 255, 255);
|
||||
letter-spacing: 0.15rem;
|
||||
}
|
||||
.hero .button, .hero .button.button-large, .hero .button.button-flat {
|
||||
margin: 0;
|
||||
}
|
||||
.hero h1.title {
|
||||
color: #fff;
|
||||
font-size: 23px;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
padding-left: 80px;
|
||||
line-height: 59px;
|
||||
}
|
||||
.hero + .mid-bar {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
height: initial;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.hero > * {
|
||||
-webkit-transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
28
www/lib/ionic-material/src/scss/elements/item.scss
Normal file
28
www/lib/ionic-material/src/scss/elements/item.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
|
||||
/* Item
|
||||
==================================*/
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
.item-icon-left .icon {
|
||||
left: 16px;
|
||||
}
|
||||
.item-icon-right .icon {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
.list .item.item-icon-right {
|
||||
padding-right: 60px;
|
||||
}
|
||||
*/
|
||||
|
||||
.item-thumbnail-left > img:first-child, .item-thumbnail-left .item-image, .item-thumbnail-left .item-content > img:first-child, .item-thumbnail-left .item-content .item-image {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tab-item.activated {
|
||||
height: calc(100% + 3px); /* Stretch */
|
||||
}
|
||||
187
www/lib/ionic-material/src/scss/elements/list.scss
Normal file
187
www/lib/ionic-material/src/scss/elements/list.scss
Normal file
@@ -0,0 +1,187 @@
|
||||
@import "../helpers/colors";
|
||||
@import "../helpers/sizes";
|
||||
|
||||
|
||||
/* List
|
||||
==================================*/
|
||||
|
||||
.content + .list {
|
||||
padding-top: 0;
|
||||
}
|
||||
.list .item {
|
||||
border: none;
|
||||
/*
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
*/
|
||||
min-height: $item-tile-height;
|
||||
// height: $item-tile-height;
|
||||
text-align: left;
|
||||
}
|
||||
.list .item.tabs {
|
||||
padding: initial;
|
||||
}
|
||||
.list .item.item-bg-image {
|
||||
max-height: 150px;
|
||||
min-height: 150px;
|
||||
}
|
||||
.list .item.item-bg-image > img {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
max-width: initial;
|
||||
opacity: 0.65;
|
||||
filter: alpha(opacity=65);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.list a.item {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.list .item.item-bg-image h1, .list .item.item-bg-image h2, .list .item.item-bg-image h3, .list .item.item-bg-image h4, .list .item.item-bg-image h5, .list .item.item-bg-image h6 {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
text-shadow: 0 0 3px rgba(0, 0, 0, 0.95);
|
||||
z-index: 1;
|
||||
}
|
||||
.list .item.item-bg-image h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.list .item.item-bg-image h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.list .item.item-bg-image p {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 17px;
|
||||
position: relative;
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
|
||||
z-index: 1;
|
||||
}
|
||||
.item-avatar, .item-avatar .item-content, .item-avatar-left, .item-avatar-left .item-content {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
/* List: Thumbnails
|
||||
==================================*/
|
||||
|
||||
.item-thumbnail-left, .card > .item.item-thumbnail-left, .item-thumbnail-left .item-content {
|
||||
padding-left: 106px;
|
||||
}
|
||||
.item-thumbnail-right, .card > .item.item-thumbnail-right, .item-thumbnail-right .item-content {
|
||||
padding-right: 106px;
|
||||
}
|
||||
|
||||
|
||||
/* List: Avatar
|
||||
==================================*/
|
||||
|
||||
.item-avatar > img:first-child, .item-avatar .item-image, .item-avatar .item-content > img:first-child, .item-avatar .item-content .item-image, .item-avatar-left > img:first-child, .item-avatar-left .item-image, .item-avatar-left .item-content > img:first-child, .item-avatar-left .item-content .item-image {
|
||||
border-radius: 50%;
|
||||
left: 16px;
|
||||
max-height: 40px;
|
||||
max-width: 40px;
|
||||
}
|
||||
/*
|
||||
.item-avatar, .list .item-avatar {
|
||||
padding-left: 100px;
|
||||
}
|
||||
*/
|
||||
.avatar, .item-avatar .avatar {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
|
||||
/* List: Gallery
|
||||
==================================*/
|
||||
|
||||
.list.half {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 50%;
|
||||
}
|
||||
.list.half:first-child {
|
||||
padding: 16px 8px 16px 16px;
|
||||
}
|
||||
.list.half:last-child {
|
||||
padding: 16px 16px 16px 8px;
|
||||
}
|
||||
|
||||
.list.half:first-child .card.card-gallery {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.list.half:last-child .card.card-gallery {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.list.condensed-space > .card, .list.condensed-space > .item {
|
||||
margin: 0px 0px 2px;
|
||||
}
|
||||
.list .card.card-gallery {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 0 0 13px;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
.list.half .item {
|
||||
width: 100%;
|
||||
}
|
||||
.list.half .item.card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.list .card.card-gallery.item h2 {
|
||||
padding: 12px;
|
||||
}
|
||||
.list .item.item-gallery {} .list .item.item-gallery img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.item.item-divider {
|
||||
&:first-child{
|
||||
border: none;
|
||||
}
|
||||
border-top: solid 1px rgba(0,0,0,0.12);
|
||||
font-size: $material-base-font-size;
|
||||
font-weight: bold;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
color: $material-light-bg-dark-text-secondary;
|
||||
// padding-bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
.item-avatar, .item-avatar .item-content, .item-avatar-left, .item-avatar-left .item-content, .card > .item-avatar {
|
||||
padding-left: 72px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.item.active, .item.activated, .item-complex.active .item-content, .item-complex.activated .item-content, .item .item-content.active, .item .item-content.activated {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.list-inset {
|
||||
margin: 20px 30px;
|
||||
border-left: solid 1px #ccc;
|
||||
border-radius: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.list .item.item-floating-label,
|
||||
.item-floating-label {
|
||||
border-bottom: solid 1px #ccc;
|
||||
}
|
||||
93
www/lib/ionic-material/src/scss/elements/loading.scss
Normal file
93
www/lib/ionic-material/src/scss/elements/loading.scss
Normal file
@@ -0,0 +1,93 @@
|
||||
.loader {
|
||||
position: relative;
|
||||
margin: 0px auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
zoom: 1.7;
|
||||
}
|
||||
|
||||
.circular {
|
||||
-webkit-animation: rotate 2s linear infinite;
|
||||
animation: rotate 2s linear infinite;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.path {
|
||||
stroke-dasharray: 1,200;
|
||||
stroke-dashoffset: 0;
|
||||
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
|
||||
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1,200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89,200;
|
||||
stroke-dashoffset: -35;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89,200;
|
||||
stroke-dashoffset: -124;
|
||||
}
|
||||
}
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1,200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89,200;
|
||||
stroke-dashoffset: -35;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89,200;
|
||||
stroke-dashoffset: -124;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes color {
|
||||
100%, 0% {
|
||||
stroke: #d62d20;
|
||||
}
|
||||
40% {
|
||||
stroke: #0057e7;
|
||||
}
|
||||
66% {
|
||||
stroke: #008744;
|
||||
}
|
||||
80%, 90% {
|
||||
stroke: #ffa700;
|
||||
}
|
||||
}
|
||||
@keyframes color {
|
||||
100%, 0% {
|
||||
stroke: #d62d20;
|
||||
}
|
||||
40% {
|
||||
stroke: #0057e7;
|
||||
}
|
||||
66% {
|
||||
stroke: #008744;
|
||||
}
|
||||
80%, 90% {
|
||||
stroke: #ffa700;
|
||||
}
|
||||
}
|
||||
28
www/lib/ionic-material/src/scss/elements/login.scss
Normal file
28
www/lib/ionic-material/src/scss/elements/login.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
|
||||
/* Layouts: Login
|
||||
==================================*/
|
||||
|
||||
.login {
|
||||
background-position: 25% 25%;
|
||||
background-size: 180% 180%;
|
||||
height: 100%;
|
||||
-webkit-transition: all 1.5s ease-in-out;
|
||||
transition: all 1.5s ease-in-out;
|
||||
}
|
||||
.login .item {
|
||||
margin: 0 12px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: initial;
|
||||
}
|
||||
.login .button-bar {
|
||||
bottom: 0;
|
||||
margin: 28px 12px 0;
|
||||
width: initial;
|
||||
}
|
||||
.login .light-bg {
|
||||
background-color: #fff;
|
||||
}
|
||||
.icon.hero-icon:before {
|
||||
line-height: 130px;
|
||||
}
|
||||
24
www/lib/ionic-material/src/scss/elements/mask.scss
Normal file
24
www/lib/ionic-material/src/scss/elements/mask.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
|
||||
/* Mask
|
||||
==================================*/
|
||||
|
||||
.hero.has-mask:after, .item.has-mask:after, .card.has-mask:after {
|
||||
content: '';
|
||||
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.hero.has-mask-reverse:after, .item.has-mask-reverse:after, .card.has-mask-reverse:after {
|
||||
content: '';
|
||||
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
}
|
||||
37
www/lib/ionic-material/src/scss/elements/menu.scss
Normal file
37
www/lib/ionic-material/src/scss/elements/menu.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
/* Menu */
|
||||
|
||||
.menu-bottom {
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.menu-top {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.menu .avatar {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
height: 65px;
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.menu .bar.bar-header.expanded {
|
||||
box-shadow: none;
|
||||
min-height: 150px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-open .bar.bar-header.expanded {
|
||||
background-position: 0;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.has-expanded-header {
|
||||
top: 150px !important;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
.motion {
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.fade {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transition: all 0.1s ease-out !important;
|
||||
transition: all 0.1s ease-out !important;
|
||||
}
|
||||
.spin-back {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotate(360deg) scale(0) !important;
|
||||
transform: translateZ(0) rotate(360deg) scale(0) !important;
|
||||
-webkit-transition: all 0.1s ease-out !important;
|
||||
transition: all 0.1s ease-out !important;
|
||||
}
|
||||
.spiral {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
|
||||
transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
|
||||
-webkit-transition: all 0.1s ease-out !important;
|
||||
transition: all 0.1s ease-out !important;
|
||||
}
|
||||
.spiral-back {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
|
||||
transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
|
||||
-webkit-transition: all 0.1s ease-out !important;
|
||||
transition: all 0.1s ease-out !important;
|
||||
}
|
||||
.menu-open .avatar {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
-webkit-transform: translateZ(0) rotate(0) scale(1) !important;
|
||||
transform: translateZ(0) rotate(0) scale(1) !important;
|
||||
-webkit-transition: all 0.3s ease-out !important;
|
||||
transition: all 0.3s ease-out !important;
|
||||
}
|
||||
.spin {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotate(0) scale(0) !important;
|
||||
transform: translateZ(0) rotate(0) scale(0) !important;
|
||||
-webkit-transition: all 0.3s ease-out !important;
|
||||
transition: all 0.3s ease-out !important;
|
||||
}
|
||||
.spin.on {
|
||||
-webkit-transform: translateZ(0) rotate(-360deg) scale(1) !important;
|
||||
transform: translateZ(0) rotate(-360deg) scale(1) !important;
|
||||
}
|
||||
.flap {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
|
||||
transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.flap.on {
|
||||
-webkit-transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
|
||||
transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.drop {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) scale(3) !important;
|
||||
transform: translateZ(0) scale(3) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.drop.on {
|
||||
-webkit-transform: translateZ(0) scale(1) !important;
|
||||
transform: translateZ(0) scale(1) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.flip {
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform: translateZ(0) rotateY(0) scale(0) !important;
|
||||
transform: translateZ(0) rotateY(0) scale(0) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
.flip.on {
|
||||
-webkit-transform: translateZ(0) rotateY(-720deg) scale(1) !important;
|
||||
transform: translateZ(0) rotateY(-720deg) scale(1) !important;
|
||||
-webkit-transition: all 0.5s ease-out !important;
|
||||
transition: all 0.5s ease-out !important;
|
||||
}
|
||||
7
www/lib/ionic-material/src/scss/helpers/colors.scss
Normal file
7
www/lib/ionic-material/src/scss/helpers/colors.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
$material-light-bg-dark-text-primary: rgba(0,0,0,0.87);
|
||||
$material-light-bg-dark-text-secondary: rgba(0,0,0,0.54);
|
||||
$material-light-bg-dark-text-hints: rgba(0,0,0,0.26);
|
||||
|
||||
$material-dark-bg-light-text-primary: rgba(255,255,255,1);
|
||||
$material-dark-bg-light-text-secondary: rgba(255,255,255,0.7);
|
||||
$material-dark-bg-light-text-hints: rgba(255,255,255,0.3);
|
||||
4
www/lib/ionic-material/src/scss/helpers/sizes.scss
Normal file
4
www/lib/ionic-material/src/scss/helpers/sizes.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
$material-base-font-size: 14px;
|
||||
|
||||
$item-tile-height: 48px;
|
||||
$list-single-font-size: 16px;
|
||||
115
www/lib/ionic-material/src/scss/helpers/utilities.scss
Normal file
115
www/lib/ionic-material/src/scss/helpers/utilities.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
|
||||
/* Utilities
|
||||
==================================*/
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.double-padding, .ionic-content.double-padding {
|
||||
padding: 16px;
|
||||
}
|
||||
.double-padding-x {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.double-padding-y {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.outline {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-top {
|
||||
border-top: solid 1px #ccc;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.no-padding, .list.no-padding, .bar.no-padding, .button-bar.no-padding, .card.no-padding, .button.no-padding, .item.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
.flat, .flat.tabs, .flat.button, .flat.button.icon, .flat.hero {
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* Utilities : Padding
|
||||
==================================*/
|
||||
|
||||
.im-wrapper, .padding {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.padding-bottom {
|
||||
padding-bottom: 16px !important;
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
padding-top: 16px !important;
|
||||
}
|
||||
|
||||
.padding-left {
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
|
||||
.padding-right {
|
||||
padding-right: 16px !important;
|
||||
}
|
||||
|
||||
.no-padding-bottom {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.no-padding-top {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.no-padding-left {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.no-padding-right {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/* Utilities : Depth
|
||||
==================================*/
|
||||
|
||||
.z1 {
|
||||
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
|
||||
/* Utilities : Color
|
||||
==================================*/
|
||||
|
||||
.bar.bar-positive.darker {
|
||||
background-color: #164FAB;
|
||||
}
|
||||
/* TODO: Expand to other colors */
|
||||
.bar.bar-positive.dark-positive-bg {
|
||||
background-color: #2C5CAD;
|
||||
}
|
||||
/* TODO: Expand to other colors */
|
||||
.muted {
|
||||
color: #C3C3C3;
|
||||
}
|
||||
.clear-bg {
|
||||
background: transparent;
|
||||
}
|
||||
40
www/lib/ionic-material/src/scss/index.scss
Normal file
40
www/lib/ionic-material/src/scss/index.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Ionic Material
|
||||
// scss version
|
||||
|
||||
@import
|
||||
// directives
|
||||
"directives/md-label.scss",
|
||||
|
||||
// elements
|
||||
"elements/bar-header-expanded.scss",
|
||||
"elements/bar.scss",
|
||||
"elements/button-bar.scss",
|
||||
"elements/button-fab.scss",
|
||||
"elements/button-floating.scss",
|
||||
"elements/button.scss",
|
||||
"elements/card.scss",
|
||||
"elements/hero.scss",
|
||||
"elements/item.scss",
|
||||
"elements/list.scss",
|
||||
"elements/loading.scss",
|
||||
"elements/login.scss",
|
||||
"elements/mask.scss",
|
||||
"elements/menu.scss",
|
||||
"elements/motion-elements.scss",
|
||||
|
||||
// helpers
|
||||
"helpers/utilities.scss",
|
||||
|
||||
// motion
|
||||
"motion/blinds.scss",
|
||||
"motion/pan-in-left.scss",
|
||||
"motion/ripple.scss",
|
||||
"motion/slide-fade-in.scss",
|
||||
"motion/slide-in-right.scss",
|
||||
"motion/slide-up.scss",
|
||||
|
||||
// overrides
|
||||
"overrides/ink.scss",
|
||||
"overrides/ionic.scss";
|
||||
87
www/lib/ionic-material/src/scss/motion/blinds.scss
Normal file
87
www/lib/ionic-material/src/scss/motion/blinds.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
|
||||
/* Motion: Blinds
|
||||
==================================*/
|
||||
|
||||
.animate-blinds .item,
|
||||
.animate-blinds .item {
|
||||
visibility: hidden;
|
||||
}
|
||||
.animate-blinds .item,
|
||||
.animate-blinds .item {
|
||||
-ms-transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transform: scale3d(0.8, 0, 1);
|
||||
transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
.animate-blinds .item-bg-image > img.background,
|
||||
.animate-blinds .item-bg-image > img.background {
|
||||
box-shadow: none;
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.animate-blinds .in,
|
||||
.animate-blinds.done > *,
|
||||
.animate-blinds .in,
|
||||
.animate-blinds.done > * {
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.animate-blinds .in,
|
||||
.animate-blinds.done .item,
|
||||
.animate-blinds .in,
|
||||
.animate-blinds.done .item {
|
||||
visibility: visible;
|
||||
}
|
||||
.animate-blinds .item,
|
||||
.animate-blinds .item {
|
||||
visibility: hidden;
|
||||
}
|
||||
.animate-blinds .item,
|
||||
.animate-blinds .item {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
.animate-blinds .in,
|
||||
.animate-blinds.done,
|
||||
.animate-blinds .in,
|
||||
.animate-blinds.done {
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-blinds .in,
|
||||
.animate-blinds.done,
|
||||
.animate-blinds .in,
|
||||
.animate-blinds.done {
|
||||
visibility: visible;
|
||||
}
|
||||
.animate-blinds.done .in,
|
||||
.animate-blinds.done .in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-blinds .has-mask-reverse:after,
|
||||
.animate-blinds .has-mask-reverse:after {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.animate-blinds.done .has-mask-reverse:after,
|
||||
.animate-blinds.done .has-mask-reverse:after {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-blinds .out,
|
||||
.animate-blinds .out {
|
||||
-ms-transform: scale3d(0, 0, 1);
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
transform: scale3d(0, 0, 1);
|
||||
}
|
||||
9
www/lib/ionic-material/src/scss/motion/pan-in-left.scss
Normal file
9
www/lib/ionic-material/src/scss/motion/pan-in-left.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
|
||||
|
||||
/* Motion: Pan In Left
|
||||
==================================*/
|
||||
|
||||
.animate-pan-in-left,
|
||||
.animate-pan-in-left {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
128
www/lib/ionic-material/src/scss/motion/ripple.scss
Normal file
128
www/lib/ionic-material/src/scss/motion/ripple.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
/* Motion: Ripple
|
||||
==================================*/
|
||||
|
||||
.animate-ripple .done,
|
||||
.animate-ripple .done {
|
||||
visibility: hidden;
|
||||
}
|
||||
.animate-ripple .done,
|
||||
.animate-ripple .done {
|
||||
-ms-transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transform: scale3d(0.8, 0, 1);
|
||||
transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
.animate-ripple .item-bg-image img.background,
|
||||
.animate-ripple .item-bg-image img.background {
|
||||
box-shadow: none;
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.animate-ripple .in, .animate-ripple.done,
|
||||
.animate-ripple .in, .animate-ripple.done {
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.animate-ripple .in, .animate-ripple.done,
|
||||
.animate-ripple .in, .animate-ripple.done {
|
||||
visibility: visible;
|
||||
}
|
||||
.animate-ripple .item {
|
||||
-ms-transform: scale3d(0, 0, 1);
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
transform: scale3d(0, 0, 1);
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
.animate-ripple .item.in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-ripple .done {
|
||||
visibility: hidden;
|
||||
}
|
||||
.animate-ripple .done,
|
||||
.animate-ripple .done {
|
||||
-ms-transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transform: scale3d(0.8, 0, 1);
|
||||
transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
/* Uncomment if you want images to fade in after the card
|
||||
|
||||
.animate-ripple .in .item-bg-image img:last-child,
|
||||
.animate-ripple .in .item-bg-image img:last-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animate-ripple.done .item-bg-image img:last-child,
|
||||
.animate-ripple.done .item-bg-image img:last-child {
|
||||
opacity: 1;
|
||||
-moz-transition: all 1s ease-in-out;
|
||||
-o-transition: all 1s ease-in-out;
|
||||
-webkit-transition: all 1s ease-in-out;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-ripple .item-bg-image img:last-child,
|
||||
.animate-ripple .item-bg-image img:last-child {
|
||||
box-shadow: none;
|
||||
-moz-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.animate-ripple .in .item-bg-image img:last-child,
|
||||
.animate-ripple .in .item-bg-image img:last-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animate-ripple.done .item-bg-image img:last-child,
|
||||
.animate-ripple.done .item-bg-image img:last-child {
|
||||
opacity: 1;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-ripple .in,
|
||||
.animate-ripple .in {
|
||||
opacity: 0.6;
|
||||
}
|
||||
*/
|
||||
|
||||
.animate-ripple .in, .animate-ripple.done, .animate-ripple .in, .animate-ripple.done {
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.animate-ripple .in, .animate-ripple.done, .animate-ripple .in, .animate-ripple.done {
|
||||
visibility: visible;
|
||||
}
|
||||
.animate-ripple.done .in, .animate-ripple.done .in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-ripple .has-mask-reverse:after, .animate-ripple .has-mask-reverse:after {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.animate-ripple.done .has-mask-reverse:after, .animate-ripple.done .has-mask-reverse:after {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-ripple .out, .animate-ripple .out {
|
||||
-ms-transform: scale3d(0, 0, 1);
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
transform: scale3d(0, 0, 1);
|
||||
}
|
||||
|
||||
96
www/lib/ionic-material/src/scss/motion/slide-fade-in.scss
Normal file
96
www/lib/ionic-material/src/scss/motion/slide-fade-in.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
|
||||
/* Motion: Slide / Fade In
|
||||
==================================*/
|
||||
|
||||
.animate-fade-slide-in .item,
|
||||
.animate-fade-slide-in .item {
|
||||
visibility: hidden;
|
||||
}
|
||||
.animate-fade-slide-in .item,
|
||||
.animate-fade-slide-in .item {
|
||||
-ms-transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transform: scale3d(0.8, 0, 1);
|
||||
transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
.animate-fade-slide-in .item-bg-image img.background,
|
||||
.animate-fade-slide-in .item-bg-image img.background {
|
||||
box-shadow: none;
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.animate-fade-slide-in .in,
|
||||
.animate-fade-slide-in.done .item,
|
||||
.animate-fade-slide-in .in,
|
||||
.animate-fade-slide-in.done .item {
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.animate-fade-slide-in .in,
|
||||
.animate-fade-slide-in.done .item,
|
||||
.animate-fade-slide-in .in,
|
||||
.animate-fade-slide-in.done .item {
|
||||
visibility: visible;
|
||||
}
|
||||
.list .item.item-bg-image,
|
||||
.list .item.item-bg-image {
|
||||
max-height: 150px;
|
||||
}
|
||||
.animate-fade-slide-in .item,
|
||||
.animate-fade-slide-in .item {
|
||||
visibility: hidden;
|
||||
}
|
||||
.animate-fade-slide-in .item,
|
||||
.animate-fade-slide-in .item {
|
||||
-ms-transform: translate3d(-250px, 250px, 0);
|
||||
-webkit-transform: translate3d(-250px, 250px, 0);
|
||||
transform: translate3d(-250px, 250px, 0);
|
||||
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
.animate-fade-slide-in .in,
|
||||
.animate-fade-slide-in.done,
|
||||
.animate-fade-slide-in .in,
|
||||
.animate-fade-slide-in.done {
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-fade-slide-in .in,
|
||||
.animate-fade-slide-in.done,
|
||||
.animate-fade-slide-in .in,
|
||||
.animate-fade-slide-in.done {
|
||||
visibility: visible;
|
||||
}
|
||||
.animate-fade-slide-in.done .in,
|
||||
.animate-fade-slide-in.done .in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-fade-slide-in .has-mask-reverse:after,
|
||||
.animate-fade-slide-in .has-mask-reverse:after {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.animate-fade-slide-in.done .has-mask-reverse:after,
|
||||
.animate-fade-slide-in.done .has-mask-reverse:after {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-fade-slide-in .out,
|
||||
.animate-fade-slide-in .out {
|
||||
-ms-transform: scale3d(0, 0, 1);
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
transform: scale3d(0, 0, 1);
|
||||
}
|
||||
92
www/lib/ionic-material/src/scss/motion/slide-in-right.scss
Normal file
92
www/lib/ionic-material/src/scss/motion/slide-in-right.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
|
||||
/* Motion: Slide In Right
|
||||
==================================*/
|
||||
|
||||
.animate-fade-slide-in-right .item,
|
||||
.animate-fade-slide-in-right .item {
|
||||
visibility: hidden;
|
||||
}
|
||||
.animate-fade-slide-in-right .item,
|
||||
.animate-fade-slide-in-right .item {
|
||||
-ms-transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transform: scale3d(0.8, 0, 1);
|
||||
transform: scale3d(0.8, 0, 1);
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
.animate-fade-slide-in-right .item-bg-image > img.background,
|
||||
.animate-fade-slide-in-right .item-bg-image > img.background {
|
||||
box-shadow: none;
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.animate-fade-slide-in-right .in,
|
||||
.animate-fade-slide-in-right.done > *,
|
||||
.animate-fade-slide-in-right .in,
|
||||
.animate-fade-slide-in-right.done > * {
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.animate-fade-slide-in-right .in,
|
||||
.animate-fade-slide-in-right.done .item,
|
||||
.animate-fade-slide-in-right .in,
|
||||
.animate-fade-slide-in-right.done .item {
|
||||
visibility: visible;
|
||||
}
|
||||
.animate-fade-slide-in-right .item,
|
||||
.animate-fade-slide-in-right .item {
|
||||
visibility: hidden;
|
||||
}
|
||||
.animate-fade-slide-in-right .item,
|
||||
.animate-fade-slide-in-right .item {
|
||||
-ms-transform: translate3d(250px, 250px, 0);
|
||||
-webkit-transform: translate3d(250px, 250px, 0);
|
||||
transform: translate3d(250px, 250px, 0);
|
||||
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
.animate-fade-slide-in-right .in,
|
||||
.animate-fade-slide-in-right.done,
|
||||
.animate-fade-slide-in-right .in,
|
||||
.animate-fade-slide-in-right.done {
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-fade-slide-in-right .in,
|
||||
.animate-fade-slide-in-right.done,
|
||||
.animate-fade-slide-in-right .in,
|
||||
.animate-fade-slide-in-right.done {
|
||||
visibility: visible;
|
||||
}
|
||||
.animate-fade-slide-in-right.done .in,
|
||||
.animate-fade-slide-in-right.done .in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-fade-slide-in-right .has-mask-reverse:after,
|
||||
.animate-fade-slide-in-right .has-mask-reverse:after {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.animate-fade-slide-in-right.done .has-mask-reverse:after,
|
||||
.animate-fade-slide-in-right.done .has-mask-reverse:after {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.animate-fade-slide-in-right .out,
|
||||
.animate-fade-slide-in-right .out {
|
||||
-ms-transform: scale3d(0, 0, 1);
|
||||
-webkit-transform: scale3d(0, 0, 1);
|
||||
transform: scale3d(0, 0, 1);
|
||||
}
|
||||
35
www/lib/ionic-material/src/scss/motion/slide-up.scss
Normal file
35
www/lib/ionic-material/src/scss/motion/slide-up.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
|
||||
/* Motion: Slide Up
|
||||
==================================*/
|
||||
|
||||
.slide-up,
|
||||
.slide-up,
|
||||
.hero.slide-up {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.slide-up {
|
||||
-webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slide-up *,
|
||||
.slide-up *,
|
||||
.hero.slide-up * {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
.hero.slide-up + .mid-bar,
|
||||
.slide-up + .mid-bar,
|
||||
.slide-up + .mid-bar {
|
||||
height: 100%;
|
||||
opacity: 0.7;
|
||||
filter: alpha(opacity=70);
|
||||
-webkit-transform: translate3d(100%, -240px, 0);
|
||||
transform: translate3d(100%, -240px, 0);
|
||||
}
|
||||
181
www/lib/ionic-material/src/scss/overrides/ink.scss
Normal file
181
www/lib/ionic-material/src/scss/overrides/ink.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
/*!
|
||||
* Waves v0.5.4
|
||||
* http://fian.my.id/Waves
|
||||
*
|
||||
* Copyright 2014 Alfiana E. Sibuea and other contributors
|
||||
* Forked by Zach Fitzgerald and other contributors for Ionic Material
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/fians/Waves/blob/master/LICENSE
|
||||
*
|
||||
*/
|
||||
.ink, .button-fab, .button-flat, .button-raised, .button-clear, .popup .button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
/*display: inline-block;*/
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.ink-ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: -50px;
|
||||
margin-left: -50px;
|
||||
opacity: 0;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
-moz-transition: all 0.5s ease-out;
|
||||
-o-transition: all 0.5s ease-out;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-transition-property: -webkit-transform, opacity;
|
||||
-moz-transition-property: -moz-transform, opacity;
|
||||
-o-transition-property: -o-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
.ink-notransition {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.button-fab,
|
||||
.button-flat,
|
||||
.button-clear,
|
||||
.button-raised,
|
||||
.ink-button,
|
||||
.ink-circle {
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
|
||||
.button-fab.activated,
|
||||
.button-flat.activated,
|
||||
.button-raised.activated,
|
||||
.button-clear.activated,
|
||||
.ink-button.activated,
|
||||
.ink.activated,
|
||||
.ink-circle.activated,
|
||||
.popup .button.activated,
|
||||
.button-fab:active,
|
||||
.button-flat:active,
|
||||
.button-raised:active,
|
||||
.button-clear:active,
|
||||
.ink-button:active,
|
||||
.ink:active,
|
||||
.ink-circle:active,
|
||||
.popup .button:active {
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%);
|
||||
}
|
||||
|
||||
.ink-button,
|
||||
.ink-button:visited,
|
||||
.ink-button:link,
|
||||
.button-fab,
|
||||
.button-fab:visited,
|
||||
.button-fab:link,
|
||||
.button-flat,
|
||||
.button-flat:visited,
|
||||
.button-flat:link,
|
||||
.button-raised,
|
||||
.button-raised:visited,
|
||||
.button-raised:link,
|
||||
.button-clear,
|
||||
.button-clear:visited,
|
||||
.button-clear:link,
|
||||
.ink-button-input {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
/* color: inherit; */
|
||||
/* background-color: rgba(0, 0, 0, 0); */
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.ink-button {
|
||||
padding: 10px 15px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ink-button-input {
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.ink-input-wrapper {
|
||||
border-radius: 2px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.ink-input-wrapper.ink-button {
|
||||
padding: 0;
|
||||
}
|
||||
.ink-input-wrapper .ink-button-input {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.ink-circle {
|
||||
text-align: center;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ink-float {
|
||||
-webkit-mask-image: none;
|
||||
-webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.ink-float:active {
|
||||
-webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.ink-block {
|
||||
display: block;
|
||||
}
|
||||
.ink-ripple {
|
||||
z-index: 0;
|
||||
/* Firefox Bug: link not triggered unless -1 z-index */
|
||||
}
|
||||
|
||||
/* Handled elsewhere
|
||||
.button-fab,.button-raised,.button-flat,.ink-circle,.list a.item {
|
||||
-webkit-mask-image: none;
|
||||
}
|
||||
*/
|
||||
|
||||
.button-clear .ink-ripple,
|
||||
*[class$="-clear"] > .ink-ripple,
|
||||
*[class$="-light"] > .ink-ripple,
|
||||
*[class$="-stable"] > .ink-ripple,
|
||||
*[class$="-100"] > .ink-ripple,
|
||||
.list .ink-ripple,
|
||||
.ink-dark .ink-ripple {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
position: relative; /* for Ink */
|
||||
}
|
||||
993
www/lib/ionic-material/src/scss/overrides/ionic.scss
Normal file
993
www/lib/ionic-material/src/scss/overrides/ionic.scss
Normal file
@@ -0,0 +1,993 @@
|
||||
/* Ionic Overrides
|
||||
==================================*/
|
||||
* {
|
||||
font-family: "RobotoDraft","Roboto","Helvetica Neue", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
a { cursor: pointer; }
|
||||
|
||||
.has-header.expanded { /* Expanded modifier */
|
||||
top: 76px;
|
||||
}
|
||||
|
||||
|
||||
/* Bar Overrides
|
||||
==================================*/
|
||||
.bar {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
.bar .button {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
max-width: 48px;
|
||||
margin-bottom: 0;
|
||||
max-height: 44px;
|
||||
width: 48px;
|
||||
}
|
||||
.bar .title + .buttons.buttons-right {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Title Overrides
|
||||
==================================*/
|
||||
.title-left,
|
||||
.title.title-left {
|
||||
left: 48px;
|
||||
}
|
||||
|
||||
.title-right,
|
||||
.title.title-right {
|
||||
left: 48px;
|
||||
}
|
||||
|
||||
|
||||
/* Background Colors
|
||||
==================================*/
|
||||
.positive-bg,
|
||||
.button-positive,
|
||||
.bar .button-positive,
|
||||
.header-positive,
|
||||
.button-bar-positive,
|
||||
.bar-positive,
|
||||
.positive-border,
|
||||
.positive-bg:hover,
|
||||
.bar .button-positive:hover,
|
||||
.button-positive:hover,
|
||||
.header-positive:hover,
|
||||
.button-bar-positive:hover,
|
||||
.bar-positive:hover,
|
||||
.positive-border:hover,
|
||||
.positive-bg:active,
|
||||
.bar .button-positive:active,
|
||||
.button-positive:active,
|
||||
.header-positive:active,
|
||||
.button-bar-positive:active,
|
||||
.bar-positive:active,
|
||||
.positive-border:active,
|
||||
.positive-bg.activated,
|
||||
.bar .button-positive.activated,
|
||||
.button-positive.activated,
|
||||
.header-positive.activated,
|
||||
.button-bar-positive.activated,
|
||||
.bar-positive.activated,
|
||||
.positive-border.activated {
|
||||
background-color: #3F51B5;
|
||||
color: #fff;
|
||||
}
|
||||
.positive-900-bg,
|
||||
.button-positive-900,
|
||||
.bar .button-positive-900,
|
||||
.header-positive-900,
|
||||
.button-bar-positive-900,
|
||||
.bar-positive-900,
|
||||
.positive-900-border,
|
||||
.positive-900-bg:hover,
|
||||
.button-positive-900:hover,
|
||||
.bar .button-positive-900:hover,
|
||||
.header-positive-900:hover,
|
||||
.button-bar-positive-900:hover,
|
||||
.bar-positive-900:hover,
|
||||
.positive-900-border:hover,
|
||||
.positive-900-bg:active,
|
||||
.bar .button-positive-900:active,
|
||||
.button-positive-900:active,
|
||||
.header-positive-900:active,
|
||||
.button-bar-positive-900:active,
|
||||
.bar-positive-900:active,
|
||||
.positive-900-border:active,
|
||||
.positive-900-bg.activated,
|
||||
.button-positive-900.activated,
|
||||
.bar .button-positive-900.activated,
|
||||
.header-positive-900.activated,
|
||||
.button-bar-positive-900.activated,
|
||||
.bar-positive-900.activated,
|
||||
.positive-900-border.activated {
|
||||
background-color: #1A237E;
|
||||
color: #fff;
|
||||
}
|
||||
.positive-100-bg,
|
||||
.button-positive-100,
|
||||
.bar .button-positive-100,
|
||||
.header-positive-100,
|
||||
.button-bar-positive-100,
|
||||
.bar-positive-100,
|
||||
.positive-100-border,
|
||||
.positive-100-bg:hover,
|
||||
.button-positive-100:hover,
|
||||
.bar .button-positive-100:hover,
|
||||
.header-positive-100:hover,
|
||||
.button-bar-positive-100:hover,
|
||||
.bar-positive-100:hover,
|
||||
.positive-100-border:hover,
|
||||
.positive-100-bg:active,
|
||||
.button-positive-100:active,
|
||||
.bar .button-positive-100:active,
|
||||
.header-positive-100:active,
|
||||
.button-bar-positive-100:active,
|
||||
.bar-positive-100:active,
|
||||
.positive-100-border:active,
|
||||
.positive-100-bg.activated,
|
||||
.button-positive-100.activated,
|
||||
.bar .button-positive-100.activated,
|
||||
.header-positive-100.activated,
|
||||
.button-bar-positive-100.activated,
|
||||
.bar-positive-100.activated,
|
||||
.positive-100-border.activated {
|
||||
background-color: #C5CAE9;
|
||||
color: #fff;
|
||||
}
|
||||
.calm-bg,
|
||||
.button-calm,
|
||||
.bar .button-calm,
|
||||
.header-calm,
|
||||
.button-bar-calm,
|
||||
.bar-calm,
|
||||
.calm-border,
|
||||
.calm-bg:hover,
|
||||
.button-calm:hover,
|
||||
.bar .button-calm:hover,
|
||||
.header-calm:hover,
|
||||
.button-bar-calm:hover,
|
||||
.bar-calm:hover,
|
||||
.calm-border:hover,
|
||||
.calm-bg:active,
|
||||
.button-calm:active,
|
||||
.bar .button-calm:active,
|
||||
.header-calm:active,
|
||||
.button-bar-calm:active,
|
||||
.bar-calm:active,
|
||||
.calm-border:active,
|
||||
.calm-bg.activated,
|
||||
.button-calm.activated,
|
||||
.bar .button-calm.activated,
|
||||
.header-calm.activated,
|
||||
.button-bar-calm.activated,
|
||||
.bar-calm.activated,
|
||||
.calm-border.activated {
|
||||
background-color: #2196F3;
|
||||
color: #fff;
|
||||
}
|
||||
.calm-900-bg,
|
||||
.button-calm-900,
|
||||
.bar .button-calm-900,
|
||||
.header-calm-900,
|
||||
.button-bar-calm-900,
|
||||
.bar-calm-900,
|
||||
.calm-900-border,
|
||||
.calm-900-bg:hover,
|
||||
.button-calm-900:hover,
|
||||
.bar .button-calm-900:hover,
|
||||
.header-calm-900:hover,
|
||||
.button-bar-calm-900:hover,
|
||||
.bar-calm-900:hover,
|
||||
.calm-900-border:hover,
|
||||
.calm-900-bg:active,
|
||||
.button-calm-900:active,
|
||||
.bar .button-calm-900:active,
|
||||
.header-calm-900:active,
|
||||
.button-bar-calm-900:active,
|
||||
.bar-calm-900:active,
|
||||
.calm-900-border:active,
|
||||
.calm-900-bg.activated,
|
||||
.button-calm-900.activated,
|
||||
.bar .button-calm-900.activated,
|
||||
.header-calm-900.activated,
|
||||
.button-bar-calm-900.activated,
|
||||
.bar-calm-900.activated,
|
||||
.calm-900-border.activated {
|
||||
background-color: #0D47A1;
|
||||
color: #fff;
|
||||
}
|
||||
.calm-100-bg,
|
||||
.button-calm-100,
|
||||
.bar .button-calm-100,
|
||||
.header-calm-100,
|
||||
.button-bar-calm-100,
|
||||
.bar-calm-100,
|
||||
.calm-100-border,
|
||||
.calm-100-bg:hover,
|
||||
.button-calm-100:hover,
|
||||
.bar .button-calm-100:hover,
|
||||
.header-calm-100:hover,
|
||||
.button-bar-calm-100:hover,
|
||||
.bar-calm-100:hover,
|
||||
.calm-100-border:hover,
|
||||
.calm-100-bg:active,
|
||||
.button-calm-100:active,
|
||||
.bar .button-calm-100:active,
|
||||
.header-calm-100:active,
|
||||
.button-bar-calm-100:active,
|
||||
.bar-calm-100:active,
|
||||
.calm-100-border:active,
|
||||
.calm-100-bg.activated,
|
||||
.button-calm-100.activated,
|
||||
.bar .button-calm-100.activated,
|
||||
.header-calm-100.activated,
|
||||
.button-bar-calm-100.activated,
|
||||
.bar-calm-100.activated,
|
||||
.calm-100-border.activated {
|
||||
background-color: #BBDEFB;
|
||||
color: #fff;
|
||||
}
|
||||
.royal-bg,
|
||||
.button-royal,
|
||||
.bar .button-royal,
|
||||
.header-royal,
|
||||
.button-bar-royal,
|
||||
.bar-royal,
|
||||
.royal-border,
|
||||
.royal-bg:hover,
|
||||
.button-royal:hover,
|
||||
.bar .button-royal:hover,
|
||||
.header-royal:hover,
|
||||
.button-bar-royal:hover,
|
||||
.bar-royal:hover,
|
||||
.royal-border:hover,
|
||||
.royal-bg:active,
|
||||
.button-royal:active,
|
||||
.bar .button-royal:active,
|
||||
.header-royal:active,
|
||||
.button-bar-royal:active,
|
||||
.bar-royal:active,
|
||||
.royal-border:active,
|
||||
.royal-bg.activated,
|
||||
.button-royal.activated,
|
||||
.bar .button-royal.activated,
|
||||
.header-royal.activated,
|
||||
.button-bar-royal.activated,
|
||||
.bar-royal.activated,
|
||||
.royal-border.activated {
|
||||
background-color: #673AB7;
|
||||
color: #fff;
|
||||
}
|
||||
.royal-900-bg,
|
||||
.button-royal-900,
|
||||
.bar .button-royal-900,
|
||||
.header-royal-900,
|
||||
.button-bar-royal-900,
|
||||
.bar-royal-900,
|
||||
.royal-900-border,
|
||||
.royal-900-bg:hover,
|
||||
.button-royal-900:hover,
|
||||
.bar .button-royal-900:hover,
|
||||
.header-royal-900:hover,
|
||||
.button-bar-royal-900:hover,
|
||||
.bar-royal-900:hover,
|
||||
.royal-900-border:hover,
|
||||
.royal-900-bg:active,
|
||||
.button-royal-900:active,
|
||||
.bar .button-royal-900:active,
|
||||
.header-royal-900:active,
|
||||
.button-bar-royal-900:active,
|
||||
.bar-royal-900:active,
|
||||
.royal-900-border:active,
|
||||
.royal-900-bg.activated,
|
||||
.button-royal-900.activated,
|
||||
.bar .button-royal-900.activated,
|
||||
.header-royal-900.activated,
|
||||
.button-bar-royal-900.activated,
|
||||
.bar-royal-900.activated,
|
||||
.royal-900-border.activated {
|
||||
background-color: #311B92;
|
||||
color: #fff;
|
||||
}
|
||||
.royal-100-bg,
|
||||
.button-royal-100,
|
||||
.bar .button-royal-100,
|
||||
.header-royal-100,
|
||||
.button-bar-royal-100,
|
||||
.bar-royal-100,
|
||||
.royal-100-border,
|
||||
.royal-100-bg:hover,
|
||||
.button-royal-100:hover,
|
||||
.bar .button-royal-100:hover,
|
||||
.header-royal-100:hover,
|
||||
.button-bar-royal-100:hover,
|
||||
.bar-royal-100:hover,
|
||||
.royal-100-border:hover,
|
||||
.royal-100-bg:active,
|
||||
.button-royal-100:active,
|
||||
.bar .button-royal-100:active,
|
||||
.header-royal-100:active,
|
||||
.button-bar-royal-100:active,
|
||||
.bar-royal-100:active,
|
||||
.royal-100-border:active,
|
||||
.royal-100-bg.activated,
|
||||
.button-royal-100.activated,
|
||||
.bar .button-royal-100.activated,
|
||||
.header-royal-100.activated,
|
||||
.button-bar-royal-100.activated,
|
||||
.bar-royal-100.activated,
|
||||
.royal-100-border.activated {
|
||||
background-color: #D1C4E9;
|
||||
color: #fff;
|
||||
}
|
||||
.balanced-bg,
|
||||
.button-balanced,
|
||||
.bar .button-balanced,
|
||||
.header-balanced,
|
||||
.button-bar-balanced,
|
||||
.bar-balanced,
|
||||
.balanced-border,
|
||||
.balanced-bg:hover,
|
||||
.button-balanced:hover,
|
||||
.bar .button-balanced:hover,
|
||||
.header-balanced:hover,
|
||||
.button-bar-balanced:hover,
|
||||
.bar-balanced:hover,
|
||||
.balanced-border:hover,
|
||||
.balanced-bg:active,
|
||||
.button-balanced:active,
|
||||
.bar .button-balanced:active,
|
||||
.header-balanced:active,
|
||||
.button-bar-balanced:active,
|
||||
.bar-balanced:active,
|
||||
.balanced-border:active,
|
||||
.balanced-bg.activated,
|
||||
.button-balanced.activated,
|
||||
.bar .button-balanced.activated,
|
||||
.header-balanced.activated,
|
||||
.button-bar-balanced.activated,
|
||||
.bar-balanced.activated,
|
||||
.balanced-border.activated {
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
}
|
||||
.balanced-900-bg,
|
||||
.button-balanced-900,
|
||||
.bar .button-balanced-900,
|
||||
.header-balanced-900,
|
||||
.button-bar-balanced-900,
|
||||
.bar-balanced-900,
|
||||
.balanced-900-border,
|
||||
.balanced-900-bg:hover,
|
||||
.button-balanced-900:hover,
|
||||
.bar .button-balanced-900:hover,
|
||||
.header-balanced-900:hover,
|
||||
.button-bar-balanced-900:hover,
|
||||
.bar-balanced-900:hover,
|
||||
.balanced-900-border:hover,
|
||||
.balanced-900-bg:active,
|
||||
.button-balanced-900:active,
|
||||
.bar .button-balanced-900:active,
|
||||
.header-balanced-900:active,
|
||||
.button-bar-balanced-900:active,
|
||||
.bar-balanced-900:active,
|
||||
.balanced-900-border:active,
|
||||
.balanced-900-bg.activated,
|
||||
.button-balanced-900.activated,
|
||||
.bar .button-balanced-900.activated,
|
||||
.header-balanced-900.activated,
|
||||
.button-bar-balanced-900.activated,
|
||||
.bar-balanced-900.activated,
|
||||
.balanced-900-border.activated {
|
||||
background-color: #1B5E20;
|
||||
color: #fff;
|
||||
}
|
||||
.balanced-100-bg,
|
||||
.button-balanced-100,
|
||||
.bar .button-balanced-100,
|
||||
.header-balanced-100,
|
||||
.button-bar-balanced-100,
|
||||
.bar-balanced-100,
|
||||
.balanced-100-border,
|
||||
.balanced-100-bg:hover,
|
||||
.button-balanced-100:hover,
|
||||
.bar .balanced-100-bg:hover,
|
||||
.header-balanced-100:hover,
|
||||
.button-bar-balanced-100:hover,
|
||||
.bar-balanced-100:hover,
|
||||
.balanced-100-border:hover,
|
||||
.balanced-100-bg:active,
|
||||
.button-balanced-100:active,
|
||||
.bar .button-balanced-100:active,
|
||||
.header-balanced-100:active,
|
||||
.button-bar-balanced-100:active,
|
||||
.bar-balanced-100:active,
|
||||
.balanced-100-border:active,
|
||||
.balanced-100-bg.activated,
|
||||
.button-balanced-100.activated,
|
||||
.bar .button-balanced-100.activated,
|
||||
.header-balanced-100.activated,
|
||||
.button-bar-balanced-100.activated,
|
||||
.bar-balanced-100.activated,
|
||||
.balanced-100-border.activated {
|
||||
background-color: #C8E6C9;
|
||||
color: #fff;
|
||||
}
|
||||
.energized-bg,
|
||||
.button-energized,
|
||||
.bar .button-energized,
|
||||
.header-energized,
|
||||
.button-bar-energized,
|
||||
.bar-energized,
|
||||
.energized-border,
|
||||
.energized-bg:hover,
|
||||
.button-energized:hover,
|
||||
.bar .button-energized:hover,
|
||||
.header-energized:hover,
|
||||
.button-bar-energized:hover,
|
||||
.bar-energized:hover,
|
||||
.energized-border:hover,
|
||||
.energized-bg:active,
|
||||
.button-energized:active,
|
||||
.bar .button-energized:active,
|
||||
.header-energized:active,
|
||||
.button-bar-energized:active,
|
||||
.bar-energized:active,
|
||||
.energized-border:active,
|
||||
.energized-bg.activated,
|
||||
.button-energized.activated,
|
||||
.bar .button-energized.activated,
|
||||
.header-energized.activated,
|
||||
.button-bar-energized.activated,
|
||||
.bar-energized.activated,
|
||||
.energized-border.activated {
|
||||
background-color: #FF9800;
|
||||
color: #fff;
|
||||
}
|
||||
.energized-900-bg,
|
||||
.button-energized-900,
|
||||
.bar .button-energized-900,
|
||||
.header-energized-900,
|
||||
.button-bar-energized-900,
|
||||
.bar-energized-900,
|
||||
.energized-900-border,
|
||||
.energized-900-bg:hover,
|
||||
.button-energized-900:hover,
|
||||
.bar .button-energized-900:hover,
|
||||
.header-energized-900:hover,
|
||||
.button-bar-energized-900:hover,
|
||||
.bar-energized-900:hover,
|
||||
.energized-900-border:hover,
|
||||
.energized-900-bg:active,
|
||||
.button-energized-900:active,
|
||||
.bar .button-energized-900:active,
|
||||
.header-energized-900:active,
|
||||
.button-bar-energized-900:active,
|
||||
.bar-energized-900:active,
|
||||
.energized-900-border:active,
|
||||
.energized-900-bg.activated,
|
||||
.button-energized-900.activated,
|
||||
.bar .button-energized-900.activated,
|
||||
.header-energized-900.activated,
|
||||
.button-bar-energized-900.activated,
|
||||
.bar-energized-900.activated,
|
||||
.energized-900-border.activated {
|
||||
background-color: #E65100;
|
||||
color: #fff;
|
||||
}
|
||||
.energized-100-bg,
|
||||
.button-energized-100,
|
||||
.bar .button-energized-100,
|
||||
.header-energized-100,
|
||||
.button-bar-energized-100,
|
||||
.bar-energized-100,
|
||||
.energized-100-border,
|
||||
.energized-100-bg:hover,
|
||||
.button-energized-100:hover,
|
||||
.bar .button-energized-100:hover,
|
||||
.header-energized-100:hover,
|
||||
.button-bar-energized-100:hover,
|
||||
.bar-energized-100:hover,
|
||||
.energized-100-border:hover,
|
||||
.energized-100-bg:active,
|
||||
.button-energized-100:active,
|
||||
.bar .button-energized-100:active,
|
||||
.header-energized-100:active,
|
||||
.button-bar-energized-100:active,
|
||||
.bar-energized-100:active,
|
||||
.energized-100-border:active,
|
||||
.energized-100-bg.activated,
|
||||
.button-energized-100.activated,
|
||||
.bar .button-energized-100.activated,
|
||||
.header-energized-100.activated,
|
||||
.button-bar-energized-100.activated,
|
||||
.bar-energized-100.activated,
|
||||
.energized-100-border.activated {
|
||||
background-color: #FFE0B2;
|
||||
}
|
||||
.assertive-bg,
|
||||
.button-assertive,
|
||||
.bar .button-assertive,
|
||||
.header-assertive,
|
||||
.button-bar-assertive,
|
||||
.bar-assertive,
|
||||
.assertive-border,
|
||||
.assertive-bg:hover,
|
||||
.button-assertive:hover,
|
||||
.bar .button-assertive:hover,
|
||||
.header-assertive:hover,
|
||||
.button-bar-assertive:hover,
|
||||
.bar-assertive:hover,
|
||||
.assertive-border:hover,
|
||||
.assertive-bg:active,
|
||||
.button-assertive:active,
|
||||
.bar .button-assertive:active,
|
||||
.header-assertive:active,
|
||||
.button-bar-assertive:active,
|
||||
.bar-assertive:active,
|
||||
.assertive-border:active,
|
||||
.assertive-bg.activated,
|
||||
.button-assertive.activated,
|
||||
.bar .button-assertive.activated,
|
||||
.header-assertive.activated,
|
||||
.button-bar-assertive.activated,
|
||||
.bar-assertive.activated,
|
||||
.assertive-border.activated {
|
||||
background-color: #F44336;
|
||||
color: #fff;
|
||||
}
|
||||
.assertive-900-bg,
|
||||
.button-assertive-900,
|
||||
.bar .button-assertive-900,
|
||||
.header-assertive-900,
|
||||
.button-bar-assertive-900,
|
||||
.bar-assertive-900,
|
||||
.assertive-900-border,
|
||||
.assertive-900-bg:hover,
|
||||
.button-assertive-900:hover,
|
||||
.bar .button-assertive-900:hover,
|
||||
.header-assertive-900:hover,
|
||||
.button-bar-assertive-900:hover,
|
||||
.bar-assertive-900:hover,
|
||||
.assertive-900-border:hover,
|
||||
.assertive-900-bg:active,
|
||||
.button-assertive-900:active,
|
||||
.bar .button-assertive-900:active,
|
||||
.header-assertive-900:active,
|
||||
.button-bar-assertive-900:active,
|
||||
.bar-assertive-900:active,
|
||||
.assertive-900-border:active,
|
||||
.assertive-900-bg.activated,
|
||||
.button-assertive-900.activated,
|
||||
.bar .button-assertive-900.activated,
|
||||
.header-assertive-900.activated,
|
||||
.button-bar-assertive-900.activated,
|
||||
.bar-assertive-900.activated,
|
||||
.assertive-900-border.activated {
|
||||
background-color: #B71C1C;
|
||||
color: #fff;
|
||||
}
|
||||
.assertive-100-bg,
|
||||
.button-assertive-100,
|
||||
.bar .button-assertive-100,
|
||||
.header-assertive-100,
|
||||
.button-bar-assertive-100,
|
||||
.bar-assertive-100,
|
||||
.assertive-100-border,
|
||||
.assertive-100-bg:hover,
|
||||
.button-assertive-100:hover,
|
||||
.bar .button-assertive-100:hover,
|
||||
.header-assertive-100:hover,
|
||||
.button-bar-assertive-100:hover,
|
||||
.bar-assertive-100:hover,
|
||||
.assertive-100-border:hover,
|
||||
.assertive-100-bg:active,
|
||||
.button-assertive-100:active,
|
||||
.bar .button-assertive-100:active,
|
||||
.header-assertive-100:active,
|
||||
.button-bar-assertive-100:active,
|
||||
.bar-assertive-100:active,
|
||||
.assertive-100-border:active,
|
||||
.assertive-100-bg.activated,
|
||||
.bar .button-assertive-100.activated,
|
||||
.button-assertive-100.activated,
|
||||
.header-assertive-100.activated,
|
||||
.button-bar-assertive-100.activated,
|
||||
.bar-assertive-100.activated,
|
||||
.assertive-100-border.activated {
|
||||
background-color: #FFCDD2;
|
||||
color: #fff;
|
||||
}
|
||||
.stable-bg,
|
||||
.button-stable,
|
||||
.bar .button-stable,
|
||||
.header-stable,
|
||||
.button-bar-stable,
|
||||
.bar-stable,
|
||||
.stable-border,
|
||||
.stable-bg:hover,
|
||||
.button-stable:hover,
|
||||
.bar .button-stable:hover,
|
||||
.header-stable:hover,
|
||||
.button-bar-stable:hover,
|
||||
.bar-stable:hover,
|
||||
.stable-border:hover,
|
||||
.stable-bg:active,
|
||||
.button-stable:active,
|
||||
.bar .button-stable:active,
|
||||
.header-stable:active,
|
||||
.button-bar-stable:active,
|
||||
.bar-stable:active,
|
||||
.stable-border:active,
|
||||
.stable-bg.activated,
|
||||
.button-stable.activated,
|
||||
.bar .button-stable.activated,
|
||||
.header-stable.activated,
|
||||
.button-bar-stable.activated,
|
||||
.bar-stable.activated,
|
||||
.stable-border.activated {
|
||||
background-color: #E0E0E0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Text Colors
|
||||
==================================*/
|
||||
.positive,
|
||||
.positive *,
|
||||
*.positive,
|
||||
.positive:hover,
|
||||
.positive:hover *,
|
||||
*.positive:hover,
|
||||
.positive:active,
|
||||
.positive:active *,
|
||||
*.positive:active {
|
||||
color: #3F51B5;
|
||||
}
|
||||
.positive-900,
|
||||
.positive-900 *,
|
||||
*.positive-900,
|
||||
.positive-900:hover,
|
||||
.positive-900:hover *,
|
||||
*.positive-900:hover,
|
||||
.positive-900:active,
|
||||
.positive-900:active *,
|
||||
*.positive-900:active {
|
||||
color: #3F51B5;
|
||||
}
|
||||
.positive-100,
|
||||
.positive-100 *,
|
||||
*.positive-100,
|
||||
.positive-100:hover,
|
||||
.positive-100:hover *,
|
||||
*.positive-100:hover,
|
||||
.positive-100:active,
|
||||
.positive-100:active *,
|
||||
*.positive-100:active {
|
||||
color: #C5CAE9;
|
||||
}
|
||||
.calm-100,
|
||||
.calm-100 *,
|
||||
*.calm-100,
|
||||
.calm-100:hover,
|
||||
.calm-100:hover *,
|
||||
*.calm-100:hover,
|
||||
.calm-100:active,
|
||||
.calm-100:active *,
|
||||
*.calm-100:active {
|
||||
color: #2196F3;
|
||||
}
|
||||
.calm-900,
|
||||
.calm-900 *,
|
||||
*.calm-900,
|
||||
.calm-900:hover,
|
||||
.calm-900:hover *,
|
||||
*.calm-900:hover,
|
||||
.calm-900:active,
|
||||
.calm-900:active *,
|
||||
*.calm-900:active {
|
||||
color: #0D47A1;
|
||||
}
|
||||
.calm-100,
|
||||
.calm-100 *,
|
||||
*.calm-100,
|
||||
.calm-100:hover,
|
||||
.calm-100:hover *,
|
||||
*.calm-100:hover,
|
||||
.calm-100:active,
|
||||
.calm-100:active *,
|
||||
*.calm-100:active {
|
||||
color: #BBDEFB;
|
||||
}
|
||||
.royal,
|
||||
.royal *,
|
||||
*.royal,
|
||||
.royal:hover,
|
||||
.royal:hover *,
|
||||
*.royal:hover,
|
||||
.royal:active,
|
||||
.royal:active *,
|
||||
*.royal:active {
|
||||
color: #673AB7;
|
||||
}
|
||||
.royal-900,
|
||||
.royal-900 *,
|
||||
*.royal-900,
|
||||
.royal-900:hover,
|
||||
.royal-900:hover *,
|
||||
*.royal-900:hover,
|
||||
.royal-900:active,
|
||||
.royal-900:active *,
|
||||
*.royal-900:active {
|
||||
color: #311B92;
|
||||
}
|
||||
.royal-100,
|
||||
.royal-100 *,
|
||||
*.royal-100,
|
||||
.royal-100:hover,
|
||||
.royal-100:hover *,
|
||||
*.royal-100:hover,
|
||||
.royal-100:active,
|
||||
.royal-100:active *,
|
||||
*.royal-100:active {
|
||||
color: #D1C4E9;
|
||||
}
|
||||
.balanced,
|
||||
.balanced *,
|
||||
*.balanced,
|
||||
.balanced:hover,
|
||||
.balanced:hover *,
|
||||
*.balanced:hover,
|
||||
.balanced:active,
|
||||
.balanced:active *,
|
||||
*.balanced:active {
|
||||
color: #4CAF50;
|
||||
}
|
||||
.balanced-900,
|
||||
.balanced-900 *,
|
||||
*.balanced-900,
|
||||
.balanced-900:hover,
|
||||
.balanced-900:hover *,
|
||||
*.balanced-900:hover,
|
||||
.balanced-900:active,
|
||||
.balanced-900:active *,
|
||||
*.balanced-900:active {
|
||||
color: #1B5E20;
|
||||
}
|
||||
.balanced-100,
|
||||
.balanced-100 *,
|
||||
*.balanced-100,
|
||||
.balanced-100:hover,
|
||||
.balanced-100:hover *,
|
||||
*.balanced-100:hover,
|
||||
.balanced-100:active,
|
||||
.balanced-100:active *,
|
||||
*.balanced-100:active {
|
||||
color: #C8E6C9;
|
||||
}
|
||||
.energized,
|
||||
.energized *,
|
||||
*.energized,
|
||||
.energized:hover,
|
||||
.energized:hover *,
|
||||
*.energized:hover,
|
||||
.energized:active,
|
||||
.energized:active *,
|
||||
*.energized:active {
|
||||
color: #FF9800;
|
||||
}
|
||||
.energized-900,
|
||||
.energized-900 *,
|
||||
*.energized-900,
|
||||
.energized-900:hover,
|
||||
.energized-900:hover *,
|
||||
*.energized-900:hover,
|
||||
.energized-900:active,
|
||||
.energized-900:active *,
|
||||
*.energized-900:active {
|
||||
color: #E65100;
|
||||
}
|
||||
.energized-100,
|
||||
.energized-100 *,
|
||||
*.energized-100,
|
||||
.energized-100:hover,
|
||||
.energized-100:hover *,
|
||||
*.energized-100:hover,
|
||||
.energized-100:active,
|
||||
.energized-100:active *,
|
||||
*.energized-100:active {
|
||||
color: #FFE0B2;
|
||||
}
|
||||
.assertive,
|
||||
.assertive *,
|
||||
*.assertive,
|
||||
.assertive:hover,
|
||||
.assertive:hover *,
|
||||
*.assertive:hover,
|
||||
.assertive:active,
|
||||
.assertive:active *,
|
||||
*.assertive:active {
|
||||
color: #F44336;
|
||||
}
|
||||
.assertive-900,
|
||||
.assertive-900 *,
|
||||
*.assertive-900,
|
||||
.assertive-900:hover,
|
||||
.assertive-900:hover *,
|
||||
*.assertive-900:hover,
|
||||
.assertive-900:active,
|
||||
.assertive-900:active *,
|
||||
*.assertive-900:active {
|
||||
color: #B71C1C;
|
||||
}
|
||||
.assertive-100,
|
||||
.assertive-100 *,
|
||||
*.assertive-100,
|
||||
.assertive-100:hover,
|
||||
.assertive-100:hover *,
|
||||
*.assertive-100:hover,
|
||||
.assertive-100:active,
|
||||
.assertive-100:active *,
|
||||
*.assertive-100:active {
|
||||
color: #FFCDD2;
|
||||
}
|
||||
.stable,
|
||||
.stable *,
|
||||
*.stable,
|
||||
.stable:hover,
|
||||
.stable:hover *,
|
||||
*.stable:hover,
|
||||
.stable:active,
|
||||
.stable:active *,
|
||||
*.stable:active {
|
||||
color: #E0E0E0;
|
||||
}
|
||||
.light,
|
||||
.light *,
|
||||
*.light,
|
||||
.light:hover,
|
||||
.light:hover *,
|
||||
*.light:hover,
|
||||
.light:active,
|
||||
.light:active *,
|
||||
*.light:active {
|
||||
color: #fff;
|
||||
}
|
||||
.dark,
|
||||
.dark *,
|
||||
*.dark,
|
||||
.dark:hover,
|
||||
.dark:hover *,
|
||||
*.dark:hover,
|
||||
.dark:active,
|
||||
.dark:active *,
|
||||
*.dark:active {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.light-border {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > li > a {
|
||||
margin: 0;
|
||||
padding-right: 26px;
|
||||
padding-left: 26px;
|
||||
border-top: 3px solid transparent;
|
||||
color: #BFD5C9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Mid-Bar
|
||||
==================================*/
|
||||
.mid-bar {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.mid-bar h1,
|
||||
.mid-bar h2,
|
||||
.mid-bar h3,
|
||||
.mid-bar h4,
|
||||
.mid-bar h5,
|
||||
.mid-bar h6 {
|
||||
color: #fff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mid-bar p {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Item
|
||||
==================================*/
|
||||
.item-avatar,
|
||||
.item-avatar .item-content,
|
||||
.item-avatar-left,
|
||||
.item-avatar-left .item-content,
|
||||
.card > .item-avatar {
|
||||
padding-left: 95px;
|
||||
}
|
||||
|
||||
.item,
|
||||
.item-complex .item-content,
|
||||
.item-radio .item-content {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dark-bg h2,
|
||||
.item.dark-bg h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabs-striped .tabs {
|
||||
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.bar .button.button-clear {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bar .button.button-icon .icon:before,
|
||||
.bar .button.button-icon.icon-left:before,
|
||||
.bar .button.button-icon.icon-right:before,
|
||||
.bar .button.button-icon:before {
|
||||
vertical-align: top;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.button-icon.button.active,
|
||||
.button-icon.button.activated {
|
||||
opacity: initial;
|
||||
}
|
||||
|
||||
|
||||
/* Popover
|
||||
==================================*/
|
||||
.popover {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
transform: translate(50%, -50%) scale(0,0);
|
||||
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
top: 8px;
|
||||
}
|
||||
.popover.ng-enter {
|
||||
opacity: 1;
|
||||
transform: translate(0, -14px) scale(1,1);
|
||||
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.popover.ng-leave {
|
||||
opacity: 0;
|
||||
transform: translate(50%, -50%) scale(0,0);
|
||||
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
/* Button
|
||||
==================================*/
|
||||
.button {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
31
www/lib/ionic-material/webpack.config.js
Normal file
31
www/lib/ionic-material/webpack.config.js
Normal file
@@ -0,0 +1,31 @@
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const uglifyPlugin = new webpack.optimize.UglifyJsPlugin();
|
||||
|
||||
var bowerComponentsPath = path.join(__dirname, '/bower_components');
|
||||
|
||||
module.exports = {
|
||||
context: __dirname,
|
||||
entry: './src/js/ionic-material.js',
|
||||
output: {
|
||||
libraryTarget: 'umd',
|
||||
library: 'ionicMaterial',
|
||||
path: __dirname + '/dist',
|
||||
filename: 'ionic.material.js',
|
||||
sourceMapFilename: 'ionic.material.min.js.map'
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
waves: path.join(bowerComponentsPath, 'waves/dist/waves.js')
|
||||
}
|
||||
},
|
||||
externals:{
|
||||
'angular': 'angular',
|
||||
'ionic': 'ionic'
|
||||
},
|
||||
plugins: [
|
||||
// uglifyPlugin
|
||||
],
|
||||
target : 'web',
|
||||
devtool: 'source-map'
|
||||
};
|
||||
Reference in New Issue
Block a user