├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── config.xml ├── gulpfile.js ├── hooks └── README.md ├── package.json └── www ├── angular ├── app.css ├── app.js ├── flat.html └── material.html ├── favicon.ico ├── index.html ├── lib ├── angular │ ├── .bower.json │ ├── README.md │ ├── angular-csp.css │ ├── angular.js │ ├── angular.min.js │ ├── angular.min.js.gzip │ ├── angular.min.js.map │ ├── bower.json │ ├── index.js │ └── package.json ├── onsenui │ ├── .bower.json │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── bower.json │ ├── css │ │ ├── font_awesome │ │ │ ├── css │ │ │ │ ├── font-awesome.css │ │ │ │ └── font-awesome.min.css │ │ │ └── fonts │ │ │ │ ├── FontAwesome.otf │ │ │ │ ├── fontawesome-webfont.eot │ │ │ │ ├── fontawesome-webfont.svg │ │ │ │ ├── fontawesome-webfont.ttf │ │ │ │ ├── fontawesome-webfont.woff │ │ │ │ └── fontawesome-webfont.woff2 │ │ ├── ionicons │ │ │ ├── css │ │ │ │ ├── ionicons.css │ │ │ │ └── ionicons.min.css │ │ │ └── fonts │ │ │ │ ├── ionicons.eot │ │ │ │ ├── ionicons.svg │ │ │ │ ├── ionicons.ttf │ │ │ │ └── ionicons.woff │ │ ├── material-design-iconic-font │ │ │ ├── css │ │ │ │ ├── material-design-iconic-font.css │ │ │ │ └── material-design-iconic-font.min.css │ │ │ └── fonts │ │ │ │ ├── Material-Design-Iconic-Font.eot │ │ │ │ ├── Material-Design-Iconic-Font.svg │ │ │ │ ├── Material-Design-Iconic-Font.ttf │ │ │ │ ├── Material-Design-Iconic-Font.woff │ │ │ │ └── Material-Design-Iconic-Font.woff2 │ │ ├── onsen-css-components-blue-basic-theme.css │ │ ├── onsen-css-components-blue-theme.css │ │ ├── onsen-css-components-dark-theme.css │ │ ├── onsen-css-components-default.css │ │ ├── onsen-css-components-purple-theme.css │ │ ├── onsen-css-components-sunshine-theme.css │ │ ├── onsen-css-components.css │ │ └── onsenui.css │ ├── js │ │ ├── angular-onsenui.js │ │ ├── angular-onsenui.min.js │ │ ├── onsenui.js │ │ └── onsenui.min.js │ ├── package.json │ └── stylus │ │ ├── blue-basic-theme.styl │ │ ├── blue-theme.styl │ │ ├── components │ │ ├── alert-dialog.styl │ │ ├── button-bar.styl │ │ ├── button.styl │ │ ├── checkbox.styl │ │ ├── dialog.styl │ │ ├── fab.styl │ │ ├── global.styl │ │ ├── index.styl │ │ ├── list.styl │ │ ├── material-shadow.styl │ │ ├── modal.styl │ │ ├── navigation-bar.styl │ │ ├── notification.styl │ │ ├── page.styl │ │ ├── popover.styl │ │ ├── progress-bar.styl │ │ ├── progress-circular.styl │ │ ├── radio-button.styl │ │ ├── range.styl │ │ ├── search-input.styl │ │ ├── switch.styl │ │ ├── tab-bar.styl │ │ ├── text-input.styl │ │ ├── textarea.styl │ │ ├── toolbar-button.styl │ │ └── util.styl │ │ ├── dark-theme.styl │ │ ├── purple-theme.styl │ │ └── sunshine-theme.styl └── react │ ├── .bower.json │ ├── LICENSE │ ├── PATENTS │ ├── bower.json │ ├── react-dom-server.js │ ├── react-dom-server.min.js │ ├── react-dom.js │ ├── react-dom.min.js │ ├── react-with-addons.js │ ├── react-with-addons.min.js │ ├── react.js │ └── react.min.js └── react ├── app.css ├── app.jsx ├── browser.min.js └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | /platforms 2 | /plugins 3 | /bower_components 4 | /node_modules 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Onsen UI 2.0 beta Quickstart 2 | 3 | This repository will get you up and running quickly with the Onsen UI 2.0 beta. 4 | 5 | ## Prerequisites 6 | 7 | To run the samples, you need to have the following programs installed: 8 | 9 | * [Node.js](https://nodejs.org/en/) 10 | * [Git](https://git-scm.com/) 11 | 12 | ## Running 13 | 14 | The repository is designed to help you get started with Onsen UI 2.0 instantly. Just type the following commands in a terminal: 15 | 16 | ```bash 17 | git clone https://github.com/OnsenUI/onsen2-quickstart.git 18 | cd onsen2-quickstart/ 19 | npm install 20 | gulp serve 21 | ``` 22 | 23 | This will install the required libraries and start a web server. The URL will be displayed in the terminal so you can go ahead and open that URL in a browser. 24 | 25 | ## Running as a Cordova app 26 | 27 | The quickstart repository is packaged as a quickstart app, so you can actually deploy it to your phone as a hybrid app. Before you do this, please make sure you have installed Cordova: 28 | 29 | ```bash 30 | [sudo] npm install -g cordova 31 | ``` 32 | 33 | Once Cordova is installed, you also need to add a platform to deploy to. To add the `android` platform type the following: 34 | 35 | ```bash 36 | cordova platform add android 37 | ``` 38 | 39 | This requires you to set up an Android development environment. Check out the [Cordova Platform Guides](https://cordova.apache.org/docs/en/5.1.1/guide/platforms/index.html) to learn how to do that. 40 | 41 | When everything is set up, you can plug in your Android device using USB and deploy the app: 42 | 43 | ```bash 44 | cordova run android 45 | ``` 46 | 47 | If you want to deploy to an iOS device the prodecure is almost the same. Keep in mind that in order to deploy to an iOS device you need a Mac computer with XCode installed. 48 | 49 | ## Bug reports and issues 50 | 51 | Onsen UI 2.0 is still in beta. We want to make it as good as possible before releasing the stable version. If you find any bugs or if you have any suggestions on how to improve it, please [open an issue](https://github.com/OnsenUI/OnsenUI/issues/new) on GitHub. 52 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "onsen2-quickstart", 3 | "homepage": "http://onsen.io/", 4 | "authors": [ 5 | "Onsen UI Team " 6 | ], 7 | "description": "Quickstart repo for Onsen UI 2.0", 8 | "main": "", 9 | "moduleType": [], 10 | "license": "Apache-2.0", 11 | "ignore": [ 12 | "**/.*", 13 | "node_modules", 14 | "bower_components", 15 | "test", 16 | "tests" 17 | ], 18 | "devDependencies": { 19 | "onsenui": "2.0.0-beta.5", 20 | "react": "~0.14.2", 21 | "angular": "~1.4.8" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Onsen UI 2.0 Quickstart 4 | 5 | Onsen UI 2.0 Quickstart Template 6 | 7 | 8 | Onsen UI Team 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | bower = require('gulp-bower'), 3 | rimraf = require('rimraf'), 4 | serve = require('gulp-serve'), 5 | browserSync = require('browser-sync').create(); 6 | 7 | gulp.task('install', ['clean'], function(cb) { 8 | return bower() 9 | .pipe(gulp.dest('www/lib/')); 10 | }); 11 | 12 | gulp.task('clean', function(cb) { 13 | rimraf('./bower_components', function() { 14 | rimraf('./www/lib', cb); 15 | }); 16 | }); 17 | 18 | gulp.task('watch', ['install'], function() { 19 | gulp.watch('www/**', function() { 20 | browserSync.reload(); 21 | }); 22 | }); 23 | 24 | gulp.task('serve', ['watch'], function() { 25 | browserSync.init({ 26 | server: { 27 | baseDir: __dirname + '/www/', 28 | directory: false 29 | }, 30 | ghostMode: false, 31 | notify: false, 32 | debounce: 200, 33 | index: 'index.html' 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /hooks/README.md: -------------------------------------------------------------------------------- 1 | 21 | # Cordova Hooks 22 | 23 | Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order: 24 | * Application hooks from `/hooks`; 25 | * Application hooks from `config.xml`; 26 | * Plugin hooks from `plugins/.../plugin.xml`. 27 | 28 | __Remember__: Make your scripts executable. 29 | 30 | __Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated. 31 | 32 | ## Supported hook types 33 | The following hook types are supported: 34 | 35 | after_build/ 36 | after_compile/ 37 | after_docs/ 38 | after_emulate/ 39 | after_platform_add/ 40 | after_platform_rm/ 41 | after_platform_ls/ 42 | after_plugin_add/ 43 | after_plugin_ls/ 44 | after_plugin_rm/ 45 | after_plugin_search/ 46 | after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 47 | after_prepare/ 48 | after_run/ 49 | after_serve/ 50 | before_build/ 51 | before_compile/ 52 | before_docs/ 53 | before_emulate/ 54 | before_platform_add/ 55 | before_platform_rm/ 56 | before_platform_ls/ 57 | before_plugin_add/ 58 | before_plugin_ls/ 59 | before_plugin_rm/ 60 | before_plugin_search/ 61 | before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 62 | before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled 63 | before_prepare/ 64 | before_run/ 65 | before_serve/ 66 | pre_package/ <-- Windows 8 and Windows Phone only. 67 | 68 | ## Ways to define hooks 69 | ### Via '/hooks' directory 70 | To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example: 71 | 72 | # script file will be automatically executed after each build 73 | hooks/after_build/after_build_custom_action.js 74 | 75 | 76 | ### Config.xml 77 | 78 | Hooks can be defined in project's `config.xml` using `` elements, for example: 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | ... 89 | 90 | 91 | 92 | 93 | 94 | 95 | ... 96 | 97 | 98 | ### Plugin hooks (plugin.xml) 99 | 100 | As a plugin developer you can define hook scripts using `` elements in a `plugin.xml` like that: 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | ... 109 | 110 | 111 | `before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled. 112 | 113 | ## Script Interface 114 | 115 | ### Javascript 116 | 117 | If you are writing hooks in Javascript you should use the following module definition: 118 | ```javascript 119 | module.exports = function(context) { 120 | ... 121 | } 122 | ``` 123 | 124 | You can make your scipts async using Q: 125 | ```javascript 126 | module.exports = function(context) { 127 | var Q = context.requireCordovaModule('q'); 128 | var deferral = new Q.defer(); 129 | 130 | setTimeout(function(){ 131 | console.log('hook.js>> end'); 132 | deferral.resolve(); 133 | }, 1000); 134 | 135 | return deferral.promise; 136 | } 137 | ``` 138 | 139 | `context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object: 140 | ```json 141 | { 142 | "hook": "before_plugin_install", 143 | "scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js", 144 | "cmdLine": "The\\exact\\command\\cordova\\run\\with arguments", 145 | "opts": { 146 | "projectRoot":"C:\\path\\to\\the\\project", 147 | "cordova": { 148 | "platforms": ["wp8"], 149 | "plugins": ["com.plugin.withhooks"], 150 | "version": "0.21.7-dev" 151 | }, 152 | "plugin": { 153 | "id": "com.plugin.withhooks", 154 | "pluginInfo": { 155 | ... 156 | }, 157 | "platform": "wp8", 158 | "dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks" 159 | } 160 | }, 161 | "cordova": {...} 162 | } 163 | 164 | ``` 165 | `context.opts.plugin` object will only be passed to plugin hooks scripts. 166 | 167 | You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way: 168 | ```javascript 169 | var Q = context.requireCordovaModule('q'); 170 | ``` 171 | 172 | __Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only. 173 | For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below. 174 | 175 | ### Non-javascript 176 | 177 | Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables: 178 | 179 | * CORDOVA_VERSION - The version of the Cordova-CLI. 180 | * CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios). 181 | * CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer) 182 | * CORDOVA_HOOK - Path to the hook that is being executed. 183 | * CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate) 184 | 185 | If a script returns a non-zero exit code, then the parent cordova command will be aborted. 186 | 187 | ## Writing hooks 188 | 189 | We highly recommend writing your hooks using Node.js so that they are 190 | cross-platform. Some good examples are shown here: 191 | 192 | [http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/) 193 | 194 | Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example: 195 | 196 | #!/usr/bin/env [name_of_interpreter_executable] 197 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "onsen2-quickstart", 3 | "version": "2.0.0-alpha", 4 | "private": false, 5 | "description": "Get up and running quickly with Onsen UI 2.0", 6 | "main": "gulpfile.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/OnsenUI/onsen2-quickstart.git" 13 | }, 14 | "author": "Onsen UI Team ", 15 | "license": "Apache-2.0", 16 | "bugs": { 17 | "url": "https://github.com/OnsenUI/onsen2-quickstart/issues" 18 | }, 19 | "homepage": "https://github.com/OnsenUI/onsen2-quickstart#readme", 20 | "devDependencies": { 21 | "browser-sync": "^2.9.11", 22 | "gulp": "^3.9.0", 23 | "gulp-bower": "0.0.10", 24 | "gulp-serve": "^1.2.0", 25 | "rimraf": "^2.4.3" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /www/angular/app.css: -------------------------------------------------------------------------------- 1 | ons-list-item[modifier="material"] { 2 | min-height: 52px !important; 3 | } 4 | 5 | #todo-title { 6 | cursor: text; 7 | height: 24px; 8 | line-height: 24px; 9 | } 10 | 11 | .title { 12 | transition: all 0.1s linear; 13 | } 14 | 15 | .done { 16 | text-decoration: line-through; 17 | opacity: 0.6; 18 | } 19 | 20 | ons-splitter-side { 21 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 22 | } 23 | 24 | .todo-input { 25 | margin-top: -2px; 26 | font-size: 17px; 27 | } 28 | -------------------------------------------------------------------------------- /www/angular/app.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | angular.module('app', ['onsen']) 3 | .controller('TodoController', function($scope, $timeout) { 4 | this.items = [ 5 | { 6 | title: 'Water the plants', 7 | done: false, 8 | }, 9 | { 10 | title: 'Walk the dog', 11 | done: true, 12 | }, 13 | { 14 | title: 'Go to the dentist', 15 | done: false, 16 | }, 17 | { 18 | title: 'Buy milk', 19 | done: false, 20 | }, 21 | { 22 | title: 'Play tennis', 23 | done: true, 24 | } 25 | ] 26 | 27 | this.newTodo = function() { 28 | this.items.push({ 29 | title: '', 30 | done: false 31 | }); 32 | }.bind(this); 33 | 34 | this.focusInput = function(event) { 35 | $timeout(function() { 36 | var item = event.target.parentNode.querySelector('input[type="text"]'); 37 | item.focus(); 38 | item.select(); 39 | }); 40 | } 41 | 42 | this.clearCompleted = function() { 43 | this.items = this.items.filter(function(item) { 44 | return !item.done; 45 | }); 46 | }.bind(this); 47 | 48 | this.selectedItem = -1; 49 | }); 50 | })(); 51 | -------------------------------------------------------------------------------- /www/angular/flat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Onsen UI 2.0 Quickstart 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | Menu 31 | 32 | This is a menu. 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 | 45 | 46 | 47 |
48 |
Todos
49 | 50 | 51 | 52 | Things to do 53 | 54 |
55 | 59 |
60 |
61 | 62 | {{ item.title || 'Untitled item' }} 63 |
64 | 65 | 66 | 67 |

68 | 69 | Add Todo 70 | 71 |

72 |

73 | 74 | Clear completed 75 | 76 |

77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /www/angular/material.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Onsen UI 2.0 Quickstart 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | Menu 31 | 32 | This is a menu. 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 | 45 | 46 | 47 |
48 |
Todos
49 | 50 | 51 | 52 | Things to do 53 | 54 |
55 | 59 |
60 |
61 | 62 | {{ item.title || 'Untitled item' }} 63 |
64 | 65 | 66 | 67 | 68 | Clear completed 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /www/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/favicon.ico -------------------------------------------------------------------------------- /www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Onsen UI 2.0 Quickstart 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Onsen UI 2.0 Quickstart
31 | 32 | 33 |

This is a simple app that showcases some of the features of Onsen UI 2.0

34 | 35 |

The following app shows some of the new Material Design components that have been added.

36 | 37 | 38 | 39 | Material Design Demo 40 | 41 | 42 |

Onsen UI 2.0 is, unlike the previous version, not dependant on AngularJS. This means that it can easily be integrated with other frameworks.

43 | 44 | 45 | 46 | React.js Demo 47 | 48 | 49 |

Onsen UI 2.0 also provides iOS-like flat design, just like Onsen UI 1.x.

