├── .bowerrc ├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── config.xml ├── gulpfile.js ├── hooks ├── README.md ├── after_platform_add │ └── 010_install_plugins.js ├── after_plugin_add │ └── 010_register_plugin.js ├── after_plugin_rm │ └── 010_deregister_plugin.js ├── after_prepare │ ├── 010_add_platform_class.js │ └── 020_remove_sass_from_platforms.js └── before_platform_add │ └── init_directories.js ├── ionic.project ├── package.json ├── scss └── ionic.app.scss └── www ├── css ├── ionic.app.css ├── ionic.app.min.css └── style.css ├── img └── ionic.png ├── index.html ├── js ├── app.js ├── config.js ├── controllers.js └── services.js ├── lib └── ionic │ ├── css │ ├── ionic.css │ └── ionic.min.css │ ├── fonts │ ├── ionicons.eot │ ├── ionicons.svg │ ├── ionicons.ttf │ └── ionicons.woff │ ├── js │ ├── angular-ui │ │ ├── angular-ui-router.js │ │ └── angular-ui-router.min.js │ ├── angular │ │ ├── angular-animate.js │ │ ├── angular-animate.min.js │ │ ├── angular-resource.js │ │ ├── angular-resource.min.js │ │ ├── angular-sanitize.js │ │ ├── angular-sanitize.min.js │ │ ├── angular.js │ │ └── angular.min.js │ ├── ionic-angular.js │ ├── ionic-angular.min.js │ ├── ionic.bundle.js │ ├── ionic.bundle.min.js │ ├── ionic.js │ └── ionic.min.js │ ├── scss │ ├── _action-sheet.scss │ ├── _animations.scss │ ├── _backdrop.scss │ ├── _badge.scss │ ├── _bar.scss │ ├── _button-bar.scss │ ├── _button.scss │ ├── _checkbox.scss │ ├── _form.scss │ ├── _grid.scss │ ├── _items.scss │ ├── _list.scss │ ├── _loading.scss │ ├── _menu.scss │ ├── _mixins.scss │ ├── _modal.scss │ ├── _platform.scss │ ├── _popover.scss │ ├── _popup.scss │ ├── _progress.scss │ ├── _radio.scss │ ├── _range.scss │ ├── _reset.scss │ ├── _scaffolding.scss │ ├── _select.scss │ ├── _slide-box.scss │ ├── _tabs.scss │ ├── _toggle.scss │ ├── _transitions.scss │ ├── _type.scss │ ├── _util.scss │ ├── _variables.scss │ ├── ionic.scss │ └── ionicons │ │ ├── _ionicons-animation.scss │ │ ├── _ionicons-font.scss │ │ ├── _ionicons-icons.scss │ │ ├── _ionicons-variables.scss │ │ └── ionicons.scss │ └── version.json └── templates ├── create-account.html ├── login.html └── menu.html /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "www/lib" 3 | } 4 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Kevin Blanco 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 all 13 | 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 THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ionic Drupal Base App 2 | 3 | This repository contains a base [Ionic](http://ionicframework.com/) application to use and cosume REST API from your [Drupal Services](https://www.drupal.org/project/services). 4 | 5 | ## Features ## 6 | This is intented to be a base, something you can extend but features you'll probably will use. 7 | 8 | 9 | * Login 10 | * Create Account 11 | * Logout 12 | * Saving user's data on localstorage after login 13 | * Helper Auth methods 14 | * Adding token and CSRF token to post HTTP request with interceptors. 15 | 16 | ## Configuring your Drupal Service ## 17 | 18 | In order to communicate correctly with this base-app, you should follow this steps. 19 | 20 | * Install and enable [Drupal Services module](https://www.drupal.org/project/services) on your Drupal Instance 21 | * Create a new Service (remember the API endpoint). 22 | * Enable application/json and application/x-www-form-urlencoded request parsers 23 | * Enable json and jsonp as response formatters 24 | * Enable user resources (login, logout, retrieve, create, update, register, token). 25 | 26 | Some images for reference 27 | 28 | ![image](http://kevinblanco.io/drupal-ionic/resources.png) 29 | 30 | --- 31 | 32 | ![image](http://kevinblanco.io/drupal-ionic/parsing.png) 33 | 34 | ### Configuring Ionic App ### 35 | 36 | Clone or download this repository and go to `www/js/config.js` and add your Drupal URL and your service endpoint. Without this the app won't be able to work. 37 | 38 | /** 39 | * REPLACE HERE YOUR DRUPAL INSTANCE URL AND API ENDPOINT DEFINED ON YOUR SERVICES 40 | * drupal_instance could be 'http://dev-example.pantheon.io/' 41 | * api_endpoint could be: api/v1/ 42 | **/ 43 | app_config.constant('drupal_instance',' '); 44 | app_config.constant('api_endpoint',' '); 45 | 46 | 47 | ### Running the app ### 48 | 49 | There're known issues with running any app that use CORS on the browser if the configuration is not correct (`Access-Control-Allow-Origin` and `Access-Control-Allow-Headers`). Running the app on the emulator (`$ ionic emulate ios` - or - `$ ionic emulate android`) works just fine but, running it on the browser might not work (`$ sudo ionic serve`). 50 | 51 | * Install and enable[Drupal CORS module.](https://www.drupal.org/project/cors) 52 | * Configure the Module `/admin/config/services/cors` 53 | 54 | api/*|* * * 55 | api/*|POST|Origin,X-Requested-With,Content-Type,Accept 56 | 57 | 58 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drupal-ionic", 3 | "private": "true", 4 | "devDependencies": { 5 | "ionic": "driftyco/ionic-bower#1.0.0-beta.14" 6 | } 7 | } -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | drupal-ionic 4 | 5 | An Ionic Framework and Cordova project. 6 | 7 | 8 | Ionic Framework Team 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /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 | .pipe(gulp.dest('./www/css/')) 20 | .pipe(minifyCss({ 21 | keepSpecialComments: 0 22 | })) 23 | .pipe(rename({ extname: '.min.css' })) 24 | .pipe(gulp.dest('./www/css/')) 25 | .on('end', done); 26 | }); 27 | 28 | gulp.task('watch', function() { 29 | gulp.watch(paths.sass, ['sass']); 30 | }); 31 | 32 | gulp.task('install', ['git-check'], function() { 33 | return bower.commands.install() 34 | .on('log', function(data) { 35 | gutil.log('bower', gutil.colors.cyan(data.id), data.message); 36 | }); 37 | }); 38 | 39 | gulp.task('git-check', function(done) { 40 | if (!sh.which('git')) { 41 | console.log( 42 | ' ' + gutil.colors.red('Git is not installed.'), 43 | '\n Git, the version control system, is required to download Ionic.', 44 | '\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.', 45 | '\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.' 46 | ); 47 | process.exit(1); 48 | } 49 | done(); 50 | }); 51 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /hooks/after_platform_add/010_install_plugins.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Install all plugins listed in package.json 5 | * https://raw.githubusercontent.com/diegonetto/generator-ionic/master/templates/hooks/after_platform_add/install_plugins.js 6 | */ 7 | var exec = require('child_process').exec; 8 | var path = require('path'); 9 | var sys = require('sys'); 10 | 11 | var packageJSON = require('../../package.json'); 12 | var cmd = process.platform === 'win32' ? 'cordova.cmd' : 'cordova'; 13 | // var script = path.resolve(__dirname, '../../node_modules/cordova/bin', cmd); 14 | 15 | packageJSON.cordovaPlugins = packageJSON.cordovaPlugins || []; 16 | packageJSON.cordovaPlugins.forEach(function (plugin) { 17 | exec('cordova plugin add ' + plugin, function (error, stdout, stderr) { 18 | sys.puts(stdout); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /hooks/after_plugin_add/010_register_plugin.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Push plugins to cordovaPlugins array after_plugin_add 5 | */ 6 | var fs = require('fs'); 7 | var packageJSON = require('../../package.json'); 8 | 9 | packageJSON.cordovaPlugins = packageJSON.cordovaPlugins || []; 10 | process.env.CORDOVA_PLUGINS.split(',').forEach(function (plugin) { 11 | if(packageJSON.cordovaPlugins.indexOf(plugin) == -1) { 12 | packageJSON.cordovaPlugins.push(plugin); 13 | } 14 | }); 15 | 16 | fs.writeFileSync('package.json', JSON.stringify(packageJSON, null, 2)); 17 | -------------------------------------------------------------------------------- /hooks/after_plugin_rm/010_deregister_plugin.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Remove plugins from cordovaPlugins array after_plugin_rm 5 | */ 6 | var fs = require('fs'); 7 | var packageJSON = require('../../package.json'); 8 | 9 | packageJSON.cordovaPlugins = packageJSON.cordovaPlugins || []; 10 | 11 | process.env.CORDOVA_PLUGINS.split(',').forEach(function (plugin) { 12 | var index = packageJSON.cordovaPlugins.indexOf(plugin); 13 | if (index > -1) { 14 | packageJSON.cordovaPlugins.splice(index, 1); 15 | } 16 | }); 17 | 18 | fs.writeFile('package.json', JSON.stringify(packageJSON, null, 2)); 19 | -------------------------------------------------------------------------------- /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 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /www/js/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('drupalionic', ['ionic', 'drupalionic.services', 'drupalionic.controllers']); 2 | 3 | 4 | /* 5 | * Ionic app and cordova run configuration 6 | * If you install any cordiva plugin configure it here 7 | * 8 | */ 9 | app.run(function($ionicPlatform, $rootScope) { 10 | 11 | //Set initial loggedIn state 12 | $rootScope.isLoggedIn = false; 13 | 14 | $ionicPlatform.ready(function() { 15 | 16 | if (window.cordova && window.cordova.plugins.Keyboard) { 17 | cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 18 | } 19 | if (window.StatusBar) { 20 | // org.apache.cordova.statusbar required 21 | StatusBar.styleDefault(); 22 | } 23 | }); 24 | }); 25 | 26 | 27 | 28 | /* 29 | * Ionic app configuration 30 | * Configure routes here 31 | * 32 | */ 33 | app.config(function($stateProvider, $urlRouterProvider, $httpProvider) { 34 | 35 | //Enable cross domain calls 36 | $httpProvider.defaults.useXDomain = true; 37 | 38 | //Remove the header used to identify ajax call that would prevent CORS from working 39 | delete $httpProvider.defaults.headers.common['X-Requested-With']; 40 | 41 | 42 | $stateProvider 43 | 44 | .state('app', { 45 | url: "/app", 46 | abstract: true, 47 | templateUrl: "templates/menu.html", 48 | controller: 'AppCtrl' 49 | }) 50 | 51 | .state('app.create-account', { 52 | url: "/create-account", 53 | views: { 54 | 'menuContent': { 55 | templateUrl: "templates/create-account.html", 56 | controller: 'AccountCtrl' 57 | } 58 | } 59 | }) 60 | 61 | .state('app.browse', { 62 | url: "/browse", 63 | views: { 64 | 'menuContent': { 65 | templateUrl: "templates/browse.html" 66 | } 67 | } 68 | }); 69 | // if none of the above states are matched, use this as the fallback 70 | $urlRouterProvider.otherwise('/app/create-account'); 71 | }); 72 | -------------------------------------------------------------------------------- /www/js/config.js: -------------------------------------------------------------------------------- 1 | var app_config = angular.module('drupalionic.configuration', []); 2 | 3 | 4 | /** 5 | * REPLACE HERE YOUR DRUPAL INSTANCE URL AND API ENDPOINT DEFINED ON YOUR SERVICES 6 | * drupal_instance could be 'http://dev-example.pantheon.io/' 7 | * api_endpoint could be: api/v1/ 8 | **/ 9 | app_config.constant('drupal_instance','http://dev-dia-vida.pantheon.io/'); 10 | app_config.constant('api_endpoint','api/v1/'); 11 | 12 | -------------------------------------------------------------------------------- /www/js/controllers.js: -------------------------------------------------------------------------------- 1 | var app_controllers = angular.module('drupalionic.controllers', ['drupalionic.services']); 2 | 3 | 4 | /* 5 | * Application Controller 6 | */ 7 | app_controllers.controller('AppCtrl', function($scope, $rootScope, $ionicModal, $timeout, $ionicPopup, Account, Auth) { 8 | 9 | 10 | if( Auth.isLoggedIn() ){ 11 | $rootScope.isLoggedIn = true; 12 | }else{ 13 | $rootScope.isLoggedIn = false; 14 | } 15 | 16 | // This will control the 'loading' gif on the view 17 | $scope.logging = false; 18 | 19 | // Create the login modal that we will use later 20 | $ionicModal.fromTemplateUrl('templates/login.html', { 21 | scope: $scope 22 | }).then(function(modal) { 23 | $scope.modal = modal; 24 | }); 25 | 26 | // Triggered in the login modal to close it 27 | $scope.closeLogin = function() { 28 | $scope.modal.hide(); 29 | }; 30 | 31 | // Open the login modal 32 | $scope.login = function() { 33 | $scope.modal.show(); 34 | }; 35 | 36 | // Perform the login action when the user submits the login form 37 | $scope.doLogin = function() { 38 | 39 | //Shows the 'loading' gif or message 40 | $scope.logging = true; 41 | 42 | //Do Login using Service 43 | Account.login($scope.username, $scope.password).then(function(data){ 44 | 45 | //This is the success function of the promise 46 | $scope.user = data; 47 | 48 | //Hide the loading message 49 | $scope.logging = false; 50 | 51 | //Saves the user data to localstorage 52 | Auth.setUserData('user', data); 53 | 54 | //Set the loggedIn flag to 'true' 55 | $rootScope.isLoggedIn = true; 56 | 57 | //Show Alert on device 58 | alert("Successfully Logged in"); 59 | 60 | //This is the failure funcion of the promise 61 | }, function(data){ 62 | alert("There has been an error trying to login"); 63 | 64 | }); 65 | }; 66 | }); 67 | 68 | 69 | 70 | 71 | /* 72 | * Account Controller 73 | */ 74 | app_controllers.controller('AccountCtrl', function($scope, Account) { 75 | 76 | 77 | $scope.createAccount = function(){ 78 | 79 | //Create account using Service 80 | Account.createAccount($scope.user, $scope.mail, $scope.pass).then(function(data){ 81 | 82 | //This is the success function of the promise 83 | $scope.user = data; 84 | $scope.logging = false; 85 | alert("Account created successfully, Please go to the login page"); 86 | 87 | //Clean the form fields 88 | $scope.user = " "; 89 | $scope.mail = " "; 90 | $scope.pass = " "; 91 | 92 | 93 | //This is the failure funcion of the promise 94 | }, function(data){ 95 | alert("There has been an error creating your account"); 96 | 97 | }); 98 | 99 | } 100 | 101 | }); 102 | 103 | -------------------------------------------------------------------------------- /www/js/services.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Application services module 3 | */ 4 | var app_services = angular.module('drupalionic.services', ['drupalionic.configuration']); 5 | 6 | 7 | 8 | 9 | /** 10 | * Account factory that holds logic for login, logout and account create 11 | * It uses $q to handle promises and $http for requess 12 | * It inyects the URLs from the config.js file 13 | */ 14 | app_services.factory('Account', function($http, $q, drupal_instance, api_endpoint) { 15 | 16 | 17 | return { 18 | 19 | /* 20 | * Login against the Drupal Service API 21 | * @param {String} username 22 | * @param {String} password 23 | * @return {Promise} 24 | */ 25 | login : function( username, password ){ 26 | 27 | 28 | var defer = $q.defer(); 29 | 30 | $http({ 31 | method :'POST', 32 | url : drupal_instance + api_endpoint + 'user/login', 33 | dataType : 'json', 34 | crossDomain : true, 35 | data : 'username=' + username + '&password=' + password, 36 | headers : { 37 | "Content-Type": "application/x-www-form-urlencoded" 38 | } 39 | }) 40 | 41 | .success(function(data, status, headers, config){ 42 | defer.resolve(data); 43 | }) 44 | 45 | .error(function(data, status, headers, config){ 46 | defer.reject(data); 47 | }); 48 | 49 | return defer.promise; 50 | }, 51 | 52 | 53 | 54 | 55 | /* 56 | * Create an account against the Drupal Service API 57 | * @param {String} username 58 | * @param {String} email 59 | * @param {String} password 60 | * @return {Promise} 61 | */ 62 | createAccount : function(username, email, password){ 63 | 64 | var defer = $q.defer(); 65 | 66 | $http({ 67 | method :'POST', 68 | url : drupal_instance + api_endpoint + 'user/register', 69 | dataType : 'json', 70 | crossDomain : true, 71 | data : { 72 | name : username, 73 | pass : password, 74 | mail : email 75 | }, 76 | headers : { 77 | "Content-Type": "application/x-www-form-urlencoded" 78 | } 79 | }) 80 | 81 | .success(function(data, status, headers, config){ 82 | defer.resolve(data); 83 | }) 84 | 85 | .error(function(data, status, headers, config){ 86 | defer.reject(data); 87 | }); 88 | 89 | return defer.promise; 90 | } 91 | 92 | } 93 | 94 | }); 95 | 96 | 97 | 98 | /** 99 | * Auth factory that holds logic and data regarding the user across the app 100 | */ 101 | app_services.factory( 'Auth', function($window) { 102 | 103 | var currentUser; 104 | 105 | return { 106 | 107 | //Set the user data to use accross the app, this is saved when loggedIn 108 | setUserData: function(key,value) { 109 | $window.localStorage[key] = value; 110 | }, 111 | 112 | //Get the currentUser data 113 | getUserData: function(key) { 114 | return $window.localStorage[key] || '{}'; 115 | }, 116 | 117 | //Helper function to know if the user is loggedIn or not 118 | isLoggedIn: function() { 119 | 120 | currentUser = $window.localStorage['user']; 121 | 122 | if( (typeof currentUser === "object") && (currentUser !== null) ){ 123 | return true; 124 | }else{ 125 | return false; 126 | } 127 | 128 | } 129 | }; 130 | }); 131 | -------------------------------------------------------------------------------- /www/lib/ionic/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevinblanco/drupal-ionic/2b2d28f7c0564abba36b1868a35831dd39786b63/www/lib/ionic/fonts/ionicons.eot -------------------------------------------------------------------------------- /www/lib/ionic/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevinblanco/drupal-ionic/2b2d28f7c0564abba36b1868a35831dd39786b63/www/lib/ionic/fonts/ionicons.ttf -------------------------------------------------------------------------------- /www/lib/ionic/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevinblanco/drupal-ionic/2b2d28f7c0564abba36b1868a35831dd39786b63/www/lib/ionic/fonts/ionicons.woff -------------------------------------------------------------------------------- /www/lib/ionic/js/angular/angular-animate.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | AngularJS v1.3.6 3 | (c) 2010-2014 Google, Inc. http://angularjs.org 4 | License: MIT 5 | */ 6 | (function(N,f,W){'use strict';f.module("ngAnimate",["ng"]).directive("ngAnimateChildren",function(){return function(X,C,g){g=g.ngAnimateChildren;f.isString(g)&&0===g.length?C.data("$$ngAnimateChildren",!0):X.$watch(g,function(f){C.data("$$ngAnimateChildren",!!f)})}}).factory("$$animateReflow",["$$rAF","$document",function(f,C){return function(g){return f(function(){g()})}}]).config(["$provide","$animateProvider",function(X,C){function g(f){for(var n=0;n=C&&b>=x&&c()}var m=g(e);a=e.data("$$ngAnimateCSS3Data");if(-1!=m.getAttribute("class").indexOf(b)&&a){var k="",t="";n(b.split(" "),function(a, 26 | b){var e=(0=c;e--)d.end&&d.end(f[e]);f.length=c}}"string"!==typeof a&&(a=null===a||"undefined"===typeof a?"":""+a);var b,k,f=[],m=a,l;for(f.last=function(){return f[f.length-1]};a;){l="";k=!0;if(f.last()&&x[f.last()])a=a.replace(new RegExp("(.*)<\\s*\\/\\s*"+f.last()+"[^>]*>","i"),function(a,b){b=b.replace(H,"$1").replace(I,"$1");d.chars&&d.chars(r(b));return""}),e("",f.last());else{if(0===a.indexOf("\x3c!--"))b=a.indexOf("--",4),0<=b&&a.lastIndexOf("--\x3e",b)===b&&(d.comment&&d.comment(a.substring(4, 8 | b)),a=a.substring(b+3),k=!1);else if(y.test(a)){if(b=a.match(y))a=a.replace(b[0],""),k=!1}else if(J.test(a)){if(b=a.match(z))a=a.substring(b[0].length),b[0].replace(z,e),k=!1}else K.test(a)&&((b=a.match(A))?(b[4]&&(a=a.substring(b[0].length),b[0].replace(A,c)),k=!1):(l+="<",a=a.substring(1)));k&&(b=a.indexOf("<"),l+=0>b?a:a.substring(0,b),a=0>b?"":a.substring(b),d.chars&&d.chars(r(l)))}if(a==m)throw L("badparse",a);m=a}e()}function r(a){if(!a)return"";var d=M.exec(a);a=d[1];var c=d[3];if(d=d[2])q.innerHTML= 9 | d.replace(//g,">")}function s(a,d){var c=!1,e=h.bind(a,a.push);return{start:function(a,k,f){a=h.lowercase(a);!c&&x[a]&&(c=a);c||!0!==C[a]||(e("<"),e(a),h.forEach(k,function(c,f){var k= 10 | h.lowercase(f),g="img"===a&&"src"===k||"background"===k;!0!==P[k]||!0===D[k]&&!d(c,g)||(e(" "),e(f),e('="'),e(B(c)),e('"'))}),e(f?"/>":">"))},end:function(a){a=h.lowercase(a);c||!0!==C[a]||(e(""));a==c&&(c=!1)},chars:function(a){c||e(B(a))}}}var L=h.$$minErr("$sanitize"),A=/^<((?:[a-zA-Z])[\w:-]*)((?:\s+[\w:-]+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)\s*(>?)/,z=/^<\/\s*([\w:-]+)[^>]*>/,G=/([\w:-]+)(?:\s*=\s*(?:(?:"((?:[^"])*)")|(?:'((?:[^'])*)')|([^>\s]+)))?/g,K=/^]*?)>/i,I=/"\u201d\u2019]/,c=/^mailto:/;return function(e,b){function k(a){a&&g.push(E(a))} 15 | function f(a,c){g.push("');k(c);g.push("")}if(!e)return e;for(var m,l=e,g=[],n,p;m=l.match(d);)n=m[0],m[2]||m[4]||(n=(m[3]?"http://":"mailto:")+n),p=m.index,k(l.substr(0,p)),f(n,m[0].replace(c,"")),l=l.substring(p+m[0].length);k(l);return a(g.join(""))}}])})(window,window.angular); 16 | //# sourceMappingURL=angular-sanitize.min.js.map 17 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_action-sheet.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Action Sheets 3 | * -------------------------------------------------- 4 | */ 5 | 6 | .action-sheet-backdrop { 7 | @include transition(background-color 300ms 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.5); 18 | } 19 | } 20 | 21 | .action-sheet-wrapper { 22 | @include translate3d(0, 100%, 0); 23 | @include transition(all ease-in-out 300ms); 24 | position: absolute; 25 | bottom: 0; 26 | width: 100%; 27 | } 28 | 29 | .action-sheet-up { 30 | @include translate3d(0, 0, 0); 31 | } 32 | 33 | .action-sheet { 34 | margin-left: 15px; 35 | margin-right: 15px; 36 | width: auto; 37 | z-index: $z-index-action-sheet; 38 | overflow: hidden; 39 | 40 | .button { 41 | display: block; 42 | padding: 1px; 43 | width: 100%; 44 | border-radius: 0; 45 | 46 | background-color: transparent; 47 | 48 | color: $positive; 49 | font-size: 18px; 50 | 51 | &.destructive { 52 | color: $assertive; 53 | } 54 | } 55 | } 56 | 57 | .action-sheet-title { 58 | padding: 10px; 59 | color: lighten($base-color, 40%); 60 | text-align: center; 61 | font-size: 12px; 62 | } 63 | 64 | .action-sheet-group { 65 | margin-bottom: 5px; 66 | border-radius: $sheet-border-radius; 67 | background-color: #fff; 68 | .button { 69 | border-width: 1px 0px 0px 0px; 70 | border-radius: 0; 71 | 72 | &.active { 73 | background-color: transparent; 74 | color: inherit; 75 | } 76 | } 77 | .button:first-child:last-child { 78 | border-width: 0; 79 | } 80 | } 81 | 82 | .action-sheet-open { 83 | pointer-events: none; 84 | 85 | &.modal-open .modal { 86 | pointer-events: none; 87 | } 88 | 89 | .action-sheet-backdrop { 90 | pointer-events: auto; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 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 | position: absolute; 127 | 128 | top: 0; 129 | right: 0; 130 | left: 0; 131 | z-index: $z-index-bar-title; 132 | overflow: hidden; 133 | 134 | margin: 0 10px; 135 | 136 | min-width: 30px; 137 | height: $bar-height - 1; 138 | 139 | text-align: center; 140 | 141 | // Go into ellipsis if too small 142 | text-overflow: ellipsis; 143 | white-space: nowrap; 144 | 145 | font-size: $bar-title-font-size; 146 | font-weight: $headings-font-weight; 147 | 148 | line-height: $bar-height; 149 | 150 | &.title-left { 151 | text-align: left; 152 | } 153 | &.title-right { 154 | text-align: right; 155 | } 156 | } 157 | 158 | .title a { 159 | color: inherit; 160 | } 161 | 162 | .button { 163 | z-index: $z-index-bar-button; 164 | padding: 0 $button-bar-button-padding; 165 | min-width: initial; 166 | min-height: $button-bar-button-height - 1; 167 | font-weight: 400; 168 | font-size: $button-bar-button-font-size; 169 | line-height: $button-bar-button-height; 170 | 171 | &.button-icon:before, 172 | .icon:before, 173 | &.icon:before, 174 | &.icon-left:before, 175 | &.icon-right:before { 176 | padding-right: 2px; 177 | padding-left: 2px; 178 | font-size: $button-bar-button-icon-size; 179 | line-height: $button-bar-button-height; 180 | } 181 | 182 | &.button-icon { 183 | font-size: $bar-title-font-size; 184 | .icon:before, 185 | &:before, 186 | &.icon-left:before, 187 | &.icon-right:before { 188 | vertical-align: top; 189 | font-size: $button-large-icon-size; 190 | line-height: $button-bar-button-height; 191 | } 192 | } 193 | &.button-clear { 194 | padding-right: 2px; 195 | padding-left: 2px; 196 | font-weight: 300; 197 | font-size: $bar-title-font-size; 198 | 199 | .icon:before, 200 | &.icon:before, 201 | &.icon-left:before, 202 | &.icon-right:before { 203 | font-size: $button-large-icon-size; 204 | line-height: $button-bar-button-height; 205 | } 206 | } 207 | 208 | &.back-button { 209 | display: block; 210 | margin-right: 5px; 211 | padding: 0; 212 | white-space: nowrap; 213 | font-weight: 400; 214 | } 215 | 216 | &.back-button.active, 217 | &.back-button.activated { 218 | opacity: 0.2; 219 | } 220 | } 221 | 222 | .button-bar > .button, 223 | .buttons > .button { 224 | min-height: $button-bar-button-height - 1; 225 | line-height: $button-bar-button-height; 226 | } 227 | 228 | .button-bar + .button, 229 | .button + .button-bar { 230 | margin-left: 5px; 231 | } 232 | 233 | // Android 4.4 messes with the display property 234 | .buttons, 235 | .buttons.primary-buttons, 236 | .buttons.secondary-buttons { 237 | display: inherit; 238 | } 239 | .buttons span { 240 | display: inline-block; 241 | } 242 | .buttons-left span { 243 | margin-right: 5px; 244 | } 245 | .buttons-right span { 246 | margin-left: 5px; 247 | } 248 | 249 | // Place the last button in a bar on the right of the bar 250 | .title + .button:last-child, 251 | > .button + .button:last-child, 252 | > .button.pull-right, 253 | .buttons.pull-right, 254 | .title + .buttons { 255 | position: absolute; 256 | top: 5px; 257 | right: 5px; 258 | bottom: 5px; 259 | } 260 | 261 | } 262 | 263 | // Default styles for buttons inside of styled bars 264 | .bar-light { 265 | .button { 266 | @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text); 267 | @include button-clear($bar-light-text, $bar-title-font-size); 268 | } 269 | } 270 | .bar-stable { 271 | .button { 272 | @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text); 273 | @include button-clear($bar-stable-text, $bar-title-font-size); 274 | } 275 | } 276 | .bar-positive { 277 | .button { 278 | @include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text); 279 | @include button-clear(#fff, $bar-title-font-size); 280 | } 281 | } 282 | .bar-calm { 283 | .button { 284 | @include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text); 285 | @include button-clear(#fff, $bar-title-font-size); 286 | } 287 | } 288 | .bar-assertive { 289 | .button { 290 | @include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text); 291 | @include button-clear(#fff, $bar-title-font-size); 292 | } 293 | } 294 | .bar-balanced { 295 | .button { 296 | @include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text); 297 | @include button-clear(#fff, $bar-title-font-size); 298 | } 299 | } 300 | .bar-energized { 301 | .button { 302 | @include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text); 303 | @include button-clear(#fff, $bar-title-font-size); 304 | } 305 | } 306 | .bar-royal { 307 | .button { 308 | @include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text); 309 | @include button-clear(#fff, $bar-title-font-size); 310 | } 311 | } 312 | .bar-dark { 313 | .button { 314 | @include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text); 315 | @include button-clear(#fff, $bar-title-font-size); 316 | } 317 | } 318 | 319 | // Header at top 320 | .bar-header { 321 | top: 0; 322 | border-top-width: 0; 323 | border-bottom-width: 1px; 324 | &.has-tabs-top{ 325 | border-bottom-width: 0px; 326 | background-image: none; 327 | } 328 | } 329 | 330 | // Footer at bottom 331 | .bar-footer { 332 | bottom: 0; 333 | border-top-width: 1px; 334 | border-bottom-width: 0; 335 | background-position: top; 336 | 337 | height: $bar-footer-height; 338 | 339 | &.item-input-inset { 340 | position: absolute; 341 | } 342 | } 343 | 344 | // Don't render padding if the bar is just for tabs 345 | .bar-tabs { 346 | padding: 0; 347 | } 348 | 349 | .bar-subheader { 350 | top: $bar-height; 351 | display: block; 352 | 353 | height: $bar-subheader-height; 354 | } 355 | .bar-subfooter { 356 | bottom: $bar-footer-height; 357 | display: block; 358 | 359 | height: $bar-subfooter-height; 360 | } 361 | 362 | .nav-bar-block { 363 | position: absolute; 364 | top: 0; 365 | right: 0; 366 | left: 0; 367 | z-index: $z-index-bar; 368 | } 369 | 370 | .bar .back-button.hide, 371 | .bar .buttons .hide { 372 | display: none; 373 | } 374 | -------------------------------------------------------------------------------- /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 | 26 | .button-bar > .button { 27 | @include flex(1); 28 | display: block; 29 | 30 | overflow: hidden; 31 | 32 | padding: 0 16px; 33 | 34 | width: 0; 35 | 36 | border-width: 1px 0px 1px 1px; 37 | border-radius: 0; 38 | text-align: center; 39 | text-overflow: ellipsis; 40 | white-space: nowrap; 41 | 42 | &:before, 43 | .icon:before { 44 | line-height: 44px; 45 | } 46 | 47 | &:first-child { 48 | border-radius: $button-border-radius 0px 0px $button-border-radius; 49 | } 50 | &:last-child { 51 | border-right-width: 1px; 52 | border-radius: 0px $button-border-radius $button-border-radius 0px; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_checkbox.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Checkbox 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .checkbox { 8 | // set the color defaults 9 | @include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default); 10 | 11 | position: relative; 12 | display: inline-block; 13 | padding: ($checkbox-height / 4) ($checkbox-width / 4); 14 | cursor: pointer; 15 | } 16 | .checkbox-light { 17 | @include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light); 18 | } 19 | .checkbox-stable { 20 | @include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable); 21 | } 22 | .checkbox-positive { 23 | @include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive); 24 | } 25 | .checkbox-calm { 26 | @include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm); 27 | } 28 | .checkbox-assertive { 29 | @include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive); 30 | } 31 | .checkbox-balanced { 32 | @include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced); 33 | } 34 | .checkbox-energized{ 35 | @include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized); 36 | } 37 | .checkbox-royal { 38 | @include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal); 39 | } 40 | .checkbox-dark { 41 | @include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark); 42 | } 43 | 44 | .checkbox input:disabled:before, 45 | .checkbox input:disabled + .checkbox-icon:before { 46 | border-color: $checkbox-off-border-light; 47 | } 48 | 49 | .checkbox input:disabled:checked:before, 50 | .checkbox input:disabled:checked + .checkbox-icon:before { 51 | background: $checkbox-on-bg-light; 52 | } 53 | 54 | 55 | .checkbox.checkbox-input-hidden input { 56 | display: none !important; 57 | } 58 | 59 | .checkbox input, 60 | .checkbox-icon { 61 | position: relative; 62 | width: $checkbox-width; 63 | height: $checkbox-height; 64 | display: block; 65 | border: 0; 66 | background: transparent; 67 | cursor: pointer; 68 | -webkit-appearance: none; 69 | 70 | &:before { 71 | // what the checkbox looks like when its not checked 72 | display: table; 73 | width: 100%; 74 | height: 100%; 75 | border-width: $checkbox-border-width; 76 | border-style: solid; 77 | border-radius: $checkbox-border-radius; 78 | background: $checkbox-off-bg-color; 79 | content: ' '; 80 | @include transition(background-color 20ms ease-in-out); 81 | } 82 | } 83 | 84 | .checkbox input:checked:before, 85 | input:checked + .checkbox-icon:before { 86 | border-width: $checkbox-border-width + 1; 87 | } 88 | 89 | // the checkmark within the box 90 | .checkbox input:after, 91 | .checkbox-icon:after { 92 | @include transition(opacity .05s ease-in-out); 93 | @include rotate(-45deg); 94 | position: absolute; 95 | top: 33%; 96 | left: 25%; 97 | display: table; 98 | width: ($checkbox-width / 2); 99 | height: ($checkbox-width / 4) - 1; 100 | border: $checkbox-check-width solid $checkbox-check-color; 101 | border-top: 0; 102 | border-right: 0; 103 | content: ' '; 104 | opacity: 0; 105 | } 106 | 107 | .platform-android .checkbox-platform input:before, 108 | .platform-android .checkbox-platform .checkbox-icon:before, 109 | .checkbox-square input:before, 110 | .checkbox-square .checkbox-icon:before { 111 | border-radius: 2px; 112 | width: 72%; 113 | height: 72%; 114 | margin-top: 14%; 115 | margin-left: 14%; 116 | border-width: 2px; 117 | } 118 | 119 | .platform-android .checkbox-platform input:after, 120 | .platform-android .checkbox-platform .checkbox-icon:after, 121 | .checkbox-square input:after, 122 | .checkbox-square .checkbox-icon:after { 123 | border-width: 2px; 124 | top: 19%; 125 | left: 25%; 126 | width: ($checkbox-width / 2) - 1; 127 | height: 7px; 128 | } 129 | 130 | .grade-c .checkbox input:after, 131 | .grade-c .checkbox-icon:after { 132 | @include rotate(0); 133 | top: 3px; 134 | left: 4px; 135 | border: none; 136 | color: $checkbox-check-color; 137 | content: '\2713'; 138 | font-weight: bold; 139 | font-size: 20px; 140 | } 141 | 142 | // what the checkmark looks like when its checked 143 | .checkbox input:checked:after, 144 | input:checked + .checkbox-icon:after { 145 | opacity: 1; 146 | } 147 | 148 | // make sure item content have enough padding on left to fit the checkbox 149 | .item-checkbox { 150 | padding-left: ($item-padding * 2) + $checkbox-width; 151 | 152 | &.active { 153 | box-shadow: none; 154 | } 155 | } 156 | 157 | // position the checkbox to the left within an item 158 | .item-checkbox .checkbox { 159 | position: absolute; 160 | top: 50%; 161 | right: $item-padding / 2; 162 | left: $item-padding / 2; 163 | z-index: $z-index-item-checkbox; 164 | margin-top: (($checkbox-height + ($checkbox-height / 2)) / 2) * -1; 165 | } 166 | 167 | 168 | .item-checkbox.item-checkbox-right { 169 | padding-right: ($item-padding * 2) + $checkbox-width; 170 | padding-left: $item-padding; 171 | } 172 | 173 | .item-checkbox-right .checkbox input, 174 | .item-checkbox-right .checkbox-icon { 175 | float: right; 176 | } 177 | -------------------------------------------------------------------------------- /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, 0, 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 | 83 | .item-input-inset { 84 | @include display-flex(); 85 | @include align-items(center); 86 | position: relative; 87 | overflow: hidden; 88 | padding: ($item-padding / 3) * 2; 89 | } 90 | 91 | .item-input-wrapper { 92 | @include display-flex(); 93 | @include flex(1, 0); 94 | @include align-items(center); 95 | @include border-radius(4px); 96 | padding-right: 8px; 97 | padding-left: 8px; 98 | background: #eee; 99 | } 100 | 101 | .item-input-inset .item-input-wrapper input { 102 | padding-left: 4px; 103 | height: 29px; 104 | background: transparent; 105 | line-height: 18px; 106 | } 107 | 108 | .item-input-wrapper ~ .button { 109 | margin-left: ($item-padding / 3) * 2; 110 | } 111 | 112 | .input-label { 113 | @include flex(1, 0, 100px); 114 | display: table; 115 | padding: 7px 10px 7px 0px; 116 | max-width: 200px; 117 | width: 35%; 118 | color: $input-label-color; 119 | font-size: 16px; 120 | } 121 | 122 | .placeholder-icon { 123 | color: #aaa; 124 | &:first-child { 125 | padding-right: 6px; 126 | } 127 | &:last-child { 128 | padding-left: 6px; 129 | } 130 | } 131 | 132 | .item-stacked-label { 133 | display: block; 134 | background-color: transparent; 135 | box-shadow: none; 136 | 137 | .input-label, .icon { 138 | display: inline-block; 139 | padding: 4px 0 0 0px; 140 | vertical-align: middle; 141 | } 142 | } 143 | 144 | .item-stacked-label input, 145 | .item-stacked-label textarea { 146 | @include border-radius(2px); 147 | padding: 4px 8px 3px 0; 148 | border: none; 149 | background-color: $input-bg; 150 | } 151 | .item-stacked-label input { 152 | overflow: hidden; 153 | height: $line-height-computed + $font-size-base + 12px; 154 | } 155 | 156 | .item-floating-label { 157 | display: block; 158 | background-color: transparent; 159 | box-shadow: none; 160 | 161 | .input-label { 162 | position: relative; 163 | padding: 5px 0 0 0; 164 | opacity: 0; 165 | top: 10px; 166 | @include transition(opacity .15s ease-in, top .2s linear); 167 | 168 | &.has-input { 169 | opacity: 1; 170 | top: 0; 171 | @include transition(opacity .15s ease-in, top .2s linear); 172 | } 173 | } 174 | } 175 | 176 | 177 | // Form Controls 178 | // ------------------------------- 179 | 180 | // Shared size and type resets 181 | textarea, 182 | input[type="text"], 183 | input[type="password"], 184 | input[type="datetime"], 185 | input[type="datetime-local"], 186 | input[type="date"], 187 | input[type="month"], 188 | input[type="time"], 189 | input[type="week"], 190 | input[type="number"], 191 | input[type="email"], 192 | input[type="url"], 193 | input[type="search"], 194 | input[type="tel"], 195 | input[type="color"] { 196 | display: block; 197 | padding-top: 2px; 198 | padding-left: 0; 199 | height: $line-height-computed + $font-size-base; 200 | color: $input-color; 201 | vertical-align: middle; 202 | font-size: $font-size-base; 203 | line-height: $font-size-base + 2; 204 | } 205 | 206 | .platform-ios, 207 | .platform-android { 208 | input[type="datetime-local"], 209 | input[type="date"], 210 | input[type="month"], 211 | input[type="time"], 212 | input[type="week"] { 213 | padding-top: 8px; 214 | } 215 | } 216 | 217 | input, 218 | textarea { 219 | width: 100%; 220 | } 221 | textarea { 222 | padding-left: 0; 223 | @include placeholder($input-color-placeholder, -3px); 224 | } 225 | 226 | // Reset height since textareas have rows 227 | textarea { 228 | height: auto; 229 | } 230 | 231 | // Everything else 232 | textarea, 233 | input[type="text"], 234 | input[type="password"], 235 | input[type="datetime"], 236 | input[type="datetime-local"], 237 | input[type="date"], 238 | input[type="month"], 239 | input[type="time"], 240 | input[type="week"], 241 | input[type="number"], 242 | input[type="email"], 243 | input[type="url"], 244 | input[type="search"], 245 | input[type="tel"], 246 | input[type="color"] { 247 | border: 0; 248 | } 249 | 250 | // Position radios and checkboxes better 251 | input[type="radio"], 252 | input[type="checkbox"] { 253 | margin: 0; 254 | line-height: normal; 255 | } 256 | 257 | // Reset width of input images, buttons, radios, checkboxes 258 | input[type="file"], 259 | input[type="image"], 260 | input[type="submit"], 261 | input[type="reset"], 262 | input[type="button"], 263 | input[type="radio"], 264 | input[type="checkbox"] { 265 | width: auto; // Override of generic input selector 266 | } 267 | 268 | // Set the height of file to match text inputs 269 | input[type="file"] { 270 | line-height: $input-height-base; 271 | } 272 | 273 | // Text input classes to hide text caret during scroll 274 | .previous-input-focus, 275 | .cloned-text-input + input, 276 | .cloned-text-input + textarea { 277 | position: absolute !important; 278 | left: -9999px; 279 | width: 200px; 280 | } 281 | 282 | 283 | // Placeholder 284 | // ------------------------------- 285 | input, 286 | textarea { 287 | @include placeholder(); 288 | } 289 | 290 | 291 | // DISABLED STATE 292 | // ------------------------------- 293 | 294 | // Disabled and read-only inputs 295 | input[disabled], 296 | select[disabled], 297 | textarea[disabled], 298 | input[readonly]:not(.cloned-text-input), 299 | textarea[readonly]:not(.cloned-text-input), 300 | select[readonly] { 301 | background-color: $input-bg-disabled; 302 | cursor: not-allowed; 303 | } 304 | // Explicitly reset the colors here 305 | input[type="radio"][disabled], 306 | input[type="checkbox"][disabled], 307 | input[type="radio"][readonly], 308 | input[type="checkbox"][readonly] { 309 | background-color: transparent; 310 | } 311 | -------------------------------------------------------------------------------- /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 + .row { 22 | margin-top: ($grid-padding-width / 2) * -1; 23 | padding-top: 0; 24 | } 25 | 26 | .col { 27 | @include flex(1); 28 | display: block; 29 | padding: ($grid-padding-width / 2); 30 | width: 100%; 31 | } 32 | 33 | 34 | /* Vertically Align Columns */ 35 | /* .row-* vertically aligns every .col in the .row */ 36 | .row-top { 37 | @include align-items(flex-start); 38 | } 39 | .row-bottom { 40 | @include align-items(flex-end); 41 | } 42 | .row-center { 43 | @include align-items(center); 44 | } 45 | .row-stretch { 46 | @include align-items(stretch); 47 | } 48 | .row-baseline { 49 | @include align-items(baseline); 50 | } 51 | 52 | /* .col-* vertically aligns an individual .col */ 53 | .col-top { 54 | @include align-self(flex-start); 55 | } 56 | .col-bottom { 57 | @include align-self(flex-end); 58 | } 59 | .col-center { 60 | @include align-self(center); 61 | } 62 | 63 | /* Column Offsets */ 64 | .col-offset-10 { 65 | margin-left: 10%; 66 | } 67 | .col-offset-20 { 68 | margin-left: 20%; 69 | } 70 | .col-offset-25 { 71 | margin-left: 25%; 72 | } 73 | .col-offset-33, .col-offset-34 { 74 | margin-left: 33.3333%; 75 | } 76 | .col-offset-50 { 77 | margin-left: 50%; 78 | } 79 | .col-offset-66, .col-offset-67 { 80 | margin-left: 66.6666%; 81 | } 82 | .col-offset-75 { 83 | margin-left: 75%; 84 | } 85 | .col-offset-80 { 86 | margin-left: 80%; 87 | } 88 | .col-offset-90 { 89 | margin-left: 90%; 90 | } 91 | 92 | 93 | /* Explicit Column Percent Sizes */ 94 | /* By default each grid column will evenly distribute */ 95 | /* across the grid. However, you can specify individual */ 96 | /* columns to take up a certain size of the available area */ 97 | .col-10 { 98 | @include flex(0, 0, 10%); 99 | max-width: 10%; 100 | } 101 | .col-20 { 102 | @include flex(0, 0, 20%); 103 | max-width: 20%; 104 | } 105 | .col-25 { 106 | @include flex(0, 0, 25%); 107 | max-width: 25%; 108 | } 109 | .col-33, .col-34 { 110 | @include flex(0, 0, 33.3333%); 111 | max-width: 33.3333%; 112 | } 113 | .col-50 { 114 | @include flex(0, 0, 50%); 115 | max-width: 50%; 116 | } 117 | .col-66, .col-67 { 118 | @include flex(0, 0, 66.6666%); 119 | max-width: 66.6666%; 120 | } 121 | .col-75 { 122 | @include flex(0, 0, 75%); 123 | max-width: 75%; 124 | } 125 | .col-80 { 126 | @include flex(0, 0, 80%); 127 | max-width: 80%; 128 | } 129 | .col-90 { 130 | @include flex(0, 0, 90%); 131 | max-width: 90%; 132 | } 133 | 134 | 135 | /* Responsive Grid Classes */ 136 | /* Adding a class of responsive-X to a row */ 137 | /* will trigger the flex-direction to */ 138 | /* change to column and add some margin */ 139 | /* to any columns in the row for clearity */ 140 | 141 | @include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break); 142 | @include responsive-grid-break('.responsive-md', $grid-responsive-md-break); 143 | @include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break); 144 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_items.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Items 3 | * -------------------------------------------------- 4 | */ 5 | 6 | .item { 7 | @include item-style($item-default-bg, $item-default-border, $item-default-text); 8 | 9 | position: relative; 10 | z-index: $z-index-item; // Make sure the borders and stuff don't get hidden by children 11 | display: block; 12 | 13 | margin: $item-border-width * -1; 14 | padding: $item-padding; 15 | 16 | border-width: $item-border-width; 17 | border-style: solid; 18 | font-size: $item-font-size; 19 | 20 | h2 { 21 | margin: 0 0 2px 0; 22 | font-size: 16px; 23 | font-weight: normal; 24 | } 25 | h3 { 26 | margin: 0 0 4px 0; 27 | font-size: 14px; 28 | } 29 | h4 { 30 | margin: 0 0 4px 0; 31 | font-size: 12px; 32 | } 33 | h5, h6 { 34 | margin: 0 0 3px 0; 35 | font-size: 10px; 36 | } 37 | p { 38 | color: #666; 39 | font-size: 14px; 40 | margin-bottom: 2px; 41 | } 42 | 43 | h1:last-child, 44 | h2:last-child, 45 | h3:last-child, 46 | h4:last-child, 47 | h5:last-child, 48 | h6:last-child, 49 | p:last-child { 50 | margin-bottom: 0; 51 | } 52 | 53 | // Align badges within items 54 | .badge { 55 | @include display-flex(); 56 | position: absolute; 57 | top: $item-padding; 58 | right: ($item-padding * 2); 59 | } 60 | &.item-button-right .badge { 61 | right: ($item-padding * 2) + 35; 62 | } 63 | &.item-divider .badge { 64 | top: ceil($item-padding / 2); 65 | } 66 | .badge + .badge { 67 | margin-right: 5px; 68 | } 69 | 70 | // Different themes for items 71 | &.item-light { 72 | @include item-style($item-light-bg, $item-light-border, $item-light-text); 73 | } 74 | &.item-stable { 75 | @include item-style($item-stable-bg, $item-stable-border, $item-stable-text); 76 | } 77 | &.item-positive { 78 | @include item-style($item-positive-bg, $item-positive-border, $item-positive-text); 79 | } 80 | &.item-calm { 81 | @include item-style($item-calm-bg, $item-calm-border, $item-calm-text); 82 | } 83 | &.item-assertive { 84 | @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text); 85 | } 86 | &.item-balanced { 87 | @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text); 88 | } 89 | &.item-energized { 90 | @include item-style($item-energized-bg, $item-energized-border, $item-energized-text); 91 | } 92 | &.item-royal { 93 | @include item-style($item-royal-bg, $item-royal-border, $item-royal-text); 94 | } 95 | &.item-dark { 96 | @include item-style($item-dark-bg, $item-dark-border, $item-dark-text); 97 | } 98 | 99 | &[ng-click]:hover { 100 | cursor: pointer; 101 | } 102 | 103 | } 104 | 105 | .list-borderless .item, 106 | .item-borderless { 107 | border-width: 0; 108 | } 109 | 110 | // Link and Button Active States 111 | .item.active, 112 | .item.activated, 113 | .item-complex.active .item-content, 114 | .item-complex.activated .item-content, 115 | .item .item-content.active, 116 | .item .item-content.activated { 117 | @include item-active-style($item-default-active-bg, $item-default-active-border); 118 | 119 | // Different active themes for and 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /www/templates/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Login

4 |
5 | 6 |
7 | 8 | 9 |
10 |
11 | 15 | 19 | 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /www/templates/menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Left

18 | 19 | 20 | 21 | 22 | 23 | Login 24 | 25 | 26 | 27 | Create Account 28 | 29 | 30 | 31 | Logout 32 | 33 | 34 | 35 | User Data 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | --------------------------------------------------------------------------------