├── examples └── example1 │ ├── .bowerrc │ ├── www │ ├── css │ │ └── style.css │ ├── img │ │ ├── ionic.png │ │ └── background.jpg │ ├── lib │ │ └── ionic │ │ │ ├── fonts │ │ │ ├── ionicons.eot │ │ │ ├── ionicons.ttf │ │ │ └── ionicons.woff │ │ │ ├── version.json │ │ │ ├── scss │ │ │ ├── _progress.scss │ │ │ ├── _backdrop.scss │ │ │ ├── ionicons │ │ │ │ ├── ionicons.scss │ │ │ │ └── _ionicons-font.scss │ │ │ ├── ionic.scss │ │ │ ├── _loading.scss │ │ │ ├── _radio.scss │ │ │ ├── _animations.scss │ │ │ ├── _slide-box.scss │ │ │ ├── _menu.scss │ │ │ ├── _badge.scss │ │ │ ├── _button-bar.scss │ │ │ ├── _platform.scss │ │ │ ├── _spinner.scss │ │ │ ├── _popup.scss │ │ │ ├── _modal.scss │ │ │ ├── _list.scss │ │ │ ├── _refresher.scss │ │ │ ├── _select.scss │ │ │ ├── _action-sheet.scss │ │ │ ├── _type.scss │ │ │ ├── _grid.scss │ │ │ ├── _popover.scss │ │ │ ├── _range.scss │ │ │ ├── _transitions.scss │ │ │ ├── _checkbox.scss │ │ │ ├── _toggle.scss │ │ │ ├── _util.scss │ │ │ ├── _scaffolding.scss │ │ │ ├── _button.scss │ │ │ ├── _form.scss │ │ │ ├── _reset.scss │ │ │ └── _bar.scss │ │ │ └── js │ │ │ └── angular │ │ │ ├── angular-resource.min.js │ │ │ └── angular-sanitize.min.js │ ├── js │ │ ├── app.js │ │ └── main.controller.js │ └── index.html │ ├── .io-config.json │ ├── ionic.config.json │ ├── resources │ ├── icon.png │ ├── splash.png │ ├── ios │ │ ├── icon │ │ │ ├── icon.png │ │ │ ├── icon-40.png │ │ │ ├── icon-50.png │ │ │ ├── icon-60.png │ │ │ ├── icon-72.png │ │ │ ├── icon-76.png │ │ │ ├── icon@2x.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-50@2x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-72@2x.png │ │ │ ├── icon-76@2x.png │ │ │ ├── icon-small.png │ │ │ ├── icon-small@2x.png │ │ │ └── icon-small@3x.png │ │ └── splash │ │ │ ├── Default-667h.png │ │ │ ├── Default-736h.png │ │ │ ├── Default~iphone.png │ │ │ ├── Default@2x~iphone.png │ │ │ ├── Default-568h@2x~iphone.png │ │ │ ├── Default-Landscape-736h.png │ │ │ ├── Default-Landscape~ipad.png │ │ │ ├── Default-Portrait~ipad.png │ │ │ ├── Default-Portrait@2x~ipad.png │ │ │ └── Default-Landscape@2x~ipad.png │ └── android │ │ ├── icon │ │ ├── drawable-hdpi-icon.png │ │ ├── drawable-ldpi-icon.png │ │ ├── drawable-mdpi-icon.png │ │ ├── drawable-xhdpi-icon.png │ │ ├── drawable-xxhdpi-icon.png │ │ └── drawable-xxxhdpi-icon.png │ │ └── splash │ │ ├── drawable-land-hdpi-screen.png │ │ ├── drawable-land-ldpi-screen.png │ │ ├── drawable-land-mdpi-screen.png │ │ ├── drawable-port-hdpi-screen.png │ │ ├── drawable-port-ldpi-screen.png │ │ ├── drawable-port-mdpi-screen.png │ │ ├── drawable-land-xhdpi-screen.png │ │ ├── drawable-land-xxhdpi-screen.png │ │ ├── drawable-land-xxxhdpi-screen.png │ │ ├── drawable-port-xhdpi-screen.png │ │ ├── drawable-port-xxhdpi-screen.png │ │ └── drawable-port-xxxhdpi-screen.png │ ├── bower.json │ ├── .gitignore │ ├── .editorconfig │ ├── package.json │ ├── scss │ └── ionic.app.scss │ ├── gulpfile.js │ ├── hooks │ ├── after_prepare │ │ └── 010_add_platform_class.js │ └── README.md │ └── config.xml ├── .gitignore ├── tutorials ├── resources │ ├── tutorial_1_A.png │ ├── tutorial_1_B.png │ ├── tutorial_1_C.png │ ├── tutorial_1_D.png │ ├── tutorial_1_E.png │ ├── tutorial_1_F.png │ └── tutorial_2_A.png └── tutorial-1.md ├── src ├── ion-digit-keyboard.module.js ├── keyboard.tpl.html ├── ion-digit-keyboard.directive.js └── ion-digit-keyboard.scss ├── package.json ├── LICENSE ├── gulpfile.js ├── README.md └── dist └── ion-digit-keyboard.min.js /examples/example1/.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "www/lib" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | node_modules 3 | plugin.zip 4 | icon.ai 5 | icon.jpg -------------------------------------------------------------------------------- /examples/example1/www/css/style.css: -------------------------------------------------------------------------------- 1 | /* Empty. Add your own CSS if you like */ 2 | -------------------------------------------------------------------------------- /examples/example1/.io-config.json: -------------------------------------------------------------------------------- 1 | {"app_id":"462c870c","api_key":"0d308bc6dd6d47d258c09e525bc95ac9f4032638fad4533f"} -------------------------------------------------------------------------------- /examples/example1/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ionic Digital Keyboard", 3 | "app_id": "462c870c" 4 | } 5 | -------------------------------------------------------------------------------- /examples/example1/www/img/ionic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/www/img/ionic.png -------------------------------------------------------------------------------- /examples/example1/resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/icon.png -------------------------------------------------------------------------------- /tutorials/resources/tutorial_1_A.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/tutorials/resources/tutorial_1_A.png -------------------------------------------------------------------------------- /tutorials/resources/tutorial_1_B.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/tutorials/resources/tutorial_1_B.png -------------------------------------------------------------------------------- /tutorials/resources/tutorial_1_C.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/tutorials/resources/tutorial_1_C.png -------------------------------------------------------------------------------- /tutorials/resources/tutorial_1_D.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/tutorials/resources/tutorial_1_D.png -------------------------------------------------------------------------------- /tutorials/resources/tutorial_1_E.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/tutorials/resources/tutorial_1_E.png -------------------------------------------------------------------------------- /tutorials/resources/tutorial_1_F.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/tutorials/resources/tutorial_1_F.png -------------------------------------------------------------------------------- /tutorials/resources/tutorial_2_A.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/tutorials/resources/tutorial_2_A.png -------------------------------------------------------------------------------- /examples/example1/resources/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/splash.png -------------------------------------------------------------------------------- /examples/example1/www/img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/www/img/background.jpg -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-40.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-50.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-60.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-72.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-76.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon@2x.png -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/www/lib/ionic/fonts/ionicons.eot -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/www/lib/ionic/fonts/ionicons.ttf -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/version.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.3.0", 3 | "codename": "delhi", 4 | "date": "2016-04-21", 5 | "time": "15:35:35" 6 | } 7 | -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-40@2x.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-50@2x.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-60@2x.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-60@3x.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-72@2x.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-76@2x.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-small.png -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/www/lib/ionic/fonts/ionicons.woff -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-small@2x.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/icon/icon-small@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/icon/icon-small@3x.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default-667h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default-667h.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default-736h.png -------------------------------------------------------------------------------- /examples/example1/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HelloIonic", 3 | "private": "true", 4 | "devDependencies": { 5 | "ionic": "driftyco/ionic-bower#1.3.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default~iphone.png -------------------------------------------------------------------------------- /src/ion-digit-keyboard.module.js: -------------------------------------------------------------------------------- 1 | angular.module('ion-digit-keyboard', [ 2 | 'ionic', 3 | 'ion-digit-keyboard.templates', 4 | 'ion-digit-keyboard.directive' 5 | ]); -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default@2x~iphone.png -------------------------------------------------------------------------------- /examples/example1/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | node_modules/ 5 | platforms/ 6 | plugins/ 7 | -------------------------------------------------------------------------------- /examples/example1/resources/android/icon/drawable-hdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/icon/drawable-hdpi-icon.png -------------------------------------------------------------------------------- /examples/example1/resources/android/icon/drawable-ldpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/icon/drawable-ldpi-icon.png -------------------------------------------------------------------------------- /examples/example1/resources/android/icon/drawable-mdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/icon/drawable-mdpi-icon.png -------------------------------------------------------------------------------- /examples/example1/resources/android/icon/drawable-xhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/icon/drawable-xhdpi-icon.png -------------------------------------------------------------------------------- /examples/example1/resources/android/icon/drawable-xxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/icon/drawable-xxhdpi-icon.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default-568h@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default-568h@2x~iphone.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default-Landscape-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default-Landscape-736h.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default-Landscape~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default-Landscape~ipad.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default-Portrait~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default-Portrait~ipad.png -------------------------------------------------------------------------------- /examples/example1/resources/android/icon/drawable-xxxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/icon/drawable-xxxhdpi-icon.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default-Portrait@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default-Portrait@2x~ipad.png -------------------------------------------------------------------------------- /examples/example1/resources/ios/splash/Default-Landscape@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/ios/splash/Default-Landscape@2x~ipad.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-land-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-land-hdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-land-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-land-ldpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-land-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-land-mdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-port-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-port-hdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-port-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-port-ldpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-port-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-port-mdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-land-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-land-xhdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-land-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-land-xxhdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-land-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-land-xxxhdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-port-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-port-xhdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-port-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-port-xxhdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/resources/android/splash/drawable-port-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skol-pro/ion-digit-keyboard/HEAD/examples/example1/resources/android/splash/drawable-port-xxxhdpi-screen.png -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_progress.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Progress 4 | * -------------------------------------------------- 5 | */ 6 | 7 | progress { 8 | display: block; 9 | margin: $progress-margin; 10 | width: $progress-width; 11 | } 12 | -------------------------------------------------------------------------------- /examples/example1/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | insert_final_newline = false 14 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_backdrop.scss: -------------------------------------------------------------------------------- 1 | 2 | .backdrop { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | z-index: $z-index-backdrop; 7 | 8 | width: 100%; 9 | height: 100%; 10 | 11 | background-color: $loading-backdrop-bg-color; 12 | 13 | visibility: hidden; 14 | opacity: 0; 15 | 16 | &.visible { 17 | visibility: visible; 18 | } 19 | &.active { 20 | opacity: 1; 21 | } 22 | 23 | @include transition($loading-backdrop-fadein-duration opacity linear); 24 | } 25 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/ionicons/ionicons.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "ionicons-variables"; 3 | /*! 4 | Ionicons, v2.0.1 5 | Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ 6 | https://twitter.com/benjsperry https://twitter.com/ionicframework 7 | MIT License: https://github.com/driftyco/ionicons 8 | 9 | Android-style icons originally built by Google’s 10 | Material Design Icons: https://github.com/google/material-design-icons 11 | used under CC BY http://creativecommons.org/licenses/by/4.0/ 12 | Modified icons to fit ionicon’s grid from original. 13 | */ 14 | 15 | @import "ionicons-font"; 16 | @import "ionicons-icons"; 17 | -------------------------------------------------------------------------------- /examples/example1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example1", 3 | "version": "1.1.1", 4 | "description": "example1: An Ionic project", 5 | "dependencies": { 6 | "gulp": "^3.5.6", 7 | "gulp-sass": "^2.0.4", 8 | "gulp-concat": "^2.2.0", 9 | "gulp-minify-css": "^0.3.0", 10 | "gulp-rename": "^1.2.0" 11 | }, 12 | "devDependencies": { 13 | "bower": "^1.3.3", 14 | "gulp-util": "^2.2.14", 15 | "shelljs": "^0.3.0" 16 | }, 17 | "cordovaPlugins": [ 18 | "cordova-plugin-device", 19 | "cordova-plugin-console", 20 | "cordova-plugin-whitelist", 21 | "cordova-plugin-splashscreen", 22 | "cordova-plugin-statusbar", 23 | "ionic-plugin-keyboard" 24 | ], 25 | "cordovaPlatforms": [ 26 | "ios", 27 | { 28 | "platform": "ios", 29 | "version": "", 30 | "locator": "ios" 31 | } 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/ionic.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import 4 | // Ionicons 5 | "ionicons/ionicons.scss", 6 | 7 | // Variables 8 | "mixins", 9 | "variables", 10 | 11 | // Base 12 | "reset", 13 | "scaffolding", 14 | "type", 15 | 16 | // Components 17 | "action-sheet", 18 | "backdrop", 19 | "bar", 20 | "tabs", 21 | "menu", 22 | "modal", 23 | "popover", 24 | "popup", 25 | "loading", 26 | "items", 27 | "list", 28 | "badge", 29 | "slide-box", 30 | "slides", 31 | "refresher", 32 | "spinner", 33 | 34 | // Forms 35 | "form", 36 | "checkbox", 37 | "toggle", 38 | "radio", 39 | "range", 40 | "select", 41 | "progress", 42 | 43 | // Buttons 44 | "button", 45 | "button-bar", 46 | 47 | // Util 48 | "grid", 49 | "util", 50 | "platform", 51 | 52 | // Animations 53 | "animations", 54 | "transitions"; 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ion-digit-keyboard", 3 | "version": "1.0.0", 4 | "description": "A digital keyboard for apps build using the Ionic framework.", 5 | "main": "./dist/ion-digit-keyboard.min.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "del": "^2.2.0", 9 | "gulp": "^3.9.1", 10 | "gulp-concat": "^2.6.0", 11 | "gulp-css2js": "^1.0.2", 12 | "gulp-minify-css": "^1.2.4", 13 | "gulp-minify-html": "^1.0.6", 14 | "gulp-ng-html2js": "^0.2.2", 15 | "gulp-rename": "^1.2.2", 16 | "gulp-sass": "^2.3.1", 17 | "gulp-uglify": "^1.5.3" 18 | }, 19 | "scripts": { 20 | "test": "echo \"Error: no test specified\" && exit 1" 21 | }, 22 | "keywords": [ 23 | "ionic", 24 | "digital", "numeric", "key", "keyboard", "number", "log", "login", "sms", "lock", "lockscreen", "dial", "pass", "code", "call" 25 | ], 26 | "author": "Skol (Vincent Letellier)", 27 | "license": "MIT" 28 | } 29 | -------------------------------------------------------------------------------- /examples/example1/scss/ionic.app.scss: -------------------------------------------------------------------------------- 1 | /* 2 | To customize the look and feel of Ionic, you can override the variables 3 | in ionic's _variables.scss file. 4 | 5 | For example, you might change some of the default colors: 6 | 7 | $light: #fff !default; 8 | $stable: #f8f8f8 !default; 9 | $positive: #387ef5 !default; 10 | $calm: #11c1f3 !default; 11 | $balanced: #33cd5f !default; 12 | $energized: #ffc900 !default; 13 | $assertive: #ef473a !default; 14 | $royal: #886aea !default; 15 | $dark: #444 !default; 16 | */ 17 | 18 | // The path for our ionicons font files, relative to the built CSS in www/css 19 | $ionicons-font-path: "../lib/ionic/fonts" !default; 20 | 21 | // Include all of Ionic 22 | @import "www/lib/ionic/scss/ionic"; 23 | 24 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_loading.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Loading 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .loading-container { 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | right: 0; 12 | bottom: 0; 13 | 14 | z-index: $z-index-loading; 15 | 16 | @include display-flex(); 17 | @include justify-content(center); 18 | @include align-items(center); 19 | 20 | @include transition(0.2s opacity linear); 21 | visibility: hidden; 22 | opacity: 0; 23 | 24 | &:not(.visible) .icon, 25 | &:not(.visible) .spinner{ 26 | display: none; 27 | } 28 | &.visible { 29 | visibility: visible; 30 | } 31 | &.active { 32 | opacity: 1; 33 | } 34 | 35 | .loading { 36 | padding: $loading-padding; 37 | 38 | border-radius: $loading-border-radius; 39 | background-color: $loading-bg-color; 40 | 41 | color: $loading-text-color; 42 | 43 | text-align: center; 44 | text-overflow: ellipsis; 45 | font-size: $loading-font-size; 46 | 47 | h1, h2, h3, h4, h5, h6 { 48 | color: $loading-text-color; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/ionicons/_ionicons-font.scss: -------------------------------------------------------------------------------- 1 | // Ionicons Font Path 2 | // -------------------------- 3 | 4 | @font-face { 5 | font-family: $ionicons-font-family; 6 | src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}"); 7 | src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}#iefix") format("embedded-opentype"), 8 | url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"), 9 | url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"), 10 | url("#{$ionicons-font-path}/ionicons.woff") format("woff"), /* for WP8 */ 11 | url("#{$ionicons-font-path}/ionicons.svg?v=#{$ionicons-version}#Ionicons") format("svg"); 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | 16 | .ion { 17 | display: inline-block; 18 | font-family: $ionicons-font-family; 19 | speak: none; 20 | font-style: normal; 21 | font-weight: normal; 22 | font-variant: normal; 23 | text-transform: none; 24 | text-rendering: auto; 25 | line-height: 1; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | } 29 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_radio.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Radio Button Inputs 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .item-radio { 8 | padding: 0; 9 | 10 | &:hover { 11 | cursor: pointer; 12 | } 13 | } 14 | 15 | .item-radio .item-content { 16 | /* give some room to the right for the checkmark icon */ 17 | padding-right: $item-padding * 4; 18 | } 19 | 20 | .item-radio .radio-icon { 21 | /* checkmark icon will be hidden by default */ 22 | position: absolute; 23 | top: 0; 24 | right: 0; 25 | z-index: $z-index-item-radio; 26 | visibility: hidden; 27 | padding: $item-padding - 2; 28 | height: 100%; 29 | font-size: 24px; 30 | } 31 | 32 | .item-radio input { 33 | /* hide any radio button inputs elements (the ugly circles) */ 34 | position: absolute; 35 | left: -9999px; 36 | 37 | &:checked + .radio-content .item-content { 38 | /* style the item content when its checked */ 39 | background: #f7f7f7; 40 | } 41 | 42 | &:checked + .radio-content .radio-icon { 43 | /* show the checkmark icon when its checked */ 44 | visibility: visible; 45 | } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2016 Skol (Letellier Vincent) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /examples/example1/www/js/app.js: -------------------------------------------------------------------------------- 1 | // Ionic Starter App 2 | 3 | // angular.module is a global place for creating, registering and retrieving Angular modules 4 | // 'starter' is the name of this angular module example (also set in a attribute in index.html) 5 | // the 2nd parameter is an array of 'requires' 6 | angular.module('starter', ['ionic', 'ion-digit-keyboard']) 7 | 8 | .run(function ($ionicPlatform) { 9 | $ionicPlatform.ready(function () { 10 | if (window.cordova && window.cordova.plugins.Keyboard) { 11 | // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 12 | // for form inputs) 13 | cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 14 | 15 | // Don't remove this line unless you know what you are doing. It stops the viewport 16 | // from snapping when text inputs are focused. Ionic handles this internally for 17 | // a much nicer keyboard experience. 18 | cordova.plugins.Keyboard.disableScroll(true); 19 | } 20 | if (window.StatusBar) { 21 | StatusBar.overlaysWebView(true); 22 | StatusBar.style(1); 23 | } 24 | }); 25 | }) 26 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_animations.scss: -------------------------------------------------------------------------------- 1 | 2 | // Slide up from the bottom, used for modals 3 | // ------------------------------- 4 | 5 | .slide-in-up { 6 | @include translate3d(0, 100%, 0); 7 | } 8 | .slide-in-up.ng-enter, 9 | .slide-in-up > .ng-enter { 10 | @include transition(all cubic-bezier(.1, .7, .1, 1) 400ms); 11 | } 12 | .slide-in-up.ng-enter-active, 13 | .slide-in-up > .ng-enter-active { 14 | @include translate3d(0, 0, 0); 15 | } 16 | 17 | .slide-in-up.ng-leave, 18 | .slide-in-up > .ng-leave { 19 | @include transition(all ease-in-out 250ms); 20 | } 21 | 22 | 23 | // Scale Out 24 | // Scale from hero (1 in this case) to zero 25 | // ------------------------------- 26 | 27 | @-webkit-keyframes scaleOut { 28 | from { -webkit-transform: scale(1); opacity: 1; } 29 | to { -webkit-transform: scale(0.8); opacity: 0; } 30 | } 31 | @keyframes scaleOut { 32 | from { transform: scale(1); opacity: 1; } 33 | to { transform: scale(0.8); opacity: 0; } 34 | } 35 | 36 | 37 | // Super Scale In 38 | // Scale from super (1.x) to duper (1 in this case) 39 | // ------------------------------- 40 | 41 | @-webkit-keyframes superScaleIn { 42 | from { -webkit-transform: scale(1.2); opacity: 0; } 43 | to { -webkit-transform: scale(1); opacity: 1 } 44 | } 45 | @keyframes superScaleIn { 46 | from { transform: scale(1.2); opacity: 0; } 47 | to { transform: scale(1); opacity: 1; } 48 | } 49 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_slide-box.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Slide Box 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .slider { 8 | position: relative; 9 | visibility: hidden; 10 | // Make sure items don't scroll over ever 11 | overflow: hidden; 12 | } 13 | 14 | .slider-slides { 15 | position: relative; 16 | height: 100%; 17 | } 18 | 19 | .slider-slide { 20 | position: relative; 21 | display: block; 22 | float: left; 23 | width: 100%; 24 | height: 100%; 25 | vertical-align: top; 26 | } 27 | 28 | .slider-slide-image { 29 | > img { 30 | width: 100%; 31 | } 32 | } 33 | 34 | .slider-pager { 35 | position: absolute; 36 | bottom: 20px; 37 | z-index: $z-index-slider-pager; 38 | width: 100%; 39 | height: 15px; 40 | text-align: center; 41 | 42 | .slider-pager-page { 43 | display: inline-block; 44 | margin: 0px 3px; 45 | width: 15px; 46 | color: #000; 47 | text-decoration: none; 48 | 49 | opacity: 0.3; 50 | 51 | &.active { 52 | @include transition(opacity 0.4s ease-in); 53 | opacity: 1; 54 | } 55 | } 56 | } 57 | 58 | //Disable animate service animations 59 | .slider-slide, 60 | .slider-pager-page { 61 | &.ng-enter, 62 | &.ng-leave, 63 | &.ng-animate { 64 | -webkit-transition: none !important; 65 | transition: none !important; 66 | } 67 | &.ng-animate { 68 | -webkit-animation: none 0s; 69 | animation: none 0s; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_menu.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Menus 4 | * -------------------------------------------------- 5 | * Side panel structure 6 | */ 7 | 8 | .menu { 9 | position: absolute; 10 | top: 0; 11 | bottom: 0; 12 | z-index: $z-index-menu; 13 | overflow: hidden; 14 | 15 | min-height: 100%; 16 | max-height: 100%; 17 | width: $menu-width; 18 | 19 | background-color: $menu-bg; 20 | 21 | .scroll-content { 22 | z-index: $z-index-menu-scroll-content; 23 | } 24 | 25 | .bar-header { 26 | z-index: $z-index-menu-bar-header; 27 | } 28 | } 29 | 30 | .menu-content { 31 | @include transform(none); 32 | box-shadow: $menu-side-shadow; 33 | } 34 | 35 | .menu-open .menu-content .pane, 36 | .menu-open .menu-content .scroll-content { 37 | pointer-events: none; 38 | } 39 | .menu-open .menu-content .scroll-content .scroll { 40 | pointer-events: none; 41 | } 42 | .menu-open .menu-content .scroll-content:not(.overflow-scroll) { 43 | overflow: hidden; 44 | } 45 | 46 | .grade-b .menu-content, 47 | .grade-c .menu-content { 48 | @include box-sizing(content-box); 49 | right: -1px; 50 | left: -1px; 51 | border-right: 1px solid #ccc; 52 | border-left: 1px solid #ccc; 53 | box-shadow: none; 54 | } 55 | 56 | .menu-left { 57 | left: 0; 58 | } 59 | 60 | .menu-right { 61 | right: 0; 62 | } 63 | 64 | .aside-open.aside-resizing .menu-right { 65 | display: none; 66 | } 67 | 68 | .menu-animated { 69 | @include transition-transform($menu-animation-speed ease); 70 | } 71 | -------------------------------------------------------------------------------- /examples/example1/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var gutil = require('gulp-util'); 3 | var bower = require('bower'); 4 | var concat = require('gulp-concat'); 5 | var sass = require('gulp-sass'); 6 | var minifyCss = require('gulp-minify-css'); 7 | var rename = require('gulp-rename'); 8 | var sh = require('shelljs'); 9 | 10 | var paths = { 11 | sass: ['./scss/**/*.scss'] 12 | }; 13 | 14 | gulp.task('default', ['sass']); 15 | 16 | gulp.task('sass', function(done) { 17 | gulp.src('./scss/ionic.app.scss') 18 | .pipe(sass()) 19 | .on('error', sass.logError) 20 | .pipe(gulp.dest('./www/css/')) 21 | .pipe(minifyCss({ 22 | keepSpecialComments: 0 23 | })) 24 | .pipe(rename({ extname: '.min.css' })) 25 | .pipe(gulp.dest('./www/css/')) 26 | .on('end', done); 27 | }); 28 | 29 | gulp.task('watch', function() { 30 | gulp.watch(paths.sass, ['sass']); 31 | }); 32 | 33 | gulp.task('install', ['git-check'], function() { 34 | return bower.commands.install() 35 | .on('log', function(data) { 36 | gutil.log('bower', gutil.colors.cyan(data.id), data.message); 37 | }); 38 | }); 39 | 40 | gulp.task('git-check', function(done) { 41 | if (!sh.which('git')) { 42 | console.log( 43 | ' ' + gutil.colors.red('Git is not installed.'), 44 | '\n Git, the version control system, is required to download Ionic.', 45 | '\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.', 46 | '\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.' 47 | ); 48 | process.exit(1); 49 | } 50 | done(); 51 | }); 52 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_badge.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Badges 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .badge { 8 | @include badge-style($badge-default-bg, $badge-default-text); 9 | z-index: $z-index-badge; 10 | display: inline-block; 11 | padding: 3px 8px; 12 | min-width: 10px; 13 | border-radius: $badge-border-radius; 14 | vertical-align: baseline; 15 | text-align: center; 16 | white-space: nowrap; 17 | font-weight: $badge-font-weight; 18 | font-size: $badge-font-size; 19 | line-height: $badge-line-height; 20 | 21 | &:empty { 22 | display: none; 23 | } 24 | } 25 | 26 | //Be sure to override specificity of rule that 'badge color matches tab color by default' 27 | .tabs .tab-item .badge, 28 | .badge { 29 | &.badge-light { 30 | @include badge-style($badge-light-bg, $badge-light-text); 31 | } 32 | &.badge-stable { 33 | @include badge-style($badge-stable-bg, $badge-stable-text); 34 | } 35 | &.badge-positive { 36 | @include badge-style($badge-positive-bg, $badge-positive-text); 37 | } 38 | &.badge-calm { 39 | @include badge-style($badge-calm-bg, $badge-calm-text); 40 | } 41 | &.badge-assertive { 42 | @include badge-style($badge-assertive-bg, $badge-assertive-text); 43 | } 44 | &.badge-balanced { 45 | @include badge-style($badge-balanced-bg, $badge-balanced-text); 46 | } 47 | &.badge-energized { 48 | @include badge-style($badge-energized-bg, $badge-energized-text); 49 | } 50 | &.badge-royal { 51 | @include badge-style($badge-royal-bg, $badge-royal-text); 52 | } 53 | &.badge-dark { 54 | @include badge-style($badge-dark-bg, $badge-dark-text); 55 | } 56 | } 57 | 58 | // Quick fix for labels/badges in buttons 59 | .button .badge { 60 | position: relative; 61 | top: -1px; 62 | } 63 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var del = require('del'); 3 | var concat = require('gulp-concat'); 4 | var uglify = require('gulp-uglify'); 5 | var ngHtml2Js = require("gulp-ng-html2js"); 6 | var minifyHtml = require("gulp-minify-html"); 7 | var minifyCss = require('gulp-minify-css'); 8 | var css2js = require("gulp-css2js"); 9 | var sass = require('gulp-sass'); 10 | var rename = require('gulp-rename'); 11 | 12 | gulp.task('clean', function () { 13 | del(['dist/*']); 14 | }); 15 | 16 | gulp.task('sass', function (done) { 17 | gulp.src('./src/*.scss') 18 | .pipe(sass()) 19 | .on('error', sass.logError) 20 | .pipe(minifyCss({ 21 | keepSpecialComments: 0 22 | })) 23 | .pipe(rename({ extname: '.min.css' })) 24 | .pipe(gulp.dest('./dist/')) 25 | .on('end', done); 26 | }); 27 | 28 | gulp.task('html2js', function () { 29 | return gulp.src(['./src/*.html']) 30 | .pipe(minifyHtml()) 31 | .pipe(ngHtml2Js({ 32 | moduleName: "ion-digit-keyboard.templates" 33 | })) 34 | .pipe(concat("templates.js")) 35 | .pipe(uglify()) 36 | .pipe(gulp.dest("./dist")); 37 | }); 38 | 39 | gulp.task('css2js', ['sass'], function () { 40 | return gulp.src("./dist/*.css") 41 | .pipe(css2js()) 42 | .pipe(uglify()) 43 | .pipe(gulp.dest("./dist/")); 44 | }); 45 | 46 | gulp.task('bundle', ['clean', 'html2js', 'css2js'], function (done) { 47 | gulp.src(['./dist/*.js', './src/*.js']) 48 | .pipe(concat('ion-digit-keyboard.min.js')) 49 | .pipe(uglify()) 50 | .pipe(gulp.dest('dist/')) 51 | .on('end', function () { 52 | del(['dist/templates.js', 'dist/ion-digit-keyboard.min.css']); 53 | done(); 54 | }); 55 | }); 56 | 57 | gulp.task('default', ['bundle']); 58 | 59 | gulp.task('watch', function () { 60 | gulp.watch('./src/*', ['bundle']); 61 | }); 62 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_button-bar.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Button Bar 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .button-bar { 8 | @include display-flex(); 9 | @include flex(1); 10 | width: 100%; 11 | 12 | &.button-bar-inline { 13 | display: block; 14 | width: auto; 15 | 16 | @include clearfix(); 17 | 18 | > .button { 19 | width: auto; 20 | display: inline-block; 21 | float: left; 22 | } 23 | } 24 | 25 | &.bar-light > .button { 26 | border-color: $button-light-border; 27 | } 28 | &.bar-stable > .button { 29 | border-color: $button-stable-border; 30 | } 31 | &.bar-positive > .button { 32 | border-color: $button-positive-border; 33 | } 34 | &.bar-calm > .button { 35 | border-color: $button-calm-border; 36 | } 37 | &.bar-assertive > .button { 38 | border-color: $button-assertive-border; 39 | } 40 | &.bar-balanced > .button { 41 | border-color: $button-balanced-border; 42 | } 43 | &.bar-energized > .button { 44 | border-color: $button-energized-border; 45 | } 46 | &.bar-royal > .button { 47 | border-color: $button-royal-border; 48 | } 49 | &.bar-dark > .button { 50 | border-color: $button-dark-border; 51 | } 52 | } 53 | 54 | .button-bar > .button { 55 | @include flex(1); 56 | display: block; 57 | 58 | overflow: hidden; 59 | 60 | padding: 0 16px; 61 | 62 | width: 0; 63 | 64 | border-width: 1px 0px 1px 1px; 65 | border-radius: 0; 66 | text-align: center; 67 | text-overflow: ellipsis; 68 | white-space: nowrap; 69 | 70 | &:before, 71 | .icon:before { 72 | line-height: 44px; 73 | } 74 | 75 | &:first-child { 76 | border-radius: $button-border-radius 0px 0px $button-border-radius; 77 | } 78 | &:last-child { 79 | border-right-width: 1px; 80 | border-radius: 0px $button-border-radius $button-border-radius 0px; 81 | } 82 | &:only-child { 83 | border-radius: $button-border-radius; 84 | } 85 | } 86 | 87 | .button-bar > .button-small { 88 | &:before, 89 | .icon:before { 90 | line-height: 28px; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_platform.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Platform 4 | * -------------------------------------------------- 5 | * Platform specific tweaks 6 | */ 7 | 8 | .platform-ios.platform-cordova { 9 | // iOS has a status bar which sits on top of the header. 10 | // Bump down everything to make room for it. However, if 11 | // if its in Cordova, and set to fullscreen, then disregard the bump. 12 | &:not(.fullscreen) { 13 | .bar-header:not(.bar-subheader) { 14 | height: $bar-height + $ios-statusbar-height; 15 | 16 | &.item-input-inset .item-input-wrapper { 17 | margin-top: 19px !important; 18 | } 19 | 20 | > * { 21 | margin-top: $ios-statusbar-height; 22 | } 23 | } 24 | .tabs-top > .tabs, 25 | .tabs.tabs-top { 26 | top: $bar-height + $ios-statusbar-height; 27 | } 28 | 29 | .has-header, 30 | .bar-subheader { 31 | top: $bar-height + $ios-statusbar-height; 32 | } 33 | .has-subheader { 34 | top: $bar-height + $bar-subheader-height + $ios-statusbar-height; 35 | } 36 | .has-header.has-tabs-top { 37 | top: $bar-height + $tabs-height + $ios-statusbar-height; 38 | } 39 | .has-header.has-subheader.has-tabs-top { 40 | top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height; 41 | } 42 | } 43 | .popover{ 44 | .bar-header:not(.bar-subheader) { 45 | height: $bar-height; 46 | &.item-input-inset .item-input-wrapper { 47 | margin-top: -1px; 48 | } 49 | > * { 50 | margin-top: 0; 51 | } 52 | } 53 | .has-header, 54 | .bar-subheader { 55 | top: $bar-height; 56 | } 57 | .has-subheader { 58 | top: $bar-height + $bar-subheader-height; 59 | } 60 | } 61 | &.status-bar-hide { 62 | // Cordova doesn't adjust the body height correctly, this makes up for it 63 | margin-bottom: 20px; 64 | } 65 | } 66 | 67 | @media (orientation:landscape) { 68 | .platform-ios.platform-browser.platform-ipad { 69 | position: fixed; // required for iPad 7 Safari 70 | } 71 | } 72 | 73 | .platform-c:not(.enable-transitions) * { 74 | // disable transitions on grade-c devices (Android 2) 75 | -webkit-transition: none !important; 76 | transition: none !important; 77 | } 78 | -------------------------------------------------------------------------------- /examples/example1/www/js/main.controller.js: -------------------------------------------------------------------------------- 1 | angular.module('starter').controller('MainController', ['$scope', MainController]); 2 | 3 | function MainController($scope) { 4 | $scope.password = ''; 5 | $scope.canErase = false; 6 | $scope.pinDotVisible = {}; 7 | $scope.success = null; 8 | 9 | $scope.keyboardSettings = { 10 | showLetters: true, 11 | theme: 'dark', 12 | 13 | action: function(number) { 14 | if ($scope.password.length < 4) { 15 | $scope.password += number; 16 | $scope.pinDotVisible[$scope.password.length] = true; 17 | $scope.canErase = true; 18 | $scope.success = null; 19 | } 20 | }, 21 | 22 | // Clear 23 | leftButton: { 24 | html: '', 25 | action: function() { 26 | $scope.password = ''; 27 | $scope.pinDotVisible = {}; 28 | $scope.canErase = false; 29 | $scope.success = null; 30 | }, 31 | style: { 32 | color: '#fff', 33 | bgColor: 'transparent', 34 | activeBgColor: 'rgba(0, 0, 0, 0.50)', 35 | borderColor: 'transparent' 36 | } 37 | }, 38 | 39 | // Submit login 40 | rightButton: { 41 | html: '', 42 | action: function() { 43 | if ($scope.password == '1234') { 44 | $scope.success = true; 45 | } else { 46 | $scope.success = false; 47 | $scope.password = ''; 48 | $scope.canErase = false; 49 | $scope.pinDotVisible = {}; 50 | } 51 | }, 52 | style: { 53 | color: '#fff', 54 | bgColor: 'transparent', 55 | activeBgColor: 'rgba(0, 0, 0, 0.50)', 56 | borderColor: 'transparent' 57 | } 58 | } 59 | } 60 | 61 | $scope.doErase = function() { 62 | $scope.pinDotVisible[$scope.password.length] = false; 63 | $scope.password = $scope.password.slice(0, -1); 64 | if ($scope.password.length == 0) $scope.canErase = false; 65 | } 66 | 67 | /*$scope.toggleKeyboard = function() { 68 | $scope.hideKeyboard = !$scope.hideKeyboard; 69 | }*/ 70 | 71 | $scope.showKeyboard = function() { 72 | $scope.keyboardVisible = true; 73 | } 74 | 75 | $scope.hideKeyboard = function() { 76 | $scope.keyboardVisible = false; 77 | } 78 | 79 | /*$scope.hideKeyboard = function($event) { 80 | if (typeof $event.target.attributes.type == 'undefined' || $event.target.attributes.type.value != 'password') { 81 | $scope.keyboardVisible = false; 82 | } 83 | }*/ 84 | } -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_spinner.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Spinners 3 | * -------------------------------------------------- 4 | */ 5 | 6 | .spinner { 7 | svg { 8 | width: $spinner-width; 9 | height: $spinner-height; 10 | } 11 | 12 | stroke: $spinner-default-stroke; 13 | fill: $spinner-default-fill; 14 | 15 | &.spinner-light { 16 | stroke: $spinner-light-stroke; 17 | fill: $spinner-light-fill; 18 | } 19 | &.spinner-stable { 20 | stroke: $spinner-stable-stroke; 21 | fill: $spinner-stable-fill; 22 | } 23 | &.spinner-positive { 24 | stroke: $spinner-positive-stroke; 25 | fill: $spinner-positive-fill; 26 | } 27 | &.spinner-calm { 28 | stroke: $spinner-calm-stroke; 29 | fill: $spinner-calm-fill; 30 | } 31 | &.spinner-balanced { 32 | stroke: $spinner-balanced-stroke; 33 | fill: $spinner-balanced-fill; 34 | } 35 | &.spinner-assertive { 36 | stroke: $spinner-assertive-stroke; 37 | fill: $spinner-assertive-fill; 38 | } 39 | &.spinner-energized { 40 | stroke: $spinner-energized-stroke; 41 | fill: $spinner-energized-fill; 42 | } 43 | &.spinner-royal { 44 | stroke: $spinner-royal-stroke; 45 | fill: $spinner-royal-fill; 46 | } 47 | &.spinner-dark { 48 | stroke: $spinner-dark-stroke; 49 | fill: $spinner-dark-fill; 50 | } 51 | } 52 | 53 | .spinner-android { 54 | stroke: #4b8bf4; 55 | } 56 | 57 | .spinner-ios, 58 | .spinner-ios-small { 59 | stroke: #69717d; 60 | } 61 | 62 | .spinner-spiral { 63 | .stop1 { 64 | stop-color: $spinner-light-fill; 65 | stop-opacity: 0; 66 | } 67 | 68 | &.spinner-light { 69 | .stop1 { 70 | stop-color: $spinner-default-fill; 71 | } 72 | .stop2 { 73 | stop-color: $spinner-light-fill; 74 | } 75 | } 76 | &.spinner-stable .stop2 { 77 | stop-color: $spinner-stable-fill; 78 | } 79 | &.spinner-positive .stop2 { 80 | stop-color: $spinner-positive-fill; 81 | } 82 | &.spinner-calm .stop2 { 83 | stop-color: $spinner-calm-fill; 84 | } 85 | &.spinner-balanced .stop2 { 86 | stop-color: $spinner-balanced-fill; 87 | } 88 | &.spinner-assertive .stop2 { 89 | stop-color: $spinner-assertive-fill; 90 | } 91 | &.spinner-energized .stop2 { 92 | stop-color: $spinner-energized-fill; 93 | } 94 | &.spinner-royal .stop2 { 95 | stop-color: $spinner-royal-fill; 96 | } 97 | &.spinner-dark .stop2 { 98 | stop-color: $spinner-dark-fill; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_popup.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Popups 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .popup-container { 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | bottom: 0; 12 | right: 0; 13 | background: rgba(0,0,0,0); 14 | 15 | @include display-flex(); 16 | @include justify-content(center); 17 | @include align-items(center); 18 | 19 | z-index: $z-index-popup; 20 | 21 | // Start hidden 22 | visibility: hidden; 23 | &.popup-showing { 24 | visibility: visible; 25 | } 26 | 27 | &.popup-hidden .popup { 28 | @include animation-name(scaleOut); 29 | @include animation-duration($popup-leave-animation-duration); 30 | @include animation-timing-function(ease-in-out); 31 | @include animation-fill-mode(both); 32 | } 33 | 34 | &.active .popup { 35 | @include animation-name(superScaleIn); 36 | @include animation-duration($popup-enter-animation-duration); 37 | @include animation-timing-function(ease-in-out); 38 | @include animation-fill-mode(both); 39 | } 40 | 41 | .popup { 42 | width: $popup-width; 43 | max-width: 100%; 44 | max-height: 90%; 45 | 46 | border-radius: $popup-border-radius; 47 | background-color: $popup-background-color; 48 | 49 | @include display-flex(); 50 | @include flex-direction(column); 51 | } 52 | 53 | input, 54 | textarea { 55 | width: 100%; 56 | } 57 | } 58 | 59 | .popup-head { 60 | padding: 15px 10px; 61 | border-bottom: 1px solid #eee; 62 | text-align: center; 63 | } 64 | .popup-title { 65 | margin: 0; 66 | padding: 0; 67 | font-size: 15px; 68 | } 69 | .popup-sub-title { 70 | margin: 5px 0 0 0; 71 | padding: 0; 72 | font-weight: normal; 73 | font-size: 11px; 74 | } 75 | .popup-body { 76 | padding: 10px; 77 | overflow: auto; 78 | } 79 | 80 | .popup-buttons { 81 | @include display-flex(); 82 | @include flex-direction(row); 83 | padding: 10px; 84 | min-height: $popup-button-min-height + 20; 85 | 86 | .button { 87 | @include flex(1); 88 | display: block; 89 | min-height: $popup-button-min-height; 90 | border-radius: $popup-button-border-radius; 91 | line-height: $popup-button-line-height; 92 | 93 | margin-right: 5px; 94 | &:last-child { 95 | margin-right: 0px; 96 | } 97 | } 98 | } 99 | 100 | .popup-open { 101 | pointer-events: none; 102 | 103 | &.modal-open .modal { 104 | pointer-events: none; 105 | } 106 | 107 | .popup-backdrop, .popup { 108 | pointer-events: auto; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_modal.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Modals 4 | * -------------------------------------------------- 5 | * Modals are independent windows that slide in from off-screen. 6 | */ 7 | 8 | .modal-backdrop, 9 | .modal-backdrop-bg { 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | z-index: $z-index-modal; 14 | width: 100%; 15 | height: 100%; 16 | } 17 | 18 | .modal-backdrop-bg { 19 | pointer-events: none; 20 | } 21 | 22 | .modal { 23 | display: block; 24 | position: absolute; 25 | top: 0; 26 | z-index: $z-index-modal; 27 | overflow: hidden; 28 | min-height: 100%; 29 | width: 100%; 30 | background-color: $modal-bg-color; 31 | } 32 | 33 | @media (min-width: $modal-inset-mode-break-point) { 34 | // inset mode is when the modal doesn't fill the entire 35 | // display but instead is centered within a large display 36 | .modal { 37 | top: $modal-inset-mode-top; 38 | right: $modal-inset-mode-right; 39 | bottom: $modal-inset-mode-bottom; 40 | left: $modal-inset-mode-left; 41 | min-height: $modal-inset-mode-min-height; 42 | width: (100% - $modal-inset-mode-left - $modal-inset-mode-right); 43 | } 44 | 45 | .modal.ng-leave-active { 46 | bottom: 0; 47 | } 48 | 49 | // remove ios header padding from inset header 50 | .platform-ios.platform-cordova .modal-wrapper .modal { 51 | .bar-header:not(.bar-subheader) { 52 | height: $bar-height; 53 | > * { 54 | margin-top: 0; 55 | } 56 | } 57 | .tabs-top > .tabs, 58 | .tabs.tabs-top { 59 | top: $bar-height; 60 | } 61 | .has-header, 62 | .bar-subheader { 63 | top: $bar-height; 64 | } 65 | .has-subheader { 66 | top: $bar-height + $bar-subheader-height; 67 | } 68 | .has-header.has-tabs-top { 69 | top: $bar-height + $tabs-height; 70 | } 71 | .has-header.has-subheader.has-tabs-top { 72 | top: $bar-height + $bar-subheader-height + $tabs-height; 73 | } 74 | } 75 | 76 | .modal-backdrop-bg { 77 | @include transition(opacity 300ms ease-in-out); 78 | background-color: $modal-backdrop-bg-active; 79 | opacity: 0; 80 | } 81 | 82 | .active .modal-backdrop-bg { 83 | opacity: 0.5; 84 | } 85 | } 86 | 87 | // disable clicks on all but the modal 88 | .modal-open { 89 | pointer-events: none; 90 | 91 | .modal, 92 | .modal-backdrop { 93 | pointer-events: auto; 94 | } 95 | // prevent clicks on modal when loading overlay is active though 96 | &.loading-active { 97 | .modal, 98 | .modal-backdrop { 99 | pointer-events: none; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_list.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Lists 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .list { 8 | position: relative; 9 | padding-top: $item-border-width; 10 | padding-bottom: $item-border-width; 11 | padding-left: 0; // reset padding because ul and ol 12 | margin-bottom: 20px; 13 | } 14 | .list:last-child { 15 | margin-bottom: 0px; 16 | &.card{ 17 | margin-bottom:40px; 18 | } 19 | } 20 | 21 | 22 | /** 23 | * List Header 24 | * -------------------------------------------------- 25 | */ 26 | 27 | .list-header { 28 | margin-top: $list-header-margin-top; 29 | padding: $list-header-padding; 30 | background-color: $list-header-bg; 31 | color: $list-header-color; 32 | font-weight: bold; 33 | } 34 | 35 | // when its a card make sure it doesn't duplicate top and bottom borders 36 | .card.list .list-item { 37 | padding-right: 1px; 38 | padding-left: 1px; 39 | } 40 | 41 | 42 | /** 43 | * Cards and Inset Lists 44 | * -------------------------------------------------- 45 | * A card and list-inset are close to the same thing, except a card as a box shadow. 46 | */ 47 | 48 | .card, 49 | .list-inset { 50 | overflow: hidden; 51 | margin: ($content-padding * 2) $content-padding; 52 | border-radius: $card-border-radius; 53 | background-color: $card-body-bg; 54 | } 55 | 56 | .card { 57 | padding-top: $item-border-width; 58 | padding-bottom: $item-border-width; 59 | box-shadow: $card-box-shadow; 60 | 61 | .item { 62 | border-left: 0; 63 | border-right: 0; 64 | } 65 | .item:first-child { 66 | border-top: 0; 67 | } 68 | .item:last-child { 69 | border-bottom: 0; 70 | } 71 | } 72 | 73 | .padding { 74 | .card, .list-inset { 75 | margin-left: 0; 76 | margin-right: 0; 77 | } 78 | } 79 | 80 | .card .item, 81 | .list-inset .item, 82 | .padding > .list .item 83 | { 84 | &:first-child { 85 | border-top-left-radius: $card-border-radius; 86 | border-top-right-radius: $card-border-radius; 87 | 88 | .item-content { 89 | border-top-left-radius: $card-border-radius; 90 | border-top-right-radius: $card-border-radius; 91 | } 92 | } 93 | &:last-child { 94 | border-bottom-right-radius: $card-border-radius; 95 | border-bottom-left-radius: $card-border-radius; 96 | 97 | .item-content { 98 | border-bottom-right-radius: $card-border-radius; 99 | border-bottom-left-radius: $card-border-radius; 100 | } 101 | } 102 | } 103 | 104 | .card .item:last-child, 105 | .list-inset .item:last-child { 106 | margin-bottom: $item-border-width * -1; 107 | } 108 | 109 | .card .item, 110 | .list-inset .item, 111 | .padding > .list .item, 112 | .padding-horizontal > .list .item { 113 | margin-right: 0; 114 | margin-left: 0; 115 | 116 | &.item-input input { 117 | padding-right: 44px; 118 | } 119 | } 120 | .padding-left > .list .item { 121 | margin-left: 0; 122 | } 123 | .padding-right > .list .item { 124 | margin-right: 0; 125 | } 126 | -------------------------------------------------------------------------------- /examples/example1/hooks/after_prepare/010_add_platform_class.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // Add Platform Class 4 | // v1.0 5 | // Automatically adds the platform class to the body tag 6 | // after the `prepare` command. By placing the platform CSS classes 7 | // directly in the HTML built for the platform, it speeds up 8 | // rendering the correct layout/style for the specific platform 9 | // instead of waiting for the JS to figure out the correct classes. 10 | 11 | var fs = require('fs'); 12 | var path = require('path'); 13 | 14 | var rootdir = process.argv[2]; 15 | 16 | function addPlatformBodyTag(indexPath, platform) { 17 | // add the platform class to the body tag 18 | try { 19 | var platformClass = 'platform-' + platform; 20 | var cordovaClass = 'platform-cordova platform-webview'; 21 | 22 | var html = fs.readFileSync(indexPath, 'utf8'); 23 | 24 | var bodyTag = findBodyTag(html); 25 | if(!bodyTag) return; // no opening body tag, something's wrong 26 | 27 | if(bodyTag.indexOf(platformClass) > -1) return; // already added 28 | 29 | var newBodyTag = bodyTag; 30 | 31 | var classAttr = findClassAttr(bodyTag); 32 | if(classAttr) { 33 | // body tag has existing class attribute, add the classname 34 | var endingQuote = classAttr.substring(classAttr.length-1); 35 | var newClassAttr = classAttr.substring(0, classAttr.length-1); 36 | newClassAttr += ' ' + platformClass + ' ' + cordovaClass + endingQuote; 37 | newBodyTag = bodyTag.replace(classAttr, newClassAttr); 38 | 39 | } else { 40 | // add class attribute to the body tag 41 | newBodyTag = bodyTag.replace('>', ' class="' + platformClass + ' ' + cordovaClass + '">'); 42 | } 43 | 44 | html = html.replace(bodyTag, newBodyTag); 45 | 46 | fs.writeFileSync(indexPath, html, 'utf8'); 47 | 48 | process.stdout.write('add to body class: ' + platformClass + '\n'); 49 | } catch(e) { 50 | process.stdout.write(e); 51 | } 52 | } 53 | 54 | function findBodyTag(html) { 55 | // get the body tag 56 | try{ 57 | return html.match(/])(.*?)>/gi)[0]; 58 | }catch(e){} 59 | } 60 | 61 | function findClassAttr(bodyTag) { 62 | // get the body tag's class attribute 63 | try{ 64 | return bodyTag.match(/ class=["|'](.*?)["|']/gi)[0]; 65 | }catch(e){} 66 | } 67 | 68 | if (rootdir) { 69 | 70 | // go through each of the platform directories that have been prepared 71 | var platforms = (process.env.CORDOVA_PLATFORMS ? process.env.CORDOVA_PLATFORMS.split(',') : []); 72 | 73 | for(var x=0; x .scroll{ 83 | &.overscroll{ 84 | position:fixed; 85 | right: 0; 86 | left: 0; 87 | } 88 | -webkit-overflow-scrolling:touch; 89 | width:100%; 90 | } 91 | 92 | .overflow-scroll.padding > .scroll.overscroll{ 93 | padding: 10px; 94 | } 95 | @-webkit-keyframes refresh-spin { 96 | 0% { -webkit-transform: translate3d(0,0,0) rotate(0); } 97 | 100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } 98 | } 99 | 100 | @keyframes refresh-spin { 101 | 0% { transform: translate3d(0,0,0) rotate(0); } 102 | 100% { transform: translate3d(0,0,0) rotate(180deg); } 103 | } 104 | 105 | @-webkit-keyframes refresh-spin-back { 106 | 0% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } 107 | 100% { -webkit-transform: translate3d(0,0,0) rotate(0); } 108 | } 109 | 110 | @keyframes refresh-spin-back { 111 | 0% { transform: translate3d(0,0,0) rotate(180deg); } 112 | 100% { transform: translate3d(0,0,0) rotate(0); } 113 | } 114 | -------------------------------------------------------------------------------- /examples/example1/hooks/README.md: -------------------------------------------------------------------------------- 1 | 21 | # Cordova Hooks 22 | 23 | This directory may contain scripts used to customize cordova commands. This 24 | directory used to exist at `.cordova/hooks`, but has now been moved to the 25 | project root. Any scripts you add to these directories will be executed before 26 | and after the commands corresponding to the directory name. Useful for 27 | integrating your own build systems or integrating with version control systems. 28 | 29 | __Remember__: Make your scripts executable. 30 | 31 | ## Hook Directories 32 | The following subdirectories will be used for hooks: 33 | 34 | after_build/ 35 | after_compile/ 36 | after_docs/ 37 | after_emulate/ 38 | after_platform_add/ 39 | after_platform_rm/ 40 | after_platform_ls/ 41 | after_plugin_add/ 42 | after_plugin_ls/ 43 | after_plugin_rm/ 44 | after_plugin_search/ 45 | after_prepare/ 46 | after_run/ 47 | after_serve/ 48 | before_build/ 49 | before_compile/ 50 | before_docs/ 51 | before_emulate/ 52 | before_platform_add/ 53 | before_platform_rm/ 54 | before_platform_ls/ 55 | before_plugin_add/ 56 | before_plugin_ls/ 57 | before_plugin_rm/ 58 | before_plugin_search/ 59 | before_prepare/ 60 | before_run/ 61 | before_serve/ 62 | pre_package/ <-- Windows 8 and Windows Phone only. 63 | 64 | ## Script Interface 65 | 66 | All scripts are run 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: 67 | 68 | * CORDOVA_VERSION - The version of the Cordova-CLI. 69 | * CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios). 70 | * CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer) 71 | * CORDOVA_HOOK - Path to the hook that is being executed. 72 | * CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate) 73 | 74 | If a script returns a non-zero exit code, then the parent cordova command will be aborted. 75 | 76 | 77 | ## Writing hooks 78 | 79 | We highly recommend writting your hooks using Node.js so that they are 80 | cross-platform. Some good examples are shown here: 81 | 82 | [http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/) 83 | 84 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_select.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Select 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .item-select { 8 | position: relative; 9 | 10 | select { 11 | @include appearance(none); 12 | position: absolute; 13 | top: 0; 14 | bottom: 0; 15 | right: 0; 16 | padding: 0 ($item-padding * 3) 0 $item-padding; 17 | max-width: 65%; 18 | 19 | border: none; 20 | background: $item-default-bg; 21 | color: #333; 22 | 23 | // hack to hide default dropdown arrow in FF 24 | text-indent: .01px; 25 | text-overflow: ''; 26 | 27 | white-space: nowrap; 28 | font-size: $font-size-base; 29 | 30 | cursor: pointer; 31 | direction: rtl; // right align the select text 32 | } 33 | 34 | select::-ms-expand { 35 | // hide default dropdown arrow in IE 36 | display: none; 37 | } 38 | 39 | option { 40 | direction: ltr; 41 | } 42 | 43 | &:after { 44 | position: absolute; 45 | top: 50%; 46 | right: $item-padding; 47 | margin-top: -3px; 48 | width: 0; 49 | height: 0; 50 | border-top: 5px solid; 51 | border-right: 5px solid rgba(0, 0, 0, 0); 52 | border-left: 5px solid rgba(0, 0, 0, 0); 53 | color: #999; 54 | content: ""; 55 | pointer-events: none; 56 | } 57 | &.item-light { 58 | select{ 59 | background:$item-light-bg; 60 | color:$item-light-text; 61 | } 62 | } 63 | &.item-stable { 64 | select{ 65 | background:$item-stable-bg; 66 | color:$item-stable-text; 67 | } 68 | &:after, .input-label{ 69 | color:darken($item-stable-border,30%); 70 | } 71 | } 72 | &.item-positive { 73 | select{ 74 | background:$item-positive-bg; 75 | color:$item-positive-text; 76 | } 77 | &:after, .input-label{ 78 | color:$item-positive-text; 79 | } 80 | } 81 | &.item-calm { 82 | select{ 83 | background:$item-calm-bg; 84 | color:$item-calm-text; 85 | } 86 | &:after, .input-label{ 87 | color:$item-calm-text; 88 | } 89 | } 90 | &.item-assertive { 91 | select{ 92 | background:$item-assertive-bg; 93 | color:$item-assertive-text; 94 | } 95 | &:after, .input-label{ 96 | color:$item-assertive-text; 97 | } 98 | } 99 | &.item-balanced { 100 | select{ 101 | background:$item-balanced-bg; 102 | color:$item-balanced-text; 103 | } 104 | &:after, .input-label{ 105 | color:$item-balanced-text; 106 | } 107 | } 108 | &.item-energized { 109 | select{ 110 | background:$item-energized-bg; 111 | color:$item-energized-text; 112 | } 113 | &:after, .input-label{ 114 | color:$item-energized-text; 115 | } 116 | } 117 | &.item-royal { 118 | select{ 119 | background:$item-royal-bg; 120 | color:$item-royal-text; 121 | } 122 | &:after, .input-label{ 123 | color:$item-royal-text; 124 | } 125 | } 126 | &.item-dark { 127 | select{ 128 | background:$item-dark-bg; 129 | color:$item-dark-text; 130 | } 131 | &:after, .input-label{ 132 | color:$item-dark-text; 133 | } 134 | } 135 | } 136 | 137 | select { 138 | &[multiple], 139 | &[size] { 140 | height: auto; 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /examples/example1/config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | example1 4 | 5 | An Ionic Framework and Cordova project. 6 | 7 | 8 | Your Name Here 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/keyboard.tpl.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
1 6 |
7 |
8 |
9 |
10 |
11 |
12 |
2 13 |
ABC
14 |
15 |
16 |
17 |
18 |
19 |
3 20 |
DEF
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
4 29 |
GHI
30 |
31 |
32 |
33 |
34 |
35 |
5 36 |
JKL
37 |
38 |
39 |
40 |
41 |
42 |
6 43 |
MNO
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
7 52 |
PQRS
53 |
54 |
55 |
56 |
57 |
58 |
8 59 |
TUV
60 |
61 |
62 |
63 |
64 |
65 |
9 66 |
WXYZ
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
0
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
-------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_action-sheet.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Action Sheets 3 | * -------------------------------------------------- 4 | */ 5 | 6 | .action-sheet-backdrop { 7 | @include transition(background-color 150ms ease-in-out); 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | z-index: $z-index-action-sheet; 12 | width: 100%; 13 | height: 100%; 14 | background-color: rgba(0,0,0,0); 15 | 16 | &.active { 17 | background-color: rgba(0,0,0,0.4); 18 | } 19 | } 20 | 21 | .action-sheet-wrapper { 22 | @include translate3d(0, 100%, 0); 23 | @include transition(all cubic-bezier(.36, .66, .04, 1) 500ms); 24 | position: absolute; 25 | bottom: 0; 26 | left: 0; 27 | right: 0; 28 | width: 100%; 29 | max-width: 500px; 30 | margin: auto; 31 | } 32 | 33 | .action-sheet-up { 34 | @include translate3d(0, 0, 0); 35 | } 36 | 37 | .action-sheet { 38 | margin-left: $sheet-margin; 39 | margin-right: $sheet-margin; 40 | width: auto; 41 | z-index: $z-index-action-sheet; 42 | overflow: hidden; 43 | 44 | .button { 45 | display: block; 46 | padding: 1px; 47 | width: 100%; 48 | border-radius: 0; 49 | border-color: $sheet-options-border-color; 50 | background-color: transparent; 51 | 52 | color: $sheet-options-text-color; 53 | font-size: 21px; 54 | 55 | &:hover { 56 | color: $sheet-options-text-color; 57 | } 58 | &.destructive { 59 | color: #ff3b30; 60 | &:hover { 61 | color: #ff3b30; 62 | } 63 | } 64 | } 65 | 66 | .button.active, .button.activated { 67 | box-shadow: none; 68 | border-color: $sheet-options-border-color; 69 | color: $sheet-options-text-color; 70 | background: $sheet-options-bg-active-color; 71 | } 72 | } 73 | 74 | .action-sheet-has-icons .icon { 75 | position: absolute; 76 | left: 16px; 77 | } 78 | 79 | .action-sheet-title { 80 | padding: $sheet-margin * 2; 81 | color: #8f8f8f; 82 | text-align: center; 83 | font-size: 13px; 84 | } 85 | 86 | .action-sheet-group { 87 | margin-bottom: $sheet-margin; 88 | border-radius: $sheet-border-radius; 89 | background-color: #fff; 90 | overflow: hidden; 91 | 92 | .button { 93 | border-width: 1px 0px 0px 0px; 94 | } 95 | .button:first-child:last-child { 96 | border-width: 0; 97 | } 98 | } 99 | 100 | .action-sheet-options { 101 | background: $sheet-options-bg-color; 102 | } 103 | 104 | .action-sheet-cancel { 105 | .button { 106 | font-weight: 500; 107 | } 108 | } 109 | 110 | .action-sheet-open { 111 | pointer-events: none; 112 | 113 | &.modal-open .modal { 114 | pointer-events: none; 115 | } 116 | 117 | .action-sheet-backdrop { 118 | pointer-events: auto; 119 | } 120 | } 121 | 122 | 123 | .platform-android { 124 | 125 | .action-sheet-backdrop.active { 126 | background-color: rgba(0,0,0,0.2); 127 | } 128 | 129 | .action-sheet { 130 | margin: 0; 131 | 132 | .action-sheet-title, 133 | .button { 134 | text-align: left; 135 | border-color: transparent; 136 | font-size: 16px; 137 | color: inherit; 138 | } 139 | 140 | .action-sheet-title { 141 | font-size: 14px; 142 | padding: 16px; 143 | color: #666; 144 | } 145 | 146 | .button.active, 147 | .button.activated { 148 | background: #e8e8e8; 149 | } 150 | } 151 | 152 | .action-sheet-group { 153 | margin: 0; 154 | border-radius: 0; 155 | background-color: #fafafa; 156 | } 157 | 158 | .action-sheet-cancel { 159 | display: none; 160 | } 161 | 162 | .action-sheet-has-icons { 163 | 164 | .button { 165 | padding-left: 56px; 166 | } 167 | 168 | } 169 | 170 | } 171 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_type.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Typography 4 | * -------------------------------------------------- 5 | */ 6 | 7 | 8 | // Body text 9 | // ------------------------- 10 | 11 | p { 12 | margin: 0 0 ($line-height-computed / 2); 13 | } 14 | 15 | 16 | // Emphasis & misc 17 | // ------------------------- 18 | 19 | small { font-size: 85%; } 20 | cite { font-style: normal; } 21 | 22 | 23 | // Alignment 24 | // ------------------------- 25 | 26 | .text-left { text-align: left; } 27 | .text-right { text-align: right; } 28 | .text-center { text-align: center; } 29 | 30 | 31 | // Headings 32 | // ------------------------- 33 | 34 | h1, h2, h3, h4, h5, h6, 35 | .h1, .h2, .h3, .h4, .h5, .h6 { 36 | color: $base-color; 37 | font-weight: $headings-font-weight; 38 | font-family: $headings-font-family; 39 | line-height: $headings-line-height; 40 | 41 | small { 42 | font-weight: normal; 43 | line-height: 1; 44 | } 45 | } 46 | 47 | h1, .h1, 48 | h2, .h2, 49 | h3, .h3 { 50 | margin-top: $line-height-computed; 51 | margin-bottom: ($line-height-computed / 2); 52 | 53 | &:first-child { 54 | margin-top: 0; 55 | } 56 | 57 | + h1, + .h1, 58 | + h2, + .h2, 59 | + h3, + .h3 { 60 | margin-top: ($line-height-computed / 2); 61 | } 62 | } 63 | 64 | h4, .h4, 65 | h5, .h5, 66 | h6, .h6 { 67 | margin-top: ($line-height-computed / 2); 68 | margin-bottom: ($line-height-computed / 2); 69 | } 70 | 71 | h1, .h1 { font-size: floor($font-size-base * 2.60); } // ~36px 72 | h2, .h2 { font-size: floor($font-size-base * 2.15); } // ~30px 73 | h3, .h3 { font-size: ceil($font-size-base * 1.70); } // ~24px 74 | h4, .h4 { font-size: ceil($font-size-base * 1.25); } // ~18px 75 | h5, .h5 { font-size: $font-size-base; } 76 | h6, .h6 { font-size: ceil($font-size-base * 0.85); } // ~12px 77 | 78 | h1 small, .h1 small { font-size: ceil($font-size-base * 1.70); } // ~24px 79 | h2 small, .h2 small { font-size: ceil($font-size-base * 1.25); } // ~18px 80 | h3 small, .h3 small, 81 | h4 small, .h4 small { font-size: $font-size-base; } 82 | 83 | 84 | // Description Lists 85 | // ------------------------- 86 | 87 | dl { 88 | margin-bottom: $line-height-computed; 89 | } 90 | dt, 91 | dd { 92 | line-height: $line-height-base; 93 | } 94 | dt { 95 | font-weight: bold; 96 | } 97 | 98 | 99 | // Blockquotes 100 | // ------------------------- 101 | 102 | blockquote { 103 | margin: 0 0 $line-height-computed; 104 | padding: ($line-height-computed / 2) $line-height-computed; 105 | border-left: 5px solid gray; 106 | 107 | p { 108 | font-weight: 300; 109 | font-size: ($font-size-base * 1.25); 110 | line-height: 1.25; 111 | } 112 | 113 | p:last-child { 114 | margin-bottom: 0; 115 | } 116 | 117 | small { 118 | display: block; 119 | line-height: $line-height-base; 120 | &:before { 121 | content: '\2014 \00A0';// EM DASH, NBSP; 122 | } 123 | } 124 | } 125 | 126 | 127 | // Quotes 128 | // ------------------------- 129 | 130 | q:before, 131 | q:after, 132 | blockquote:before, 133 | blockquote:after { 134 | content: ""; 135 | } 136 | 137 | 138 | // Addresses 139 | // ------------------------- 140 | 141 | address { 142 | display: block; 143 | margin-bottom: $line-height-computed; 144 | font-style: normal; 145 | line-height: $line-height-base; 146 | } 147 | 148 | 149 | // Links 150 | // ------------------------- 151 | a { 152 | color: $link-color; 153 | } 154 | 155 | a.subdued { 156 | padding-right: 10px; 157 | color: #888; 158 | text-decoration: none; 159 | 160 | &:hover { 161 | text-decoration: none; 162 | } 163 | &:last-child { 164 | padding-right: 0; 165 | } 166 | } 167 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Grid 3 | * -------------------------------------------------- 4 | * Using flexbox for the grid, inspired by Philip Walton: 5 | * http://philipwalton.github.io/solved-by-flexbox/demos/grids/ 6 | * By default each .col within a .row will evenly take up 7 | * available width, and the height of each .col with take 8 | * up the height of the tallest .col in the same .row. 9 | */ 10 | 11 | .row { 12 | @include display-flex(); 13 | padding: ($grid-padding-width / 2); 14 | width: 100%; 15 | } 16 | 17 | .row-wrap { 18 | @include flex-wrap(wrap); 19 | } 20 | 21 | .row-no-padding { 22 | padding: 0; 23 | 24 | > .col { 25 | padding: 0; 26 | } 27 | } 28 | 29 | .row + .row { 30 | margin-top: ($grid-padding-width / 2) * -1; 31 | padding-top: 0; 32 | } 33 | 34 | .col { 35 | @include flex(1); 36 | display: block; 37 | padding: ($grid-padding-width / 2); 38 | width: 100%; 39 | } 40 | 41 | 42 | /* Vertically Align Columns */ 43 | /* .row-* vertically aligns every .col in the .row */ 44 | .row-top { 45 | @include align-items(flex-start); 46 | } 47 | .row-bottom { 48 | @include align-items(flex-end); 49 | } 50 | .row-center { 51 | @include align-items(center); 52 | } 53 | .row-stretch { 54 | @include align-items(stretch); 55 | } 56 | .row-baseline { 57 | @include align-items(baseline); 58 | } 59 | 60 | /* .col-* vertically aligns an individual .col */ 61 | .col-top { 62 | @include align-self(flex-start); 63 | } 64 | .col-bottom { 65 | @include align-self(flex-end); 66 | } 67 | .col-center { 68 | @include align-self(center); 69 | } 70 | 71 | /* Column Offsets */ 72 | .col-offset-10 { 73 | margin-left: 10%; 74 | } 75 | .col-offset-20 { 76 | margin-left: 20%; 77 | } 78 | .col-offset-25 { 79 | margin-left: 25%; 80 | } 81 | .col-offset-33, .col-offset-34 { 82 | margin-left: 33.3333%; 83 | } 84 | .col-offset-50 { 85 | margin-left: 50%; 86 | } 87 | .col-offset-66, .col-offset-67 { 88 | margin-left: 66.6666%; 89 | } 90 | .col-offset-75 { 91 | margin-left: 75%; 92 | } 93 | .col-offset-80 { 94 | margin-left: 80%; 95 | } 96 | .col-offset-90 { 97 | margin-left: 90%; 98 | } 99 | 100 | 101 | /* Explicit Column Percent Sizes */ 102 | /* By default each grid column will evenly distribute */ 103 | /* across the grid. However, you can specify individual */ 104 | /* columns to take up a certain size of the available area */ 105 | .col-10 { 106 | @include flex(0, 0, 10%); 107 | max-width: 10%; 108 | } 109 | .col-20 { 110 | @include flex(0, 0, 20%); 111 | max-width: 20%; 112 | } 113 | .col-25 { 114 | @include flex(0, 0, 25%); 115 | max-width: 25%; 116 | } 117 | .col-33, .col-34 { 118 | @include flex(0, 0, 33.3333%); 119 | max-width: 33.3333%; 120 | } 121 | .col-40 { 122 | @include flex(0, 0, 40%); 123 | max-width: 40%; 124 | } 125 | .col-50 { 126 | @include flex(0, 0, 50%); 127 | max-width: 50%; 128 | } 129 | .col-60 { 130 | @include flex(0, 0, 60%); 131 | max-width: 60%; 132 | } 133 | .col-66, .col-67 { 134 | @include flex(0, 0, 66.6666%); 135 | max-width: 66.6666%; 136 | } 137 | .col-75 { 138 | @include flex(0, 0, 75%); 139 | max-width: 75%; 140 | } 141 | .col-80 { 142 | @include flex(0, 0, 80%); 143 | max-width: 80%; 144 | } 145 | .col-90 { 146 | @include flex(0, 0, 90%); 147 | max-width: 90%; 148 | } 149 | 150 | 151 | /* Responsive Grid Classes */ 152 | /* Adding a class of responsive-X to a row */ 153 | /* will trigger the flex-direction to */ 154 | /* change to column and add some margin */ 155 | /* to any columns in the row for clearity */ 156 | 157 | @include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break); 158 | @include responsive-grid-break('.responsive-md', $grid-responsive-md-break); 159 | @include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break); 160 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_popover.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Popovers 4 | * -------------------------------------------------- 5 | * Popovers are independent views which float over content 6 | */ 7 | 8 | .popover-backdrop { 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | z-index: $z-index-popover; 13 | width: 100%; 14 | height: 100%; 15 | background-color: $popover-backdrop-bg-inactive; 16 | 17 | &.active { 18 | background-color: $popover-backdrop-bg-active; 19 | } 20 | } 21 | 22 | .popover { 23 | position: absolute; 24 | top: 25%; 25 | left: 50%; 26 | z-index: $z-index-popover; 27 | display: block; 28 | margin-top: 12px; 29 | margin-left: -$popover-width / 2; 30 | height: $popover-height; 31 | width: $popover-width; 32 | background-color: $popover-bg-color; 33 | box-shadow: $popover-box-shadow; 34 | opacity: 0; 35 | 36 | .item:first-child { 37 | border-top: 0; 38 | } 39 | 40 | .item:last-child { 41 | border-bottom: 0; 42 | } 43 | 44 | &.popover-bottom { 45 | margin-top: -12px; 46 | } 47 | } 48 | 49 | 50 | // Set popover border-radius 51 | .popover, 52 | .popover .bar-header { 53 | border-radius: $popover-border-radius; 54 | } 55 | .popover .scroll-content { 56 | z-index: 1; 57 | margin: 2px 0; 58 | } 59 | .popover .bar-header { 60 | border-bottom-right-radius: 0; 61 | border-bottom-left-radius: 0; 62 | } 63 | .popover .has-header { 64 | border-top-right-radius: 0; 65 | border-top-left-radius: 0; 66 | } 67 | .popover-arrow { 68 | display: none; 69 | } 70 | 71 | 72 | // iOS Popover 73 | .platform-ios { 74 | 75 | .popover { 76 | box-shadow: $popover-box-shadow-ios; 77 | border-radius: $popover-border-radius-ios; 78 | } 79 | .popover .bar-header { 80 | @include border-top-radius($popover-border-radius-ios); 81 | } 82 | .popover .scroll-content { 83 | margin: 8px 0; 84 | border-radius: $popover-border-radius-ios; 85 | } 86 | .popover .scroll-content.has-header { 87 | margin-top: 0; 88 | } 89 | .popover-arrow { 90 | position: absolute; 91 | display: block; 92 | top: -17px; 93 | width: 30px; 94 | height: 19px; 95 | overflow: hidden; 96 | 97 | &:after { 98 | position: absolute; 99 | top: 12px; 100 | left: 5px; 101 | width: 20px; 102 | height: 20px; 103 | background-color: $popover-bg-color; 104 | border-radius: 3px; 105 | content: ''; 106 | @include rotate(-45deg); 107 | } 108 | } 109 | .popover-bottom .popover-arrow { 110 | top: auto; 111 | bottom: -10px; 112 | &:after { 113 | top: -6px; 114 | } 115 | } 116 | } 117 | 118 | 119 | // Android Popover 120 | .platform-android { 121 | 122 | .popover { 123 | margin-top: -32px; 124 | background-color: $popover-bg-color-android; 125 | box-shadow: $popover-box-shadow-android; 126 | 127 | .item { 128 | border-color: $popover-bg-color-android; 129 | background-color: $popover-bg-color-android; 130 | color: #4d4d4d; 131 | } 132 | &.popover-bottom { 133 | margin-top: 32px; 134 | } 135 | } 136 | 137 | .popover-backdrop, 138 | .popover-backdrop.active { 139 | background-color: transparent; 140 | } 141 | } 142 | 143 | 144 | // disable clicks on all but the popover 145 | .popover-open { 146 | pointer-events: none; 147 | 148 | .popover, 149 | .popover-backdrop { 150 | pointer-events: auto; 151 | } 152 | // prevent clicks on popover when loading overlay is active though 153 | &.loading-active { 154 | .popover, 155 | .popover-backdrop { 156 | pointer-events: none; 157 | } 158 | } 159 | } 160 | 161 | 162 | // wider popover on larger viewports 163 | @media (min-width: $popover-large-break-point) { 164 | .popover { 165 | width: $popover-large-width; 166 | margin-left: -$popover-large-width / 2; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/js/angular/angular-resource.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | AngularJS v1.5.3 3 | (c) 2010-2016 Google, Inc. http://angularjs.org 4 | License: MIT 5 | */ 6 | (function(Q,d,G){'use strict';function H(t,g){g=g||{};d.forEach(g,function(d,q){delete g[q]});for(var q in t)!t.hasOwnProperty(q)||"$"===q.charAt(0)&&"$"===q.charAt(1)||(g[q]=t[q]);return g}var z=d.$$minErr("$resource"),N=/^(\.[a-zA-Z_$@][0-9a-zA-Z_$@]*)+$/;d.module("ngResource",["ng"]).provider("$resource",function(){var t=/^https?:\/\/[^\/]*/,g=this;this.defaults={stripTrailingSlashes:!0,actions:{get:{method:"GET"},save:{method:"POST"},query:{method:"GET",isArray:!0},remove:{method:"DELETE"},"delete":{method:"DELETE"}}}; 7 | this.$get=["$http","$log","$q","$timeout",function(q,M,I,J){function A(d,h){return encodeURIComponent(d).replace(/%40/gi,"@").replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,h?"%20":"+")}function B(d,h){this.template=d;this.defaults=v({},g.defaults,h);this.urlParams={}}function K(e,h,n,k){function c(a,b){var c={};b=v({},h,b);u(b,function(b,h){x(b)&&(b=b());var f;if(b&&b.charAt&&"@"==b.charAt(0)){f=a;var l=b.substr(1);if(null==l||""===l||"hasOwnProperty"===l||!N.test("."+ 8 | l))throw z("badmember",l);for(var l=l.split("."),m=0,k=l.length;m=document.documentMode&&n(g);a=g.innerHTML;g.innerHTML=a}while(a!==g.innerHTML);for(b=g.firstChild;b;){switch(b.nodeType){case 1:c.start(b.nodeName.toLowerCase(),E(b.attributes)); 7 | break;case 3:c.chars(b.textContent)}var d;if(!(d=b.firstChild)&&(1==b.nodeType&&c.end(b.nodeName.toLowerCase()),d=b.nextSibling,!d))for(;null==d;){b=b.parentNode;if(b===g)break;d=b.nextSibling;1==b.nodeType&&c.end(b.nodeName.toLowerCase())}b=d}for(;b=g.firstChild;)g.removeChild(b)}function E(a){for(var c={},b=0,d=a.length;b/g,">")}function v(a,c){var b=!1,d=e.bind(a,a.push);return{start:function(a,f){a=e.lowercase(a);!b&&H[a]&&(b=a);b||!0!==t[a]||(d("<"),d(a),e.forEach(f,function(b,f){var g=e.lowercase(f),h="img"===a&&"src"===g||"background"===g;!0!==I[g]||!0===y[g]&&!c(b,h)||(d(" "),d(f),d('="'),d(x(b)),d('"'))}),d(">"))},end:function(a){a=e.lowercase(a);b||!0!==t[a]||!0===z[a]||(d(""));a== 9 | b&&(b=!1)},chars:function(a){b||d(x(a))}}}function n(a){if(a.nodeType===Node.ELEMENT_NODE)for(var c=a.attributes,b=0,d=c.length;b"\u201d\u2019]/i,b=/^mailto:/i,d=e.$$minErr("linky"),g=e.isString;return function(f,h,m){function k(a){a&&p.push(C(a))}function q(a,b){var c;p.push("');k(b);p.push("")}if(null==f||""===f)return f;if(!g(f))throw d("notstring",f);for(var r=f,p=[],s,n;f=r.match(c);)s=f[0],f[2]||f[4]||(s=(f[3]?"http://":"mailto:")+s),n=f.index,k(r.substr(0,n)),q(s,f[0].replace(b,"")),r=r.substring(n+f[0].length);k(r);return a(p.join(""))}}])})(window,window.angular); 15 | //# sourceMappingURL=angular-sanitize.min.js.map 16 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_toggle.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Toggle 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .item-toggle { 8 | pointer-events: none; 9 | } 10 | 11 | .toggle { 12 | // set the color defaults 13 | @include toggle-style($toggle-on-default-border, $toggle-on-default-bg); 14 | 15 | position: relative; 16 | display: inline-block; 17 | pointer-events: auto; 18 | margin: -$toggle-hit-area-expansion; 19 | padding: $toggle-hit-area-expansion; 20 | 21 | &.dragging { 22 | .handle { 23 | background-color: $toggle-handle-dragging-bg-color !important; 24 | } 25 | } 26 | 27 | } 28 | 29 | .toggle { 30 | &.toggle-light { 31 | @include toggle-style($toggle-on-light-border, $toggle-on-light-bg); 32 | } 33 | &.toggle-stable { 34 | @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg); 35 | } 36 | &.toggle-positive { 37 | @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg); 38 | } 39 | &.toggle-calm { 40 | @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg); 41 | } 42 | &.toggle-assertive { 43 | @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg); 44 | } 45 | &.toggle-balanced { 46 | @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg); 47 | } 48 | &.toggle-energized { 49 | @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg); 50 | } 51 | &.toggle-royal { 52 | @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg); 53 | } 54 | &.toggle-dark { 55 | @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg); 56 | } 57 | } 58 | 59 | .toggle input { 60 | // hide the actual input checkbox 61 | display: none; 62 | } 63 | 64 | /* the track appearance when the toggle is "off" */ 65 | .toggle .track { 66 | @include transition-timing-function(ease-in-out); 67 | @include transition-duration($toggle-transition-duration); 68 | @include transition-property((background-color, border)); 69 | 70 | display: inline-block; 71 | box-sizing: border-box; 72 | width: $toggle-width; 73 | height: $toggle-height; 74 | border: solid $toggle-border-width $toggle-off-border-color; 75 | border-radius: $toggle-border-radius; 76 | background-color: $toggle-off-bg-color; 77 | content: ' '; 78 | cursor: pointer; 79 | pointer-events: none; 80 | } 81 | 82 | /* Fix to avoid background color bleeding */ 83 | /* (occurred on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */ 84 | .platform-android4_2 .toggle .track { 85 | -webkit-background-clip: padding-box; 86 | } 87 | 88 | /* the handle (circle) thats inside the toggle's track area */ 89 | /* also the handle's appearance when it is "off" */ 90 | .toggle .handle { 91 | @include transition($toggle-transition-duration cubic-bezier(0, 1.1, 1, 1.1)); 92 | @include transition-property((background-color, transform)); 93 | position: absolute; 94 | display: block; 95 | width: $toggle-handle-width; 96 | height: $toggle-handle-height; 97 | border-radius: $toggle-handle-radius; 98 | background-color: $toggle-handle-off-bg-color; 99 | top: $toggle-border-width + $toggle-hit-area-expansion; 100 | left: $toggle-border-width + $toggle-hit-area-expansion; 101 | box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.15); 102 | 103 | &:before { 104 | // used to create a larger (but hidden) hit area to slide the handle 105 | position: absolute; 106 | top: -4px; 107 | left: ( ($toggle-handle-width / 2) * -1) - 8; 108 | padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7); 109 | content: " "; 110 | } 111 | } 112 | 113 | .toggle input:checked + .track .handle { 114 | // the handle when the toggle is "on" 115 | @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0); 116 | background-color: $toggle-handle-on-bg-color; 117 | } 118 | 119 | .item-toggle.active { 120 | box-shadow: none; 121 | } 122 | 123 | .item-toggle, 124 | .item-toggle.item-complex .item-content { 125 | // make sure list item content have enough padding on right to fit the toggle 126 | padding-right: ($item-padding * 3) + $toggle-width; 127 | } 128 | 129 | .item-toggle.item-complex { 130 | padding-right: 0; 131 | } 132 | 133 | .item-toggle .toggle { 134 | // position the toggle to the right within a list item 135 | position: absolute; 136 | top: ($item-padding / 2) + 2; 137 | right: $item-padding; 138 | z-index: $z-index-item-toggle; 139 | } 140 | 141 | .toggle input:disabled + .track { 142 | opacity: .6; 143 | } 144 | 145 | .toggle-small { 146 | 147 | .track { 148 | border: 0; 149 | width: 34px; 150 | height: 15px; 151 | background: #9e9e9e; 152 | } 153 | input:checked + .track { 154 | background: rgba(0,150,137,.5); 155 | } 156 | .handle { 157 | top: 2px; 158 | left: 4px; 159 | width: 21px; 160 | height: 21px; 161 | box-shadow: 0 2px 5px rgba(0,0,0,.25); 162 | } 163 | input:checked + .track .handle { 164 | @include translate3d(16px, 0, 0); 165 | background: rgb(0,150,137); 166 | } 167 | &.item-toggle .toggle { 168 | top: 19px; 169 | } 170 | 171 | .toggle-light { 172 | @include toggle-small-style($toggle-on-light-bg); 173 | } 174 | .toggle-stable { 175 | @include toggle-small-style($toggle-on-stable-bg); 176 | } 177 | .toggle-positive { 178 | @include toggle-small-style($toggle-on-positive-bg); 179 | } 180 | .toggle-calm { 181 | @include toggle-small-style($toggle-on-calm-bg); 182 | } 183 | .toggle-assertive { 184 | @include toggle-small-style($toggle-on-assertive-bg); 185 | } 186 | .toggle-balanced { 187 | @include toggle-small-style($toggle-on-balanced-bg); 188 | } 189 | .toggle-energized { 190 | @include toggle-small-style($toggle-on-energized-bg); 191 | } 192 | .toggle-royal { 193 | @include toggle-small-style($toggle-on-royal-bg); 194 | } 195 | .toggle-dark { 196 | @include toggle-small-style($toggle-on-dark-bg); 197 | } 198 | } 199 | -------------------------------------------------------------------------------- /examples/example1/www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 87 | 88 | 147 | 148 | 149 | 150 | 151 | 163 | 164 | 165 | 166 |

Login

167 |

Enter pin code :

168 |
169 |
170 |
171 |
172 |
173 | 174 |
175 |
176 |

Success !

177 |

Failed.

178 |
179 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_util.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Utility Classes 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .hide { 8 | display: none; 9 | } 10 | .opacity-hide { 11 | opacity: 0; 12 | } 13 | .grade-b .opacity-hide, 14 | .grade-c .opacity-hide { 15 | opacity: 1; 16 | display: none; 17 | } 18 | .show { 19 | display: block; 20 | } 21 | .opacity-show { 22 | opacity: 1; 23 | } 24 | .invisible { 25 | visibility: hidden; 26 | } 27 | 28 | .keyboard-open .hide-on-keyboard-open { 29 | display: none; 30 | } 31 | 32 | .keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs, 33 | .keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer { 34 | bottom: 0; 35 | } 36 | 37 | .inline { 38 | display: inline-block; 39 | } 40 | 41 | .disable-pointer-events { 42 | pointer-events: none; 43 | } 44 | 45 | .enable-pointer-events { 46 | pointer-events: auto; 47 | } 48 | 49 | .disable-user-behavior { 50 | // used to prevent the browser from doing its native behavior. this doesnt 51 | // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc 52 | 53 | @include user-select(none); 54 | @include touch-callout(none); 55 | @include tap-highlight-transparent(); 56 | 57 | -webkit-user-drag: none; 58 | 59 | -ms-touch-action: none; 60 | -ms-content-zooming: none; 61 | } 62 | 63 | // Fill the screen to block clicks (a better pointer-events: none) for the body 64 | // to avoid full-page reflows and paints which can cause flickers 65 | .click-block { 66 | position: absolute; 67 | top: 0; 68 | right: 0; 69 | bottom: 0; 70 | left: 0; 71 | opacity: 0; 72 | z-index: $z-index-click-block; 73 | @include translate3d(0, 0, 0); 74 | overflow: hidden; 75 | } 76 | .click-block-hide { 77 | @include translate3d(-9999px, 0, 0); 78 | } 79 | 80 | .no-resize { 81 | resize: none; 82 | } 83 | 84 | .block { 85 | display: block; 86 | clear: both; 87 | &:after { 88 | display: block; 89 | visibility: hidden; 90 | clear: both; 91 | height: 0; 92 | content: "."; 93 | } 94 | } 95 | 96 | .full-image { 97 | width: 100%; 98 | } 99 | 100 | .clearfix { 101 | *zoom: 1; 102 | &:before, 103 | &:after { 104 | display: table; 105 | content: ""; 106 | // Fixes Opera/contenteditable bug: 107 | // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 108 | line-height: 0; 109 | } 110 | &:after { 111 | clear: both; 112 | } 113 | } 114 | 115 | /** 116 | * Content Padding 117 | * -------------------------------------------------- 118 | */ 119 | 120 | .padding { 121 | padding: $content-padding; 122 | } 123 | 124 | .padding-top, 125 | .padding-vertical { 126 | padding-top: $content-padding; 127 | } 128 | 129 | .padding-right, 130 | .padding-horizontal { 131 | padding-right: $content-padding; 132 | } 133 | 134 | .padding-bottom, 135 | .padding-vertical { 136 | padding-bottom: $content-padding; 137 | } 138 | 139 | .padding-left, 140 | .padding-horizontal { 141 | padding-left: $content-padding; 142 | } 143 | 144 | 145 | /** 146 | * Scrollable iFrames 147 | * -------------------------------------------------- 148 | */ 149 | 150 | .iframe-wrapper { 151 | position: fixed; 152 | -webkit-overflow-scrolling: touch; 153 | overflow: scroll; 154 | 155 | iframe { 156 | height: 100%; 157 | width: 100%; 158 | } 159 | } 160 | 161 | 162 | /** 163 | * Rounded 164 | * -------------------------------------------------- 165 | */ 166 | 167 | .rounded { 168 | border-radius: $border-radius-base; 169 | } 170 | 171 | 172 | /** 173 | * Utility Colors 174 | * -------------------------------------------------- 175 | * Utility colors are added to help set a naming convention. You'll 176 | * notice we purposely do not use words like "red" or "blue", but 177 | * instead have colors which represent an emotion or generic theme. 178 | */ 179 | 180 | .light, a.light { 181 | color: $light; 182 | } 183 | .light-bg { 184 | background-color: $light; 185 | } 186 | .light-border { 187 | border-color: $button-light-border; 188 | } 189 | 190 | .stable, a.stable { 191 | color: $stable; 192 | } 193 | .stable-bg { 194 | background-color: $stable; 195 | } 196 | .stable-border { 197 | border-color: $button-stable-border; 198 | } 199 | 200 | .positive, a.positive { 201 | color: $positive; 202 | } 203 | .positive-bg { 204 | background-color: $positive; 205 | } 206 | .positive-border { 207 | border-color: $button-positive-border; 208 | } 209 | 210 | .calm, a.calm { 211 | color: $calm; 212 | } 213 | .calm-bg { 214 | background-color: $calm; 215 | } 216 | .calm-border { 217 | border-color: $button-calm-border; 218 | } 219 | 220 | .assertive, a.assertive { 221 | color: $assertive; 222 | } 223 | .assertive-bg { 224 | background-color: $assertive; 225 | } 226 | .assertive-border { 227 | border-color: $button-assertive-border; 228 | } 229 | 230 | .balanced, a.balanced { 231 | color: $balanced; 232 | } 233 | .balanced-bg { 234 | background-color: $balanced; 235 | } 236 | .balanced-border { 237 | border-color: $button-balanced-border; 238 | } 239 | 240 | .energized, a.energized { 241 | color: $energized; 242 | } 243 | .energized-bg { 244 | background-color: $energized; 245 | } 246 | .energized-border { 247 | border-color: $button-energized-border; 248 | } 249 | 250 | .royal, a.royal { 251 | color: $royal; 252 | } 253 | .royal-bg { 254 | background-color: $royal; 255 | } 256 | .royal-border { 257 | border-color: $button-royal-border; 258 | } 259 | 260 | .dark, a.dark { 261 | color: $dark; 262 | } 263 | .dark-bg { 264 | background-color: $dark; 265 | } 266 | .dark-border { 267 | border-color: $button-dark-border; 268 | } 269 | 270 | [collection-repeat] { 271 | /* Position is set by transforms */ 272 | left: 0 !important; 273 | top: 0 !important; 274 | position: absolute !important; 275 | z-index: 1; 276 | } 277 | .collection-repeat-container { 278 | position: relative; 279 | z-index: 1; //make sure it's above the after-container 280 | } 281 | .collection-repeat-after-container { 282 | z-index: 0; 283 | display: block; 284 | 285 | /* when scrolling horizontally, make sure the after container doesn't take up 100% width */ 286 | &.horizontal { 287 | display: inline-block; 288 | } 289 | } 290 | 291 | // ng-show fix for windows phone 292 | // https://www.hoessl.eu/2014/12/on-using-the-ionic-framework-for-windows-phone-8-1-apps/ 293 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, 294 | .x-ng-cloak, .ng-hide:not(.ng-hide-animate) { 295 | display: none !important; 296 | } -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_scaffolding.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Scaffolding 4 | * -------------------------------------------------- 5 | */ 6 | 7 | *, 8 | *:before, 9 | *:after { 10 | @include box-sizing(border-box); 11 | } 12 | 13 | html { 14 | overflow: hidden; 15 | -ms-touch-action: pan-y; 16 | touch-action: pan-y; 17 | } 18 | 19 | body, 20 | .ionic-body { 21 | @include touch-callout(none); 22 | @include font-smoothing(antialiased); 23 | @include text-size-adjust(none); 24 | @include tap-highlight-transparent(); 25 | @include user-select(none); 26 | 27 | top: 0; 28 | right: 0; 29 | bottom: 0; 30 | left: 0; 31 | overflow: hidden; 32 | 33 | margin: 0; 34 | padding: 0; 35 | 36 | color: $base-color; 37 | word-wrap: break-word; 38 | font-size: $font-size-base; 39 | font-family: -apple-system; 40 | font-family: $font-family-base; 41 | line-height: $line-height-computed; 42 | text-rendering: optimizeLegibility; 43 | -webkit-backface-visibility: hidden; 44 | -webkit-user-drag: none; 45 | -ms-content-zooming: none; 46 | } 47 | 48 | body.grade-b, 49 | body.grade-c { 50 | // disable optimizeLegibility for low end devices 51 | text-rendering: auto; 52 | } 53 | 54 | .content { 55 | // used for content areas not using the content directive 56 | position: relative; 57 | } 58 | 59 | .scroll-content { 60 | position: absolute; 61 | top: 0; 62 | right: 0; 63 | bottom: 0; 64 | left: 0; 65 | overflow: hidden; 66 | 67 | // Hide the top border if any 68 | margin-top: -1px; 69 | 70 | // Prevents any distortion of lines 71 | padding-top: 1px; 72 | margin-bottom: -1px; 73 | 74 | width: auto; 75 | height: auto; 76 | } 77 | 78 | .menu .scroll-content.scroll-content-false{ 79 | z-index: $z-index-scroll-content-false; 80 | } 81 | 82 | .scroll-view { 83 | position: relative; 84 | display: block; 85 | overflow: hidden; 86 | 87 | &.overflow-scroll { 88 | position: relative; 89 | } 90 | 91 | &.scroll-x { overflow-x: scroll; overflow-y: hidden; } 92 | &.scroll-y { overflow-x: hidden; overflow-y: scroll; } 93 | &.scroll-xy { overflow-x: scroll; overflow-y: scroll; } 94 | 95 | // Hide the top border if any 96 | margin-top: -1px; 97 | } 98 | 99 | /** 100 | * Scroll is the scroll view component available for complex and custom 101 | * scroll view functionality. 102 | */ 103 | .scroll { 104 | @include user-select(none); 105 | @include touch-callout(none); 106 | @include text-size-adjust(none); 107 | @include transform-origin(left, top); 108 | } 109 | /** 110 | * Set ms-viewport to prevent MS "page squish" and allow fluid scrolling 111 | * https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx 112 | */ 113 | @-ms-viewport { width: device-width; } 114 | 115 | // Scroll bar styles 116 | .scroll-bar { 117 | position: absolute; 118 | z-index: $z-index-scroll-bar; 119 | } 120 | // hide the scroll-bar during animations 121 | .ng-animate .scroll-bar { 122 | visibility: hidden; 123 | } 124 | .scroll-bar-h { 125 | right: 2px; 126 | bottom: 3px; 127 | left: 2px; 128 | height: 3px; 129 | 130 | .scroll-bar-indicator { 131 | height: 100%; 132 | } 133 | } 134 | 135 | .scroll-bar-v { 136 | top: 2px; 137 | right: 3px; 138 | bottom: 2px; 139 | width: 3px; 140 | 141 | .scroll-bar-indicator { 142 | width: 100%; 143 | } 144 | } 145 | .scroll-bar-indicator { 146 | position: absolute; 147 | border-radius: 4px; 148 | background: rgba(0,0,0,0.3); 149 | opacity: 1; 150 | @include transition(opacity .3s linear); 151 | 152 | &.scroll-bar-fade-out { 153 | opacity: 0; 154 | } 155 | } 156 | .platform-android .scroll-bar-indicator { 157 | // android doesn't have rounded ends on scrollbar 158 | border-radius: 0; 159 | } 160 | .grade-b .scroll-bar-indicator, 161 | .grade-c .scroll-bar-indicator { 162 | // disable rgba background and border radius for low end devices 163 | background: #aaa; 164 | 165 | &.scroll-bar-fade-out { 166 | @include transition(none); 167 | } 168 | } 169 | 170 | ion-infinite-scroll { 171 | height: 60px; 172 | width: 100%; 173 | display: block; 174 | 175 | @include display-flex(); 176 | @include flex-direction(row); 177 | @include justify-content(center); 178 | @include align-items(center); 179 | 180 | .icon { 181 | color: #666666; 182 | font-size: 30px; 183 | color: $scroll-refresh-icon-color; 184 | } 185 | &:not(.active){ 186 | .spinner, 187 | .icon:before{ 188 | display:none; 189 | } 190 | } 191 | } 192 | 193 | .overflow-scroll { 194 | overflow-x: hidden; 195 | overflow-y: scroll; 196 | -webkit-overflow-scrolling: touch; 197 | 198 | // Make sure the scrollbar doesn't take up layout space on edge 199 | -ms-overflow-style: -ms-autohiding-scrollbar; 200 | 201 | top: 0; 202 | right: 0; 203 | bottom: 0; 204 | left: 0; 205 | position: absolute; 206 | 207 | &.pane { 208 | overflow-x: hidden; 209 | overflow-y: scroll; 210 | } 211 | 212 | .scroll { 213 | position: static; 214 | height: 100%; 215 | -webkit-transform: translate3d(0, 0, 0); // fix iOS bug where relative children of scroller disapear while scrolling. see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela 216 | } 217 | } 218 | 219 | 220 | // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. 221 | // Note: For these to work, content must come after both bars in the markup 222 | /* If you change these, change platform.scss as well */ 223 | .has-header { 224 | top: $bar-height; 225 | } 226 | // Force no header 227 | .no-header { 228 | top: 0; 229 | } 230 | 231 | .has-subheader { 232 | top: $bar-height + $bar-subheader-height; 233 | } 234 | .has-tabs-top { 235 | top: $bar-height + $tabs-height; 236 | } 237 | .has-header.has-subheader.has-tabs-top { 238 | top: $bar-height + $bar-subheader-height + $tabs-height; 239 | } 240 | 241 | .has-footer { 242 | bottom: $bar-footer-height; 243 | } 244 | .has-subfooter { 245 | bottom: $bar-footer-height + $bar-subfooter-height; 246 | } 247 | 248 | .has-tabs, 249 | .bar-footer.has-tabs { 250 | bottom: $tabs-height; 251 | &.pane{ 252 | bottom: $tabs-height; 253 | height:auto; 254 | } 255 | } 256 | 257 | .bar-subfooter.has-tabs { 258 | bottom: $tabs-height + $bar-footer-height; 259 | } 260 | 261 | .has-footer.has-tabs { 262 | bottom: $tabs-height + $bar-footer-height; 263 | } 264 | 265 | // A full screen section with a solid background 266 | .pane { 267 | @include translate3d(0,0,0); 268 | @include transition-duration(0); 269 | z-index: $z-index-pane; 270 | } 271 | .view { 272 | z-index: $z-index-view; 273 | } 274 | .pane, 275 | .view { 276 | position: absolute; 277 | top: 0; 278 | right: 0; 279 | bottom: 0; 280 | left: 0; 281 | width: 100%; 282 | height: 100%; 283 | background-color: $base-background-color; 284 | overflow: hidden; 285 | } 286 | .view-container { 287 | position: absolute; 288 | display: block; 289 | width: 100%; 290 | height: 100%; 291 | } 292 | -------------------------------------------------------------------------------- /tutorials/tutorial-1.md: -------------------------------------------------------------------------------- 1 | #Ionic Digit Keyboard 2 | Version: 1.0.0
3 | Author: Skol (Vincent Letellier)
4 | Email: skol.pro@gmail.com
5 | *Tutorial made using __iPhone 5__ as screen size reference.* 6 | 7 | ##Tutorial 1 8 | Read the `readme.md` for the the installation and basics knowledges. 9 | 10 | Let say you made a simple login screen like that and you want to add the Ionic Digit Keyboard plugin to it. 11 | 12 | ![Tutorial 1 screen A](https://github.com/skol-pro/ion-digit-keyboard/blob/master/tutorials/resources/tutorial_1_A.png?raw=true) 13 | 14 | ```html 15 | 16 | 17 | 18 |

WelcomeLorem ipsum dolor sit amet, recusandae sequi velit, aut fuga iste ea architecto, unde culpa.

19 | 20 | 21 |

Password | Register

22 | 23 | 24 | 25 | ``` 26 | Simply add the directive in the `ion-pane` after `ion-content` if you want to use the keyboard only on this screen, or in `body` after `ion-pane` to use it globally. 27 | Do not forget to add the `settings` attribute. 28 | ```html 29 | 30 | ``` 31 | Let's add rounded buttons, display letters, a white opaque theme, a not full-width keyboard and the default action function: 32 | ```javascript 33 | // MainController.js 34 | angular.module('starter').controller('MainController', ['$scope', MainController]); 35 | 36 | function MainController($scope) { 37 | $scope.email = ''; 38 | $scope.password = ''; 39 | 40 | $scope.keyboardSettings = { 41 | showLetters: true, 42 | roundButtons: true, 43 | width: '75%', 44 | theme: 'opaque-white', 45 | 46 | action: function(number) { 47 | $scope.password += number; 48 | } 49 | } 50 | } 51 | ``` 52 | ![Tutorial 1 screen B](https://github.com/skol-pro/ion-digit-keyboard/blob/master/tutorials/resources/tutorial_1_B.png?raw=true) 53 | 54 | Nice ! Now, we'll need a submit button, and why not a remove button ? 55 | ```javascript 56 | // MainController.js 57 | function MainController($scope) { 58 | $scope.email = ''; 59 | $scope.password = ''; 60 | 61 | $scope.keyboardSettings = { 62 | showLetters: true, 63 | roundButtons: true, 64 | width: '75%', 65 | theme: 'opaque-white', 66 | 67 | action: function(number) { 68 | $scope.password += number; 69 | }, 70 | 71 | leftButton: { 72 | html: '', 73 | action: function() { 74 | $scope.password = $scope.password.slice(0, -1); 75 | } 76 | }, 77 | 78 | rightButton: { 79 | html: '', 80 | action: function() { 81 | // Submit stuff 82 | } 83 | } 84 | } 85 | } 86 | ``` 87 | Let's cutomize the submit button a bit: 88 | 89 | ```javascript 90 | // MainController.js 91 | function MainController($scope) { 92 | $scope.email = ''; 93 | $scope.password = ''; 94 | 95 | $scope.keyboardSettings = { 96 | //... 97 | rightButton: { 98 | html: '', 99 | action: function() { 100 | // Submit stuff 101 | }, 102 | style: { 103 | color: '#4E3A39', 104 | bgColor: '#fff', 105 | activeBgColor: 'rgba(255, 255, 255, 0.75)', 106 | borderColor: '#fff' 107 | } 108 | } 109 | } 110 | } 111 | ``` 112 | Great, pretty good looking ! Final touch, we could make the keyboard a bit higher on the screen, by adding a bottom-margin to the keyboard for-example. 113 | 114 | ![Tutorial 1 screen C](https://github.com/skol-pro/ion-digit-keyboard/blob/master/tutorials/resources/tutorial_1_C.png?raw=true) 115 | 116 | Currently, tapping the email input will show up the default keyboard over the digit keyboard, so let's hide the digit keyboard when the email input is focussed, and show it back when it's blured. 117 | ```html 118 | 119 | ``` 120 | ```html 121 | 122 | ``` 123 | ```javascript 124 | // MainController.js 125 | function MainController($scope) { 126 | $scope.email = ''; 127 | $scope.password = ''; 128 | 129 | $scope.keyboardVisible = true; 130 | 131 | $scope.keyboardSettings = { 132 | //... 133 | } 134 | 135 | $scope.showKeyboard = function() { 136 | $scope.keyboardVisible = true; 137 | } 138 | 139 | $scope.hideKeyboard = function() { 140 | $scope.keyboardVisible = false; 141 | } 142 | } 143 | ``` 144 | 145 | Just for fun, let's play with some of the properties. Turn `showLetters` and `roundButtons` to false, set the `width` property to "**90%**" and finally add/replace the `style` property of both action buttons by the following one: 146 | ```javascript 147 | style: { 148 | color: '#fff', 149 | bgColor: 'rgba(255, 255, 255, 0)', 150 | activeBgColor: 'rgba(255, 255, 255, 0.15)', 151 | borderColor: 'transparent' 152 | } 153 | ``` 154 | Not very beautiful of course, it's just for demonstration purposes. 155 | 156 | ![Tutorial 1 screen D](https://github.com/skol-pro/ion-digit-keyboard/blob/master/tutorials/resources/tutorial_1_D.png?raw=true) 157 | 158 | To conclude with this tutorial, let's imagine we want the login form to remains compact and to be centered on higher screens like tablets. 159 | To achieve that, simple wrap `ion-content` in a new **div** and add some media queries style rules: 160 | ```html 161 | 162 |
163 | 164 |

WelcomeLorem ipsum dolor sit amet, recusandae sequi velit, aut fuga iste ea architecto, unde culpa.

165 | 166 | 167 |

Password | Register

168 | 169 | 170 |
171 | 172 | ``` 173 | ```html 174 | 187 | ``` 188 | Of course feel free to add some size conditions code so that the digit keyboard is not hidding when the email input is focuessed on tablets. 189 | ![Tutorial 1 screen E](https://github.com/skol-pro/ion-digit-keyboard/blob/master/tutorials/resources/tutorial_1_E.png?raw=true) 190 | Set back some of the previous keyboard settings and adjust style: 191 | ```html 192 | 205 | ``` 206 | ![Tutorial 1 screen F](https://github.com/skol-pro/ion-digit-keyboard/blob/master/tutorials/resources/tutorial_1_F.png?raw=true) 207 | 208 | Hope you enjoyed ! -------------------------------------------------------------------------------- /src/ion-digit-keyboard.directive.js: -------------------------------------------------------------------------------- 1 | angular.module('ion-digit-keyboard.directive', []) 2 | 3 | .directive('ionDigitKeyboard', ['$timeout', '$ionicScrollDelegate', '$templateCache', 4 | function ($timeout, $ionicScrollDelegate, $templateCache) { 5 | var animationDuration = 150; 6 | 7 | return { 8 | restrict: 'EA', 9 | template: $templateCache.get('keyboard.tpl.html'), 10 | replace: true, 11 | scope: {settings: '=settings', ngShow: '=', ngHide: '='}, 12 | link: function postLink(scope, iElement, iAttrs) { 13 | if (typeof scope.settings == 'undefined') scope.settings = {}; 14 | 15 | var elToResize, resizeContent = true, elToResizeSelector = 'ion-content'; 16 | var heightAttr; 17 | var customLeftBg = {}, customRightBg = {}; 18 | scope.leftStyle = '', scope.rightStyle = ''; 19 | scope.leftFontSize = '', scope.rightFontSize = ''; 20 | 21 | // General settings 22 | scope.showLetters = (typeof scope.settings.showLetters == 'undefined' ? false : scope.settings.showLetters); 23 | scope.roundButtons = (typeof scope.settings.roundButtons == 'undefined' ? false : scope.settings.roundButtons); 24 | scope.numberAction = scope.settings.action || function(){}; 25 | scope.width = scope.settings.width || '100%'; 26 | scope.align = scope.settings.align || 'center'; 27 | 28 | // Animation 29 | scope.animation = scope.settings.animation || 'slide-up'; 30 | 31 | // Styles 32 | scope.theme = scope.settings.theme || 'stable'; 33 | if (typeof scope.settings.leftButton != 'undefined' && typeof scope.settings.leftButton.style == 'object') { 34 | if (typeof scope.settings.leftButton.style.color != 'undefined') { 35 | scope.leftStyle += 'color: ' + scope.settings.leftButton.style.color + ';'; 36 | } 37 | if (typeof scope.settings.leftButton.style.bgColor != 'undefined') { 38 | customLeftBg.default = scope.settings.leftButton.style.bgColor; 39 | scope.leftStyle += 'background-color: ' + customLeftBg.default + ';'; 40 | } 41 | if (typeof scope.settings.leftButton.style.activeBgColor != 'undefined') { 42 | customLeftBg.active = scope.settings.leftButton.style.activeBgColor; 43 | } 44 | if (typeof scope.settings.leftButton.style.borderColor != 'undefined') { 45 | scope.leftStyle += 'border-color: ' + scope.settings.leftButton.style.borderColor + ' !important;'; 46 | } 47 | if (typeof scope.settings.leftButton.style.fontSize != 'undefined') { 48 | scope.leftFontSize = 'font-size: ' + scope.settings.leftButton.style.fontSize + ' !important;'; 49 | } 50 | } 51 | if (typeof scope.settings.rightButton != 'undefined' && typeof scope.settings.rightButton.style == 'object') { 52 | if (typeof scope.settings.rightButton.style.color != 'undefined') { 53 | scope.rightStyle += 'color: ' + scope.settings.rightButton.style.color + ';'; 54 | } 55 | if (typeof scope.settings.rightButton.style.bgColor != 'undefined') { 56 | customRightBg.default = scope.settings.rightButton.style.bgColor; 57 | scope.rightStyle += 'background-color: ' + customRightBg.default + ';'; 58 | } 59 | if (typeof scope.settings.rightButton.style.activeBgColor != 'undefined') { 60 | customRightBg.active = scope.settings.rightButton.style.activeBgColor; 61 | } 62 | if (typeof scope.settings.rightButton.style.borderColor != 'undefined') { 63 | scope.rightStyle += 'border-color: ' + scope.settings.rightButton.style.borderColor + ' !important;'; 64 | } 65 | if (typeof scope.settings.rightButton.style.fontSize != 'undefined') { 66 | scope.rightFontSize = 'font-size: ' + scope.settings.rightButton.style.fontSize + ' !important;'; 67 | } 68 | } 69 | 70 | // Left action 71 | scope.showLeftAction = false; 72 | if (typeof scope.settings.leftButton != 'undefined') { 73 | scope.leftHtml = scope.settings.leftButton.html; 74 | scope.showLeftAction = true; 75 | 76 | scope.leftAction = function(event) { 77 | if (customLeftBg.active) { 78 | var el = event.target; 79 | if (el.tagName == 'I') { 80 | el = el.parentNode.parentNode; 81 | } else if (el.className.indexOf('digit-keyboard-key-action') > -1) { 82 | el = el.parentNode; 83 | } 84 | 85 | if (typeof customLeftBg.default == 'undefined') customLeftBg.default = el.style.backgroundColor; 86 | el.style.backgroundColor = customLeftBg.active; 87 | 88 | setTimeout(function() { 89 | el.style.backgroundColor = customLeftBg.default; 90 | }, 100); 91 | } 92 | scope.settings.leftButton.action(); 93 | } 94 | } 95 | 96 | // Right action 97 | scope.showRightAction = false; 98 | if (typeof scope.settings.rightButton != 'undefined') { 99 | scope.rightHtml = scope.settings.rightButton.html; 100 | scope.showRightAction = true; 101 | 102 | scope.rightAction = function(event) { 103 | if (customRightBg.active) { 104 | var el = event.target; 105 | if (el.tagName == 'I') { 106 | el = el.parentNode.parentNode; 107 | } else if (el.className.indexOf('digit-keyboard-key-action') > -1) { 108 | el = el.parentNode; 109 | } 110 | 111 | if (typeof customRightBg.default == 'undefined') customRightBg.default = el.style.backgroundColor; 112 | el.style.backgroundColor = customRightBg.active; 113 | 114 | setTimeout(function() { 115 | el.style.backgroundColor = customRightBg.default; 116 | }, 100); 117 | } 118 | scope.settings.rightButton.action(); 119 | } 120 | } 121 | 122 | // Resize content 123 | if (typeof scope.settings.resizeContent == 'object' || typeof scope.settings.resizeContent == 'boolean') { 124 | if (typeof scope.settings.resizeContent == 'object') { 125 | var resizeContent = (typeof scope.settings.resizeContent.enable == 'undefined' ? true : scope.settings.resizeContent.enable); 126 | var elToResizeSelector = (typeof scope.settings.resizeContent.element == 'undefined' ? 'ion-content' : scope.settings.resizeContent.element); 127 | } else if (typeof scope.settings.resizeContent == 'boolean') { 128 | resizeContent = scope.settings.resizeContent; 129 | } 130 | } 131 | elToResize = iElement[0].parentElement.querySelectorAll(elToResizeSelector)[0]; 132 | 133 | // ngShow & ngHide handlers 134 | function doHide() { 135 | if (resizeContent == true) { 136 | elToResize.style.bottom = 0 + 'px'; 137 | elToResize.style.height = heightAttr; 138 | } 139 | } 140 | 141 | function doShow() { 142 | $timeout(function() { 143 | if (resizeContent == true) { 144 | var bottomPos = iElement[0].offsetHeight; 145 | heightAttr = elToResize.style.height 146 | elToResize.style.height = 'auto'; 147 | elToResize.style.bottom = (bottomPos + 1) + 'px'; 148 | } 149 | }, animationDuration + 10); 150 | } 151 | 152 | function ngShow() { 153 | if (scope.ngShow === true) { 154 | doShow(); 155 | } else if (scope.ngShow === false) { 156 | doHide(); 157 | } 158 | $ionicScrollDelegate.resize(); 159 | } 160 | 161 | function ngHide() { 162 | if (scope.ngHide === true) { 163 | doHide(); 164 | } else if (scope.ngHide === false) { 165 | doShow(); 166 | } 167 | $ionicScrollDelegate.resize(); 168 | } 169 | 170 | scope.$watch("ngShow", ngShow); 171 | scope.$watch("ngHide", ngHide); 172 | } 173 | } 174 | } 175 | ]); -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_button.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Buttons 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .button { 8 | // set the color defaults 9 | @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $button-default-text); 10 | 11 | position: relative; 12 | display: inline-block; 13 | margin: 0; 14 | padding: 0 $button-padding; 15 | 16 | min-width: ($button-padding * 3) + $button-font-size; 17 | min-height: $button-height + 5px; 18 | 19 | border-width: $button-border-width; 20 | border-style: solid; 21 | border-radius: $button-border-radius; 22 | 23 | vertical-align: top; 24 | text-align: center; 25 | 26 | text-overflow: ellipsis; 27 | font-size: $button-font-size; 28 | line-height: $button-height - $button-border-width + 1px; 29 | 30 | cursor: pointer; 31 | 32 | &:after { 33 | // used to create a larger button "hit" area 34 | position: absolute; 35 | top: -6px; 36 | right: -6px; 37 | bottom: -6px; 38 | left: -6px; 39 | content: ' '; 40 | } 41 | 42 | .icon { 43 | vertical-align: top; 44 | pointer-events: none; 45 | } 46 | 47 | .icon:before, 48 | &.icon:before, 49 | &.icon-left:before, 50 | &.icon-right:before { 51 | display: inline-block; 52 | padding: 0 0 $button-border-width 0; 53 | vertical-align: inherit; 54 | font-size: $button-icon-size; 55 | line-height: $button-height - $button-border-width; 56 | pointer-events: none; 57 | } 58 | &.icon-left:before { 59 | float: left; 60 | padding-right: .2em; 61 | padding-left: 0; 62 | } 63 | &.icon-right:before { 64 | float: right; 65 | padding-right: 0; 66 | padding-left: .2em; 67 | } 68 | 69 | &.button-block, &.button-full { 70 | margin-top: $button-block-margin; 71 | margin-bottom: $button-block-margin; 72 | } 73 | 74 | &.button-light { 75 | @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text); 76 | @include button-clear($button-light-border); 77 | @include button-outline($button-light-border); 78 | } 79 | 80 | &.button-stable { 81 | @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text); 82 | @include button-clear($button-stable-border); 83 | @include button-outline($button-stable-border); 84 | } 85 | 86 | &.button-positive { 87 | @include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text); 88 | @include button-clear($button-positive-bg); 89 | @include button-outline($button-positive-bg); 90 | } 91 | 92 | &.button-calm { 93 | @include button-style($button-calm-bg, $button-calm-border, $button-calm-active-bg, $button-calm-active-border, $button-calm-text); 94 | @include button-clear($button-calm-bg); 95 | @include button-outline($button-calm-bg); 96 | } 97 | 98 | &.button-assertive { 99 | @include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text); 100 | @include button-clear($button-assertive-bg); 101 | @include button-outline($button-assertive-bg); 102 | } 103 | 104 | &.button-balanced { 105 | @include button-style($button-balanced-bg, $button-balanced-border, $button-balanced-active-bg, $button-balanced-active-border, $button-balanced-text); 106 | @include button-clear($button-balanced-bg); 107 | @include button-outline($button-balanced-bg); 108 | } 109 | 110 | &.button-energized { 111 | @include button-style($button-energized-bg, $button-energized-border, $button-energized-active-bg, $button-energized-active-border, $button-energized-text); 112 | @include button-clear($button-energized-bg); 113 | @include button-outline($button-energized-bg); 114 | } 115 | 116 | &.button-royal { 117 | @include button-style($button-royal-bg, $button-royal-border, $button-royal-active-bg, $button-royal-active-border, $button-royal-text); 118 | @include button-clear($button-royal-bg); 119 | @include button-outline($button-royal-bg); 120 | } 121 | 122 | &.button-dark { 123 | @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text); 124 | @include button-clear($button-dark-bg); 125 | @include button-outline($button-dark-bg); 126 | } 127 | } 128 | 129 | .button-small { 130 | padding: 2px $button-small-padding 1px; 131 | min-width: $button-small-height; 132 | min-height: $button-small-height + 2; 133 | font-size: $button-small-font-size; 134 | line-height: $button-small-height - $button-border-width - 1; 135 | 136 | .icon:before, 137 | &.icon:before, 138 | &.icon-left:before, 139 | &.icon-right:before { 140 | font-size: $button-small-icon-size; 141 | line-height: $button-small-icon-size + 3; 142 | margin-top: 3px; 143 | } 144 | } 145 | 146 | .button-large { 147 | padding: 0 $button-large-padding; 148 | min-width: ($button-large-padding * 3) + $button-large-font-size; 149 | min-height: $button-large-height + 5; 150 | font-size: $button-large-font-size; 151 | line-height: $button-large-height - $button-border-width; 152 | 153 | .icon:before, 154 | &.icon:before, 155 | &.icon-left:before, 156 | &.icon-right:before { 157 | padding-bottom: ($button-border-width * 2); 158 | font-size: $button-large-icon-size; 159 | line-height: $button-large-height - ($button-border-width * 2) - 1; 160 | } 161 | } 162 | 163 | .button-icon { 164 | @include transition(opacity .1s); 165 | padding: 0 6px; 166 | min-width: initial; 167 | border-color: transparent; 168 | background: none; 169 | 170 | &.button.active, 171 | &.button.activated { 172 | border-color: transparent; 173 | background: none; 174 | box-shadow: none; 175 | opacity: 0.3; 176 | } 177 | 178 | .icon:before, 179 | &.icon:before { 180 | font-size: $button-large-icon-size; 181 | } 182 | } 183 | 184 | .button-clear { 185 | @include button-clear($button-default-border); 186 | @include transition(opacity .1s); 187 | padding: 0 $button-clear-padding; 188 | max-height: $button-height; 189 | border-color: transparent; 190 | background: none; 191 | box-shadow: none; 192 | 193 | &.active, 194 | &.activated { 195 | opacity: 0.3; 196 | } 197 | } 198 | 199 | .button-outline { 200 | @include button-outline($button-default-border); 201 | @include transition(opacity .1s); 202 | background: none; 203 | box-shadow: none; 204 | } 205 | 206 | .padding > .button.button-block:first-child { 207 | margin-top: 0; 208 | } 209 | 210 | .button-block { 211 | display: block; 212 | clear: both; 213 | 214 | &:after { 215 | clear: both; 216 | } 217 | } 218 | 219 | .button-full, 220 | .button-full > .button { 221 | display: block; 222 | margin-right: 0; 223 | margin-left: 0; 224 | border-right-width: 0; 225 | border-left-width: 0; 226 | border-radius: 0; 227 | } 228 | 229 | button.button-block, 230 | button.button-full, 231 | .button-full > button.button, 232 | input.button.button-block { 233 | width: 100%; 234 | } 235 | 236 | a.button { 237 | text-decoration: none; 238 | 239 | .icon:before, 240 | &.icon:before, 241 | &.icon-left:before, 242 | &.icon-right:before { 243 | margin-top: 2px; 244 | } 245 | } 246 | 247 | .button.disabled, 248 | .button[disabled] { 249 | opacity: .4; 250 | cursor: default !important; 251 | pointer-events: none; 252 | } 253 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_form.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Forms 3 | * -------------------------------------------------- 4 | */ 5 | 6 | // Make all forms have space below them 7 | form { 8 | margin: 0 0 $line-height-base; 9 | } 10 | 11 | // Groups of fields with labels on top (legends) 12 | legend { 13 | display: block; 14 | margin-bottom: $line-height-base; 15 | padding: 0; 16 | width: 100%; 17 | border: $input-border-width solid $input-border; 18 | color: $dark; 19 | font-size: $font-size-base * 1.5; 20 | line-height: $line-height-base * 2; 21 | 22 | small { 23 | color: $stable; 24 | font-size: $line-height-base * .75; 25 | } 26 | } 27 | 28 | // Set font for forms 29 | label, 30 | input, 31 | button, 32 | select, 33 | textarea { 34 | @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here 35 | } 36 | input, 37 | button, 38 | select, 39 | textarea { 40 | font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element) 41 | } 42 | 43 | 44 | // Input List 45 | // ------------------------------- 46 | 47 | .item-input { 48 | @include display-flex(); 49 | @include align-items(center); 50 | position: relative; 51 | overflow: hidden; 52 | padding: 6px 0 5px 16px; 53 | 54 | input { 55 | @include border-radius(0); 56 | @include flex(1, 220px); 57 | @include appearance(none); 58 | margin: 0; 59 | padding-right: 24px; 60 | background-color: transparent; 61 | } 62 | 63 | .button .icon { 64 | @include flex(0, 0, 24px); 65 | position: static; 66 | display: inline-block; 67 | height: auto; 68 | text-align: center; 69 | font-size: 16px; 70 | } 71 | 72 | .button-bar { 73 | @include border-radius(0); 74 | @include flex(1, 0, 220px); 75 | @include appearance(none); 76 | } 77 | 78 | .icon { 79 | min-width: 14px; 80 | } 81 | } 82 | // prevent flex-shrink on WP 83 | .platform-windowsphone .item-input input{ 84 | flex-shrink: 1; 85 | } 86 | 87 | .item-input-inset { 88 | @include display-flex(); 89 | @include align-items(center); 90 | position: relative; 91 | overflow: hidden; 92 | padding: ($item-padding / 3) * 2; 93 | } 94 | 95 | .item-input-wrapper { 96 | @include display-flex(); 97 | @include flex(1, 0); 98 | @include align-items(center); 99 | @include border-radius(4px); 100 | padding-right: 8px; 101 | padding-left: 8px; 102 | background: #eee; 103 | } 104 | 105 | .item-input-inset .item-input-wrapper input { 106 | padding-left: 4px; 107 | height: 29px; 108 | background: transparent; 109 | line-height: 18px; 110 | } 111 | 112 | .item-input-wrapper ~ .button { 113 | margin-left: ($item-padding / 3) * 2; 114 | } 115 | 116 | .input-label { 117 | display: table; 118 | padding: 7px 10px 7px 0px; 119 | max-width: 200px; 120 | width: 35%; 121 | color: $input-label-color; 122 | font-size: 16px; 123 | } 124 | 125 | .placeholder-icon { 126 | color: #aaa; 127 | &:first-child { 128 | padding-right: 6px; 129 | } 130 | &:last-child { 131 | padding-left: 6px; 132 | } 133 | } 134 | 135 | .item-stacked-label { 136 | display: block; 137 | background-color: transparent; 138 | box-shadow: none; 139 | 140 | .input-label, .icon { 141 | display: inline-block; 142 | padding: 4px 0 0 0px; 143 | vertical-align: middle; 144 | } 145 | } 146 | 147 | .item-stacked-label input, 148 | .item-stacked-label textarea { 149 | @include border-radius(2px); 150 | padding: 4px 8px 3px 0; 151 | border: none; 152 | background-color: $input-bg; 153 | } 154 | .item-stacked-label input { 155 | overflow: hidden; 156 | height: $line-height-computed + $font-size-base + 12px; 157 | } 158 | 159 | .item-select.item-stacked-label select { 160 | position: relative; 161 | padding: 0px; 162 | max-width: 90%; 163 | direction:ltr; 164 | white-space: pre-wrap; 165 | margin: -3px; 166 | } 167 | 168 | .item-floating-label { 169 | display: block; 170 | background-color: transparent; 171 | box-shadow: none; 172 | 173 | .input-label { 174 | position: relative; 175 | padding: 5px 0 0 0; 176 | opacity: 0; 177 | top: 10px; 178 | @include transition(opacity .15s ease-in, top .2s linear); 179 | 180 | &.has-input { 181 | opacity: 1; 182 | top: 0; 183 | @include transition(opacity .15s ease-in, top .2s linear); 184 | } 185 | } 186 | } 187 | 188 | 189 | // Form Controls 190 | // ------------------------------- 191 | 192 | // Shared size and type resets 193 | textarea, 194 | input[type="text"], 195 | input[type="password"], 196 | input[type="datetime"], 197 | input[type="datetime-local"], 198 | input[type="date"], 199 | input[type="month"], 200 | input[type="time"], 201 | input[type="week"], 202 | input[type="number"], 203 | input[type="email"], 204 | input[type="url"], 205 | input[type="search"], 206 | input[type="tel"], 207 | input[type="color"] { 208 | display: block; 209 | padding-top: 2px; 210 | padding-left: 0; 211 | height: $line-height-computed + $font-size-base; 212 | color: $input-color; 213 | vertical-align: middle; 214 | font-size: $font-size-base; 215 | line-height: $font-size-base + 2; 216 | } 217 | 218 | .platform-ios, 219 | .platform-android { 220 | input[type="datetime-local"], 221 | input[type="date"], 222 | input[type="month"], 223 | input[type="time"], 224 | input[type="week"] { 225 | padding-top: 8px; 226 | } 227 | } 228 | 229 | .item-input { 230 | input, 231 | textarea { 232 | width: 100%; 233 | } 234 | } 235 | 236 | textarea { 237 | padding-left: 0; 238 | @include placeholder($input-color-placeholder, -3px); 239 | } 240 | 241 | // Reset height since textareas have rows 242 | textarea { 243 | height: auto; 244 | } 245 | 246 | // Everything else 247 | textarea, 248 | input[type="text"], 249 | input[type="password"], 250 | input[type="datetime"], 251 | input[type="datetime-local"], 252 | input[type="date"], 253 | input[type="month"], 254 | input[type="time"], 255 | input[type="week"], 256 | input[type="number"], 257 | input[type="email"], 258 | input[type="url"], 259 | input[type="search"], 260 | input[type="tel"], 261 | input[type="color"] { 262 | border: 0; 263 | } 264 | 265 | // Position radios and checkboxes better 266 | input[type="radio"], 267 | input[type="checkbox"] { 268 | margin: 0; 269 | line-height: normal; 270 | } 271 | 272 | // Reset width of input images, buttons, radios, checkboxes 273 | .item-input { 274 | input[type="file"], 275 | input[type="image"], 276 | input[type="submit"], 277 | input[type="reset"], 278 | input[type="button"], 279 | input[type="radio"], 280 | input[type="checkbox"] { 281 | width: auto; // Override of generic input selector 282 | } 283 | } 284 | 285 | // Set the height of file to match text inputs 286 | input[type="file"] { 287 | line-height: $input-height-base; 288 | } 289 | 290 | // Text input classes to hide text caret during scroll 291 | .previous-input-focus, 292 | .cloned-text-input + input, 293 | .cloned-text-input + textarea { 294 | position: absolute !important; 295 | left: -9999px; 296 | width: 200px; 297 | } 298 | 299 | 300 | // Placeholder 301 | // ------------------------------- 302 | input, 303 | textarea { 304 | @include placeholder(); 305 | } 306 | 307 | 308 | // DISABLED STATE 309 | // ------------------------------- 310 | 311 | // Disabled and read-only inputs 312 | input[disabled], 313 | select[disabled], 314 | textarea[disabled], 315 | input[readonly]:not(.cloned-text-input), 316 | textarea[readonly]:not(.cloned-text-input), 317 | select[readonly] { 318 | background-color: $input-bg-disabled; 319 | cursor: not-allowed; 320 | } 321 | // Explicitly reset the colors here 322 | input[type="radio"][disabled], 323 | input[type="checkbox"][disabled], 324 | input[type="radio"][readonly], 325 | input[type="checkbox"][readonly] { 326 | background-color: transparent; 327 | } 328 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_reset.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Resets 4 | * -------------------------------------------------- 5 | * Adapted from normalize.css and some reset.css. We don't care even one 6 | * bit about old IE, so we don't need any hacks for that in here. 7 | * 8 | * There are probably other things we could remove here, as well. 9 | * 10 | * normalize.css v2.1.2 | MIT License | git.io/normalize 11 | 12 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 13 | * http://cssreset.com 14 | */ 15 | 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, i, u, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, fieldset, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | vertical-align: baseline; 33 | font: inherit; 34 | font-size: 100%; 35 | } 36 | 37 | ol, ul { 38 | list-style: none; 39 | } 40 | blockquote, q { 41 | quotes: none; 42 | } 43 | blockquote:before, blockquote:after, 44 | q:before, q:after { 45 | content: ''; 46 | content: none; 47 | } 48 | 49 | /** 50 | * Prevent modern browsers from displaying `audio` without controls. 51 | * Remove excess height in iOS 5 devices. 52 | */ 53 | 54 | audio:not([controls]) { 55 | display: none; 56 | height: 0; 57 | } 58 | 59 | /** 60 | * Hide the `template` element in IE, Safari, and Firefox < 22. 61 | */ 62 | 63 | [hidden], 64 | template { 65 | display: none; 66 | } 67 | 68 | script { 69 | display: none !important; 70 | } 71 | 72 | /* ========================================================================== 73 | Base 74 | ========================================================================== */ 75 | 76 | /** 77 | * 1. Set default font family to sans-serif. 78 | * 2. Prevent iOS text size adjust after orientation change, without disabling 79 | * user zoom. 80 | */ 81 | 82 | html { 83 | @include user-select(none); 84 | font-family: sans-serif; /* 1 */ 85 | -webkit-text-size-adjust: 100%; 86 | -ms-text-size-adjust: 100%; /* 2 */ 87 | -webkit-text-size-adjust: 100%; /* 2 */ 88 | } 89 | 90 | /** 91 | * Remove default margin. 92 | */ 93 | 94 | body { 95 | margin: 0; 96 | line-height: 1; 97 | } 98 | 99 | 100 | /** 101 | * Remove default outlines. 102 | */ 103 | a, 104 | button, 105 | :focus, 106 | a:focus, 107 | button:focus, 108 | a:active, 109 | a:hover { 110 | outline: 0; 111 | } 112 | 113 | /* * 114 | * Remove tap highlight color 115 | */ 116 | 117 | a { 118 | -webkit-user-drag: none; 119 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 120 | -webkit-tap-highlight-color: transparent; 121 | 122 | &[href]:hover { 123 | cursor: pointer; 124 | } 125 | } 126 | 127 | /* ========================================================================== 128 | Typography 129 | ========================================================================== */ 130 | 131 | 132 | /** 133 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 134 | */ 135 | 136 | b, 137 | strong { 138 | font-weight: bold; 139 | } 140 | 141 | /** 142 | * Address styling not present in Safari 5 and Chrome. 143 | */ 144 | 145 | dfn { 146 | font-style: italic; 147 | } 148 | 149 | /** 150 | * Address differences between Firefox and other browsers. 151 | */ 152 | 153 | hr { 154 | -moz-box-sizing: content-box; 155 | box-sizing: content-box; 156 | height: 0; 157 | } 158 | 159 | 160 | /** 161 | * Correct font family set oddly in Safari 5 and Chrome. 162 | */ 163 | 164 | code, 165 | kbd, 166 | pre, 167 | samp { 168 | font-size: 1em; 169 | font-family: monospace, serif; 170 | } 171 | 172 | /** 173 | * Improve readability of pre-formatted text in all browsers. 174 | */ 175 | 176 | pre { 177 | white-space: pre-wrap; 178 | } 179 | 180 | /** 181 | * Set consistent quote types. 182 | */ 183 | 184 | q { 185 | quotes: "\201C" "\201D" "\2018" "\2019"; 186 | } 187 | 188 | /** 189 | * Address inconsistent and variable font size in all browsers. 190 | */ 191 | 192 | small { 193 | font-size: 80%; 194 | } 195 | 196 | /** 197 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 198 | */ 199 | 200 | sub, 201 | sup { 202 | position: relative; 203 | vertical-align: baseline; 204 | font-size: 75%; 205 | line-height: 0; 206 | } 207 | 208 | sup { 209 | top: -0.5em; 210 | } 211 | 212 | sub { 213 | bottom: -0.25em; 214 | } 215 | 216 | /** 217 | * Define consistent border, margin, and padding. 218 | */ 219 | 220 | fieldset { 221 | margin: 0 2px; 222 | padding: 0.35em 0.625em 0.75em; 223 | border: 1px solid #c0c0c0; 224 | } 225 | 226 | /** 227 | * 1. Correct `color` not being inherited in IE 8/9. 228 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 229 | */ 230 | 231 | legend { 232 | padding: 0; /* 2 */ 233 | border: 0; /* 1 */ 234 | } 235 | 236 | /** 237 | * 1. Correct font family not being inherited in all browsers. 238 | * 2. Correct font size not being inherited in all browsers. 239 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 240 | * 4. Remove any default :focus styles 241 | * 5. Make sure webkit font smoothing is being inherited 242 | * 6. Remove default gradient in Android Firefox / FirefoxOS 243 | */ 244 | 245 | button, 246 | input, 247 | select, 248 | textarea { 249 | margin: 0; /* 3 */ 250 | font-size: 100%; /* 2 */ 251 | font-family: inherit; /* 1 */ 252 | outline-offset: 0; /* 4 */ 253 | outline-style: none; /* 4 */ 254 | outline-width: 0; /* 4 */ 255 | -webkit-font-smoothing: inherit; /* 5 */ 256 | background-image: none; /* 6 */ 257 | } 258 | 259 | /** 260 | * Address Firefox 4+ setting `line-height` on `input` using `importnt` in 261 | * the UA stylesheet. 262 | */ 263 | 264 | button, 265 | input { 266 | line-height: normal; 267 | } 268 | 269 | /** 270 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 271 | * All other form control elements do not inherit `text-transform` values. 272 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 273 | * Correct `select` style inheritance in Firefox 4+ and Opera. 274 | */ 275 | 276 | button, 277 | select { 278 | text-transform: none; 279 | } 280 | 281 | /** 282 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 283 | * and `video` controls. 284 | * 2. Correct inability to style clickable `input` types in iOS. 285 | * 3. Improve usability and consistency of cursor style between image-type 286 | * `input` and others. 287 | */ 288 | 289 | button, 290 | html input[type="button"], /* 1 */ 291 | input[type="reset"], 292 | input[type="submit"] { 293 | cursor: pointer; /* 3 */ 294 | -webkit-appearance: button; /* 2 */ 295 | } 296 | 297 | /** 298 | * Re-set default cursor for disabled elements. 299 | */ 300 | 301 | button[disabled], 302 | html input[disabled] { 303 | cursor: default; 304 | } 305 | 306 | /** 307 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 308 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 309 | * (include `-moz` to future-proof). 310 | */ 311 | 312 | input[type="search"] { 313 | -webkit-box-sizing: content-box; /* 2 */ 314 | -moz-box-sizing: content-box; 315 | box-sizing: content-box; 316 | -webkit-appearance: textfield; /* 1 */ 317 | } 318 | 319 | /** 320 | * Remove inner padding and search cancel button in Safari 5 and Chrome 321 | * on OS X. 322 | */ 323 | 324 | input[type="search"]::-webkit-search-cancel-button, 325 | input[type="search"]::-webkit-search-decoration { 326 | -webkit-appearance: none; 327 | } 328 | 329 | /** 330 | * Remove inner padding and border in Firefox 4+. 331 | */ 332 | 333 | button::-moz-focus-inner, 334 | input::-moz-focus-inner { 335 | padding: 0; 336 | border: 0; 337 | } 338 | 339 | /** 340 | * 1. Remove default vertical scrollbar in IE 8/9. 341 | * 2. Improve readability and alignment in all browsers. 342 | */ 343 | 344 | textarea { 345 | overflow: auto; /* 1 */ 346 | vertical-align: top; /* 2 */ 347 | } 348 | 349 | 350 | img { 351 | -webkit-user-drag: none; 352 | } 353 | 354 | /* ========================================================================== 355 | Tables 356 | ========================================================================== */ 357 | 358 | /** 359 | * Remove most spacing between table cells. 360 | */ 361 | 362 | table { 363 | border-spacing: 0; 364 | border-collapse: collapse; 365 | } 366 | -------------------------------------------------------------------------------- /src/ion-digit-keyboard.scss: -------------------------------------------------------------------------------- 1 | 2 | $dk-bg-color: transparent; 3 | $dk-btn-border-size: 1px; 4 | $dk-btn-height: 60px; 5 | $dk-btn-font-size: 24px; 6 | 7 | // Private variables (mostly default) 8 | $dk-btn-bg-color: #ccc; 9 | $dk-btn-border-color: #333; 10 | $dk-btn-text-color: #333; 11 | $dk-btn-action-color: #333; 12 | $dk-btn-click-bg-color: #ddd; 13 | $dk-btn-click-text-color: #444; 14 | 15 | $light: #fff !default; 16 | $stable: #f8f8f8 !default; 17 | $positive: #387ef5 !default; 18 | $calm: #11c1f3 !default; 19 | $balanced: #33cd5f !default; 20 | $energized: #ffc900 !default; 21 | $assertive: #ef473a !default; 22 | $royal: #886aea !default; 23 | $dark: #444 !default; 24 | $opaque-black: rgba(#000, 0.75); 25 | $opaque-white: rgba(#fff, 0.75); 26 | 27 | .digit-keyboard { 28 | position: absolute; 29 | left: 0; right: 0; bottom: 0; 30 | background: $dk-bg-color; 31 | font-size: $dk-btn-font-size; 32 | z-index: 5000; 33 | 34 | * { 35 | box-sizing: border-box; 36 | } 37 | 38 | // Row 39 | .digit-keyboard-row { 40 | display: flex; 41 | flex-direction: row; 42 | border-bottom: $dk-btn-border-size solid $dk-btn-border-color; 43 | 44 | // Wrapper 45 | .digit-keyboard-key-wrapper { 46 | flex: 1; 47 | text-align: center; 48 | position: relative; 49 | height: $dk-btn-height; 50 | 51 | // Key 52 | .digit-keyboard-key { 53 | display: block; 54 | margin: 0 auto; 55 | position: absolute; 56 | left: 0; top: 0; right: 0; bottom: 0; 57 | border-right: $dk-btn-border-size solid $dk-btn-border-color; 58 | border-left: $dk-btn-border-size solid $dk-btn-border-color; 59 | //background: $dk-btn-bg-color; 60 | //color: $dk-btn-text-color; 61 | line-height: $dk-btn-height; 62 | 63 | -webkit-transition: background-color 100ms linear; 64 | -moz-transition: background-color 100ms linear; 65 | -o-transition: background-color 100ms linear; 66 | -ms-transition: background-color 100ms linear; 67 | transition: background-color 100ms linear; 68 | 69 | // Number 70 | .digit-keyboard-key-number { 71 | font-size: 1em; 72 | vertical-align: middle; 73 | display: inline-block; 74 | line-height: normal; 75 | text-align: center; 76 | margin-top: -0.40em; 77 | 78 | // Letters 79 | .digit-keyboard-key-letters { 80 | font-size: (($dk-btn-font-size*40)/100); 81 | line-height: (($dk-btn-font-size*40)/100); 82 | height: (($dk-btn-font-size*40)/100); 83 | margin-top: -0.25em; 84 | 85 | &.hidden { 86 | visibility: hidden; 87 | } 88 | } 89 | } 90 | 91 | // Action 92 | .digit-keyboard-key-action { 93 | position: absolute; 94 | left: 0; top: 0; right: 0; bottom: 0; 95 | line-height: $dk-btn-height; 96 | font-size: $dk-btn-font-size; 97 | } 98 | 99 | /*&.activated { 100 | //background: $dk-btn-click-bg-color; 101 | 102 | .digit-keyboard-key-number { 103 | //color: $dk-btn-click-text-color; 104 | } 105 | }*/ 106 | } 107 | 108 | &.hidden { 109 | visibility: hidden; 110 | } 111 | 112 | &:first-child .digit-keyboard-key { 113 | border-right: none; 114 | } 115 | 116 | &:last-child .digit-keyboard-key { 117 | border-left: none; 118 | 119 | } 120 | } 121 | 122 | &:first-child { 123 | border-top: $dk-btn-border-size solid $dk-btn-border-color; 124 | } 125 | 126 | &:last-child { 127 | border: none; 128 | 129 | .digit-keyboard-key-wrapper { 130 | .digit-keyboard-key { 131 | border-bottom: $dk-btn-border-size solid $dk-btn-border-color; 132 | } 133 | } 134 | } 135 | } 136 | 137 | // Align center 138 | &.align-center { 139 | margin: 0 auto; 140 | } 141 | 142 | // Align left 143 | &.align-left { 144 | margin-right: auto; 145 | } 146 | 147 | // Align right 148 | &.align-right { 149 | margin-left: auto; 150 | } 151 | 152 | // No letters 153 | &.no-letters { 154 | .digit-keyboard-row { 155 | .digit-keyboard-key-wrapper { 156 | .digit-keyboard-key { 157 | .digit-keyboard-key-number { 158 | margin-top: -0.30em; 159 | 160 | .digit-keyboard-key-letters { 161 | display: none; 162 | } 163 | } 164 | } 165 | } 166 | } 167 | } 168 | 169 | // Round buttons 170 | &.round-buttons { 171 | .digit-keyboard-row { 172 | border: none; 173 | 174 | .digit-keyboard-key-wrapper { 175 | margin: 10px 0 0 0; 176 | 177 | .digit-keyboard-key { 178 | width: $dk-btn-height; 179 | -webkit-border-radius: 100%; 180 | -moz-border-radius: 100%; 181 | border-radius: 100%; 182 | border: $dk-btn-border-size solid $dk-btn-border-color; 183 | } 184 | } 185 | 186 | &:last-child .digit-keyboard-key-wrapper { 187 | margin-bottom: 10px; 188 | } 189 | } 190 | 191 | &.no-letters { 192 | .digit-keyboard-row { 193 | .digit-keyboard-key-wrapper { 194 | .digit-keyboard-key { 195 | .digit-keyboard-key-number { 196 | height: (($dk-btn-height*96)/100); 197 | line-height: (($dk-btn-height*96)/100); 198 | } 199 | } 200 | } 201 | } 202 | } 203 | } 204 | 205 | /* 206 | * Keyboard color styles 207 | */ 208 | &.keyboard-light { 209 | * { border-color: darken($light, 10%) !important; } 210 | .digit-keyboard-key { 211 | background: $light; 212 | color: #444; 213 | 214 | &.activated { 215 | background: darken($light, 10%); 216 | } 217 | } 218 | } 219 | 220 | &.keyboard-stable { 221 | * { border-color: darken($stable, 10%) !important; } 222 | .digit-keyboard-key { 223 | background: $stable; 224 | color: #444; 225 | 226 | &.activated { 227 | background: darken($stable, 10%); 228 | } 229 | } 230 | } 231 | 232 | &.keyboard-positive { 233 | * { border-color: darken($positive, 10%) !important; } 234 | .digit-keyboard-key { 235 | background: $positive; 236 | color: #fff; 237 | 238 | &.activated { 239 | background: darken($positive, 10%); 240 | } 241 | } 242 | } 243 | 244 | &.keyboard-calm { 245 | * { border-color: darken($calm, 10%) !important; } 246 | .digit-keyboard-key { 247 | background: $calm; 248 | color: #fff; 249 | 250 | &.activated { 251 | background: darken($calm, 10%); 252 | } 253 | } 254 | } 255 | 256 | &.keyboard-balanced { 257 | * { border-color: darken($balanced, 10%) !important; } 258 | .digit-keyboard-key { 259 | background: $balanced; 260 | color: #fff; 261 | 262 | &.activated { 263 | background: darken($balanced, 10%); 264 | } 265 | } 266 | } 267 | 268 | &.keyboard-energized { 269 | * { border-color: darken($energized, 5%) !important; } 270 | .digit-keyboard-key { 271 | background: $energized; 272 | color: #fff; 273 | 274 | &.activated { 275 | background: darken($energized, 5%); 276 | } 277 | } 278 | } 279 | 280 | &.keyboard-assertive { 281 | * { border-color: darken($assertive, 10%) !important; } 282 | .digit-keyboard-key { 283 | background: $assertive; 284 | color: #fff; 285 | 286 | &.activated { 287 | background: darken($assertive, 10%); 288 | } 289 | } 290 | } 291 | 292 | &.keyboard-royal { 293 | * { border-color: darken($royal, 8%) !important; } 294 | .digit-keyboard-key { 295 | background: $royal; 296 | color: #fff; 297 | 298 | &.activated { 299 | background: darken($royal, 8%); 300 | } 301 | } 302 | } 303 | 304 | &.keyboard-dark { 305 | * { border-color: darken($dark, 10%) !important; } 306 | .digit-keyboard-key { 307 | background: $dark; 308 | color: #fff; 309 | 310 | &.activated { 311 | background: darken($dark, 10%); 312 | } 313 | } 314 | } 315 | 316 | &.keyboard-opaque-black { 317 | * { border-color: $opaque-black !important; } 318 | .digit-keyboard-key { 319 | background: rgba(#000, 0.15); 320 | color: $opaque-black; 321 | 322 | &.activated { 323 | background: rgba(#000, 0.25); 324 | } 325 | } 326 | } 327 | 328 | &.keyboard-opaque-white { 329 | * { border-color: $opaque-white !important; } 330 | .digit-keyboard-key { 331 | background: rgba(#fff, 0.15); 332 | color: $opaque-white; 333 | 334 | &.activated { 335 | background: rgba(#fff, 0.25); 336 | } 337 | } 338 | } 339 | 340 | // Animation: slide-up 341 | &.animation-slide-up { 342 | -webkit-transition: transform linear 150ms; 343 | transition: transform linear 150ms; 344 | transform: translate3d(0,0,0); 345 | } 346 | 347 | &.animation-slide-up.ng-hide { 348 | transform: translate3d(0,100%,0); 349 | } 350 | 351 | // Animation: pop 352 | &.animation-pop { 353 | -webkit-transition: transform linear 150ms; 354 | transition: transform linear 150ms; 355 | transform: scale3d(1, 1, 1); 356 | } 357 | 358 | &.animation-pop.ng-hide { 359 | transform: scale3d(0, 0, 1); 360 | } 361 | } 362 | 363 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Ionic Digit Keyboard 2 | 3 | ![](http://icons.iconarchive.com/icons/yusuke-kamiyamane/fugue/16/information-button-icon.png) Try it now using [Ionic View](http://view.ionic.io/) with the following id: **462C870C**. 4 | 5 | * [Info](#1---info) 6 | * [Installation / loading](#2---installation--loading) 7 | * [Usage](#3---usage) 8 | * [Adding the keyboard directive to your app](#31---adding-the-keyboard-directive-to-your-app) 9 | * [Settings](#32---settings) 10 | * [Last step to get a working keyboard](#33---last-step-to-get-a-working-keyboard) 11 | * [Show keyboard on demand](#34---show-keyboard-on-demand) 12 | * [Hide keyboard on demand](#35---hide-keyboard-on-demand) 13 | * [Show / hide animations](#36---show--hide-animations) 14 | * [Left and right actions](#4---left-and-right-actions) 15 | * [Resize content](#5---resize-content) 16 | * [Customization](#6---customization) 17 | * [Keyboard theme](#61---keyboard-theme) 18 | * [Round buttons](#62---round-buttons) 19 | * [Keyboard width](#63---keyboard-width) 20 | * [Keyboard alignment](#64---keyboard-alignment) 21 | * [Actions buttons style](#65---actions-buttons-style) 22 | * [Display letters](#66---display-letters) 23 | * [Advanced customization](#7---advanced-customization) 24 | 25 | ##1 - Info 26 | Version: 1.0.0
27 | Author: Skol (Vincent Letellier)
28 | Email: skol.pro@gmail.com
29 | Donations: You're really welcome to donate, any amount at any time :-) 30 | 31 | [![](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=ADEZD3EL9DN5Q&lc=US&item_name=Ionic%20Digital%20Keyboard¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted) 32 | 33 | ##2 - Installation / loading 34 | Add the *ion-digit-keyboard.min.js* to your project, insert it in your index.html, add it as dependency: 35 | ```javascript 36 | angular.module('app', ['ionic', 'ion-digit-keyboard']) 37 | ``` 38 | 39 | ##3 - Usage 40 | ####3.1 - Adding the keyboard directive to your app 41 | You can add the **ion-digit-keyboard** directive globaly, right before the body closure of your html: 42 | ```html 43 | 44 | 45 | ... 46 | 47 | 48 | ``` 49 | 50 | Or in a specific view, be sure to put it outside of the view content: 51 | ```html 52 | 53 | 54 | 55 | 56 | 57 | 58 | ``` 59 | 60 | ####3.2 - Settings 61 | As you probably noticed, you'll need to define a **settings** object in (one of) your controller(s): 62 | ```javascript 63 | angular.module('app').controller('MyController', ['$scope', MyController]); 64 | 65 | function MyController($scope) { 66 | $scope.keyboardSettings = { 67 | // settings here 68 | } 69 | } 70 | ``` 71 | 72 | ####3.3 - Last step to get a working keyboard 73 | Now you only need to define the **action** happening when a number key is pressed. 74 | So let say you want to add the pressed numbers to an input element: 75 | ```html 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | ``` 84 | ```javascript 85 | // MyController.js 86 | function MyController($scope) { 87 | $scope.numbers = ''; 88 | $scope.keyboardSettings = { 89 | action: function(number) { 90 | $scope.numbers += number; 91 | } 92 | } 93 | } 94 | ``` 95 | If you tried that, you probably noticed that if you click on the input, the native keyboard is showing up. One way to prevent that is to add the **readonly** property to the input, of course you'll have to adjust the input style using this method. 96 | 97 | ####3.4 - Show keyboard on demand 98 | If you want to show the keyboard when you click on the input, simply use the **ngShow** or **ngHide** angular directive attributes (don't forget the **readonly** attribute in this case, or any other native keyboard workaround): 99 | ```html 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | ``` 108 | ```javascript 109 | // MyController.js 110 | function MyController($scope) { 111 | $scope.numbers = ''; 112 | $scope.keyboardVisible = false; 113 | $scope.keyboardSettings = { 114 | action: function(number) { 115 | $scope.numbers += number; 116 | } 117 | } 118 | $scope.showKeyboard = function($event) { 119 | keyboardVisible = true; 120 | } 121 | } 122 | ``` 123 | 124 | ####3.5 - Hide keyboard on demand 125 | You won't be able to use angular **onBlur** directive to hide the keyboard, since tapping on the keyboard will trigger the blur event. 126 | But you can for example add a **ngClick** directive to your content, and set `$scope.keyboardVisible` to false. 127 | 128 | ####3.6 - Show / hide animations 129 | You can change the default *slide-up* animation to a *pop* animation (more animations may be implemented later): 130 | ```javascript 131 | // MyController.js 132 | function MyController($scope) { 133 | $scope.keyboardSettings = { 134 | animation: 'pop', 135 | // ... 136 | } 137 | } 138 | ``` 139 | 140 | ##4 - Left and right actions 141 | You can add and customize bottom left and right actions. Here is an example with remove and submit buttons: 142 | ```javascript 143 | // MyController.js 144 | function MyController($scope) { 145 | // ... 146 | $scope.numbers = ''; 147 | $scope.keyboardSettings = { 148 | action: function(number) { 149 | $scope.numbers += number; 150 | }, 151 | leftButton: { 152 | html: '', 153 | action: function() { 154 | $scope.numbers = $scope.numbers.slice(0, -1); 155 | } 156 | }, 157 | rightButton: { 158 | html: '', 159 | action: function() { 160 | // Submit stuff 161 | } 162 | } 163 | } 164 | // ... 165 | } 166 | ``` 167 | 168 | ##5 - Resize content 169 | You can tell the directive to resize the main content of the view where the keyboard is showing up, **without** this property, the keyboard will be displayed over your view's content: 170 | ```html 171 | 172 | 173 | 174 | 175 | 176 | ``` 177 | ```javascript 178 | // MyController.js 179 | function MyController($scope) { 180 | $scope.keyboardSettings = { 181 | resizeContent: true 182 | } 183 | } 184 | ``` 185 | By default, it will search for the **ion-content** element located inside the parent element. However you can specify another element to be resized: 186 | ```html 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | ``` 196 | ```javascript 197 | // MyController.js 198 | function MyController($scope) { 199 | $scope.keyboardSettings = { 200 | resizeContent: { 201 | enable: true, 202 | element: 'ion-pane' 203 | } 204 | } 205 | } 206 | ``` 207 | 208 | ##6 - Customization 209 | ####6.1 - Keyboard theme 210 | You can set one of the default ionic color scheme as a theme for the keyboard by adding the `theme` property in the keyboard settings (`light`, `stable`, `positive`, `calm`, `balanced`, `energized`, `assertive`, `royal`, `dark`). 211 | There is two additional themes you can use: `opaque-black` and `opaque-white`, both are espacially usefull with `resizeContent` set to false since the keyboard will be displayed over your login panel background for-example. 212 | 213 | ####6.2 - Round buttons 214 | To make buttons rounded, just set the `roundButtons` property to true inside the keyboard settings. 215 | 216 | ####6.3 - Keyboard width 217 | You can change the `width` of the keyboard, using percentages or pixels. Default is "**100%**". Mostly usefull when using rounded buttons. 218 | 219 | ####6.4 - Keyboard alignment 220 | You can also change the horizontal alignment of the keyboard using the `align` property. Default is "**center**". 221 | 222 | ####6.5 - Actions buttons style 223 | You can add specific styles to the actions buttons by adding the `style` property to the action settings. Let say you want to have an iOS phone like button: 224 | ```javascript 225 | // MyController.js 226 | function MyController($scope) { 227 | $scope.keyboardSettings = { 228 | rightButton: { 229 | html: '', 230 | action: function() { 231 | // Call action 232 | }, 233 | style: { 234 | color: '#fff', // Text color 235 | bgColor: '#4cda64', // Background color 236 | activeBgColor: '#43bf58', // Baackground color when pressed 237 | borderColor: '#43bf58' // Only clearly visible on round buttons (until next plugin version) 238 | } 239 | } 240 | } 241 | } 242 | ``` 243 | 244 | ####6.6 - Display letters 245 | Last but not least, you can display letters under numbers on the keyboard by setting the `showLetters` property to true. 246 | 247 | ##7 - Advanced customization 248 | Coming soon... 249 | -------------------------------------------------------------------------------- /examples/example1/www/lib/ionic/scss/_bar.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Bar (Headers and Footers) 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .bar { 8 | @include display-flex(); 9 | @include translate3d(0,0,0); 10 | @include user-select(none); 11 | position: absolute; 12 | right: 0; 13 | left: 0; 14 | z-index: $z-index-bar; 15 | 16 | @include box-sizing(border-box); 17 | padding: $bar-padding-portrait; 18 | 19 | width: 100%; 20 | height: $bar-height; 21 | border-width: 0; 22 | border-style: solid; 23 | border-top: 1px solid transparent; 24 | border-bottom: 1px solid $bar-default-border; 25 | 26 | background-color: $bar-default-bg; 27 | 28 | /* border-width: 1px will actually create 2 device pixels on retina */ 29 | /* this nifty trick sets an actual 1px border on hi-res displays */ 30 | background-size: 0; 31 | @media (min--moz-device-pixel-ratio: 1.5), 32 | (-webkit-min-device-pixel-ratio: 1.5), 33 | (min-device-pixel-ratio: 1.5), 34 | (min-resolution: 144dpi), 35 | (min-resolution: 1.5dppx) { 36 | border: none; 37 | background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%); 38 | background-position: bottom; 39 | background-size: 100% 1px; 40 | background-repeat: no-repeat; 41 | } 42 | 43 | &.bar-clear { 44 | border: none; 45 | background: none; 46 | color: #fff; 47 | 48 | .button { 49 | color: #fff; 50 | } 51 | .title { 52 | color: #fff; 53 | } 54 | } 55 | 56 | &.item-input-inset { 57 | .item-input-wrapper { 58 | margin-top: -1px; 59 | 60 | input { 61 | padding-left: 8px; 62 | width: 94%; 63 | height: 28px; 64 | background: transparent; 65 | } 66 | } 67 | } 68 | 69 | &.bar-light { 70 | @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text); 71 | &.bar-footer{ 72 | background-image: linear-gradient(180deg, $bar-light-border, $bar-light-border 50%, transparent 50%); 73 | } 74 | } 75 | &.bar-stable { 76 | @include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text); 77 | &.bar-footer{ 78 | background-image: linear-gradient(180deg, $bar-stable-border, $bar-stable-border 50%, transparent 50%); 79 | } 80 | } 81 | &.bar-positive { 82 | @include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text); 83 | &.bar-footer{ 84 | background-image: linear-gradient(180deg, $bar-positive-border, $bar-positive-border 50%, transparent 50%); 85 | } 86 | } 87 | &.bar-calm { 88 | @include bar-style($bar-calm-bg, $bar-calm-border, $bar-calm-text); 89 | &.bar-footer{ 90 | background-image: linear-gradient(180deg, $bar-calm-border, $bar-calm-border 50%, transparent 50%); 91 | } 92 | } 93 | &.bar-assertive { 94 | @include bar-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-text); 95 | &.bar-footer{ 96 | background-image: linear-gradient(180deg, $bar-assertive-border, $bar-assertive-border 50%, transparent 50%); 97 | } 98 | } 99 | &.bar-balanced { 100 | @include bar-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-text); 101 | &.bar-footer{ 102 | background-image: linear-gradient(180deg, $bar-balanced-border, $bar-positive-border 50%, transparent 50%); 103 | } 104 | } 105 | &.bar-energized { 106 | @include bar-style($bar-energized-bg, $bar-energized-border, $bar-energized-text); 107 | &.bar-footer{ 108 | background-image: linear-gradient(180deg, $bar-energized-border, $bar-energized-border 50%, transparent 50%); 109 | } 110 | } 111 | &.bar-royal { 112 | @include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text); 113 | &.bar-footer{ 114 | background-image: linear-gradient(180deg, $bar-royal-border, $bar-royal-border 50%, transparent 50%); 115 | } 116 | } 117 | &.bar-dark { 118 | @include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text); 119 | &.bar-footer{ 120 | background-image: linear-gradient(180deg, $bar-dark-border, $bar-dark-border 50%, transparent 50%); 121 | } 122 | } 123 | 124 | // Title inside of a bar is centered 125 | .title { 126 | display: block; 127 | position: absolute; 128 | 129 | top: 0; 130 | right: 0; 131 | left: 0; 132 | z-index: $z-index-bar-title; 133 | overflow: hidden; 134 | 135 | margin: 0 10px; 136 | 137 | min-width: 30px; 138 | height: $bar-height - 1; 139 | 140 | text-align: center; 141 | 142 | // Go into ellipsis if too small 143 | text-overflow: ellipsis; 144 | white-space: nowrap; 145 | 146 | font-size: $bar-title-font-size; 147 | font-weight: $headings-font-weight; 148 | 149 | line-height: $bar-height; 150 | 151 | &.title-left { 152 | text-align: left; 153 | } 154 | &.title-right { 155 | text-align: right; 156 | } 157 | } 158 | 159 | .title a { 160 | color: inherit; 161 | } 162 | 163 | .button, button { 164 | z-index: $z-index-bar-button; 165 | padding: 0 $button-bar-button-padding; 166 | min-width: initial; 167 | min-height: $button-bar-button-height - 1; 168 | font-weight: 400; 169 | font-size: $button-bar-button-font-size; 170 | line-height: $button-bar-button-height; 171 | 172 | &.button-icon:before, 173 | .icon:before, 174 | &.icon:before, 175 | &.icon-left:before, 176 | &.icon-right:before { 177 | padding-right: 2px; 178 | padding-left: 2px; 179 | font-size: $button-bar-button-icon-size; 180 | line-height: $button-bar-button-height; 181 | } 182 | 183 | &.button-icon { 184 | font-size: $bar-title-font-size; 185 | .icon:before, 186 | &:before, 187 | &.icon-left:before, 188 | &.icon-right:before { 189 | vertical-align: top; 190 | font-size: $button-large-icon-size; 191 | line-height: $button-bar-button-height; 192 | } 193 | } 194 | &.button-clear { 195 | padding-right: 2px; 196 | padding-left: 2px; 197 | font-weight: 300; 198 | font-size: $bar-title-font-size; 199 | 200 | .icon:before, 201 | &.icon:before, 202 | &.icon-left:before, 203 | &.icon-right:before { 204 | font-size: $button-large-icon-size; 205 | line-height: $button-bar-button-height; 206 | } 207 | } 208 | 209 | &.back-button { 210 | display: block; 211 | margin-right: 5px; 212 | padding: 0; 213 | white-space: nowrap; 214 | font-weight: 400; 215 | } 216 | 217 | &.back-button.active, 218 | &.back-button.activated { 219 | opacity: 0.2; 220 | } 221 | } 222 | 223 | .button-bar > .button, 224 | .buttons > .button { 225 | min-height: $button-bar-button-height - 1; 226 | line-height: $button-bar-button-height; 227 | } 228 | 229 | .button-bar + .button, 230 | .button + .button-bar { 231 | margin-left: 5px; 232 | } 233 | 234 | // Android 4.4 messes with the display property 235 | .buttons, 236 | .buttons.primary-buttons, 237 | .buttons.secondary-buttons { 238 | display: inherit; 239 | } 240 | .buttons span { 241 | display: inline-block; 242 | } 243 | .buttons-left span { 244 | margin-right: 5px; 245 | display: inherit; 246 | } 247 | .buttons-right span { 248 | margin-left: 5px; 249 | display: inherit; 250 | } 251 | 252 | // Place the last button in a bar on the right of the bar 253 | .title + .button:last-child, 254 | > .button + .button:last-child, 255 | > .button.pull-right, 256 | .buttons.pull-right, 257 | .title + .buttons { 258 | position: absolute; 259 | top: 5px; 260 | right: 5px; 261 | bottom: 5px; 262 | } 263 | 264 | } 265 | 266 | .platform-android { 267 | 268 | .nav-bar-has-subheader .bar { 269 | background-image: none; 270 | } 271 | 272 | .bar { 273 | 274 | .back-button .icon:before { 275 | font-size: 24px; 276 | } 277 | 278 | .title { 279 | font-size: 19px; 280 | line-height: $bar-height; 281 | } 282 | } 283 | 284 | } 285 | 286 | // Default styles for buttons inside of styled bars 287 | .bar-light { 288 | .button { 289 | @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text); 290 | @include button-clear($bar-light-text, $bar-title-font-size); 291 | } 292 | } 293 | .bar-stable { 294 | .button { 295 | @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text); 296 | @include button-clear($bar-stable-text, $bar-title-font-size); 297 | } 298 | } 299 | .bar-positive { 300 | .button { 301 | @include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text); 302 | @include button-clear(#fff, $bar-title-font-size); 303 | } 304 | } 305 | .bar-calm { 306 | .button { 307 | @include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text); 308 | @include button-clear(#fff, $bar-title-font-size); 309 | } 310 | } 311 | .bar-assertive { 312 | .button { 313 | @include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text); 314 | @include button-clear(#fff, $bar-title-font-size); 315 | } 316 | } 317 | .bar-balanced { 318 | .button { 319 | @include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text); 320 | @include button-clear(#fff, $bar-title-font-size); 321 | } 322 | } 323 | .bar-energized { 324 | .button { 325 | @include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text); 326 | @include button-clear(#fff, $bar-title-font-size); 327 | } 328 | } 329 | .bar-royal { 330 | .button { 331 | @include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text); 332 | @include button-clear(#fff, $bar-title-font-size); 333 | } 334 | } 335 | .bar-dark { 336 | .button { 337 | @include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text); 338 | @include button-clear(#fff, $bar-title-font-size); 339 | } 340 | } 341 | 342 | // Header at top 343 | .bar-header { 344 | top: 0; 345 | border-top-width: 0; 346 | border-bottom-width: 1px; 347 | &.has-tabs-top{ 348 | border-bottom-width: 0px; 349 | background-image: none; 350 | } 351 | } 352 | .tabs-top .bar-header{ 353 | border-bottom-width: 0px; 354 | background-image: none; 355 | } 356 | 357 | // Footer at bottom 358 | .bar-footer { 359 | bottom: 0; 360 | border-top-width: 1px; 361 | border-bottom-width: 0; 362 | background-position: top; 363 | 364 | height: $bar-footer-height; 365 | 366 | &.item-input-inset { 367 | position: absolute; 368 | } 369 | } 370 | 371 | // Don't render padding if the bar is just for tabs 372 | .bar-tabs { 373 | padding: 0; 374 | } 375 | 376 | .bar-subheader { 377 | top: $bar-height; 378 | display: block; 379 | 380 | height: $bar-subheader-height; 381 | } 382 | .bar-subfooter { 383 | bottom: $bar-footer-height; 384 | display: block; 385 | 386 | height: $bar-subfooter-height; 387 | } 388 | 389 | .nav-bar-block { 390 | position: absolute; 391 | top: 0; 392 | right: 0; 393 | left: 0; 394 | z-index: $z-index-bar; 395 | } 396 | 397 | .bar .back-button.hide, 398 | .bar .buttons .hide { 399 | display: none; 400 | } 401 | 402 | .nav-bar-tabs-top .bar { 403 | background-image: none; 404 | } 405 | -------------------------------------------------------------------------------- /dist/ion-digit-keyboard.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){var i=e.createElement("style");if(e.getElementsByTagName("head")[0].appendChild(i),i.styleSheet)i.styleSheet.disabled||(i.styleSheet.cssText=t);else try{i.innerHTML=t}catch(d){i.innerText=t}}(document,".digit-keyboard .digit-keyboard-row .digit-keyboard-key-wrapper .digit-keyboard-key .digit-keyboard-key-number .digit-keyboard-key-letters.hidden,.digit-keyboard .digit-keyboard-row .digit-keyboard-key-wrapper.hidden{visibility:hidden}.digit-keyboard{position:absolute;left:0;right:0;bottom:0;background:0 0;font-size:24px;z-index:5000}.digit-keyboard *{box-sizing:border-box}.digit-keyboard .digit-keyboard-row{display:flex;flex-direction:row;border-bottom:1px solid #333}.digit-keyboard .digit-keyboard-row .digit-keyboard-key-wrapper{flex:1;text-align:center;position:relative;height:60px}.digit-keyboard .digit-keyboard-row .digit-keyboard-key-wrapper .digit-keyboard-key{display:block;margin:0 auto;position:absolute;left:0;top:0;right:0;bottom:0;border-right:1px solid #333;border-left:1px solid #333;line-height:60px;-webkit-transition:background-color .1s linear;-moz-transition:background-color .1s linear;-o-transition:background-color .1s linear;-ms-transition:background-color .1s linear;transition:background-color .1s linear}.digit-keyboard .digit-keyboard-row .digit-keyboard-key-wrapper .digit-keyboard-key .digit-keyboard-key-number{font-size:1em;vertical-align:middle;display:inline-block;line-height:normal;text-align:center;margin-top:-.4em}.digit-keyboard .digit-keyboard-row .digit-keyboard-key-wrapper .digit-keyboard-key .digit-keyboard-key-number .digit-keyboard-key-letters{font-size:9.6px;line-height:9.6px;height:9.6px;margin-top:-.25em}.digit-keyboard .digit-keyboard-row .digit-keyboard-key-wrapper .digit-keyboard-key .digit-keyboard-key-action{position:absolute;left:0;top:0;right:0;bottom:0;line-height:60px;font-size:24px}.digit-keyboard .digit-keyboard-row .digit-keyboard-key-wrapper:first-child .digit-keyboard-key{border-right:none}.digit-keyboard .digit-keyboard-row .digit-keyboard-key-wrapper:last-child .digit-keyboard-key{border-left:none}.digit-keyboard .digit-keyboard-row:first-child{border-top:1px solid #333}.digit-keyboard .digit-keyboard-row:last-child{border:none}.digit-keyboard .digit-keyboard-row:last-child .digit-keyboard-key-wrapper .digit-keyboard-key{border-bottom:1px solid #333}.digit-keyboard.align-center{margin:0 auto}.digit-keyboard.align-left{margin-right:auto}.digit-keyboard.align-right{margin-left:auto}.digit-keyboard.no-letters .digit-keyboard-row .digit-keyboard-key-wrapper .digit-keyboard-key .digit-keyboard-key-number{margin-top:-.3em}.digit-keyboard.no-letters .digit-keyboard-row .digit-keyboard-key-wrapper .digit-keyboard-key .digit-keyboard-key-number .digit-keyboard-key-letters{display:none}.digit-keyboard.round-buttons .digit-keyboard-row{border:none}.digit-keyboard.round-buttons .digit-keyboard-row .digit-keyboard-key-wrapper{margin:10px 0 0}.digit-keyboard.round-buttons .digit-keyboard-row .digit-keyboard-key-wrapper .digit-keyboard-key{width:60px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:1px solid #333}.digit-keyboard.round-buttons .digit-keyboard-row:last-child .digit-keyboard-key-wrapper{margin-bottom:10px}.digit-keyboard.round-buttons.no-letters .digit-keyboard-row .digit-keyboard-key-wrapper .digit-keyboard-key .digit-keyboard-key-number{height:57.6px;line-height:57.6px}.digit-keyboard.keyboard-light *{border-color:#e6e6e6!important}.digit-keyboard.keyboard-light .digit-keyboard-key{background:#fff;color:#444}.digit-keyboard.keyboard-light .digit-keyboard-key.activated{background:#e6e6e6}.digit-keyboard.keyboard-stable *{border-color:#dfdfdf!important}.digit-keyboard.keyboard-stable .digit-keyboard-key{background:#f8f8f8;color:#444}.digit-keyboard.keyboard-stable .digit-keyboard-key.activated{background:#dfdfdf}.digit-keyboard.keyboard-positive *{border-color:#0c60ee!important}.digit-keyboard.keyboard-positive .digit-keyboard-key{background:#387ef5;color:#fff}.digit-keyboard.keyboard-positive .digit-keyboard-key.activated{background:#0c60ee}.digit-keyboard.keyboard-calm *{border-color:#0a9dc7!important}.digit-keyboard.keyboard-calm .digit-keyboard-key{background:#11c1f3;color:#fff}.digit-keyboard.keyboard-calm .digit-keyboard-key.activated{background:#0a9dc7}.digit-keyboard.keyboard-balanced *{border-color:#28a54c!important}.digit-keyboard.keyboard-balanced .digit-keyboard-key{background:#33cd5f;color:#fff}.digit-keyboard.keyboard-balanced .digit-keyboard-key.activated{background:#28a54c}.digit-keyboard.keyboard-energized *{border-color:#e6b500!important}.digit-keyboard.keyboard-energized .digit-keyboard-key{background:#ffc900;color:#fff}.digit-keyboard.keyboard-energized .digit-keyboard-key.activated{background:#e6b500}.digit-keyboard.keyboard-assertive *{border-color:#e42112!important}.digit-keyboard.keyboard-assertive .digit-keyboard-key{background:#ef473a;color:#fff}.digit-keyboard.keyboard-assertive .digit-keyboard-key.activated{background:#e42112}.digit-keyboard.keyboard-royal *{border-color:#6b46e5!important}.digit-keyboard.keyboard-royal .digit-keyboard-key{background:#886aea;color:#fff}.digit-keyboard.keyboard-royal .digit-keyboard-key.activated{background:#6b46e5}.digit-keyboard.keyboard-dark *{border-color:#2b2b2b!important}.digit-keyboard.keyboard-dark .digit-keyboard-key{background:#444;color:#fff}.digit-keyboard.keyboard-dark .digit-keyboard-key.activated{background:#2b2b2b}.digit-keyboard.keyboard-opaque-black *{border-color:rgba(0,0,0,.75)!important}.digit-keyboard.keyboard-opaque-black .digit-keyboard-key{background:rgba(0,0,0,.15);color:rgba(0,0,0,.75)}.digit-keyboard.keyboard-opaque-black .digit-keyboard-key.activated{background:rgba(0,0,0,.25)}.digit-keyboard.keyboard-opaque-white *{border-color:rgba(255,255,255,.75)!important}.digit-keyboard.keyboard-opaque-white .digit-keyboard-key{background:rgba(255,255,255,.15);color:rgba(255,255,255,.75)}.digit-keyboard.keyboard-opaque-white .digit-keyboard-key.activated{background:rgba(255,255,255,.25)}.digit-keyboard.animation-slide-up{-webkit-transition:transform linear 150ms;transition:transform linear 150ms;transform:translate3d(0,0,0)}.digit-keyboard.animation-slide-up.ng-hide{transform:translate3d(0,100%,0)}.digit-keyboard.animation-pop{-webkit-transition:transform linear 150ms;transition:transform linear 150ms;transform:scale3d(1,1,1)}.digit-keyboard.animation-pop.ng-hide{transform:scale3d(0,0,1)}"),!function(e){try{e=angular.module("ion-digit-keyboard.templates")}catch(t){e=angular.module("ion-digit-keyboard.templates",[])}e.run(["$templateCache",function(e){e.put("keyboard.tpl.html","
1
2
ABC
3
DEF
4
GHI
5
JKL
6
MNO
7
PQRS
8
TUV
9
WXYZ
0
")}])}(),angular.module("ion-digit-keyboard.directive",[]).directive("ionDigitKeyboard",["$timeout","$ionicScrollDelegate","$templateCache",function(e,t,i){var d=150;return{restrict:"EA",template:i.get("keyboard.tpl.html"),replace:!0,scope:{settings:"=settings",ngShow:"=",ngHide:"="},link:function(i,o,r){function a(){1==b&&(k.style.bottom="0px",k.style.height=s)}function n(){e(function(){if(1==b){var e=o[0].offsetHeight;s=k.style.height,k.style.height="auto",k.style.bottom=e+1+"px"}},d+10)}function y(){i.ngShow===!0?n():i.ngShow===!1&&a(),t.resize()}function g(){i.ngHide===!0?a():i.ngHide===!1&&n(),t.resize()}"undefined"==typeof i.settings&&(i.settings={});var k,s,b=!0,l="ion-content",c={},u={};if(i.leftStyle="",i.rightStyle="",i.leftFontSize="",i.rightFontSize="",i.showLetters="undefined"==typeof i.settings.showLetters?!1:i.settings.showLetters,i.roundButtons="undefined"==typeof i.settings.roundButtons?!1:i.settings.roundButtons,i.numberAction=i.settings.action||function(){},i.width=i.settings.width||"100%",i.align=i.settings.align||"center",i.animation=i.settings.animation||"slide-up",i.theme=i.settings.theme||"stable","undefined"!=typeof i.settings.leftButton&&"object"==typeof i.settings.leftButton.style&&("undefined"!=typeof i.settings.leftButton.style.color&&(i.leftStyle+="color: "+i.settings.leftButton.style.color+";"),"undefined"!=typeof i.settings.leftButton.style.bgColor&&(c["default"]=i.settings.leftButton.style.bgColor,i.leftStyle+="background-color: "+c["default"]+";"),"undefined"!=typeof i.settings.leftButton.style.activeBgColor&&(c.active=i.settings.leftButton.style.activeBgColor),"undefined"!=typeof i.settings.leftButton.style.borderColor&&(i.leftStyle+="border-color: "+i.settings.leftButton.style.borderColor+" !important;"),"undefined"!=typeof i.settings.leftButton.style.fontSize&&(i.leftFontSize="font-size: "+i.settings.leftButton.style.fontSize+" !important;")),"undefined"!=typeof i.settings.rightButton&&"object"==typeof i.settings.rightButton.style&&("undefined"!=typeof i.settings.rightButton.style.color&&(i.rightStyle+="color: "+i.settings.rightButton.style.color+";"),"undefined"!=typeof i.settings.rightButton.style.bgColor&&(u["default"]=i.settings.rightButton.style.bgColor,i.rightStyle+="background-color: "+u["default"]+";"),"undefined"!=typeof i.settings.rightButton.style.activeBgColor&&(u.active=i.settings.rightButton.style.activeBgColor),"undefined"!=typeof i.settings.rightButton.style.borderColor&&(i.rightStyle+="border-color: "+i.settings.rightButton.style.borderColor+" !important;"),"undefined"!=typeof i.settings.rightButton.style.fontSize&&(i.rightFontSize="font-size: "+i.settings.rightButton.style.fontSize+" !important;")),i.showLeftAction=!1,"undefined"!=typeof i.settings.leftButton&&(i.leftHtml=i.settings.leftButton.html,i.showLeftAction=!0,i.leftAction=function(e){if(c.active){var t=e.target;"I"==t.tagName?t=t.parentNode.parentNode:t.className.indexOf("digit-keyboard-key-action")>-1&&(t=t.parentNode),"undefined"==typeof c["default"]&&(c["default"]=t.style.backgroundColor),t.style.backgroundColor=c.active,setTimeout(function(){t.style.backgroundColor=c["default"]},100)}i.settings.leftButton.action()}),i.showRightAction=!1,"undefined"!=typeof i.settings.rightButton&&(i.rightHtml=i.settings.rightButton.html,i.showRightAction=!0,i.rightAction=function(e){if(u.active){var t=e.target;"I"==t.tagName?t=t.parentNode.parentNode:t.className.indexOf("digit-keyboard-key-action")>-1&&(t=t.parentNode),"undefined"==typeof u["default"]&&(u["default"]=t.style.backgroundColor),t.style.backgroundColor=u.active,setTimeout(function(){t.style.backgroundColor=u["default"]},100)}i.settings.rightButton.action()}),"object"==typeof i.settings.resizeContent||"boolean"==typeof i.settings.resizeContent)if("object"==typeof i.settings.resizeContent)var b="undefined"==typeof i.settings.resizeContent.enable?!0:i.settings.resizeContent.enable,l="undefined"==typeof i.settings.resizeContent.element?"ion-content":i.settings.resizeContent.element;else"boolean"==typeof i.settings.resizeContent&&(b=i.settings.resizeContent);k=o[0].parentElement.querySelectorAll(l)[0],i.$watch("ngShow",y),i.$watch("ngHide",g)}}}]),angular.module("ion-digit-keyboard",["ionic","ion-digit-keyboard.templates","ion-digit-keyboard.directive"]); --------------------------------------------------------------------------------