50 | 51 | 52 | 53 | Flat Design Demo 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /www/lib/angular/.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular", 3 | "version": "1.4.8", 4 | "main": "./angular.js", 5 | "ignore": [], 6 | "dependencies": {}, 7 | "homepage": "https://github.com/angular/bower-angular", 8 | "_release": "1.4.8", 9 | "_resolution": { 10 | "type": "version", 11 | "tag": "v1.4.8", 12 | "commit": "572a4fcc552c27c0f4bb1b9aab395249218c1255" 13 | }, 14 | "_source": "git://github.com/angular/bower-angular.git", 15 | "_target": "~1.4.8", 16 | "_originalSource": "angular" 17 | } -------------------------------------------------------------------------------- /www/lib/angular/README.md: -------------------------------------------------------------------------------- 1 | # packaged angular 2 | 3 | This repo is for distribution on `npm` and `bower`. The source for this module is in the 4 | [main AngularJS repo](https://github.com/angular/angular.js). 5 | Please file issues and pull requests against that repo. 6 | 7 | ## Install 8 | 9 | You can install this package either with `npm` or with `bower`. 10 | 11 | ### npm 12 | 13 | ```shell 14 | npm install angular 15 | ``` 16 | 17 | Then add a ` 21 | ``` 22 | 23 | Or `require('angular')` from your code. 24 | 25 | ### bower 26 | 27 | ```shell 28 | bower install angular 29 | ``` 30 | 31 | Then add a ` 35 | ``` 36 | 37 | ## Documentation 38 | 39 | Documentation is available on the 40 | [AngularJS docs site](http://docs.angularjs.org/). 41 | 42 | ## License 43 | 44 | The MIT License 45 | 46 | Copyright (c) 2010-2015 Google, Inc. http://angularjs.org 47 | 48 | Permission is hereby granted, free of charge, to any person obtaining a copy 49 | of this software and associated documentation files (the "Software"), to deal 50 | in the Software without restriction, including without limitation the rights 51 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 52 | copies of the Software, and to permit persons to whom the Software is 53 | furnished to do so, subject to the following conditions: 54 | 55 | The above copyright notice and this permission notice shall be included in 56 | all copies or substantial portions of the Software. 57 | 58 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 59 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 60 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 61 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 62 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 63 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 64 | THE SOFTWARE. 65 | -------------------------------------------------------------------------------- /www/lib/angular/angular-csp.css: -------------------------------------------------------------------------------- 1 | /* Include this file in your html if you are using the CSP mode. */ 2 | 3 | @charset "UTF-8"; 4 | 5 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], 6 | .ng-cloak, .x-ng-cloak, 7 | .ng-hide:not(.ng-hide-animate) { 8 | display: none !important; 9 | } 10 | 11 | ng\:form { 12 | display: block; 13 | } 14 | 15 | .ng-animate-shim { 16 | visibility:hidden; 17 | } 18 | 19 | .ng-anchor { 20 | position:absolute; 21 | } 22 | -------------------------------------------------------------------------------- /www/lib/angular/angular.min.js.gzip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/angular/angular.min.js.gzip -------------------------------------------------------------------------------- /www/lib/angular/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular", 3 | "version": "1.4.8", 4 | "main": "./angular.js", 5 | "ignore": [], 6 | "dependencies": { 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /www/lib/angular/index.js: -------------------------------------------------------------------------------- 1 | require('./angular'); 2 | module.exports = angular; 3 | -------------------------------------------------------------------------------- /www/lib/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular", 3 | "version": "1.4.8", 4 | "description": "HTML enhanced for web apps", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/angular/angular.js.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "framework", 16 | "browser", 17 | "client-side" 18 | ], 19 | "author": "Angular Core Team ", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/angular/angular.js/issues" 23 | }, 24 | "homepage": "http://angularjs.org" 25 | } 26 | -------------------------------------------------------------------------------- /www/lib/onsenui/.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "onsenui", 3 | "homepage": "http://onsen.io", 4 | "authors": [ 5 | "Kruy Vanna ", 6 | "Mitsunori KUBOTA " 7 | ], 8 | "description": "Web Component inspired HTML5 UI framework for building modern mobile application", 9 | "main": [ 10 | "js/onsenui.js", 11 | "css/onsenui.css", 12 | "css/onsen-css-components.css" 13 | ], 14 | "keywords": [ 15 | "onsenui", 16 | "angular", 17 | "html5", 18 | "cordova", 19 | "phonegap", 20 | "web", 21 | "component", 22 | "monaca" 23 | ], 24 | "dependencies": {}, 25 | "license": "Apache License, Version 2.0", 26 | "ignore": [ 27 | ".npmignore" 28 | ], 29 | "version": "2.0.0-beta.5", 30 | "_release": "2.0.0-beta.5", 31 | "_resolution": { 32 | "type": "version", 33 | "tag": "2.0.0-beta.5", 34 | "commit": "7ec0aeb1f8f6f3b38357c3e00f9b336b76797e85" 35 | }, 36 | "_source": "git://github.com/OnsenUI/OnsenUI-dist.git", 37 | "_target": "2.0.0-beta.5", 38 | "_originalSource": "onsenui" 39 | } -------------------------------------------------------------------------------- /www/lib/onsenui/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2013-2015 ASIAL CORPORATION 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /www/lib/onsenui/README.md: -------------------------------------------------------------------------------- 1 | # Onsen UI 2 | 3 | [![Join us on Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/OnsenUI/OnsenUI) 4 | [![StackOverflow](http://img.shields.io/badge/stackoverflow-onsen--ui-FF412D.svg )]( http://stackoverflow.com/questions/tagged/onsen-ui) 5 | [![TypeScript definitions on DefinitelyTyped](http://definitelytyped.org/badges/standard.svg)](https://github.com/borisyankov/DefinitelyTyped/tree/master/onsenui) 6 | [![Circle CI](https://circleci.com/gh/OnsenUI/OnsenUI.svg?style=shield)](https://circleci.com/gh/OnsenUI/OnsenUI) 7 | [![Coverage Status](https://coveralls.io/repos/OnsenUI/OnsenUI/badge.svg?branch=master&service=github)](https://coveralls.io/github/OnsenUI/OnsenUI?branch=master) 8 | 9 | The best place to start with Onsen UI is our [Getting Started](http://onsen.io/guide/getting_started.html) page. 10 | 11 | ![The Answer to Cordova UI Development](https://cloud.githubusercontent.com/assets/9889313/5350569/eec8b870-7efb-11e4-90af-2f4d505e09a8.png) 12 | 13 | Onsen UI is open source, free and open for all. Onsen UI is designed and implemented to deliver unprecedented user interface and user experience for your mobile and hybrid apps. Onsen UI is built on top of Web Components so applications can be built using **HTML tags** web developers already know and love. 14 | 15 | Onsen UI is framework agnostic. This means that it can be used with whatever front-end framework you prefer. However, Onsen UI also provides a binding library for [AngularJS](https://angularjs.org/) which makes it easy to integrate our custom tags in AngularJS apps. 16 | 17 | Onsen UI also includes [Onsen CSS Components](http://components.onsen.io/), a free resource of UI templates with "theme roller" functionality. Developers can pick and choose, grab the code they need, and they're off and running. And they can create their own templates and submit to Onsen UI to be included with other templates available. 18 | 19 | Our [Monaca IDE] fully supports Onsen UI plugin. 20 | 21 | ## Browser Support 22 | 23 | Onsen UI is tested with the following browsers and mobile OS. 24 | 25 | * Android 4.0.2+ 26 | * iOS7+ 27 | * Windows Phone 8.1+ 28 | * Google Chrome 29 | * Safari 30 | 31 | For versions earlier than 1.3.0, iOS 8.4+ is not supported. In order to use these versions with iOS 8.4+ the included FastClick library must be manually updated to the latest version. 32 | 33 | ## Demo 34 | 35 | [Click here](http://onsen.io/guide/components.html) to see Onsen UI in action! 36 | 37 | ## What's Included 38 | 39 | * [Material Design](http://www.google.co.jp/design/spec/material-design/introduction.html): For Native-like Android UI 40 | * [Web Components](http://webcomponents.org/): for Custom Elements 41 | * [AngularJS module](https://angularjs.org/): bindings are backwards compatible with Onsen UI 1 42 | 43 | ## Getting Started Using Templates 44 | 45 | See the [Onsen UI Getting Started](http://onsen.io/getting_started/) page. 46 | 47 | ## Getting Started Using Monaca 48 | 49 | See the [Onsen UI Getting Started Page] and scroll down to the Using Onsen UI with Monaca section. 50 | 51 | ## Download Onsen UI 52 | 53 | Using bower: 54 | 55 | ```bash 56 | $ bower install onsenui 57 | ``` 58 | 59 | Using npm: 60 | 61 | ```bash 62 | $ npm install onsenui 63 | ``` 64 | 65 | The distribution repository is located [here](https://github.com/OnsenUI/OnsenUI-dist). 66 | 67 | ## Download the latest build 68 | 69 | A new build is generated every time the code changes. It can be downloaded on [this page](http://onsen.io/download.html#latest-build). 70 | 71 | Please use this with caution. However, we are very grateful if people try it out so we can find bugs and things to improve before the sharp releases. 72 | 73 | ## How to build 74 | 75 | * Clone this repository 76 | 77 | ```bash 78 | $ git clone https://github.com/OnsenUI/OnsenUI.git 79 | ``` 80 | 81 | * Open the terminal from OnsenUI directory 82 | 83 | ```bash 84 | $ cd OnsenUI 85 | ``` 86 | 87 | * Install dependencies using [npm](http://nodejs.org/download/) 88 | 89 | ```bash 90 | $ npm install 91 | ``` 92 | 93 | * Install gulp (globally) 94 | 95 | ```bash 96 | $ [sudo] npm install -g gulp 97 | ``` 98 | 99 | * Type gulp to start building 100 | 101 | ```bash 102 | $ gulp build 103 | ``` 104 | 105 | The files will be built and copied into **build** and **examples/lib/onsen/** folder. 106 | 107 | ## Running Examples 108 | 109 | ```bash 110 | $ npm install 111 | $ [sudo] npm install -g gulp 112 | $ gulp serve 113 | ``` 114 | 115 | * Then navigate your browser to [http://0.0.0.0:3000/examples/index.html](http://0.0.0.0:3000/examples/index.html) 116 | 117 | ## Running the test suite 118 | 119 | Onsen UI has unit tests for the Web Components as well as end-to-end testing of the AngularJS directives using Protractor. 120 | 121 | Use the following commands to run the unit tests: 122 | 123 | ```bash 124 | $ npm install 125 | $ gulp core-test 126 | ``` 127 | 128 | or these commands for the protractor tests: 129 | 130 | ```bash 131 | $ npm install 132 | $ gulp e2e-test 133 | ``` 134 | 135 | It will take some time the because it will download a stand-alone Selenium Server and a Chrome webdriver the first time it's executed. 136 | 137 | To run a single test or a group of tests use the `--specs` parameter and provide a comma-separated list of spec files: 138 | 139 | ```bash 140 | $ gulp e2e-test --specs test/e2e/lazyRepeat/scenarios.js 141 | ``` 142 | 143 | In order to run both the unit tests and the end-to-end tests use the following command: 144 | 145 | ```bash 146 | $ gulp test 147 | ``` 148 | 149 | ## Developing your app 150 | 151 | Our [Monaca IDE] makes it super easy to create Onsen UI project, but if you want to use other IDEs, we provide project templates for you in the [`project-templates`](https://github.com/OnsenUI/project-templates) repository. You will see the instruction on how to run the project there. 152 | 153 | ## Documentation 154 | 155 | See the current [Onsen UI docs](http://onsen.io/guide/overview.html). 156 | 157 | ## Developing Onsen UI 158 | 159 | Run gulp task to develop Onsen UI itself with livereload. 160 | 161 | gulp serve 162 | 163 | Access [http://0.0.0.0:3000/examples/index.html](http://0.0.0.0:3000/examples/index.html) and your code changes will be reloaded. 164 | 165 | ## Contributors 166 | 167 | Please see the full [list of contributors](https://github.com/OnsenUI/OnsenUI/blob/master/CONTRIBUTORS.md). 168 | 169 | ## How to contribute 170 | 171 | Please see our [document on contributing](https://github.com/OnsenUI/OnsenUI/blob/master/CONTRIBUTING.md). 172 | 173 | ## Getting support 174 | 175 | If anything about Onsen UI is unclear, please ask a question on Stackoverflow, and tag it "onsen-ui". An Onsen UI support engineer will answer it. 176 | 177 | You can also join our [Gitter channel](https://gitter.im/OnsenUI/OnsenUI) if you want to talk about Onsen UI. 178 | 179 | If you have any requests or comments regarding the development of Onsen UI, please feel free to direct them to the Twitter account (@Onsen_UI). 180 | 181 | [Onsen UI]:http://onsen.io/ 182 | [Onsen UI Getting Started Page]:http://onsen.io/getting_started/ 183 | [Monaca IDE]:http://monaca.mobi/ 184 | -------------------------------------------------------------------------------- /www/lib/onsenui/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "onsenui", 3 | "homepage": "http://onsen.io", 4 | "authors": [ 5 | "Kruy Vanna ", 6 | "Mitsunori KUBOTA " 7 | ], 8 | "description": "Web Component inspired HTML5 UI framework for building modern mobile application", 9 | "main": [ 10 | "js/onsenui.js", 11 | "css/onsenui.css", 12 | "css/onsen-css-components.css" 13 | ], 14 | "keywords": [ 15 | "onsenui", 16 | "angular", 17 | "html5", 18 | "cordova", 19 | "phonegap", 20 | "web", 21 | "component", 22 | "monaca" 23 | ], 24 | "dependencies": {}, 25 | "license": "Apache License, Version 2.0", 26 | "ignore": [ 27 | ".npmignore" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /www/lib/onsenui/css/font_awesome/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/font_awesome/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /www/lib/onsenui/css/ionicons/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/ionicons/fonts/ionicons.eot -------------------------------------------------------------------------------- /www/lib/onsenui/css/ionicons/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/ionicons/fonts/ionicons.ttf -------------------------------------------------------------------------------- /www/lib/onsenui/css/ionicons/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/ionicons/fonts/ionicons.woff -------------------------------------------------------------------------------- /www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnsenUI/onsenui2-quickstart/1c87b20988e0d272151fd72d66fd4c5563a3a0f8/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2 -------------------------------------------------------------------------------- /www/lib/onsenui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "onsenui", 3 | "version": "2.0.0-beta.5", 4 | "description": "HTML5 Mobile Framework & UI Components", 5 | "private": false, 6 | "author": "@kruyvanna", 7 | "contributors": [ 8 | { 9 | "name": "Mitsunori KUBOTA", 10 | "email": "anatoo.jp@gmail.com", 11 | "url": "http://anatoo.jp" 12 | }, 13 | { 14 | "name": "Andreas Argelius", 15 | "email": "andreas@asial.co.jp" 16 | }, 17 | { 18 | "name": "Ataru Otoh", 19 | "email": "ataru@asial.co.jp" 20 | } 21 | ], 22 | "scripts": { 23 | "test": "gulp test" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/OnsenUI/OnsenUI" 28 | }, 29 | "licenses": [ 30 | { 31 | "type": "Apache-2.0", 32 | "url": "http://www.apache.org/licenses/LICENSE-2.0" 33 | } 34 | ], 35 | "bugs": { 36 | "url": "https://github.com/OnsenUI/OnsenUI/issues" 37 | }, 38 | "homepage": "http://onsen.io/", 39 | "main": "js/onsenui.js", 40 | "devDependencies": { 41 | "babel-core": "^6.3.15", 42 | "babel-eslint": "^3.1.30", 43 | "babel-preset-es2015": "^6.1.18", 44 | "babel-preset-es2015-rollup": "^1.0.0", 45 | "browser-sync": "^2.10.0", 46 | "canonical-path": "0.0.2", 47 | "chai": "^2.2.0", 48 | "chai-as-promised": "^5.1.0", 49 | "chai-spies": "^0.6.0", 50 | "connect-livereload": "^0.5.3", 51 | "csv": "*", 52 | "dateformat": "~1.0.7-1.2.3", 53 | "dgeni": "^0.4.1", 54 | "dgeni-packages": "0.10.14", 55 | "event-stream": "^3.3.0", 56 | "extend": "^2.0.0", 57 | "globby": "^2.0.0", 58 | "gulp": "^3.8.11", 59 | "gulp-add-src": "^0.2.0", 60 | "gulp-autoprefixer": "^2.1.0", 61 | "gulp-babel": "^5.3.0", 62 | "gulp-cached": "^1.1.0", 63 | "gulp-chmod": "^1.2.0", 64 | "gulp-clean": "^0.3.1", 65 | "gulp-concat": "^2.5.2", 66 | "gulp-connect": "^2.2.0", 67 | "gulp-cssmin": "^0.1.4", 68 | "gulp-download": "0.0.1", 69 | "gulp-eslint": "^0.15.0", 70 | "gulp-filter": "^2.0.2", 71 | "gulp-header": "^1.2.2", 72 | "gulp-html2js": "^0.2.0", 73 | "gulp-if": "^1.2.1", 74 | "gulp-karma": "0.0.4", 75 | "gulp-load-plugins": "^0.9.0", 76 | "gulp-minify-css": "^1.0.0", 77 | "gulp-ng-annotate": "^0.5.2", 78 | "gulp-plumber": "^1.0.0", 79 | "gulp-protractor": "0.0.12", 80 | "gulp-remember": "^0.3.0", 81 | "gulp-rename": "^1.2.0", 82 | "gulp-rollup": "^1.6.0", 83 | "gulp-shell": "^0.4.0", 84 | "gulp-sourcemaps": "^1.5.2", 85 | "gulp-stylus": "^2.0.1", 86 | "gulp-uglify": "^1.1.0", 87 | "gulp-unzip": "^0.1.3", 88 | "gulp-util": "^3.0.7", 89 | "gulp-zip": "^3.0.2", 90 | "jasmine": "^2.3.1", 91 | "karma": "^0.12.31", 92 | "karma-babel-preprocessor": "^6.0.1", 93 | "karma-chai": "^0.1.0", 94 | "karma-chai-as-promised": "^0.1.2", 95 | "karma-chai-spies": "^0.1.3", 96 | "karma-chrome-launcher": "^0.1.7", 97 | "karma-coverage": "^0.4.2", 98 | "karma-junit-reporter": "^0.2.2", 99 | "karma-mocha": "^0.1.10", 100 | "lodash": "^3.6.0", 101 | "mocha": "^2.2.4", 102 | "node-libs-browser": "^0.5.2", 103 | "nunjucks": "^2.2.0", 104 | "prompt": "*", 105 | "rollup-plugin-babel": "^2.3.6", 106 | "rollup-plugin-npm": "^1.2.0", 107 | "run-sequence": "^1.0.2", 108 | "shelljs": "^0.5.3", 109 | "topdoc": "~0.4.0", 110 | "vinyl-source-stream": "^1.1.0", 111 | "watchify": "^3.6.1", 112 | "yargs": "^3.5.4" 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/blue-basic-theme.styl: -------------------------------------------------------------------------------- 1 | $background-color = #f9f9f9 2 | $material-background-color = #fafafa 3 | $text-color = #1f1f21 4 | $sub-text-color = #999 5 | $highlight-color = rgba(24,103,194,0.81) 6 | $second-highlight-color = #25a6d9 7 | $border-color = #ddd 8 | $toolbar-background-color = #fff 9 | $toolbar-button-color = rgba(38,100,171,0.81) 10 | $toolbar-text-color = #1f1f21 11 | $toolbar-border-color = #ddd 12 | $buttonbar-color = rgba(18,114,224,0.77) 13 | $buttonbar-active-text-color = #fff 14 | $list-background-color = #fff 15 | $list-header-background-color = #eee 16 | $list-tap-active-background-color = #d9d9d9 17 | $tabbar-background-color = #222 18 | $tabbar-text-color = #999 19 | $tabbar-highlight-text-color = #7abfff 20 | $tabbar-border-color = rgba(0,0,0,.0) 21 | $switch-highlight-color = #5198db 22 | $modal-background-color = rgba(0, 0, 0, 0.7) 23 | $modal-text-color = #fff 24 | $alert-dialog-background-color = #f4f4f4 25 | $alert-dialog-text-color = #1f1f21 26 | $alert-dialog-button-color = rgba(24,103,194,0.81) 27 | $alert-dialog-separator-color = #ddd 28 | $dialog-background-color = #f4f4f4 29 | $popover-background-color = white 30 | $popover-text-color = #1f1f21 31 | $notification-background-color = #dc5236 32 | $material-switch-active-thumb-color = #009688 33 | $material-switch-inactive-thumb-color = #f1f1f1 34 | $material-switch-active-background-color = #77c2bb 35 | $material-switch-inactive-background-color = #b0afaf 36 | $material-range-track-color = #e0e0e0 37 | $material-range-thumb-color = #009688 38 | $material-toolbar-background-color = #009688 39 | $material-toolbar-text-color = #ffffff 40 | $material-toolbar-button-color = #ffffff 41 | $material-toolbar-button-active-color = #26a69a 42 | $material-button-background-color = #009688 43 | $material-button-text-color = #ffffff 44 | $material-checkbox-active-color = #009688 45 | $material-checkbox-inactive-color = #717171 46 | $material-checkbox-checkmark-color = #ffffff 47 | $material-radio-button-active-color = #009688 48 | $material-radio-button-inactive-color = #717171 49 | $material-text-input-text-color = #212121 50 | $material-text-input-active-color = #009688 51 | $material-text-input-inactive-color = #afafaf 52 | $material-dialog-background-color = #fafafa 53 | $material-alert-dialog-background-color = #fafafa 54 | $material-alert-dialog-title-color = #212121 55 | $material-alert-dialog-content-color = #727272 56 | $material-alert-dialog-button-color = #009688 57 | $material-progress-bar-primary-color = #009688 58 | $material-progress-bar-secondary-color = #80cbc4 59 | $material-progress-bar-background-color = #e0e0e0 60 | $material-progress-circle-primary-color = #009688 61 | $material-progress-circle-secondary-color = #80cbc4 62 | $material-tabbar-background-color = #009688 63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6) 64 | $material-tabbar-highlight-text-color = #ffffff 65 | $material-tabbar-highlight-color = #26a69a 66 | $fab-text-color = #fafafa 67 | $fab-background-color = #009688 68 | 69 | @import 'components' -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/blue-theme.styl: -------------------------------------------------------------------------------- 1 | $background-color = #fff 2 | $material-background-color = #fafafa 3 | $text-color = #1f1f21 4 | $sub-text-color = #999 5 | $highlight-color = #1284ff 6 | $second-highlight-color = #4cda64 7 | $border-color = #ddd 8 | $toolbar-background-color = #f8f8f8 9 | $toolbar-button-color = #1284ff 10 | $toolbar-text-color = #1f1f21 11 | $toolbar-border-color = #ddd 12 | $buttonbar-color = #1284ff 13 | $buttonbar-active-text-color = #fff 14 | $list-background-color = #fff 15 | $list-header-background-color = #eee 16 | $list-tap-active-background-color = #d9d9d9 17 | $tabbar-background-color = #f8f8f8 18 | $tabbar-text-color = #666 19 | $tabbar-highlight-text-color = #1284ff 20 | $tabbar-border-color = #ddd 21 | $switch-highlight-color = #4cd964 22 | $modal-background-color = rgba(0, 0, 0, 0.7) 23 | $modal-text-color = #fff 24 | $alert-dialog-background-color = #f4f4f4 25 | $alert-dialog-text-color = #1f1f21 26 | $alert-dialog-button-color = #1284ff 27 | $alert-dialog-separator-color = #ddd 28 | $dialog-background-color = #f4f4f4 29 | $popover-background-color = white 30 | $popover-text-color = #1f1f21 31 | $notification-background-color = #dc5236 32 | $material-switch-active-thumb-color = #009688 33 | $material-switch-inactive-thumb-color = #f1f1f1 34 | $material-switch-active-background-color = #77c2bb 35 | $material-switch-inactive-background-color = #b0afaf 36 | $material-range-track-color = #e0e0e0 37 | $material-range-thumb-color = #009688 38 | $material-toolbar-background-color = #009688 39 | $material-toolbar-text-color = #ffffff 40 | $material-toolbar-button-color = #ffffff 41 | $material-toolbar-button-active-color = #26a69a 42 | $material-button-background-color = #009688 43 | $material-button-text-color = #ffffff 44 | $material-checkbox-active-color = #009688 45 | $material-checkbox-inactive-color = #717171 46 | $material-checkbox-checkmark-color = #ffffff 47 | $material-radio-button-active-color = #009688 48 | $material-radio-button-inactive-color = #717171 49 | $material-text-input-text-color = #212121 50 | $material-text-input-active-color = #009688 51 | $material-text-input-inactive-color = #afafaf 52 | $material-dialog-background-color = #fafafa 53 | $material-alert-dialog-background-color = #fafafa 54 | $material-alert-dialog-title-color = #212121 55 | $material-alert-dialog-content-color = #727272 56 | $material-alert-dialog-button-color = #009688 57 | $material-progress-bar-primary-color = #009688 58 | $material-progress-bar-secondary-color = #80cbc4 59 | $material-progress-bar-background-color = #e0e0e0 60 | $material-progress-circle-primary-color = #009688 61 | $material-progress-circle-secondary-color = #80cbc4 62 | $material-tabbar-background-color = #009688 63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6) 64 | $material-tabbar-highlight-text-color = #ffffff 65 | $material-tabbar-highlight-color = #26a69a 66 | $fab-text-color = #fafafa 67 | $fab-background-color = #009688 68 | 69 | @import 'components' -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/alert-dialog.styl: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2013-2014 ASIAL CORPORATION 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 19 | 20 | // internal variables 21 | var-alert-dialog-separator-color = $alert-dialog-separator-color 22 | var-alert-dialog-button-color = $alert-dialog-button-color 23 | var-alert-dialog-background-color = $alert-dialog-background-color 24 | var-alert-dialog-text-color = $alert-dialog-text-color 25 | 26 | var-material-alert-dialog-button-color = $material-alert-dialog-button-color 27 | var-material-alert-dialog-background-color = $material-alert-dialog-background-color 28 | var-material-alert-dialog-title-color = $material-alert-dialog-title-color 29 | var-material-alert-dialog-content-color = $material-alert-dialog-content-color 30 | 31 | retina-alert-dialog-button-border(color = var-alert-dialog-separator-color) 32 | +retina-query() 33 | border-top none 34 | background-size 100% 1px 35 | background-repeat no-repeat 36 | background-position top 37 | background-image linear-gradient(180deg, color, color 50%, transparent 50%) 38 | 39 | /*! topdoc 40 | name: Alert Dialog 41 | class: alert-dialog 42 | height: 360px 43 | markup: 44 |
45 |
46 |
47 |
Alert
48 | 49 |
50 | Hello World! 51 |
52 | 53 |
54 | 55 |
56 |
57 |
58 | */ 59 | .alert-dialog 60 | reset-box-model() 61 | reset-base() 62 | reset-cursor() 63 | reset-font() 64 | position absolute 65 | top 50% 66 | left 50% 67 | transform translate(-50%, -50%) 68 | width 270px 69 | margin auto auto 70 | background-color var-alert-dialog-background-color 71 | border-radius 8px 72 | overflow visible 73 | max-width 95% 74 | color var-alert-dialog-text-color 75 | 76 | .alert-dialog-container 77 | height inherit 78 | padding-top 16px 79 | overflow hidden 80 | 81 | .alert-dialog-title 82 | reset-font() 83 | font-size var-font-size--large 84 | font-weight var-font-weight--large 85 | padding 0px 8px 0px 8px 86 | text-align center 87 | color var-alert-dialog-text-color 88 | 89 | .alert-dialog-content 90 | reset-box-model() 91 | padding 4px 12px 8px 12px 92 | font-size var-font-size--mini 93 | min-height 36px 94 | text-align center 95 | color var-alert-dialog-text-color 96 | 97 | .alert-dialog-footer 98 | width 100% 99 | 100 | .alert-dialog-button 101 | reset-box-model() 102 | reset-base() 103 | reset-font() 104 | reset-cursor() 105 | ellipsis() 106 | text-decoration none 107 | letter-spacing var-letter-spacing 108 | vertical-align middle 109 | border none 110 | border-top 1px solid var-alert-dialog-separator-color 111 | font-size var-font-size - 1px 112 | padding 0 8px 113 | margin 0 114 | display block 115 | width 100% 116 | background-color transparent 117 | text-align center 118 | height 44px 119 | line-height 44px 120 | outline none 121 | color var-alert-dialog-button-color 122 | retina-alert-dialog-button-border() 123 | 124 | .alert-dialog-button:active 125 | background-color rgba(0, 0, 0, 0.05) 126 | 127 | .alert-dialog-button--primal 128 | font-weight var-font-weight--large 129 | 130 | .alert-dialog-footer--one 131 | white-space nowrap 132 | display -webkit-box 133 | display -webkit-flex 134 | display -moz-box 135 | display -moz-flex 136 | display -ms-flexbox 137 | display flex 138 | flex-wrap wrap 139 | 140 | .alert-dialog-button--one 141 | -webkit-box-flex 1 142 | -webkit-flex 1 143 | -moz-box-flex 1 144 | -moz-flex 1 145 | -ms-flex 1 146 | flex 1 147 | display block 148 | width 100% 149 | border-left 1px solid var-alert-dialog-separator-color 150 | +retina-query() 151 | border-top none 152 | border-left none 153 | background-size 100% 1px, 1px 100% 154 | background-repeat no-repeat 155 | background-position top, left 156 | background-image linear-gradient(0deg, transparent, transparent 50%, var-alert-dialog-separator-color 50%), linear-gradient(90deg, transparent, transparent 50%, var-alert-dialog-separator-color 50%) 157 | 158 | .alert-dialog-button--one:first-child 159 | border-left none 160 | +retina-query() 161 | border-top none 162 | background-size 100% 1px 163 | background-repeat no-repeat 164 | background-position top, left 165 | background-image linear-gradient(0deg, transparent, transparent 50%, var-alert-dialog-separator-color 50%) 166 | 167 | 168 | .alert-dialog-mask 169 | reset-base() 170 | reset-cursor() 171 | position absolute 172 | top 0 173 | right 0 174 | left 0 175 | bottom 0 176 | background-color rgba(0, 0, 0, 0.2) 177 | 178 | /*! topdoc 179 | name: Alert Dialog without Title 180 | use: Alert Dialog 181 | height: 360px 182 | markup: 183 |
184 |
185 |
186 |
187 | Hello World! 188 |
189 | 190 |
191 | 192 |
193 |
194 |
195 | */ 196 | 197 | /*! topdoc 198 | name: Alert Dialog with Multiple Buttons 199 | use: Alert Dialog 200 | height: 360px 201 | markup: 202 |
203 |
204 |
205 |
206 | Hello World! 207 |
208 | 209 |
210 | 211 | 212 |
213 |
214 |
215 | */ 216 | 217 | /*! topdoc 218 | name: Alert Dialog with Multiple Buttons 2 219 | use: Alert Dialog 220 | height: 360px 221 | markup: 222 |
223 |
224 |
225 |
Alert
226 | 227 |
228 | Hello World! 229 |
230 | 231 |
232 | 233 | 234 | 235 |
236 |
237 |
238 | */ 239 | 240 | /*! topdoc 241 | name: Material Alert Dialog 242 | use: Alert Dialog 243 | height: 360px 244 | markup: 245 |
246 |
247 |
248 | Dialog title 249 |
250 |
251 | Some dialog content. 252 |
253 |
254 | 255 | 256 |
257 |
258 |
259 | */ 260 | 261 | .alert-dialog--material 262 | border-radius 2px 263 | background-color var-material-alert-dialog-background-color 264 | 265 | .alert-dialog-container--material 266 | padding-top 22px 267 | shadow-5() 268 | 269 | .alert-dialog-title--material 270 | material-font() 271 | text-align left 272 | font-size 20px 273 | font-weight 500 274 | padding 0 24px 275 | color var-material-alert-dialog-title-color 276 | 277 | .alert-dialog-content--material 278 | material-font() 279 | text-align left 280 | font-size 16px 281 | font-weight 400 282 | line-height 20px 283 | padding 0 24px 284 | margin 24px 0 10px 0 285 | min-height 0 286 | color var-material-alert-dialog-content-color 287 | 288 | .alert-dialog-footer--material 289 | display inline-block 290 | padding 0px 8px 0px 24px 291 | box-sizing border-box 292 | 293 | .alert-dialog-button--material 294 | material-font() 295 | text-transform uppercase 296 | display inline-block 297 | width auto 298 | min-width 70px 299 | float right 300 | background none 301 | border-top none 302 | font-size 14px 303 | font-weight 500 304 | outline none 305 | color var-material-alert-dialog-button-color 306 | +retina-query() 307 | background none 308 | 309 | .alert-dialog-button--material:active 310 | background-color initial 311 | 312 | .alert-dialog-button--one--material, 313 | .alert-dialog-button--one--material:first-child 314 | border 0 315 | +retina-query() 316 | background none 317 | 318 | .alert-dialog-button--primal--material 319 | font-weight 500 320 | +retina-query() 321 | background none 322 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/button-bar.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-button-bar-color = $buttonbar-color 23 | var-button-bar-active-color = $buttonbar-active-text-color 24 | var-button-bar-margin = 0 25 | var-button-bar-border-top = 1px solid var-button-bar-color 26 | var-button-bar-border-bottom = 1px solid var-button-bar-color 27 | var-button-bar-border = 0px solid var-button-bar-color 28 | var-button-bar-active-background-color = alpha(var-button-bar-color, var-alpha-lighten) 29 | 30 | /*! topdoc 31 | name: Button Bar 32 | class: button-bar 33 | modifiers: 34 | :disabled: Disabled state 35 | markup: 36 |
37 |
38 | 39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 | */ 48 | 49 | button-bar() 50 | reset-font() 51 | display table 52 | table-layout fixed 53 | white-space nowrap 54 | margin 0 55 | padding 0 56 | 57 | button-bar__item() 58 | reset-font() 59 | display table-cell 60 | width auto 61 | border-radius 0 62 | position relative 63 | 64 | .button-bar 65 | button-bar() 66 | position relative 67 | margin var-button-bar-margin 68 | border none 69 | 70 | .button-bar__item 71 | button-bar__item() 72 | hide-input-parent() 73 | padding 0 74 | position relative 75 | overflow hidden 76 | 77 | .button-bar__item > input 78 | hide-input() 79 | 80 | .button-bar__item:first-child > .button-bar__button 81 | border-left 1px solid var-button-bar-color 82 | border-right 1px solid var-button-bar-color 83 | border-top-left-radius var-border-radius 84 | border-bottom-left-radius var-border-radius 85 | 86 | .button-bar__item:last-child > .button-bar__button 87 | border-right 1px solid var-button-bar-color 88 | border-top-right-radius var-border-radius 89 | border-bottom-right-radius var-border-radius 90 | 91 | .button-bar__button 92 | reset-font() 93 | border-radius inherit 94 | background-color transparent 95 | color var-button-bar-color 96 | border var-button-bar-border 97 | border-top var-button-bar-border-top 98 | border-bottom var-button-bar-border-bottom 99 | border-right 1px solid var-button-bar-color 100 | font-weight var-font-weight 101 | padding 0 8px 102 | height 27px 103 | line-height 27px 104 | font-size 13px 105 | width 100% 106 | transition background-color 0.2s linear, color 0.2s linear 107 | box-sizing border-box 108 | 109 | .button-bar__button:active, 110 | :active + .button-bar__button 111 | background-color var-button-bar-active-background-color 112 | border var-button-bar-border 113 | border-top var-button-bar-border-top 114 | border-bottom var-button-bar-border-bottom 115 | border-right 1px solid var-button-bar-color 116 | height 27px 117 | line-height 27px 118 | font-size 13px 119 | width 100% 120 | transition none 121 | 122 | .button-bar__item.active > .button-bar__button, 123 | :checked + .button-bar__button 124 | background-color var-button-bar-color 125 | color var-button-bar-active-color 126 | transition none 127 | 128 | .button-bar__button:disabled 129 | disabled() 130 | 131 | .button-bar__button:hover 132 | transition none 133 | 134 | .button-bar__button:focus 135 | outline 0 136 | 137 | /*! topdoc 138 | name: Segment 139 | use: Button Bar 140 | modifiers: 141 | :disabled: Disabled state 142 | markup: 143 |
144 |
145 | 146 | 147 |
148 |
149 | 150 | 151 |
152 |
153 | 154 | 155 |
156 |
157 | */ 158 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/button.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License") 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-button-background-color = $highlight-color 23 | var-button-color = white 24 | var-button-cta-background-color = $second-highlight-color 25 | var-border--button-color = rgba(0, 0, 0, 0) 26 | var-button-quiet-color = $highlight-color 27 | 28 | var-button-cta-background-color = $second-highlight-color 29 | var-button-cta-color = white 30 | var-button-large-padding = 4px 12px 31 | var-button-padding = 4px 10px 32 | var-button-line-height = 32px 33 | var-button-large-line-height = 36px 34 | var-button-active-opacity = 0.2 35 | var-button-border-radius = 3px 36 | 37 | var-material-button-background-color = $material-button-background-color 38 | var-material-button-color = $material-button-text-color 39 | 40 | /*! topdoc 41 | name: Button 42 | class: button 43 | modifiers: 44 | :active: Active state 45 | :disabled: Disabled state 46 | :focus: Focused 47 | markup: 48 | 49 | 50 | */ 51 | 52 | button--quiet() 53 | reset-quiet() 54 | 55 | button--disabled() 56 | disabled() 57 | 58 | button--hover() 59 | transition none 60 | 61 | button() 62 | inline-block() 63 | reset-box-model() 64 | reset-base() 65 | reset-font() 66 | reset-cursor() 67 | ellipsis() 68 | height auto 69 | text-decoration none 70 | padding var-button-padding 71 | font-size var-font-size 72 | line-height var-button-line-height 73 | letter-spacing var-letter-spacing 74 | color var-button-color 75 | vertical-align middle 76 | background-color var-button-background-color 77 | border 0px solid currentColor 78 | border-radius var-button-border-radius 79 | transition none 80 | 81 | button--focus() 82 | outline 0 83 | 84 | button--active() 85 | background-color var-button-background-color 86 | transition none 87 | opacity var-button-active-opacity 88 | 89 | .button 90 | button() 91 | 92 | .button:hover 93 | button--hover() 94 | 95 | .button:active 96 | button--active() 97 | 98 | .button:focus 99 | button--focus() 100 | 101 | .button:disabled, 102 | .button[disabled] 103 | button--disabled() 104 | 105 | /*! topdoc 106 | name: Outline Button 107 | class: button--outline 108 | use: Button 109 | markup: 110 | 111 | 112 | */ 113 | .button--outline 114 | background-color transparent 115 | border 1px solid var-button-background-color 116 | color var-button-background-color 117 | 118 | .button--outline:active 119 | background-color alpha(var-button-background-color, var-alpha-lighten) 120 | border 1px solid var-button-background-color 121 | color var-button-background-color 122 | opacity 1 123 | 124 | .button--outline:hover 125 | border 1px solid var-button-background-color 126 | transition 0 127 | 128 | /*! topdoc 129 | name: Light Button 130 | class: button--light 131 | use: Button 132 | markup: 133 | 134 | 135 | */ 136 | .button--light 137 | background-color transparent 138 | color rgba(0, 0, 0, 0.4) 139 | border 1px solid rgba(0, 0, 0, 0.2) 140 | 141 | .button--light:active 142 | background-color rgba(0, 0, 0, 0.05) 143 | color rgba(0, 0, 0, 0.4) 144 | border 1px solid rgba(0, 0, 0, 0.2) 145 | opacity 1 146 | 147 | /*! topdoc 148 | name: Quiet Button 149 | class: button--quiet 150 | markup: 151 | 152 | 153 | */ 154 | 155 | .button--quiet 156 | button() 157 | button--quiet() 158 | background transparent 159 | color var-button-quiet-color 160 | border none 161 | 162 | .button--quiet:disabled, 163 | .button--quiet[disabled] 164 | button--disabled() 165 | border none 166 | 167 | .button--quiet:hover 168 | button--hover() 169 | 170 | .button--quiet:focus 171 | button--focus() 172 | 173 | .button--quiet:active 174 | background-color transparent 175 | border none 176 | transition none 177 | opacity var-button-active-opacity 178 | color var-button-quiet-color 179 | 180 | /*! topdoc 181 | name: Call To Action Button 182 | class: button--cta 183 | markup: 184 | 185 | 186 | */ 187 | 188 | .button--cta 189 | button() 190 | border none 191 | background-color var-button-cta-background-color 192 | color var-button-cta-color 193 | 194 | .button--cta:hover 195 | button--hover() 196 | 197 | .button--cta:focus 198 | button--focus() 199 | 200 | .button--cta:active 201 | color var-button-cat-color 202 | background-color var-button-cta-background-color 203 | transition none 204 | opacity var-button-active-opacity 205 | 206 | .button--cta:disabled, 207 | .button--cta[disabled] 208 | button--disabled() 209 | 210 | 211 | /*! topdoc 212 | name: Large Button 213 | class: button--large 214 | use: Button 215 | markup: 216 | 217 | */ 218 | 219 | .button--large 220 | font-size var-font-size--large 221 | font-weight var-font-weight--large 222 | line-height var-button-large-line-height 223 | padding var-button-large-padding 224 | display block 225 | width 100% 226 | text-align center 227 | 228 | .button--large:active 229 | button--active() 230 | transition none 231 | 232 | .button--large:disabled, 233 | .button--large[disabled] 234 | button--disabled() 235 | 236 | .button--large:hover 237 | button--hover() 238 | 239 | .button--large:focus 240 | button--focus() 241 | 242 | /*! topdoc 243 | name: Large Quiet Button 244 | class: button--large--quiet 245 | markup: 246 | 247 | */ 248 | 249 | .button--large--quiet 250 | button() 251 | font-size var-font-size--large 252 | font-weight var-font-weight--large 253 | line-height var-button-large-line-height 254 | padding var-button-large-padding 255 | display block 256 | width 100% 257 | button--quiet() 258 | color var-button-quiet-color 259 | text-align center 260 | 261 | .button--large--quiet:active 262 | transition none 263 | opacity var-button-active-opacity 264 | color var-button-quiet-color 265 | button--quiet() 266 | 267 | .button--large--quiet:disabled, 268 | .button--large--quiet[disabled] 269 | button--disabled() 270 | 271 | .button--large--quiet:hover 272 | button--hover() 273 | 274 | .button--large--quiet:focus 275 | outline 0 276 | 277 | 278 | /*! topdoc 279 | name: Large Call To Action Button 280 | class: button--large--cta 281 | markup: 282 | 283 | */ 284 | 285 | .button--large--cta 286 | button() 287 | border none 288 | background-color var-button-cta-background-color 289 | color var-button-cta-color 290 | font-size var-font-size--large 291 | font-weight var-font-weight--large 292 | line-height var-button-large-line-height 293 | padding var-button-large-padding 294 | width 100% 295 | text-align center 296 | display block 297 | 298 | .button--large--cta:hover 299 | button--hover() 300 | 301 | .button--large--cta:focus 302 | button--focus() 303 | 304 | .button--large--cta:active 305 | color var-button-cta-color 306 | background-color var-button-cta-background-color 307 | transition none 308 | opacity var-button-active-opacity 309 | 310 | .button--large--cta:disabled, 311 | .button--large--cta[disabled] 312 | button--disabled() 313 | 314 | /*! topdoc 315 | name: Material Button 316 | class: button--material 317 | modifiers: 318 | :active: Active state 319 | :disabled: Disabled state 320 | :focus: Focused 321 | markup: 322 | 323 | 324 | */ 325 | 326 | button--material() 327 | button() 328 | shadow-1() 329 | min-height 36px 330 | line-height 36px 331 | padding 0px 16px 332 | transition box-shadow 0.2s ease 333 | text-align center 334 | font-size 14px 335 | transform: translate3d(0, 0, 0); 336 | text-transform uppercase 337 | background-color var-material-button-background-color 338 | color var-material-button-color 339 | material-font() 340 | font-weight 500 341 | 342 | .button--material 343 | button--material() 344 | 345 | .button--material:active 346 | shadow-3() 347 | background-color var-material-button-background-color 348 | opacity 1 349 | 350 | .button--material:focus 351 | button--focus() 352 | 353 | .button--material:disabled, 354 | .button--material[disabled] 355 | opacity 0.5 356 | shadow-0() 357 | 358 | /*! topdoc 359 | name: Material Flat Button 360 | class: button--material--flat 361 | modifiers: 362 | :active: Active state 363 | :disabled: Disabled state 364 | :focus: Focused 365 | markup: 366 | 367 | 368 | */ 369 | 370 | 371 | .button--material--flat 372 | button--material() 373 | shadow-0() 374 | background-color transparent 375 | color var-material-button-background-color 376 | 377 | button--material--active() 378 | shadow-0() 379 | background-color transparent 380 | color var-material-button-background-color 381 | outline 0 382 | opacity 1 383 | border none 384 | 385 | .button--material--flat:active 386 | button--material--active() 387 | 388 | .button--material--flat:focus 389 | button--material--active() 390 | 391 | .button--material--flat:disabled, 392 | .button--material--flat[disabled] 393 | opacity 0.5 394 | shadow-0() 395 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/checkbox.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-background-color-checked--checkbox = $highlight-color // background color active 23 | var-checkbox-border-color = $highlight-color // boder color 24 | var-checkbox-border-color-active = $highlight-color // boder color active 25 | var-checkmark-color = #fff // indicator color 26 | 27 | var-checkmark-foot-height = 6px 28 | var-checkbox-border = 1px solid var-checkbox-border-color 29 | var-background-color--before--checkbox = var-background-color-checked--checkbox 30 | var-checkmark-border = 3px solid var-checkmark-color 31 | var-checkmark-tail-width = 12px 32 | var-checkmark-border-width = 2px 33 | var-checkmark-top = 6px 34 | var-checkmark-left = 5px 35 | var-checkbox-size = 24px 36 | var-border--checkmark--noborder = 3px solid var-checkbox-border-color 37 | var-checkbox-border-radius = 16px 38 | var-checkmark-border-radius = 0px 39 | 40 | var-material-checkbox-size = 18px 41 | var-material-checkbox-active-color = $material-checkbox-active-color 42 | var-material-checkbox-inactive-color = $material-checkbox-inactive-color 43 | var-material-checkbox-checkmark-color = $material-checkbox-checkmark-color 44 | 45 | /*! topdoc 46 | name: Checkbox 47 | class: checkbox 48 | modifiers: 49 | :focus: Focus state 50 | :disabled: Disabled state 51 | markup: 52 | 57 | 58 | 63 | 64 | 69 | */ 70 | 71 | checkbox() 72 | reset-box-model() 73 | inline-block() 74 | reset-cursor() 75 | reset-font() 76 | hide-input-parent() 77 | 78 | checkbox__label() 79 | inline-block() 80 | reset-cursor() 81 | reset-font() 82 | 83 | checkbox--disabled() 84 | disabled() 85 | 86 | checkbox--before() 87 | content '' 88 | position absolute 89 | 90 | checkbox--after() 91 | checkbox--before() 92 | 93 | .checkbox 94 | checkbox__label() 95 | line-height var-checkbox-size 96 | 97 | .checkbox__checkmark 98 | checkbox() 99 | height var-checkbox-size 100 | pointer-events none 101 | 102 | .checkbox__input 103 | hide-input() 104 | height 0 105 | width 0 106 | 107 | .checkbox__input:checked 108 | background var-background-color-checked--checkbox 109 | 110 | .checkbox__input:checked + .checkbox__checkmark:before 111 | background var-background-color--before--checkbox 112 | border var-checkbox-border 113 | 114 | .checkbox__input:checked + .checkbox__checkmark:after 115 | opacity 1 116 | 117 | .checkbox__checkmark:before 118 | checkbox--before() 119 | reset-box-model() 120 | width var-checkbox-size 121 | height var-checkbox-size 122 | background transparent 123 | border var-checkbox-border 124 | border-radius var-checkbox-border-radius 125 | box-shadow var-box-shadow 126 | left 0 127 | 128 | .checkbox__checkmark 129 | checkbox() 130 | width var-checkbox-size 131 | height var-checkbox-size 132 | 133 | // checkmark's line 134 | .checkbox__checkmark:after 135 | checkbox--after() 136 | top var-checkmark-top 137 | left var-checkmark-left 138 | width var-checkmark-tail-width 139 | height var-checkmark-foot-height 140 | background transparent 141 | border var-checkmark-border 142 | border-width var-checkmark-border-width 143 | border-top none 144 | border-right none 145 | border-radius var-checkmark-border-radius 146 | transform rotate(-45deg) 147 | opacity 0 148 | 149 | .checkbox__input:focus + .checkbox__checkmark:before 150 | box-shadow var-box-shadow--cta 151 | 152 | .checkbox__input:disabled + .checkbox__checkmark 153 | checkbox--disabled() 154 | 155 | .checkbox__input:disabled:active + .checkbox__checkmark:before 156 | background transparent 157 | box-shadow var-box-shadow 158 | 159 | /*! topdoc 160 | name: No border Checkbox 161 | class: checkbox--noborder 162 | markup: 163 | 168 | 169 | 174 | 175 | 180 | */ 181 | 182 | .checkbox--noborder__input 183 | hide-input() 184 | 185 | .checkbox--noborder 186 | checkbox__label() 187 | line-height var-checkbox-size 188 | hide-input-parent() 189 | 190 | .checkbox--noborder__checkmark 191 | inline-block() 192 | reset-cursor() 193 | reset-box-model() 194 | height var-checkbox-size 195 | background transparent 196 | 197 | .checkbox--noborder__input 198 | hide-input() 199 | height 0 200 | width 0 201 | 202 | .checkbox--noborder__input:checked + .checkbox--noborder__checkmark:before 203 | background transparent 204 | border none 205 | 206 | .checkbox--noborder__input:checked + .checkbox--noborder__checkmark:after 207 | opacity 1 208 | 209 | .checkbox--noborder__checkmark:before 210 | content '' 211 | position absolute 212 | width var-checkbox-size 213 | height var-checkbox-size 214 | background transparent 215 | border none 216 | border-radius var-checkbox-border-radius 217 | left 0 218 | 219 | .checkbox--noborder__checkmark 220 | inline-block() 221 | reset-cursor() 222 | reset-box-model() 223 | width var-checkbox-size 224 | height var-checkbox-size 225 | border none 226 | 227 | .checkbox--noborder__checkmark:after 228 | content '' 229 | position absolute 230 | top var-checkmark-top 231 | left var-checkmark-left 232 | opacity 0 233 | width var-checkmark-tail-width 234 | height var-checkmark-foot-height 235 | background transparent 236 | border var-border--checkmark--noborder 237 | border-width var-checkmark-border-width 238 | border-top none 239 | border-right none 240 | border-radius var-checkmark-border-radius 241 | transform rotate(-45deg) 242 | 243 | .checkbox--noborder__input:focus + .checkbox--noborder__checkmark:before 244 | border none 245 | box-shadow var-box-shadow--cta 246 | 247 | .checkbox--noborder__input:disabled + .checkbox--noborder__checkmark 248 | disabled() 249 | 250 | .checkbox--noborder__input:disabled:active + .checkbox--noborder__checkmark:before 251 | background transparent 252 | box-shadow var-box-shadow 253 | border none 254 | 255 | /*! topdoc 256 | name: Material Checkbox 257 | use: Checkbox 258 | modifiers: 259 | :focus: Focus state 260 | :disabled: Disabled state 261 | markup: 262 | 267 | 272 | 277 | 282 | */ 283 | 284 | .checkbox--material 285 | line-height var-material-checkbox-size 286 | material-font() 287 | 288 | .checkbox--material__checkmark 289 | width var-material-checkbox-size 290 | height var-material-checkbox-size 291 | 292 | .checkbox--material__checkmark:before 293 | border 2px solid var-material-checkbox-inactive-color 294 | 295 | .checkbox--material__input:checked + .checkbox--material__checkmark:before 296 | background-color var-material-checkbox-active-color 297 | border none 298 | 299 | .checkbox--material__input + .checkbox--material__checkmark:after 300 | border-color var-material-checkbox-checkmark-color 301 | transition transform 0.3s ease 302 | width 10px 303 | height 5px 304 | top 4px 305 | left 3px 306 | transform scale(0) rotate(-45deg) 307 | 308 | .checkbox--material__input:checked + .checkbox--material__checkmark:after 309 | top 4px 310 | left 3px 311 | transform scale(1) rotate(-45deg) 312 | 313 | .checkbox--material__input:disabled + .checkbox--material__checkmark 314 | opacity 1 315 | 316 | .checkbox--material__input:disabled + .checkbox--material__checkmark:before 317 | border-color #afafaf 318 | 319 | .checkbox--material__input:disabled:checked + .checkbox--material__checkmark:before 320 | background-color #afafaf 321 | 322 | .checkbox--material__input:disabled:checked + .checkbox--material__checkmark:after 323 | border-color #ffffff 324 | 325 | .checkbox--material__input:disabled:checked:active + .checkbox--material__checkmark:before 326 | background-color #afafaf 327 | 328 | .checkbox--material__checkmark:before 329 | border-radius 2px 330 | width var-material-checkbox-size 331 | height var-material-checkbox-size 332 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/dialog.styl: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2012 Adobe Systems Inc.; 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | */ 15 | 16 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 17 | 18 | // internal variables 19 | var-dialog-background-color = $dialog-background-color 20 | 21 | var-material-dialog-background-color = $material-dialog-background-color 22 | 23 | /*! topdoc 24 | name: Dialog 25 | class: dialog 26 | markup: 27 |
28 |
29 |
30 |
31 |

