├── .editorconfig ├── .gitignore ├── README.md ├── bower.json ├── config.xml ├── gulpfile.js ├── ionic.config.json ├── package.json ├── scss └── ionic.app.scss └── www ├── css └── style.css ├── img └── ionic.png ├── index.html ├── js └── app.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 │ ├── _refresher.scss │ ├── _reset.scss │ ├── _scaffolding.scss │ ├── _select.scss │ ├── _slide-box.scss │ ├── _slides.scss │ ├── _spinner.scss │ ├── _tabs.scss │ ├── _toggle.scss │ ├── _transitions.scss │ ├── _type.scss │ ├── _util.scss │ ├── _variables.scss │ ├── ionic.scss │ └── ionicons │ │ ├── _ionicons-font.scss │ │ ├── _ionicons-icons.scss │ │ ├── _ionicons-variables.scss │ │ └── ionicons.scss └── version.json └── ngCordova └── dist ├── ng-cordova.js └── ng-cordova.min.js /.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 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | hooks/ 5 | node_modules/ 6 | platforms/ 7 | plugins/ 8 | resources/ 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 使用步骤 2 | 3 | 1. npm install 4 | 2. ionic state restore 5 | 3. ionic platform add android 6 | 4. ionic build android 7 | 8 | ## Cordova 插件 9 | 10 | * cordova plugin add cordova-plugin-device 11 | * cordova plugin add cordova-plugin-console 12 | * cordova plugin add cordova-plugin-whitelist 13 | * cordova plugin add cordova-plugin-splashscreen 14 | * cordova plugin add cordova-plugin-statusbar 15 | * cordova plugin add ionic-plugin-keyboard 16 | * cordova plugin add cordova-plugin-app-version 17 | * cordova plugin add cordova-plugin-file 18 | * cordova plugin add cordova-plugin-file-transfer 19 | * cordova plugin add cordova-plugin-file-opener2 20 | * cordova plugin add cordova-plugin-network-information 21 | 22 | ## AngularJS Cordova插件 23 | 24 | ### [ngCordova](http://ngcordova.com/) 25 | 26 | ## 相关代码，app.js 27 | ``` javascript 28 | // Android升级 29 | function checkUpdate() { 30 | document.addEventListener("deviceready", function () { 31 | 32 | var type = $cordovaNetwork.getNetwork(); 33 | 34 | // 1.0.0 => 10000 35 | var AppVersionCode = '10000'; // 获取的服务器版本 36 | 37 | //获取本地APP版本 38 | $cordovaAppVersion.getVersionNumber().then(function (version) { 39 | // 0.0.1 => 00001 => 1 40 | var nowVersionNum = parseInt(version.toString().replace(new RegExp(/(\.)/g), '0')); 41 | // 10000 42 | var newVersionNum = parseInt(AppVersionCode); 43 | 44 | if (newVersionNum > nowVersionNum) { 45 | if (type === 'wifi') { 46 | $ionicPopup.confirm({ 47 | title: '版本升级', 48 | template: '版本升级详细内容,你现在下载的是QQ', 49 | cancelText: '取消', 50 | okText: '升级' 51 | }).then(function (res) { 52 | if (res) { 53 | UpdateForAndroid(); 54 | } 55 | }); 56 | } else { 57 | $ionicPopup.confirm({ 58 | title: '建议您在WIFI条件下进行升级，是否确认升级？', 59 | template: '版本升级详细内容,你现在下载的是QQ', 60 | cancelText: '取消', 61 | okText: '升级' 62 | }).then(function (res) { 63 | if (res) { 64 | UpdateForAndroid(); 65 | } 66 | }); 67 | } 68 | } 69 | }); 70 | 71 | // 无网络时 72 | $rootScope.$on('$cordovaNetwork:offline', function (event, networkState) { 73 | 74 | $ionicLoading.show({ 75 | template: '网络异常，不能连接到服务器！' 76 | }); 77 | 78 | $timeout(function () { 79 | $ionicLoading.hide() 80 | }, 2000); 81 | }) 82 | }, false); 83 | } 84 | 85 | function UpdateForAndroid() { 86 | $ionicLoading.show({ 87 | template: "已经下载：0%" 88 | }); 89 | var url = 'https://qd.myapp.com/myapp/qqteam/AndroidQQ/mobileqq_android.apk'; // 下载地址 90 | var targetPath = "/sdcard/Download/ionic.apk"; 91 | var trustHosts = true; 92 | var options = {}; 93 | $cordovaFileTransfer.download(url, targetPath, options, trustHosts).then(function (result) { 94 | $cordovaFileOpener2.open(targetPath, 'application/vnd.android.package-archive' 95 | ).then(function () { 96 | // 成功 97 | }, function (err) { 98 | console.log(err); 99 | }); 100 | $ionicLoading.hide(); 101 | }, function (err) { 102 | $ionicLoading.show({ 103 | template: "下载失败" 104 | }); 105 | $ionicLoading.hide(); 106 | }, function (progress) { 107 | $timeout(function () { 108 | var downloadProgress = (progress.loaded / progress.total) * 100; 109 | $ionicLoading.show({ 110 | template: "已经下载：" + Math.floor(downloadProgress) + "%" 111 | }); 112 | if (downloadProgress > 99) { 113 | $ionicLoading.hide(); 114 | } 115 | }); 116 | }); 117 | } 118 | ``` 119 | 上面是一个简单实现方式，可以优化代码，一些数据都在这里写死了，你可以将一些数据从服务端获取，比如最新版本号，最新版的下载路径，这里提供一个思路。 -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HelloIonic", 3 | "private": "true", 4 | "devDependencies": { 5 | "ionic": "driftyco/ionic-bower#1.3.1" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | ionic-AutoUpdateApp 4 | 5 | An Ionic Framework and Cordova project. 6 | 7 | 8 | zhengxujiang 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 | 57 | 58 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-AutoUpdateApp", 3 | "app_id": "" 4 | } 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-autoupdateapp", 3 | "version": "1.1.1", 4 | "description": "ionic-AutoUpdateApp: 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 | "cordova-plugin-app-version", 25 | "cordova-plugin-file", 26 | "cordova-plugin-file-transfer", 27 | "cordova-plugin-file-opener2", 28 | "cordova-plugin-network-information" 29 | ], 30 | "cordovaPlatforms": [] 31 | } 32 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /www/css/style.css: -------------------------------------------------------------------------------- 1 | /* Empty. Add your own CSS if you like */ 2 | -------------------------------------------------------------------------------- /www/img/ionic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zxj963577494/ionic-AutoUpdateApp/4e82e204dd44744c3d2c75066add1a2a9fe41459/www/img/ionic.png -------------------------------------------------------------------------------- /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 | 28 | 29 | 30 | 31 |

