├── .bowerrc ├── .editorconfig ├── .gitignore ├── .stylelint ├── README.md ├── bower.json ├── config.xml ├── gulpfile.js ├── hooks ├── README.md └── after_prepare │ └── 010_add_platform_class.js ├── ionic.project ├── package.json ├── src ├── app │ ├── account │ │ └── tab-account.html │ ├── app.js │ ├── app.routes.js │ ├── app.templates.js │ ├── chats │ │ ├── chats.module.js │ │ ├── chats.scss │ │ ├── chats.service.js │ │ ├── controllers │ │ │ ├── chats.controller.js │ │ │ └── chats_details.controller.js │ │ ├── img │ │ │ ├── adam.jpg │ │ │ ├── ben.png │ │ │ ├── ionic.png │ │ │ ├── max.png │ │ │ ├── mike.png │ │ │ └── perry.png │ │ ├── logo.png │ │ └── templates │ │ │ ├── chat-detail.html │ │ │ └── tab-chats.html │ ├── config │ │ ├── config.default.json │ │ ├── config.development.json │ │ ├── config.js │ │ ├── config.production.json │ │ └── config.staging.json │ ├── dash │ │ ├── dash.controller.js │ │ ├── dash.module.js │ │ ├── dash.scss │ │ └── tab-dash.html │ └── tabs │ │ └── tabs.html ├── css │ ├── scss │ │ ├── global.scss │ │ └── ionic.app.scss │ └── style.css ├── font │ └── .gitkeep ├── img │ └── .gitkeep ├── index.html ├── lib │ └── ionic │ │ ├── css │ │ ├── ionic.css │ │ └── ionic.min.css │ │ ├── fonts │ │ ├── ionicons.eot │ │ ├── ionicons.svg │ │ ├── ionicons.ttf │ │ └── ionicons.woff │ │ ├── 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 └── shared │ └── .gitkeep └── www └── .gitkeep /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "src/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 | www/* 8 | src/css/ionic.app.css 9 | src/lib 10 | src/app/config/config.js 11 | -------------------------------------------------------------------------------- /.stylelint: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "indentation": "spaces", 5 | "number-leading-zero": null 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ionic quickstarter with gulp 2 | 3 | ## Table of Contents 4 | 5 | 1. [Directory Structure Introduction](#directory-structure-introduction) 6 | 1. [Installation and usage](#Installation-and-usage) 7 | 1. [Switch development, staging and production mode](#Switch-development-staging-andproduction-mode) 8 | 1. [Ionic with gulp build](#Ionic-with-gulp-build) 9 | 1. [How to build an iOS ipa with Xcode](#How-to-build-an-iOS-ipa-with-Xcode) 10 | 1. [Factories](#factories) 11 | 12 | 13 | ## Directory Structure Introduction 14 | 15 | To support bigger apps, the starter app is structured differently than the basic `tabs starter app`. 16 | 17 | The `tabs starter app` lumps all the `route` definitions and `controllers` in one Javascript file, and puts the html `templates` in a separate directory. 18 | 19 | Instead, we've chosen to organize the files on a Module basis: each Module is in its own directory containing the Javascript (controllers etc) and the HTML (templates) for that Module. This makes it easier to keep a large app organized and maintainable. 20 | 21 | ``` 22 | / 23 | | 24 | |- src/ 25 | | 26 | | | 27 | | |- app/ 28 | | | |- home/ 29 | | | | | 30 | | | | |- home.module.js 31 | | | | |- home.controller.js 32 | | | | |- home.directive.js 33 | | | | |- ($feature.$type.js) 34 | | | | |- home.html 35 | | | | |- home.scss 36 | | | | 37 | | | |- config/ 38 | | | | |- config.default.json 39 | | | | |- config.development.json 40 | | | | |- config.production.json 41 | | | | |- config.js 42 | | | | 43 | | | |- app.js 44 | | | |- app.routes.js 45 | | | |- app.services.js 46 | | | |- app.templates.js 47 | | | | 48 | | |- css/ 49 | | | |- scss/ 50 | | | | |- ionic.app.scss (index file) 51 | | | |- ionic.app.css (all css will be compiled into this file) 52 | | | | 53 | | |- img/ 54 | | | | 55 | | |- lib/ 56 | | | |- angular/ 57 | | | |- angular-resource 58 | | | |- ionic 59 | | |- shared/ (common components cross projects) 60 | | | |- canvasClock/ 61 | | | |- calendar/ 62 | | | |- constants/ 63 | | |- index.html 64 | | 65 | |- www 66 | ``` 67 | 68 | * `app` : components using for the app 69 | * `css` : common stylesheets, using `scss` 70 | * `img` : common images 71 | * `lib` : thrid-party libraries managed by `bower` 72 | * `shared` : common components cross projects 73 | * `www` : compile the source code for the production environment 74 | 75 | 76 | #### Separate "src" and "www" directories 77 | 78 | The app's sources (JavaScript, HTML, CSS) sit under `src` instead of under the default location `www`. 79 | 80 | During a production build (`gulp build --env production`), the sources (under `src`) are minified and concatenated and so on and the products (build artifacts, the minified/concatenated files) are then placed in the `www` directory, where Cordova (through the `gulp build --env production` or `ionic run --emulator -l` process) will pick them up. 81 | 82 | 83 | #### Modules 84 | 85 | General principle: ONE DIRECTORY == ONE MODULE (and one subdirectory == 1 sub module). 86 | 87 | So you can remove a module by removing that directory (but then you still need to remove the module reference from `app.js` - the script include in `index.html` will be removed automatically by the build process). 88 | 89 | Example: in the structure shown above you can see two Modules: `app.home`. 90 | 91 | --- 92 | 93 | ## Installation and usage 94 | 95 | #### Install Node 96 | You’d better use [nvm](https://github.com/creationix/nvm) to manage your node.js versions: 97 | 98 | curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.0/install.sh | bash 99 | source ~/.nvm/nvm.sh 100 | nvm install 0.12.7 101 | nvm use 0.12.7 102 | nvm alias default stable # set 0.12.7 as default node version, not necessary 103 | 104 | **PS:** There are two options of node version in ionic. Typically, choose the older version(0.12.7) of node will make everything works fine. But if you want to use the newer version(such as 4.1.5 or 4.2), you have to change some setting in package.json: 105 | 106 | - "gulp-sass": "^1.3.3", 107 | + "gulp-sass": "^2.0.4", 108 | 109 | If you haven't change this, you may get some error when you `npm install`. When you run your app with `ionic serve` or `ionic emulate ios`, you found that scss compile failed and throw an error with `Error: The libsass binding was not found`. 110 | 111 | #### Install Ionic & Cordova 112 | 113 | npm install -g cordova ionic 114 | npm install -g ios-deploy # for ios deploy 115 | npm install -g ios-sim # for ios simulator 116 | 117 | #### Clone Repo 118 | 119 | git clone git@github.com:chenbin92/ionic-quickstarter-with-gulp.git 120 | cd ionic-quickstarter-with-gulp 121 | 122 | 123 | #### Install Dependencies 124 | 125 | We have two kinds of dependencies in this project: `npm` and `bower` 126 | 127 | npm install 128 | bower install 129 | 130 | Run the installed，you should find that you have two new folders in your project 131 | 132 | * `node_modules` - contains the npm packages for the tools we need 133 | 134 | * `app/lib` - contains the angular framework files and thrid-party libraries 135 | 136 | Notes: 137 | 138 | 1. We use `npm` managing Node.js modules(node_modules), use `bower` installing third-party scripts(lib); The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user). 139 | 140 | 2. demo for adding the plugin "ion-image-lazy-load" 141 | 142 | 1. `bower install ion-image-lazy-load --save` # this will update `bower.json` and create file in `src/lib/ion-image-lazy-load` 143 | 2. rerquire "ion-image-lazy-load --save" in glupfile.js 144 | 145 | ``` 146 | var paths = { 147 | 148 | lib: [ 149 | './src/lib/ion-image-lazy-load/ionic-image-lazy-load.js' 150 | ] 151 | ``` 152 | 153 | #### Build IOS project and run on emulate 154 | $ ionic platform add ios 155 | $ ionic build ios 156 | $ gulp build 157 | $ ionic emulate ios # run your ios app in emulator 158 | 159 | #### Run the Application on browser 160 | $ gulp build # equals `gulp build --env development` 161 | $ ionic serve # run this in another terminal window 162 | 163 | --- 164 | 165 | ## Switch development, staging and production mode 166 | 167 | If you do an ionic upload, then by default it will take your app from the `www` folder, not from `src`. This is because ionic upload takes the setting from the `ionic.project` file. 168 | 169 | 170 | ``` 171 | # switch to development mode 172 | $ gulp build # same as running `gulp build --env development` 173 | ``` 174 | 175 | ``` 176 | # switch to staging mode 177 | $ gulp build --env staging 178 | ``` 179 | 180 | ``` 181 | // switch to production mode 182 | $ gulp build --env production 183 | ``` 184 | 185 | then run project in borwser, emulator or device 186 | 187 | ``` 188 | # run in borwser 189 | $ ionic serve 190 | 191 | # prepare the source for xcode 192 | $ ionic build ios 193 | 194 | # run on emulator 195 | $ ionic emulate ios -l 196 | 197 | # or run on device 198 | $ npm install -g ios-deploy 199 | $ ionic run ios --device -l -c 200 | ``` 201 | 202 | 203 | ### notes for multi enviorment 204 | 205 | set up the gulp file and the starter app in such a way that there are essentially 3 distinct 'modes': 206 | 207 | * `development` mode which is what you use when running `ionic serve` and `gup build` (running in the browser) 208 | * `staging` mode which is what you use `gulp build --env staging` and `ionic run ios --device -l` (running on a device) 209 | * `production` mode which is what you use with `gulp build` and `ionic run ios --device -l` (running on a device) 210 | 211 | #### Development mode 212 | 213 | In development mode, the gulp build process is simple: no minification, concatenation etc. 214 | 215 | By default, in development mode, the various services (login etc) use a "mock" implementation with fake data (but you can easily override this through configuration parameters). 216 | 217 | To define configuration parameters for development mode, add them to `src/js/config/config-development.json`. The `gulp build` process will write these values to `src/js/config/config.js`. 218 | 219 | #### Staging mode 220 | 221 | In staging mode (used on a real device), the `gulp build --env staging` process does a complete build including minification, concatenation etc, and the app runs with 'real' services. 222 | 223 | To define configuration parameters for development mode, add them to `src/js/config/config-staging.json`. The gulp build process will write these values to `src/js/config/config.js`. 224 | 225 | #### Production mode 226 | 227 | In production mode (used on a real device), the `gulp build --env production` process similar to the staging, In addition to setting the API path. 228 | 229 | (e.g. the Parse service for login, but you can replace this with an implementation of your own) 230 | 231 | To define configuration parameters for development mode, add them to `src/js/config/config-production.json`. The gulp build process will write these values to `src/js/config/config.js`. 232 | 233 | 234 | ### Ionic with gulp build 235 | 236 | ##### gulp build process 237 | 238 | ![gulp build process](http://7xr387.com1.z0.glb.clouddn.com/ionic-with-gulp-build-process.png.png) 239 | 240 | ##### gulp build task 241 | ![gulp build task](http://7xr387.com1.z0.glb.clouddn.com/Ionic-with-gulp-build2.png) 242 | 243 | ##### Using gulp switch different environments 244 | [ GIF demo](http://7xr387.com1.z0.glb.clouddn.com/ionic-with-gulp-build-process.gif) 245 | 246 | --- 247 | 248 | ## How to build an iOS ipa with Xcode 249 | 250 | 1. `$ gulp build --env production` 251 | 2. `$ ionic build ios` 252 | 3. open platforms/ios/ProkectName.xcodeproj 253 | 4. choose `Generic iOS Device` for `Set the active scheme` 254 | 5. click `Product > Archive` 255 | 6. Upload to App Store or Export(Save for Enterprise Deployment) 256 | 257 | ## Refs 258 | 259 | 1. [angular styleguide](https://github.com/johnpapa/angular-styleguide/tree/master/a1) 260 | 2. [ionic quickstarter](https://github.com/leob/ionic-quickstarter) 261 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HelloIonic", 3 | "private": "true", 4 | "devDependencies": { 5 | "ionic": "driftyco/ionic-bower#1.2.4" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | ionic-quickstarter-with-gulp 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 | var del = require('del'); 10 | var gulpCopy = require('gulp-copy'); 11 | var watch = require('gulp-watch'); 12 | /** 13 | * Linting Sass stylesheets with Stylelint 14 | * http://www.creativenightly.com/2016/02/How-to-lint-your-css-with-stylelint/ 15 | */ 16 | var postcss = require('gulp-postcss'); 17 | var reporter = require('postcss-reporter'); 18 | var syntax_scss = require('postcss-scss'); 19 | var stylelint = require('stylelint'); 20 | 21 | var ngConstant = require('gulp-ng-constant'); 22 | var extend = require('gulp-extend'); 23 | var args = require('yargs').argv; 24 | 25 | var templateCache = require('gulp-angular-templatecache'); 26 | var minifyHtml = require('gulp-minify-html'); 27 | 28 | var imagemin = require('gulp-imagemin'); 29 | 30 | var uglify = require("gulp-uglify"); 31 | var ngAnnotate = require('gulp-ng-annotate'); 32 | 33 | var inject = require('gulp-inject'); 34 | 35 | var htmlreplace = require('gulp-html-replace'); 36 | 37 | /** 38 | * This is intended to be a temporary solution until the release of gulp 4.0 which has support 39 | * for defining task dependencies in series or in parallel. 40 | */ 41 | var runSequence = require('run-sequence'); 42 | 43 | // 44 | // === PATHS === 45 | // 46 | 47 | var files = { 48 | jsbundle: 'app.bundle.min.js', 49 | appcss: 'app.css', 50 | ionicappmincss: 'ionic.app.min.css', 51 | ionicbundle: 'ionic.bundle.min.js' // change to 'ionic.bundle.js' for debugging moduleErr errors 52 | }; 53 | 54 | var paths = { 55 | html: ['./src/*.html'], 56 | sass: ['./src/css/scss/*.scss'], 57 | templates: ['./src/app/**/*.html'], 58 | images: ['./src/app/**/img/*'], 59 | commonimages: ['./src/img/*'], 60 | scripts: ['./src/app/*.js','./src/app/**/*.module.js','./src/app/**/*.js'], 61 | dist: ['./www'], 62 | 63 | lib: [ 64 | './src/lib/ionic/js/ionic.bundle.js', 65 | './src/lib/angular-resource/angular-resource.js', 66 | './src/lib/collide/collide.js', 67 | './src/lib/ionic-contrib-tinder-cards/ionic.tdcards.js', 68 | ] 69 | }; 70 | 71 | // 72 | // === TOP LEVEL TASKS (invoke with "gulp ") === 73 | // 74 | 75 | // default task for DEV 76 | gulp.task('default', ['inject-libs-to-index-html']); 77 | 78 | // build task for Development mode、 Staging mode or Production mode 79 | var developmentTask, 80 | stagingTask, 81 | productionTask; 82 | 83 | // development task 84 | developmentTask = ['sass', 'set-api-config', 'copy-src-to-dest', 'watch-src-folder']; 85 | 86 | // production task 87 | productionTask = ['sass', 'index', 'templates', 'copy-fonts', 'set-api-config', 'imagemin', 'common-imagemin', 'scripts', 'minify-third-library-js']; 88 | 89 | // staging task 90 | stagingTask = productionTask; 91 | 92 | gulp.task('build', function(callback){ 93 | runSequence('clean', 94 | eval((args.env || "development") + "Task"), 95 | function(){ 96 | if(!args.env || (args.env == "development")) { 97 | gutil.log(gutil.colors.yellow('Watching and auto synchronizing the change from src to www, Ctrl-C to stop watching and quit')); 98 | } 99 | }); 100 | }) 101 | 102 | // 103 | // === CHILD TASKS === 104 | // 105 | 106 | // sass task 107 | // ================================================================= 108 | gulp.task('sass', function(done) { 109 | gulp.src('./src/css/scss/ionic.app.scss') 110 | .pipe(sass()) 111 | .on('error', sass.logError) 112 | .pipe(gulp.dest('./src/css/')) 113 | .pipe(minifyCss({ 114 | keepSpecialComments: 0 115 | })) 116 | .pipe(rename({ extname: '.min.css' })) 117 | .pipe(gulp.dest('./www/css/')) 118 | .on('end', done); 119 | }); 120 | 121 | gulp.task('watch', function() { 122 | gulp.watch(paths.sass, ['sass']); 123 | }); 124 | 125 | // 126 | // === CHILD TASKS === 127 | // 128 | 129 | // clean task 130 | // ================================================================= 131 | gulp.task('clean', function (cb) { 132 | return del([ 133 | paths.dist + '/**/*' 134 | ], cb); 135 | }); 136 | 137 | // copy all files under the SRC to the WWW directory 138 | // ================================================================= 139 | gulp.task('copy-src-to-dest', function() { 140 | gulp.src(['./src/**/*','./src/index.html']) 141 | .pipe(gulp.dest('./www')); 142 | }); 143 | 144 | // watch SRC folder 145 | // ================================================================= 146 | gulp.task('watch-src-folder', function() { 147 | gulp.src(['./src/*','./src/**/*'], {base: './src'}) 148 | .pipe(watch('./src', {base: './src'})) 149 | .pipe(gulp.dest('./www')); 150 | }); 151 | 152 | // automatic injection third library script in the index file 153 | // ================================================================= 154 | gulp.task('inject-libs-to-index-html', function() { 155 | gulp.src('./src/index.html') 156 | .pipe(inject(gulp.src(paths.lib,{read: false}),{relative: true})) 157 | .pipe(gulp.dest('./src')); 158 | }); 159 | 160 | // scss lint 161 | // ================================================================= 162 | gulp.task("scss-lint", function() { 163 | 164 | // stylelint config rules 165 | var stylelintConfig = { 166 | "extends": "stylelint-config-standard", 167 | "rules": { 168 | "indentation": [ 2, { 169 | "warn": true, 170 | "except": ["param"], 171 | "message": "Please use 2 spaces for indentation. Tabs make The Architect grumpy." 172 | } ], 173 | "number-leading-zero": null, 174 | } 175 | } 176 | 177 | var processors = [ 178 | stylelint(stylelintConfig), 179 | reporter({ 180 | clearMessages: true, 181 | throwError: true, 182 | }) 183 | ]; 184 | 185 | return gulp.src(['./src/css/scss/*.scss']) 186 | .pipe(postcss(processors), {syntax: syntax_scss}); 187 | }); 188 | 189 | // api config 190 | // ================================================================= 191 | var config = function(env) { 192 | gulp.src(['./src/app/config/config.default.json', 'src/app/config/config.' + env + '.json']) 193 | .pipe(extend('config.json', true)) 194 | .pipe(ngConstant({ 195 | name: 'starter.configs', 196 | deps: [], 197 | })) 198 | .pipe(rename(function(path) { 199 | path.basename = 'config'; 200 | path.extname = '.js'; 201 | })) 202 | .pipe(gulp.dest('src/app/config')); 203 | }; 204 | 205 | gulp.task('set-api-config', function() { 206 | config(args.env || "development") 207 | }) 208 | 209 | // templatesCache task 210 | // ================================================================= 211 | gulp.task('templates', function() { 212 | gulp.src(paths.templates) 213 | .pipe(minifyHtml({empty: true})) 214 | .pipe(templateCache({ 215 | standalone: true, 216 | root: 'app' 217 | })) 218 | .pipe(gulp.dest(paths.dist + '/js')); 219 | }); 220 | 221 | 222 | // imagemin images and output them in dist 223 | // ================================================================= 224 | gulp.task('imagemin', function() { 225 | gulp.src(paths.images) 226 | .pipe(imagemin()) 227 | .pipe(gulp.dest(paths.dist + '/app')); 228 | }); 229 | 230 | gulp.task('common-imagemin', function() { 231 | gulp.src(paths.commonimages) 232 | .pipe(imagemin()) 233 | .pipe(gulp.dest(paths.dist + '/img')); 234 | }); 235 | 236 | // minify third library script 237 | // ================================================================= 238 | gulp.task('minify-third-library-js', function() { 239 | gulp.src(paths.lib) 240 | .pipe(uglify()) 241 | .pipe(concat('app.plugin.min.js')) 242 | .pipe(gulp.dest(paths.dist + '/js')); 243 | }); 244 | 245 | // prepare Index.html for dist - ie. using min files 246 | // ================================================================= 247 | gulp.task('index', function() { 248 | gulp.src(paths.html) 249 | .pipe(htmlreplace({ 250 | 'sass': 'css/ionic.app.min.css', 251 | 'css': 'css/app.min.css', 252 | 'js': 'js/app.bundle.min.js', 253 | 'third-library-js': 'js/app.plugin.min.js', 254 | 'templates': 'js/templates.js', 255 | 'shared': 'shared/services/app.services.min.js', 256 | 'ionic': 'lib/ionic/js/' + files.ionicbundle 257 | })) 258 | .pipe(gulp.dest(paths.dist + '/.')); 259 | }); 260 | 261 | gulp.task('install', ['git-check'], function() { 262 | return bower.commands.install() 263 | .on('log', function(data) { 264 | gutil.log('bower', gutil.colors.cyan(data.id), data.message); 265 | }); 266 | }); 267 | 268 | // scripts task 269 | // ================================================================= 270 | gulp.task('scripts', function() { 271 | gulp.src(paths.scripts) 272 | .pipe(ngAnnotate({ 273 | remove: true, 274 | add: true, 275 | single_quotes: true 276 | })) 277 | .pipe(uglify()) 278 | .pipe(concat('app.bundle.min.js')) 279 | .pipe(gulp.dest(paths.dist + '/js')); 280 | }); 281 | 282 | 283 | // copy fonts task 284 | gulp.task('copy-fonts', function() { 285 | return gulp.src(['./src/font/*', './src/lib/ionic/fonts/*']) 286 | .pipe(gulpCopy(paths.dist,{prefix: 1})); 287 | }); 288 | 289 | // 290 | // === OTHER TASKS (used by Ionic CLI default) === 291 | // 292 | 293 | gulp.task('git-check', function(done) { 294 | if (!sh.which('git')) { 295 | console.log( 296 | ' ' + gutil.colors.red('Git is not installed.'), 297 | '\n Git, the version control system, is required to download Ionic.', 298 | '\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.', 299 | '\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.' 300 | ); 301 | process.exit(1); 302 | } 303 | done(); 304 | }); 305 | -------------------------------------------------------------------------------- /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 | Enable Friends 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/app/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.services' is found in services.js 7 | // 'starter.controllers' is found in controllers.js 8 | angular.module('starter', [ 9 | 'ionic', 10 | 'ionic.contrib.ui.tinderCards', 11 | 12 | 'starter.services', 13 | 'starter.routes', 14 | 'starter.configs', 15 | 16 | 'starter.dash', 17 | 'starter.chats', 18 | 19 | 'templates' 20 | ]) 21 | 22 | .run(function($ionicPlatform) { 23 | $ionicPlatform.ready(function() { 24 | // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 25 | // for form inputs) 26 | if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { 27 | cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 28 | cordova.plugins.Keyboard.disableScroll(true); 29 | 30 | } 31 | if (window.StatusBar) { 32 | // org.apache.cordova.statusbar required 33 | StatusBar.styleDefault(); 34 | } 35 | }); 36 | }) 37 | -------------------------------------------------------------------------------- /src/app/app.routes.js: -------------------------------------------------------------------------------- 1 | // Routes config 2 | angular.module('starter.routes', []) 3 | 4 | 5 | .config(function($stateProvider, $urlRouterProvider) { 6 | 7 | // Ionic uses AngularUI Router which uses the concept of states 8 | // Learn more here: https://github.com/angular-ui/ui-router 9 | // Set up the various states which the app can be in. 10 | // Each state's controller can be found in controllers.js 11 | $stateProvider 12 | 13 | // setup an abstract state for the tabs directive 14 | .state('tab', { 15 | url: '/tab', 16 | abstract: true, 17 | templateUrl: 'app/tabs/tabs.html' 18 | }) 19 | 20 | // Each tab has its own nav history stack: 21 | 22 | .state('tab.dash', { 23 | url: '/dash', 24 | views: { 25 | 'tab-dash': { 26 | templateUrl: 'app/dash/tab-dash.html', 27 | controller: 'DashController' 28 | } 29 | } 30 | }) 31 | 32 | .state('tab.chats', { 33 | url: '/chats', 34 | views: { 35 | 'tab-chats': { 36 | templateUrl: 'app/chats/templates/tab-chats.html', 37 | controller: 'ChatsController' 38 | } 39 | } 40 | }) 41 | .state('tab.chat-detail', { 42 | url: '/chats/:chatId', 43 | views: { 44 | 'tab-chats': { 45 | templateUrl: 'app/chats/templates/chat-detail.html', 46 | controller: 'ChatDetailController' 47 | } 48 | } 49 | }) 50 | 51 | .state('tab.account', { 52 | url: '/account', 53 | views: { 54 | 'tab-account': { 55 | templateUrl: 'app/account/tab-account.html' 56 | } 57 | } 58 | }); 59 | 60 | // if none of the above states are matched, use this as the fallback 61 | $urlRouterProvider.otherwise('/tab/dash'); 62 | 63 | }); 64 | -------------------------------------------------------------------------------- /src/app/app.templates.js: -------------------------------------------------------------------------------- 1 | // THIS IS A PLACEHOLDER, TO BE REPLACED DURING PRODUCTION BUILDS BY GULP-ANGULAR-TEMPLATECACHE - DO NOT REMOVE ! 2 | angular.module("templates", []); 3 | -------------------------------------------------------------------------------- /src/app/chats/chats.module.js: -------------------------------------------------------------------------------- 1 | // Chats module 2 | (function() { 3 | 'use strict'; 4 | 5 | angular.module('starter.chats', []); 6 | 7 | })(); 8 | -------------------------------------------------------------------------------- /src/app/chats/chats.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/app/chats/chats.scss -------------------------------------------------------------------------------- /src/app/chats/chats.service.js: -------------------------------------------------------------------------------- 1 | angular.module('starter.services', []) 2 | 3 | .factory('Chats', function() { 4 | // Might use a resource here that returns a JSON array 5 | 6 | // Some fake testing data 7 | var chats = [{ 8 | id: 0, 9 | name: 'Ben Sparrow', 10 | lastText: 'You on your way?', 11 | face: 'app/chats/img/ben.png' 12 | }, { 13 | id: 1, 14 | name: 'Max Lynx', 15 | lastText: 'Hey, it\'s me', 16 | face: 'app/chats/img/max.png' 17 | }, { 18 | id: 2, 19 | name: 'Adam Bradleyson', 20 | lastText: 'I should buy a boat', 21 | face: 'app/chats/img/adam.jpg' 22 | }, { 23 | id: 3, 24 | name: 'Perry Governor', 25 | lastText: 'Look at my mukluks!', 26 | face: 'app/chats/img/perry.png' 27 | }, { 28 | id: 4, 29 | name: 'Mike Harrington', 30 | lastText: 'This is wicked good ice cream.', 31 | face: 'app/chats/img/mike.png' 32 | }]; 33 | 34 | return { 35 | all: function() { 36 | return chats; 37 | }, 38 | remove: function(chat) { 39 | chats.splice(chats.indexOf(chat), 1); 40 | }, 41 | get: function(chatId) { 42 | for (var i = 0; i < chats.length; i++) { 43 | if (chats[i].id === parseInt(chatId)) { 44 | return chats[i]; 45 | } 46 | } 47 | return null; 48 | } 49 | }; 50 | }); 51 | -------------------------------------------------------------------------------- /src/app/chats/controllers/chats.controller.js: -------------------------------------------------------------------------------- 1 | // chats controller 2 | // Using javaScript closures, wrap Angular components in an Immediately Invoked Function Expression(IIFE). 3 | // Why?: An IIFE removes variables from the global scope. This helps prevent variables and function declarations from living longer than expected in the global scope, which also helps avoid variable collisions. 4 | 5 | // Why?: When your code is minified and bundled into a single file for deployment to a production server, you could have collisions of variables and many global variables. An IIFE protects you against both of these by providing variable scope for each file. 6 | 7 | (function() { 8 | 'use strict'; 9 | 10 | angular 11 | .module('starter.chats') 12 | .controller('ChatsController', ChatsController); 13 | 14 | ChatsController.$inject = ['$scope', 'Chats']; 15 | 16 | function ChatsController($scope, Chats) { 17 | $scope.chats = Chats.all(); 18 | $scope.remove = function(chat) { 19 | Chats.remove(chat); 20 | }; 21 | } 22 | })(); 23 | -------------------------------------------------------------------------------- /src/app/chats/controllers/chats_details.controller.js: -------------------------------------------------------------------------------- 1 | // chat details controller 2 | // Using javaScript closures, wrap Angular components in an Immediately Invoked Function Expression(IIFE). 3 | // Why?: An IIFE removes variables from the global scope. This helps prevent variables and function declarations from living longer than expected in the global scope, which also helps avoid variable collisions. 4 | 5 | // Why?: When your code is minified and bundled into a single file for deployment to a production server, you could have collisions of variables and many global variables. An IIFE protects you against both of these by providing variable scope for each file. 6 | 7 | (function() { 8 | 'use strict'; 9 | 10 | angular 11 | .module('starter.chats') 12 | .controller('ChatDetailController', ChatDetailController); 13 | 14 | ChatDetailController.$inject = ['$scope', '$stateParams', 'Chats']; 15 | 16 | function ChatDetailController($scope, $stateParams, Chats) { 17 | $scope.chat = Chats.get($stateParams.chatId); 18 | } 19 | })(); 20 | -------------------------------------------------------------------------------- /src/app/chats/img/adam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/app/chats/img/adam.jpg -------------------------------------------------------------------------------- /src/app/chats/img/ben.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/app/chats/img/ben.png -------------------------------------------------------------------------------- /src/app/chats/img/ionic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/app/chats/img/ionic.png -------------------------------------------------------------------------------- /src/app/chats/img/max.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/app/chats/img/max.png -------------------------------------------------------------------------------- /src/app/chats/img/mike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/app/chats/img/mike.png -------------------------------------------------------------------------------- /src/app/chats/img/perry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/app/chats/img/perry.png -------------------------------------------------------------------------------- /src/app/chats/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/app/chats/logo.png -------------------------------------------------------------------------------- /src/app/chats/templates/chat-detail.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 |

11 | {{chat.lastText}} 12 |

13 | 14 | 15 | -------------------------------------------------------------------------------- /src/app/chats/templates/tab-chats.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

{{chat.name}}

7 |

{{chat.lastText}}

8 | 9 | 10 | 11 | Delete 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/app/config/config.default.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starter.configs", 3 | "constants": { 4 | "BaseConfiguration": { 5 | "url": "https://www.example.com", 6 | "debug": false 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/app/config/config.development.json: -------------------------------------------------------------------------------- 1 | { 2 | "constants": { 3 | "APP": { 4 | "devMode": true 5 | }, 6 | "ServerConfiguration": { 7 | "baseApiUrl": "http://localhost:3000/api/v1/", 8 | "domain": "http://localhost:3000" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/config/config.js: -------------------------------------------------------------------------------- 1 | angular.module("starter.configs", []) 2 | 3 | .constant("BaseConfiguration", { 4 | "url": "https://www.example.com", 5 | "debug": false 6 | }) 7 | 8 | .constant("APP", { 9 | "devMode": true 10 | }) 11 | 12 | .constant("ServerConfiguration", { 13 | "baseApiUrl": "http://localhost:3000/api/v1/", 14 | "domain": "http://localhost:3000" 15 | }) 16 | 17 | ; -------------------------------------------------------------------------------- /src/app/config/config.production.json: -------------------------------------------------------------------------------- 1 | { 2 | "constants": { 3 | "APP": { 4 | "devMode": false 5 | }, 6 | "ServerConfiguration": { 7 | "baseApiUrl": "http://www.production.com/api/v1/", 8 | "domain": "http://www.production.com" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/config/config.staging.json: -------------------------------------------------------------------------------- 1 | { 2 | "constants": { 3 | "APP": { 4 | "devMode": false 5 | }, 6 | "ServerConfiguration": { 7 | "baseApiUrl": "http://staging.com/api/v1/", 8 | "domain": "http://staging.com" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/dash/dash.controller.js: -------------------------------------------------------------------------------- 1 | // Dash controller 2 | // Using javaScript closures, wrap Angular components in an Immediately Invoked Function Expression(IIFE). 3 | // Why?: An IIFE removes variables from the global scope. This helps prevent variables and function declarations from living longer than expected in the global scope, which also helps avoid variable collisions. 4 | 5 | // Why?: When your code is minified and bundled into a single file for deployment to a production server, you could have collisions of variables and many global variables. An IIFE protects you against both of these by providing variable scope for each file. 6 | 7 | (function() { 8 | 'use strict'; 9 | 10 | angular 11 | .module('starter.dash') 12 | .controller('DashController', DashController); 13 | 14 | DashController.$inject = ['$scope']; 15 | 16 | function DashController($scope) { 17 | var cardTypes = [ 18 | { image: 'http://photos.breadtrip.com/photo_2016_02_18_e76cff35507b001d268ad8885182567c.jpg' }, 19 | { image: 'http://photos.breadtrip.com/photo_2016_02_18_b9b21af2a303377073fa0b4747e56cd1.jpg' }, 20 | { image: 'http://photos.breadtrip.com/photo_2016_02_16_736b4371ad405f0259986389e27d9afa.jpg' }, 21 | { image: 'http://photos.breadtrip.com/photo_2016_02_18_a90a91877a78a36e3fa1aae635c2f218.jpg' }, 22 | { image: 'http://photos.breadtrip.com/photo_2016_02_18_e2247394433b702fd42b817ba6b79d3f.jpg' }, 23 | { image: 'http://photos.breadtrip.com/photo_2016_02_18_f431943200ad20990b0afde81aa81ee3.jpg' }, 24 | { image: 'http://photos.breadtrip.com/photo_2016_02_18_cf723fdb547da5b74308c3dfd2d9e89c.jpg' }, 25 | ]; 26 | 27 | $scope.cards = Array.prototype.slice.call(cardTypes, 0); 28 | 29 | $scope.cardDestroyed = function(index) { 30 | $scope.cards.splice(index, 1); 31 | }; 32 | 33 | $scope.addCard = function() { 34 | var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)]; 35 | newCard.id = Math.random(); 36 | $scope.cards.push(angular.extend({}, newCard)); 37 | }; 38 | 39 | $scope.cardSwipedLeft = function(index) { 40 | console.log('LEFT SWIPE'); 41 | $scope.addCard(); 42 | }; 43 | $scope.cardSwipedRight = function(index) { 44 | console.log('RIGHT SWIPE'); 45 | $scope.addCard(); 46 | }; 47 | } 48 | })(); 49 | -------------------------------------------------------------------------------- /src/app/dash/dash.module.js: -------------------------------------------------------------------------------- 1 | // Dash module 2 | (function() { 3 | 'use strict'; 4 | 5 | angular.module('starter.dash', []); 6 | 7 | })(); 8 | -------------------------------------------------------------------------------- /src/app/dash/dash.scss: -------------------------------------------------------------------------------- 1 | td-cards { 2 | display: block; 3 | } 4 | 5 | td-card { 6 | position: absolute; 7 | left: 50%; 8 | margin-bottom: 40px; 9 | margin-left: -150px; 10 | width: 300px; 11 | height: 300px; 12 | 13 | border: 1px solid #999; 14 | box-shadow: 0px 1px 3px rgba(0,0,0,0.2); 15 | border-radius: 6px; 16 | } 17 | 18 | td-card .image { 19 | position: relative; 20 | height: 300px; 21 | } 22 | 23 | td-card img { 24 | width: 100%; 25 | height: 300px; 26 | border-radius: 6px; 27 | } 28 | 29 | .yes-text { 30 | position: absolute; 31 | top: 10px; 32 | left: 10px; 33 | font-size: 30px; 34 | color: rgb(111, 250, 111); 35 | opacity: 0; 36 | } 37 | .no-text { 38 | position: absolute; 39 | top: 10px; 40 | right: 10px; 41 | font-size: 30px; 42 | color: rgb(255, 115, 115); 43 | opacity: 0; 44 | } 45 | 46 | .fade { 47 | -webkit-transition: 0.2s opacity linear; 48 | transition: 0.2s opacity linear; 49 | opacity: 0; 50 | } 51 | -------------------------------------------------------------------------------- /src/app/dash/tab-dash.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Welcome to Ionic

4 | 5 | 6 |
7 |
NOPE
8 | 9 |
LIKE
10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/css/scss/global.scss: -------------------------------------------------------------------------------- 1 | /* Golbal style */ 2 | h2 { 3 | color: red; 4 | } 5 | -------------------------------------------------------------------------------- /src/css/scss/ionic.app.scss: -------------------------------------------------------------------------------- 1 | /* 2 | To customize the look and feel of Ionic, you can override the variables 3 | in ionic's _variables.scss file. 4 | 5 | For example, you might change some of the default colors: 6 | 7 | $light: #fff !default; 8 | $stable: #f8f8f8 !default; 9 | $positive: #387ef5 !default; 10 | $calm: #11c1f3 !default; 11 | $balanced: #33cd5f !default; 12 | $energized: #ffc900 !default; 13 | $assertive: #ef473a !default; 14 | $royal: #886aea !default; 15 | $dark: #444 !default; 16 | */ 17 | 18 | // The path for our ionicons font files, relative to the built CSS in www/css 19 | $ionicons-font-path: "../lib/ionic/fonts" !default; 20 | 21 | // Include all of Ionic 22 | @import "src/lib/ionic/scss/ionic"; 23 | 24 | // Include all custom style 25 | @import 'global'; 26 | 27 | @import 'src/app/dash/dash'; 28 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | /* Empty. Add your own CSS if you like */ 2 | -------------------------------------------------------------------------------- /src/font/.gitkeep: -------------------------------------------------------------------------------- 1 | # custom font library 2 | -------------------------------------------------------------------------------- /src/img/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/img/.gitkeep -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 60 | 61 | 62 | 63 | 64 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/lib/ionic/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/lib/ionic/fonts/ionicons.eot -------------------------------------------------------------------------------- /src/lib/ionic/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/lib/ionic/fonts/ionicons.ttf -------------------------------------------------------------------------------- /src/lib/ionic/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenbin92/ionic-quickstarter-with-gulp/b3f8cccddc69d012dfbbe877e63345aed2299061/src/lib/ionic/fonts/ionicons.woff -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/lib/ionic/scss/_button-bar.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Button Bar 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .button-bar { 8 | @include display-flex(); 9 | @include flex(1); 10 | width: 100%; 11 | 12 | &.button-bar-inline { 13 | display: block; 14 | width: auto; 15 | 16 | @include clearfix(); 17 | 18 | > .button { 19 | width: auto; 20 | display: inline-block; 21 | float: left; 22 | } 23 | } 24 | } 25 | 26 | .button-bar > .button { 27 | @include flex(1); 28 | display: block; 29 | 30 | overflow: hidden; 31 | 32 | padding: 0 16px; 33 | 34 | width: 0; 35 | 36 | border-width: 1px 0px 1px 1px; 37 | border-radius: 0; 38 | text-align: center; 39 | text-overflow: ellipsis; 40 | white-space: nowrap; 41 | 42 | &:before, 43 | .icon:before { 44 | line-height: 44px; 45 | } 46 | 47 | &:first-child { 48 | border-radius: $button-border-radius 0px 0px $button-border-radius; 49 | } 50 | &:last-child { 51 | border-right-width: 1px; 52 | border-radius: 0px $button-border-radius $button-border-radius 0px; 53 | } 54 | &:only-child { 55 | border-radius: $button-border-radius; 56 | } 57 | } 58 | 59 | .button-bar > .button-small { 60 | &:before, 61 | .icon:before { 62 | line-height: 28px; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/lib/ionic/scss/_reset.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Resets 4 | * -------------------------------------------------- 5 | * Adapted from normalize.css and some reset.css. We don't care even one 6 | * bit about old IE, so we don't need any hacks for that in here. 7 | * 8 | * There are probably other things we could remove here, as well. 9 | * 10 | * normalize.css v2.1.2 | MIT License | git.io/normalize 11 | 12 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 13 | * http://cssreset.com 14 | */ 15 | 16 | html, body, div, span, applet, object, iframe, 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 | a, abbr, acronym, address, big, cite, code, 19 | del, dfn, em, img, ins, kbd, q, s, samp, 20 | small, strike, strong, sub, sup, tt, var, 21 | b, i, u, center, 22 | dl, dt, dd, ol, ul, li, 23 | fieldset, form, label, legend, 24 | table, caption, tbody, tfoot, thead, tr, th, td, 25 | article, aside, canvas, details, embed, fieldset, 26 | figure, figcaption, footer, header, hgroup, 27 | menu, nav, output, ruby, section, summary, 28 | time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | vertical-align: baseline; 33 | font: inherit; 34 | font-size: 100%; 35 | } 36 | 37 | ol, ul { 38 | list-style: none; 39 | } 40 | blockquote, q { 41 | quotes: none; 42 | } 43 | blockquote:before, blockquote:after, 44 | q:before, q:after { 45 | content: ''; 46 | content: none; 47 | } 48 | 49 | /** 50 | * Prevent modern browsers from displaying `audio` without controls. 51 | * Remove excess height in iOS 5 devices. 52 | */ 53 | 54 | audio:not([controls]) { 55 | display: none; 56 | height: 0; 57 | } 58 | 59 | /** 60 | * Hide the `template` element in IE, Safari, and Firefox < 22. 61 | */ 62 | 63 | [hidden], 64 | template { 65 | display: none; 66 | } 67 | 68 | script { 69 | display: none !important; 70 | } 71 | 72 | /* ========================================================================== 73 | Base 74 | ========================================================================== */ 75 | 76 | /** 77 | * 1. Set default font family to sans-serif. 78 | * 2. Prevent iOS text size adjust after orientation change, without disabling 79 | * user zoom. 80 | */ 81 | 82 | html { 83 | @include user-select(none); 84 | font-family: sans-serif; /* 1 */ 85 | -webkit-text-size-adjust: 100%; 86 | -ms-text-size-adjust: 100%; /* 2 */ 87 | -webkit-text-size-adjust: 100%; /* 2 */ 88 | } 89 | 90 | /** 91 | * Remove default margin. 92 | */ 93 | 94 | body { 95 | margin: 0; 96 | line-height: 1; 97 | } 98 | 99 | 100 | /** 101 | * Remove default outlines. 102 | */ 103 | a, 104 | button, 105 | :focus, 106 | a:focus, 107 | button:focus, 108 | a:active, 109 | a:hover { 110 | outline: 0; 111 | } 112 | 113 | /* * 114 | * Remove tap highlight color 115 | */ 116 | 117 | a { 118 | -webkit-user-drag: none; 119 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 120 | -webkit-tap-highlight-color: transparent; 121 | 122 | &[href]:hover { 123 | cursor: pointer; 124 | } 125 | } 126 | 127 | /* ========================================================================== 128 | Typography 129 | ========================================================================== */ 130 | 131 | 132 | /** 133 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 134 | */ 135 | 136 | b, 137 | strong { 138 | font-weight: bold; 139 | } 140 | 141 | /** 142 | * Address styling not present in Safari 5 and Chrome. 143 | */ 144 | 145 | dfn { 146 | font-style: italic; 147 | } 148 | 149 | /** 150 | * Address differences between Firefox and other browsers. 151 | */ 152 | 153 | hr { 154 | -moz-box-sizing: content-box; 155 | box-sizing: content-box; 156 | height: 0; 157 | } 158 | 159 | 160 | /** 161 | * Correct font family set oddly in Safari 5 and Chrome. 162 | */ 163 | 164 | code, 165 | kbd, 166 | pre, 167 | samp { 168 | font-size: 1em; 169 | font-family: monospace, serif; 170 | } 171 | 172 | /** 173 | * Improve readability of pre-formatted text in all browsers. 174 | */ 175 | 176 | pre { 177 | white-space: pre-wrap; 178 | } 179 | 180 | /** 181 | * Set consistent quote types. 182 | */ 183 | 184 | q { 185 | quotes: "\201C" "\201D" "\2018" "\2019"; 186 | } 187 | 188 | /** 189 | * Address inconsistent and variable font size in all browsers. 190 | */ 191 | 192 | small { 193 | font-size: 80%; 194 | } 195 | 196 | /** 197 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 198 | */ 199 | 200 | sub, 201 | sup { 202 | position: relative; 203 | vertical-align: baseline; 204 | font-size: 75%; 205 | line-height: 0; 206 | } 207 | 208 | sup { 209 | top: -0.5em; 210 | } 211 | 212 | sub { 213 | bottom: -0.25em; 214 | } 215 | 216 | /** 217 | * Define consistent border, margin, and padding. 218 | */ 219 | 220 | fieldset { 221 | margin: 0 2px; 222 | padding: 0.35em 0.625em 0.75em; 223 | border: 1px solid #c0c0c0; 224 | } 225 | 226 | /** 227 | * 1. Correct `color` not being inherited in IE 8/9. 228 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 229 | */ 230 | 231 | legend { 232 | padding: 0; /* 2 */ 233 | border: 0; /* 1 */ 234 | } 235 | 236 | /** 237 | * 1. Correct font family not being inherited in all browsers. 238 | * 2. Correct font size not being inherited in all browsers. 239 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 240 | * 4. Remove any default :focus styles 241 | * 5. Make sure webkit font smoothing is being inherited 242 | * 6. Remove default gradient in Android Firefox / FirefoxOS 243 | */ 244 | 245 | button, 246 | input, 247 | select, 248 | textarea { 249 | margin: 0; /* 3 */ 250 | font-size: 100%; /* 2 */ 251 | font-family: inherit; /* 1 */ 252 | outline-offset: 0; /* 4 */ 253 | outline-style: none; /* 4 */ 254 | outline-width: 0; /* 4 */ 255 | -webkit-font-smoothing: inherit; /* 5 */ 256 | background-image: none; /* 6 */ 257 | } 258 | 259 | /** 260 | * Address Firefox 4+ setting `line-height` on `input` using `importnt` in 261 | * the UA stylesheet. 262 | */ 263 | 264 | button, 265 | input { 266 | line-height: normal; 267 | } 268 | 269 | /** 270 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 271 | * All other form control elements do not inherit `text-transform` values. 272 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 273 | * Correct `select` style inheritance in Firefox 4+ and Opera. 274 | */ 275 | 276 | button, 277 | select { 278 | text-transform: none; 279 | } 280 | 281 | /** 282 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 283 | * and `video` controls. 284 | * 2. Correct inability to style clickable `input` types in iOS. 285 | * 3. Improve usability and consistency of cursor style between image-type 286 | * `input` and others. 287 | */ 288 | 289 | button, 290 | html input[type="button"], /* 1 */ 291 | input[type="reset"], 292 | input[type="submit"] { 293 | cursor: pointer; /* 3 */ 294 | -webkit-appearance: button; /* 2 */ 295 | } 296 | 297 | /** 298 | * Re-set default cursor for disabled elements. 299 | */ 300 | 301 | button[disabled], 302 | html input[disabled] { 303 | cursor: default; 304 | } 305 | 306 | /** 307 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 308 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 309 | * (include `-moz` to future-proof). 310 | */ 311 | 312 | input[type="search"] { 313 | -webkit-box-sizing: content-box; /* 2 */ 314 | -moz-box-sizing: content-box; 315 | box-sizing: content-box; 316 | -webkit-appearance: textfield; /* 1 */ 317 | } 318 | 319 | /** 320 | * Remove inner padding and search cancel button in Safari 5 and Chrome 321 | * on OS X. 322 | */ 323 | 324 | input[type="search"]::-webkit-search-cancel-button, 325 | input[type="search"]::-webkit-search-decoration { 326 | -webkit-appearance: none; 327 | } 328 | 329 | /** 330 | * Remove inner padding and border in Firefox 4+. 331 | */ 332 | 333 | button::-moz-focus-inner, 334 | input::-moz-focus-inner { 335 | padding: 0; 336 | border: 0; 337 | } 338 | 339 | /** 340 | * 1. Remove default vertical scrollbar in IE 8/9. 341 | * 2. Improve readability and alignment in all browsers. 342 | */ 343 | 344 | textarea { 345 | overflow: auto; /* 1 */ 346 | vertical-align: top; /* 2 */ 347 | } 348 | 349 | 350 | img { 351 | -webkit-user-drag: none; 352 | } 353 | 354 | /* ========================================================================== 355 | Tables 356 | ========================================================================== */ 357 | 358 | /** 359 | * Remove most spacing between table cells. 360 | */ 361 | 362 | table { 363 | border-spacing: 0; 364 | border-collapse: collapse; 365 | } 366 | -------------------------------------------------------------------------------- /src/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 | &.keyboard-up:not(.keyboard-up-confirm) { 219 | overflow: hidden; 220 | } 221 | } 222 | 223 | 224 | // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. 225 | // Note: For these to work, content must come after both bars in the markup 226 | /* If you change these, change platform.scss as well */ 227 | .has-header { 228 | top: $bar-height; 229 | } 230 | // Force no header 231 | .no-header { 232 | top: 0; 233 | } 234 | 235 | .has-subheader { 236 | top: $bar-height + $bar-subheader-height; 237 | } 238 | .has-tabs-top { 239 | top: $bar-height + $tabs-height; 240 | } 241 | .has-header.has-subheader.has-tabs-top { 242 | top: $bar-height + $bar-subheader-height + $tabs-height; 243 | } 244 | 245 | .has-footer { 246 | bottom: $bar-footer-height; 247 | } 248 | .has-subfooter { 249 | bottom: $bar-footer-height + $bar-subfooter-height; 250 | } 251 | 252 | .has-tabs, 253 | .bar-footer.has-tabs { 254 | bottom: $tabs-height; 255 | &.pane{ 256 | bottom: $tabs-height; 257 | height:auto; 258 | } 259 | } 260 | 261 | .bar-subfooter.has-tabs { 262 | bottom: $tabs-height + $bar-footer-height; 263 | } 264 | 265 | .has-footer.has-tabs { 266 | bottom: $tabs-height + $bar-footer-height; 267 | } 268 | 269 | // A full screen section with a solid background 270 | .pane { 271 | @include translate3d(0,0,0); 272 | @include transition-duration(0); 273 | z-index: $z-index-pane; 274 | } 275 | .view { 276 | z-index: $z-index-view; 277 | } 278 | .pane, 279 | .view { 280 | position: absolute; 281 | top: 0; 282 | right: 0; 283 | bottom: 0; 284 | left: 0; 285 | width: 100%; 286 | height: 100%; 287 | background-color: $base-background-color; 288 | overflow: hidden; 289 | } 290 | .view-container { 291 | position: absolute; 292 | display: block; 293 | width: 100%; 294 | height: 100%; 295 | } 296 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | ion-tabs { 281 | @include tabs-standard-color('tabs-color-active-light', $light, $dark); 282 | @include tabs-standard-color('tabs-color-active-stable', $stable, $dark); 283 | @include tabs-standard-color('tabs-color-active-positive', $positive, $dark); 284 | @include tabs-standard-color('tabs-color-active-calm', $calm, $dark); 285 | @include tabs-standard-color('tabs-color-active-assertive', $assertive, $dark); 286 | @include tabs-standard-color('tabs-color-active-balanced', $balanced, $dark); 287 | @include tabs-standard-color('tabs-color-active-energized',$energized, $dark); 288 | @include tabs-standard-color('tabs-color-active-royal', $royal, $dark); 289 | @include tabs-standard-color('tabs-color-active-dark', $dark, $light); 290 | } 291 | 292 | .tabs-top { 293 | &.tabs-striped { 294 | padding-bottom:0; 295 | .tab-item{ 296 | background: transparent; 297 | // animate the top bar, leave bottom for platform consistency 298 | -webkit-transition: color .1s ease; 299 | -moz-transition: color .1s ease; 300 | -ms-transition: color .1s ease; 301 | -o-transition: color .1s ease; 302 | transition: color .1s ease; 303 | &.tab-item-active, 304 | &.active, 305 | &.activated { 306 | margin-top: $tabs-striped-border-width - 1px; 307 | border-width: 0px 0px $tabs-striped-border-width 0px !important; 308 | border-style: solid; 309 | > .badge, > i{ 310 | margin-top: -$tabs-striped-border-width + 1px; 311 | } 312 | } 313 | .badge{ 314 | -webkit-transition: color .2s ease; 315 | -moz-transition: color .2s ease; 316 | -ms-transition: color .2s ease; 317 | -o-transition: color .2s ease; 318 | transition: color .2s ease; 319 | } 320 | } 321 | &:not(.tabs-icon-left):not(.tabs-icon-top){ 322 | .tab-item{ 323 | &.tab-item-active, 324 | &.active, 325 | &.activated { 326 | .tab-title, i{ 327 | display:block; 328 | margin-top: -$tabs-striped-border-width + 1px; 329 | } 330 | } 331 | } 332 | } 333 | &.tabs-icon-left{ 334 | .tab-item{ 335 | margin-top: 1px; 336 | &.tab-item-active, 337 | &.active, 338 | &.activated { 339 | .tab-title, i { 340 | margin-top: -0.1em; 341 | } 342 | } 343 | } 344 | } 345 | } 346 | } 347 | 348 | /* Allow parent element to have tabs-top */ 349 | /* If you change this, change platform.scss as well */ 350 | .tabs-top > .tabs, 351 | .tabs.tabs-top { 352 | top: $bar-height; 353 | padding-top: 0; 354 | background-position: bottom; 355 | border-top-width: 0; 356 | border-bottom-width: 1px; 357 | .tab-item { 358 | &.tab-item-active, 359 | &.active, 360 | &.activated { 361 | .badge { 362 | top: 4%; 363 | } 364 | } 365 | } 366 | } 367 | .tabs-top ~ .bar-header { 368 | border-bottom-width: 0; 369 | } 370 | 371 | .tab-item { 372 | @include flex(1); 373 | display: block; 374 | overflow: hidden; 375 | 376 | max-width: $tab-item-max-width; 377 | height: 100%; 378 | 379 | color: inherit; 380 | text-align: center; 381 | text-decoration: none; 382 | text-overflow: ellipsis; 383 | white-space: nowrap; 384 | 385 | font-weight: 400; 386 | font-size: $tabs-text-font-size; 387 | font-family: $font-family-sans-serif; 388 | 389 | opacity: 0.7; 390 | 391 | &:hover { 392 | cursor: pointer; 393 | } 394 | &.tab-hidden{ 395 | display:none; 396 | } 397 | } 398 | 399 | .tabs-item-hide > .tabs, 400 | .tabs.tabs-item-hide { 401 | display: none; 402 | } 403 | 404 | .tabs-icon-top > .tabs .tab-item, 405 | .tabs-icon-top.tabs .tab-item, 406 | .tabs-icon-bottom > .tabs .tab-item, 407 | .tabs-icon-bottom.tabs .tab-item { 408 | font-size: $tabs-text-font-size-side-icon; 409 | line-height: $tabs-text-font-size; 410 | } 411 | 412 | .tab-item .icon { 413 | display: block; 414 | margin: 0 auto; 415 | height: $tabs-icon-size; 416 | font-size: $tabs-icon-size; 417 | } 418 | 419 | .tabs-icon-left.tabs .tab-item, 420 | .tabs-icon-left > .tabs .tab-item, 421 | .tabs-icon-right.tabs .tab-item, 422 | .tabs-icon-right > .tabs .tab-item { 423 | font-size: $tabs-text-font-size-side-icon; 424 | 425 | .icon, .tab-title { 426 | display: inline-block; 427 | vertical-align: top; 428 | margin-top: -.1em; 429 | 430 | &:before { 431 | font-size: $tabs-icon-size - 8; 432 | line-height: $tabs-height; 433 | } 434 | } 435 | } 436 | 437 | .tabs-icon-left > .tabs .tab-item .icon, 438 | .tabs-icon-left.tabs .tab-item .icon { 439 | padding-right: 3px; 440 | } 441 | 442 | .tabs-icon-right > .tabs .tab-item .icon, 443 | .tabs-icon-right.tabs .tab-item .icon { 444 | padding-left: 3px; 445 | } 446 | 447 | .tabs-icon-only > .tabs .icon, 448 | .tabs-icon-only.tabs .icon { 449 | line-height: inherit; 450 | } 451 | 452 | 453 | .tab-item.has-badge { 454 | position: relative; 455 | } 456 | 457 | .tab-item .badge { 458 | position: absolute; 459 | top: 4%; 460 | right: 33%; // fallback 461 | right: calc(50% - 26px); 462 | padding: $tabs-badge-padding; 463 | height: auto; 464 | font-size: $tabs-badge-font-size; 465 | line-height: $tabs-badge-font-size + 4; 466 | } 467 | 468 | 469 | /* Navigational tab */ 470 | 471 | /* Active state for tab */ 472 | .tab-item.tab-item-active, 473 | .tab-item.active, 474 | .tab-item.activated { 475 | opacity: 1; 476 | 477 | &.tab-item-light { 478 | color: $light; 479 | } 480 | &.tab-item-stable { 481 | color: $stable; 482 | } 483 | &.tab-item-positive { 484 | color: $positive; 485 | } 486 | &.tab-item-calm { 487 | color: $calm; 488 | } 489 | &.tab-item-assertive { 490 | color: $assertive; 491 | } 492 | &.tab-item-balanced { 493 | color: $balanced; 494 | } 495 | &.tab-item-energized { 496 | color: $energized; 497 | } 498 | &.tab-item-royal { 499 | color: $royal; 500 | } 501 | &.tab-item-dark { 502 | color: $dark; 503 | } 504 | } 505 | 506 | .item.tabs { 507 | @include display-flex(); 508 | padding: 0; 509 | 510 | .icon:before { 511 | position: relative; 512 | } 513 | } 514 | 515 | .tab-item.disabled, 516 | .tab-item[disabled] { 517 | opacity: .4; 518 | cursor: default; 519 | pointer-events: none; 520 | } 521 | 522 | .nav-bar-tabs-top.hide ~ .view-container .tabs-top .tabs{ 523 | top: 0 524 | } 525 | .pane[hide-nav-bar="true"] .has-tabs-top{ 526 | top:$tabs-height 527 | } 528 | 529 | -------------------------------------------------------------------------------- /src/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 | /* (occured 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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | } -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/shared/.gitkeep: -------------------------------------------------------------------------------- 1 | # common components cross projects 2 | -------------------------------------------------------------------------------- /www/.gitkeep: -------------------------------------------------------------------------------- 1 | # Ignore contents of this directory (www) but not the directory itself. See: http://stackoverflow.com/a/5581995/2474068 2 | * 3 | !.gitignore 4 | 5 | # compile the source code for the production environment 6 | --------------------------------------------------------------------------------