├── .bowerrc ├── .editorconfig ├── .gitignore ├── README.md ├── bower.json ├── config.xml ├── gulpfile.js ├── hooks ├── README.md └── after_prepare │ └── 010_add_platform_class.js ├── ionic.project ├── package.json ├── scss └── ionic.app.scss └── www ├── css └── style.css ├── img └── ionic.png ├── index.html ├── js ├── app.js └── controllers.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 └── templates ├── browse.html ├── login.html ├── menu.html ├── playlist.html ├── playlists.html └── search.html /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "www/lib" 3 | } 4 | -------------------------------------------------------------------------------- /.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 | node_modules/ 5 | platforms/ 6 | plugins/ 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # animatedGrid 2 | Animated Grid Ionic Starter Sidemenu App inspired by this Codrops tutorial: 3 | 4 | 5 | ## Install & Preview 6 | 7 | Option 1: in browser 8 | 9 | Install node + ionic: http://ionicframework.com/
10 | In command line: go to animatedGrid directory
11 | Run 'ionic serve' 12 | 13 | 14 | Option 2: Ionic Lab 15 | 16 | Install Ionic Lab: http://lab.ionic.io/
17 | Open animatedGrid in Ionic Lab
18 | Preview 19 | 20 | You are welcome to preview this app in Ionic View ( http://view.ionic.io/ ).
21 | App ID: 2B562C3B 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HelloIonic", 3 | "private": "true", 4 | "devDependencies": { 5 | "ionic": "driftyco/ionic-bower#1.3.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | animatedGrid 4 | 5 | An Ionic Framework and Cordova project. 6 | 7 | 8 | Your Name Here 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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_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 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | // 'starter.controllers' is found in controllers.js 7 | angular.module('starter', ['ionic', 'starter.controllers']) 8 | 9 | .run(function($ionicPlatform) { 10 | $ionicPlatform.ready(function() { 11 | // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 12 | // for form inputs) 13 | if (window.cordova && window.cordova.plugins.Keyboard) { 14 | cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 15 | cordova.plugins.Keyboard.disableScroll(true); 16 | 17 | } 18 | if (window.StatusBar) { 19 | // org.apache.cordova.statusbar required 20 | StatusBar.styleDefault(); 21 | } 22 | }); 23 | }) 24 | 25 | .config(function($stateProvider, $urlRouterProvider) { 26 | $stateProvider 27 | 28 | .state('app', { 29 | url: '/app', 30 | abstract: true, 31 | templateUrl: 'templates/menu.html', 32 | controller: 'AppCtrl' 33 | }) 34 | 35 | .state('app.search', { 36 | url: '/search', 37 | views: { 38 | 'menuContent': { 39 | templateUrl: 'templates/search.html' 40 | } 41 | } 42 | }) 43 | 44 | .state('app.browse', { 45 | url: '/browse', 46 | views: { 47 | 'menuContent': { 48 | templateUrl: 'templates/browse.html' 49 | } 50 | } 51 | }) 52 | .state('app.playlists', { 53 | url: '/playlists', 54 | views: { 55 | 'menuContent': { 56 | templateUrl: 'templates/playlists.html', 57 | controller: 'PlaylistsCtrl' 58 | } 59 | } 60 | }) 61 | 62 | .state('app.single', { 63 | url: '/playlists/:playlistId', 64 | views: { 65 | 'menuContent': { 66 | templateUrl: 'templates/playlist.html', 67 | controller: 'PlaylistCtrl' 68 | } 69 | } 70 | }); 71 | // if none of the above states are matched, use this as the fallback 72 | $urlRouterProvider.otherwise('/app/playlists'); 73 | }); 74 | -------------------------------------------------------------------------------- /www/js/controllers.js: -------------------------------------------------------------------------------- 1 | angular.module('starter.controllers', []) 2 | 3 | .controller('AppCtrl', function($scope, $ionicModal, $timeout) { 4 | 5 | // With the new view caching in Ionic, Controllers are only called 6 | // when they are recreated or on app start, instead of every page change. 7 | // To listen for when this page is active (for example, to refresh data), 8 | // listen for the $ionicView.enter event: 9 | //$scope.$on('$ionicView.enter', function(e) { 10 | //}); 11 | 12 | // Form data for the login modal 13 | $scope.loginData = {}; 14 | 15 | // Create the login modal that we will use later 16 | $ionicModal.fromTemplateUrl('templates/login.html', { 17 | scope: $scope 18 | }).then(function(modal) { 19 | $scope.modal = modal; 20 | }); 21 | 22 | // Triggered in the login modal to close it 23 | $scope.closeLogin = function() { 24 | $scope.modal.hide(); 25 | }; 26 | 27 | // Open the login modal 28 | $scope.login = function() { 29 | $scope.modal.show(); 30 | }; 31 | 32 | // Perform the login action when the user submits the login form 33 | $scope.doLogin = function() { 34 | console.log('Doing login', $scope.loginData); 35 | 36 | // Simulate a login delay. Remove this and replace with your login 37 | // code if using a login system 38 | $timeout(function() { 39 | $scope.closeLogin(); 40 | }, 1000); 41 | }; 42 | }) 43 | 44 | .controller('PlaylistsCtrl', function($scope) { 45 | $scope.playlists = [ 46 | { title: 'Reggae', id: 1 }, 47 | { title: 'Chill', id: 2 }, 48 | { title: 'Dubstep', id: 3 }, 49 | { title: 'Indie', id: 4 }, 50 | { title: 'Rap', id: 5 }, 51 | { title: 'Cowbell', id: 6 } 52 | ]; 53 | }) 54 | 55 | .controller('PlaylistCtrl', function($scope, $stateParams) { 56 | }); 57 | -------------------------------------------------------------------------------- /www/lib/ionic/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-syche/animatedGrid/b7bd36ebbca73a65f099a56883e15aca3d0490af/www/lib/ionic/fonts/ionicons.eot -------------------------------------------------------------------------------- /www/lib/ionic/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-syche/animatedGrid/b7bd36ebbca73a65f099a56883e15aca3d0490af/www/lib/ionic/fonts/ionicons.ttf -------------------------------------------------------------------------------- /www/lib/ionic/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-syche/animatedGrid/b7bd36ebbca73a65f099a56883e15aca3d0490af/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-positive-border 50%, transparent 50%); 103 | } 104 | } 105 | &.bar-energized { 106 | @include bar-style($bar-energized-bg, $bar-energized-border, $bar-energized-text); 107 | &.bar-footer{ 108 | background-image: linear-gradient(180deg, $bar-energized-border, $bar-energized-border 50%, transparent 50%); 109 | } 110 | } 111 | &.bar-royal { 112 | @include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text); 113 | &.bar-footer{ 114 | background-image: linear-gradient(180deg, $bar-royal-border, $bar-royal-border 50%, transparent 50%); 115 | } 116 | } 117 | &.bar-dark { 118 | @include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text); 119 | &.bar-footer{ 120 | background-image: linear-gradient(180deg, $bar-dark-border, $bar-dark-border 50%, transparent 50%); 121 | } 122 | } 123 | 124 | // Title inside of a bar is centered 125 | .title { 126 | display: block; 127 | position: absolute; 128 | 129 | top: 0; 130 | right: 0; 131 | left: 0; 132 | z-index: $z-index-bar-title; 133 | overflow: hidden; 134 | 135 | margin: 0 10px; 136 | 137 | min-width: 30px; 138 | height: $bar-height - 1; 139 | 140 | text-align: center; 141 | 142 | // Go into ellipsis if too small 143 | text-overflow: ellipsis; 144 | white-space: nowrap; 145 | 146 | font-size: $bar-title-font-size; 147 | font-weight: $headings-font-weight; 148 | 149 | line-height: $bar-height; 150 | 151 | &.title-left { 152 | text-align: left; 153 | } 154 | &.title-right { 155 | text-align: right; 156 | } 157 | } 158 | 159 | .title a { 160 | color: inherit; 161 | } 162 | 163 | .button, button { 164 | z-index: $z-index-bar-button; 165 | padding: 0 $button-bar-button-padding; 166 | min-width: initial; 167 | min-height: $button-bar-button-height - 1; 168 | font-weight: 400; 169 | font-size: $button-bar-button-font-size; 170 | line-height: $button-bar-button-height; 171 | 172 | &.button-icon:before, 173 | .icon:before, 174 | &.icon:before, 175 | &.icon-left:before, 176 | &.icon-right:before { 177 | padding-right: 2px; 178 | padding-left: 2px; 179 | font-size: $button-bar-button-icon-size; 180 | line-height: $button-bar-button-height; 181 | } 182 | 183 | &.button-icon { 184 | font-size: $bar-title-font-size; 185 | .icon:before, 186 | &:before, 187 | &.icon-left:before, 188 | &.icon-right:before { 189 | vertical-align: top; 190 | font-size: $button-large-icon-size; 191 | line-height: $button-bar-button-height; 192 | } 193 | } 194 | &.button-clear { 195 | padding-right: 2px; 196 | padding-left: 2px; 197 | font-weight: 300; 198 | font-size: $bar-title-font-size; 199 | 200 | .icon:before, 201 | &.icon:before, 202 | &.icon-left:before, 203 | &.icon-right:before { 204 | font-size: $button-large-icon-size; 205 | line-height: $button-bar-button-height; 206 | } 207 | } 208 | 209 | &.back-button { 210 | display: block; 211 | margin-right: 5px; 212 | padding: 0; 213 | white-space: nowrap; 214 | font-weight: 400; 215 | } 216 | 217 | &.back-button.active, 218 | &.back-button.activated { 219 | opacity: 0.2; 220 | } 221 | } 222 | 223 | .button-bar > .button, 224 | .buttons > .button { 225 | min-height: $button-bar-button-height - 1; 226 | line-height: $button-bar-button-height; 227 | } 228 | 229 | .button-bar + .button, 230 | .button + .button-bar { 231 | margin-left: 5px; 232 | } 233 | 234 | // Android 4.4 messes with the display property 235 | .buttons, 236 | .buttons.primary-buttons, 237 | .buttons.secondary-buttons { 238 | display: inherit; 239 | } 240 | .buttons span { 241 | display: inline-block; 242 | } 243 | .buttons-left span { 244 | margin-right: 5px; 245 | display: inherit; 246 | } 247 | .buttons-right span { 248 | margin-left: 5px; 249 | display: inherit; 250 | } 251 | 252 | // Place the last button in a bar on the right of the bar 253 | .title + .button:last-child, 254 | > .button + .button:last-child, 255 | > .button.pull-right, 256 | .buttons.pull-right, 257 | .title + .buttons { 258 | position: absolute; 259 | top: 5px; 260 | right: 5px; 261 | bottom: 5px; 262 | } 263 | 264 | } 265 | 266 | .platform-android { 267 | 268 | .nav-bar-has-subheader .bar { 269 | background-image: none; 270 | } 271 | 272 | .bar { 273 | 274 | .back-button .icon:before { 275 | font-size: 24px; 276 | } 277 | 278 | .title { 279 | font-size: 19px; 280 | line-height: $bar-height; 281 | } 282 | } 283 | 284 | } 285 | 286 | // Default styles for buttons inside of styled bars 287 | .bar-light { 288 | .button { 289 | @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text); 290 | @include button-clear($bar-light-text, $bar-title-font-size); 291 | } 292 | } 293 | .bar-stable { 294 | .button { 295 | @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text); 296 | @include button-clear($bar-stable-text, $bar-title-font-size); 297 | } 298 | } 299 | .bar-positive { 300 | .button { 301 | @include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text); 302 | @include button-clear(#fff, $bar-title-font-size); 303 | } 304 | } 305 | .bar-calm { 306 | .button { 307 | @include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text); 308 | @include button-clear(#fff, $bar-title-font-size); 309 | } 310 | } 311 | .bar-assertive { 312 | .button { 313 | @include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text); 314 | @include button-clear(#fff, $bar-title-font-size); 315 | } 316 | } 317 | .bar-balanced { 318 | .button { 319 | @include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text); 320 | @include button-clear(#fff, $bar-title-font-size); 321 | } 322 | } 323 | .bar-energized { 324 | .button { 325 | @include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text); 326 | @include button-clear(#fff, $bar-title-font-size); 327 | } 328 | } 329 | .bar-royal { 330 | .button { 331 | @include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text); 332 | @include button-clear(#fff, $bar-title-font-size); 333 | } 334 | } 335 | .bar-dark { 336 | .button { 337 | @include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text); 338 | @include button-clear(#fff, $bar-title-font-size); 339 | } 340 | } 341 | 342 | // Header at top 343 | .bar-header { 344 | top: 0; 345 | border-top-width: 0; 346 | border-bottom-width: 1px; 347 | &.has-tabs-top{ 348 | border-bottom-width: 0px; 349 | background-image: none; 350 | } 351 | } 352 | .tabs-top .bar-header{ 353 | border-bottom-width: 0px; 354 | background-image: none; 355 | } 356 | 357 | // Footer at bottom 358 | .bar-footer { 359 | bottom: 0; 360 | border-top-width: 1px; 361 | border-bottom-width: 0; 362 | background-position: top; 363 | 364 | height: $bar-footer-height; 365 | 366 | &.item-input-inset { 367 | position: absolute; 368 | } 369 | } 370 | 371 | // Don't render padding if the bar is just for tabs 372 | .bar-tabs { 373 | padding: 0; 374 | } 375 | 376 | .bar-subheader { 377 | top: $bar-height; 378 | display: block; 379 | 380 | height: $bar-subheader-height; 381 | } 382 | .bar-subfooter { 383 | bottom: $bar-footer-height; 384 | display: block; 385 | 386 | height: $bar-subfooter-height; 387 | } 388 | 389 | .nav-bar-block { 390 | position: absolute; 391 | top: 0; 392 | right: 0; 393 | left: 0; 394 | z-index: $z-index-bar; 395 | } 396 | 397 | .bar .back-button.hide, 398 | .bar .buttons .hide { 399 | display: none; 400 | } 401 | 402 | .nav-bar-tabs-top .bar { 403 | background-image: none; 404 | } 405 | -------------------------------------------------------------------------------- /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-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 | .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/_list.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Lists 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .list { 8 | position: relative; 9 | padding-top: $item-border-width; 10 | padding-bottom: $item-border-width; 11 | padding-left: 0; // reset padding because ul and ol 12 | margin-bottom: 20px; 13 | } 14 | .list:last-child { 15 | margin-bottom: 0px; 16 | &.card{ 17 | margin-bottom:40px; 18 | } 19 | } 20 | 21 | 22 | /** 23 | * List Header 24 | * -------------------------------------------------- 25 | */ 26 | 27 | .list-header { 28 | margin-top: $list-header-margin-top; 29 | padding: $list-header-padding; 30 | background-color: $list-header-bg; 31 | color: $list-header-color; 32 | font-weight: bold; 33 | } 34 | 35 | // when its a card make sure it doesn't duplicate top and bottom borders 36 | .card.list .list-item { 37 | padding-right: 1px; 38 | padding-left: 1px; 39 | } 40 | 41 | 42 | /** 43 | * Cards and Inset Lists 44 | * -------------------------------------------------- 45 | * A card and list-inset are close to the same thing, except a card as a box shadow. 46 | */ 47 | 48 | .card, 49 | .list-inset { 50 | overflow: hidden; 51 | margin: ($content-padding * 2) $content-padding; 52 | border-radius: $card-border-radius; 53 | background-color: $card-body-bg; 54 | } 55 | 56 | .card { 57 | padding-top: $item-border-width; 58 | padding-bottom: $item-border-width; 59 | box-shadow: $card-box-shadow; 60 | 61 | .item { 62 | border-left: 0; 63 | border-right: 0; 64 | } 65 | .item:first-child { 66 | border-top: 0; 67 | } 68 | .item:last-child { 69 | border-bottom: 0; 70 | } 71 | } 72 | 73 | .padding { 74 | .card, .list-inset { 75 | margin-left: 0; 76 | margin-right: 0; 77 | } 78 | } 79 | 80 | .card .item, 81 | .list-inset .item, 82 | .padding > .list .item 83 | { 84 | &:first-child { 85 | border-top-left-radius: $card-border-radius; 86 | border-top-right-radius: $card-border-radius; 87 | 88 | .item-content { 89 | border-top-left-radius: $card-border-radius; 90 | border-top-right-radius: $card-border-radius; 91 | } 92 | } 93 | &:last-child { 94 | border-bottom-right-radius: $card-border-radius; 95 | border-bottom-left-radius: $card-border-radius; 96 | 97 | .item-content { 98 | border-bottom-right-radius: $card-border-radius; 99 | border-bottom-left-radius: $card-border-radius; 100 | } 101 | } 102 | } 103 | 104 | .card .item:last-child, 105 | .list-inset .item:last-child { 106 | margin-bottom: $item-border-width * -1; 107 | } 108 | 109 | .card .item, 110 | .list-inset .item, 111 | .padding > .list .item, 112 | .padding-horizontal > .list .item { 113 | margin-right: 0; 114 | margin-left: 0; 115 | 116 | &.item-input input { 117 | padding-right: 44px; 118 | } 119 | } 120 | .padding-left > .list .item { 121 | margin-left: 0; 122 | } 123 | .padding-right > .list .item { 124 | margin-right: 0; 125 | } 126 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_loading.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Loading 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .loading-container { 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | right: 0; 12 | bottom: 0; 13 | 14 | z-index: $z-index-loading; 15 | 16 | @include display-flex(); 17 | @include justify-content(center); 18 | @include align-items(center); 19 | 20 | @include transition(0.2s opacity linear); 21 | visibility: hidden; 22 | opacity: 0; 23 | 24 | &:not(.visible) .icon, 25 | &:not(.visible) .spinner{ 26 | display: none; 27 | } 28 | &.visible { 29 | visibility: visible; 30 | } 31 | &.active { 32 | opacity: 1; 33 | } 34 | 35 | .loading { 36 | padding: $loading-padding; 37 | 38 | border-radius: $loading-border-radius; 39 | background-color: $loading-bg-color; 40 | 41 | color: $loading-text-color; 42 | 43 | text-align: center; 44 | text-overflow: ellipsis; 45 | font-size: $loading-font-size; 46 | 47 | h1, h2, h3, h4, h5, h6 { 48 | color: $loading-text-color; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_menu.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Menus 4 | * -------------------------------------------------- 5 | * Side panel structure 6 | */ 7 | 8 | .menu { 9 | position: absolute; 10 | top: 0; 11 | bottom: 0; 12 | z-index: $z-index-menu; 13 | overflow: hidden; 14 | 15 | min-height: 100%; 16 | max-height: 100%; 17 | width: $menu-width; 18 | 19 | background-color: $menu-bg; 20 | 21 | .scroll-content { 22 | z-index: $z-index-menu-scroll-content; 23 | } 24 | 25 | .bar-header { 26 | z-index: $z-index-menu-bar-header; 27 | } 28 | } 29 | 30 | .menu-content { 31 | @include transform(none); 32 | box-shadow: $menu-side-shadow; 33 | } 34 | 35 | .menu-open .menu-content .pane, 36 | .menu-open .menu-content .scroll-content { 37 | pointer-events: none; 38 | } 39 | .menu-open .menu-content .scroll-content .scroll { 40 | pointer-events: none; 41 | } 42 | .menu-open .menu-content .scroll-content:not(.overflow-scroll) { 43 | overflow: hidden; 44 | } 45 | 46 | .grade-b .menu-content, 47 | .grade-c .menu-content { 48 | @include box-sizing(content-box); 49 | right: -1px; 50 | left: -1px; 51 | border-right: 1px solid #ccc; 52 | border-left: 1px solid #ccc; 53 | box-shadow: none; 54 | } 55 | 56 | .menu-left { 57 | left: 0; 58 | } 59 | 60 | .menu-right { 61 | right: 0; 62 | } 63 | 64 | .aside-open.aside-resizing .menu-right { 65 | display: none; 66 | } 67 | 68 | .menu-animated { 69 | @include transition-transform($menu-animation-speed ease); 70 | } 71 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | 2 | // Button Mixins 3 | // -------------------------------------------------- 4 | 5 | @mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) { 6 | border-color: transparent;//$border-color; 7 | background-color: $bg-color; 8 | color: $color; 9 | 10 | // Give desktop users something to play with 11 | &:hover { 12 | color: $color; 13 | text-decoration: none; 14 | } 15 | &.active, 16 | &.activated { 17 | //border-color: transparent;//$active-border-color; 18 | background-color: $active-bg-color; 19 | //box-shadow: inset 0 1px 4px rgba(0,0,0,0.1); 20 | } 21 | } 22 | 23 | @mixin button-clear($color, $font-size:"") { 24 | &.button-clear { 25 | border-color: transparent; 26 | background: none; 27 | box-shadow: none; 28 | color: $color; 29 | 30 | @if $font-size != "" { 31 | font-size: $font-size; 32 | } 33 | } 34 | &.button-icon { 35 | border-color: transparent; 36 | background: none; 37 | } 38 | } 39 | 40 | @mixin button-outline($color, $text-color:"") { 41 | &.button-outline { 42 | border-color: $color; 43 | background: transparent; 44 | @if $text-color == "" { 45 | $text-color: $color; 46 | } 47 | color: $text-color; 48 | &.active, 49 | &.activated { 50 | background-color: $color; 51 | box-shadow: none; 52 | color: #fff; 53 | } 54 | } 55 | } 56 | 57 | 58 | // Bar Mixins 59 | // -------------------------------------------------- 60 | 61 | @mixin bar-style($bg-color, $border-color, $color) { 62 | border-color: $border-color; 63 | background-color: $bg-color; 64 | background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%); 65 | color: $color; 66 | 67 | .title { 68 | color: $color; 69 | } 70 | } 71 | 72 | 73 | // Tab Mixins 74 | // -------------------------------------------------- 75 | 76 | @mixin tab-style($bg-color, $border-color, $color) { 77 | border-color: $border-color; 78 | background-color: $bg-color; 79 | background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%); 80 | color: $color; 81 | } 82 | 83 | @mixin tab-badge-style($bg-color, $color) { 84 | .tab-item .badge { 85 | background-color: $bg-color; 86 | color: $color; 87 | } 88 | } 89 | 90 | 91 | // Item Mixins 92 | // -------------------------------------------------- 93 | 94 | @mixin item-style($bg-color, $border-color, $color) { 95 | border-color: $border-color; 96 | background-color: $bg-color; 97 | color: $color; 98 | } 99 | 100 | @mixin item-active-style($active-bg-color, $active-border-color) { 101 | border-color: $active-border-color; 102 | background-color: $active-bg-color; 103 | &.item-complex > .item-content { 104 | border-color: $active-border-color; 105 | background-color: $active-bg-color; 106 | } 107 | } 108 | 109 | 110 | // Badge Mixins 111 | // -------------------------------------------------- 112 | 113 | @mixin badge-style($bg-color, $color) { 114 | background-color: $bg-color; 115 | color: $color; 116 | } 117 | 118 | 119 | // Range Mixins 120 | // -------------------------------------------------- 121 | 122 | @mixin range-style($track-bg-color) { 123 | &::-webkit-slider-thumb:before { 124 | background: $track-bg-color; 125 | } 126 | &::-ms-fill-lower{ 127 | background: $track-bg-color; 128 | } 129 | } 130 | 131 | 132 | // Checkbox Mixins 133 | // -------------------------------------------------- 134 | 135 | @mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) { 136 | & input:before, 137 | & .checkbox-icon:before { 138 | border-color: $off-border-color; 139 | } 140 | 141 | // what the background looks like when its checked 142 | & input:checked:before, 143 | & input:checked + .checkbox-icon:before { 144 | background: $on-bg-color; 145 | border-color: $on-border-color; 146 | } 147 | } 148 | 149 | 150 | // Toggle Mixins 151 | // -------------------------------------------------- 152 | 153 | @mixin toggle-style($on-border-color, $on-bg-color) { 154 | // the track when the toggle is "on" 155 | & input:checked + .track { 156 | border-color: $on-border-color; 157 | background-color: $on-bg-color; 158 | } 159 | } 160 | @mixin toggle-small-style($on-bg-color) { 161 | // the track when the toggle is "on" 162 | & input:checked + .track { 163 | background-color: rgba($on-bg-color, .5); 164 | } 165 | & input:checked + .track .handle { 166 | background-color: $on-bg-color; 167 | } 168 | } 169 | 170 | 171 | // Clearfix 172 | // -------------------------------------------------- 173 | 174 | @mixin clearfix { 175 | *zoom: 1; 176 | &:before, 177 | &:after { 178 | display: table; 179 | content: ""; 180 | line-height: 0; 181 | } 182 | &:after { 183 | clear: both; 184 | } 185 | } 186 | 187 | 188 | // Placeholder text 189 | // -------------------------------------------------- 190 | 191 | @mixin placeholder($color: $input-color-placeholder, $text-indent: 0) { 192 | &::-moz-placeholder { // Firefox 19+ 193 | color: $color; 194 | } 195 | &:-ms-input-placeholder { 196 | color: $color; 197 | } 198 | &::-webkit-input-placeholder { 199 | color: $color; 200 | // Safari placeholder margin issue 201 | text-indent: $text-indent; 202 | } 203 | } 204 | 205 | 206 | // Text Mixins 207 | // -------------------------------------------------- 208 | 209 | @mixin text-size-adjust($value: none) { 210 | -webkit-text-size-adjust: $value; 211 | -moz-text-size-adjust: $value; 212 | text-size-adjust: $value; 213 | } 214 | @mixin tap-highlight-transparent() { 215 | -webkit-tap-highlight-color: rgba(0,0,0,0); 216 | -webkit-tap-highlight-color: transparent; // For some Androids 217 | } 218 | @mixin touch-callout($value: none) { 219 | -webkit-touch-callout: $value; 220 | } 221 | 222 | 223 | // Font Mixins 224 | // -------------------------------------------------- 225 | 226 | @mixin font-family-serif() { 227 | font-family: $serif-font-family; 228 | } 229 | @mixin font-family-sans-serif() { 230 | font-family: $sans-font-family; 231 | } 232 | @mixin font-family-monospace() { 233 | font-family: $mono-font-family; 234 | } 235 | @mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) { 236 | font-weight: $weight; 237 | font-size: $size; 238 | line-height: $line-height; 239 | } 240 | @mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) { 241 | @include font-family-serif(); 242 | @include font-shorthand($size, $weight, $line-height); 243 | } 244 | @mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) { 245 | @include font-family-sans-serif(); 246 | @include font-shorthand($size, $weight, $line-height); 247 | } 248 | @mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) { 249 | @include font-family-monospace(); 250 | @include font-shorthand($size, $weight, $line-height); 251 | } 252 | @mixin font-smoothing($font-smoothing) { 253 | -webkit-font-smoothing: $font-smoothing; 254 | font-smoothing: $font-smoothing; 255 | } 256 | 257 | 258 | // Appearance 259 | // -------------------------------------------------- 260 | 261 | @mixin appearance($val) { 262 | -webkit-appearance: $val; 263 | -moz-appearance: $val; 264 | appearance: $val; 265 | } 266 | 267 | 268 | // Border Radius Mixins 269 | // -------------------------------------------------- 270 | 271 | @mixin border-radius($radius) { 272 | -webkit-border-radius: $radius; 273 | border-radius: $radius; 274 | } 275 | 276 | // Single Corner Border Radius 277 | @mixin border-top-left-radius($radius) { 278 | -webkit-border-top-left-radius: $radius; 279 | border-top-left-radius: $radius; 280 | } 281 | @mixin border-top-right-radius($radius) { 282 | -webkit-border-top-right-radius: $radius; 283 | border-top-right-radius: $radius; 284 | } 285 | @mixin border-bottom-right-radius($radius) { 286 | -webkit-border-bottom-right-radius: $radius; 287 | border-bottom-right-radius: $radius; 288 | } 289 | @mixin border-bottom-left-radius($radius) { 290 | -webkit-border-bottom-left-radius: $radius; 291 | border-bottom-left-radius: $radius; 292 | } 293 | 294 | // Single Side Border Radius 295 | @mixin border-top-radius($radius) { 296 | @include border-top-right-radius($radius); 297 | @include border-top-left-radius($radius); 298 | } 299 | @mixin border-right-radius($radius) { 300 | @include border-top-right-radius($radius); 301 | @include border-bottom-right-radius($radius); 302 | } 303 | @mixin border-bottom-radius($radius) { 304 | @include border-bottom-right-radius($radius); 305 | @include border-bottom-left-radius($radius); 306 | } 307 | @mixin border-left-radius($radius) { 308 | @include border-top-left-radius($radius); 309 | @include border-bottom-left-radius($radius); 310 | } 311 | 312 | 313 | // Box shadows 314 | // -------------------------------------------------- 315 | 316 | @mixin box-shadow($shadow...) { 317 | -webkit-box-shadow: $shadow; 318 | box-shadow: $shadow; 319 | } 320 | 321 | 322 | // Transition Mixins 323 | // -------------------------------------------------- 324 | 325 | @mixin transition($transition...) { 326 | -webkit-transition: $transition; 327 | transition: $transition; 328 | } 329 | @mixin transition-delay($transition-delay) { 330 | -webkit-transition-delay: $transition-delay; 331 | transition-delay: $transition-delay; 332 | } 333 | @mixin transition-duration($transition-duration) { 334 | -webkit-transition-duration: $transition-duration; 335 | transition-duration: $transition-duration; 336 | } 337 | @mixin transition-timing-function($transition-timing) { 338 | -webkit-transition-timing-function: $transition-timing; 339 | transition-timing-function: $transition-timing; 340 | } 341 | @mixin transition-property($property) { 342 | -webkit-transition-property: $property; 343 | transition-property: $property; 344 | } 345 | @mixin transition-transform($properties...) { 346 | // special case cuz of transform vendor prefixes 347 | -webkit-transition: -webkit-transform $properties; 348 | transition: transform $properties; 349 | } 350 | 351 | 352 | // Animation Mixins 353 | // -------------------------------------------------- 354 | 355 | @mixin animation($animation) { 356 | -webkit-animation: $animation; 357 | animation: $animation; 358 | } 359 | @mixin animation-duration($duration) { 360 | -webkit-animation-duration: $duration; 361 | animation-duration: $duration; 362 | } 363 | @mixin animation-direction($direction) { 364 | -webkit-animation-direction: $direction; 365 | animation-direction: $direction; 366 | } 367 | @mixin animation-timing-function($animation-timing) { 368 | -webkit-animation-timing-function: $animation-timing; 369 | animation-timing-function: $animation-timing; 370 | } 371 | @mixin animation-fill-mode($fill-mode) { 372 | -webkit-animation-fill-mode: $fill-mode; 373 | animation-fill-mode: $fill-mode; 374 | } 375 | @mixin animation-name($name...) { 376 | -webkit-animation-name: $name; 377 | animation-name: $name; 378 | } 379 | @mixin animation-iteration-count($count) { 380 | -webkit-animation-iteration-count: $count; 381 | animation-iteration-count: $count; 382 | } 383 | 384 | 385 | // Transformation Mixins 386 | // -------------------------------------------------- 387 | 388 | @mixin rotate($degrees) { 389 | @include transform( rotate($degrees) ); 390 | } 391 | @mixin scale($ratio) { 392 | @include transform( scale($ratio) ); 393 | } 394 | @mixin translate($x, $y) { 395 | @include transform( translate($x, $y) ); 396 | } 397 | @mixin skew($x, $y) { 398 | @include transform( skew($x, $y) ); 399 | -webkit-backface-visibility: hidden; 400 | } 401 | @mixin translate3d($x, $y, $z) { 402 | @include transform( translate3d($x, $y, $z) ); 403 | } 404 | @mixin translateZ($z) { 405 | @include transform( translateZ($z) ); 406 | } 407 | @mixin transform($val) { 408 | -webkit-transform: $val; 409 | transform: $val; 410 | } 411 | 412 | @mixin transform-origin($left, $top) { 413 | -webkit-transform-origin: $left $top; 414 | transform-origin: $left $top; 415 | } 416 | 417 | 418 | // Backface visibility 419 | // -------------------------------------------------- 420 | // Prevent browsers from flickering when using CSS 3D transforms. 421 | // Default value is `visible`, but can be changed to `hidden 422 | 423 | @mixin backface-visibility($visibility){ 424 | -webkit-backface-visibility: $visibility; 425 | backface-visibility: $visibility; 426 | } 427 | 428 | 429 | // Background clipping 430 | // -------------------------------------------------- 431 | 432 | @mixin background-clip($clip) { 433 | -webkit-background-clip: $clip; 434 | background-clip: $clip; 435 | } 436 | 437 | 438 | // Background sizing 439 | // -------------------------------------------------- 440 | 441 | @mixin background-size($size) { 442 | -webkit-background-size: $size; 443 | background-size: $size; 444 | } 445 | 446 | 447 | // Box sizing 448 | // -------------------------------------------------- 449 | 450 | @mixin box-sizing($boxmodel) { 451 | -webkit-box-sizing: $boxmodel; 452 | -moz-box-sizing: $boxmodel; 453 | box-sizing: $boxmodel; 454 | } 455 | 456 | 457 | // User select 458 | // -------------------------------------------------- 459 | 460 | @mixin user-select($select) { 461 | -webkit-user-select: $select; 462 | -moz-user-select: $select; 463 | -ms-user-select: $select; 464 | user-select: $select; 465 | } 466 | 467 | 468 | // Content Columns 469 | // -------------------------------------------------- 470 | 471 | @mixin content-columns($columnCount, $columnGap: $grid-gutter-width) { 472 | -webkit-column-count: $columnCount; 473 | -moz-column-count: $columnCount; 474 | column-count: $columnCount; 475 | -webkit-column-gap: $columnGap; 476 | -moz-column-gap: $columnGap; 477 | column-gap: $columnGap; 478 | } 479 | 480 | 481 | // Flexbox Mixins 482 | // -------------------------------------------------- 483 | // http://philipwalton.github.io/solved-by-flexbox/ 484 | // https://github.com/philipwalton/solved-by-flexbox 485 | 486 | @mixin display-flex { 487 | display: -webkit-box; 488 | display: -webkit-flex; 489 | display: -moz-box; 490 | display: -moz-flex; 491 | display: -ms-flexbox; 492 | display: flex; 493 | } 494 | 495 | @mixin display-inline-flex { 496 | display: -webkit-inline-box; 497 | display: -webkit-inline-flex; 498 | display: -moz-inline-flex; 499 | display: -ms-inline-flexbox; 500 | display: inline-flex; 501 | } 502 | 503 | @mixin flex-direction($value: row) { 504 | @if $value == row-reverse { 505 | -webkit-box-direction: reverse; 506 | -webkit-box-orient: horizontal; 507 | } @else if $value == column { 508 | -webkit-box-direction: normal; 509 | -webkit-box-orient: vertical; 510 | } @else if $value == column-reverse { 511 | -webkit-box-direction: reverse; 512 | -webkit-box-orient: vertical; 513 | } @else { 514 | -webkit-box-direction: normal; 515 | -webkit-box-orient: horizontal; 516 | } 517 | -webkit-flex-direction: $value; 518 | -moz-flex-direction: $value; 519 | -ms-flex-direction: $value; 520 | flex-direction: $value; 521 | } 522 | 523 | @mixin flex-wrap($value: nowrap) { 524 | // No Webkit Box fallback. 525 | -webkit-flex-wrap: $value; 526 | -moz-flex-wrap: $value; 527 | @if $value == nowrap { 528 | -ms-flex-wrap: none; 529 | } @else { 530 | -ms-flex-wrap: $value; 531 | } 532 | flex-wrap: $value; 533 | } 534 | 535 | @mixin flex($fg: 1, $fs: null, $fb: null) { 536 | -webkit-box-flex: $fg; 537 | -webkit-flex: $fg $fs $fb; 538 | -moz-box-flex: $fg; 539 | -moz-flex: $fg $fs $fb; 540 | -ms-flex: $fg $fs $fb; 541 | flex: $fg $fs $fb; 542 | } 543 | 544 | @mixin flex-flow($values: (row nowrap)) { 545 | // No Webkit Box fallback. 546 | -webkit-flex-flow: $values; 547 | -moz-flex-flow: $values; 548 | -ms-flex-flow: $values; 549 | flex-flow: $values; 550 | } 551 | 552 | @mixin align-items($value: stretch) { 553 | @if $value == flex-start { 554 | -webkit-box-align: start; 555 | -ms-flex-align: start; 556 | } @else if $value == flex-end { 557 | -webkit-box-align: end; 558 | -ms-flex-align: end; 559 | } @else { 560 | -webkit-box-align: $value; 561 | -ms-flex-align: $value; 562 | } 563 | -webkit-align-items: $value; 564 | -moz-align-items: $value; 565 | align-items: $value; 566 | } 567 | 568 | @mixin align-self($value: auto) { 569 | -webkit-align-self: $value; 570 | -moz-align-self: $value; 571 | @if $value == flex-start { 572 | -ms-flex-item-align: start; 573 | } @else if $value == flex-end { 574 | -ms-flex-item-align: end; 575 | } @else { 576 | -ms-flex-item-align: $value; 577 | } 578 | align-self: $value; 579 | } 580 | 581 | @mixin align-content($value: stretch) { 582 | -webkit-align-content: $value; 583 | -moz-align-content: $value; 584 | @if $value == flex-start { 585 | -ms-flex-line-pack: start; 586 | } @else if $value == flex-end { 587 | -ms-flex-line-pack: end; 588 | } @else { 589 | -ms-flex-line-pack: $value; 590 | } 591 | align-content: $value; 592 | } 593 | 594 | @mixin justify-content($value: stretch) { 595 | @if $value == flex-start { 596 | -webkit-box-pack: start; 597 | -ms-flex-pack: start; 598 | } @else if $value == flex-end { 599 | -webkit-box-pack: end; 600 | -ms-flex-pack: end; 601 | } @else if $value == space-between { 602 | -webkit-box-pack: justify; 603 | -ms-flex-pack: justify; 604 | } @else { 605 | -webkit-box-pack: $value; 606 | -ms-flex-pack: $value; 607 | } 608 | -webkit-justify-content: $value; 609 | -moz-justify-content: $value; 610 | justify-content: $value; 611 | } 612 | 613 | @mixin flex-order($n) { 614 | -webkit-order: $n; 615 | -ms-flex-order: $n; 616 | order: $n; 617 | -webkit-box-ordinal-group: $n; 618 | } 619 | 620 | @mixin responsive-grid-break($selector, $max-width) { 621 | @media (max-width: $max-width) { 622 | #{$selector} { 623 | -webkit-box-direction: normal; 624 | -moz-box-direction: normal; 625 | -webkit-box-orient: vertical; 626 | -moz-box-orient: vertical; 627 | -webkit-flex-direction: column; 628 | -ms-flex-direction: column; 629 | flex-direction: column; 630 | 631 | .col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 { 632 | @include flex(1); 633 | margin-bottom: ($grid-padding-width * 3) / 2; 634 | margin-left: 0; 635 | max-width: 100%; 636 | width: 100%; 637 | } 638 | } 639 | } 640 | } 641 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_modal.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Modals 4 | * -------------------------------------------------- 5 | * Modals are independent windows that slide in from off-screen. 6 | */ 7 | 8 | .modal-backdrop, 9 | .modal-backdrop-bg { 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | z-index: $z-index-modal; 14 | width: 100%; 15 | height: 100%; 16 | } 17 | 18 | .modal-backdrop-bg { 19 | pointer-events: none; 20 | } 21 | 22 | .modal { 23 | display: block; 24 | position: absolute; 25 | top: 0; 26 | z-index: $z-index-modal; 27 | overflow: hidden; 28 | min-height: 100%; 29 | width: 100%; 30 | background-color: $modal-bg-color; 31 | } 32 | 33 | @media (min-width: $modal-inset-mode-break-point) { 34 | // inset mode is when the modal doesn't fill the entire 35 | // display but instead is centered within a large display 36 | .modal { 37 | top: $modal-inset-mode-top; 38 | right: $modal-inset-mode-right; 39 | bottom: $modal-inset-mode-bottom; 40 | left: $modal-inset-mode-left; 41 | min-height: $modal-inset-mode-min-height; 42 | width: (100% - $modal-inset-mode-left - $modal-inset-mode-right); 43 | } 44 | 45 | .modal.ng-leave-active { 46 | bottom: 0; 47 | } 48 | 49 | // remove ios header padding from inset header 50 | .platform-ios.platform-cordova .modal-wrapper .modal { 51 | .bar-header:not(.bar-subheader) { 52 | height: $bar-height; 53 | > * { 54 | margin-top: 0; 55 | } 56 | } 57 | .tabs-top > .tabs, 58 | .tabs.tabs-top { 59 | top: $bar-height; 60 | } 61 | .has-header, 62 | .bar-subheader { 63 | top: $bar-height; 64 | } 65 | .has-subheader { 66 | top: $bar-height + $bar-subheader-height; 67 | } 68 | .has-header.has-tabs-top { 69 | top: $bar-height + $tabs-height; 70 | } 71 | .has-header.has-subheader.has-tabs-top { 72 | top: $bar-height + $bar-subheader-height + $tabs-height; 73 | } 74 | } 75 | 76 | .modal-backdrop-bg { 77 | @include transition(opacity 300ms ease-in-out); 78 | background-color: $modal-backdrop-bg-active; 79 | opacity: 0; 80 | } 81 | 82 | .active .modal-backdrop-bg { 83 | opacity: 0.5; 84 | } 85 | } 86 | 87 | // disable clicks on all but the modal 88 | .modal-open { 89 | pointer-events: none; 90 | 91 | .modal, 92 | .modal-backdrop { 93 | pointer-events: auto; 94 | } 95 | // prevent clicks on modal when loading overlay is active though 96 | &.loading-active { 97 | .modal, 98 | .modal-backdrop { 99 | pointer-events: none; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_platform.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Platform 4 | * -------------------------------------------------- 5 | * Platform specific tweaks 6 | */ 7 | 8 | .platform-ios.platform-cordova { 9 | // iOS has a status bar which sits on top of the header. 10 | // Bump down everything to make room for it. However, if 11 | // if its in Cordova, and set to fullscreen, then disregard the bump. 12 | &:not(.fullscreen) { 13 | .bar-header:not(.bar-subheader) { 14 | height: $bar-height + $ios-statusbar-height; 15 | 16 | &.item-input-inset .item-input-wrapper { 17 | margin-top: 19px !important; 18 | } 19 | 20 | > * { 21 | margin-top: $ios-statusbar-height; 22 | } 23 | } 24 | .tabs-top > .tabs, 25 | .tabs.tabs-top { 26 | top: $bar-height + $ios-statusbar-height; 27 | } 28 | 29 | .has-header, 30 | .bar-subheader { 31 | top: $bar-height + $ios-statusbar-height; 32 | } 33 | .has-subheader { 34 | top: $bar-height + $bar-subheader-height + $ios-statusbar-height; 35 | } 36 | .has-header.has-tabs-top { 37 | top: $bar-height + $tabs-height + $ios-statusbar-height; 38 | } 39 | .has-header.has-subheader.has-tabs-top { 40 | top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height; 41 | } 42 | } 43 | .popover{ 44 | .bar-header:not(.bar-subheader) { 45 | height: $bar-height; 46 | &.item-input-inset .item-input-wrapper { 47 | margin-top: -1px; 48 | } 49 | > * { 50 | margin-top: 0; 51 | } 52 | } 53 | .has-header, 54 | .bar-subheader { 55 | top: $bar-height; 56 | } 57 | .has-subheader { 58 | top: $bar-height + $bar-subheader-height; 59 | } 60 | } 61 | &.status-bar-hide { 62 | // Cordova doesn't adjust the body height correctly, this makes up for it 63 | margin-bottom: 20px; 64 | } 65 | } 66 | 67 | @media (orientation:landscape) { 68 | .platform-ios.platform-browser.platform-ipad { 69 | position: fixed; // required for iPad 7 Safari 70 | } 71 | } 72 | 73 | .platform-c:not(.enable-transitions) * { 74 | // disable transitions on grade-c devices (Android 2) 75 | -webkit-transition: none !important; 76 | transition: none !important; 77 | } 78 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_popover.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Popovers 4 | * -------------------------------------------------- 5 | * Popovers are independent views which float over content 6 | */ 7 | 8 | .popover-backdrop { 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | z-index: $z-index-popover; 13 | width: 100%; 14 | height: 100%; 15 | background-color: $popover-backdrop-bg-inactive; 16 | 17 | &.active { 18 | background-color: $popover-backdrop-bg-active; 19 | } 20 | } 21 | 22 | .popover { 23 | position: absolute; 24 | top: 25%; 25 | left: 50%; 26 | z-index: $z-index-popover; 27 | display: block; 28 | margin-top: 12px; 29 | margin-left: -$popover-width / 2; 30 | height: $popover-height; 31 | width: $popover-width; 32 | background-color: $popover-bg-color; 33 | box-shadow: $popover-box-shadow; 34 | opacity: 0; 35 | 36 | .item:first-child { 37 | border-top: 0; 38 | } 39 | 40 | .item:last-child { 41 | border-bottom: 0; 42 | } 43 | 44 | &.popover-bottom { 45 | margin-top: -12px; 46 | } 47 | } 48 | 49 | 50 | // Set popover border-radius 51 | .popover, 52 | .popover .bar-header { 53 | border-radius: $popover-border-radius; 54 | } 55 | .popover .scroll-content { 56 | z-index: 1; 57 | margin: 2px 0; 58 | } 59 | .popover .bar-header { 60 | border-bottom-right-radius: 0; 61 | border-bottom-left-radius: 0; 62 | } 63 | .popover .has-header { 64 | border-top-right-radius: 0; 65 | border-top-left-radius: 0; 66 | } 67 | .popover-arrow { 68 | display: none; 69 | } 70 | 71 | 72 | // iOS Popover 73 | .platform-ios { 74 | 75 | .popover { 76 | box-shadow: $popover-box-shadow-ios; 77 | border-radius: $popover-border-radius-ios; 78 | } 79 | .popover .bar-header { 80 | @include border-top-radius($popover-border-radius-ios); 81 | } 82 | .popover .scroll-content { 83 | margin: 8px 0; 84 | border-radius: $popover-border-radius-ios; 85 | } 86 | .popover .scroll-content.has-header { 87 | margin-top: 0; 88 | } 89 | .popover-arrow { 90 | position: absolute; 91 | display: block; 92 | top: -17px; 93 | width: 30px; 94 | height: 19px; 95 | overflow: hidden; 96 | 97 | &:after { 98 | position: absolute; 99 | top: 12px; 100 | left: 5px; 101 | width: 20px; 102 | height: 20px; 103 | background-color: $popover-bg-color; 104 | border-radius: 3px; 105 | content: ''; 106 | @include rotate(-45deg); 107 | } 108 | } 109 | .popover-bottom .popover-arrow { 110 | top: auto; 111 | bottom: -10px; 112 | &:after { 113 | top: -6px; 114 | } 115 | } 116 | } 117 | 118 | 119 | // Android Popover 120 | .platform-android { 121 | 122 | .popover { 123 | margin-top: -32px; 124 | background-color: $popover-bg-color-android; 125 | box-shadow: $popover-box-shadow-android; 126 | 127 | .item { 128 | border-color: $popover-bg-color-android; 129 | background-color: $popover-bg-color-android; 130 | color: #4d4d4d; 131 | } 132 | &.popover-bottom { 133 | margin-top: 32px; 134 | } 135 | } 136 | 137 | .popover-backdrop, 138 | .popover-backdrop.active { 139 | background-color: transparent; 140 | } 141 | } 142 | 143 | 144 | // disable clicks on all but the popover 145 | .popover-open { 146 | pointer-events: none; 147 | 148 | .popover, 149 | .popover-backdrop { 150 | pointer-events: auto; 151 | } 152 | // prevent clicks on popover when loading overlay is active though 153 | &.loading-active { 154 | .popover, 155 | .popover-backdrop { 156 | pointer-events: none; 157 | } 158 | } 159 | } 160 | 161 | 162 | // wider popover on larger viewports 163 | @media (min-width: $popover-large-break-point) { 164 | .popover { 165 | width: $popover-large-width; 166 | margin-left: -$popover-large-width / 2; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_popup.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Popups 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .popup-container { 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | bottom: 0; 12 | right: 0; 13 | background: rgba(0,0,0,0); 14 | 15 | @include display-flex(); 16 | @include justify-content(center); 17 | @include align-items(center); 18 | 19 | z-index: $z-index-popup; 20 | 21 | // Start hidden 22 | visibility: hidden; 23 | &.popup-showing { 24 | visibility: visible; 25 | } 26 | 27 | &.popup-hidden .popup { 28 | @include animation-name(scaleOut); 29 | @include animation-duration($popup-leave-animation-duration); 30 | @include animation-timing-function(ease-in-out); 31 | @include animation-fill-mode(both); 32 | } 33 | 34 | &.active .popup { 35 | @include animation-name(superScaleIn); 36 | @include animation-duration($popup-enter-animation-duration); 37 | @include animation-timing-function(ease-in-out); 38 | @include animation-fill-mode(both); 39 | } 40 | 41 | .popup { 42 | width: $popup-width; 43 | max-width: 100%; 44 | max-height: 90%; 45 | 46 | border-radius: $popup-border-radius; 47 | background-color: $popup-background-color; 48 | 49 | @include display-flex(); 50 | @include flex-direction(column); 51 | } 52 | 53 | input, 54 | textarea { 55 | width: 100%; 56 | } 57 | } 58 | 59 | .popup-head { 60 | padding: 15px 10px; 61 | border-bottom: 1px solid #eee; 62 | text-align: center; 63 | } 64 | .popup-title { 65 | margin: 0; 66 | padding: 0; 67 | font-size: 15px; 68 | } 69 | .popup-sub-title { 70 | margin: 5px 0 0 0; 71 | padding: 0; 72 | font-weight: normal; 73 | font-size: 11px; 74 | } 75 | .popup-body { 76 | padding: 10px; 77 | overflow: auto; 78 | } 79 | 80 | .popup-buttons { 81 | @include display-flex(); 82 | @include flex-direction(row); 83 | padding: 10px; 84 | min-height: $popup-button-min-height + 20; 85 | 86 | .button { 87 | @include flex(1); 88 | display: block; 89 | min-height: $popup-button-min-height; 90 | border-radius: $popup-button-border-radius; 91 | line-height: $popup-button-line-height; 92 | 93 | margin-right: 5px; 94 | &:last-child { 95 | margin-right: 0px; 96 | } 97 | } 98 | } 99 | 100 | .popup-open { 101 | pointer-events: none; 102 | 103 | &.modal-open .modal { 104 | pointer-events: none; 105 | } 106 | 107 | .popup-backdrop, .popup { 108 | pointer-events: auto; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_progress.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Progress 4 | * -------------------------------------------------- 5 | */ 6 | 7 | progress { 8 | display: block; 9 | margin: $progress-margin; 10 | width: $progress-width; 11 | } 12 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_radio.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Radio Button Inputs 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .item-radio { 8 | padding: 0; 9 | 10 | &:hover { 11 | cursor: pointer; 12 | } 13 | } 14 | 15 | .item-radio .item-content { 16 | /* give some room to the right for the checkmark icon */ 17 | padding-right: $item-padding * 4; 18 | } 19 | 20 | .item-radio .radio-icon { 21 | /* checkmark icon will be hidden by default */ 22 | position: absolute; 23 | top: 0; 24 | right: 0; 25 | z-index: $z-index-item-radio; 26 | visibility: hidden; 27 | padding: $item-padding - 2; 28 | height: 100%; 29 | font-size: 24px; 30 | } 31 | 32 | .item-radio input { 33 | /* hide any radio button inputs elements (the ugly circles) */ 34 | position: absolute; 35 | left: -9999px; 36 | 37 | &:checked + .radio-content .item-content { 38 | /* style the item content when its checked */ 39 | background: #f7f7f7; 40 | } 41 | 42 | &:checked + .radio-content .radio-icon { 43 | /* show the checkmark icon when its checked */ 44 | visibility: visible; 45 | } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_range.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Range 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .range input{ 8 | display: inline-block; 9 | overflow: hidden; 10 | margin-top: 5px; 11 | margin-bottom: 5px; 12 | padding-right: 2px; 13 | padding-left: 1px; 14 | width: auto; 15 | height: $range-slider-height + 15; 16 | outline: none; 17 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $range-default-track-bg), color-stop(100%, $range-default-track-bg)); 18 | background: linear-gradient(to right, $range-default-track-bg 0%, $range-default-track-bg 100%); 19 | background-position: center; 20 | background-size: 99% $range-track-height; 21 | background-repeat: no-repeat; 22 | -webkit-appearance: none; 23 | 24 | &::-moz-focus-outer { 25 | /* hide the focus outline in Firefox */ 26 | border: 0; 27 | } 28 | 29 | &::-webkit-slider-thumb { 30 | position: relative; 31 | width: $range-slider-width; 32 | height: $range-slider-height; 33 | border-radius: $range-slider-border-radius; 34 | background-color: $toggle-handle-off-bg-color; 35 | box-shadow: $range-slider-box-shadow; 36 | cursor: pointer; 37 | -webkit-appearance: none; 38 | border: 0; 39 | } 40 | 41 | &::-webkit-slider-thumb:before{ 42 | /* what creates the colorful line on the left side of the slider */ 43 | position: absolute; 44 | top: ($range-slider-height / 2) - ($range-track-height / 2); 45 | left: -2001px; 46 | width: 2000px; 47 | height: $range-track-height; 48 | background: $dark; 49 | content: ' '; 50 | } 51 | 52 | &::-webkit-slider-thumb:after { 53 | /* create a larger (but hidden) hit area */ 54 | position: absolute; 55 | top: -15px; 56 | left: -15px; 57 | padding: 30px; 58 | content: ' '; 59 | //background: red; 60 | //opacity: .5; 61 | } 62 | &::-ms-fill-lower{ 63 | height: $range-track-height; 64 | background:$dark; 65 | } 66 | /* 67 | &::-ms-track{ 68 | background: transparent; 69 | border-color: transparent; 70 | border-width: 11px 0 16px; 71 | color:transparent; 72 | margin-top:20px; 73 | } 74 | &::-ms-thumb { 75 | width: $range-slider-width; 76 | height: $range-slider-height; 77 | border-radius: $range-slider-border-radius; 78 | background-color: $toggle-handle-off-bg-color; 79 | border-color:$toggle-handle-off-bg-color; 80 | box-shadow: $range-slider-box-shadow; 81 | margin-left:1px; 82 | margin-right:1px; 83 | outline:none; 84 | } 85 | &::-ms-fill-upper { 86 | height: $range-track-height; 87 | background:$range-default-track-bg; 88 | } 89 | */ 90 | } 91 | 92 | .range { 93 | @include display-flex(); 94 | @include align-items(center); 95 | padding: 2px 11px; 96 | 97 | &.range-light { 98 | input { @include range-style($range-light-track-bg); } 99 | } 100 | &.range-stable { 101 | input { @include range-style($range-stable-track-bg); } 102 | } 103 | &.range-positive { 104 | input { @include range-style($range-positive-track-bg); } 105 | } 106 | &.range-calm { 107 | input { @include range-style($range-calm-track-bg); } 108 | } 109 | &.range-balanced { 110 | input { @include range-style($range-balanced-track-bg); } 111 | } 112 | &.range-assertive { 113 | input { @include range-style($range-assertive-track-bg); } 114 | } 115 | &.range-energized { 116 | input { @include range-style($range-energized-track-bg); } 117 | } 118 | &.range-royal { 119 | input { @include range-style($range-royal-track-bg); } 120 | } 121 | &.range-dark { 122 | input { @include range-style($range-dark-track-bg); } 123 | } 124 | } 125 | 126 | .range .icon { 127 | @include flex(0); 128 | display: block; 129 | min-width: $range-icon-size; 130 | text-align: center; 131 | font-size: $range-icon-size; 132 | } 133 | 134 | .range input { 135 | @include flex(1); 136 | display: block; 137 | margin-right: 10px; 138 | margin-left: 10px; 139 | } 140 | 141 | .range-label { 142 | @include flex(0, 0, auto); 143 | display: block; 144 | white-space: nowrap; 145 | } 146 | 147 | .range-label:first-child { 148 | padding-left: 5px; 149 | } 150 | .range input + .range-label { 151 | padding-right: 5px; 152 | padding-left: 0; 153 | } 154 | 155 | // WP range height must be auto 156 | .platform-windowsphone{ 157 | .range input{ 158 | height:auto; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_refresher.scss: -------------------------------------------------------------------------------- 1 | 2 | // Scroll refresher (for pull to refresh) 3 | .scroll-refresher { 4 | position: absolute; 5 | top: -60px; 6 | right: 0; 7 | left: 0; 8 | overflow: hidden; 9 | margin: auto; 10 | height: 60px; 11 | .ionic-refresher-content { 12 | position: absolute; 13 | bottom: 15px; 14 | left: 0; 15 | width: 100%; 16 | color: $scroll-refresh-icon-color; 17 | text-align: center; 18 | 19 | font-size: 30px; 20 | 21 | .text-refreshing, 22 | .text-pulling { 23 | font-size: 16px; 24 | line-height: 16px; 25 | } 26 | &.ionic-refresher-with-text { 27 | bottom: 10px; 28 | } 29 | } 30 | 31 | .icon-refreshing, 32 | .icon-pulling { 33 | width: 100%; 34 | -webkit-backface-visibility: hidden; 35 | backface-visibility: hidden; 36 | -webkit-transform-style: preserve-3d; 37 | transform-style: preserve-3d; 38 | } 39 | .icon-pulling { 40 | @include animation-name(refresh-spin-back); 41 | @include animation-duration(200ms); 42 | @include animation-timing-function(linear); 43 | @include animation-fill-mode(none); 44 | -webkit-transform: translate3d(0,0,0) rotate(0deg); 45 | transform: translate3d(0,0,0) rotate(0deg); 46 | } 47 | .icon-refreshing, 48 | .text-refreshing { 49 | display: none; 50 | } 51 | .icon-refreshing { 52 | @include animation-duration(1.5s); 53 | } 54 | 55 | &.active { 56 | .icon-pulling:not(.pulling-rotation-disabled) { 57 | @include animation-name(refresh-spin); 58 | -webkit-transform: translate3d(0,0,0) rotate(-180deg); 59 | transform: translate3d(0,0,0) rotate(-180deg); 60 | } 61 | &.refreshing { 62 | @include transition(-webkit-transform .2s); 63 | @include transition(transform .2s); 64 | -webkit-transform: scale(1,1); 65 | transform: scale(1,1); 66 | 67 | .icon-pulling, 68 | .text-pulling { 69 | display: none; 70 | } 71 | .icon-refreshing, 72 | .text-refreshing { 73 | display: block; 74 | } 75 | &.refreshing-tail { 76 | -webkit-transform: scale(0,0); 77 | transform: scale(0,0); 78 | } 79 | } 80 | } 81 | } 82 | .overflow-scroll > .scroll{ 83 | &.overscroll{ 84 | position:fixed; 85 | right: 0; 86 | left: 0; 87 | } 88 | -webkit-overflow-scrolling:touch; 89 | width:100%; 90 | } 91 | 92 | .overflow-scroll.padding > .scroll.overscroll{ 93 | padding: 10px; 94 | } 95 | @-webkit-keyframes refresh-spin { 96 | 0% { -webkit-transform: translate3d(0,0,0) rotate(0); } 97 | 100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } 98 | } 99 | 100 | @keyframes refresh-spin { 101 | 0% { transform: translate3d(0,0,0) rotate(0); } 102 | 100% { transform: translate3d(0,0,0) rotate(180deg); } 103 | } 104 | 105 | @-webkit-keyframes refresh-spin-back { 106 | 0% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } 107 | 100% { -webkit-transform: translate3d(0,0,0) rotate(0); } 108 | } 109 | 110 | @keyframes refresh-spin-back { 111 | 0% { transform: translate3d(0,0,0) rotate(180deg); } 112 | 100% { transform: translate3d(0,0,0) rotate(0); } 113 | } 114 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_reset.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Resets 4 | * -------------------------------------------------- 5 | * Adapted from normalize.css and some reset.css. We don't care even one 6 | * bit about old IE, so we don't need any hacks for that in here. 7 | * 8 | * There are probably other things we could remove here, as well. 9 | * 10 | * normalize.css v2.1.2 | MIT License | git.io/normalize 11 | 12 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 13 | * http://cssreset.com 14 | */ 15 | 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, i, u, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, fieldset, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | vertical-align: baseline; 33 | font: inherit; 34 | font-size: 100%; 35 | } 36 | 37 | ol, ul { 38 | list-style: none; 39 | } 40 | blockquote, q { 41 | quotes: none; 42 | } 43 | blockquote:before, blockquote:after, 44 | q:before, q:after { 45 | content: ''; 46 | content: none; 47 | } 48 | 49 | /** 50 | * Prevent modern browsers from displaying `audio` without controls. 51 | * Remove excess height in iOS 5 devices. 52 | */ 53 | 54 | audio:not([controls]) { 55 | display: none; 56 | height: 0; 57 | } 58 | 59 | /** 60 | * Hide the `template` element in IE, Safari, and Firefox < 22. 61 | */ 62 | 63 | [hidden], 64 | template { 65 | display: none; 66 | } 67 | 68 | script { 69 | display: none !important; 70 | } 71 | 72 | /* ========================================================================== 73 | Base 74 | ========================================================================== */ 75 | 76 | /** 77 | * 1. Set default font family to sans-serif. 78 | * 2. Prevent iOS text size adjust after orientation change, without disabling 79 | * user zoom. 80 | */ 81 | 82 | html { 83 | @include user-select(none); 84 | font-family: sans-serif; /* 1 */ 85 | -webkit-text-size-adjust: 100%; 86 | -ms-text-size-adjust: 100%; /* 2 */ 87 | -webkit-text-size-adjust: 100%; /* 2 */ 88 | } 89 | 90 | /** 91 | * Remove default margin. 92 | */ 93 | 94 | body { 95 | margin: 0; 96 | line-height: 1; 97 | } 98 | 99 | 100 | /** 101 | * Remove default outlines. 102 | */ 103 | a, 104 | button, 105 | :focus, 106 | a:focus, 107 | button:focus, 108 | a:active, 109 | a:hover { 110 | outline: 0; 111 | } 112 | 113 | /* * 114 | * Remove tap highlight color 115 | */ 116 | 117 | a { 118 | -webkit-user-drag: none; 119 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 120 | -webkit-tap-highlight-color: transparent; 121 | 122 | &[href]:hover { 123 | cursor: pointer; 124 | } 125 | } 126 | 127 | /* ========================================================================== 128 | Typography 129 | ========================================================================== */ 130 | 131 | 132 | /** 133 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 134 | */ 135 | 136 | b, 137 | strong { 138 | font-weight: bold; 139 | } 140 | 141 | /** 142 | * Address styling not present in Safari 5 and Chrome. 143 | */ 144 | 145 | dfn { 146 | font-style: italic; 147 | } 148 | 149 | /** 150 | * Address differences between Firefox and other browsers. 151 | */ 152 | 153 | hr { 154 | -moz-box-sizing: content-box; 155 | box-sizing: content-box; 156 | height: 0; 157 | } 158 | 159 | 160 | /** 161 | * Correct font family set oddly in Safari 5 and Chrome. 162 | */ 163 | 164 | code, 165 | kbd, 166 | pre, 167 | samp { 168 | font-size: 1em; 169 | font-family: monospace, serif; 170 | } 171 | 172 | /** 173 | * Improve readability of pre-formatted text in all browsers. 174 | */ 175 | 176 | pre { 177 | white-space: pre-wrap; 178 | } 179 | 180 | /** 181 | * Set consistent quote types. 182 | */ 183 | 184 | q { 185 | quotes: "\201C" "\201D" "\2018" "\2019"; 186 | } 187 | 188 | /** 189 | * Address inconsistent and variable font size in all browsers. 190 | */ 191 | 192 | small { 193 | font-size: 80%; 194 | } 195 | 196 | /** 197 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 198 | */ 199 | 200 | sub, 201 | sup { 202 | position: relative; 203 | vertical-align: baseline; 204 | font-size: 75%; 205 | line-height: 0; 206 | } 207 | 208 | sup { 209 | top: -0.5em; 210 | } 211 | 212 | sub { 213 | bottom: -0.25em; 214 | } 215 | 216 | /** 217 | * Define consistent border, margin, and padding. 218 | */ 219 | 220 | fieldset { 221 | margin: 0 2px; 222 | padding: 0.35em 0.625em 0.75em; 223 | border: 1px solid #c0c0c0; 224 | } 225 | 226 | /** 227 | * 1. Correct `color` not being inherited in IE 8/9. 228 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 229 | */ 230 | 231 | legend { 232 | padding: 0; /* 2 */ 233 | border: 0; /* 1 */ 234 | } 235 | 236 | /** 237 | * 1. Correct font family not being inherited in all browsers. 238 | * 2. Correct font size not being inherited in all browsers. 239 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 240 | * 4. Remove any default :focus styles 241 | * 5. Make sure webkit font smoothing is being inherited 242 | * 6. Remove default gradient in Android Firefox / FirefoxOS 243 | */ 244 | 245 | button, 246 | input, 247 | select, 248 | textarea { 249 | margin: 0; /* 3 */ 250 | font-size: 100%; /* 2 */ 251 | font-family: inherit; /* 1 */ 252 | outline-offset: 0; /* 4 */ 253 | outline-style: none; /* 4 */ 254 | outline-width: 0; /* 4 */ 255 | -webkit-font-smoothing: inherit; /* 5 */ 256 | background-image: none; /* 6 */ 257 | } 258 | 259 | /** 260 | * Address Firefox 4+ setting `line-height` on `input` using `importnt` in 261 | * the UA stylesheet. 262 | */ 263 | 264 | button, 265 | input { 266 | line-height: normal; 267 | } 268 | 269 | /** 270 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 271 | * All other form control elements do not inherit `text-transform` values. 272 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 273 | * Correct `select` style inheritance in Firefox 4+ and Opera. 274 | */ 275 | 276 | button, 277 | select { 278 | text-transform: none; 279 | } 280 | 281 | /** 282 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 283 | * and `video` controls. 284 | * 2. Correct inability to style clickable `input` types in iOS. 285 | * 3. Improve usability and consistency of cursor style between image-type 286 | * `input` and others. 287 | */ 288 | 289 | button, 290 | html input[type="button"], /* 1 */ 291 | input[type="reset"], 292 | input[type="submit"] { 293 | cursor: pointer; /* 3 */ 294 | -webkit-appearance: button; /* 2 */ 295 | } 296 | 297 | /** 298 | * Re-set default cursor for disabled elements. 299 | */ 300 | 301 | button[disabled], 302 | html input[disabled] { 303 | cursor: default; 304 | } 305 | 306 | /** 307 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 308 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 309 | * (include `-moz` to future-proof). 310 | */ 311 | 312 | input[type="search"] { 313 | -webkit-box-sizing: content-box; /* 2 */ 314 | -moz-box-sizing: content-box; 315 | box-sizing: content-box; 316 | -webkit-appearance: textfield; /* 1 */ 317 | } 318 | 319 | /** 320 | * Remove inner padding and search cancel button in Safari 5 and Chrome 321 | * on OS X. 322 | */ 323 | 324 | input[type="search"]::-webkit-search-cancel-button, 325 | input[type="search"]::-webkit-search-decoration { 326 | -webkit-appearance: none; 327 | } 328 | 329 | /** 330 | * Remove inner padding and border in Firefox 4+. 331 | */ 332 | 333 | button::-moz-focus-inner, 334 | input::-moz-focus-inner { 335 | padding: 0; 336 | border: 0; 337 | } 338 | 339 | /** 340 | * 1. Remove default vertical scrollbar in IE 8/9. 341 | * 2. Improve readability and alignment in all browsers. 342 | */ 343 | 344 | textarea { 345 | overflow: auto; /* 1 */ 346 | vertical-align: top; /* 2 */ 347 | } 348 | 349 | 350 | img { 351 | -webkit-user-drag: none; 352 | } 353 | 354 | /* ========================================================================== 355 | Tables 356 | ========================================================================== */ 357 | 358 | /** 359 | * Remove most spacing between table cells. 360 | */ 361 | 362 | table { 363 | border-spacing: 0; 364 | border-collapse: collapse; 365 | } 366 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_scaffolding.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Scaffolding 4 | * -------------------------------------------------- 5 | */ 6 | 7 | *, 8 | *:before, 9 | *:after { 10 | @include box-sizing(border-box); 11 | } 12 | 13 | html { 14 | overflow: hidden; 15 | -ms-touch-action: pan-y; 16 | touch-action: pan-y; 17 | } 18 | 19 | body, 20 | .ionic-body { 21 | @include touch-callout(none); 22 | @include font-smoothing(antialiased); 23 | @include text-size-adjust(none); 24 | @include tap-highlight-transparent(); 25 | @include user-select(none); 26 | 27 | top: 0; 28 | right: 0; 29 | bottom: 0; 30 | left: 0; 31 | overflow: hidden; 32 | 33 | margin: 0; 34 | padding: 0; 35 | 36 | color: $base-color; 37 | word-wrap: break-word; 38 | font-size: $font-size-base; 39 | font-family: -apple-system; 40 | font-family: $font-family-base; 41 | line-height: $line-height-computed; 42 | text-rendering: optimizeLegibility; 43 | -webkit-backface-visibility: hidden; 44 | -webkit-user-drag: none; 45 | -ms-content-zooming: none; 46 | } 47 | 48 | body.grade-b, 49 | body.grade-c { 50 | // disable optimizeLegibility for low end devices 51 | text-rendering: auto; 52 | } 53 | 54 | .content { 55 | // used for content areas not using the content directive 56 | position: relative; 57 | } 58 | 59 | .scroll-content { 60 | position: absolute; 61 | top: 0; 62 | right: 0; 63 | bottom: 0; 64 | left: 0; 65 | overflow: hidden; 66 | 67 | // Hide the top border if any 68 | margin-top: -1px; 69 | 70 | // Prevents any distortion of lines 71 | padding-top: 1px; 72 | margin-bottom: -1px; 73 | 74 | width: auto; 75 | height: auto; 76 | } 77 | 78 | .menu .scroll-content.scroll-content-false{ 79 | z-index: $z-index-scroll-content-false; 80 | } 81 | 82 | .scroll-view { 83 | position: relative; 84 | display: block; 85 | overflow: hidden; 86 | 87 | &.overflow-scroll { 88 | position: relative; 89 | } 90 | 91 | &.scroll-x { overflow-x: scroll; overflow-y: hidden; } 92 | &.scroll-y { overflow-x: hidden; overflow-y: scroll; } 93 | &.scroll-xy { overflow-x: scroll; overflow-y: scroll; } 94 | 95 | // Hide the top border if any 96 | margin-top: -1px; 97 | } 98 | 99 | /** 100 | * Scroll is the scroll view component available for complex and custom 101 | * scroll view functionality. 102 | */ 103 | .scroll { 104 | @include user-select(none); 105 | @include touch-callout(none); 106 | @include text-size-adjust(none); 107 | @include transform-origin(left, top); 108 | } 109 | /** 110 | * Set ms-viewport to prevent MS "page squish" and allow fluid scrolling 111 | * https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx 112 | */ 113 | @-ms-viewport { width: device-width; } 114 | 115 | // Scroll bar styles 116 | .scroll-bar { 117 | position: absolute; 118 | z-index: $z-index-scroll-bar; 119 | } 120 | // hide the scroll-bar during animations 121 | .ng-animate .scroll-bar { 122 | visibility: hidden; 123 | } 124 | .scroll-bar-h { 125 | right: 2px; 126 | bottom: 3px; 127 | left: 2px; 128 | height: 3px; 129 | 130 | .scroll-bar-indicator { 131 | height: 100%; 132 | } 133 | } 134 | 135 | .scroll-bar-v { 136 | top: 2px; 137 | right: 3px; 138 | bottom: 2px; 139 | width: 3px; 140 | 141 | .scroll-bar-indicator { 142 | width: 100%; 143 | } 144 | } 145 | .scroll-bar-indicator { 146 | position: absolute; 147 | border-radius: 4px; 148 | background: rgba(0,0,0,0.3); 149 | opacity: 1; 150 | @include transition(opacity .3s linear); 151 | 152 | &.scroll-bar-fade-out { 153 | opacity: 0; 154 | } 155 | } 156 | .platform-android .scroll-bar-indicator { 157 | // android doesn't have rounded ends on scrollbar 158 | border-radius: 0; 159 | } 160 | .grade-b .scroll-bar-indicator, 161 | .grade-c .scroll-bar-indicator { 162 | // disable rgba background and border radius for low end devices 163 | background: #aaa; 164 | 165 | &.scroll-bar-fade-out { 166 | @include transition(none); 167 | } 168 | } 169 | 170 | ion-infinite-scroll { 171 | height: 60px; 172 | width: 100%; 173 | display: block; 174 | 175 | @include display-flex(); 176 | @include flex-direction(row); 177 | @include justify-content(center); 178 | @include align-items(center); 179 | 180 | .icon { 181 | color: #666666; 182 | font-size: 30px; 183 | color: $scroll-refresh-icon-color; 184 | } 185 | &:not(.active){ 186 | .spinner, 187 | .icon:before{ 188 | display:none; 189 | } 190 | } 191 | } 192 | 193 | .overflow-scroll { 194 | overflow-x: hidden; 195 | overflow-y: scroll; 196 | -webkit-overflow-scrolling: touch; 197 | 198 | // Make sure the scrollbar doesn't take up layout space on edge 199 | -ms-overflow-style: -ms-autohiding-scrollbar; 200 | 201 | top: 0; 202 | right: 0; 203 | bottom: 0; 204 | left: 0; 205 | position: absolute; 206 | 207 | &.pane { 208 | overflow-x: hidden; 209 | overflow-y: scroll; 210 | } 211 | 212 | .scroll { 213 | position: static; 214 | height: 100%; 215 | -webkit-transform: translate3d(0, 0, 0); // fix iOS bug where relative children of scroller disapear while scrolling. see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela 216 | } 217 | } 218 | 219 | 220 | // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. 221 | // Note: For these to work, content must come after both bars in the markup 222 | /* If you change these, change platform.scss as well */ 223 | .has-header { 224 | top: $bar-height; 225 | } 226 | // Force no header 227 | .no-header { 228 | top: 0; 229 | } 230 | 231 | .has-subheader { 232 | top: $bar-height + $bar-subheader-height; 233 | } 234 | .has-tabs-top { 235 | top: $bar-height + $tabs-height; 236 | } 237 | .has-header.has-subheader.has-tabs-top { 238 | top: $bar-height + $bar-subheader-height + $tabs-height; 239 | } 240 | 241 | .has-footer { 242 | bottom: $bar-footer-height; 243 | } 244 | .has-subfooter { 245 | bottom: $bar-footer-height + $bar-subfooter-height; 246 | } 247 | 248 | .has-tabs, 249 | .bar-footer.has-tabs { 250 | bottom: $tabs-height; 251 | &.pane{ 252 | bottom: $tabs-height; 253 | height:auto; 254 | } 255 | } 256 | 257 | .bar-subfooter.has-tabs { 258 | bottom: $tabs-height + $bar-footer-height; 259 | } 260 | 261 | .has-footer.has-tabs { 262 | bottom: $tabs-height + $bar-footer-height; 263 | } 264 | 265 | // A full screen section with a solid background 266 | .pane { 267 | @include translate3d(0,0,0); 268 | @include transition-duration(0); 269 | z-index: $z-index-pane; 270 | } 271 | .view { 272 | z-index: $z-index-view; 273 | } 274 | .pane, 275 | .view { 276 | position: absolute; 277 | top: 0; 278 | right: 0; 279 | bottom: 0; 280 | left: 0; 281 | width: 100%; 282 | height: 100%; 283 | background-color: $base-background-color; 284 | overflow: hidden; 285 | } 286 | .view-container { 287 | position: absolute; 288 | display: block; 289 | width: 100%; 290 | height: 100%; 291 | } 292 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_select.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Select 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .item-select { 8 | position: relative; 9 | 10 | select { 11 | @include appearance(none); 12 | position: absolute; 13 | top: 0; 14 | bottom: 0; 15 | right: 0; 16 | padding: 0 ($item-padding * 3) 0 $item-padding; 17 | max-width: 65%; 18 | 19 | border: none; 20 | background: $item-default-bg; 21 | color: #333; 22 | 23 | // hack to hide default dropdown arrow in FF 24 | text-indent: .01px; 25 | text-overflow: ''; 26 | 27 | white-space: nowrap; 28 | font-size: $font-size-base; 29 | 30 | cursor: pointer; 31 | direction: rtl; // right align the select text 32 | } 33 | 34 | select::-ms-expand { 35 | // hide default dropdown arrow in IE 36 | display: none; 37 | } 38 | 39 | option { 40 | direction: ltr; 41 | } 42 | 43 | &:after { 44 | position: absolute; 45 | top: 50%; 46 | right: $item-padding; 47 | margin-top: -3px; 48 | width: 0; 49 | height: 0; 50 | border-top: 5px solid; 51 | border-right: 5px solid rgba(0, 0, 0, 0); 52 | border-left: 5px solid rgba(0, 0, 0, 0); 53 | color: #999; 54 | content: ""; 55 | pointer-events: none; 56 | } 57 | &.item-light { 58 | select{ 59 | background:$item-light-bg; 60 | color:$item-light-text; 61 | } 62 | } 63 | &.item-stable { 64 | select{ 65 | background:$item-stable-bg; 66 | color:$item-stable-text; 67 | } 68 | &:after, .input-label{ 69 | color:darken($item-stable-border,30%); 70 | } 71 | } 72 | &.item-positive { 73 | select{ 74 | background:$item-positive-bg; 75 | color:$item-positive-text; 76 | } 77 | &:after, .input-label{ 78 | color:$item-positive-text; 79 | } 80 | } 81 | &.item-calm { 82 | select{ 83 | background:$item-calm-bg; 84 | color:$item-calm-text; 85 | } 86 | &:after, .input-label{ 87 | color:$item-calm-text; 88 | } 89 | } 90 | &.item-assertive { 91 | select{ 92 | background:$item-assertive-bg; 93 | color:$item-assertive-text; 94 | } 95 | &:after, .input-label{ 96 | color:$item-assertive-text; 97 | } 98 | } 99 | &.item-balanced { 100 | select{ 101 | background:$item-balanced-bg; 102 | color:$item-balanced-text; 103 | } 104 | &:after, .input-label{ 105 | color:$item-balanced-text; 106 | } 107 | } 108 | &.item-energized { 109 | select{ 110 | background:$item-energized-bg; 111 | color:$item-energized-text; 112 | } 113 | &:after, .input-label{ 114 | color:$item-energized-text; 115 | } 116 | } 117 | &.item-royal { 118 | select{ 119 | background:$item-royal-bg; 120 | color:$item-royal-text; 121 | } 122 | &:after, .input-label{ 123 | color:$item-royal-text; 124 | } 125 | } 126 | &.item-dark { 127 | select{ 128 | background:$item-dark-bg; 129 | color:$item-dark-text; 130 | } 131 | &:after, .input-label{ 132 | color:$item-dark-text; 133 | } 134 | } 135 | } 136 | 137 | select { 138 | &[multiple], 139 | &[size] { 140 | height: auto; 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_slide-box.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Slide Box 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .slider { 8 | position: relative; 9 | visibility: hidden; 10 | // Make sure items don't scroll over ever 11 | overflow: hidden; 12 | } 13 | 14 | .slider-slides { 15 | position: relative; 16 | height: 100%; 17 | } 18 | 19 | .slider-slide { 20 | position: relative; 21 | display: block; 22 | float: left; 23 | width: 100%; 24 | height: 100%; 25 | vertical-align: top; 26 | } 27 | 28 | .slider-slide-image { 29 | > img { 30 | width: 100%; 31 | } 32 | } 33 | 34 | .slider-pager { 35 | position: absolute; 36 | bottom: 20px; 37 | z-index: $z-index-slider-pager; 38 | width: 100%; 39 | height: 15px; 40 | text-align: center; 41 | 42 | .slider-pager-page { 43 | display: inline-block; 44 | margin: 0px 3px; 45 | width: 15px; 46 | color: #000; 47 | text-decoration: none; 48 | 49 | opacity: 0.3; 50 | 51 | &.active { 52 | @include transition(opacity 0.4s ease-in); 53 | opacity: 1; 54 | } 55 | } 56 | } 57 | 58 | //Disable animate service animations 59 | .slider-slide, 60 | .slider-pager-page { 61 | &.ng-enter, 62 | &.ng-leave, 63 | &.ng-animate { 64 | -webkit-transition: none !important; 65 | transition: none !important; 66 | } 67 | &.ng-animate { 68 | -webkit-animation: none 0s; 69 | animation: none 0s; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_slides.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 3.2.7 3 | * Most modern mobile touch slider and framework with hardware accelerated transitions 4 | * 5 | * http://www.idangero.us/swiper/ 6 | * 7 | * Copyright 2015, Vladimir Kharlampidi 8 | * The iDangero.us 9 | * http://www.idangero.us/ 10 | * 11 | * Licensed under MIT 12 | * 13 | * Released on: December 7, 2015 14 | */ 15 | .swiper-container { 16 | margin: 0 auto; 17 | position: relative; 18 | overflow: hidden; 19 | /* Fix of Webkit flickering */ 20 | z-index: 1; 21 | } 22 | .swiper-container-no-flexbox .swiper-slide { 23 | float: left; 24 | } 25 | .swiper-container-vertical > .swiper-wrapper { 26 | -webkit-box-orient: vertical; 27 | -moz-box-orient: vertical; 28 | -ms-flex-direction: column; 29 | -webkit-flex-direction: column; 30 | flex-direction: column; 31 | } 32 | .swiper-wrapper { 33 | position: relative; 34 | width: 100%; 35 | height: 100%; 36 | z-index: 1; 37 | display: -webkit-box; 38 | display: -moz-box; 39 | display: -ms-flexbox; 40 | display: -webkit-flex; 41 | display: flex; 42 | -webkit-transition-property: -webkit-transform; 43 | -moz-transition-property: -moz-transform; 44 | -o-transition-property: -o-transform; 45 | -ms-transition-property: -ms-transform; 46 | transition-property: transform; 47 | -webkit-box-sizing: content-box; 48 | -moz-box-sizing: content-box; 49 | box-sizing: content-box; 50 | } 51 | .swiper-container-android .swiper-slide, 52 | .swiper-wrapper { 53 | -webkit-transform: translate3d(0px, 0, 0); 54 | -moz-transform: translate3d(0px, 0, 0); 55 | -o-transform: translate(0px, 0px); 56 | -ms-transform: translate3d(0px, 0, 0); 57 | transform: translate3d(0px, 0, 0); 58 | } 59 | .swiper-container-multirow > .swiper-wrapper { 60 | -webkit-box-lines: multiple; 61 | -moz-box-lines: multiple; 62 | -ms-flex-wrap: wrap; 63 | -webkit-flex-wrap: wrap; 64 | flex-wrap: wrap; 65 | } 66 | .swiper-container-free-mode > .swiper-wrapper { 67 | -webkit-transition-timing-function: ease-out; 68 | -moz-transition-timing-function: ease-out; 69 | -ms-transition-timing-function: ease-out; 70 | -o-transition-timing-function: ease-out; 71 | transition-timing-function: ease-out; 72 | margin: 0 auto; 73 | } 74 | .swiper-slide { 75 | display: block; 76 | -webkit-flex-shrink: 0; 77 | -ms-flex: 0 0 auto; 78 | flex-shrink: 0; 79 | width: 100%; 80 | height: 100%; 81 | position: relative; 82 | } 83 | /* Auto Height */ 84 | .swiper-container-autoheight, 85 | .swiper-container-autoheight .swiper-slide { 86 | height: auto; 87 | } 88 | .swiper-container-autoheight .swiper-wrapper { 89 | -webkit-box-align: start; 90 | -ms-flex-align: start; 91 | -webkit-align-items: flex-start; 92 | align-items: flex-start; 93 | -webkit-transition-property: -webkit-transform, height; 94 | -moz-transition-property: -moz-transform; 95 | -o-transition-property: -o-transform; 96 | -ms-transition-property: -ms-transform; 97 | transition-property: transform, height; 98 | } 99 | /* a11y */ 100 | .swiper-container .swiper-notification { 101 | position: absolute; 102 | left: 0; 103 | top: 0; 104 | pointer-events: none; 105 | opacity: 0; 106 | z-index: -1000; 107 | } 108 | /* IE10 Windows Phone 8 Fixes */ 109 | .swiper-wp8-horizontal { 110 | -ms-touch-action: pan-y; 111 | touch-action: pan-y; 112 | } 113 | .swiper-wp8-vertical { 114 | -ms-touch-action: pan-x; 115 | touch-action: pan-x; 116 | } 117 | /* Arrows */ 118 | .swiper-button-prev, 119 | .swiper-button-next { 120 | position: absolute; 121 | top: 50%; 122 | width: 27px; 123 | height: 44px; 124 | margin-top: -22px; 125 | z-index: 10; 126 | cursor: pointer; 127 | -moz-background-size: 27px 44px; 128 | -webkit-background-size: 27px 44px; 129 | background-size: 27px 44px; 130 | background-position: center; 131 | background-repeat: no-repeat; 132 | } 133 | .swiper-button-prev.swiper-button-disabled, 134 | .swiper-button-next.swiper-button-disabled { 135 | opacity: 0.35; 136 | cursor: auto; 137 | pointer-events: none; 138 | } 139 | .swiper-button-prev, 140 | .swiper-container-rtl .swiper-button-next { 141 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); 142 | left: 10px; 143 | right: auto; 144 | } 145 | .swiper-button-prev.swiper-button-black, 146 | .swiper-container-rtl .swiper-button-next.swiper-button-black { 147 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); 148 | } 149 | .swiper-button-prev.swiper-button-white, 150 | .swiper-container-rtl .swiper-button-next.swiper-button-white { 151 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); 152 | } 153 | .swiper-button-next, 154 | .swiper-container-rtl .swiper-button-prev { 155 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); 156 | right: 10px; 157 | left: auto; 158 | } 159 | .swiper-button-next.swiper-button-black, 160 | .swiper-container-rtl .swiper-button-prev.swiper-button-black { 161 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); 162 | } 163 | .swiper-button-next.swiper-button-white, 164 | .swiper-container-rtl .swiper-button-prev.swiper-button-white { 165 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); 166 | } 167 | /* Pagination Styles */ 168 | .swiper-pagination { 169 | position: absolute; 170 | text-align: center; 171 | -webkit-transition: 300ms; 172 | -moz-transition: 300ms; 173 | -o-transition: 300ms; 174 | transition: 300ms; 175 | -webkit-transform: translate3d(0, 0, 0); 176 | -ms-transform: translate3d(0, 0, 0); 177 | -o-transform: translate3d(0, 0, 0); 178 | transform: translate3d(0, 0, 0); 179 | z-index: 10; 180 | } 181 | .swiper-pagination.swiper-pagination-hidden { 182 | opacity: 0; 183 | } 184 | .swiper-pagination-bullet { 185 | width: 8px; 186 | height: 8px; 187 | display: inline-block; 188 | border-radius: 100%; 189 | background: #000; 190 | opacity: 0.2; 191 | } 192 | button.swiper-pagination-bullet { 193 | border: none; 194 | margin: 0; 195 | padding: 0; 196 | box-shadow: none; 197 | -moz-appearance: none; 198 | -ms-appearance: none; 199 | -webkit-appearance: none; 200 | appearance: none; 201 | } 202 | .swiper-pagination-clickable .swiper-pagination-bullet { 203 | cursor: pointer; 204 | } 205 | .swiper-pagination-white .swiper-pagination-bullet { 206 | background: #fff; 207 | } 208 | .swiper-pagination-bullet-active { 209 | opacity: 1; 210 | } 211 | .swiper-pagination-white .swiper-pagination-bullet-active { 212 | background: #fff; 213 | } 214 | .swiper-pagination-black .swiper-pagination-bullet-active { 215 | background: #000; 216 | } 217 | .swiper-container-vertical > .swiper-pagination { 218 | right: 10px; 219 | top: 50%; 220 | -webkit-transform: translate3d(0px, -50%, 0); 221 | -moz-transform: translate3d(0px, -50%, 0); 222 | -o-transform: translate(0px, -50%); 223 | -ms-transform: translate3d(0px, -50%, 0); 224 | transform: translate3d(0px, -50%, 0); 225 | } 226 | .swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet { 227 | margin: 5px 0; 228 | display: block; 229 | } 230 | .swiper-container-horizontal > .swiper-pagination { 231 | bottom: 10px; 232 | left: 0; 233 | width: 100%; 234 | } 235 | .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { 236 | margin: 0 5px; 237 | } 238 | /* 3D Container */ 239 | .swiper-container-3d { 240 | -webkit-perspective: 1200px; 241 | -moz-perspective: 1200px; 242 | -o-perspective: 1200px; 243 | perspective: 1200px; 244 | } 245 | .swiper-container-3d .swiper-wrapper, 246 | .swiper-container-3d .swiper-slide, 247 | .swiper-container-3d .swiper-slide-shadow-left, 248 | .swiper-container-3d .swiper-slide-shadow-right, 249 | .swiper-container-3d .swiper-slide-shadow-top, 250 | .swiper-container-3d .swiper-slide-shadow-bottom, 251 | .swiper-container-3d .swiper-cube-shadow { 252 | -webkit-transform-style: preserve-3d; 253 | -moz-transform-style: preserve-3d; 254 | -ms-transform-style: preserve-3d; 255 | transform-style: preserve-3d; 256 | } 257 | .swiper-container-3d .swiper-slide-shadow-left, 258 | .swiper-container-3d .swiper-slide-shadow-right, 259 | .swiper-container-3d .swiper-slide-shadow-top, 260 | .swiper-container-3d .swiper-slide-shadow-bottom { 261 | position: absolute; 262 | left: 0; 263 | top: 0; 264 | width: 100%; 265 | height: 100%; 266 | pointer-events: none; 267 | z-index: 10; 268 | } 269 | .swiper-container-3d .swiper-slide-shadow-left { 270 | background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); 271 | /* Safari 4+, Chrome */ 272 | background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 273 | /* Chrome 10+, Safari 5.1+, iOS 5+ */ 274 | background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 275 | /* Firefox 3.6-15 */ 276 | background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 277 | /* Opera 11.10-12.00 */ 278 | background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 279 | /* Firefox 16+, IE10, Opera 12.50+ */ 280 | } 281 | .swiper-container-3d .swiper-slide-shadow-right { 282 | background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); 283 | /* Safari 4+, Chrome */ 284 | background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 285 | /* Chrome 10+, Safari 5.1+, iOS 5+ */ 286 | background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 287 | /* Firefox 3.6-15 */ 288 | background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 289 | /* Opera 11.10-12.00 */ 290 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 291 | /* Firefox 16+, IE10, Opera 12.50+ */ 292 | } 293 | .swiper-container-3d .swiper-slide-shadow-top { 294 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); 295 | /* Safari 4+, Chrome */ 296 | background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 297 | /* Chrome 10+, Safari 5.1+, iOS 5+ */ 298 | background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 299 | /* Firefox 3.6-15 */ 300 | background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 301 | /* Opera 11.10-12.00 */ 302 | background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 303 | /* Firefox 16+, IE10, Opera 12.50+ */ 304 | } 305 | .swiper-container-3d .swiper-slide-shadow-bottom { 306 | background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); 307 | /* Safari 4+, Chrome */ 308 | background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 309 | /* Chrome 10+, Safari 5.1+, iOS 5+ */ 310 | background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 311 | /* Firefox 3.6-15 */ 312 | background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 313 | /* Opera 11.10-12.00 */ 314 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 315 | /* Firefox 16+, IE10, Opera 12.50+ */ 316 | } 317 | /* Coverflow */ 318 | .swiper-container-coverflow .swiper-wrapper { 319 | /* Windows 8 IE 10 fix */ 320 | -ms-perspective: 1200px; 321 | } 322 | /* Fade */ 323 | .swiper-container-fade.swiper-container-free-mode .swiper-slide { 324 | -webkit-transition-timing-function: ease-out; 325 | -moz-transition-timing-function: ease-out; 326 | -ms-transition-timing-function: ease-out; 327 | -o-transition-timing-function: ease-out; 328 | transition-timing-function: ease-out; 329 | } 330 | .swiper-container-fade .swiper-slide { 331 | pointer-events: none; 332 | } 333 | .swiper-container-fade .swiper-slide .swiper-slide { 334 | pointer-events: none; 335 | } 336 | .swiper-container-fade .swiper-slide-active, 337 | .swiper-container-fade .swiper-slide-active .swiper-slide-active { 338 | pointer-events: auto; 339 | } 340 | /* Cube */ 341 | .swiper-container-cube { 342 | overflow: visible; 343 | } 344 | .swiper-container-cube .swiper-slide { 345 | pointer-events: none; 346 | visibility: hidden; 347 | -webkit-transform-origin: 0 0; 348 | -moz-transform-origin: 0 0; 349 | -ms-transform-origin: 0 0; 350 | transform-origin: 0 0; 351 | -webkit-backface-visibility: hidden; 352 | -moz-backface-visibility: hidden; 353 | -ms-backface-visibility: hidden; 354 | backface-visibility: hidden; 355 | width: 100%; 356 | height: 100%; 357 | z-index: 1; 358 | } 359 | .swiper-container-cube.swiper-container-rtl .swiper-slide { 360 | -webkit-transform-origin: 100% 0; 361 | -moz-transform-origin: 100% 0; 362 | -ms-transform-origin: 100% 0; 363 | transform-origin: 100% 0; 364 | } 365 | .swiper-container-cube .swiper-slide-active, 366 | .swiper-container-cube .swiper-slide-next, 367 | .swiper-container-cube .swiper-slide-prev, 368 | .swiper-container-cube .swiper-slide-next + .swiper-slide { 369 | pointer-events: auto; 370 | visibility: visible; 371 | } 372 | .swiper-container-cube .swiper-slide-shadow-top, 373 | .swiper-container-cube .swiper-slide-shadow-bottom, 374 | .swiper-container-cube .swiper-slide-shadow-left, 375 | .swiper-container-cube .swiper-slide-shadow-right { 376 | z-index: 0; 377 | -webkit-backface-visibility: hidden; 378 | -moz-backface-visibility: hidden; 379 | -ms-backface-visibility: hidden; 380 | backface-visibility: hidden; 381 | } 382 | .swiper-container-cube .swiper-cube-shadow { 383 | position: absolute; 384 | left: 0; 385 | bottom: 0px; 386 | width: 100%; 387 | height: 100%; 388 | background: #000; 389 | opacity: 0.6; 390 | -webkit-filter: blur(50px); 391 | filter: blur(50px); 392 | z-index: 0; 393 | } 394 | /* Scrollbar */ 395 | .swiper-scrollbar { 396 | border-radius: 10px; 397 | position: relative; 398 | -ms-touch-action: none; 399 | background: rgba(0, 0, 0, 0.1); 400 | } 401 | .swiper-container-horizontal > .swiper-scrollbar { 402 | position: absolute; 403 | left: 1%; 404 | bottom: 3px; 405 | z-index: 50; 406 | height: 5px; 407 | width: 98%; 408 | } 409 | .swiper-container-vertical > .swiper-scrollbar { 410 | position: absolute; 411 | right: 3px; 412 | top: 1%; 413 | z-index: 50; 414 | width: 5px; 415 | height: 98%; 416 | } 417 | .swiper-scrollbar-drag { 418 | height: 100%; 419 | width: 100%; 420 | position: relative; 421 | background: rgba(0, 0, 0, 0.5); 422 | border-radius: 10px; 423 | left: 0; 424 | top: 0; 425 | } 426 | .swiper-scrollbar-cursor-drag { 427 | cursor: move; 428 | } 429 | /* Preloader */ 430 | .swiper-lazy-preloader { 431 | width: 42px; 432 | height: 42px; 433 | position: absolute; 434 | left: 50%; 435 | top: 50%; 436 | margin-left: -21px; 437 | margin-top: -21px; 438 | z-index: 10; 439 | -webkit-transform-origin: 50%; 440 | -moz-transform-origin: 50%; 441 | transform-origin: 50%; 442 | -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; 443 | -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; 444 | animation: swiper-preloader-spin 1s steps(12, end) infinite; 445 | } 446 | .swiper-lazy-preloader:after { 447 | display: block; 448 | content: ""; 449 | width: 100%; 450 | height: 100%; 451 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 452 | background-position: 50%; 453 | -webkit-background-size: 100%; 454 | background-size: 100%; 455 | background-repeat: no-repeat; 456 | } 457 | .swiper-lazy-preloader-white:after { 458 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 459 | } 460 | @-webkit-keyframes swiper-preloader-spin { 461 | 100% { 462 | -webkit-transform: rotate(360deg); 463 | } 464 | } 465 | @keyframes swiper-preloader-spin { 466 | 100% { 467 | transform: rotate(360deg); 468 | } 469 | } 470 | 471 | 472 | ion-slides { 473 | width: 100%; 474 | height: 100%; 475 | display: block; 476 | } 477 | .slide-zoom { 478 | display: block; 479 | width: 100%; 480 | text-align: center; 481 | } 482 | 483 | .swiper-container { 484 | //position: absolute; 485 | //left: 0; 486 | //top: 0; 487 | width: 100%; 488 | height: 100%; 489 | padding: 0; 490 | //display: flex; 491 | overflow: hidden; 492 | } 493 | 494 | .swiper-wrapper { 495 | position: absolute; 496 | left: 0; 497 | top: 0; 498 | width: 100%; 499 | height: 100%; 500 | padding: 0; 501 | //display: flex; 502 | } 503 | 504 | .swiper-container { 505 | //width: 100%; 506 | //height: 100%; 507 | } 508 | 509 | .swiper-slide { 510 | width: 100%; 511 | height: 100%; 512 | 513 | box-sizing: border-box; 514 | 515 | //text-align: center; 516 | //font-size: 18px; 517 | //background: #fff; 518 | /* Center slide text vertically */ 519 | //display: flex; 520 | //justify-content: center; 521 | //align-items: center; 522 | 523 | img { 524 | width: auto; 525 | height: auto; 526 | max-width: 100%; 527 | max-height: 100%; 528 | } 529 | } 530 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_spinner.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Spinners 3 | * -------------------------------------------------- 4 | */ 5 | 6 | .spinner { 7 | svg { 8 | width: $spinner-width; 9 | height: $spinner-height; 10 | } 11 | 12 | stroke: $spinner-default-stroke; 13 | fill: $spinner-default-fill; 14 | 15 | &.spinner-light { 16 | stroke: $spinner-light-stroke; 17 | fill: $spinner-light-fill; 18 | } 19 | &.spinner-stable { 20 | stroke: $spinner-stable-stroke; 21 | fill: $spinner-stable-fill; 22 | } 23 | &.spinner-positive { 24 | stroke: $spinner-positive-stroke; 25 | fill: $spinner-positive-fill; 26 | } 27 | &.spinner-calm { 28 | stroke: $spinner-calm-stroke; 29 | fill: $spinner-calm-fill; 30 | } 31 | &.spinner-balanced { 32 | stroke: $spinner-balanced-stroke; 33 | fill: $spinner-balanced-fill; 34 | } 35 | &.spinner-assertive { 36 | stroke: $spinner-assertive-stroke; 37 | fill: $spinner-assertive-fill; 38 | } 39 | &.spinner-energized { 40 | stroke: $spinner-energized-stroke; 41 | fill: $spinner-energized-fill; 42 | } 43 | &.spinner-royal { 44 | stroke: $spinner-royal-stroke; 45 | fill: $spinner-royal-fill; 46 | } 47 | &.spinner-dark { 48 | stroke: $spinner-dark-stroke; 49 | fill: $spinner-dark-fill; 50 | } 51 | } 52 | 53 | .spinner-android { 54 | stroke: #4b8bf4; 55 | } 56 | 57 | .spinner-ios, 58 | .spinner-ios-small { 59 | stroke: #69717d; 60 | } 61 | 62 | .spinner-spiral { 63 | .stop1 { 64 | stop-color: $spinner-light-fill; 65 | stop-opacity: 0; 66 | } 67 | 68 | &.spinner-light { 69 | .stop1 { 70 | stop-color: $spinner-default-fill; 71 | } 72 | .stop2 { 73 | stop-color: $spinner-light-fill; 74 | } 75 | } 76 | &.spinner-stable .stop2 { 77 | stop-color: $spinner-stable-fill; 78 | } 79 | &.spinner-positive .stop2 { 80 | stop-color: $spinner-positive-fill; 81 | } 82 | &.spinner-calm .stop2 { 83 | stop-color: $spinner-calm-fill; 84 | } 85 | &.spinner-balanced .stop2 { 86 | stop-color: $spinner-balanced-fill; 87 | } 88 | &.spinner-assertive .stop2 { 89 | stop-color: $spinner-assertive-fill; 90 | } 91 | &.spinner-energized .stop2 { 92 | stop-color: $spinner-energized-fill; 93 | } 94 | &.spinner-royal .stop2 { 95 | stop-color: $spinner-royal-fill; 96 | } 97 | &.spinner-dark .stop2 { 98 | stop-color: $spinner-dark-fill; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_tabs.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Tabs 3 | * -------------------------------------------------- 4 | * A navigation bar with any number of tab items supported. 5 | */ 6 | 7 | .tabs { 8 | @include display-flex(); 9 | @include flex-direction(horizontal); 10 | @include justify-content(center); 11 | @include translate3d(0,0,0); 12 | 13 | @include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text); 14 | @include tab-badge-style($tabs-default-text, $tabs-default-bg); 15 | 16 | position: absolute; 17 | bottom: 0; 18 | 19 | z-index: $z-index-tabs; 20 | 21 | width: 100%; 22 | height: $tabs-height; 23 | 24 | border-style: solid; 25 | border-top-width: 1px; 26 | 27 | background-size: 0; 28 | line-height: $tabs-height; 29 | 30 | @media (min--moz-device-pixel-ratio: 1.5), 31 | (-webkit-min-device-pixel-ratio: 1.5), 32 | (min-device-pixel-ratio: 1.5), 33 | (min-resolution: 144dpi), 34 | (min-resolution: 1.5dppx) { 35 | padding-top: 2px; 36 | border-top: none !important; 37 | border-bottom: none; 38 | background-position: top; 39 | background-size: 100% 1px; 40 | background-repeat: no-repeat; 41 | } 42 | 43 | } 44 | /* Allow parent element of tabs to define color, or just the tab itself */ 45 | .tabs-light > .tabs, 46 | .tabs.tabs-light { 47 | @include tab-style($tabs-light-bg, $tabs-light-border, $tabs-light-text); 48 | @include tab-badge-style($tabs-light-text, $tabs-light-bg); 49 | } 50 | .tabs-stable > .tabs, 51 | .tabs.tabs-stable { 52 | @include tab-style($tabs-stable-bg, $tabs-stable-border, $tabs-stable-text); 53 | @include tab-badge-style($tabs-stable-text, $tabs-stable-bg); 54 | } 55 | .tabs-positive > .tabs, 56 | .tabs.tabs-positive { 57 | @include tab-style($tabs-positive-bg, $tabs-positive-border, $tabs-positive-text); 58 | @include tab-badge-style($tabs-positive-text, $tabs-positive-bg); 59 | } 60 | .tabs-calm > .tabs, 61 | .tabs.tabs-calm { 62 | @include tab-style($tabs-calm-bg, $tabs-calm-border, $tabs-calm-text); 63 | @include tab-badge-style($tabs-calm-text, $tabs-calm-bg); 64 | } 65 | .tabs-assertive > .tabs, 66 | .tabs.tabs-assertive { 67 | @include tab-style($tabs-assertive-bg, $tabs-assertive-border, $tabs-assertive-text); 68 | @include tab-badge-style($tabs-assertive-text, $tabs-assertive-bg); 69 | } 70 | .tabs-balanced > .tabs, 71 | .tabs.tabs-balanced { 72 | @include tab-style($tabs-balanced-bg, $tabs-balanced-border, $tabs-balanced-text); 73 | @include tab-badge-style($tabs-balanced-text, $tabs-balanced-bg); 74 | } 75 | .tabs-energized > .tabs, 76 | .tabs.tabs-energized { 77 | @include tab-style($tabs-energized-bg, $tabs-energized-border, $tabs-energized-text); 78 | @include tab-badge-style($tabs-energized-text, $tabs-energized-bg); 79 | } 80 | .tabs-royal > .tabs, 81 | .tabs.tabs-royal { 82 | @include tab-style($tabs-royal-bg, $tabs-royal-border, $tabs-royal-text); 83 | @include tab-badge-style($tabs-royal-text, $tabs-royal-bg); 84 | } 85 | .tabs-dark > .tabs, 86 | .tabs.tabs-dark { 87 | @include tab-style($tabs-dark-bg, $tabs-dark-border, $tabs-dark-text); 88 | @include tab-badge-style($tabs-dark-text, $tabs-dark-bg); 89 | } 90 | 91 | @mixin tabs-striped($style, $color, $background) { 92 | &.#{$style} { 93 | .tabs{ 94 | background-color: $background; 95 | } 96 | .tab-item { 97 | color: rgba($color, $tabs-striped-off-opacity); 98 | opacity: 1; 99 | .badge{ 100 | opacity:$tabs-striped-off-opacity; 101 | } 102 | &.tab-item-active, 103 | &.active, 104 | &.activated { 105 | margin-top: -$tabs-striped-border-width; 106 | color: $color; 107 | border-style: solid; 108 | border-width: $tabs-striped-border-width 0 0 0; 109 | border-color: $color; 110 | } 111 | } 112 | } 113 | &.tabs-top{ 114 | .tab-item { 115 | &.tab-item-active, 116 | &.active, 117 | &.activated { 118 | .badge { 119 | top: 4%; 120 | } 121 | } 122 | } 123 | } 124 | } 125 | 126 | @mixin tabs-background($style, $color, $border-color) { 127 | .#{$style} { 128 | .tabs, 129 | &> .tabs{ 130 | background-color: $color; 131 | background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%); 132 | border-color: $border-color; 133 | } 134 | } 135 | } 136 | 137 | @mixin tabs-striped-background($style, $color) { 138 | &.#{$style} { 139 | .tabs { 140 | background-color: $color; 141 | background-image:none; 142 | } 143 | } 144 | } 145 | 146 | @mixin tabs-color($style, $color) { 147 | .#{$style} { 148 | .tab-item { 149 | color: rgba($color, $tabs-off-opacity); 150 | opacity: 1; 151 | .badge{ 152 | opacity:$tabs-off-opacity; 153 | } 154 | &.tab-item-active, 155 | &.active, 156 | &.activated { 157 | color: $color; 158 | border: 0 solid $color; 159 | .badge{ 160 | opacity: 1; 161 | } 162 | } 163 | } 164 | } 165 | } 166 | 167 | @mixin tabs-striped-color($style, $color) { 168 | &.#{$style} { 169 | .tab-item { 170 | color: rgba($color, $tabs-striped-off-opacity); 171 | opacity: 1; 172 | .badge{ 173 | opacity:$tabs-striped-off-opacity; 174 | } 175 | &.tab-item-active, 176 | &.active, 177 | &.activated { 178 | margin-top: -$tabs-striped-border-width; 179 | color: $color; 180 | border: 0 solid $color; 181 | border-top-width: $tabs-striped-border-width; 182 | .badge{ 183 | top:$tabs-striped-border-width; 184 | opacity: 1; 185 | } 186 | } 187 | } 188 | } 189 | } 190 | 191 | .tabs-striped { 192 | .tabs { 193 | background-color: white; 194 | background-image: none; 195 | border: none; 196 | border-bottom: 1px solid #ddd; 197 | padding-top: $tabs-striped-border-width; 198 | } 199 | .tab-item { 200 | // default android tab style 201 | &.tab-item-active, 202 | &.active, 203 | &.activated { 204 | margin-top: -$tabs-striped-border-width; 205 | border-style: solid; 206 | border-width: $tabs-striped-border-width 0 0 0; 207 | border-color: $dark; 208 | .badge{ 209 | top:$tabs-striped-border-width; 210 | opacity: 1; 211 | } 212 | } 213 | } 214 | @include tabs-striped('tabs-light', $dark, $light); 215 | @include tabs-striped('tabs-stable', $dark, $stable); 216 | @include tabs-striped('tabs-positive', $light, $positive); 217 | @include tabs-striped('tabs-calm', $light, $calm); 218 | @include tabs-striped('tabs-assertive', $light, $assertive); 219 | @include tabs-striped('tabs-balanced', $light, $balanced); 220 | @include tabs-striped('tabs-energized', $light, $energized); 221 | @include tabs-striped('tabs-royal', $light, $royal); 222 | @include tabs-striped('tabs-dark', $light, $dark); 223 | 224 | // doing this twice so striped tabs styles don't override specific bg and color vals 225 | @include tabs-striped-background('tabs-background-light', $light); 226 | @include tabs-striped-background('tabs-background-stable', $stable); 227 | @include tabs-striped-background('tabs-background-positive', $positive); 228 | @include tabs-striped-background('tabs-background-calm', $calm); 229 | @include tabs-striped-background('tabs-background-assertive', $assertive); 230 | @include tabs-striped-background('tabs-background-balanced', $balanced); 231 | @include tabs-striped-background('tabs-background-energized',$energized); 232 | @include tabs-striped-background('tabs-background-royal', $royal); 233 | @include tabs-striped-background('tabs-background-dark', $dark); 234 | 235 | @include tabs-striped-color('tabs-color-light', $light); 236 | @include tabs-striped-color('tabs-color-stable', $stable); 237 | @include tabs-striped-color('tabs-color-positive', $positive); 238 | @include tabs-striped-color('tabs-color-calm', $calm); 239 | @include tabs-striped-color('tabs-color-assertive', $assertive); 240 | @include tabs-striped-color('tabs-color-balanced', $balanced); 241 | @include tabs-striped-color('tabs-color-energized',$energized); 242 | @include tabs-striped-color('tabs-color-royal', $royal); 243 | @include tabs-striped-color('tabs-color-dark', $dark); 244 | 245 | } 246 | 247 | @include tabs-background('tabs-background-light', $light, $bar-light-border); 248 | @include tabs-background('tabs-background-stable', $stable, $bar-stable-border); 249 | @include tabs-background('tabs-background-positive', $positive, $bar-positive-border); 250 | @include tabs-background('tabs-background-calm', $calm, $bar-calm-border); 251 | @include tabs-background('tabs-background-assertive', $assertive, $bar-assertive-border); 252 | @include tabs-background('tabs-background-balanced', $balanced, $bar-balanced-border); 253 | @include tabs-background('tabs-background-energized',$energized, $bar-energized-border); 254 | @include tabs-background('tabs-background-royal', $royal, $bar-royal-border); 255 | @include tabs-background('tabs-background-dark', $dark, $bar-dark-border); 256 | 257 | @include tabs-color('tabs-color-light', $light); 258 | @include tabs-color('tabs-color-stable', $stable); 259 | @include tabs-color('tabs-color-positive', $positive); 260 | @include tabs-color('tabs-color-calm', $calm); 261 | @include tabs-color('tabs-color-assertive', $assertive); 262 | @include tabs-color('tabs-color-balanced', $balanced); 263 | @include tabs-color('tabs-color-energized',$energized); 264 | @include tabs-color('tabs-color-royal', $royal); 265 | @include tabs-color('tabs-color-dark', $dark); 266 | 267 | @mixin tabs-standard-color($style, $color, $off-color:$dark) { 268 | &.#{$style} { 269 | .tab-item { 270 | color: $off-color; 271 | &.tab-item-active, 272 | &.active, 273 | &.activated { 274 | color: $color; 275 | } 276 | } 277 | 278 | } 279 | 280 | &.tabs-striped.#{$style} { 281 | .tab-item { 282 | &.tab-item-active, 283 | &.active, 284 | &.activated { 285 | border-color: $color; 286 | color: $color; 287 | } 288 | } 289 | 290 | } 291 | 292 | } 293 | 294 | ion-tabs { 295 | @include tabs-standard-color('tabs-color-active-light', $light, $dark); 296 | @include tabs-standard-color('tabs-color-active-stable', $stable, $dark); 297 | @include tabs-standard-color('tabs-color-active-positive', $positive, $dark); 298 | @include tabs-standard-color('tabs-color-active-calm', $calm, $dark); 299 | @include tabs-standard-color('tabs-color-active-assertive', $assertive, $dark); 300 | @include tabs-standard-color('tabs-color-active-balanced', $balanced, $dark); 301 | @include tabs-standard-color('tabs-color-active-energized',$energized, $dark); 302 | @include tabs-standard-color('tabs-color-active-royal', $royal, $dark); 303 | @include tabs-standard-color('tabs-color-active-dark', $dark, $light); 304 | } 305 | 306 | .tabs-top { 307 | &.tabs-striped { 308 | padding-bottom:0; 309 | .tab-item{ 310 | background: transparent; 311 | // animate the top bar, leave bottom for platform consistency 312 | -webkit-transition: color .1s ease; 313 | -moz-transition: color .1s ease; 314 | -ms-transition: color .1s ease; 315 | -o-transition: color .1s ease; 316 | transition: color .1s ease; 317 | &.tab-item-active, 318 | &.active, 319 | &.activated { 320 | margin-top: $tabs-striped-border-width - 1px; 321 | border-width: 0px 0px $tabs-striped-border-width 0px !important; 322 | border-style: solid; 323 | > .badge, > i{ 324 | margin-top: -$tabs-striped-border-width + 1px; 325 | } 326 | } 327 | .badge{ 328 | -webkit-transition: color .2s ease; 329 | -moz-transition: color .2s ease; 330 | -ms-transition: color .2s ease; 331 | -o-transition: color .2s ease; 332 | transition: color .2s ease; 333 | } 334 | } 335 | &:not(.tabs-icon-left):not(.tabs-icon-top){ 336 | .tab-item{ 337 | &.tab-item-active, 338 | &.active, 339 | &.activated { 340 | .tab-title, i{ 341 | display:block; 342 | margin-top: -$tabs-striped-border-width + 1px; 343 | } 344 | } 345 | } 346 | } 347 | &.tabs-icon-left{ 348 | .tab-item{ 349 | margin-top: 1px; 350 | &.tab-item-active, 351 | &.active, 352 | &.activated { 353 | .tab-title, i { 354 | margin-top: -0.1em; 355 | } 356 | } 357 | } 358 | } 359 | } 360 | } 361 | 362 | /* Allow parent element to have tabs-top */ 363 | /* If you change this, change platform.scss as well */ 364 | .tabs-top > .tabs, 365 | .tabs.tabs-top { 366 | top: $bar-height; 367 | padding-top: 0; 368 | background-position: bottom; 369 | border-top-width: 0; 370 | border-bottom-width: 1px; 371 | .tab-item { 372 | &.tab-item-active, 373 | &.active, 374 | &.activated { 375 | .badge { 376 | top: 4%; 377 | } 378 | } 379 | } 380 | } 381 | .tabs-top ~ .bar-header { 382 | border-bottom-width: 0; 383 | } 384 | 385 | .tab-item { 386 | @include flex(1); 387 | display: block; 388 | overflow: hidden; 389 | 390 | max-width: $tab-item-max-width; 391 | height: 100%; 392 | 393 | color: inherit; 394 | text-align: center; 395 | text-decoration: none; 396 | text-overflow: ellipsis; 397 | white-space: nowrap; 398 | 399 | font-weight: 400; 400 | font-size: $tabs-text-font-size; 401 | font-family: $font-family-sans-serif; 402 | 403 | opacity: 0.7; 404 | 405 | &:hover { 406 | cursor: pointer; 407 | } 408 | &.tab-hidden{ 409 | display:none; 410 | } 411 | } 412 | 413 | .tabs-item-hide > .tabs, 414 | .tabs.tabs-item-hide { 415 | display: none; 416 | } 417 | 418 | .tabs-icon-top > .tabs .tab-item, 419 | .tabs-icon-top.tabs .tab-item, 420 | .tabs-icon-bottom > .tabs .tab-item, 421 | .tabs-icon-bottom.tabs .tab-item { 422 | font-size: $tabs-text-font-size-side-icon; 423 | line-height: $tabs-text-font-size; 424 | } 425 | 426 | .tab-item .icon { 427 | display: block; 428 | margin: 0 auto; 429 | height: $tabs-icon-size; 430 | font-size: $tabs-icon-size; 431 | } 432 | 433 | .tabs-icon-left.tabs .tab-item, 434 | .tabs-icon-left > .tabs .tab-item, 435 | .tabs-icon-right.tabs .tab-item, 436 | .tabs-icon-right > .tabs .tab-item { 437 | font-size: $tabs-text-font-size-side-icon; 438 | 439 | .icon, .tab-title { 440 | display: inline-block; 441 | vertical-align: top; 442 | margin-top: -.1em; 443 | 444 | &:before { 445 | font-size: $tabs-icon-size - 8; 446 | line-height: $tabs-height; 447 | } 448 | } 449 | } 450 | 451 | .tabs-icon-left > .tabs .tab-item .icon, 452 | .tabs-icon-left.tabs .tab-item .icon { 453 | padding-right: 3px; 454 | } 455 | 456 | .tabs-icon-right > .tabs .tab-item .icon, 457 | .tabs-icon-right.tabs .tab-item .icon { 458 | padding-left: 3px; 459 | } 460 | 461 | .tabs-icon-only > .tabs .icon, 462 | .tabs-icon-only.tabs .icon { 463 | line-height: inherit; 464 | } 465 | 466 | 467 | .tab-item.has-badge { 468 | position: relative; 469 | } 470 | 471 | .tab-item .badge { 472 | position: absolute; 473 | top: 4%; 474 | right: 33%; // fallback 475 | right: calc(50% - 26px); 476 | padding: $tabs-badge-padding; 477 | height: auto; 478 | font-size: $tabs-badge-font-size; 479 | line-height: $tabs-badge-font-size + 4; 480 | } 481 | 482 | 483 | /* Navigational tab */ 484 | 485 | /* Active state for tab */ 486 | .tab-item.tab-item-active, 487 | .tab-item.active, 488 | .tab-item.activated { 489 | opacity: 1; 490 | 491 | &.tab-item-light { 492 | color: $light; 493 | } 494 | &.tab-item-stable { 495 | color: $stable; 496 | } 497 | &.tab-item-positive { 498 | color: $positive; 499 | } 500 | &.tab-item-calm { 501 | color: $calm; 502 | } 503 | &.tab-item-assertive { 504 | color: $assertive; 505 | } 506 | &.tab-item-balanced { 507 | color: $balanced; 508 | } 509 | &.tab-item-energized { 510 | color: $energized; 511 | } 512 | &.tab-item-royal { 513 | color: $royal; 514 | } 515 | &.tab-item-dark { 516 | color: $dark; 517 | } 518 | } 519 | 520 | .item.tabs { 521 | @include display-flex(); 522 | padding: 0; 523 | 524 | .icon:before { 525 | position: relative; 526 | } 527 | } 528 | 529 | .tab-item.disabled, 530 | .tab-item[disabled] { 531 | opacity: .4; 532 | cursor: default; 533 | pointer-events: none; 534 | } 535 | 536 | .nav-bar-tabs-top.hide ~ .view-container .tabs-top .tabs{ 537 | top: 0 538 | } 539 | .pane[hide-nav-bar="true"] .has-tabs-top{ 540 | top:$tabs-height 541 | } 542 | 543 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_toggle.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Toggle 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .item-toggle { 8 | pointer-events: none; 9 | } 10 | 11 | .toggle { 12 | // set the color defaults 13 | @include toggle-style($toggle-on-default-border, $toggle-on-default-bg); 14 | 15 | position: relative; 16 | display: inline-block; 17 | pointer-events: auto; 18 | margin: -$toggle-hit-area-expansion; 19 | padding: $toggle-hit-area-expansion; 20 | 21 | &.dragging { 22 | .handle { 23 | background-color: $toggle-handle-dragging-bg-color !important; 24 | } 25 | } 26 | 27 | } 28 | 29 | .toggle { 30 | &.toggle-light { 31 | @include toggle-style($toggle-on-light-border, $toggle-on-light-bg); 32 | } 33 | &.toggle-stable { 34 | @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg); 35 | } 36 | &.toggle-positive { 37 | @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg); 38 | } 39 | &.toggle-calm { 40 | @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg); 41 | } 42 | &.toggle-assertive { 43 | @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg); 44 | } 45 | &.toggle-balanced { 46 | @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg); 47 | } 48 | &.toggle-energized { 49 | @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg); 50 | } 51 | &.toggle-royal { 52 | @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg); 53 | } 54 | &.toggle-dark { 55 | @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg); 56 | } 57 | } 58 | 59 | .toggle input { 60 | // hide the actual input checkbox 61 | display: none; 62 | } 63 | 64 | /* the track appearance when the toggle is "off" */ 65 | .toggle .track { 66 | @include transition-timing-function(ease-in-out); 67 | @include transition-duration($toggle-transition-duration); 68 | @include transition-property((background-color, border)); 69 | 70 | display: inline-block; 71 | box-sizing: border-box; 72 | width: $toggle-width; 73 | height: $toggle-height; 74 | border: solid $toggle-border-width $toggle-off-border-color; 75 | border-radius: $toggle-border-radius; 76 | background-color: $toggle-off-bg-color; 77 | content: ' '; 78 | cursor: pointer; 79 | pointer-events: none; 80 | } 81 | 82 | /* Fix to avoid background color bleeding */ 83 | /* (occurred on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */ 84 | .platform-android4_2 .toggle .track { 85 | -webkit-background-clip: padding-box; 86 | } 87 | 88 | /* the handle (circle) thats inside the toggle's track area */ 89 | /* also the handle's appearance when it is "off" */ 90 | .toggle .handle { 91 | @include transition($toggle-transition-duration cubic-bezier(0, 1.1, 1, 1.1)); 92 | @include transition-property((background-color, transform)); 93 | position: absolute; 94 | display: block; 95 | width: $toggle-handle-width; 96 | height: $toggle-handle-height; 97 | border-radius: $toggle-handle-radius; 98 | background-color: $toggle-handle-off-bg-color; 99 | top: $toggle-border-width + $toggle-hit-area-expansion; 100 | left: $toggle-border-width + $toggle-hit-area-expansion; 101 | box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.15); 102 | 103 | &:before { 104 | // used to create a larger (but hidden) hit area to slide the handle 105 | position: absolute; 106 | top: -4px; 107 | left: ( ($toggle-handle-width / 2) * -1) - 8; 108 | padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7); 109 | content: " "; 110 | } 111 | } 112 | 113 | .toggle input:checked + .track .handle { 114 | // the handle when the toggle is "on" 115 | @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0); 116 | background-color: $toggle-handle-on-bg-color; 117 | } 118 | 119 | .item-toggle.active { 120 | box-shadow: none; 121 | } 122 | 123 | .item-toggle, 124 | .item-toggle.item-complex .item-content { 125 | // make sure list item content have enough padding on right to fit the toggle 126 | padding-right: ($item-padding * 3) + $toggle-width; 127 | } 128 | 129 | .item-toggle.item-complex { 130 | padding-right: 0; 131 | } 132 | 133 | .item-toggle .toggle { 134 | // position the toggle to the right within a list item 135 | position: absolute; 136 | top: ($item-padding / 2) + 2; 137 | right: $item-padding; 138 | z-index: $z-index-item-toggle; 139 | } 140 | 141 | .toggle input:disabled + .track { 142 | opacity: .6; 143 | } 144 | 145 | .toggle-small { 146 | 147 | .track { 148 | border: 0; 149 | width: 34px; 150 | height: 15px; 151 | background: #9e9e9e; 152 | } 153 | input:checked + .track { 154 | background: rgba(0,150,137,.5); 155 | } 156 | .handle { 157 | top: 2px; 158 | left: 4px; 159 | width: 21px; 160 | height: 21px; 161 | box-shadow: 0 2px 5px rgba(0,0,0,.25); 162 | } 163 | input:checked + .track .handle { 164 | @include translate3d(16px, 0, 0); 165 | background: rgb(0,150,137); 166 | } 167 | &.item-toggle .toggle { 168 | top: 19px; 169 | } 170 | 171 | .toggle-light { 172 | @include toggle-small-style($toggle-on-light-bg); 173 | } 174 | .toggle-stable { 175 | @include toggle-small-style($toggle-on-stable-bg); 176 | } 177 | .toggle-positive { 178 | @include toggle-small-style($toggle-on-positive-bg); 179 | } 180 | .toggle-calm { 181 | @include toggle-small-style($toggle-on-calm-bg); 182 | } 183 | .toggle-assertive { 184 | @include toggle-small-style($toggle-on-assertive-bg); 185 | } 186 | .toggle-balanced { 187 | @include toggle-small-style($toggle-on-balanced-bg); 188 | } 189 | .toggle-energized { 190 | @include toggle-small-style($toggle-on-energized-bg); 191 | } 192 | .toggle-royal { 193 | @include toggle-small-style($toggle-on-royal-bg); 194 | } 195 | .toggle-dark { 196 | @include toggle-small-style($toggle-on-dark-bg); 197 | } 198 | } 199 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_transitions.scss: -------------------------------------------------------------------------------- 1 | 2 | // iOS View Transitions 3 | // ------------------------------- 4 | 5 | $ios-transition-duration: 500ms !default; 6 | $ios-transition-timing-function: cubic-bezier(.36, .66, .04, 1) !default; 7 | $ios-transition-container-bg-color: #000 !default; 8 | 9 | 10 | [nav-view-transition="ios"] { 11 | 12 | [nav-view="entering"], 13 | [nav-view="leaving"] { 14 | @include transition-duration( $ios-transition-duration ); 15 | @include transition-timing-function( $ios-transition-timing-function ); 16 | -webkit-transition-property: opacity, -webkit-transform, box-shadow; 17 | transition-property: opacity, transform, box-shadow; 18 | } 19 | 20 | &[nav-view-direction="forward"], 21 | &[nav-view-direction="back"] { 22 | background-color: $ios-transition-container-bg-color; 23 | } 24 | 25 | [nav-view="active"], 26 | &[nav-view-direction="forward"] [nav-view="entering"], 27 | &[nav-view-direction="back"] [nav-view="leaving"] { 28 | z-index: $z-index-view-above; 29 | } 30 | 31 | &[nav-view-direction="back"] [nav-view="entering"], 32 | &[nav-view-direction="forward"] [nav-view="leaving"] { 33 | z-index: $z-index-view-below; 34 | } 35 | 36 | } 37 | 38 | 39 | 40 | // iOS Nav Bar Transitions 41 | // ------------------------------- 42 | 43 | [nav-bar-transition="ios"] { 44 | 45 | .title, 46 | .buttons, 47 | .back-text { 48 | @include transition-duration( $ios-transition-duration ); 49 | @include transition-timing-function( $ios-transition-timing-function ); 50 | -webkit-transition-property: opacity, -webkit-transform; 51 | transition-property: opacity, transform; 52 | } 53 | 54 | [nav-bar="active"], 55 | [nav-bar="entering"] { 56 | z-index: $z-index-bar-above; 57 | 58 | .bar { 59 | background: transparent; 60 | } 61 | } 62 | 63 | [nav-bar="cached"] { 64 | display: block; 65 | 66 | .header-item { 67 | display: none; 68 | } 69 | } 70 | 71 | } 72 | 73 | 74 | 75 | // Android View Transitions 76 | // ------------------------------- 77 | 78 | $android-transition-duration: 200ms !default; 79 | $android-transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1) !default; 80 | 81 | 82 | [nav-view-transition="android"] { 83 | 84 | [nav-view="entering"], 85 | [nav-view="leaving"] { 86 | @include transition-duration( $android-transition-duration ); 87 | @include transition-timing-function( $android-transition-timing-function ); 88 | -webkit-transition-property: -webkit-transform; 89 | transition-property: transform; 90 | } 91 | 92 | [nav-view="active"], 93 | &[nav-view-direction="forward"] [nav-view="entering"], 94 | &[nav-view-direction="back"] [nav-view="leaving"] { 95 | z-index: $z-index-view-above; 96 | } 97 | 98 | &[nav-view-direction="back"] [nav-view="entering"], 99 | &[nav-view-direction="forward"] [nav-view="leaving"] { 100 | z-index: $z-index-view-below; 101 | } 102 | 103 | } 104 | 105 | 106 | 107 | // Android Nav Bar Transitions 108 | // ------------------------------- 109 | 110 | [nav-bar-transition="android"] { 111 | 112 | .title, 113 | .buttons { 114 | @include transition-duration( $android-transition-duration ); 115 | @include transition-timing-function( $android-transition-timing-function ); 116 | -webkit-transition-property: opacity; 117 | transition-property: opacity; 118 | } 119 | 120 | [nav-bar="active"], 121 | [nav-bar="entering"] { 122 | z-index: $z-index-bar-above; 123 | 124 | .bar { 125 | background: transparent; 126 | } 127 | } 128 | 129 | [nav-bar="cached"] { 130 | display: block; 131 | 132 | .header-item { 133 | display: none; 134 | } 135 | } 136 | 137 | } 138 | 139 | 140 | 141 | // Nav Swipe 142 | // ------------------------------- 143 | 144 | [nav-swipe="fast"] { 145 | [nav-view], 146 | .title, 147 | .buttons, 148 | .back-text { 149 | @include transition-duration(50ms); 150 | @include transition-timing-function(linear); 151 | } 152 | } 153 | 154 | [nav-swipe="slow"] { 155 | [nav-view], 156 | .title, 157 | .buttons, 158 | .back-text { 159 | @include transition-duration(160ms); 160 | @include transition-timing-function(linear); 161 | } 162 | } 163 | 164 | 165 | 166 | // Transition Settings 167 | // ------------------------------- 168 | 169 | [nav-view="cached"], 170 | [nav-bar="cached"] { 171 | display: none; 172 | } 173 | 174 | [nav-view="stage"] { 175 | opacity: 0; 176 | @include transition-duration( 0 ); 177 | } 178 | 179 | [nav-bar="stage"] { 180 | .title, 181 | .buttons, 182 | .back-text { 183 | position: absolute; 184 | opacity: 0; 185 | @include transition-duration(0s); 186 | } 187 | } 188 | 189 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_type.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Typography 4 | * -------------------------------------------------- 5 | */ 6 | 7 | 8 | // Body text 9 | // ------------------------- 10 | 11 | p { 12 | margin: 0 0 ($line-height-computed / 2); 13 | } 14 | 15 | 16 | // Emphasis & misc 17 | // ------------------------- 18 | 19 | small { font-size: 85%; } 20 | cite { font-style: normal; } 21 | 22 | 23 | // Alignment 24 | // ------------------------- 25 | 26 | .text-left { text-align: left; } 27 | .text-right { text-align: right; } 28 | .text-center { text-align: center; } 29 | 30 | 31 | // Headings 32 | // ------------------------- 33 | 34 | h1, h2, h3, h4, h5, h6, 35 | .h1, .h2, .h3, .h4, .h5, .h6 { 36 | color: $base-color; 37 | font-weight: $headings-font-weight; 38 | font-family: $headings-font-family; 39 | line-height: $headings-line-height; 40 | 41 | small { 42 | font-weight: normal; 43 | line-height: 1; 44 | } 45 | } 46 | 47 | h1, .h1, 48 | h2, .h2, 49 | h3, .h3 { 50 | margin-top: $line-height-computed; 51 | margin-bottom: ($line-height-computed / 2); 52 | 53 | &:first-child { 54 | margin-top: 0; 55 | } 56 | 57 | + h1, + .h1, 58 | + h2, + .h2, 59 | + h3, + .h3 { 60 | margin-top: ($line-height-computed / 2); 61 | } 62 | } 63 | 64 | h4, .h4, 65 | h5, .h5, 66 | h6, .h6 { 67 | margin-top: ($line-height-computed / 2); 68 | margin-bottom: ($line-height-computed / 2); 69 | } 70 | 71 | h1, .h1 { font-size: floor($font-size-base * 2.60); } // ~36px 72 | h2, .h2 { font-size: floor($font-size-base * 2.15); } // ~30px 73 | h3, .h3 { font-size: ceil($font-size-base * 1.70); } // ~24px 74 | h4, .h4 { font-size: ceil($font-size-base * 1.25); } // ~18px 75 | h5, .h5 { font-size: $font-size-base; } 76 | h6, .h6 { font-size: ceil($font-size-base * 0.85); } // ~12px 77 | 78 | h1 small, .h1 small { font-size: ceil($font-size-base * 1.70); } // ~24px 79 | h2 small, .h2 small { font-size: ceil($font-size-base * 1.25); } // ~18px 80 | h3 small, .h3 small, 81 | h4 small, .h4 small { font-size: $font-size-base; } 82 | 83 | 84 | // Description Lists 85 | // ------------------------- 86 | 87 | dl { 88 | margin-bottom: $line-height-computed; 89 | } 90 | dt, 91 | dd { 92 | line-height: $line-height-base; 93 | } 94 | dt { 95 | font-weight: bold; 96 | } 97 | 98 | 99 | // Blockquotes 100 | // ------------------------- 101 | 102 | blockquote { 103 | margin: 0 0 $line-height-computed; 104 | padding: ($line-height-computed / 2) $line-height-computed; 105 | border-left: 5px solid gray; 106 | 107 | p { 108 | font-weight: 300; 109 | font-size: ($font-size-base * 1.25); 110 | line-height: 1.25; 111 | } 112 | 113 | p:last-child { 114 | margin-bottom: 0; 115 | } 116 | 117 | small { 118 | display: block; 119 | line-height: $line-height-base; 120 | &:before { 121 | content: '\2014 \00A0';// EM DASH, NBSP; 122 | } 123 | } 124 | } 125 | 126 | 127 | // Quotes 128 | // ------------------------- 129 | 130 | q:before, 131 | q:after, 132 | blockquote:before, 133 | blockquote:after { 134 | content: ""; 135 | } 136 | 137 | 138 | // Addresses 139 | // ------------------------- 140 | 141 | address { 142 | display: block; 143 | margin-bottom: $line-height-computed; 144 | font-style: normal; 145 | line-height: $line-height-base; 146 | } 147 | 148 | 149 | // Links 150 | // ------------------------- 151 | a { 152 | color: $link-color; 153 | } 154 | 155 | a.subdued { 156 | padding-right: 10px; 157 | color: #888; 158 | text-decoration: none; 159 | 160 | &:hover { 161 | text-decoration: none; 162 | } 163 | &:last-child { 164 | padding-right: 0; 165 | } 166 | } 167 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/_util.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Utility Classes 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .hide { 8 | display: none; 9 | } 10 | .opacity-hide { 11 | opacity: 0; 12 | } 13 | .grade-b .opacity-hide, 14 | .grade-c .opacity-hide { 15 | opacity: 1; 16 | display: none; 17 | } 18 | .show { 19 | display: block; 20 | } 21 | .opacity-show { 22 | opacity: 1; 23 | } 24 | .invisible { 25 | visibility: hidden; 26 | } 27 | 28 | .keyboard-open .hide-on-keyboard-open { 29 | display: none; 30 | } 31 | 32 | .keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs, 33 | .keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer { 34 | bottom: 0; 35 | } 36 | 37 | .inline { 38 | display: inline-block; 39 | } 40 | 41 | .disable-pointer-events { 42 | pointer-events: none; 43 | } 44 | 45 | .enable-pointer-events { 46 | pointer-events: auto; 47 | } 48 | 49 | .disable-user-behavior { 50 | // used to prevent the browser from doing its native behavior. this doesnt 51 | // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc 52 | 53 | @include user-select(none); 54 | @include touch-callout(none); 55 | @include tap-highlight-transparent(); 56 | 57 | -webkit-user-drag: none; 58 | 59 | -ms-touch-action: none; 60 | -ms-content-zooming: none; 61 | } 62 | 63 | // Fill the screen to block clicks (a better pointer-events: none) for the body 64 | // to avoid full-page reflows and paints which can cause flickers 65 | .click-block { 66 | position: absolute; 67 | top: 0; 68 | right: 0; 69 | bottom: 0; 70 | left: 0; 71 | opacity: 0; 72 | z-index: $z-index-click-block; 73 | @include translate3d(0, 0, 0); 74 | overflow: hidden; 75 | } 76 | .click-block-hide { 77 | @include translate3d(-9999px, 0, 0); 78 | } 79 | 80 | .no-resize { 81 | resize: none; 82 | } 83 | 84 | .block { 85 | display: block; 86 | clear: both; 87 | &:after { 88 | display: block; 89 | visibility: hidden; 90 | clear: both; 91 | height: 0; 92 | content: "."; 93 | } 94 | } 95 | 96 | .full-image { 97 | width: 100%; 98 | } 99 | 100 | .clearfix { 101 | *zoom: 1; 102 | &:before, 103 | &:after { 104 | display: table; 105 | content: ""; 106 | // Fixes Opera/contenteditable bug: 107 | // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 108 | line-height: 0; 109 | } 110 | &:after { 111 | clear: both; 112 | } 113 | } 114 | 115 | /** 116 | * Content Padding 117 | * -------------------------------------------------- 118 | */ 119 | 120 | .padding { 121 | padding: $content-padding; 122 | } 123 | 124 | .padding-top, 125 | .padding-vertical { 126 | padding-top: $content-padding; 127 | } 128 | 129 | .padding-right, 130 | .padding-horizontal { 131 | padding-right: $content-padding; 132 | } 133 | 134 | .padding-bottom, 135 | .padding-vertical { 136 | padding-bottom: $content-padding; 137 | } 138 | 139 | .padding-left, 140 | .padding-horizontal { 141 | padding-left: $content-padding; 142 | } 143 | 144 | 145 | /** 146 | * Scrollable iFrames 147 | * -------------------------------------------------- 148 | */ 149 | 150 | .iframe-wrapper { 151 | position: fixed; 152 | -webkit-overflow-scrolling: touch; 153 | overflow: scroll; 154 | 155 | iframe { 156 | height: 100%; 157 | width: 100%; 158 | } 159 | } 160 | 161 | 162 | /** 163 | * Rounded 164 | * -------------------------------------------------- 165 | */ 166 | 167 | .rounded { 168 | border-radius: $border-radius-base; 169 | } 170 | 171 | 172 | /** 173 | * Utility Colors 174 | * -------------------------------------------------- 175 | * Utility colors are added to help set a naming convention. You'll 176 | * notice we purposely do not use words like "red" or "blue", but 177 | * instead have colors which represent an emotion or generic theme. 178 | */ 179 | 180 | .light, a.light { 181 | color: $light; 182 | } 183 | .light-bg { 184 | background-color: $light; 185 | } 186 | .light-border { 187 | border-color: $button-light-border; 188 | } 189 | 190 | .stable, a.stable { 191 | color: $stable; 192 | } 193 | .stable-bg { 194 | background-color: $stable; 195 | } 196 | .stable-border { 197 | border-color: $button-stable-border; 198 | } 199 | 200 | .positive, a.positive { 201 | color: $positive; 202 | } 203 | .positive-bg { 204 | background-color: $positive; 205 | } 206 | .positive-border { 207 | border-color: $button-positive-border; 208 | } 209 | 210 | .calm, a.calm { 211 | color: $calm; 212 | } 213 | .calm-bg { 214 | background-color: $calm; 215 | } 216 | .calm-border { 217 | border-color: $button-calm-border; 218 | } 219 | 220 | .assertive, a.assertive { 221 | color: $assertive; 222 | } 223 | .assertive-bg { 224 | background-color: $assertive; 225 | } 226 | .assertive-border { 227 | border-color: $button-assertive-border; 228 | } 229 | 230 | .balanced, a.balanced { 231 | color: $balanced; 232 | } 233 | .balanced-bg { 234 | background-color: $balanced; 235 | } 236 | .balanced-border { 237 | border-color: $button-balanced-border; 238 | } 239 | 240 | .energized, a.energized { 241 | color: $energized; 242 | } 243 | .energized-bg { 244 | background-color: $energized; 245 | } 246 | .energized-border { 247 | border-color: $button-energized-border; 248 | } 249 | 250 | .royal, a.royal { 251 | color: $royal; 252 | } 253 | .royal-bg { 254 | background-color: $royal; 255 | } 256 | .royal-border { 257 | border-color: $button-royal-border; 258 | } 259 | 260 | .dark, a.dark { 261 | color: $dark; 262 | } 263 | .dark-bg { 264 | background-color: $dark; 265 | } 266 | .dark-border { 267 | border-color: $button-dark-border; 268 | } 269 | 270 | [collection-repeat] { 271 | /* Position is set by transforms */ 272 | left: 0 !important; 273 | top: 0 !important; 274 | position: absolute !important; 275 | z-index: 1; 276 | } 277 | .collection-repeat-container { 278 | position: relative; 279 | z-index: 1; //make sure it's above the after-container 280 | } 281 | .collection-repeat-after-container { 282 | z-index: 0; 283 | display: block; 284 | 285 | /* when scrolling horizontally, make sure the after container doesn't take up 100% width */ 286 | &.horizontal { 287 | display: inline-block; 288 | } 289 | } 290 | 291 | // ng-show fix for windows phone 292 | // https://www.hoessl.eu/2014/12/on-using-the-ionic-framework-for-windows-phone-8-1-apps/ 293 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, 294 | .x-ng-cloak, .ng-hide:not(.ng-hide-animate) { 295 | display: none !important; 296 | } -------------------------------------------------------------------------------- /www/lib/ionic/scss/ionic.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import 4 | // Ionicons 5 | "ionicons/ionicons.scss", 6 | 7 | // Variables 8 | "mixins", 9 | "variables", 10 | 11 | // Base 12 | "reset", 13 | "scaffolding", 14 | "type", 15 | 16 | // Components 17 | "action-sheet", 18 | "backdrop", 19 | "bar", 20 | "tabs", 21 | "menu", 22 | "modal", 23 | "popover", 24 | "popup", 25 | "loading", 26 | "items", 27 | "list", 28 | "badge", 29 | "slide-box", 30 | "slides", 31 | "refresher", 32 | "spinner", 33 | 34 | // Forms 35 | "form", 36 | "checkbox", 37 | "toggle", 38 | "radio", 39 | "range", 40 | "select", 41 | "progress", 42 | 43 | // Buttons 44 | "button", 45 | "button-bar", 46 | 47 | // Util 48 | "grid", 49 | "util", 50 | "platform", 51 | 52 | // Animations 53 | "animations", 54 | "transitions"; 55 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/ionicons/_ionicons-font.scss: -------------------------------------------------------------------------------- 1 | // Ionicons Font Path 2 | // -------------------------- 3 | 4 | @font-face { 5 | font-family: $ionicons-font-family; 6 | src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}"); 7 | src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}#iefix") format("embedded-opentype"), 8 | url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"), 9 | url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"), 10 | url("#{$ionicons-font-path}/ionicons.woff") format("woff"), /* for WP8 */ 11 | url("#{$ionicons-font-path}/ionicons.svg?v=#{$ionicons-version}#Ionicons") format("svg"); 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | 16 | .ion { 17 | display: inline-block; 18 | font-family: $ionicons-font-family; 19 | speak: none; 20 | font-style: normal; 21 | font-weight: normal; 22 | font-variant: normal; 23 | text-transform: none; 24 | text-rendering: auto; 25 | line-height: 1; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | } 29 | -------------------------------------------------------------------------------- /www/lib/ionic/scss/ionicons/ionicons.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "ionicons-variables"; 3 | /*! 4 | Ionicons, v2.0.1 5 | Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ 6 | https://twitter.com/benjsperry https://twitter.com/ionicframework 7 | MIT License: https://github.com/driftyco/ionicons 8 | 9 | Android-style icons originally built by Google’s 10 | Material Design Icons: https://github.com/google/material-design-icons 11 | used under CC BY http://creativecommons.org/licenses/by/4.0/ 12 | Modified icons to fit ionicon’s grid from original. 13 | */ 14 | 15 | @import "ionicons-font"; 16 | @import "ionicons-icons"; 17 | -------------------------------------------------------------------------------- /www/lib/ionic/version.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.3.0", 3 | "codename": "delhi", 4 | "date": "2016-04-21", 5 | "time": "15:35:35" 6 | } 7 | -------------------------------------------------------------------------------- /www/templates/browse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Browse

4 | 5 | 6 | -------------------------------------------------------------------------------- /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 | Login 23 | 24 | 25 | Search 26 | 27 | 28 | Browse 29 | 30 | 31 | Playlists 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /www/templates/playlist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Playlist

4 | 5 | 6 | -------------------------------------------------------------------------------- /www/templates/playlists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{playlist.title}} 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /www/templates/search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Search

4 | 5 | 6 | --------------------------------------------------------------------------------