Ionic Blank Starter

32 | 33 | 34 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /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', 'ngCordova']) 7 | 8 | .run(['$ionicPlatform', 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.styleDefault(); 22 | } 23 | }); 24 | }]) 25 | 26 | .controller('myCtrl', ['$timeout', '$rootScope', '$scope', '$cordovaAppVersion', '$cordovaNetwork', '$ionicPopup', '$ionicLoading', '$cordovaFileTransfer', '$cordovaFileOpener2', function ($timeout, $rootScope, $scope, $cordovaAppVersion, $cordovaNetwork, $ionicPopup, $ionicLoading, $cordovaFileTransfer, $cordovaFileOpener2) { 27 | 28 | $scope.update = function () { 29 | checkUpdate(); 30 | } 31 | 32 | // Android升级 33 | function checkUpdate() { 34 | document.addEventListener("deviceready", function () { 35 | 36 | var type = $cordovaNetwork.getNetwork(); 37 | 38 | // 1.0.0 => 10000 39 | var AppVersionCode = '10000'; // 获取的服务器版本 40 | 41 | //获取本地APP版本 42 | $cordovaAppVersion.getVersionNumber().then(function (version) { 43 | // 0.0.1 => 00001 => 1 44 | var nowVersionNum = parseInt(version.toString().replace(new RegExp(/(\.)/g), '0')); 45 | // 10000 46 | var newVersionNum = parseInt(AppVersionCode); 47 | 48 | if (newVersionNum > nowVersionNum) { 49 | if (type === 'wifi') { 50 | $ionicPopup.confirm({ 51 | title: '版本升级', 52 | template: '版本升级详细内容,你现在下载的是QQ', 53 | cancelText: '取消', 54 | okText: '升级' 55 | }).then(function (res) { 56 | if (res) { 57 | UpdateForAndroid(); 58 | } 59 | }); 60 | } else { 61 | $ionicPopup.confirm({ 62 | title: '建议您在WIFI条件下进行升级，是否确认升级？', 63 | template: '版本升级详细内容,你现在下载的是QQ', 64 | cancelText: '取消', 65 | okText: '升级' 66 | }).then(function (res) { 67 | if (res) { 68 | UpdateForAndroid(); 69 | } 70 | }); 71 | } 72 | } 73 | }); 74 | 75 | // 无网络时 76 | $rootScope.$on('$cordovaNetwork:offline', function (event, networkState) { 77 | 78 | $ionicLoading.show({ 79 | template: '网络异常，不能连接到服务器！' 80 | }); 81 | 82 | $timeout(function () { 83 | $ionicLoading.hide() 84 | }, 2000); 85 | }) 86 | }, false); 87 | } 88 | 89 | function UpdateForAndroid() { 90 | $ionicLoading.show({ 91 | template: "已经下载：0%" 92 | }); 93 | var url = 'https://qd.myapp.com/myapp/qqteam/AndroidQQ/mobileqq_android.apk'; // 下载地址 94 | var targetPath = "/sdcard/Download/ionic.apk"; 95 | var trustHosts = true; 96 | var options = {}; 97 | $cordovaFileTransfer.download(url, targetPath, options, trustHosts).then(function (result) { 98 | $cordovaFileOpener2.open(targetPath, 'application/vnd.android.package-archive' 99 | ).then(function () { 100 | // 成功 101 | }, function (err) { 102 | console.log(err); 103 | }); 104 | $ionicLoading.hide(); 105 | }, function (err) { 106 | $ionicLoading.show({ 107 | template: "下载失败" 108 | }); 109 | $ionicLoading.hide(); 110 | }, function (progress) { 111 | $timeout(function () { 112 | var downloadProgress = (progress.loaded / progress.total) * 100; 113 | $ionicLoading.show({ 114 | template: "已经下载：" + Math.floor(downloadProgress) + "%" 115 | }); 116 | if (downloadProgress > 99) { 117 | $ionicLoading.hide(); 118 | } 119 | }); 120 | }); 121 | } 122 | }]) -------------------------------------------------------------------------------- /www/lib/ionic/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zxj963577494/ionic-AutoUpdateApp/4e82e204dd44744c3d2c75066add1a2a9fe41459/www/lib/ionic/fonts/ionicons.eot -------------------------------------------------------------------------------- /www/lib/ionic/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zxj963577494/ionic-AutoUpdateApp/4e82e204dd44744c3d2c75066add1a2a9fe41459/www/lib/ionic/fonts/ionicons.ttf -------------------------------------------------------------------------------- /www/lib/ionic/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zxj963577494/ionic-AutoUpdateApp/4e82e204dd44744c3d2c75066add1a2a9fe41459/www/lib/ionic/fonts/ionicons.woff -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | @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-balanced-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 | .title { 371 | height: $bar-footer-height - 1; 372 | line-height: $bar-footer-height; 373 | } 374 | } 375 | 376 | // Don't render padding if the bar is just for tabs 377 | .bar-tabs { 378 | padding: 0; 379 | } 380 | 381 | .bar-subheader { 382 | top: $bar-height; 383 | 384 | height: $bar-subheader-height; 385 | 386 | .title { 387 | height: $bar-subheader-height - 1; 388 | line-height: $bar-subheader-height; 389 | } 390 | } 391 | .bar-subfooter { 392 | bottom: $bar-footer-height; 393 | 394 | height: $bar-subfooter-height; 395 | 396 | .title { 397 | height: $bar-subfooter-height - 1; 398 | line-height: $bar-subfooter-height; 399 | } 400 | } 401 | 402 | .nav-bar-block { 403 | position: absolute; 404 | top: 0; 405 | right: 0; 406 | left: 0; 407 | z-index: $z-index-bar; 408 | } 409 | 410 | .bar .back-button.hide, 411 | .bar .buttons .hide { 412 | display: none; 413 | } 414 | 415 | .nav-bar-tabs-top .bar { 416 | background-image: none; 417 | } 418 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-default-border, $button-light-active-bg, $button-default-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-default-border, $button-stable-active-bg, $button-default-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-default-border, $button-positive-active-bg, $button-default-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-default-border, $button-calm-active-bg, $button-default-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-default-border, $button-assertive-active-bg, $button-default-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-default-border, $button-balanced-active-bg, $button-default-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-default-border, $button-energized-active-bg, $button-default-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-default-border, $button-royal-active-bg, $button-default-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-default-border, $button-dark-active-bg, $button-default-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 | .platform-android .item-checkbox-right .checkbox-square .checkbox-icon::after { 131 | top: 31%; 132 | } 133 | 134 | .grade-c .checkbox input:after, 135 | .grade-c .checkbox-icon:after { 136 | @include rotate(0); 137 | top: 3px; 138 | left: 4px; 139 | border: none; 140 | color: $checkbox-check-color; 141 | content: '\2713'; 142 | font-weight: bold; 143 | font-size: 20px; 144 | } 145 | 146 | // what the checkmark looks like when its checked 147 | .checkbox input:checked:after, 148 | input:checked + .checkbox-icon:after { 149 | opacity: 1; 150 | } 151 | 152 | // make sure item content have enough padding on left to fit the checkbox 153 | .item-checkbox { 154 | padding-left: ($item-padding * 2) + $checkbox-width; 155 | 156 | &.active { 157 | box-shadow: none; 158 | } 159 | } 160 | 161 | // position the checkbox to the left within an item 162 | .item-checkbox .checkbox { 163 | position: absolute; 164 | top: 50%; 165 | right: $item-padding / 2; 166 | left: $item-padding / 2; 167 | z-index: $z-index-item-checkbox; 168 | margin-top: (($checkbox-height + ($checkbox-height / 2)) / 2) * -1; 169 | } 170 | 171 | 172 | .item-checkbox.item-checkbox-right { 173 | padding-right: ($item-padding * 2) + $checkbox-width; 174 | padding-left: $item-padding; 175 | } 176 | 177 | .item-checkbox-right .checkbox input, 178 | .item-checkbox-right .checkbox-icon { 179 | float: right; 180 | } 181 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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