Content

32 |
33 |
34 |
35 | */ 36 | .dialog 37 | reset-box-model() 38 | reset-base() 39 | reset-cursor() 40 | reset-font() 41 | position absolute 42 | top 50% 43 | left 50% 44 | transform translate(-50%, -50%) 45 | margin auto auto 46 | overflow hidden 47 | min-width 270px 48 | min-height 100px 49 | text-align left 50 | 51 | .dialog-container 52 | height inherit 53 | overflow hidden 54 | border-radius 4px 55 | background-color var-dialog-background-color 56 | -webkit-mask-image url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC") 57 | 58 | .dialog-mask 59 | reset-base() 60 | reset-cursor() 61 | position absolute 62 | top 0 63 | right 0 64 | left 0 65 | bottom 0 66 | background-color rgba(0, 0, 0, 0.2) 67 | 68 | /*! topdoc 69 | name: Material Dialog 70 | use: Dialog 71 | markup: 72 |
73 |
74 |
75 |

The quick brown fox jumps over the lazy dog.

76 |
77 |
78 | */ 79 | 80 | .dialog--material 81 | material-font() 82 | text-align left 83 | shadow-5() 84 | 85 | .dialog-container--material 86 | border-radius 2px 87 | background-color var-material-dialog-background-color 88 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/fab.styl: -------------------------------------------------------------------------------- 1 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 2 | 3 | // internal variables 4 | var-fab-width = 56px 5 | var-fab-height = 56px 6 | 7 | var-fab-mini-width = 40px 8 | var-fab-mini-height = 40px 9 | 10 | var-fab-background-color = $fab-background-color 11 | var-fab-color = $fab-text-color 12 | 13 | /*! topdoc 14 | name: Fab 15 | class: fab 16 | modifiers: 17 | :active: Active state 18 | :disabled: Disabled state 19 | :focus: Focused 20 | markup: 21 | 22 | 23 | */ 24 | 25 | fab--disabled() 26 | background-color alpha(black, 0.5) 27 | shadow-0() 28 | disabled() 29 | 30 | fab() 31 | inline-block() 32 | reset-box-model() 33 | reset-base() 34 | reset-font() 35 | reset-cursor() 36 | material-font() 37 | width var-fab-width 38 | height var-fab-height 39 | text-decoration none 40 | font-size 25px 41 | line-height var-fab-height 42 | letter-spacing var-letter-spacing 43 | color var-fab-color 44 | vertical-align middle 45 | text-align center 46 | background-color var-fab-background-color 47 | border 0px solid currentColor 48 | border-radius 50% 49 | overflow hidden 50 | shadow-2() 51 | transition all 0.2s ease-in-out 52 | 53 | fab--focus() 54 | outline 0 55 | 56 | fab--active() 57 | shadow-4() 58 | background-color var-fab-background-color 59 | transition all 0.2s ease 60 | 61 | .fab 62 | fab() 63 | 64 | .fab:hover 65 | fab--hover() 66 | 67 | .fab:active 68 | fab--active() 69 | 70 | .fab:focus 71 | fab--focus() 72 | 73 | .fab__icon 74 | position relative 75 | overflow hidden 76 | height 100% 77 | width 100% 78 | display block 79 | border-radius 100% 80 | padding 0 81 | z-index 100 82 | line-height var-fab-height 83 | 84 | .fab:disabled, 85 | .fab[disabled] 86 | fab--disabled() 87 | 88 | .fab--top__right 89 | top 20px 90 | bottom auto 91 | right 20px 92 | left auto 93 | position fixed 94 | 95 | .fab--bottom__right 96 | top auto 97 | bottom 20px 98 | right 20px 99 | left auto 100 | position fixed 101 | 102 | .fab--top__left 103 | top 20px 104 | bottom auto 105 | right auto 106 | left 20px 107 | position fixed 108 | 109 | .fab--bottom__left 110 | top auto 111 | bottom 20px 112 | right auto 113 | left 20px 114 | position fixed 115 | 116 | .fab--top__center 117 | top 20px 118 | bottom auto 119 | margin-left -28px 120 | left 50% 121 | right auto 122 | position fixed 123 | 124 | .fab--bottom__center 125 | top auto 126 | bottom 20px 127 | margin-left -28px 128 | left 50% 129 | right auto 130 | position fixed 131 | 132 | /*! topdoc 133 | name: Fab Mini 134 | use: Fab 135 | modifiers: 136 | :active: Active state 137 | :disabled: Disabled state 138 | :focus: Focused 139 | markup: 140 | 141 | 142 | */ 143 | 144 | .fab--mini 145 | width var-fab-mini-width 146 | height var-fab-mini-height 147 | line-height var-fab-mini-height 148 | 149 | .fab--mini 150 | .fab__icon 151 | line-height var-fab-mini-height 152 | 153 | .speed-dial__item 154 | position absolute 155 | transform scale(0) 156 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/global.styl: -------------------------------------------------------------------------------- 1 | // NOTE: You can't use @extend for component independent and topdoc parsing. 2 | 3 | // global variables 4 | var-input-bg-color = $background-color 5 | var-input-border-color = $border-color 6 | var-input-text-color = $text-color 7 | var-input-placeholder-color = $sub-text-color 8 | var-input-invalid-border-color = $border-color 9 | var-input-invalid-text-color = $text-color 10 | var-alpha-lighten = 0.2 11 | 12 | // Font 13 | var-font-size = 17px 14 | var-font-weight = 400 15 | var-letter-spacing = 0 16 | var-text-color = $text-color 17 | var-font-size--mini = var-font-size - 3px 18 | var-font-size--large = 17px 19 | var-font-weight--large = 500 20 | 21 | // Input 22 | var-background-color--input = transparent 23 | var-box-shadow--text-input = none 24 | var-box-shadow--cta = none 25 | var-thumb-size = 29px 26 | var-background--body = var-secondary-color 27 | var-box-shadow = none 28 | var-box-shadow--down = none 29 | var-text-shadow = 0 1px none 30 | var-round-border = 30px 31 | var-border-radius = 4px 32 | var-border-radius--large = 0 33 | var-border--invalid = 1px solid var-input-invalid-border-color 34 | var-input-border = 1px solid var-input-border-color 35 | 36 | 37 | html 38 | height 100% 39 | width 100% 40 | 41 | body 42 | position absolute 43 | top 0 44 | right 0 45 | left 0 46 | bottom 0 47 | padding 0 48 | margin 0 49 | -webkit-text-size-adjust 100% 50 | 51 | *:not(input):not(textarea):not(select) 52 | user-select none 53 | 54 | * 55 | -webkit-tap-highlight-color rgba(0, 0, 0, 0) 56 | 57 | input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus 58 | outline none 59 | 60 | h1 61 | font-size 36px 62 | 63 | h2 64 | font-size 30px 65 | 66 | h3 67 | font-size 24px 68 | 69 | h4, h5, h6 70 | font-size 18px 71 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/index.styl: -------------------------------------------------------------------------------- 1 | @import './util' 2 | @import './global' 3 | @import './material-shadow' 4 | @import './page' 5 | @import './switch' 6 | @import './range' 7 | @import './navigation-bar' 8 | @import './button' 9 | @import './button-bar' 10 | @import './tab-bar' 11 | @import './notification' 12 | @import './toolbar-button' 13 | @import './checkbox' 14 | @import './radio-button' 15 | @import './list' 16 | @import './search-input' 17 | @import './text-input' 18 | @import './textarea' 19 | @import './dialog' 20 | @import './alert-dialog' 21 | @import './popover' 22 | @import './modal' 23 | @import './progress-bar' 24 | @import './progress-circular' 25 | @import './fab' 26 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/material-shadow.styl: -------------------------------------------------------------------------------- 1 | shadow-0() 2 | box-shadow none 3 | shadow-1() 4 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); 5 | shadow-2() 6 | box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4); 7 | shadow-3() 8 | box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4); 9 | shadow-4() 10 | box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4); 11 | shadow-5() 12 | box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4); -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/modal.styl: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2013-2014 ASIAL CORPORATION 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 19 | 20 | // internal variables 21 | var-modal-background-color = $modal-background-color 22 | var-modal-color = $modal-text-color 23 | 24 | /*! topdoc 25 | name: Modal 26 | class: modal 27 | markup: 28 |
29 |
30 | Message Text 31 |
32 |
33 | */ 34 | 35 | modal() 36 | reset-container() 37 | reset-base() 38 | reset-box-model() 39 | reset-font() 40 | 41 | modal__content() 42 | reset-container() 43 | reset-base() 44 | reset-box-model() 45 | reset-font() 46 | 47 | .modal 48 | modal() 49 | overflow hidden 50 | background-color var-modal-background-color 51 | position absolute 52 | left 0 53 | right 0 54 | top 0 55 | bottom 0 56 | width 100% 57 | height 100% 58 | display table 59 | z-index 2147483647 60 | 61 | .modal__content 62 | modal__content() 63 | display table-cell 64 | vertical-align middle 65 | text-align center 66 | color var-modal-color 67 | white-space normal 68 | 69 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/navigation-bar.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-navigation-bar-background-color = $toolbar-background-color 23 | var-navigation-bar-separator-color = $toolbar-border-color 24 | var-navigation-bar-color = $toolbar-text-color 25 | 26 | var-navigation-bar-height = 44px 27 | var-navigation-bar-box-shadow = none 28 | var-navigation-bar-padding = 0 29 | var-navigation-bar-separator = 1px solid var-navigation-bar-separator-color 30 | 31 | var-navigation-bar-material-height = 56px 32 | 33 | var-material-navigation-bar-background-color = $material-toolbar-background-color 34 | var-material-navigation-bar-color = $material-toolbar-text-color 35 | 36 | /*! topdoc 37 | name: Navigation Bar 38 | class: navigation-bar 39 | markup: 40 |
41 |
Navigation Bar
42 |
43 | */ 44 | 45 | retina-navigation-bar-border(position = bottom, color = #ddd) 46 | +retina-query() 47 | border-{position} none 48 | background-size 100% 1px 49 | background-repeat no-repeat 50 | background-position position 51 | background-image linear-gradient(0deg, color, color 50%, transparent 50%) if position == 'bottom' 52 | background-image linear-gradient(180deg, color, color 50%, transparent 50%) if position == 'top' 53 | 54 | navigation-bar() 55 | reset-font() 56 | reset-container() 57 | reset-base() 58 | reset-cursor() 59 | z-index 2 60 | 61 | navigation-bar__item() 62 | reset-box-model() 63 | reset-base() 64 | 65 | .navigation-bar 66 | navigation-bar() 67 | display block 68 | height var-navigation-bar-height 69 | padding-left var-navigation-bar-padding 70 | padding-right var-navigation-bar-padding 71 | background var-navigation-bar-background-color 72 | color var-navigation-bar-color 73 | box-shadow var-navigation-bar-box-shadow 74 | border-bottom var-navigation-bar-separator 75 | font-weight var-font-weight 76 | width 100% 77 | white-space nowrap 78 | overflow visible 79 | retina-navigation-bar-border(bottom, var-navigation-bar-separator-color) 80 | 81 | .navigation-bar__bg 82 | background var-navigation-bar-background-color 83 | 84 | .navigation-bar__item 85 | navigation-bar__item() 86 | height var-navigation-bar-height 87 | vertical-align top 88 | overflow visible 89 | display block 90 | vertical-align middle 91 | float left 92 | 93 | .navigation-bar__left 94 | @extend .navigation-bar__item 95 | max-width 50% 96 | width 27% 97 | text-align left 98 | line-height var-navigation-bar-height 99 | 100 | .navigation-bar__right 101 | @extend .navigation-bar__item 102 | max-width 50% 103 | width 27% 104 | text-align right 105 | line-height var-navigation-bar-height 106 | 107 | .navigation-bar__center 108 | @extend .navigation-bar__item 109 | width 46% 110 | text-align center 111 | line-height var-navigation-bar-height 112 | font-size var-font-size--large 113 | font-weight var-font-weight--large 114 | color var-navigation-bar-color 115 | 116 | .navigation-bar__title 117 | line-height var-navigation-bar-height 118 | font-size var-font-size--large 119 | font-weight var-font-weight--large 120 | color var-navigation-bar-color 121 | margin 0 122 | padding 0 123 | overflow visible 124 | 125 | .navigation-bar__center:first-child:last-child 126 | width 100% 127 | 128 | /*! topdoc 129 | name: Navigation Bar Item 130 | use: Toolbar Button, Navigation Bar 131 | markup: 132 |
133 |
134 | 135 | 136 | 137 |
138 | 139 |
140 | Navigation Bar 141 |
142 | 143 |
144 | Label 145 |
146 |
147 | */ 148 | 149 | /*! topdoc 150 | name: Navigation Bar with Outline Button 151 | use: Toolbar Button, Navigation Bar 152 | markup: 153 | 154 |
155 |
156 | 157 | 158 | 159 |
160 | 161 |
162 | Title 163 |
164 | 165 |
166 | Button 167 |
168 |
169 | */ 170 | 171 | /*! topdoc 172 | name: Transparent Navigation Bar 173 | class: navigation-bar--transparent 174 | use: Toolbar Button, Navigation Bar 175 | markup: 176 |
177 |
178 | 179 | 180 | 181 |
182 |
183 | Navigation Bar 184 |
185 |
186 | Label 187 |
188 |
189 | */ 190 | 191 | .navigation-bar--transparent 192 | background-color transparent 193 | background-image none 194 | border none 195 | 196 | /*! topdoc 197 | name: Navigation Bar with Outline Button 198 | use: Toolbar Button, Navigation Bar 199 | markup: 200 | 201 |
202 |
203 | 204 | 205 | 206 |
207 | 208 |
209 | Title 210 |
211 | 212 |
213 | Button 214 |
215 |
216 | */ 217 | 218 | /*! topdoc 219 | name: Transparent Navigation Bar 220 | class: navigation-bar--transparent 221 | use: Toolbar Button, Navigation Bar 222 | markup: 223 | 224 |
225 |
226 | 227 | 228 | 229 |
230 |
231 | Navigation Bar 232 |
233 |
234 | Label 235 |
236 |
237 | */ 238 | 239 | .navigation-bar--transparent 240 | background-color transparent 241 | background-image none 242 | border none 243 | 244 | /*! topdoc 245 | name: Bottom Bar 246 | class: bottom-bar 247 | use: Navigation Bar 248 | markup: 249 |
250 |
Bottom Toolbar
251 |
252 | */ 253 | .bottom-bar 254 | navigation-bar() 255 | display block 256 | height var-navigation-bar-height 257 | padding-left var-navigation-bar-padding 258 | padding-right var-navigation-bar-padding 259 | background var-navigation-bar-background-color 260 | color var-navigation-bar-color 261 | box-shadow var-navigation-bar-box-shadow 262 | font-weight var-font-weight 263 | border-bottom none 264 | border-top var-navigation-bar-separator 265 | position absolute 266 | bottom 0px 267 | right 0px 268 | left 0px 269 | retina-navigation-bar-border(top, var-navigation-bar-separator-color) 270 | 271 | .bottom-bar__line-height 272 | line-height var-navigation-bar-height 273 | padding-bottom 0 274 | padding-top 0 275 | 276 | .bottom-bar--transparent 277 | background-color transparent 278 | background-image none 279 | border none 280 | 281 | /*! topdoc 282 | name: Navigation Bar with Segment 283 | class: navigation-bar 284 | hint: .navigation-bar .button-bar 285 | use: Segment, Navigation Bar 286 | markup: 287 |
288 |
289 |
290 |
291 | 292 |
One
293 |
294 | 295 |
296 | 297 |
Two
298 |
299 |
300 |
301 |
302 | */ 303 | 304 | /*! topdoc 305 | name: Material Navigation Bar 306 | class: navigation-bar--material 307 | use: Toolbar Button, Navigation Bar 308 | markup: 309 |
310 |
311 | Title 312 |
313 |
314 | */ 315 | 316 | .navigation-bar--material 317 | display flex 318 | flex-wrap nowrap 319 | justify-content space-between 320 | height var-navigation-bar-material-height 321 | border-bottom 0 322 | box-shadow 0 1px 5px rgba(0,0,0,0.3) 323 | padding 0 324 | background-color var-material-navigation-bar-background-color 325 | background-size 0 326 | 327 | .navigation-bar--noshadow 328 | box-shadow none 329 | 330 | navigation-bar--material-font() 331 | material-font() 332 | font-size 20px 333 | font-weight 500 334 | color var-material-navigation-bar-color 335 | 336 | .navigation-bar--material__left 337 | navigation-bar--material-font() 338 | height var-navigation-bar-material-height 339 | min-width 72px 340 | width auto 341 | float initial 342 | line-height var-navigation-bar-material-height 343 | 344 | .navigation-bar--material__center 345 | navigation-bar--material-font() 346 | height var-navigation-bar-material-height 347 | width auto 348 | flex-grow 1 349 | overflow hidden 350 | text-overflow ellipsis 351 | text-align left 352 | float initial 353 | line-height var-navigation-bar-material-height 354 | 355 | .navigation-bar--material__center:first-child 356 | margin-left 16px 357 | 358 | .navigation-bar--material__left:empty 359 | min-width 16px 360 | 361 | .navigation-bar--material__right 362 | navigation-bar--material-font() 363 | height var-navigation-bar-material-height 364 | width auto 365 | float initial 366 | line-height var-navigation-bar-material-height 367 | 368 | /*! topdoc 369 | name: Material Navigation Bar with Icons 370 | class: navigation-bar--material 371 | use: Toolbar Button, Material Navigation Bar 372 | hint: .navigation-bar--material 373 | markup: 374 |
375 |
376 | 377 | 378 | 379 |
380 |
381 | Title 382 |
383 |
384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 |
394 |
395 | */ 396 | 397 | 398 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/notification.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-notification-bg-color = $notification-background-color 23 | var-notification-color = white 24 | 25 | var-notification-border-radius = 19px 26 | var-notification-width = auto 27 | var-notification-height = 19px 28 | var-notification-min-width = 19px 29 | var-notification-padding = 0 4px 30 | var-notification-font-size = 16px 31 | 32 | 33 | /*! topdoc 34 | name: Notification 35 | class: notification 36 | markup: 37 | 1 38 | 10 39 | 999 40 | */ 41 | 42 | .notification 43 | inline-block() 44 | reset-box-model() 45 | reset-base() 46 | reset-font() 47 | reset-cursor() 48 | ellipsis() 49 | text-decoration none 50 | padding var-notification-padding 51 | width var-notification-width 52 | height var-notification-height 53 | border-radius var-notification-border-radius 54 | background-color var-notification-bg-color 55 | color var-notification-color 56 | text-align center 57 | font-size var-notification-font-size 58 | min-width var-notification-min-width 59 | line-height @height 60 | font-weight var-font-weight 61 | 62 | .notification:empty 63 | display none 64 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/page.styl: -------------------------------------------------------------------------------- 1 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 2 | 3 | // internal variables 4 | var-page-background-color = $background-color 5 | var-page-material-background-color = $material-background-color 6 | 7 | .page 8 | reset-font() 9 | background-color var-page-background-color 10 | position absolute 11 | top 0px 12 | left 0px 13 | right 0px 14 | bottom 0px 15 | overflow visible 16 | font-size var-font-size 17 | color var-text-color 18 | -ms-overflow-style none 19 | 20 | .page::-webkit-scrollbar 21 | display none 22 | 23 | .page__content 24 | background-color var-page-background-color 25 | position absolute 26 | top 0px 27 | left 0px 28 | right 0px 29 | bottom 0px 30 | box-sizing border-box 31 | 32 | .page__background 33 | background-color var-page-background-color 34 | position absolute 35 | top 0px 36 | left 0px 37 | right 0px 38 | bottom 0px 39 | box-sizing border-box 40 | 41 | .content-padded 42 | padding 8px 43 | 44 | .page--material 45 | material-font() 46 | 47 | .page--material__content 48 | material-font() 49 | font-weight 400 50 | 51 | .page--material__content h1 52 | .page--material__content h2 53 | .page--material__content h3 54 | .page--material__content h4 55 | .page--material__content h5 56 | material-font() 57 | font-weight 400 58 | 59 | .page--material__background 60 | background-color var-page-material-background-color 61 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/popover.styl: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2012 Adobe Systems Inc.; 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | */ 15 | 16 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 17 | 18 | // internal variables 19 | var-popover-background-color = $popover-background-color 20 | var-popover-text-color = $popover-text-color 21 | var-popover-arrow-size = 18px 22 | var-popover-arrow-radius = 4px 23 | var-popover-radius = 8px 24 | 25 | /*! topdoc 26 | name: Popover 27 | class: popover 28 | markup: 29 |
30 |
31 |
32 |
33 |
Content
34 |
35 |
36 | */ 37 | .popover-mask 38 | position absolute 39 | left 0 40 | right 0 41 | top 0 42 | bottom 0 43 | background-color rgba(0, 0, 0, 0.1) 44 | 45 | .popover 46 | reset-box-model() 47 | reset-base() 48 | reset-cursor() 49 | reset-font() 50 | position absolute 51 | display block 52 | width 220px 53 | min-height 100px 54 | 55 | .popover__content 56 | background-color var-popover-background-color 57 | border-radius var-popover-radius 58 | color var-popover-text-color 59 | overflow hidden 60 | min-height 100px 61 | height: 100% 62 | -webkit-mask-image url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC") 63 | 64 | .popover__content > * 65 | overflow hidden 66 | 67 | popover-arrow() 68 | content '' 69 | position absolute 70 | width var-popover-arrow-size 71 | height var-popover-arrow-size 72 | transform-origin 50% 50% 0 73 | background-color transparent 74 | background-image linear-gradient(45deg, var-popover-background-color, var-popover-background-color 50%, transparent 50%) 75 | border-radius 0 0 0 var-popover-arrow-radius 76 | 77 | .popover__bottom-arrow 78 | popover-arrow() 79 | transform rotate(-45deg) 80 | bottom 0 81 | left 50% 82 | margin-left -(var-popover-arrow-size / 2)px 83 | margin-bottom -(var-popover-arrow-size / 2)px 84 | 85 | .popover__top-arrow 86 | popover-arrow() 87 | transform rotate(135deg) 88 | top 0 89 | left 50% 90 | margin-left -(var-popover-arrow-size / 2)px 91 | margin-top -(var-popover-arrow-size / 2)px 92 | 93 | .popover__left-arrow 94 | popover-arrow() 95 | transform rotate(45deg) 96 | top 50% 97 | left 0 98 | margin-left -(var-popover-arrow-size / 2)px 99 | margin-top -(var-popover-arrow-size / 2)px 100 | 101 | .popover__right-arrow 102 | popover-arrow() 103 | transform rotate(225deg) 104 | top 50% 105 | right 0 106 | margin-right -(var-popover-arrow-size / 2)px 107 | margin-top -(var-popover-arrow-size / 2)px 108 | 109 | /*! topdoc 110 | name: Popover(down) 111 | use: Popover 112 | markup: 113 |
114 |
115 |
116 |
117 |
Content
118 |
119 |
120 | */ 121 | 122 | /*! topdoc 123 | name: Popover(left) 124 | use: Popover 125 | markup: 126 |
127 |
128 |
129 |
130 |
Content
131 |
132 |
133 | */ 134 | 135 | /*! topdoc 136 | name: Popover(right) 137 | use: Popover 138 | markup: 139 |
140 |
141 |
142 |
143 |
Content
144 |
145 |
146 | */ 147 | 148 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/progress-bar.styl: -------------------------------------------------------------------------------- 1 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 2 | 3 | // internal variables 4 | var-progress-bar-color = $material-progress-bar-primary-color 5 | var-progress-bar-secondary-color = $material-progress-bar-secondary-color 6 | var-progress-bar-background-color = $material-progress-bar-background-color 7 | 8 | /*! topdoc 9 | name: Progress Bar 10 | class: progres-bar 11 | markup: 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | */ 22 | 23 | .progress-bar 24 | position relative 25 | height 4px 26 | display block 27 | width 100% 28 | background-color var-progress-bar-background-color 29 | background-clip padding-box 30 | margin 0 31 | overflow hidden 32 | 33 | .progress-bar--determinate > .progress-bar__primary 34 | .progress-bar--determinate > .progress-bar__secondary 35 | position absolute 36 | background-color var-progress-bar-color 37 | top 0 38 | bottom 0 39 | transition width .3s linear 40 | z-index 100 41 | 42 | .progress-bar--determinate > .progress-bar__secondary 43 | background-color var-progress-bar-secondary-color 44 | z-index 0 45 | 46 | .progress-bar--indeterminate:before 47 | content '' 48 | position absolute 49 | background-color var-progress-bar-color 50 | top 0 51 | left 0 52 | bottom 0 53 | will-change left, right 54 | animation progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite 55 | 56 | .progress-bar--indeterminate:after 57 | content '' 58 | position absolute 59 | background-color var-progress-bar-color 60 | top 0 61 | left 0 62 | bottom 0 63 | will-change left, right 64 | animation progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 65 | animation-delay 1.15s 66 | 67 | @keyframes progress-bar__indeterminate { 68 | 0% { 69 | left -35% 70 | right 100% 71 | } 72 | 60% { 73 | left 100% 74 | right -90% 75 | } 76 | 100% { 77 | left 100% 78 | right -90% 79 | } 80 | } 81 | 82 | @keyframes progress-bar__indeterminate-short { 83 | 0% { 84 | left -200% 85 | right 100% 86 | } 87 | 60% { 88 | left 107% 89 | right -8% 90 | } 91 | 100% { 92 | left 107% 93 | right -8% 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/progress-circular.styl: -------------------------------------------------------------------------------- 1 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 2 | 3 | // internal variables 4 | var-progress-circle-color = $material-progress-circle-primary-color 5 | var-progress-circle-secondary-color = $material-progress-circle-secondary-color 6 | 7 | /*! topdoc 8 | name: Progress Circle 9 | class: progres-circle 10 | markup: 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | */ 20 | 21 | .progress-circular 22 | animation progress__rotate 2s linear infinite 23 | height 80px 24 | position relative 25 | width 80px 26 | 27 | .progress-circular__primary 28 | stroke-dasharray 1,200 29 | stroke-dashoffset 0 30 | animation progress__dash 1.5s ease-in-out infinite 31 | stroke var-progress-circle-color 32 | transition all 1s cubic-bezier(0.4, 0, 0.2, 1); 33 | 34 | .progress-circular--determinate 35 | transform rotate(270deg) 36 | animation none 37 | 38 | .progress-circular--determinate > .progress-circular__primary 39 | animation none 40 | 41 | .progress-circular--determinate > .progress-circular__secondary 42 | animation none 43 | stroke var-progress-circle-secondary-color 44 | 45 | @keyframes progress__rotate { 46 | 100% { 47 | transform rotate(360deg); 48 | } 49 | } 50 | 51 | @keyframes progress__dash { 52 | 0% { 53 | stroke-dasharray 10%, 241.32%; 54 | stroke-dashoffset 0%; 55 | } 56 | 50% { 57 | stroke-dasharray 201%, 50.322%; 58 | stroke-dashoffset -100.0%; 59 | } 60 | 100% { 61 | stroke-dasharray 10%, 241.32%; 62 | stroke-dashoffset -251.32%; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/radio-button.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-radio-button-background-active = rgba(0, 0, 0, 0) 23 | var-radio-button-indicator-color = $highlight-color 24 | 25 | var-radio-button-background = transparent 26 | var-radio-button-border = 3px solid var-radio-button-indicator-color 27 | var-radio-button-size = 24px 28 | 29 | var-material-radio-button-size = 20px 30 | var-material-radio-button-active-color = $material-radio-button-active-color 31 | var-material-radio-button-inactive-color = $material-radio-button-inactive-color 32 | 33 | /*! topdoc 34 | name: Radio Button 35 | class: radio-button 36 | modifiers: 37 | markup: 38 | 43 | 44 | 49 | 50 | 55 | */ 56 | 57 | radio-button() 58 | reset-box-model() 59 | inline-block() 60 | reset-cursor() 61 | reset-font() 62 | hide-input-parent() 63 | 64 | radio-button__label() 65 | inline-block() 66 | reset-cursor() 67 | 68 | radio-button--before() 69 | content '' 70 | position absolute 71 | border-radius 100% 72 | reset-box-model() 73 | 74 | radio-button--after() 75 | content '' 76 | position absolute 77 | border-radius 100% 78 | top 50% 79 | left 50% 80 | transform translate(-50%, -50%) 81 | 82 | radio-button--disabled() 83 | disabled() 84 | 85 | .radio-button__input 86 | hide-input() 87 | height 0px 88 | width 0px 89 | 90 | .radio-button__input:active, 91 | .radio-button__input:focus 92 | outline 0 93 | -webkit-tap-highlight-color rgba(0, 0, 0, 0) 94 | 95 | .radio-button__input:checked + .radio-button__checkmark:after 96 | opacity 1 97 | 98 | .radio-button__input:checked + .radio-button__checkmark:before 99 | background transparent 100 | border none 101 | 102 | .radio-button 103 | radio-button__label() 104 | hide-input-parent() 105 | line-height var-radio-button-size 106 | text-align left 107 | 108 | .radio-button__checkmark:before 109 | radio-button--before() 110 | width var-checkbox-size 111 | height var-checkbox-size 112 | background transparent 113 | border none 114 | border-radius var-checkbox-border-radius 115 | left 0 116 | 117 | .radio-button__checkmark 118 | radio-button() 119 | position relative 120 | width var-radio-button-size 121 | height var-radio-button-size 122 | background var-radio-button-background 123 | pointer-events none 124 | 125 | .radio-button__input:checked + .radio-button__checkmark 126 | background var-radio-button-background-active 127 | 128 | .radio-button__checkmark:after 129 | radio-button--after() 130 | top var-checkmark-top 131 | left var-checkmark-left 132 | opacity 0 133 | width var-checkmark-tail-width 134 | height var-checkmark-foot-height 135 | background transparent 136 | border var-radio-button-border 137 | border-width var-checkmark-border-width 138 | border-top none 139 | border-right none 140 | border-radius var-checkmark-border-radius 141 | transform rotate(-45deg) 142 | 143 | .radio-button__input:disabled + .radio-button__checkmark 144 | radio-button--disabled() 145 | 146 | 147 | /*! topdoc 148 | name: Material Radio Button 149 | use: Radio Button 150 | modifiers: 151 | markup: 152 | 157 | 162 | 167 | 172 | */ 173 | 174 | .radio-button--material 175 | line-height var-material-radio-button-size 176 | material-font() 177 | 178 | .radio-button--material__checkmark 179 | width var-material-radio-button-size 180 | height var-material-radio-button-size 181 | overflow visible 182 | 183 | .radio-button--material__checkmark:before 184 | background transparent 185 | border 2px solid $material-radio-button-inactive-color 186 | border-radius 50% 187 | width var-material-radio-button-size 188 | height var-material-radio-button-size 189 | transition border 0.2s ease 190 | 191 | .radio-button--material__checkmark:after 192 | transition background 0.2s ease, transform 0.2s ease 193 | top 5px 194 | left 5px 195 | width 10px 196 | height 10px 197 | border none 198 | border-radius 50% 199 | transform scale(0) 200 | 201 | .radio-button--material__input:checked + .radio-button__checkmark:before 202 | background transparent 203 | border 2px solid $material-radio-button-active-color 204 | 205 | .radio-button--material__input + .radio-button__checkmark:after 206 | background $material-radio-button-inactive-color 207 | opacity 1 208 | transform scale(0) 209 | 210 | .radio-button--material__input:checked + .radio-button__checkmark:after 211 | opacity 1 212 | background $material-radio-button-active-color 213 | transform scale(1) 214 | 215 | .radio-button--material__input:disabled + .radio-button__checkmark 216 | opacity 1 217 | 218 | .radio-button--material__input:disabled + .radio-button__checkmark:after 219 | background-color #afafaf 220 | border-color #afafaf 221 | 222 | .radio-button--material__input:disabled + .radio-button__checkmark:before 223 | border-color #afafaf 224 | 225 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/range.styl: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2012 Adobe Systems Inc.; 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | */ 15 | 16 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 17 | 18 | // internal variables 19 | var-range-track-background-color = $border-color 20 | var-range-track-background-color-active = $highlight-color 21 | var-range-thumb-background-color = #fff 22 | var-range-thumb-border-color = $border-color 23 | 24 | var-range-border-radius := 3px 25 | var-range-thumb-border := 1px solid var-range-thumb-border-color 26 | var-range-border := none 27 | var-range-track-height := 2px 28 | var-range-thumb-width := var-thumb-size 29 | 30 | var-material-range-track-color = $material-range-track-color 31 | var-material-range-thumb-color = $material-range-thumb-color 32 | 33 | /*! topdoc 34 | name: Range 35 | class: range 36 | modifiers: 37 | :active: Active state 38 | :disabled: Disabled state 39 | :focus: Focused 40 | markup: 41 | 42 | 43 | showcase: 44 |
45 |
46 |

Range

47 |
48 |
49 | 50 |
51 | 52 |
53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 | */ 66 | range() 67 | reset-input() 68 | -webkit-appearance none 69 | 70 | range__thumb() 71 | cursor pointer 72 | 73 | range__thumb--webkit() 74 | cursor pointer 75 | -webkit-appearance none 76 | 77 | range--disabled() 78 | disabled() 79 | 80 | .range 81 | range() 82 | border-radius var-border-radius 83 | border var-range-border 84 | height var-range-track-height 85 | border-radius var-border-radius--large 86 | border-radius var-range-border-radius 87 | background-image linear-gradient(var-range-track-background-color, var-range-track-background-color) 88 | background-position left center 89 | background-size 100% 2px 90 | background-repeat no-repeat 91 | overflow hidden 92 | height 31px 93 | 94 | .range::-moz-range-track 95 | position relative 96 | border none 97 | background-color var-range-track-background-color 98 | height var-range-track-height 99 | border-radius var-round-border 100 | box-shadow none 101 | top 0 102 | margin 0 103 | padding 0 104 | 105 | .range::-ms-track 106 | position relative 107 | border none 108 | background-color var-range-track-background-color 109 | height 0 110 | border-radius var-round-border 111 | 112 | .range::-webkit-slider-thumb 113 | range__thumb--webkit() 114 | position relative 115 | height var-range-thumb-width 116 | width var-range-thumb-width 117 | background-color var-range-thumb-background-color 118 | border var-range-thumb-border 119 | border-radius var-round-border 120 | box-shadow none 121 | top 0 122 | margin 0 123 | padding 0 124 | 125 | .range::-moz-range-thumb 126 | range__thumb() 127 | position relative 128 | height var-range-thumb-width 129 | width var-range-thumb-width 130 | background-color var-range-thumb-background-color 131 | border var-range-thumb-border 132 | border-radius var-round-border 133 | box-shadow none 134 | margin 0 135 | padding 0 136 | 137 | .range::-ms-thumb 138 | range__thumb() 139 | position relative 140 | height var-range-thumb-width 141 | width var-range-thumb-width 142 | background-color var-range-thumb-background-color 143 | border var-range-thumb-border 144 | border-radius var-round-border 145 | box-shadow none 146 | top 0 147 | margin 0 148 | padding 0 149 | 150 | .range::-webkit-slider-thumb:before 151 | position absolute 152 | top 13px 153 | right 28px 154 | left -10000px 155 | height 2px 156 | background-color var-range-track-background-color-active 157 | content '' 158 | margin 0 159 | padding 0 160 | 161 | .range::-ms-fill-lower 162 | height 2px 163 | background-color var-range-track-background-color-active 164 | 165 | .range::-ms-tooltip 166 | display none 167 | 168 | .range:disabled 169 | range--disabled() 170 | 171 | 172 | /*! topdoc 173 | name: Material Range 174 | use: Range 175 | modifiers: 176 | :active: Active state 177 | :disabled: Disabled state 178 | :focus: Focused 179 | markup: 180 | 181 | 182 | */ 183 | 184 | var-material-range-track-height = 2px 185 | var-material-range-thumb-width = 12px 186 | var-material-range-thumb-radius = var-material-range-thumb-width / 2 187 | var-material-range-thumb-vertical-margin = 24px 188 | var-material-range-thumb-horizontal-margin = 2px 189 | 190 | .range--material 191 | background-image linear-gradient(var-material-range-track-color, var-material-range-track-color) 192 | background-position center 193 | background-size 100% 2px 194 | overflow visible 195 | 196 | .range--material::-webkit-slider-thumb 197 | top 1px 198 | border none 199 | height var-material-range-thumb-width + var-material-range-thumb-vertical-margin 200 | width var-material-range-thumb-width + var-material-range-thumb-horizontal-margin 201 | border-radius 0 202 | background-color transparent 203 | background-image radial-gradient(circle var-material-range-thumb-radius at var-material-range-thumb-radius + var-material-range-thumb-horizontal-margin / 2, var-material-range-thumb-color 0%, var-material-range-thumb-color var-material-range-thumb-radius, transparent var-material-range-thumb-radius + 1); 204 | margin-top -1px 205 | 206 | .range--material::-moz-range-thumb 207 | top 1px 208 | border 3px solid var-material-range-track-color 209 | height var-material-range-thumb-width 210 | width var-material-range-thumb-width 211 | border-radius 100% 212 | border-color var-material-range-thumb-color 213 | background-color var-material-range-thumb-color 214 | 215 | .range--material::-moz-range-track 216 | background-color var-material-range-track-color 217 | 218 | .range--material::-ms-thumb 219 | margin-top 1px 220 | border none 221 | height var-material-range-thumb-width 222 | width var-material-range-thumb-width 223 | border-radius 100%; 224 | border-color var-material-range-thumb-color 225 | background-color var-material-range-thumb-color 226 | 227 | .range--material:focus::-moz-range-thumb 228 | border-color var-material-range-thumb-color 229 | background-color var-material-range-thumb-color 230 | 231 | range--material--thumb--before() 232 | display none 233 | 234 | .range--material::-moz-range-thumb:before 235 | range--material--thumb--before() 236 | 237 | .range--material::-webkit-slider-thumb:before 238 | range--material--thumb--before() 239 | 240 | .range--material::-ms-fill-lower 241 | background-color var-material-range-thumb-color 242 | 243 | range--material--thumb--after() 244 | content '' 245 | display block 246 | border 0px 247 | border-radius 100% 248 | height var-material-range-thumb-width 249 | width var-material-range-thumb-width 250 | background-color var-material-range-thumb-color 251 | opacity 0.2 252 | transition transform 0.1s linear 253 | 254 | .range--material::-moz-range-thumb:after 255 | margin-top -3px 256 | margin-left -3px 257 | range--material--thumb--after() 258 | 259 | .range--material::-webkit-slider-thumb:after 260 | margin-top -3px 261 | margin-left -3px 262 | range--material--thumb--after() 263 | display inline-block 264 | margin-left (var-material-range-thumb-horizontal-margin / 2) 265 | margin-top (var-material-range-thumb-vertical-margin / 2) 266 | 267 | .range--material::-ms-fill-upper 268 | margin-top: -6px; 269 | margin-left: -6px; 270 | range--material--thumb--after() 271 | 272 | .range--material:active::-webkit-slider-thumb:after 273 | transform scale(2.5) 274 | 275 | .range--material:active::-moz-range-thumb:after 276 | transform scale(2.5) 277 | 278 | .range--material:active::-ms-fill-upper 279 | transform scale(2.5) 280 | 281 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/search-input.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-search-icon = url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDFweCcgaGVpZ2h0PSc0MHB4JyB2aWV3Qm94PScwIDAgNDEgNDAnIHZlcnNpb249JzEuMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycgeG1sbnM6c2tldGNoPSdodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMnPjx0aXRsZT5TbGljZSAxPC90aXRsZT48ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+PGRlZnM+PC9kZWZzPjxnIGlkPSdQYWdlIDEnIHN0cm9rZT0nbm9uZScgc3Ryb2tlLXdpZHRoPScxJyBmaWxsPSdub25lJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnPjxnIGlkPSdzZWFyY2gnIGZpbGw9JyNDNkM4QzgnPjxwYXRoIGQ9J00wLjUwNCwxNi4zMzggQzAuNTA0LDI1LjA4NSA3LjYzNSwzMi4xNjUgMTYuNDQ0LDMyLjE2NSBDMjUuMjQsMzIuMTY1IDMyLjM4MiwyNS4wODUgMzIuMzgyLDE2LjMzOCBDMzIuMzgyLDcuNTkxIDI1LjI0LDAuNSAxNi40NDQsMC41IEM3LjYzNSwwLjUgMC41MDQsNy41OTEgMC41MDQsMTYuMzM4IEwwLjUwNCwxNi4zMzggWiBNNS41NTUsMTYuMzM4IEM1LjU1NSwxMC4zNTkgMTAuNDIzLDUuNTIxIDE2LjQ0NSw1LjUyMSBDMjIuNDU1LDUuNTIxIDI3LjMzMywxMC4zNiAyNy4zMzMsMTYuMzM4IEMyNy4zMzMsMjIuMzE3IDIyLjQ1NSwyNy4xNTYgMTYuNDQ1LDI3LjE1NiBDMTAuNDIzLDI3LjE1NiA1LjU1NSwyMi4zMTYgNS41NTUsMTYuMzM4IEw1LjU1NSwxNi4zMzggWiBNMjcuNjY2LDMwLjg2MSBMMzQuNTIxLDM4LjY3IEMzNS42MjUsMzkuNzcyIDM2LjMzOCwzOS43ODEgMzcuNDYsMzguNjcgTDM5LjY2MSwzNi40ODkgQzQwLjc0MywzNS40MDggNDAuODExLDM0LjcxMSAzOS42NjEsMzMuNTY4IEwzMS43NjUsMjYuNzkzIEwyNy42NjYsMzAuODYxIEwyNy42NjYsMzAuODYxIFogTTI3LjY2NiwzMC44NjEnIGlkPSdTaGFwZSc+PC9wYXRoPjwvZz48L2c+PC9zdmc+"); 23 | var-search-input-background-image = var-search-icon 24 | var-search-input-background-color = var-input-bg-color 25 | var-search-input-color = var-input-text-color 26 | var-search-input-border = 1px solid var-input-border-color 27 | var-search-decoration-margin-right = 0px 28 | var-search-input-border-radius = 4px 29 | var-search-input-height = 31px 30 | var-search-input-font-size = 15px 31 | 32 | /*! topdoc 33 | name: Search Input 34 | class: search-input 35 | modifiers: 36 | :disabled: Disabled state 37 | markup: 38 | 39 | */ 40 | 41 | search-input() 42 | reset-input() 43 | reset-font() 44 | -webkit-appearance none 45 | 46 | input[type="search"].search-input::-webkit-search-cancel-button 47 | -webkit-appearance none 48 | display none 49 | 50 | search-input--disabled() 51 | disabled() 52 | 53 | .search-input 54 | search-input() 55 | box-sizing border-box 56 | height var-search-input-height 57 | font-size var-search-input-font-size 58 | border var-search-input-border 59 | background-color var-search-input-background-color 60 | box-shadow var-box-shadow--text-input 61 | color var-search-input-color 62 | padding 4px 0 0 28px 63 | border-radius var-search-input-border-radius 64 | background-image var-search-input-background-image 65 | background-position 8px center 66 | background-repeat no-repeat 67 | background-size var-font-size 68 | font-weight var-font-weight 69 | display block 70 | width 100% 71 | 72 | .search-input:focus 73 | background-color var-search-input-background-color 74 | color var-search-input-color 75 | border var-search-input-border 76 | box-shadow var-box-shadow--text-input 77 | 78 | .search-input::-webkit-search-cancel-button, 79 | .search-input::-webkit-search-decoration 80 | margin-right var-search-decoration-margin-right 81 | 82 | .search-input::-webkit-input-placeholder 83 | color var-input-placeholder-color 84 | 85 | .search-input::-moz-placeholder 86 | color var-input-placeholder-color 87 | 88 | .search-input::-ms-input-placeholder 89 | color var-input-placeholder-color 90 | 91 | .search-input:-ms-input-placeholder 92 | color var-input-placeholder-color 93 | 94 | .search-input:disabled 95 | search-input--disabled() 96 | 97 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/switch.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | 20 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 21 | 22 | // internal variables 23 | var-switch-background-color = $border-color 24 | var-switch-checked-background-color = $switch-highlight-color // background color active 25 | var-switch-thumb-background-color = white 26 | var-switch-thumb-border-color = $border-color 27 | var-switch-thumb-border-color-active = $switch-highlight-color 28 | var-switch-height = 32px 29 | var-switch-width = 51px 30 | 31 | var-material-switch-active-thumb-color = $material-switch-active-thumb-color 32 | var-material-switch-active-background-color = $material-switch-active-background-color 33 | var-material-switch-inactive-thumb-color = $material-switch-inactive-thumb-color 34 | var-material-switch-inactive-background-color = $material-switch-inactive-background-color 35 | 36 | /*! topdoc 37 | name: Switch 38 | class: switch 39 | modifiers: 40 | :focus: Focus state 41 | :disabled: Disabled state 42 | markup: 43 | 47 | 51 | 55 | */ 56 | 57 | switch() 58 | inline-block() 59 | reset-box-model() 60 | hide-input-parent() 61 | min-width 51px 62 | 63 | switch__toggle() 64 | inline-block() 65 | reset-box-model() 66 | reset-base() 67 | reset-cursor() 68 | 69 | .switch 70 | switch() 71 | font-size var-font-size 72 | padding 0 20px 73 | border none 74 | overflow visible 75 | width var-switch-width 76 | height var-switch-height 77 | z-index 0 78 | text-align left 79 | 80 | .switch__input 81 | hide-input() 82 | width var-switch-width 83 | height 44px 84 | margin-top -((44px-(var-switch-height))/2px) 85 | top 0px 86 | left 0px 87 | transition all 0.2s linear 88 | 89 | // switch toggle background 90 | .switch__toggle 91 | background-color #fff 92 | position absolute 93 | top 0px 94 | left 0px 95 | right 0px 96 | bottom 0px 97 | border-radius 30px 98 | transition-property all 99 | transition-duration 0.35s 100 | transition-timing-function ease-out 101 | box-shadow inset 0 0 0 2px #e5e5e5 102 | 103 | // switch toggle circle 104 | .switch__toggle:before 105 | reset-box-model() 106 | position absolute 107 | content '' 108 | border-radius 28px 109 | height 28px 110 | width 28px 111 | background-color var-switch-thumb-background-color 112 | left 2px 113 | top 2px 114 | transition-property all 115 | transition-duration 0.35s 116 | transition-timing-function cubic-bezier(.59,.01,.5,.99) 117 | box-shadow 0 0 0 1px #E4E4E4, 0 3px 2px rgba(0,0,0,0.25) 118 | 119 | .switch__input:checked + .switch__toggle 120 | box-shadow inset 0 0 0 2px var-switch-checked-background-color 121 | background-color var-switch-checked-background-color 122 | 123 | .switch__input:checked + .switch__toggle:before 124 | transform translateX(20px) 125 | box-shadow 0 3px 2px rgba(0,0,0,0.25) 126 | 127 | .switch__input:not(:checked) + .switch__toggle:before 128 | transform translateX(-1px) 129 | 130 | .switch__input:disabled + .switch__toggle 131 | disabled() 132 | 133 | /*! topdoc 134 | name: Material Switch 135 | use: Switch 136 | modifiers: 137 | :focus: Focus state 138 | :disabled: Disabled state 139 | markup: 140 | 144 | 148 | 152 | */ 153 | 154 | .switch--material 155 | width 36px 156 | height 24px 157 | padding 0 10px 158 | min-width 36px 159 | 160 | .switch--material__toggle 161 | background-color var-material-switch-inactive-background-color 162 | margin-top 5px 163 | height 14px 164 | box-shadow none 165 | 166 | .switch--material__input 167 | hide-input() 168 | 169 | .switch--material__input:checked + .switch--material__toggle:before 170 | transform translateX(16px) 171 | 172 | // switch toggle circle 173 | .switch--material__toggle:before 174 | background-color var-material-switch-active-thumb-color 175 | left 0px 176 | margin-top -5px 177 | width 20px 178 | height 20px 179 | shadow-2() 180 | 181 | .switch--material__input:checked + .switch--material__toggle 182 | background-color var-material-switch-active-background-color 183 | box-shadow none 184 | 185 | .switch--material__input:not(:checked) + .switch--material__toggle:before 186 | background-color var-material-switch-inactive-thumb-color 187 | shadow-1() 188 | transform translateX(0px) 189 | 190 | .switch--material__input:disabled + .switch--material__toggle 191 | disabled() 192 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/tab-bar.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-tab-bar-background-color = $tabbar-background-color // Background color 23 | var-tab-bar-border-color = $tabbar-border-color // Separator 24 | var-tab-bar-button-color = $tabbar-text-color // Text color 25 | var-tab-bar-active-color = $tabbar-highlight-text-color // Text color active 26 | var-material-tab-bar-background-color = $material-tabbar-background-color 27 | var-material-tab-bar-text-color = $material-tabbar-text-color 28 | var-material-tab-bar-current-color = $material-tabbar-highlight-text-color 29 | var-material-tab-bar-highlight-color = $material-tabbar-highlight-color 30 | 31 | var-tab-bar-active-border-top = none 32 | var-tab-bar-focus-border-top = none 33 | var-tab-bar-height = 49px 34 | var-tab-bar-button-line-height = 49px 35 | var-tab-bar-button-border = none 36 | var-tab-bar-active-box-shadow = none 37 | var-tab-bar-button-focus-box-shadow = none 38 | var-tab-bar-border-top = 1px solid var-tab-bar-border-color 39 | 40 | /*! topdoc 41 | name: Icon Tab Bar 42 | class: tab-bar 43 | use: Tab Bar 44 | modifiers: 45 | :disabled: Disabled state 46 | markup: 47 | 48 |
49 | 56 | 57 | 64 | 65 | 72 |
73 | */ 74 | 75 | /*! topdoc 76 | name: Tab Bar 77 | class: tab-bar 78 | modifiers: 79 | :disabled: Disabled state 80 | markup: 81 |
82 | 88 | 89 | 95 | 96 | 102 |
103 | */ 104 | 105 | retina-tabbar-border(color = var-tab-bar-border-color, border-position = top) 106 | +retina-query() 107 | border-{border-position} none 108 | background-size 100% 1px 109 | background-repeat no-repeat 110 | background-position border-position 111 | background-image linear-gradient(0deg, color, color 50%, transparent 50%) if border-position == 'bottom' 112 | background-image linear-gradient(180deg, color, color 50%, transparent 50%) if border-position == 'top' 113 | 114 | .tab-bar 115 | reset-font() 116 | display table 117 | table-layout fixed 118 | position absolute 119 | bottom 0px 120 | left 0px 121 | right 0px 122 | white-space nowrap 123 | margin 0 124 | padding 0 125 | height var-tab-bar-height 126 | background-color var-tab-bar-background-color 127 | border-top var-tab-bar-border-top 128 | width 100% 129 | retina-tabbar-border(var-tab-bar-border-color) 130 | 131 | .tab-bar__item 132 | reset-font() 133 | hide-input-parent() 134 | display table-cell 135 | width auto 136 | border-radius 0 137 | 138 | .tab-bar__item > input 139 | hide-input() 140 | 141 | .tab-bar__button 142 | inline-block() 143 | reset-font() 144 | reset-box-model() 145 | reset-base() 146 | reset-cursor() 147 | ellipsis() 148 | text-decoration none 149 | padding 0 150 | height var-tab-bar-button-line-height 151 | letter-spacing var-letter-spacing 152 | color var-tab-bar-button-color 153 | text-shadow var-text-shadow 154 | vertical-align top 155 | background-color transparent 156 | box-shadow var-box-shadow 157 | border-top var-tab-bar-button-border 158 | width 100% 159 | font-weight var-font-weight 160 | line-height var-tab-bar-button-line-height 161 | +retina-query() 162 | border-top none 163 | 164 | .tab-bar__icon 165 | font-size 24px 166 | padding 0 167 | margin 0 168 | line-height 32px 169 | display block 170 | height 32px 171 | 172 | .tab-bar__label 173 | reset-font() 174 | 175 | .tab-bar__icon + .tab-bar__label 176 | font-size 10px 177 | line-height 1 178 | margin 0 179 | font-weight var-font-weight 180 | 181 | .tab-bar__label:first-child 182 | font-size 16px 183 | line-height var-tab-bar-button-line-height 184 | margin 0 185 | padding 0 186 | 187 | .tab-bar__button 188 | color var-tab-bar-button-color 189 | 190 | :checked + .tab-bar__button 191 | color var-tab-bar-active-color 192 | background-color transparent 193 | box-shadow var-tab-bar-active-box-shadow 194 | border-top var-tab-bar-active-border-top 195 | 196 | .tab-bar__button:disabled 197 | disabled() 198 | 199 | .tab-bar__button:focus 200 | z-index 1 201 | border-top var-tab-bar-focus-border-top 202 | box-shadow var-tab-bar-button-focus-box-shadow 203 | outline 0 204 | 205 | .tab-bar__content 206 | position absolute 207 | top 0 208 | left 0 209 | right 0 210 | bottom var-tab-bar-height 211 | z-index 0 212 | 213 | /*! topdoc 214 | name: Icon Only Tab Bar 215 | use: Tab Bar 216 | class: tab-bar 217 | hint: .tab-bar .fa 218 | modifiers: 219 | :disabled: Disabled state 220 | markup: 221 | 222 |
223 | 229 | 230 | 236 | 237 | 243 | 244 |
245 | */ 246 | 247 | /*! topdoc 248 | name: Top Tab Bar 249 | class: tab-bar--top 250 | use: Tab Bar 251 | markup: 252 |
253 | 259 | 260 | 266 | 267 | 273 |
274 | */ 275 | 276 | .tab-bar--top 277 | position relative 278 | top 0px 279 | left 0px 280 | right 0px 281 | bottom auto 282 | border-top none 283 | border-bottom var-tab-bar-border-top 284 | retina-tabbar-border(var-tab-bar-border-color, bottom) 285 | 286 | .tab-bar--top__content 287 | top var-tab-bar-height 288 | left 0 289 | right 0 290 | bottom 0 291 | z-index 0 292 | 293 | /*! topdoc 294 | name: Bordered Top Tab Bar 295 | class: tab-bar--top-border 296 | use: Top Tab Bar 297 | markup: 298 |
299 | 305 | 306 | 312 | 313 | 319 |
320 | */ 321 | 322 | /*! topdoc 323 | name: Material Tab Bar 324 | class: tab-bar--material 325 | use: Top Tab Bar 326 | markup: 327 |
328 | 334 | 335 | 341 | 342 | 348 | 349 | 355 | 356 |
357 | */ 358 | 359 | .tab-bar--top-border__button 360 | background-color transparent 361 | border-bottom 4px solid transparent 362 | 363 | :checked + .tab-bar--top-border__button 364 | background-color transparent 365 | border-bottom 4px solid var-tab-bar-active-color 366 | 367 | .tab-bar--material 368 | background-color var-material-tab-bar-background-color 369 | border-bottom-width 0px 370 | box-shadow 0 4px 2px -2px rgba(0,0,0,0.14), 0 3px 5px -2px rgba(0,0,0,0.12), 0 5px 1px -4px rgba(0,0,0,0.2) 371 | 372 | .tab-bar--material__button 373 | background-color transparent 374 | color var-material-tab-bar-text-color 375 | text-transform uppercase 376 | font-size 14px 377 | font-weight 500 378 | material-font() 379 | 380 | .tab-bar--material__button:after 381 | content '' 382 | display block 383 | width 0px 384 | height 2px 385 | bottom 0px 386 | position absolute 387 | margin-top -2px 388 | background-color var-material-tab-bar-current-color 389 | 390 | :checked + .tab-bar--material__button:after 391 | width 100% 392 | transition width 0.2s ease-in-out 393 | 394 | :checked + .tab-bar--material__button 395 | background-color transparent 396 | color var-material-tab-bar-current-color 397 | 398 | .tab-bar--material__item:active 399 | background-color var-material-tab-bar-highlight-color 400 | 401 | /*! topdoc 402 | name: Material Tab Bar (Icon only) 403 | class: tab-bar--material__icon 404 | use: Material Tab Bar 405 | markup: 406 |
407 | 413 | 414 | 420 | 421 | 427 |
428 | */ 429 | 430 | .tab-bar--material__icon 431 | font-size 22px 432 | line-height 36px 433 | 434 | /*! topdoc 435 | name: Material Tab Bar (Icon and Label) 436 | class: tab-bar--material__label 437 | use: Material Tab Bar 438 | markup: 439 |
440 | 447 | 448 | 455 | 456 | 463 |
464 | */ 465 | 466 | .tab-bar--material__label 467 | material-font() 468 | 469 | .tab-bar--material__label:first-child 470 | material-font() 471 | letter-spacing 0.015em 472 | font-weight 500 473 | font-size 14px 474 | 475 | .tab-bar--material__icon + .tab-bar--material__label 476 | font-size 10px 477 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/text-input.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-text-input-font-size = 15px 23 | var-text-input-height = 31px 24 | var-text-input-border-color = var-input-border-color 25 | var-text-highlight-color = $highlight-color // material 26 | 27 | var-material-text-input-font-size = 16px 28 | var-material-text-input-color = $material-text-input-text-color 29 | var-material-text-input-active-color = $material-text-input-active-color 30 | var-material-text-input-inactive-color = $material-text-input-inactive-color 31 | 32 | /*! topdoc 33 | name: Text Input 34 | class: text-input 35 | modifiers: 36 | :disabled: Disabled state 37 | :focus: Focused 38 | :invalid: Hover state 39 | markup: 40 | 41 |
42 | 43 | */ 44 | 45 | input() 46 | reset-input() 47 | reset-font() 48 | 49 | input--disabled() 50 | disabled() 51 | 52 | text-input() 53 | input() 54 | letter-spacing var-letter-spacing 55 | border var-input-border 56 | border-radius var-border-radius 57 | background-color var-input-bg-color 58 | box-shadow var-box-shadow--text-input 59 | color var-input-text-color 60 | padding 4px 8px 0 8px 61 | margin 0 62 | font-size var-text-input-font-size 63 | height var-text-input-height 64 | font-weight var-font-weight 65 | box-sizing border-box 66 | 67 | text-input--disabled() 68 | input--disabled() 69 | 70 | webkit-input-placeholder() 71 | color var-input-placeholder-color 72 | 73 | text-input--invalid() 74 | border 1px solid var-input-invalid-border-color 75 | color var-input-invalid-text-color 76 | 77 | .text-input 78 | text-input() 79 | 80 | .text-input::-webkit-input-placeholder 81 | color var-input-placeholder-color 82 | 83 | .text-input::-moz-placeholder 84 | color var-input-placeholder-color 85 | 86 | .text-input::-ms-input-placeholder 87 | color var-input-placeholder-color 88 | 89 | .text-input:-ms-input-placeholder 90 | color var-input-placeholder-color 91 | 92 | .text-input:disabled 93 | text-input--disabled() 94 | 95 | .text-input:disabled::-webkit-input-placeholder 96 | webkit-input-placeholder() 97 | 98 | .text-input:disabled::-moz-placeholder 99 | webkit-input-placeholder() 100 | 101 | .text-input:disabled::-ms-input-placeholder 102 | webkit-input-placeholder() 103 | 104 | .text-input:disabled:-ms-input-placeholder 105 | webkit-input-placeholder() 106 | 107 | .text-input::-ms-clear 108 | display none 109 | 110 | .text-input:invalid 111 | text-input--invalid() 112 | 113 | /*! topdoc 114 | name: Transparent Text Input 115 | class: text-input--transparent 116 | markup: 117 | 118 |
119 | 120 | */ 121 | 122 | .text-input--transparent 123 | text-input() 124 | border none 125 | background-color transparent 126 | padding-left 0 127 | padding-right 0 128 | 129 | .text-input--transparent:disabled 130 | text-input--disabled() 131 | border none 132 | background-color transparent 133 | 134 | 135 | text-input-transparent-disabled() 136 | webkit-input-placeholder() 137 | border none 138 | background-color transparent 139 | 140 | .text-input--transparent:disabled::-webkit-input-placeholder 141 | text-input-transparent-disabled() 142 | 143 | .text-input--transparent:disabled::-moz-placeholder 144 | text-input-transparent-disabled() 145 | 146 | .text-input--transparent:disabled::-ms-input-placeholder 147 | text-input-transparent-disabled() 148 | 149 | .text-input--transparent:disabled:-ms-input-placeholder 150 | text-input-transparent-disabled() 151 | 152 | 153 | .text-input--transparent:invalid 154 | text-input--invalid() 155 | border none 156 | background-color transparent 157 | 158 | /*! topdoc 159 | name: Underbar Text Input 160 | class: text-input--underbar 161 | markup: 162 | 163 |
164 | 165 | */ 166 | 167 | .text-input--underbar 168 | text-input() 169 | border none 170 | background-color transparent 171 | border-bottom 1px solid var-text-input-border-color 172 | border-radius 0px 173 | 174 | .text-input--underbar:disabled 175 | text-input--disabled() 176 | border none 177 | background-color transparent 178 | border-bottom 1px solid var-text-input-border-color 179 | 180 | text-input-underbar-disabled() 181 | webkit-input-placeholder() 182 | border none 183 | background-color transparent 184 | 185 | .text-input--underbar:disabled::-webkit-input-placeholder 186 | text-input-underbar-disabled() 187 | 188 | .text-input--underbar:disabled::-moz-placeholder 189 | text-input-underbar-disabled() 190 | 191 | .text-input--underbar:disabled::-ms-input-placeholder 192 | text-input-underbar-disabled() 193 | 194 | .text-input--underbar:disabled:-ms-input-placeholder 195 | text-input-underbar-disabled() 196 | 197 | 198 | .text-input--underbar:invalid 199 | text-input--invalid() 200 | border none 201 | background-color transparent 202 | border-bottom 1px solid var-input-invalid-border-color 203 | 204 | 205 | /*! topdoc 206 | name: Material Input 207 | class: text-input--material 208 | markup: 209 | 210 | 211 |

212 | 213 | 214 | */ 215 | 216 | .text-input--material 217 | input() 218 | material-font() 219 | color var-material-text-input-color 220 | background-image linear-gradient(to top, transparent 1px, var-material-text-input-inactive-color 1px) 221 | background-size 100% 2px 222 | background-repeat no-repeat 223 | background-position center bottom 224 | background-color transparent 225 | font-size var-material-text-input-font-size 226 | font-weight 400 227 | border none 228 | padding-bottom 2px 229 | border-radius 0 230 | height 24px 231 | -webkit-transform translate3d(0, 0, 0) // prevent ios flicker 232 | 233 | .text-input--material__label 234 | color var-material-text-input-active-color 235 | 236 | .text-input--material:focus 237 | background-image linear-gradient(var-material-text-input-active-color, var-material-text-input-active-color), linear-gradient(to top, transparent 1px, var-material-text-input-inactive-color 1px) 238 | animation material-text-input-animate 0.3s forwards 239 | 240 | text-input--material-placeholder() 241 | color var-material-text-input-inactive-color 242 | line-height 20px 243 | 244 | .text-input--material::-webkit-input-placeholder 245 | text-input--material-placeholder() 246 | 247 | .text-input--material::-moz-placeholder 248 | text-input--material-placeholder() 249 | 250 | .text-input--material::-ms-input-placeholder 251 | text-input--material-placeholder() 252 | 253 | .text-input--material:-ms-input-placeholder 254 | text-input--material-placeholder() 255 | 256 | .text-input--material::-ms-clear 257 | display none 258 | 259 | @keyframes material-text-input-animate 260 | 0% 261 | background-size 0% 2px, 100% 2px 262 | 100% 263 | background-size 100% 2px, 100% 2px 264 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/textarea.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 20 | 21 | // internal variables 22 | var-textarea-color = var-input-text-color 23 | var-textarea-border = 1px solid var-input-border-color 24 | var-textarea-padding = 5px 5px 5px 5px 25 | var-textarea-box-shadow = none 26 | 27 | /*! topdoc 28 | name: Textarea 29 | class: textarea 30 | modifiers: 31 | :disabled: Disabled state 32 | markup: 33 | 34 | showcase: 35 | */ 36 | 37 | .textarea 38 | reset-box-model() 39 | reset-base() 40 | reset-font() 41 | vertical-align top 42 | resize none 43 | outline none 44 | padding var-textarea-padding 45 | font-size var-text-input-font-size 46 | font-weight var-font-weight 47 | border-radius var-border-radius 48 | border var-textarea-border 49 | background-color var-input-bg-color 50 | color var-textarea-color 51 | letter-spacing var-letter-spacing 52 | box-shadow var-textarea-box-shadow 53 | -webkit-appearance none 54 | width 100% 55 | 56 | .textarea:disabled 57 | disabled() 58 | 59 | .textarea::-webkit-input-placeholder, 60 | .textarea::-moz-placeholder, 61 | .textarea:-ms-input-placeholder 62 | color var-input-placeholder-color 63 | 64 | /*! topdoc 65 | name: Textarea Transparent 66 | class: textarea--transparent 67 | modifiers: 68 | :disabled: Disabled state 69 | markup: 70 | 71 | showcase: 72 | */ 73 | 74 | .textarea--transparent 75 | reset-box-model() 76 | reset-base() 77 | reset-font() 78 | vertical-align top 79 | resize none 80 | outline none 81 | padding var-textarea-padding 82 | padding-left 0 83 | padding-right 0 84 | font-size var-text-input-font-size 85 | font-weight var-font-weight 86 | border-radius var-border-radius 87 | border none 88 | background-color transparent 89 | color var-textarea-color 90 | letter-spacing var-letter-spacing 91 | box-shadow var-textarea-box-shadow 92 | -webkit-appearance none 93 | width 100% 94 | 95 | .textarea--transparent:disabled 96 | disabled() 97 | 98 | .textarea--transparent::-webkit-input-placeholder, 99 | .textarea--transparent::-moz-placeholder, 100 | .textarea--transparent:-ms-input-placeholder 101 | color var-input-placeholder-color 102 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/toolbar-button.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Copyright 2012 Adobe Systems Inc.; 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | * 17 | */ 18 | 19 | // internal variables 20 | var-toolbar-button-color = $toolbar-button-color 21 | var-toolbar-button-background-color = rgba(0, 0, 0, 0) 22 | var-toolbar-button-border-color = $toolbar-button-color 23 | var-toolbar-button-border-radius = 2px 24 | var-toolbar-button-padding = 4px 10px 25 | var-toolbar-button-active-background-color = var-toolbar-button-background-color 26 | var-toolbar-button-border = 1px solid var-toolbar-button-border-color 27 | 28 | var-material-toolbar-button-color = $material-toolbar-button-color 29 | var-material-toolbar-button-active-color = $material-toolbar-button-active-color 30 | 31 | // NOTE: You can't use @extend that break component independent and topdoc parsing. 32 | 33 | /*! topdoc 34 | name: Toolbar Button 35 | class: toolbar-button 36 | modifiers: 37 | :active: Active state 38 | :disabled: Disabled state 39 | :focus: Focused 40 | markup: 41 | 42 | 45 | 46 | 49 | */ 50 | 51 | .toolbar-button 52 | reset-font() 53 | padding var-toolbar-button-padding 54 | letter-spacing var-letter-spacing 55 | color var-toolbar-button-color 56 | text-shadow var-text-shadow 57 | background-color var-toolbar-button-background-color 58 | border-radius var-toolbar-button-border-radius 59 | border 1px solid transparent 60 | font-weight var-font-weight 61 | font-size var-font-size 62 | transition none 63 | 64 | .toolbar-button:active 65 | background-color var-toolbar-button-active-background-color 66 | transition none 67 | opacity 0.2 68 | 69 | .toolbar-button:disabled, 70 | .toolbar-button[disabled] 71 | disabled() 72 | 73 | .toolbar-button:focus 74 | outline 0 75 | transition none 76 | 77 | .toolbar-button:hover 78 | transition none 79 | 80 | .toolbar-button--outline 81 | @extend .toolbar-button 82 | border var-toolbar-button-border 83 | margin auto 8px 84 | padding-left 6px 85 | padding-right 6px 86 | 87 | .toolbar-button--outline:hover 88 | @extend .toolbar-button:hover 89 | 90 | .toolbar-button--outline:active 91 | @extend .toolbar-button:active 92 | 93 | .toolbar-button--outline:focus 94 | @extend .toolbar-button:focus 95 | 96 | .toolbar-button--quiet 97 | @extend .toolbar-button 98 | 99 | .toolbar-button--quiet:hover 100 | @extend .toolbar-button:hover 101 | 102 | .toolbar-button--quiet:active 103 | @extend .toolbar-button:active 104 | 105 | .toolbar-button--quiet:focus 106 | @extend .toolbar-button:focus 107 | 108 | .toolbar-button--material 109 | font-size 22px 110 | color var-material-toolbar-button-color 111 | display inline-block 112 | padding 0 12px 113 | height 100% 114 | margin 0 115 | border none 116 | border-radius 0 117 | vertical-align initial 118 | 119 | .toolbar-button--material:first-of-type { 120 | margin-left 4px 121 | } 122 | 123 | .toolbar-button--material:last-of-type { 124 | margin-right 4px 125 | } 126 | 127 | .toolbar-button--material:active 128 | opacity 1 129 | background-color var-material-toolbar-button-active-color 130 | 131 | .back-button 132 | height 44px 133 | line-height 44px 134 | padding-left 8px 135 | color var-toolbar-button-color 136 | background-color var-toolbar-button-background-color 137 | 138 | .back-button:active 139 | opacity 0.2 140 | 141 | .back-button__label 142 | display inline-block 143 | height 100% 144 | vertical-align top 145 | margin-left 12px 146 | 147 | .back-button__icon 148 | display inline-block 149 | height 100% 150 | vertical-align top 151 | 152 | .back-button__icon:before 153 | font-family 'Ionicons' 154 | content '\f3cf' 155 | font-size 32px 156 | 157 | .back-button--material 158 | font-size 22px 159 | color var-material-toolbar-button-color 160 | display inline-block 161 | padding 0 12px 162 | height 100% 163 | margin 0 0 0 4px 164 | border none 165 | border-radius 0 166 | vertical-align initial 167 | line-height 56px 168 | 169 | .back-button--material__label 170 | display none 171 | font-size 20px 172 | 173 | .back-button--material__icon:before 174 | font-family 'Material-Design-Iconic-Font' 175 | content: '\f2ea' 176 | font-size 26px 177 | 178 | .back-button--material:active 179 | opacity 1 180 | background-color var-material-toolbar-button-active-color 181 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/components/util.styl: -------------------------------------------------------------------------------- 1 | 2 | reset-font() 3 | font-family 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif 4 | -webkit-font-smoothing antialiased 5 | -moz-osx-font-smoothing grayscale 6 | font-weight var-font-weight 7 | font-size var-font-size 8 | 9 | reset-base() 10 | padding 0 11 | margin 0 12 | font inherit 13 | color inherit 14 | background transparent 15 | border none 16 | line-height normal 17 | 18 | reset-list() 19 | padding 0 20 | margin 0 21 | list-style-type none 22 | text-align left 23 | 24 | reset-quiet() 25 | background transparent 26 | border 1px solid transparent 27 | box-shadow none 28 | 29 | reset-input() 30 | reset-base() 31 | reset-box-model() 32 | vertical-align top 33 | outline none 34 | line-height 1 35 | 36 | hide-input() 37 | position absolute 38 | overflow hidden 39 | right 0px 40 | top 0px 41 | left 0px 42 | bottom 0px 43 | padding 0 44 | border 0 45 | opacity 0.001 46 | z-index 1 47 | vertical-align top 48 | outline none 49 | width 100% 50 | height 100% 51 | margin 0 52 | -webkit-appearance none 53 | appearance none 54 | 55 | hide-input-parent() 56 | position relative 57 | overflow hidden 58 | 59 | reset-cursor() 60 | cursor default 61 | user-select none 62 | 63 | reset-box-model() 64 | box-sizing border-box 65 | background-clip padding-box 66 | 67 | reset-overflow() 68 | white-space nowrap 69 | overflow hidden 70 | 71 | reset-container() 72 | reset-box-model() 73 | reset-overflow() 74 | word-spacing 0 75 | 76 | inline-block() 77 | position relative 78 | display inline-block 79 | vertical-align top 80 | 81 | ellipsis() 82 | text-overflow ellipsis 83 | reset-overflow() 84 | 85 | disabled() 86 | opacity 0.3 87 | cursor default 88 | pointer-events none 89 | 90 | reset-ui() 91 | reset-box-model() 92 | inline-block() 93 | reset-base() 94 | reset-cursor() 95 | ellipsis() 96 | 97 | retina-query() 98 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) 99 | {block} 100 | 101 | material-font() 102 | font-family 'Roboto', 'Noto', sans-serif 103 | -webkit-font-smoothing antialiased 104 | -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/dark-theme.styl: -------------------------------------------------------------------------------- 1 | $background-color = #242424 2 | $material-background-color = #333333 3 | $text-color = #fff 4 | $sub-text-color = #87888f 5 | $highlight-color = #3d74ff 6 | $second-highlight-color = #5494d1 7 | $border-color = #424242 8 | $toolbar-background-color = #1a1a1a 9 | $toolbar-button-color = #aaa 10 | $toolbar-text-color = #fff 11 | $toolbar-border-color = rgba(0,0,0,.0) 12 | $buttonbar-color = #ddd 13 | $buttonbar-active-text-color = #2e2f33 14 | $list-background-color = rgba(0,0,0,.0) 15 | $list-header-background-color = #3e3f42 16 | $list-tap-active-background-color = #47484d 17 | $tabbar-background-color = #1a1a1a 18 | $tabbar-text-color = #bdbdbd 19 | $tabbar-highlight-text-color = #549eff 20 | $tabbar-border-color = rgba(0,0,0,.0) 21 | $switch-highlight-color = #3385ff 22 | $modal-background-color = rgba(0, 0, 0, 0.7) 23 | $modal-text-color = #fff 24 | $alert-dialog-background-color = #f4f4f4 25 | $alert-dialog-text-color = #1f1f21 26 | $alert-dialog-button-color = #3d74ff 27 | $alert-dialog-separator-color = #ddd 28 | $dialog-background-color = #f4f4f4 29 | $popover-background-color = black 30 | $popover-text-color = white 31 | $notification-background-color = #3385ff 32 | $material-switch-active-thumb-color = #80cbc4 33 | $material-switch-inactive-thumb-color = #bdbdbd 34 | $material-switch-active-background-color = #5a7f7c 35 | $material-switch-inactive-background-color = #707070 36 | $material-range-track-color = #707070 37 | $material-range-thumb-color = #80cbc4 38 | $material-toolbar-background-color = #009688 39 | $material-toolbar-text-color = #ffffff 40 | $material-toolbar-button-color = #ffffff 41 | $material-toolbar-button-active-color = #26a69a 42 | $material-button-background-color = #80cbc4 43 | $material-button-text-color = #ffffff 44 | $material-checkbox-active-color = #009688 45 | $material-checkbox-inactive-color = #f5f5f5 46 | $material-checkbox-checkmark-color = #333333 47 | $material-radio-button-active-color = #009688 48 | $material-radio-button-inactive-color = #f5f5f5 49 | $material-text-input-text-color = #ffffff 50 | $material-text-input-active-color = #009688 51 | $material-text-input-inactive-color = #4c4c4c 52 | $material-dialog-background-color = #333333 53 | $material-alert-dialog-background-color = #333333 54 | $material-alert-dialog-title-color = #ffffff 55 | $material-alert-dialog-content-color = #afafaf 56 | $material-alert-dialog-button-color = #80cbc4 57 | $material-progress-bar-primary-color = #009688 58 | $material-progress-bar-secondary-color = #80cbc4 59 | $material-progress-bar-background-color = #333333 60 | $material-progress-circle-primary-color = #009688 61 | $material-progress-circle-secondary-color = #80cbc4 62 | $material-tabbar-background-color = #009688 63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6) 64 | $material-tabbar-highlight-text-color = #ffffff 65 | $material-tabbar-highlight-color = #26a69a 66 | $fab-text-color = #fafafa 67 | $fab-background-color = #80cbc4 68 | 69 | @import 'components' -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/purple-theme.styl: -------------------------------------------------------------------------------- 1 | $background-color = #f3f3f3 2 | $material-background-color = #fafafa 3 | $text-color = #524b57 4 | $sub-text-color = #ccc 5 | $highlight-color = #8962ed 6 | $second-highlight-color = #574bdb 7 | $border-color = #ddd 8 | $toolbar-background-color = #fff 9 | $toolbar-button-color = #8962ed 10 | $toolbar-text-color = #5b2c7a 11 | $toolbar-border-color = #ddd 12 | $buttonbar-color = #ac62ed 13 | $buttonbar-active-text-color = #fff 14 | $list-background-color = #fff 15 | $list-header-background-color = #eee 16 | $list-tap-active-background-color = #d9d9d9 17 | $tabbar-background-color = #fff 18 | $tabbar-text-color = #aaa 19 | $tabbar-highlight-text-color = #8962ed 20 | $tabbar-border-color = #ddd 21 | $switch-highlight-color = #574bdb 22 | $modal-background-color = rgba(0, 0, 0, 0.7) 23 | $modal-text-color = #fff 24 | $alert-dialog-background-color = #f4f4f4 25 | $alert-dialog-text-color = #1f1f21 26 | $alert-dialog-button-color = #574bdb 27 | $alert-dialog-separator-color = #ddd 28 | $dialog-background-color = #f4f4f4 29 | $popover-background-color = white 30 | $popover-text-color = #1f1f21 31 | $notification-background-color = #dc5236 32 | $material-switch-active-thumb-color = #009688 33 | $material-switch-inactive-thumb-color = #f1f1f1 34 | $material-switch-active-background-color = #77c2bb 35 | $material-switch-inactive-background-color = #b0afaf 36 | $material-range-track-color = #e0e0e0 37 | $material-range-thumb-color = #009688 38 | $material-toolbar-background-color = #009688 39 | $material-toolbar-text-color = #ffffff 40 | $material-toolbar-button-color = #ffffff 41 | $material-toolbar-button-active-color = #26a69a 42 | $material-button-background-color = #009688 43 | $material-button-text-color = #ffffff 44 | $material-checkbox-active-color = #009688 45 | $material-checkbox-inactive-color = #717171 46 | $material-checkbox-checkmark-color = #ffffff 47 | $material-radio-button-active-color = #009688 48 | $material-radio-button-inactive-color = #717171 49 | $material-text-input-text-color = #212121 50 | $material-text-input-active-color = #009688 51 | $material-text-input-inactive-color = #afafaf 52 | $material-dialog-background-color = #fafafa 53 | $material-alert-dialog-background-color = #fafafa 54 | $material-alert-dialog-title-color = #212121 55 | $material-alert-dialog-content-color = #727272 56 | $material-alert-dialog-button-color = #009688 57 | $material-progress-bar-primary-color = #009688 58 | $material-progress-bar-secondary-color = #80cbc4 59 | $material-progress-bar-background-color = #e0e0e0 60 | $material-progress-circle-primary-color = #009688 61 | $material-progress-circle-secondary-color = #80cbc4 62 | $material-tabbar-background-color = #009688 63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6) 64 | $material-tabbar-highlight-text-color = #ffffff 65 | $material-tabbar-highlight-color = #26a69a 66 | $fab-text-color = #fafafa 67 | $fab-background-color = #009688 68 | 69 | @import 'components' -------------------------------------------------------------------------------- /www/lib/onsenui/stylus/sunshine-theme.styl: -------------------------------------------------------------------------------- 1 | $background-color = #f9f9f9 2 | $material-background-color = #fafafa 3 | $text-color = #333 4 | $sub-text-color = #999 5 | $highlight-color = #eb482f 6 | $second-highlight-color = #f28227 7 | $border-color = #ddd 8 | $toolbar-background-color = #fff 9 | $toolbar-button-color = #eb5e2f 10 | $toolbar-text-color = #333 11 | $toolbar-border-color = #ddd 12 | $buttonbar-color = rgba(235, 94, 47, 0.84) 13 | $buttonbar-active-text-color = #fff 14 | $list-background-color = #fff 15 | $list-header-background-color = #eee 16 | $list-tap-active-background-color = #d9d9d9 17 | $tabbar-background-color = #fff 18 | $tabbar-text-color = #ccc 19 | $tabbar-highlight-text-color = #eb5e2f 20 | $tabbar-border-color = #ddd 21 | $switch-highlight-color = #e69e33 22 | $modal-background-color = rgba(0, 0, 0, 0.7) 23 | $modal-text-color = #fff 24 | $alert-dialog-background-color = #f4f4f4 25 | $alert-dialog-text-color = #1f1f21 26 | $alert-dialog-button-color = #eb482f 27 | $alert-dialog-separator-color = #ddd 28 | $dialog-background-color = #f4f4f4 29 | $popover-background-color = white 30 | $popover-text-color = #1f1f21 31 | $notification-background-color = #eb5e2f 32 | $material-switch-active-thumb-color = #009688 33 | $material-switch-inactive-thumb-color = #f1f1f1 34 | $material-switch-active-background-color = #77c2bb 35 | $material-switch-inactive-background-color = #b0afaf 36 | $material-range-track-color = #e0e0e0 37 | $material-range-thumb-color = #009688 38 | $material-toolbar-background-color = #009688 39 | $material-toolbar-text-color = #ffffff 40 | $material-toolbar-button-color = #ffffff 41 | $material-toolbar-button-active-color = #26a69a 42 | $material-button-background-color = #009688 43 | $material-button-text-color = #ffffff 44 | $material-checkbox-active-color = #009688 45 | $material-checkbox-inactive-color = #717171 46 | $material-checkbox-checkmark-color = #ffffff 47 | $material-radio-button-active-color = #009688 48 | $material-radio-button-inactive-color = #717171 49 | $material-text-input-text-color = #212121 50 | $material-text-input-active-color = #009688 51 | $material-text-input-inactive-color = #afafaf 52 | $material-dialog-background-color = #fafafa 53 | $material-alert-dialog-background-color = #fafafa 54 | $material-alert-dialog-title-color = #212121 55 | $material-alert-dialog-content-color = #727272 56 | $material-alert-dialog-button-color = #009688 57 | $material-progress-bar-primary-color = #009688 58 | $material-progress-bar-secondary-color = #80cbc4 59 | $material-progress-bar-background-color = #e0e0e0 60 | $material-progress-circle-primary-color = #009688 61 | $material-progress-circle-secondary-color = #80cbc4 62 | $material-tabbar-background-color = #009688 63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6) 64 | $material-tabbar-highlight-text-color = #ffffff 65 | $material-tabbar-highlight-color = #26a69a 66 | $fab-text-color = #fafafa 67 | $fab-background-color = #009688 68 | 69 | @import 'components' -------------------------------------------------------------------------------- /www/lib/react/.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "main": [ 4 | "react.js", 5 | "react-dom.js" 6 | ], 7 | "ignore": [], 8 | "homepage": "https://github.com/facebook/react-bower", 9 | "version": "0.14.6", 10 | "_release": "0.14.6", 11 | "_resolution": { 12 | "type": "version", 13 | "tag": "v0.14.6", 14 | "commit": "b18cf6d3209c18da872e793d498e604e988d662d" 15 | }, 16 | "_source": "git://github.com/facebook/react-bower.git", 17 | "_target": "~0.14.2", 18 | "_originalSource": "react" 19 | } -------------------------------------------------------------------------------- /www/lib/react/LICENSE: -------------------------------------------------------------------------------- 1 | BSD License 2 | 3 | For react-bower software 4 | 5 | Copyright (c) 2013-2014, Facebook, Inc. 6 | All rights reserved. 7 | 8 | Redistribution and use in source and binary forms, with or without modification, 9 | are permitted provided that the following conditions are met: 10 | 11 | * Redistributions of source code must retain the above copyright notice, this 12 | list of conditions and the following disclaimer. 13 | 14 | * Redistributions in binary form must reproduce the above copyright notice, 15 | this list of conditions and the following disclaimer in the documentation 16 | and/or other materials provided with the distribution. 17 | 18 | * Neither the name Facebook nor the names of its contributors may be used to 19 | endorse or promote products derived from this software without specific 20 | prior written permission. 21 | 22 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 23 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 24 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 25 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 26 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 27 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 28 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 29 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 30 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 31 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 32 | -------------------------------------------------------------------------------- /www/lib/react/PATENTS: -------------------------------------------------------------------------------- 1 | Additional Grant of Patent Rights Version 2 2 | 3 | "Software" means the react-bower software distributed by Facebook, Inc. 4 | 5 | Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software 6 | ("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable 7 | (subject to the termination provision below) license under any Necessary 8 | Claims, to make, have made, use, sell, offer to sell, import, and otherwise 9 | transfer the Software. For avoidance of doubt, no license is granted under 10 | Facebook's rights in any patent claims that are infringed by (i) modifications 11 | to the Software made by you or any third party or (ii) the Software in 12 | combination with any software or other technology. 13 | 14 | The license granted hereunder will terminate, automatically and without notice, 15 | if you (or any of your subsidiaries, corporate affiliates or agents) initiate 16 | directly or indirectly, or take a direct financial interest in, any Patent 17 | Assertion: (i) against Facebook or any of its subsidiaries or corporate 18 | affiliates, (ii) against any party if such Patent Assertion arises in whole or 19 | in part from any software, technology, product or service of Facebook or any of 20 | its subsidiaries or corporate affiliates, or (iii) against any party relating 21 | to the Software. Notwithstanding the foregoing, if Facebook or any of its 22 | subsidiaries or corporate affiliates files a lawsuit alleging patent 23 | infringement against you in the first instance, and you respond by filing a 24 | patent infringement counterclaim in that lawsuit against that party that is 25 | unrelated to the Software, the license granted hereunder will not terminate 26 | under section (i) of this paragraph due to such counterclaim. 27 | 28 | A "Necessary Claim" is a claim of a patent owned by Facebook that is 29 | necessarily infringed by the Software standing alone. 30 | 31 | A "Patent Assertion" is any lawsuit or other action alleging direct, indirect, 32 | or contributory infringement or inducement to infringe any patent, including a 33 | cross-claim or counterclaim. 34 | -------------------------------------------------------------------------------- /www/lib/react/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "main": ["react.js", "react-dom.js"], 4 | "ignore": [] 5 | } 6 | -------------------------------------------------------------------------------- /www/lib/react/react-dom-server.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ReactDOMServer v0.14.6 3 | * 4 | * Copyright 2013-2015, Facebook, Inc. 5 | * All rights reserved. 6 | * 7 | * This source code is licensed under the BSD-style license found in the 8 | * LICENSE file in the root directory of this source tree. An additional grant 9 | * of patent rights can be found in the PATENTS file in the same directory. 10 | * 11 | */ 12 | // Based off https://github.com/ForbesLindesay/umd/blob/master/template.js 13 | ;(function(f) { 14 | // CommonJS 15 | if (typeof exports === "object" && typeof module !== "undefined") { 16 | module.exports = f(require('react')); 17 | 18 | // RequireJS 19 | } else if (typeof define === "function" && define.amd) { 20 | define(['react'], f); 21 | 22 | // 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | --------------------------------------------------------------------------------