├── .bowerrc ├── .buildignore ├── .gitignore ├── .travis.yml ├── .yo-rc.json ├── Gruntfile.js ├── Ionic-Theme-Editor.png ├── LICENSE.md ├── README.md ├── bower.json ├── client ├── .htaccess ├── .jshintrc ├── app │ ├── app.css │ ├── app.js │ ├── compiler │ │ ├── compiler.service.js │ │ └── compiler.service.spec.js │ ├── main │ │ ├── main.controller.js │ │ ├── main.controller.spec.js │ │ ├── main.css │ │ ├── main.html │ │ └── main.js │ └── theme │ │ ├── theme.directive.js │ │ └── theme.directive.spec.js ├── assets │ └── images │ │ ├── device.png │ │ ├── logo-pack │ │ ├── drifty-logo-transparent.png │ │ ├── ionic-logo-horizontal-transparent.png │ │ └── ionic-logo-white.svg │ │ ├── tailor-icon-white.png │ │ └── yeoman.png ├── components │ └── preview │ │ ├── avatar.jpg │ │ ├── cover.jpg │ │ ├── preview-buttons.html │ │ ├── preview-card.html │ │ ├── preview-components.html │ │ ├── preview-form.html │ │ ├── preview-header.html │ │ ├── preview-list.html │ │ └── preview-tabs.html ├── icon.ico ├── index.html └── robots.txt ├── e2e └── main │ ├── main.po.js │ └── main.spec.js ├── icon-320.png ├── ionic-tailor.sketch ├── karma.conf.js ├── package.json ├── protractor.conf.js └── server ├── .jshintrc ├── api ├── compile │ ├── compile.controller.js │ ├── compile.model.js │ ├── compile.spec.js │ └── index.js └── themes │ ├── index.js │ ├── themes.controller.js │ ├── themes.model.js │ └── themes.spec.js ├── app.js ├── components └── errors │ └── index.js ├── config ├── environment │ ├── development.js │ ├── index.js │ ├── production.js │ └── test.js └── express.js ├── ionic ├── scss-live │ ├── _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 │ ├── _loaders.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 │ ├── _split-pane.scss │ ├── _tabs.scss │ ├── _toggle.scss │ ├── _transitions.scss │ ├── _type.scss │ ├── _util.scss │ ├── _variables.scss │ ├── fonts │ │ ├── ionicons.eot │ │ ├── ionicons.svg │ │ ├── ionicons.ttf │ │ └── ionicons.woff │ ├── ionic.scss │ └── ionicons │ │ ├── _ionicons-animation.scss │ │ ├── _ionicons-font.scss │ │ ├── _ionicons-icons.scss │ │ ├── _ionicons-variables.scss │ │ └── ionicons.scss ├── scss-prod │ ├── _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 │ ├── _loaders.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 │ ├── _split-pane.scss │ ├── _tabs.scss │ ├── _toggle.scss │ ├── _transitions.scss │ ├── _type.scss │ ├── _util.scss │ ├── _variables.scss │ ├── fonts │ │ ├── ionicons.eot │ │ ├── ionicons.svg │ │ ├── ionicons.ttf │ │ └── ionicons.woff │ ├── ionic.scss │ └── ionicons │ │ ├── _ionicons-animation.scss │ │ ├── _ionicons-font.scss │ │ ├── _ionicons-icons.scss │ │ ├── _ionicons-variables.scss │ │ └── ionicons.scss ├── scss_test │ ├── _action-sheet.scss │ ├── _animations.scss │ ├── _backdrop.scss │ ├── _badge.scss │ ├── _bar.scss │ ├── _button-bar.scss │ ├── _button.scss │ ├── _checkbox.scss │ ├── _form.scss │ ├── _grid.scss │ ├── _items.scss │ ├── _list.scss │ ├── _loading.scss │ ├── _menu.scss │ ├── _mixins.scss │ ├── _modal.scss │ ├── _platform.scss │ ├── _popover.scss │ ├── _popup.scss │ ├── _progress.scss │ ├── _radio.scss │ ├── _range.scss │ ├── _reset.scss │ ├── _scaffolding.scss │ ├── _select.scss │ ├── _slide-box.scss │ ├── _tabs.scss │ ├── _toggle.scss │ ├── _type.scss │ ├── _util.scss │ ├── _variables.scss │ └── ionic.scss └── tmp │ ├── ionic-Zk2IRRDU4.app.css │ └── ionic-ZkD6jCwL4.app.css ├── routes.js └── views └── 404.html /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "client/bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.buildignore: -------------------------------------------------------------------------------- 1 | *.coffee -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .idea 4 | .tmp 5 | client/bower_components 6 | server/config/local.env.js 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | - '0.11' 5 | before_script: 6 | - npm install -g bower grunt-cli 7 | - bower install 8 | services: mongodb -------------------------------------------------------------------------------- /.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "generator-angular-fullstack": { 3 | "insertRoutes": true, 4 | "registerRoutesFile": "server/routes.js", 5 | "routesNeedle": "// Insert routes below", 6 | "routesBase": "/api/", 7 | "pluralizeRoutes": true, 8 | "insertSockets": true, 9 | "registerSocketsFile": "server/config/socketio.js", 10 | "socketsNeedle": "// Insert sockets below", 11 | "filters": { 12 | "js": true, 13 | "html": true, 14 | "css": true, 15 | "uirouter": true, 16 | "bootstrap": true, 17 | "uibootstrap": true, 18 | "mongoose": true 19 | } 20 | }, 21 | "generator-ng-component": { 22 | "routeDirectory": "client/app/", 23 | "directiveDirectory": "client/app/", 24 | "filterDirectory": "client/app/", 25 | "serviceDirectory": "client/app/", 26 | "basePath": "client", 27 | "filters": [ 28 | "uirouter" 29 | ], 30 | "extensions": [ 31 | "js", 32 | "html", 33 | "css" 34 | ] 35 | } 36 | } -------------------------------------------------------------------------------- /Ionic-Theme-Editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/Ionic-Theme-Editor.png -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Paolo Bernasconi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [Ionic Theme Editor](http://ionic-theme-editor.herokuapp.com/) 2 | ================== 3 | 4 | [![preview](https://github.com/pbernasconi/ionic-theme-editor/blob/master/Ionic-Theme-Editor.png)](http://ionic-theme-editor.herokuapp.com/) 5 | 6 | 7 | ## Website 8 | 9 | [http://ionic-theme-editor.herokuapp.com/](http://ionic-theme-editor.herokuapp.com/) 10 | 11 | ## About 12 | 13 | The Ionic Theme Editor is a simple live-editor for the [Ionic Framework](ionicframework.com). You can visually customize the primary Ionic variables, view your live changes immediately in several previews, and download a compiled css file with your edits. 14 | 15 | ## Contributing 16 | 17 | Currently the Ionic Theme Editor is hosted in a heroku app. All changes inbetween each release are made to the github repo. I use grunt to build the files. To get setup: 18 | 19 | ``` 20 | git clone https://github.com/pbernasconi/ionic-theme-editor.git 21 | cd ionic-theme-editor 22 | npm install 23 | bower install 24 | grunt build 25 | grunt serve 26 | ``` 27 | 28 | Make a new Pull Request for any changes you think are necessary! 29 | 30 | 31 | ## Authors 32 | 33 | #### Paolo Bernasconi 34 | 35 | - https://twitter.com/paolobernasconi 36 | - https://github.com/pbernasconi 37 | 38 | 39 | ## LICENSE 40 | 41 | Ionic Theme Editor is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository. 42 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "projects", 3 | "version": "0.0.1", 4 | "dependencies": { 5 | "angular": ">=1.2.*", 6 | "json3": "~3.3.1", 7 | "es5-shim": "~3.0.1", 8 | "jquery": "~1.11.0", 9 | "bootstrap": "~3.1.1", 10 | "angular-resource": ">=1.2.*", 11 | "angular-cookies": ">=1.2.*", 12 | "angular-sanitize": ">=1.2.*", 13 | "angular-bootstrap": "~0.11.0", 14 | "font-awesome": ">=4.1.0", 15 | "lodash": "~2.4.1", 16 | "angular-ui-router": "~0.2.10", 17 | "angular-spectrum-colorpicker": "~1.2.0", 18 | "ionicons": "~1.5.2", 19 | "ngDialog": "~0.3.0" 20 | }, 21 | "devDependencies": { 22 | "angular-mocks": ">=1.2.*", 23 | "angular-scenario": ">=1.2.*", 24 | "angular-spectrum-colorpicker": "~1.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /client/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "regexp": true, 16 | "undef": true, 17 | "unused": true, 18 | "strict": true, 19 | "trailing": true, 20 | "smarttabs": true, 21 | "globals": { 22 | "jQuery": true, 23 | "angular": true, 24 | "console": true, 25 | "$": true, 26 | "_": true, 27 | "moment": true, 28 | "describe": true, 29 | "beforeEach": true, 30 | "module": true, 31 | "inject": true, 32 | "it": true, 33 | "expect": true, 34 | "browser": true, 35 | "element": true, 36 | "by": true 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /client/app/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('projectsApp', [ 4 | 'ngCookies', 5 | 'ngResource', 6 | 'ngSanitize', 7 | 'ui.router', 8 | 'ui.bootstrap', 9 | 'angularSpectrumColorpicker', 10 | 'ngDialog' 11 | ]) 12 | .config(function ($stateProvider, $urlRouterProvider, $locationProvider) { 13 | $urlRouterProvider 14 | .otherwise('/'); 15 | 16 | $locationProvider.html5Mode(true); 17 | }); 18 | -------------------------------------------------------------------------------- /client/app/compiler/compiler.service.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('projectsApp') 4 | .service('Compiler', function ($http) { 5 | 6 | return { 7 | get: function (data) { 8 | return $http.get('/api/compile/'); 9 | }, 10 | post: function (data, cssType) { 11 | return $http.post('/api/compile/' + cssType, data); 12 | } 13 | } 14 | 15 | }); 16 | -------------------------------------------------------------------------------- /client/app/compiler/compiler.service.spec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('Service: compiler', function () { 4 | 5 | // load the service's module 6 | beforeEach(module('projectsApp')); 7 | 8 | // instantiate service 9 | var compiler; 10 | beforeEach(inject(function (_compiler_) { 11 | compiler = _compiler_; 12 | })); 13 | 14 | it('should do something', function () { 15 | expect(!!compiler).toBe(true); 16 | }); 17 | 18 | }); 19 | -------------------------------------------------------------------------------- /client/app/main/main.controller.spec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('Controller: MainCtrl', function () { 4 | 5 | // load the controller's module 6 | beforeEach(module('projectsApp')); 7 | 8 | var MainCtrl, 9 | scope, 10 | $httpBackend; 11 | 12 | // Initialize the controller and a mock scope 13 | beforeEach(inject(function (_$httpBackend_, $controller, $rootScope) { 14 | $httpBackend = _$httpBackend_; 15 | $httpBackend.expectGET('/api/things') 16 | .respond(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express']); 17 | 18 | scope = $rootScope.$new(); 19 | MainCtrl = $controller('MainCtrl', { 20 | $scope: scope 21 | }); 22 | })); 23 | 24 | it('should attach a list of things to the scope', function () { 25 | $httpBackend.flush(); 26 | expect(scope.awesomeThings.length).toBe(4); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /client/app/main/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/client/app/main/main.css -------------------------------------------------------------------------------- /client/app/main/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('projectsApp') 4 | .config(function ($stateProvider) { 5 | $stateProvider 6 | .state('main', { 7 | url: '/', 8 | templateUrl: 'app/main/main.html', 9 | controller: 'MainCtrl' 10 | }); 11 | }); -------------------------------------------------------------------------------- /client/app/theme/theme.directive.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('projectsApp') 4 | .directive('theme', function () { 5 | return { 6 | restrict: 'EA', 7 | scope: { 8 | theme: '=', 9 | callBack: '&onLoad' 10 | }, 11 | link: function ($scope, $element, $attr) { 12 | var cw; 13 | $element.ready(function () { 14 | cw = $element[0].contentWindow; 15 | }); 16 | 17 | $element.on('load', function () { 18 | return $scope.callBack(); 19 | }); 20 | 21 | var updatePreview = function (colors) { 22 | if (!cw) { 23 | return; 24 | } 25 | cw.IonicThemer && cw.IonicThemer.update(colors); 26 | }; 27 | 28 | $scope.$watch('theme', function (nv, ov) { 29 | updatePreview(nv); 30 | }, true); 31 | } 32 | } 33 | }) 34 | 35 | .directive('autoFocus', function ($timeout) { 36 | return { 37 | restrict: 'AC', 38 | link: function (_scope, _element) { 39 | $timeout(function () { 40 | _element[0].focus(); 41 | }, 0); 42 | } 43 | }; 44 | }); 45 | -------------------------------------------------------------------------------- /client/app/theme/theme.directive.spec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('Directive: theme', function () { 4 | 5 | // load the directive's module 6 | beforeEach(module('projectsApp')); 7 | 8 | var element, 9 | scope; 10 | 11 | beforeEach(inject(function ($rootScope) { 12 | scope = $rootScope.$new(); 13 | })); 14 | 15 | it('should make hidden element visible', inject(function ($compile) { 16 | element = angular.element(''); 17 | element = $compile(element)(scope); 18 | expect(element.text()).toBe('this is the theme directive'); 19 | })); 20 | }); -------------------------------------------------------------------------------- /client/assets/images/device.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/client/assets/images/device.png -------------------------------------------------------------------------------- /client/assets/images/logo-pack/drifty-logo-transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/client/assets/images/logo-pack/drifty-logo-transparent.png -------------------------------------------------------------------------------- /client/assets/images/logo-pack/ionic-logo-horizontal-transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/client/assets/images/logo-pack/ionic-logo-horizontal-transparent.png -------------------------------------------------------------------------------- /client/assets/images/logo-pack/ionic-logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 13 | 16 | 17 | 21 | 22 | 23 | 24 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /client/assets/images/tailor-icon-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/client/assets/images/tailor-icon-white.png -------------------------------------------------------------------------------- /client/assets/images/yeoman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/client/assets/images/yeoman.png -------------------------------------------------------------------------------- /client/components/preview/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/client/components/preview/avatar.jpg -------------------------------------------------------------------------------- /client/components/preview/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/client/components/preview/cover.jpg -------------------------------------------------------------------------------- /client/components/preview/preview-buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

BUTTONS

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /client/components/preview/preview-card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Title

14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 |

Pretty Hate Machine

23 | 24 |

Nine Inch Nails

25 |
26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | Start listening 34 | 35 | 36 |
37 | 38 | 39 | 40 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /client/components/preview/preview-components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Title

14 | 15 | 16 | 17 | 92 | 93 | 94 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /client/components/preview/preview-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Title

14 | 15 | 16 | 17 |
18 |
19 | Inline 20 |
21 | 25 | 29 |
30 | 31 |
32 |
33 | Placeholder labels 34 |
35 | 38 | 41 |
42 | 43 | 44 |
45 |
46 | Stacked Labels 47 |
48 | 52 | 56 |
57 | 58 | 59 |
60 |
61 | Floating Labels 62 |
63 | 67 | 71 |
72 | 73 | 74 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /client/components/preview/preview-header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

bar-light

14 | 15 | 16 | 17 |
18 |

bar-stable

19 |
20 | 21 |
22 |

bar-positive

23 |
24 | 25 |
26 |

bar-calm

27 |
28 | 29 |
30 |

bar-balanced

31 |
32 | 33 |
34 |

bar-energized

35 |
36 | 37 |
38 |

bar-assertive

39 |
40 | 41 |
42 |

bar-royal

43 |
44 | 45 |
46 |

bar-dark

47 |
48 | 49 | 50 | 51 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /client/components/preview/preview-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Title

14 | 15 | 16 | 17 |
18 | 19 |
20 | Candy Bars 21 |
22 | 23 | 24 | 25 | Check mail 26 | 27 | 28 | 29 | 30 | Call Ma 31 | 32 | 33 | 34 | 35 | 36 | 37 | Record album 38 | Grammy 39 | 40 | 41 | 42 | 43 | Friends 44 | 0 45 | 46 | 47 |
48 | Avatars 49 |
50 | 51 | 52 | Butterfinger 53 | 54 | 55 | 56 | Butterfinger 57 | 58 | 59 |
60 | Call Ma 61 | 64 |
65 | 66 | 67 | 68 | Butterfinger 69 | 70 | 71 | 72 |
73 | 74 | 75 | 76 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /client/components/preview/preview-tabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Title

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /client/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/client/icon.ico -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Ionic Tailor 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 42 |
43 | 44 | 60 | 61 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /client/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org 2 | 3 | User-agent: * 4 | -------------------------------------------------------------------------------- /e2e/main/main.po.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file uses the Page Object pattern to define the main page for tests 3 | * https://docs.google.com/presentation/d/1B6manhG0zEXkC-H-tPo2vwU06JhL8w9-XCF9oehXzAQ 4 | */ 5 | 6 | 'use strict'; 7 | 8 | var MainPage = function() { 9 | this.heroEl = element(by.css('.hero-unit')); 10 | this.h1El = this.heroEl.element(by.css('h1')); 11 | this.imgEl = this.heroEl.element(by.css('img')); 12 | }; 13 | 14 | module.exports = new MainPage(); 15 | 16 | -------------------------------------------------------------------------------- /e2e/main/main.spec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('Main View', function() { 4 | var page; 5 | 6 | beforeEach(function() { 7 | browser.get('/'); 8 | page = require('./main.po'); 9 | }); 10 | 11 | it('should include jumbotron with correct data', function() { 12 | expect(page.h1El.getText()).toBe('\'Allo, \'Allo!'); 13 | expect(page.imgEl.getAttribute('src')).toMatch(/assets\/images\/yeoman.png$/); 14 | expect(page.imgEl.getAttribute('alt')).toBe('I\'m Yeoman'); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /icon-320.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/icon-320.png -------------------------------------------------------------------------------- /ionic-tailor.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/ionic-tailor.sketch -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // http://karma-runner.github.io/0.10/config/configuration-file.html 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | // base path, that will be used to resolve files and exclude 7 | basePath: '', 8 | 9 | // testing framework to use (jasmine/mocha/qunit/...) 10 | frameworks: ['jasmine'], 11 | 12 | // list of files / patterns to load in the browser 13 | files: [ 14 | 'client/bower_components/jquery/dist/jquery.js', 15 | 'client/bower_components/angular/angular.js', 16 | 'client/bower_components/angular-mocks/angular-mocks.js', 17 | 'client/bower_components/angular-resource/angular-resource.js', 18 | 'client/bower_components/angular-cookies/angular-cookies.js', 19 | 'client/bower_components/angular-sanitize/angular-sanitize.js', 20 | 'client/bower_components/angular-route/angular-route.js', 21 | 'client/bower_components/angular-bootstrap/ui-bootstrap-tpls.js', 22 | 'client/bower_components/lodash/dist/lodash.compat.js', 23 | 'client/bower_components/angular-ui-router/release/angular-ui-router.js', 24 | 'client/app/app.js', 25 | 'client/app/app.coffee', 26 | 'client/app/**/*.js', 27 | 'client/app/**/*.coffee', 28 | 'client/components/**/*.js', 29 | 'client/components/**/*.coffee', 30 | 'client/app/**/*.jade', 31 | 'client/components/**/*.jade', 32 | 'client/app/**/*.html', 33 | 'client/components/**/*.html' 34 | ], 35 | 36 | preprocessors: { 37 | '**/*.jade': 'ng-jade2js', 38 | '**/*.html': 'html2js', 39 | '**/*.coffee': 'coffee', 40 | }, 41 | 42 | ngHtml2JsPreprocessor: { 43 | stripPrefix: 'client/' 44 | }, 45 | 46 | ngJade2JsPreprocessor: { 47 | stripPrefix: 'client/' 48 | }, 49 | 50 | // list of files / patterns to exclude 51 | exclude: [], 52 | 53 | // web server port 54 | port: 8080, 55 | 56 | // level of logging 57 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 58 | logLevel: config.LOG_INFO, 59 | 60 | 61 | // enable / disable watching file and executing tests whenever any file changes 62 | autoWatch: false, 63 | 64 | 65 | // Start these browsers, currently available: 66 | // - Chrome 67 | // - ChromeCanary 68 | // - Firefox 69 | // - Opera 70 | // - Safari (only Mac) 71 | // - PhantomJS 72 | // - IE (only Windows) 73 | browsers: ['PhantomJS'], 74 | 75 | 76 | // Continuous Integration mode 77 | // if true, it capture browsers, run tests and exit 78 | singleRun: false 79 | }); 80 | }; 81 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "projects", 3 | "version": "0.0.0", 4 | "main": "server/app.js", 5 | "dependencies": { 6 | "body-parser": "~1.0.0", 7 | "composable-middleware": "^0.3.0", 8 | "compression": "~1.0.1", 9 | "connect-mongo": "^0.4.1", 10 | "cookie-parser": "~1.0.1", 11 | "ejs": "~0.8.4", 12 | "errorhandler": "~1.0.0", 13 | "express": "~4.8.0", 14 | "express-session": "~1.0.2", 15 | "lodash": "~2.4.1", 16 | "method-override": "~1.0.0", 17 | "mkdirp": "^0.5.0", 18 | "mongoose": "~3.8.8", 19 | "morgan": "~1.0.0", 20 | "node-sass": "^0.9.3", 21 | "request": "^2.42.0", 22 | "semver": "^3.0.1", 23 | "shortid": "^2.0.1", 24 | "static-favicon": "~1.0.1" 25 | }, 26 | "devDependencies": { 27 | "grunt": "~0.4.4", 28 | "grunt-autoprefixer": "~0.7.2", 29 | "grunt-bower-install": "~1.4.0", 30 | "grunt-concurrent": "~0.5.0", 31 | "grunt-contrib-clean": "~0.5.0", 32 | "grunt-contrib-concat": "~0.4.0", 33 | "grunt-contrib-copy": "~0.5.0", 34 | "grunt-contrib-cssmin": "~0.9.0", 35 | "grunt-contrib-htmlmin": "~0.2.0", 36 | "grunt-contrib-imagemin": "~0.7.1", 37 | "grunt-contrib-jshint": "~0.10.0", 38 | "grunt-contrib-uglify": "~0.4.0", 39 | "grunt-contrib-watch": "~0.6.1", 40 | "grunt-google-cdn": "~0.4.0", 41 | "grunt-newer": "~0.7.0", 42 | "grunt-ng-annotate": "^0.2.3", 43 | "grunt-rev": "~0.1.0", 44 | "grunt-svgmin": "~0.4.0", 45 | "grunt-usemin": "~2.1.1", 46 | "grunt-env": "~0.4.1", 47 | "grunt-node-inspector": "~0.1.5", 48 | "grunt-nodemon": "~0.2.0", 49 | "grunt-angular-templates": "^0.5.4", 50 | "grunt-dom-munger": "^3.4.0", 51 | "grunt-protractor-runner": "^1.1.0", 52 | "grunt-asset-injector": "^0.1.0", 53 | "grunt-karma": "~0.8.2", 54 | "grunt-mocha-test": "~0.10.2", 55 | "jit-grunt": "^0.5.0", 56 | "time-grunt": "~0.3.1", 57 | "grunt-express-server": "~0.4.17", 58 | "grunt-open": "~0.2.3", 59 | "open": "~0.0.4", 60 | "jshint-stylish": "~0.1.5", 61 | "connect-livereload": "~0.4.0", 62 | "karma-ng-scenario": "~0.1.0", 63 | "karma-firefox-launcher": "~0.1.3", 64 | "karma-script-launcher": "~0.1.0", 65 | "karma-html2js-preprocessor": "~0.1.0", 66 | "karma-ng-jade2js-preprocessor": "^0.1.2", 67 | "karma-jasmine": "~0.1.5", 68 | "karma-chrome-launcher": "~0.1.3", 69 | "requirejs": "~2.1.11", 70 | "karma-requirejs": "~0.2.1", 71 | "karma-coffee-preprocessor": "~0.2.1", 72 | "karma-jade-preprocessor": "0.0.11", 73 | "karma-phantomjs-launcher": "~0.1.4", 74 | "karma": "~0.12.9", 75 | "karma-ng-html2js-preprocessor": "~0.1.0", 76 | "supertest": "~0.11.0", 77 | "should": "~3.3.1" 78 | }, 79 | "engines": { 80 | "node": ">=0.10.0" 81 | }, 82 | "scripts": { 83 | "start": "node server/app.js", 84 | "test": "grunt test", 85 | "update-webdriver": "node node_modules/grunt-protractor-runner/node_modules/protractor/bin/webdriver-manager update" 86 | }, 87 | "private": true 88 | } 89 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration 2 | // https://github.com/angular/protractor/blob/master/referenceConf.js 3 | 4 | 'use strict'; 5 | 6 | exports.config = { 7 | // The timeout for each script run on the browser. This should be longer 8 | // than the maximum time your application needs to stabilize between tasks. 9 | allScriptsTimeout: 110000, 10 | 11 | // A base URL for your application under test. Calls to protractor.get() 12 | // with relative paths will be prepended with this. 13 | baseUrl: 'http://localhost:' + (process.env.PORT || '9000'), 14 | 15 | // If true, only chromedriver will be started, not a standalone selenium. 16 | // Tests for browsers other than chrome will not run. 17 | chromeOnly: true, 18 | 19 | // list of files / patterns to load in the browser 20 | specs: [ 21 | 'e2e/**/*.spec.js' 22 | ], 23 | 24 | // Patterns to exclude. 25 | exclude: [], 26 | 27 | // ----- Capabilities to be passed to the webdriver instance ---- 28 | // 29 | // For a full list of available capabilities, see 30 | // https://code.google.com/p/selenium/wiki/DesiredCapabilities 31 | // and 32 | // https://code.google.com/p/selenium/source/browse/javascript/webdriver/capabilities.js 33 | capabilities: { 34 | 'browserName': 'chrome' 35 | }, 36 | 37 | // ----- The test framework ----- 38 | // 39 | // Jasmine and Cucumber are fully supported as a test and assertion framework. 40 | // Mocha has limited beta support. You will need to include your own 41 | // assertion framework if working with mocha. 42 | framework: 'jasmine', 43 | 44 | // ----- Options to be passed to minijasminenode ----- 45 | // 46 | // See the full list at https://github.com/juliemr/minijasminenode 47 | jasmineNodeOpts: { 48 | defaultTimeoutInterval: 30000 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /server/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "eqeqeq": true, 6 | "immed": true, 7 | "latedef": true, 8 | "newcap": true, 9 | "noarg": true, 10 | "regexp": true, 11 | "undef": true, 12 | "smarttabs": true, 13 | "asi": true, 14 | "debug": true 15 | } -------------------------------------------------------------------------------- /server/api/compile/compile.model.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var mongoose = require('mongoose'), 4 | Schema = mongoose.Schema; 5 | 6 | var CompileSchema = new Schema({ 7 | name: String, 8 | info: String, 9 | active: Boolean 10 | }); 11 | 12 | module.exports = mongoose.model('Compile', CompileSchema); -------------------------------------------------------------------------------- /server/api/compile/compile.spec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var should = require('should'); 4 | var app = require('../../app'); 5 | var request = require('supertest'); 6 | 7 | describe('GET /api/compile', function() { 8 | 9 | it('should respond with JSON array', function(done) { 10 | request(app) 11 | .get('/api/compile') 12 | .expect(200) 13 | .expect('Content-Type', /json/) 14 | .end(function(err, res) { 15 | if (err) return done(err); 16 | res.body.should.be.instanceof(Array); 17 | done(); 18 | }); 19 | }); 20 | }); -------------------------------------------------------------------------------- /server/api/compile/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var express = require('express'); 4 | var controller = require('./compile.controller'); 5 | 6 | var router = express.Router(); 7 | 8 | router.get('/download/:id/:filename', controller.download); // download ionic.css 9 | router.get('/live/ionic.css:data', controller.live); // post a live 10 | router.post('/:cssType', controller.compile); // post a new compile script 11 | router.get('/live/:body', controller.live); // post a live 12 | router.put('/:id', controller.update); 13 | 14 | module.exports = router; 15 | -------------------------------------------------------------------------------- /server/api/themes/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var express = require('express'); 4 | var controller = require('./themes.controller'); 5 | 6 | var router = express.Router(); 7 | 8 | router.get('/', controller.index); 9 | router.get('/:id', controller.show); 10 | router.post('/', controller.create); 11 | router.put('/:id', controller.update); 12 | router.patch('/:id', controller.update); 13 | router.delete('/:id', controller.destroy); 14 | 15 | module.exports = router; -------------------------------------------------------------------------------- /server/api/themes/themes.controller.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _ = require('lodash'); 4 | var Themes = require('./themes.model'); 5 | 6 | // Get list of themess 7 | exports.index = function(req, res) { 8 | Themes.find(function (err, themess) { 9 | if(err) { return handleError(res, err); } 10 | return res.json(200, themess); 11 | }); 12 | }; 13 | 14 | // Get a single themes 15 | exports.show = function(req, res) { 16 | Themes.findById(req.params.id, function (err, themes) { 17 | if(err) { return handleError(res, err); } 18 | if(!themes) { return res.send(404); } 19 | return res.json(themes); 20 | }); 21 | }; 22 | 23 | // Creates a new themes in the DB. 24 | exports.create = function(req, res) { 25 | Themes.create(req.body, function(err, themes) { 26 | if(err) { return handleError(res, err); } 27 | return res.json(201, themes); 28 | }); 29 | }; 30 | 31 | // Updates an existing themes in the DB. 32 | exports.update = function(req, res) { 33 | if(req.body._id) { delete req.body._id; } 34 | Themes.findById(req.params.id, function (err, themes) { 35 | if (err) { return handleError(res, err); } 36 | if(!themes) { return res.send(404); } 37 | var updated = _.merge(themes, req.body); 38 | updated.save(function (err) { 39 | if (err) { return handleError(res, err); } 40 | return res.json(200, themes); 41 | }); 42 | }); 43 | }; 44 | 45 | // Deletes a themes from the DB. 46 | exports.destroy = function(req, res) { 47 | Themes.findById(req.params.id, function (err, themes) { 48 | if(err) { return handleError(res, err); } 49 | if(!themes) { return res.send(404); } 50 | themes.remove(function(err) { 51 | if(err) { return handleError(res, err); } 52 | return res.send(204); 53 | }); 54 | }); 55 | }; 56 | 57 | function handleError(res, err) { 58 | return res.send(500, err); 59 | } -------------------------------------------------------------------------------- /server/api/themes/themes.model.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var mongoose = require('mongoose'), 4 | Schema = mongoose.Schema; 5 | 6 | var ThemesSchema = new Schema({ 7 | name: String, 8 | info: String, 9 | active: Boolean 10 | }); 11 | 12 | module.exports = mongoose.model('Themes', ThemesSchema); -------------------------------------------------------------------------------- /server/api/themes/themes.spec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var should = require('should'); 4 | var app = require('../../app'); 5 | var request = require('supertest'); 6 | 7 | describe('GET /api/themes', function() { 8 | 9 | it('should respond with JSON array', function(done) { 10 | request(app) 11 | .get('/api/themes') 12 | .expect(200) 13 | .expect('Content-Type', /json/) 14 | .end(function(err, res) { 15 | if (err) return done(err); 16 | res.body.should.be.instanceof(Array); 17 | done(); 18 | }); 19 | }); 20 | }); -------------------------------------------------------------------------------- /server/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main application file 3 | */ 4 | 5 | 'use strict'; 6 | 7 | // Set default node environment to development 8 | process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 9 | 10 | var express = require('express'); 11 | var mongoose = require('mongoose'); 12 | var config = require('./config/environment'); 13 | 14 | // Connect to database 15 | mongoose.connect(config.mongo.uri, config.mongo.options); 16 | 17 | // Populate DB with sample dat 18 | // Setup server 19 | var app = express(); 20 | var server = require('http').createServer(app); 21 | require('./config/express')(app); 22 | require('./routes')(app); 23 | 24 | // Start server 25 | server.listen(config.port, config.ip, function () { 26 | console.log('Express server listening on %d, in %s mode', config.port, app.get('env')); 27 | }); 28 | 29 | // Expose app 30 | exports = module.exports = app; 31 | -------------------------------------------------------------------------------- /server/components/errors/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Error responses 3 | */ 4 | 5 | 'use strict'; 6 | 7 | module.exports[404] = function pageNotFound(req, res) { 8 | var viewFilePath = '404'; 9 | var statusCode = 404; 10 | var result = { 11 | status: statusCode 12 | }; 13 | 14 | res.status(result.status); 15 | res.render(viewFilePath, function (err) { 16 | if (err) { return res.json(result, result.status); } 17 | 18 | res.render(viewFilePath); 19 | }); 20 | }; 21 | -------------------------------------------------------------------------------- /server/config/environment/development.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Development specific configuration 4 | // ================================== 5 | module.exports = { 6 | // MongoDB connection options 7 | mongo: { 8 | uri: 'mongodb://localhost/projects-dev' 9 | }, 10 | 11 | seedDB: true 12 | }; 13 | -------------------------------------------------------------------------------- /server/config/environment/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var _ = require('lodash'); 5 | 6 | function requiredProcessEnv(name) { 7 | if(!process.env[name]) { 8 | throw new Error('You must set the ' + name + ' environment variable'); 9 | } 10 | return process.env[name]; 11 | } 12 | 13 | // All configurations will extend these options 14 | // ============================================ 15 | var all = { 16 | env: process.env.NODE_ENV, 17 | 18 | // Root path of server 19 | root: path.normalize(__dirname + '/../../..'), 20 | 21 | // Server port 22 | port: process.env.PORT || 9000, 23 | 24 | // Should we populate the DB with sample data? 25 | seedDB: false, 26 | 27 | // Secret for session, you will want to change this and make it an environment variable 28 | secrets: { 29 | session: 'projects-secret' 30 | }, 31 | 32 | // List of user roles 33 | userRoles: ['guest', 'user', 'admin'], 34 | 35 | // MongoDB connection options 36 | mongo: { 37 | options: { 38 | db: { 39 | safe: true 40 | } 41 | } 42 | }, 43 | 44 | }; 45 | 46 | // Export the config object based on the NODE_ENV 47 | // ============================================== 48 | module.exports = _.merge( 49 | all, 50 | require('./' + process.env.NODE_ENV + '.js') || {}); -------------------------------------------------------------------------------- /server/config/environment/production.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Production specific configuration 4 | // ================================= 5 | module.exports = { 6 | // Server IP 7 | ip: process.env.OPENSHIFT_NODEJS_IP || 8 | process.env.IP || 9 | undefined, 10 | 11 | // Server port 12 | port: process.env.OPENSHIFT_NODEJS_PORT || 13 | process.env.PORT || 14 | 8080, 15 | 16 | // MongoDB connection options 17 | mongo: { 18 | uri: process.env.MONGOLAB_URI || 19 | process.env.MONGOHQ_URL || 20 | process.env.OPENSHIFT_MONGODB_DB_URL+process.env.OPENSHIFT_APP_NAME || 21 | 'mongodb://localhost/projects' 22 | } 23 | }; -------------------------------------------------------------------------------- /server/config/environment/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Test specific configuration 4 | // =========================== 5 | module.exports = { 6 | // MongoDB connection options 7 | mongo: { 8 | uri: 'mongodb://localhost/projects-test' 9 | } 10 | }; -------------------------------------------------------------------------------- /server/config/express.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Express configuration 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var express = require('express'); 8 | var favicon = require('static-favicon'); 9 | var morgan = require('morgan'); 10 | var compression = require('compression'); 11 | var bodyParser = require('body-parser'); 12 | var methodOverride = require('method-override'); 13 | var cookieParser = require('cookie-parser'); 14 | var errorHandler = require('errorhandler'); 15 | var path = require('path'); 16 | var config = require('./environment'); 17 | 18 | module.exports = function(app) { 19 | var env = app.get('env'); 20 | 21 | app.set('views', config.root + '/server/views'); 22 | app.engine('html', require('ejs').renderFile); 23 | app.set('view engine', 'html'); 24 | app.use(compression()); 25 | app.use(bodyParser.urlencoded({ extended: false })); 26 | app.use(bodyParser.json()); 27 | app.use(methodOverride()); 28 | app.use(cookieParser()); 29 | 30 | if ('production' === env) { 31 | app.use(favicon(path.join(config.root, 'public', 'favicon.ico'))); 32 | app.use(express.static(path.join(config.root, 'public'))); 33 | app.set('appPath', config.root + '/public'); 34 | app.use(morgan('dev')); 35 | } 36 | 37 | if ('development' === env || 'test' === env) { 38 | app.use(require('connect-livereload')()); 39 | app.use(express.static(path.join(config.root, '.tmp'))); 40 | app.use(express.static(path.join(config.root, 'client'))); 41 | app.set('appPath', 'client'); 42 | app.use(morgan('dev')); 43 | app.use(errorHandler()); // Error handler - has to be last 44 | } 45 | }; -------------------------------------------------------------------------------- /server/ionic/scss-live/_action-sheet.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Action Sheets 3 | * -------------------------------------------------- 4 | */ 5 | 6 | .action-sheet-backdrop { 7 | @include transition(background-color 300ms ease-in-out); 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | z-index: $z-index-action-sheet; 12 | width: 100%; 13 | height: 100%; 14 | background-color: rgba(0,0,0,0); 15 | 16 | &.active { 17 | background-color: rgba(0,0,0,0.4); 18 | } 19 | } 20 | 21 | .action-sheet-wrapper { 22 | @include translate3d(0, 100%, 0); 23 | @include transition(all ease-in-out 300ms); 24 | position: absolute; 25 | bottom: 0; 26 | width: 100%; 27 | } 28 | 29 | .action-sheet-up { 30 | @include translate3d(0, 0, 0); 31 | } 32 | 33 | .action-sheet { 34 | margin-left: $sheet-margin; 35 | margin-right: $sheet-margin; 36 | width: auto; 37 | z-index: $z-index-action-sheet; 38 | overflow: hidden; 39 | 40 | .button { 41 | display: block; 42 | padding: 1px; 43 | width: 100%; 44 | border-radius: 0; 45 | border-color: $sheet-options-border-color; 46 | background-color: transparent; 47 | 48 | color: $sheet-options-text-color; 49 | font-size: 21px; 50 | 51 | &:hover { 52 | color: $sheet-options-text-color; 53 | } 54 | &.destructive { 55 | color: #ff3b30; 56 | &:hover { 57 | color: #ff3b30; 58 | } 59 | } 60 | } 61 | 62 | .button.active, .button.activated { 63 | box-shadow: none; 64 | border-color: $sheet-options-border-color; 65 | color: $sheet-options-text-color; 66 | background: $sheet-options-bg-active-color; 67 | } 68 | } 69 | 70 | .action-sheet-has-icons .icon { 71 | position: absolute; 72 | left: 16px; 73 | } 74 | 75 | .action-sheet-title { 76 | padding: $sheet-margin * 2; 77 | color: #8f8f8f; 78 | text-align: center; 79 | font-size: 13px; 80 | } 81 | 82 | .action-sheet-group { 83 | margin-bottom: $sheet-margin; 84 | border-radius: $sheet-border-radius; 85 | background-color: #fff; 86 | overflow: hidden; 87 | 88 | .button { 89 | border-width: 1px 0px 0px 0px; 90 | } 91 | .button:first-child:last-child { 92 | border-width: 0; 93 | } 94 | } 95 | 96 | .action-sheet-options { 97 | background: $sheet-options-bg-color; 98 | } 99 | 100 | .action-sheet-cancel { 101 | .button { 102 | font-weight: 500; 103 | } 104 | } 105 | 106 | .action-sheet-open { 107 | pointer-events: none; 108 | 109 | &.modal-open .modal { 110 | pointer-events: none; 111 | } 112 | 113 | .action-sheet-backdrop { 114 | pointer-events: auto; 115 | } 116 | } 117 | 118 | 119 | .platform-android { 120 | 121 | .action-sheet-backdrop.active { 122 | background-color: rgba(0,0,0,0.2); 123 | } 124 | 125 | .action-sheet { 126 | margin: 0; 127 | 128 | .action-sheet-title, 129 | .button { 130 | text-align: left; 131 | border-color: transparent; 132 | font-size: 16px; 133 | color: inherit; 134 | } 135 | 136 | .action-sheet-title { 137 | font-size: 14px; 138 | padding: 16px; 139 | color: #666; 140 | } 141 | 142 | .button.active, 143 | .button.activated { 144 | background: #e8e8e8; 145 | } 146 | } 147 | 148 | .action-sheet-group { 149 | margin: 0; 150 | border-radius: 0; 151 | background-color: #fafafa; 152 | } 153 | 154 | .action-sheet-cancel { 155 | display: none; 156 | } 157 | 158 | .action-sheet-has-icons { 159 | 160 | .button { 161 | padding-left: 56px; 162 | } 163 | 164 | } 165 | 166 | } 167 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_button-bar.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Button Bar 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .button-bar { 8 | @include display-flex(); 9 | @include flex(1); 10 | width: 100%; 11 | 12 | &.button-bar-inline { 13 | display: block; 14 | width: auto; 15 | 16 | @include clearfix(); 17 | 18 | > .button { 19 | width: auto; 20 | display: inline-block; 21 | float: left; 22 | } 23 | } 24 | } 25 | 26 | .button-bar > .button { 27 | @include flex(1); 28 | display: block; 29 | 30 | overflow: hidden; 31 | 32 | padding: 0 16px; 33 | 34 | width: 0; 35 | 36 | border-width: 1px 0px 1px 1px; 37 | border-radius: 0; 38 | text-align: center; 39 | text-overflow: ellipsis; 40 | white-space: nowrap; 41 | 42 | &:before, 43 | .icon:before { 44 | line-height: 44px; 45 | } 46 | 47 | &:first-child { 48 | border-radius: $button-border-radius 0px 0px $button-border-radius; 49 | } 50 | &:last-child { 51 | border-right-width: 1px; 52 | border-radius: 0px $button-border-radius $button-border-radius 0px; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Grid 3 | * -------------------------------------------------- 4 | * Using flexbox for the grid, inspired by Philip Walton: 5 | * http://philipwalton.github.io/solved-by-flexbox/demos/grids/ 6 | * By default each .col within a .row will evenly take up 7 | * available width, and the height of each .col with take 8 | * up the height of the tallest .col in the same .row. 9 | */ 10 | 11 | .row { 12 | @include display-flex(); 13 | padding: ($grid-padding-width / 2); 14 | width: 100%; 15 | } 16 | 17 | .row-wrap { 18 | @include flex-wrap(wrap); 19 | } 20 | 21 | .row + .row { 22 | margin-top: ($grid-padding-width / 2) * -1; 23 | padding-top: 0; 24 | } 25 | 26 | .col { 27 | @include flex(1); 28 | display: block; 29 | padding: ($grid-padding-width / 2); 30 | width: 100%; 31 | } 32 | 33 | 34 | /* Vertically Align Columns */ 35 | /* .row-* vertically aligns every .col in the .row */ 36 | .row-top { 37 | @include align-items(flex-start); 38 | } 39 | .row-bottom { 40 | @include align-items(flex-end); 41 | } 42 | .row-center { 43 | @include align-items(center); 44 | } 45 | .row-stretch { 46 | @include align-items(stretch); 47 | } 48 | .row-baseline { 49 | @include align-items(baseline); 50 | } 51 | 52 | /* .col-* vertically aligns an individual .col */ 53 | .col-top { 54 | @include align-self(flex-start); 55 | } 56 | .col-bottom { 57 | @include align-self(flex-end); 58 | } 59 | .col-center { 60 | @include align-self(center); 61 | } 62 | 63 | /* Column Offsets */ 64 | .col-offset-10 { 65 | margin-left: 10%; 66 | } 67 | .col-offset-20 { 68 | margin-left: 20%; 69 | } 70 | .col-offset-25 { 71 | margin-left: 25%; 72 | } 73 | .col-offset-33, .col-offset-34 { 74 | margin-left: 33.3333%; 75 | } 76 | .col-offset-50 { 77 | margin-left: 50%; 78 | } 79 | .col-offset-66, .col-offset-67 { 80 | margin-left: 66.6666%; 81 | } 82 | .col-offset-75 { 83 | margin-left: 75%; 84 | } 85 | .col-offset-80 { 86 | margin-left: 80%; 87 | } 88 | .col-offset-90 { 89 | margin-left: 90%; 90 | } 91 | 92 | 93 | /* Explicit Column Percent Sizes */ 94 | /* By default each grid column will evenly distribute */ 95 | /* across the grid. However, you can specify individual */ 96 | /* columns to take up a certain size of the available area */ 97 | .col-10 { 98 | @include flex(0, 0, 10%); 99 | max-width: 10%; 100 | } 101 | .col-20 { 102 | @include flex(0, 0, 20%); 103 | max-width: 20%; 104 | } 105 | .col-25 { 106 | @include flex(0, 0, 25%); 107 | max-width: 25%; 108 | } 109 | .col-33, .col-34 { 110 | @include flex(0, 0, 33.3333%); 111 | max-width: 33.3333%; 112 | } 113 | .col-50 { 114 | @include flex(0, 0, 50%); 115 | max-width: 50%; 116 | } 117 | .col-66, .col-67 { 118 | @include flex(0, 0, 66.6666%); 119 | max-width: 66.6666%; 120 | } 121 | .col-75 { 122 | @include flex(0, 0, 75%); 123 | max-width: 75%; 124 | } 125 | .col-80 { 126 | @include flex(0, 0, 80%); 127 | max-width: 80%; 128 | } 129 | .col-90 { 130 | @include flex(0, 0, 90%); 131 | max-width: 90%; 132 | } 133 | 134 | 135 | /* Responsive Grid Classes */ 136 | /* Adding a class of responsive-X to a row */ 137 | /* will trigger the flex-direction to */ 138 | /* change to column and add some margin */ 139 | /* to any columns in the row for clearity */ 140 | 141 | @include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break); 142 | @include responsive-grid-break('.responsive-md', $grid-responsive-md-break); 143 | @include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break); 144 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_loaders.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Loaders (Spinners) 3 | * -------------------------------------------------- 4 | */ 5 | 6 | svg.loader { 7 | width: 28px; 8 | height: 28px; 9 | stroke: #333; 10 | fill: #333; 11 | } 12 | 13 | .loader-ios, 14 | .loader-ios-small { 15 | 16 | line { 17 | stroke: #69717d; 18 | } 19 | 20 | } 21 | 22 | .loader-android { 23 | 24 | circle { 25 | stroke: #4b8bf4; 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | display: none; 26 | } 27 | &.visible { 28 | visibility: visible; 29 | } 30 | &.active { 31 | opacity: 1; 32 | } 33 | 34 | .loading { 35 | padding: $loading-padding; 36 | 37 | border-radius: $loading-border-radius; 38 | background-color: $loading-bg-color; 39 | 40 | color: $loading-text-color; 41 | 42 | text-align: center; 43 | text-overflow: ellipsis; 44 | font-size: $loading-font-size; 45 | 46 | h1, h2, h3, h4, h5, h6 { 47 | color: $loading-text-color; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | 40 | .grade-b .menu-content, 41 | .grade-c .menu-content { 42 | @include box-sizing(content-box); 43 | right: -1px; 44 | left: -1px; 45 | border-right: 1px solid #ccc; 46 | border-left: 1px solid #ccc; 47 | box-shadow: none; 48 | } 49 | 50 | .menu-left { 51 | left: 0; 52 | } 53 | 54 | .menu-right { 55 | right: 0; 56 | } 57 | 58 | .aside-open.aside-resizing .menu-right { 59 | display: none; 60 | } 61 | 62 | .menu-animated { 63 | @include transition-transform($menu-animation-speed ease); 64 | } 65 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_modal.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Modals 4 | * -------------------------------------------------- 5 | * Modals are independent windows that slide in from off-screen. 6 | */ 7 | 8 | .modal-backdrop { 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | z-index: $z-index-modal; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .modal { 18 | display: block; 19 | position: absolute; 20 | top: 0; 21 | z-index: $z-index-modal; 22 | overflow: hidden; 23 | min-height: 100%; 24 | width: 100%; 25 | background-color: $modal-bg-color; 26 | } 27 | 28 | @media (min-width: $modal-inset-mode-break-point) { 29 | // inset mode is when the modal doesn't fill the entire 30 | // display but instead is centered within a large display 31 | .modal { 32 | top: $modal-inset-mode-top; 33 | right: $modal-inset-mode-right; 34 | bottom: $modal-inset-mode-bottom; 35 | left: $modal-inset-mode-left; 36 | overflow: visible; 37 | min-height: $modal-inset-mode-min-height; 38 | width: (100% - $modal-inset-mode-left - $modal-inset-mode-right); 39 | } 40 | 41 | .modal.ng-leave-active { 42 | bottom: 0; 43 | } 44 | 45 | // remove ios header padding from inset header 46 | .platform-ios.platform-cordova .modal-wrapper .modal{ 47 | .bar-header:not(.bar-subheader) { 48 | height: $bar-height; 49 | > * { 50 | margin-top: 0; 51 | } 52 | } 53 | .tabs-top > .tabs, 54 | .tabs.tabs-top { 55 | top: $bar-height; 56 | } 57 | .has-header, 58 | .bar-subheader { 59 | top: $bar-height; 60 | } 61 | .has-subheader { 62 | top: $bar-height + $bar-subheader-height; 63 | } 64 | .has-tabs-top { 65 | top: $bar-height + $tabs-height; 66 | } 67 | .has-header.has-subheader.has-tabs-top { 68 | top: $bar-height + $bar-subheader-height + $tabs-height; 69 | } 70 | } 71 | 72 | .modal-backdrop { 73 | @include transition(background-color 300ms ease-in-out); 74 | background-color: $modal-backdrop-bg-inactive; 75 | 76 | &.active { 77 | background-color: $modal-backdrop-bg-active; 78 | } 79 | } 80 | } 81 | 82 | // disable clicks on all but the modal 83 | .modal-open { 84 | pointer-events: none; 85 | 86 | .modal, 87 | .modal-backdrop { 88 | pointer-events: auto; 89 | } 90 | // prevent clicks on modal when loading overlay is active though 91 | &.loading-active { 92 | .modal, 93 | .modal-backdrop { 94 | pointer-events: none; 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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-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 | &.status-bar-hide { 44 | // Cordova doesn't adjust the body height correctly, this makes up for it 45 | margin-bottom: 20px; 46 | } 47 | } 48 | 49 | @media (orientation:landscape) { 50 | .platform-ios.platform-browser.platform-ipad { 51 | position: fixed; // required for iPad 7 Safari 52 | } 53 | } 54 | 55 | .platform-c:not(.enable-transitions) * { 56 | // disable transitions on grade-c devices (Android 2) 57 | -webkit-transition: none !important; 58 | transition: none !important; 59 | } 60 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | } 78 | 79 | .popover, 80 | .popover .bar-header { 81 | border-radius: $popover-border-radius-ios; 82 | } 83 | .popover .scroll-content { 84 | margin: 8px 0; 85 | border-radius: $popover-border-radius-ios; 86 | } 87 | .popover .scroll-content.has-header { 88 | margin-top: 0; 89 | } 90 | .popover-arrow { 91 | position: absolute; 92 | display: block; 93 | top: -17px; 94 | width: 30px; 95 | height: 19px; 96 | overflow: hidden; 97 | 98 | &:after { 99 | position: absolute; 100 | top: 12px; 101 | left: 5px; 102 | width: 20px; 103 | height: 20px; 104 | background-color: $popover-bg-color; 105 | border-radius: 3px; 106 | content: ''; 107 | @include rotate(-45deg); 108 | } 109 | } 110 | .popover-bottom .popover-arrow { 111 | top: auto; 112 | bottom: -10px; 113 | &:after { 114 | top: -6px; 115 | } 116 | } 117 | } 118 | 119 | 120 | // Android Popover 121 | .platform-android { 122 | 123 | .popover { 124 | margin-top: -32px; 125 | background-color: $popover-bg-color-android; 126 | box-shadow: $popover-box-shadow-android; 127 | 128 | .item { 129 | border-color: $popover-bg-color-android; 130 | background-color: $popover-bg-color-android; 131 | color: #4d4d4d; 132 | } 133 | &.popover-bottom { 134 | margin-top: 32px; 135 | } 136 | } 137 | 138 | .popover-backdrop, 139 | .popover-backdrop.active { 140 | background-color: transparent; 141 | } 142 | } 143 | 144 | 145 | // disable clicks on all but the popover 146 | .popover-open { 147 | pointer-events: none; 148 | 149 | .popover, 150 | .popover-backdrop { 151 | pointer-events: auto; 152 | } 153 | // prevent clicks on popover when loading overlay is active though 154 | &.loading-active { 155 | .popover, 156 | .popover-backdrop { 157 | pointer-events: none; 158 | } 159 | } 160 | } 161 | 162 | 163 | // wider popover on larger viewports 164 | @media (min-width: $popover-large-break-point) { 165 | .popover { 166 | width: $popover-large-width; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | 54 | .popup-head { 55 | padding: 15px 10px; 56 | border-bottom: 1px solid #eee; 57 | text-align: center; 58 | } 59 | .popup-title { 60 | margin: 0; 61 | padding: 0; 62 | font-size: 15px; 63 | } 64 | .popup-sub-title { 65 | margin: 5px 0 0 0; 66 | padding: 0; 67 | font-weight: normal; 68 | font-size: 11px; 69 | } 70 | .popup-body { 71 | padding: 10px; 72 | overflow: scroll; 73 | } 74 | 75 | .popup-buttons { 76 | @include display-flex(); 77 | @include flex-direction(row); 78 | padding: 10px; 79 | min-height: $popup-button-min-height + 20; 80 | 81 | .button { 82 | @include flex(1); 83 | display: block; 84 | min-height: $popup-button-min-height; 85 | border-radius: $popup-button-border-radius; 86 | line-height: $popup-button-line-height; 87 | 88 | margin-right: 5px; 89 | &:last-child { 90 | margin-right: 0px; 91 | } 92 | } 93 | } 94 | 95 | .popup-open { 96 | pointer-events: none; 97 | 98 | &.modal-open .modal { 99 | pointer-events: none; 100 | } 101 | 102 | .popup-backdrop, .popup { 103 | pointer-events: auto; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_progress.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Progress 4 | * -------------------------------------------------- 5 | */ 6 | 7 | progress { 8 | display: block; 9 | margin: $progress-margin; 10 | width: $progress-width; 11 | } 12 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 ~ .item-content { 38 | /* style the item content when its checked */ 39 | background: #f7f7f7; 40 | } 41 | 42 | &:checked ~ .radio-icon { 43 | /* show the checkmark icon when its checked */ 44 | visibility: visible; 45 | } 46 | } 47 | 48 | // Hack for Android to correctly display the checked item 49 | // http://timpietrusky.com/advanced-checkbox-hack 50 | .platform-android.grade-b .item-radio, 51 | .platform-android.grade-c .item-radio { 52 | -webkit-animation: androidCheckedbugfix infinite 1s; 53 | } 54 | @-webkit-keyframes androidCheckedbugfix { 55 | from { padding: 0; } 56 | to { padding: 0; } 57 | } 58 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_range.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Range 4 | * -------------------------------------------------- 5 | */ 6 | 7 | input[type="range"] { 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 | &::-webkit-slider-thumb { 25 | position: relative; 26 | width: $range-slider-width; 27 | height: $range-slider-height; 28 | border-radius: $range-slider-border-radius; 29 | background-color: $toggle-handle-off-bg-color; 30 | box-shadow: $range-slider-box-shadow; 31 | cursor: pointer; 32 | -webkit-appearance: none; 33 | border: 0; 34 | } 35 | 36 | &::-webkit-slider-thumb:before { 37 | /* what creates the colorful line on the left side of the slider */ 38 | position: absolute; 39 | top: ($range-slider-height / 2) - ($range-track-height / 2); 40 | left: -2001px; 41 | width: 2000px; 42 | height: $range-track-height; 43 | background: $dark; 44 | content: ' '; 45 | } 46 | 47 | &::-webkit-slider-thumb:after { 48 | /* create a larger (but hidden) hit area */ 49 | position: absolute; 50 | top: -15px; 51 | left: -15px; 52 | padding: 30px; 53 | content: ' '; 54 | //background: red; 55 | //opacity: .5; 56 | } 57 | 58 | } 59 | 60 | .range { 61 | @include display-flex(); 62 | @include align-items(center); 63 | padding: 2px 11px; 64 | 65 | &.range-light { 66 | input { @include range-style($range-light-track-bg); } 67 | } 68 | &.range-stable { 69 | input { @include range-style($range-stable-track-bg); } 70 | } 71 | &.range-positive { 72 | input { @include range-style($range-positive-track-bg); } 73 | } 74 | &.range-calm { 75 | input { @include range-style($range-calm-track-bg); } 76 | } 77 | &.range-balanced { 78 | input { @include range-style($range-balanced-track-bg); } 79 | } 80 | &.range-assertive { 81 | input { @include range-style($range-assertive-track-bg); } 82 | } 83 | &.range-energized { 84 | input { @include range-style($range-energized-track-bg); } 85 | } 86 | &.range-royal { 87 | input { @include range-style($range-royal-track-bg); } 88 | } 89 | &.range-dark { 90 | input { @include range-style($range-dark-track-bg); } 91 | } 92 | } 93 | 94 | .range .icon { 95 | @include flex(0); 96 | display: block; 97 | min-width: $range-icon-size; 98 | text-align: center; 99 | font-size: $range-icon-size; 100 | } 101 | 102 | .range input { 103 | @include flex(1); 104 | display: block; 105 | margin-right: 10px; 106 | margin-left: 10px; 107 | } 108 | 109 | .range-label { 110 | @include flex(0, 0, auto); 111 | display: block; 112 | white-space: nowrap; 113 | } 114 | 115 | .range-label:first-child { 116 | padding-left: 5px; 117 | } 118 | .range input + .range-label { 119 | padding-right: 5px; 120 | padding-left: 0; 121 | } 122 | 123 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | 12 | .ionic-refresher-content { 13 | position: absolute; 14 | bottom: 15px; 15 | left: 0; 16 | width: 100%; 17 | color: $scroll-refresh-icon-color; 18 | text-align: center; 19 | 20 | font-size: 30px; 21 | 22 | .text-refreshing, 23 | .text-pulling { 24 | font-size: 16px; 25 | line-height: 16px; 26 | } 27 | &.ionic-refresher-with-text { 28 | bottom: 10px; 29 | } 30 | } 31 | 32 | .icon-refreshing, 33 | .icon-pulling { 34 | width: 100%; 35 | -webkit-backface-visibility: hidden; 36 | backface-visibility: hidden; 37 | -webkit-transform-style: preserve-3d; 38 | transform-style: preserve-3d; 39 | } 40 | .icon-pulling { 41 | @include animation-name(refresh-spin-back); 42 | @include animation-duration(200ms); 43 | @include animation-timing-function(linear); 44 | @include animation-fill-mode(none); 45 | -webkit-transform: translate3d(0,0,0) rotate(0deg); 46 | transform: translate3d(0,0,0) rotate(0deg); 47 | } 48 | .icon-refreshing, 49 | .text-refreshing { 50 | display: none; 51 | } 52 | .icon-refreshing { 53 | @include animation-duration(1.5s); 54 | } 55 | 56 | &.active { 57 | .icon-pulling:not(.pulling-rotation-disabled) { 58 | @include animation-name(refresh-spin); 59 | -webkit-transform: translate3d(0,0,0) rotate(-180deg); 60 | transform: translate3d(0,0,0) rotate(-180deg); 61 | } 62 | &.refreshing { 63 | @include transition(-webkit-transform .2s); 64 | @include transition(transform .2s); 65 | -webkit-transform: scale(1,1); 66 | transform: scale(1,1); 67 | 68 | .icon-pulling, 69 | .text-pulling { 70 | display: none; 71 | } 72 | .icon-refreshing, 73 | .text-refreshing { 74 | display: block; 75 | } 76 | &.refreshing-tail { 77 | -webkit-transform: scale(0,0); 78 | transform: scale(0,0); 79 | } 80 | } 81 | } 82 | } 83 | 84 | @-webkit-keyframes refresh-spin { 85 | 0% { -webkit-transform: translate3d(0,0,0) rotate(0); } 86 | 100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } 87 | } 88 | 89 | @keyframes refresh-spin { 90 | 0% { transform: translate3d(0,0,0) rotate(0); } 91 | 100% { transform: translate3d(0,0,0) rotate(180deg); } 92 | } 93 | 94 | @-webkit-keyframes refresh-spin-back { 95 | 0% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } 96 | 100% { -webkit-transform: translate3d(0,0,0) rotate(0); } 97 | } 98 | 99 | @keyframes refresh-spin-back { 100 | 0% { transform: translate3d(0,0,0) rotate(180deg); } 101 | 100% { transform: translate3d(0,0,0) rotate(0); } 102 | } 103 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | right: 0; 15 | padding: ($item-padding - 2) ($item-padding * 3) ($item-padding) $item-padding; 16 | max-width: 65%; 17 | 18 | border: none; 19 | background: $item-default-bg; 20 | color: #333; 21 | 22 | // hack to hide default dropdown arrow in FF 23 | text-indent: .01px; 24 | text-overflow: ''; 25 | 26 | white-space: nowrap; 27 | font-size: $font-size-base; 28 | 29 | cursor: pointer; 30 | direction: rtl; // right align the select text 31 | } 32 | 33 | select::-ms-expand { 34 | // hide default dropdown arrow in IE 35 | display: none; 36 | } 37 | 38 | option { 39 | direction: ltr; 40 | } 41 | 42 | &:after { 43 | position: absolute; 44 | top: 50%; 45 | right: $item-padding; 46 | margin-top: -3px; 47 | width: 0; 48 | height: 0; 49 | border-top: 5px solid; 50 | border-right: 5px solid rgba(0, 0, 0, 0); 51 | border-left: 5px solid rgba(0, 0, 0, 0); 52 | color: #999; 53 | content: ""; 54 | pointer-events: none; 55 | } 56 | &.item-light { 57 | select{ 58 | background:$item-light-bg; 59 | color:$item-light-text; 60 | } 61 | } 62 | &.item-stable { 63 | select{ 64 | background:$item-stable-bg; 65 | color:$item-stable-text; 66 | } 67 | &:after, .input-label{ 68 | color:darken($item-stable-border,30%); 69 | } 70 | } 71 | &.item-positive { 72 | select{ 73 | background:$item-positive-bg; 74 | color:$item-positive-text; 75 | } 76 | &:after, .input-label{ 77 | color:$item-positive-text; 78 | } 79 | } 80 | &.item-calm { 81 | select{ 82 | background:$item-calm-bg; 83 | color:$item-calm-text; 84 | } 85 | &:after, .input-label{ 86 | color:$item-calm-text; 87 | } 88 | } 89 | &.item-assertive { 90 | select{ 91 | background:$item-assertive-bg; 92 | color:$item-assertive-text; 93 | } 94 | &:after, .input-label{ 95 | color:$item-assertive-text; 96 | } 97 | } 98 | &.item-balanced { 99 | select{ 100 | background:$item-balanced-bg; 101 | color:$item-balanced-text; 102 | } 103 | &:after, .input-label{ 104 | color:$item-balanced-text; 105 | } 106 | } 107 | &.item-energized { 108 | select{ 109 | background:$item-energized-bg; 110 | color:$item-energized-text; 111 | } 112 | &:after, .input-label{ 113 | color:$item-energized-text; 114 | } 115 | } 116 | &.item-royal { 117 | select{ 118 | background:$item-royal-bg; 119 | color:$item-royal-text; 120 | } 121 | &:after, .input-label{ 122 | color:$item-royal-text; 123 | } 124 | } 125 | &.item-dark { 126 | select{ 127 | background:$item-dark-bg; 128 | color:$item-dark-text; 129 | } 130 | &:after, .input-label{ 131 | color:$item-dark-text; 132 | } 133 | } 134 | } 135 | 136 | select { 137 | &[multiple], 138 | &[size] { 139 | height: auto; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_split-pane.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Split Pane 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .split-pane { 8 | @include display-flex(); 9 | @include align-items(stretch); 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | .split-pane-menu { 15 | @include flex(0, 0, $split-pane-menu-width); 16 | 17 | overflow-y: auto; 18 | width: $split-pane-menu-width; 19 | height: 100%; 20 | border-right: 1px solid $split-pane-menu-border-color; 21 | 22 | @media all and (max-width: 568px) { 23 | border-right: none; 24 | } 25 | } 26 | 27 | .split-pane-content { 28 | @include flex(1, 0, auto); 29 | } 30 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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; 17 | transition-property: opacity, transform; 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 | // Transition Settings 142 | // ------------------------------- 143 | 144 | [nav-view="cached"], 145 | [nav-bar="cached"] { 146 | display: none; 147 | } 148 | 149 | [nav-view="stage"] { 150 | opacity: 0; 151 | @include transition-duration( 0 ); 152 | } 153 | 154 | [nav-bar="stage"] { 155 | .title, 156 | .buttons, 157 | .back-text { 158 | position: absolute; 159 | opacity: 0; 160 | @include transition-duration(0s); 161 | } 162 | } 163 | 164 | -------------------------------------------------------------------------------- /server/ionic/scss-live/_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 | 152 | a.subdued { 153 | padding-right: 10px; 154 | color: #888; 155 | text-decoration: none; 156 | 157 | &:hover { 158 | text-decoration: none; 159 | } 160 | &:last-child { 161 | padding-right: 0; 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /server/ionic/scss-live/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/server/ionic/scss-live/fonts/ionicons.eot -------------------------------------------------------------------------------- /server/ionic/scss-live/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/server/ionic/scss-live/fonts/ionicons.ttf -------------------------------------------------------------------------------- /server/ionic/scss-live/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/server/ionic/scss-live/fonts/ionicons.woff -------------------------------------------------------------------------------- /server/ionic/scss-live/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 | 31 | // Forms 32 | "form", 33 | "checkbox", 34 | "toggle", 35 | "radio", 36 | "range", 37 | "select", 38 | "progress", 39 | 40 | // Buttons 41 | "button", 42 | "button-bar"; 43 | 44 | // Util 45 | //"animations", 46 | //"grid"; 47 | //"util"; 48 | //"platform"; 49 | -------------------------------------------------------------------------------- /server/ionic/scss-live/ionicons/_ionicons-animation.scss: -------------------------------------------------------------------------------- 1 | // Animation Icons 2 | // -------------------------- 3 | 4 | .#{$ionicons-prefix}spin { 5 | -webkit-animation: spin 1s infinite linear; 6 | -moz-animation: spin 1s infinite linear; 7 | -o-animation: spin 1s infinite linear; 8 | animation: spin 1s infinite linear; 9 | } 10 | 11 | @-moz-keyframes spin { 12 | 0% { -moz-transform: rotate(0deg); } 13 | 100% { -moz-transform: rotate(359deg); } 14 | } 15 | @-webkit-keyframes spin { 16 | 0% { -webkit-transform: rotate(0deg); } 17 | 100% { -webkit-transform: rotate(359deg); } 18 | } 19 | @-o-keyframes spin { 20 | 0% { -o-transform: rotate(0deg); } 21 | 100% { -o-transform: rotate(359deg); } 22 | } 23 | @-ms-keyframes spin { 24 | 0% { -ms-transform: rotate(0deg); } 25 | 100% { -ms-transform: rotate(359deg); } 26 | } 27 | @keyframes spin { 28 | 0% { transform: rotate(0deg); } 29 | 100% { transform: rotate(359deg); } 30 | } 31 | 32 | 33 | .#{$ionicons-prefix}loading-a, 34 | .#{$ionicons-prefix}loading-b, 35 | .#{$ionicons-prefix}loading-c, 36 | .#{$ionicons-prefix}loading-d, 37 | .#{$ionicons-prefix}looping, 38 | .#{$ionicons-prefix}refreshing, 39 | .#{$ionicons-prefix}ios7-reloading { 40 | @extend .ion; 41 | @extend .#{$ionicons-prefix}spin; 42 | } 43 | 44 | .#{$ionicons-prefix}loading-a { 45 | -webkit-animation-timing-function: steps(8, start); 46 | -moz-animation-timing-function: steps(8, start); 47 | animation-timing-function: steps(8, start); 48 | } 49 | 50 | .#{$ionicons-prefix}loading-a:before { 51 | @extend .#{$ionicons-prefix}load-a:before; 52 | } 53 | 54 | .#{$ionicons-prefix}loading-b:before { 55 | @extend .#{$ionicons-prefix}load-b:before; 56 | } 57 | 58 | .#{$ionicons-prefix}loading-c:before { 59 | @extend .#{$ionicons-prefix}load-c:before; 60 | } 61 | 62 | .#{$ionicons-prefix}loading-d:before { 63 | @extend .#{$ionicons-prefix}load-d:before; 64 | } 65 | 66 | .#{$ionicons-prefix}looping:before { 67 | @extend .#{$ionicons-prefix}loop:before; 68 | } 69 | 70 | .#{$ionicons-prefix}refreshing:before { 71 | @extend .#{$ionicons-prefix}refresh:before; 72 | } 73 | 74 | .#{$ionicons-prefix}ios7-reloading:before { 75 | @extend .#{$ionicons-prefix}ios7-reload:before; 76 | } 77 | -------------------------------------------------------------------------------- /server/ionic/scss-live/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.svg?v=#{$ionicons-version}#Ionicons") format("svg"); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | .ion { 16 | display: inline-block; 17 | font-family: $ionicons-font-family; 18 | speak: none; 19 | font-style: normal; 20 | font-weight: normal; 21 | font-variant: normal; 22 | text-transform: none; 23 | text-rendering: auto; 24 | line-height: 1; 25 | -webkit-font-smoothing: antialiased; 26 | -moz-osx-font-smoothing: grayscale; 27 | } -------------------------------------------------------------------------------- /server/ionic/scss-live/ionicons/ionicons.scss: -------------------------------------------------------------------------------- 1 | @import "ionicons-variables"; 2 | /*! 3 | Ionicons, v#{$ionicons-version} 4 | Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ 5 | https://twitter.com/benjsperry https://twitter.com/ionicframework 6 | MIT License: https://github.com/driftyco/ionicons 7 | */ 8 | 9 | @import "ionicons-font"; 10 | @import "ionicons-animation"; 11 | @import "ionicons-icons"; -------------------------------------------------------------------------------- /server/ionic/scss-prod/_action-sheet.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Action Sheets 3 | * -------------------------------------------------- 4 | */ 5 | 6 | .action-sheet-backdrop { 7 | @include transition(background-color 300ms ease-in-out); 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | z-index: $z-index-action-sheet; 12 | width: 100%; 13 | height: 100%; 14 | background-color: rgba(0,0,0,0); 15 | 16 | &.active { 17 | background-color: rgba(0,0,0,0.4); 18 | } 19 | } 20 | 21 | .action-sheet-wrapper { 22 | @include translate3d(0, 100%, 0); 23 | @include transition(all ease-in-out 300ms); 24 | position: absolute; 25 | bottom: 0; 26 | width: 100%; 27 | } 28 | 29 | .action-sheet-up { 30 | @include translate3d(0, 0, 0); 31 | } 32 | 33 | .action-sheet { 34 | margin-left: $sheet-margin; 35 | margin-right: $sheet-margin; 36 | width: auto; 37 | z-index: $z-index-action-sheet; 38 | overflow: hidden; 39 | 40 | .button { 41 | display: block; 42 | padding: 1px; 43 | width: 100%; 44 | border-radius: 0; 45 | border-color: $sheet-options-border-color; 46 | background-color: transparent; 47 | 48 | color: $sheet-options-text-color; 49 | font-size: 21px; 50 | 51 | &:hover { 52 | color: $sheet-options-text-color; 53 | } 54 | &.destructive { 55 | color: #ff3b30; 56 | &:hover { 57 | color: #ff3b30; 58 | } 59 | } 60 | } 61 | 62 | .button.active, .button.activated { 63 | box-shadow: none; 64 | border-color: $sheet-options-border-color; 65 | color: $sheet-options-text-color; 66 | background: $sheet-options-bg-active-color; 67 | } 68 | } 69 | 70 | .action-sheet-has-icons .icon { 71 | position: absolute; 72 | left: 16px; 73 | } 74 | 75 | .action-sheet-title { 76 | padding: $sheet-margin * 2; 77 | color: #8f8f8f; 78 | text-align: center; 79 | font-size: 13px; 80 | } 81 | 82 | .action-sheet-group { 83 | margin-bottom: $sheet-margin; 84 | border-radius: $sheet-border-radius; 85 | background-color: #fff; 86 | overflow: hidden; 87 | 88 | .button { 89 | border-width: 1px 0px 0px 0px; 90 | } 91 | .button:first-child:last-child { 92 | border-width: 0; 93 | } 94 | } 95 | 96 | .action-sheet-options { 97 | background: $sheet-options-bg-color; 98 | } 99 | 100 | .action-sheet-cancel { 101 | .button { 102 | font-weight: 500; 103 | } 104 | } 105 | 106 | .action-sheet-open { 107 | pointer-events: none; 108 | 109 | &.modal-open .modal { 110 | pointer-events: none; 111 | } 112 | 113 | .action-sheet-backdrop { 114 | pointer-events: auto; 115 | } 116 | } 117 | 118 | 119 | .platform-android { 120 | 121 | .action-sheet-backdrop.active { 122 | background-color: rgba(0,0,0,0.2); 123 | } 124 | 125 | .action-sheet { 126 | margin: 0; 127 | 128 | .action-sheet-title, 129 | .button { 130 | text-align: left; 131 | border-color: transparent; 132 | font-size: 16px; 133 | color: inherit; 134 | } 135 | 136 | .action-sheet-title { 137 | font-size: 14px; 138 | padding: 16px; 139 | color: #666; 140 | } 141 | 142 | .button.active, 143 | .button.activated { 144 | background: #e8e8e8; 145 | } 146 | } 147 | 148 | .action-sheet-group { 149 | margin: 0; 150 | border-radius: 0; 151 | background-color: #fafafa; 152 | } 153 | 154 | .action-sheet-cancel { 155 | display: none; 156 | } 157 | 158 | .action-sheet-has-icons { 159 | 160 | .button { 161 | padding-left: 56px; 162 | } 163 | 164 | } 165 | 166 | } 167 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_button-bar.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Button Bar 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .button-bar { 8 | @include display-flex(); 9 | @include flex(1); 10 | width: 100%; 11 | 12 | &.button-bar-inline { 13 | display: block; 14 | width: auto; 15 | 16 | @include clearfix(); 17 | 18 | > .button { 19 | width: auto; 20 | display: inline-block; 21 | float: left; 22 | } 23 | } 24 | } 25 | 26 | .button-bar > .button { 27 | @include flex(1); 28 | display: block; 29 | 30 | overflow: hidden; 31 | 32 | padding: 0 16px; 33 | 34 | width: 0; 35 | 36 | border-width: 1px 0px 1px 1px; 37 | border-radius: 0; 38 | text-align: center; 39 | text-overflow: ellipsis; 40 | white-space: nowrap; 41 | 42 | &:before, 43 | .icon:before { 44 | line-height: 44px; 45 | } 46 | 47 | &:first-child { 48 | border-radius: $button-border-radius 0px 0px $button-border-radius; 49 | } 50 | &:last-child { 51 | border-right-width: 1px; 52 | border-radius: 0px $button-border-radius $button-border-radius 0px; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Grid 3 | * -------------------------------------------------- 4 | * Using flexbox for the grid, inspired by Philip Walton: 5 | * http://philipwalton.github.io/solved-by-flexbox/demos/grids/ 6 | * By default each .col within a .row will evenly take up 7 | * available width, and the height of each .col with take 8 | * up the height of the tallest .col in the same .row. 9 | */ 10 | 11 | .row { 12 | @include display-flex(); 13 | padding: ($grid-padding-width / 2); 14 | width: 100%; 15 | } 16 | 17 | .row-wrap { 18 | @include flex-wrap(wrap); 19 | } 20 | 21 | .row + .row { 22 | margin-top: ($grid-padding-width / 2) * -1; 23 | padding-top: 0; 24 | } 25 | 26 | .col { 27 | @include flex(1); 28 | display: block; 29 | padding: ($grid-padding-width / 2); 30 | width: 100%; 31 | } 32 | 33 | 34 | /* Vertically Align Columns */ 35 | /* .row-* vertically aligns every .col in the .row */ 36 | .row-top { 37 | @include align-items(flex-start); 38 | } 39 | .row-bottom { 40 | @include align-items(flex-end); 41 | } 42 | .row-center { 43 | @include align-items(center); 44 | } 45 | .row-stretch { 46 | @include align-items(stretch); 47 | } 48 | .row-baseline { 49 | @include align-items(baseline); 50 | } 51 | 52 | /* .col-* vertically aligns an individual .col */ 53 | .col-top { 54 | @include align-self(flex-start); 55 | } 56 | .col-bottom { 57 | @include align-self(flex-end); 58 | } 59 | .col-center { 60 | @include align-self(center); 61 | } 62 | 63 | /* Column Offsets */ 64 | .col-offset-10 { 65 | margin-left: 10%; 66 | } 67 | .col-offset-20 { 68 | margin-left: 20%; 69 | } 70 | .col-offset-25 { 71 | margin-left: 25%; 72 | } 73 | .col-offset-33, .col-offset-34 { 74 | margin-left: 33.3333%; 75 | } 76 | .col-offset-50 { 77 | margin-left: 50%; 78 | } 79 | .col-offset-66, .col-offset-67 { 80 | margin-left: 66.6666%; 81 | } 82 | .col-offset-75 { 83 | margin-left: 75%; 84 | } 85 | .col-offset-80 { 86 | margin-left: 80%; 87 | } 88 | .col-offset-90 { 89 | margin-left: 90%; 90 | } 91 | 92 | 93 | /* Explicit Column Percent Sizes */ 94 | /* By default each grid column will evenly distribute */ 95 | /* across the grid. However, you can specify individual */ 96 | /* columns to take up a certain size of the available area */ 97 | .col-10 { 98 | @include flex(0, 0, 10%); 99 | max-width: 10%; 100 | } 101 | .col-20 { 102 | @include flex(0, 0, 20%); 103 | max-width: 20%; 104 | } 105 | .col-25 { 106 | @include flex(0, 0, 25%); 107 | max-width: 25%; 108 | } 109 | .col-33, .col-34 { 110 | @include flex(0, 0, 33.3333%); 111 | max-width: 33.3333%; 112 | } 113 | .col-50 { 114 | @include flex(0, 0, 50%); 115 | max-width: 50%; 116 | } 117 | .col-66, .col-67 { 118 | @include flex(0, 0, 66.6666%); 119 | max-width: 66.6666%; 120 | } 121 | .col-75 { 122 | @include flex(0, 0, 75%); 123 | max-width: 75%; 124 | } 125 | .col-80 { 126 | @include flex(0, 0, 80%); 127 | max-width: 80%; 128 | } 129 | .col-90 { 130 | @include flex(0, 0, 90%); 131 | max-width: 90%; 132 | } 133 | 134 | 135 | /* Responsive Grid Classes */ 136 | /* Adding a class of responsive-X to a row */ 137 | /* will trigger the flex-direction to */ 138 | /* change to column and add some margin */ 139 | /* to any columns in the row for clearity */ 140 | 141 | @include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break); 142 | @include responsive-grid-break('.responsive-md', $grid-responsive-md-break); 143 | @include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break); 144 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_loaders.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Loaders (Spinners) 3 | * -------------------------------------------------- 4 | */ 5 | 6 | svg.loader { 7 | width: 28px; 8 | height: 28px; 9 | stroke: #333; 10 | fill: #333; 11 | } 12 | 13 | .loader-ios, 14 | .loader-ios-small { 15 | 16 | line { 17 | stroke: #69717d; 18 | } 19 | 20 | } 21 | 22 | .loader-android { 23 | 24 | circle { 25 | stroke: #4b8bf4; 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | display: none; 26 | } 27 | &.visible { 28 | visibility: visible; 29 | } 30 | &.active { 31 | opacity: 1; 32 | } 33 | 34 | .loading { 35 | padding: $loading-padding; 36 | 37 | border-radius: $loading-border-radius; 38 | background-color: $loading-bg-color; 39 | 40 | color: $loading-text-color; 41 | 42 | text-align: center; 43 | text-overflow: ellipsis; 44 | font-size: $loading-font-size; 45 | 46 | h1, h2, h3, h4, h5, h6 { 47 | color: $loading-text-color; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | 40 | .grade-b .menu-content, 41 | .grade-c .menu-content { 42 | @include box-sizing(content-box); 43 | right: -1px; 44 | left: -1px; 45 | border-right: 1px solid #ccc; 46 | border-left: 1px solid #ccc; 47 | box-shadow: none; 48 | } 49 | 50 | .menu-left { 51 | left: 0; 52 | } 53 | 54 | .menu-right { 55 | right: 0; 56 | } 57 | 58 | .aside-open.aside-resizing .menu-right { 59 | display: none; 60 | } 61 | 62 | .menu-animated { 63 | @include transition-transform($menu-animation-speed ease); 64 | } 65 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_modal.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Modals 4 | * -------------------------------------------------- 5 | * Modals are independent windows that slide in from off-screen. 6 | */ 7 | 8 | .modal-backdrop { 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | z-index: $z-index-modal; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .modal { 18 | display: block; 19 | position: absolute; 20 | top: 0; 21 | z-index: $z-index-modal; 22 | overflow: hidden; 23 | min-height: 100%; 24 | width: 100%; 25 | background-color: $modal-bg-color; 26 | } 27 | 28 | @media (min-width: $modal-inset-mode-break-point) { 29 | // inset mode is when the modal doesn't fill the entire 30 | // display but instead is centered within a large display 31 | .modal { 32 | top: $modal-inset-mode-top; 33 | right: $modal-inset-mode-right; 34 | bottom: $modal-inset-mode-bottom; 35 | left: $modal-inset-mode-left; 36 | overflow: visible; 37 | min-height: $modal-inset-mode-min-height; 38 | width: (100% - $modal-inset-mode-left - $modal-inset-mode-right); 39 | } 40 | 41 | .modal.ng-leave-active { 42 | bottom: 0; 43 | } 44 | 45 | // remove ios header padding from inset header 46 | .platform-ios.platform-cordova .modal-wrapper .modal{ 47 | .bar-header:not(.bar-subheader) { 48 | height: $bar-height; 49 | > * { 50 | margin-top: 0; 51 | } 52 | } 53 | .tabs-top > .tabs, 54 | .tabs.tabs-top { 55 | top: $bar-height; 56 | } 57 | .has-header, 58 | .bar-subheader { 59 | top: $bar-height; 60 | } 61 | .has-subheader { 62 | top: $bar-height + $bar-subheader-height; 63 | } 64 | .has-tabs-top { 65 | top: $bar-height + $tabs-height; 66 | } 67 | .has-header.has-subheader.has-tabs-top { 68 | top: $bar-height + $bar-subheader-height + $tabs-height; 69 | } 70 | } 71 | 72 | .modal-backdrop { 73 | @include transition(background-color 300ms ease-in-out); 74 | background-color: $modal-backdrop-bg-inactive; 75 | 76 | &.active { 77 | background-color: $modal-backdrop-bg-active; 78 | } 79 | } 80 | } 81 | 82 | // disable clicks on all but the modal 83 | .modal-open { 84 | pointer-events: none; 85 | 86 | .modal, 87 | .modal-backdrop { 88 | pointer-events: auto; 89 | } 90 | // prevent clicks on modal when loading overlay is active though 91 | &.loading-active { 92 | .modal, 93 | .modal-backdrop { 94 | pointer-events: none; 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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-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 | &.status-bar-hide { 44 | // Cordova doesn't adjust the body height correctly, this makes up for it 45 | margin-bottom: 20px; 46 | } 47 | } 48 | 49 | @media (orientation:landscape) { 50 | .platform-ios.platform-browser.platform-ipad { 51 | position: fixed; // required for iPad 7 Safari 52 | } 53 | } 54 | 55 | .platform-c:not(.enable-transitions) * { 56 | // disable transitions on grade-c devices (Android 2) 57 | -webkit-transition: none !important; 58 | transition: none !important; 59 | } 60 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | } 78 | 79 | .popover, 80 | .popover .bar-header { 81 | border-radius: $popover-border-radius-ios; 82 | } 83 | .popover .scroll-content { 84 | margin: 8px 0; 85 | border-radius: $popover-border-radius-ios; 86 | } 87 | .popover .scroll-content.has-header { 88 | margin-top: 0; 89 | } 90 | .popover-arrow { 91 | position: absolute; 92 | display: block; 93 | top: -17px; 94 | width: 30px; 95 | height: 19px; 96 | overflow: hidden; 97 | 98 | &:after { 99 | position: absolute; 100 | top: 12px; 101 | left: 5px; 102 | width: 20px; 103 | height: 20px; 104 | background-color: $popover-bg-color; 105 | border-radius: 3px; 106 | content: ''; 107 | @include rotate(-45deg); 108 | } 109 | } 110 | .popover-bottom .popover-arrow { 111 | top: auto; 112 | bottom: -10px; 113 | &:after { 114 | top: -6px; 115 | } 116 | } 117 | } 118 | 119 | 120 | // Android Popover 121 | .platform-android { 122 | 123 | .popover { 124 | margin-top: -32px; 125 | background-color: $popover-bg-color-android; 126 | box-shadow: $popover-box-shadow-android; 127 | 128 | .item { 129 | border-color: $popover-bg-color-android; 130 | background-color: $popover-bg-color-android; 131 | color: #4d4d4d; 132 | } 133 | &.popover-bottom { 134 | margin-top: 32px; 135 | } 136 | } 137 | 138 | .popover-backdrop, 139 | .popover-backdrop.active { 140 | background-color: transparent; 141 | } 142 | } 143 | 144 | 145 | // disable clicks on all but the popover 146 | .popover-open { 147 | pointer-events: none; 148 | 149 | .popover, 150 | .popover-backdrop { 151 | pointer-events: auto; 152 | } 153 | // prevent clicks on popover when loading overlay is active though 154 | &.loading-active { 155 | .popover, 156 | .popover-backdrop { 157 | pointer-events: none; 158 | } 159 | } 160 | } 161 | 162 | 163 | // wider popover on larger viewports 164 | @media (min-width: $popover-large-break-point) { 165 | .popover { 166 | width: $popover-large-width; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | 54 | .popup-head { 55 | padding: 15px 10px; 56 | border-bottom: 1px solid #eee; 57 | text-align: center; 58 | } 59 | .popup-title { 60 | margin: 0; 61 | padding: 0; 62 | font-size: 15px; 63 | } 64 | .popup-sub-title { 65 | margin: 5px 0 0 0; 66 | padding: 0; 67 | font-weight: normal; 68 | font-size: 11px; 69 | } 70 | .popup-body { 71 | padding: 10px; 72 | overflow: scroll; 73 | } 74 | 75 | .popup-buttons { 76 | @include display-flex(); 77 | @include flex-direction(row); 78 | padding: 10px; 79 | min-height: $popup-button-min-height + 20; 80 | 81 | .button { 82 | @include flex(1); 83 | display: block; 84 | min-height: $popup-button-min-height; 85 | border-radius: $popup-button-border-radius; 86 | line-height: $popup-button-line-height; 87 | 88 | margin-right: 5px; 89 | &:last-child { 90 | margin-right: 0px; 91 | } 92 | } 93 | } 94 | 95 | .popup-open { 96 | pointer-events: none; 97 | 98 | &.modal-open .modal { 99 | pointer-events: none; 100 | } 101 | 102 | .popup-backdrop, .popup { 103 | pointer-events: auto; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_progress.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Progress 4 | * -------------------------------------------------- 5 | */ 6 | 7 | progress { 8 | display: block; 9 | margin: $progress-margin; 10 | width: $progress-width; 11 | } 12 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 ~ .item-content { 38 | /* style the item content when its checked */ 39 | background: #f7f7f7; 40 | } 41 | 42 | &:checked ~ .radio-icon { 43 | /* show the checkmark icon when its checked */ 44 | visibility: visible; 45 | } 46 | } 47 | 48 | // Hack for Android to correctly display the checked item 49 | // http://timpietrusky.com/advanced-checkbox-hack 50 | .platform-android.grade-b .item-radio, 51 | .platform-android.grade-c .item-radio { 52 | -webkit-animation: androidCheckedbugfix infinite 1s; 53 | } 54 | @-webkit-keyframes androidCheckedbugfix { 55 | from { padding: 0; } 56 | to { padding: 0; } 57 | } 58 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_range.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Range 4 | * -------------------------------------------------- 5 | */ 6 | 7 | input[type="range"] { 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 | &::-webkit-slider-thumb { 25 | position: relative; 26 | width: $range-slider-width; 27 | height: $range-slider-height; 28 | border-radius: $range-slider-border-radius; 29 | background-color: $toggle-handle-off-bg-color; 30 | box-shadow: $range-slider-box-shadow; 31 | cursor: pointer; 32 | -webkit-appearance: none; 33 | border: 0; 34 | } 35 | 36 | &::-webkit-slider-thumb:before { 37 | /* what creates the colorful line on the left side of the slider */ 38 | position: absolute; 39 | top: ($range-slider-height / 2) - ($range-track-height / 2); 40 | left: -2001px; 41 | width: 2000px; 42 | height: $range-track-height; 43 | background: $dark; 44 | content: ' '; 45 | } 46 | 47 | &::-webkit-slider-thumb:after { 48 | /* create a larger (but hidden) hit area */ 49 | position: absolute; 50 | top: -15px; 51 | left: -15px; 52 | padding: 30px; 53 | content: ' '; 54 | //background: red; 55 | //opacity: .5; 56 | } 57 | 58 | } 59 | 60 | .range { 61 | @include display-flex(); 62 | @include align-items(center); 63 | padding: 2px 11px; 64 | 65 | &.range-light { 66 | input { @include range-style($range-light-track-bg); } 67 | } 68 | &.range-stable { 69 | input { @include range-style($range-stable-track-bg); } 70 | } 71 | &.range-positive { 72 | input { @include range-style($range-positive-track-bg); } 73 | } 74 | &.range-calm { 75 | input { @include range-style($range-calm-track-bg); } 76 | } 77 | &.range-balanced { 78 | input { @include range-style($range-balanced-track-bg); } 79 | } 80 | &.range-assertive { 81 | input { @include range-style($range-assertive-track-bg); } 82 | } 83 | &.range-energized { 84 | input { @include range-style($range-energized-track-bg); } 85 | } 86 | &.range-royal { 87 | input { @include range-style($range-royal-track-bg); } 88 | } 89 | &.range-dark { 90 | input { @include range-style($range-dark-track-bg); } 91 | } 92 | } 93 | 94 | .range .icon { 95 | @include flex(0); 96 | display: block; 97 | min-width: $range-icon-size; 98 | text-align: center; 99 | font-size: $range-icon-size; 100 | } 101 | 102 | .range input { 103 | @include flex(1); 104 | display: block; 105 | margin-right: 10px; 106 | margin-left: 10px; 107 | } 108 | 109 | .range-label { 110 | @include flex(0, 0, auto); 111 | display: block; 112 | white-space: nowrap; 113 | } 114 | 115 | .range-label:first-child { 116 | padding-left: 5px; 117 | } 118 | .range input + .range-label { 119 | padding-right: 5px; 120 | padding-left: 0; 121 | } 122 | 123 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | 12 | .ionic-refresher-content { 13 | position: absolute; 14 | bottom: 15px; 15 | left: 0; 16 | width: 100%; 17 | color: $scroll-refresh-icon-color; 18 | text-align: center; 19 | 20 | font-size: 30px; 21 | 22 | .text-refreshing, 23 | .text-pulling { 24 | font-size: 16px; 25 | line-height: 16px; 26 | } 27 | &.ionic-refresher-with-text { 28 | bottom: 10px; 29 | } 30 | } 31 | 32 | .icon-refreshing, 33 | .icon-pulling { 34 | width: 100%; 35 | -webkit-backface-visibility: hidden; 36 | backface-visibility: hidden; 37 | -webkit-transform-style: preserve-3d; 38 | transform-style: preserve-3d; 39 | } 40 | .icon-pulling { 41 | @include animation-name(refresh-spin-back); 42 | @include animation-duration(200ms); 43 | @include animation-timing-function(linear); 44 | @include animation-fill-mode(none); 45 | -webkit-transform: translate3d(0,0,0) rotate(0deg); 46 | transform: translate3d(0,0,0) rotate(0deg); 47 | } 48 | .icon-refreshing, 49 | .text-refreshing { 50 | display: none; 51 | } 52 | .icon-refreshing { 53 | @include animation-duration(1.5s); 54 | } 55 | 56 | &.active { 57 | .icon-pulling:not(.pulling-rotation-disabled) { 58 | @include animation-name(refresh-spin); 59 | -webkit-transform: translate3d(0,0,0) rotate(-180deg); 60 | transform: translate3d(0,0,0) rotate(-180deg); 61 | } 62 | &.refreshing { 63 | @include transition(-webkit-transform .2s); 64 | @include transition(transform .2s); 65 | -webkit-transform: scale(1,1); 66 | transform: scale(1,1); 67 | 68 | .icon-pulling, 69 | .text-pulling { 70 | display: none; 71 | } 72 | .icon-refreshing, 73 | .text-refreshing { 74 | display: block; 75 | } 76 | &.refreshing-tail { 77 | -webkit-transform: scale(0,0); 78 | transform: scale(0,0); 79 | } 80 | } 81 | } 82 | } 83 | 84 | @-webkit-keyframes refresh-spin { 85 | 0% { -webkit-transform: translate3d(0,0,0) rotate(0); } 86 | 100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } 87 | } 88 | 89 | @keyframes refresh-spin { 90 | 0% { transform: translate3d(0,0,0) rotate(0); } 91 | 100% { transform: translate3d(0,0,0) rotate(180deg); } 92 | } 93 | 94 | @-webkit-keyframes refresh-spin-back { 95 | 0% { -webkit-transform: translate3d(0,0,0) rotate(180deg); } 96 | 100% { -webkit-transform: translate3d(0,0,0) rotate(0); } 97 | } 98 | 99 | @keyframes refresh-spin-back { 100 | 0% { transform: translate3d(0,0,0) rotate(180deg); } 101 | 100% { transform: translate3d(0,0,0) rotate(0); } 102 | } 103 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | right: 0; 15 | padding: ($item-padding - 2) ($item-padding * 3) ($item-padding) $item-padding; 16 | max-width: 65%; 17 | 18 | border: none; 19 | background: $item-default-bg; 20 | color: #333; 21 | 22 | // hack to hide default dropdown arrow in FF 23 | text-indent: .01px; 24 | text-overflow: ''; 25 | 26 | white-space: nowrap; 27 | font-size: $font-size-base; 28 | 29 | cursor: pointer; 30 | direction: rtl; // right align the select text 31 | } 32 | 33 | select::-ms-expand { 34 | // hide default dropdown arrow in IE 35 | display: none; 36 | } 37 | 38 | option { 39 | direction: ltr; 40 | } 41 | 42 | &:after { 43 | position: absolute; 44 | top: 50%; 45 | right: $item-padding; 46 | margin-top: -3px; 47 | width: 0; 48 | height: 0; 49 | border-top: 5px solid; 50 | border-right: 5px solid rgba(0, 0, 0, 0); 51 | border-left: 5px solid rgba(0, 0, 0, 0); 52 | color: #999; 53 | content: ""; 54 | pointer-events: none; 55 | } 56 | &.item-light { 57 | select{ 58 | background:$item-light-bg; 59 | color:$item-light-text; 60 | } 61 | } 62 | &.item-stable { 63 | select{ 64 | background:$item-stable-bg; 65 | color:$item-stable-text; 66 | } 67 | &:after, .input-label{ 68 | color:darken($item-stable-border,30%); 69 | } 70 | } 71 | &.item-positive { 72 | select{ 73 | background:$item-positive-bg; 74 | color:$item-positive-text; 75 | } 76 | &:after, .input-label{ 77 | color:$item-positive-text; 78 | } 79 | } 80 | &.item-calm { 81 | select{ 82 | background:$item-calm-bg; 83 | color:$item-calm-text; 84 | } 85 | &:after, .input-label{ 86 | color:$item-calm-text; 87 | } 88 | } 89 | &.item-assertive { 90 | select{ 91 | background:$item-assertive-bg; 92 | color:$item-assertive-text; 93 | } 94 | &:after, .input-label{ 95 | color:$item-assertive-text; 96 | } 97 | } 98 | &.item-balanced { 99 | select{ 100 | background:$item-balanced-bg; 101 | color:$item-balanced-text; 102 | } 103 | &:after, .input-label{ 104 | color:$item-balanced-text; 105 | } 106 | } 107 | &.item-energized { 108 | select{ 109 | background:$item-energized-bg; 110 | color:$item-energized-text; 111 | } 112 | &:after, .input-label{ 113 | color:$item-energized-text; 114 | } 115 | } 116 | &.item-royal { 117 | select{ 118 | background:$item-royal-bg; 119 | color:$item-royal-text; 120 | } 121 | &:after, .input-label{ 122 | color:$item-royal-text; 123 | } 124 | } 125 | &.item-dark { 126 | select{ 127 | background:$item-dark-bg; 128 | color:$item-dark-text; 129 | } 130 | &:after, .input-label{ 131 | color:$item-dark-text; 132 | } 133 | } 134 | } 135 | 136 | select { 137 | &[multiple], 138 | &[size] { 139 | height: auto; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_split-pane.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Split Pane 4 | * -------------------------------------------------- 5 | */ 6 | 7 | .split-pane { 8 | @include display-flex(); 9 | @include align-items(stretch); 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | .split-pane-menu { 15 | @include flex(0, 0, $split-pane-menu-width); 16 | 17 | overflow-y: auto; 18 | width: $split-pane-menu-width; 19 | height: 100%; 20 | border-right: 1px solid $split-pane-menu-border-color; 21 | 22 | @media all and (max-width: 568px) { 23 | border-right: none; 24 | } 25 | } 26 | 27 | .split-pane-content { 28 | @include flex(1, 0, auto); 29 | } 30 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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; 17 | transition-property: opacity, transform; 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 | // Transition Settings 142 | // ------------------------------- 143 | 144 | [nav-view="cached"], 145 | [nav-bar="cached"] { 146 | display: none; 147 | } 148 | 149 | [nav-view="stage"] { 150 | opacity: 0; 151 | @include transition-duration( 0 ); 152 | } 153 | 154 | [nav-bar="stage"] { 155 | .title, 156 | .buttons, 157 | .back-text { 158 | position: absolute; 159 | opacity: 0; 160 | @include transition-duration(0s); 161 | } 162 | } 163 | 164 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/_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 | 152 | a.subdued { 153 | padding-right: 10px; 154 | color: #888; 155 | text-decoration: none; 156 | 157 | &:hover { 158 | text-decoration: none; 159 | } 160 | &:last-child { 161 | padding-right: 0; 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/server/ionic/scss-prod/fonts/ionicons.eot -------------------------------------------------------------------------------- /server/ionic/scss-prod/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/server/ionic/scss-prod/fonts/ionicons.ttf -------------------------------------------------------------------------------- /server/ionic/scss-prod/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pbernasconi/ionic-theme-editor/558f51695574143c314d6fae8f69422403f9fe69/server/ionic/scss-prod/fonts/ionicons.woff -------------------------------------------------------------------------------- /server/ionic/scss-prod/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 | "refresher", 31 | "loaders", 32 | 33 | // Forms 34 | "form", 35 | "checkbox", 36 | "toggle", 37 | "radio", 38 | "range", 39 | "select", 40 | "progress", 41 | 42 | // Buttons 43 | "button", 44 | "button-bar", 45 | 46 | // Util 47 | "grid", 48 | "util", 49 | "platform", 50 | 51 | // Animations 52 | "animations", 53 | "transitions"; 54 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/ionicons/_ionicons-animation.scss: -------------------------------------------------------------------------------- 1 | // Animation Icons 2 | // -------------------------- 3 | 4 | .#{$ionicons-prefix}spin { 5 | -webkit-animation: spin 1s infinite linear; 6 | -moz-animation: spin 1s infinite linear; 7 | -o-animation: spin 1s infinite linear; 8 | animation: spin 1s infinite linear; 9 | } 10 | 11 | @-moz-keyframes spin { 12 | 0% { -moz-transform: rotate(0deg); } 13 | 100% { -moz-transform: rotate(359deg); } 14 | } 15 | @-webkit-keyframes spin { 16 | 0% { -webkit-transform: rotate(0deg); } 17 | 100% { -webkit-transform: rotate(359deg); } 18 | } 19 | @-o-keyframes spin { 20 | 0% { -o-transform: rotate(0deg); } 21 | 100% { -o-transform: rotate(359deg); } 22 | } 23 | @-ms-keyframes spin { 24 | 0% { -ms-transform: rotate(0deg); } 25 | 100% { -ms-transform: rotate(359deg); } 26 | } 27 | @keyframes spin { 28 | 0% { transform: rotate(0deg); } 29 | 100% { transform: rotate(359deg); } 30 | } 31 | 32 | 33 | .#{$ionicons-prefix}loading-a, 34 | .#{$ionicons-prefix}loading-b, 35 | .#{$ionicons-prefix}loading-c, 36 | .#{$ionicons-prefix}loading-d, 37 | .#{$ionicons-prefix}looping, 38 | .#{$ionicons-prefix}refreshing, 39 | .#{$ionicons-prefix}ios7-reloading { 40 | @extend .ion; 41 | @extend .#{$ionicons-prefix}spin; 42 | } 43 | 44 | .#{$ionicons-prefix}loading-a { 45 | -webkit-animation-timing-function: steps(8, start); 46 | -moz-animation-timing-function: steps(8, start); 47 | animation-timing-function: steps(8, start); 48 | } 49 | 50 | .#{$ionicons-prefix}loading-a:before { 51 | @extend .#{$ionicons-prefix}load-a:before; 52 | } 53 | 54 | .#{$ionicons-prefix}loading-b:before { 55 | @extend .#{$ionicons-prefix}load-b:before; 56 | } 57 | 58 | .#{$ionicons-prefix}loading-c:before { 59 | @extend .#{$ionicons-prefix}load-c:before; 60 | } 61 | 62 | .#{$ionicons-prefix}loading-d:before { 63 | @extend .#{$ionicons-prefix}load-d:before; 64 | } 65 | 66 | .#{$ionicons-prefix}looping:before { 67 | @extend .#{$ionicons-prefix}loop:before; 68 | } 69 | 70 | .#{$ionicons-prefix}refreshing:before { 71 | @extend .#{$ionicons-prefix}refresh:before; 72 | } 73 | 74 | .#{$ionicons-prefix}ios7-reloading:before { 75 | @extend .#{$ionicons-prefix}ios7-reload:before; 76 | } 77 | -------------------------------------------------------------------------------- /server/ionic/scss-prod/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.svg?v=#{$ionicons-version}#Ionicons") format("svg"); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | .ion { 16 | display: inline-block; 17 | font-family: $ionicons-font-family; 18 | speak: none; 19 | font-style: normal; 20 | font-weight: normal; 21 | font-variant: normal; 22 | text-transform: none; 23 | text-rendering: auto; 24 | line-height: 1; 25 | -webkit-font-smoothing: antialiased; 26 | -moz-osx-font-smoothing: grayscale; 27 | } -------------------------------------------------------------------------------- /server/ionic/scss-prod/ionicons/ionicons.scss: -------------------------------------------------------------------------------- 1 | @import "ionicons-variables"; 2 | /*! 3 | Ionicons, v2.0.1 4 | Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ 5 | https://twitter.com/benjsperry https://twitter.com/ionicframework 6 | MIT License: https://github.com/driftyco/ionicons 7 | 8 | Android-style icons originally built by Google’s 9 | Material Design Icons: https://github.com/google/material-design-icons 10 | used under CC BY http://creativecommons.org/licenses/by/4.0/ 11 | Modified icons to fit ionicon’s grid from original. 12 | */ 13 | 14 | @import "ionicons-font"; 15 | @import "ionicons-icons"; 16 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_action-sheet.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Action Sheets 3 | * -------------------------------------------------- 4 | */ 5 | 6 | .action-sheet-backdrop { 7 | @include transition(background-color 300ms ease-in-out); 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | z-index: $z-index-action-sheet; 12 | width: 100%; 13 | height: 100%; 14 | background-color: rgba(0,0,0,0); 15 | 16 | &.active { 17 | background-color: rgba(0,0,0,0.5); 18 | } 19 | } 20 | 21 | .action-sheet-wrapper { 22 | @include translate3d(0, 100%, 0); 23 | @include transition(all ease-in-out 300ms); 24 | position: absolute; 25 | bottom: 0; 26 | width: 100%; 27 | } 28 | 29 | .action-sheet-up { 30 | @include translate3d(0, 0, 0); 31 | } 32 | 33 | .action-sheet { 34 | margin-left: 15px; 35 | margin-right: 15px; 36 | width: auto; 37 | z-index: $z-index-action-sheet; 38 | overflow: hidden; 39 | 40 | .button { 41 | display: block; 42 | padding: 1px; 43 | width: 100%; 44 | border-radius: 0; 45 | 46 | background-color: transparent; 47 | 48 | color: $positive; 49 | font-size: 18px; 50 | 51 | &.destructive { 52 | color: $assertive; 53 | } 54 | } 55 | } 56 | 57 | .action-sheet-title { 58 | padding: 10px; 59 | color: lighten($base-color, 40%); 60 | text-align: center; 61 | font-size: 12px; 62 | } 63 | 64 | .action-sheet-group { 65 | margin-bottom: 5px; 66 | border-radius: $sheet-border-radius; 67 | background-color: #fff; 68 | .button { 69 | border-width: 1px 0px 0px 0px; 70 | border-radius: 0; 71 | 72 | &.active { 73 | background-color: transparent; 74 | color: inherit; 75 | } 76 | } 77 | .button:first-child:last-child { 78 | border-width: 0; 79 | } 80 | } 81 | 82 | .action-sheet-open { 83 | pointer-events: none; 84 | 85 | &.modal-open .modal { 86 | pointer-events: none; 87 | } 88 | 89 | .action-sheet-backdrop { 90 | pointer-events: auto; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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: rgba(0,0,0,0.4); 12 | 13 | visibility: hidden; 14 | opacity: 0; 15 | 16 | &.visible { 17 | visibility: visible; 18 | } 19 | &.active { 20 | opacity: 1; 21 | } 22 | 23 | @include transition(0.1s opacity linear); 24 | } 25 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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: 2px 0px 0px 2px; 49 | } 50 | &:last-child { 51 | border-right-width: 1px; 52 | border-radius: 0px 2px 2px 0px; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Grid 3 | * -------------------------------------------------- 4 | * Using flexbox for the grid, inspired by Philip Walton: 5 | * http://philipwalton.github.io/solved-by-flexbox/demos/grids/ 6 | * By default each .col within a .row will evenly take up 7 | * available width, and the height of each .col with take 8 | * up the height of the tallest .col in the same .row. 9 | */ 10 | 11 | .row { 12 | @include display-flex(); 13 | padding: ($grid-padding-width / 2); 14 | width: 100%; 15 | } 16 | 17 | .row-wrap { 18 | @include flex-wrap(wrap); 19 | } 20 | 21 | .row + .row { 22 | margin-top: ($grid-padding-width / 2) * -1; 23 | padding-top: 0; 24 | } 25 | 26 | .col { 27 | @include flex(1); 28 | display: block; 29 | padding: ($grid-padding-width / 2); 30 | width: 100%; 31 | } 32 | 33 | 34 | /* Vertically Align Columns */ 35 | /* .row-* vertically aligns every .col in the .row */ 36 | .row-top { 37 | @include align-items(flex-start); 38 | } 39 | .row-bottom { 40 | @include align-items(flex-end); 41 | } 42 | .row-center { 43 | @include align-items(center); 44 | } 45 | .row-stretch { 46 | @include align-items(stretch); 47 | } 48 | .row-baseline { 49 | @include align-items(baseline); 50 | } 51 | 52 | /* .col-* vertically aligns an individual .col */ 53 | .col-top { 54 | @include align-self(flex-start); 55 | } 56 | .col-bottom { 57 | @include align-self(flex-end); 58 | } 59 | .col-center { 60 | @include align-self(center); 61 | } 62 | 63 | /* Column Offsets */ 64 | .col-offset-10 { 65 | margin-left: 10%; 66 | } 67 | .col-offset-20 { 68 | margin-left: 20%; 69 | } 70 | .col-offset-25 { 71 | margin-left: 25%; 72 | } 73 | .col-offset-33, .col-offset-34 { 74 | margin-left: 33.3333%; 75 | } 76 | .col-offset-50 { 77 | margin-left: 50%; 78 | } 79 | .col-offset-66, .col-offset-67 { 80 | margin-left: 66.6666%; 81 | } 82 | .col-offset-75 { 83 | margin-left: 75%; 84 | } 85 | .col-offset-80 { 86 | margin-left: 80%; 87 | } 88 | .col-offset-90 { 89 | margin-left: 90%; 90 | } 91 | 92 | 93 | /* Explicit Column Percent Sizes */ 94 | /* By default each grid column will evenly distribute */ 95 | /* across the grid. However, you can specify individual */ 96 | /* columns to take up a certain size of the available area */ 97 | .col-10 { 98 | @include flex(0, 0, 10%); 99 | max-width: 10%; 100 | } 101 | .col-20 { 102 | @include flex(0, 0, 20%); 103 | max-width: 20%; 104 | } 105 | .col-25 { 106 | @include flex(0, 0, 25%); 107 | max-width: 25%; 108 | } 109 | .col-33, .col-34 { 110 | @include flex(0, 0, 33.3333%); 111 | max-width: 33.3333%; 112 | } 113 | .col-50 { 114 | @include flex(0, 0, 50%); 115 | max-width: 50%; 116 | } 117 | .col-66, .col-67 { 118 | @include flex(0, 0, 66.6666%); 119 | max-width: 66.6666%; 120 | } 121 | .col-75 { 122 | @include flex(0, 0, 75%); 123 | max-width: 75%; 124 | } 125 | .col-80 { 126 | @include flex(0, 0, 80%); 127 | max-width: 80%; 128 | } 129 | .col-90 { 130 | @include flex(0, 0, 90%); 131 | max-width: 90%; 132 | } 133 | 134 | 135 | /* Responsive Grid Classes */ 136 | /* Adding a class of responsive-X to a row */ 137 | /* will trigger the flex-direction to */ 138 | /* change to column and add some margin */ 139 | /* to any columns in the row for clearity */ 140 | 141 | @include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break); 142 | @include responsive-grid-break('.responsive-md', $grid-responsive-md-break); 143 | @include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break); 144 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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: 0 1px 2px rgba(0, 0, 0, .10); 60 | } 61 | 62 | .padding { 63 | .card, .list-inset { 64 | margin-left: 0; 65 | margin-right: 0; 66 | } 67 | } 68 | 69 | .card .item, 70 | .list-inset .item, 71 | .padding > .list .item 72 | { 73 | &:first-child { 74 | border-top-left-radius: $card-border-radius; 75 | border-top-right-radius: $card-border-radius; 76 | 77 | .item-content { 78 | border-top-left-radius: $card-border-radius; 79 | border-top-right-radius: $card-border-radius; 80 | } 81 | } 82 | &:last-child { 83 | border-bottom-right-radius: $card-border-radius; 84 | border-bottom-left-radius: $card-border-radius; 85 | 86 | .item-content { 87 | border-bottom-right-radius: $card-border-radius; 88 | border-bottom-left-radius: $card-border-radius; 89 | } 90 | } 91 | } 92 | 93 | .card .item:last-child, 94 | .list-inset .item:last-child { 95 | margin-bottom: $item-border-width * -1; 96 | } 97 | 98 | .card .item, 99 | .list-inset .item, 100 | .padding > .list .item, 101 | .padding-horizontal > .list .item { 102 | margin-right: 0; 103 | margin-left: 0; 104 | 105 | &.item-input input { 106 | padding-right: 44px; 107 | } 108 | } 109 | .padding-left > .list .item { 110 | margin-left: 0; 111 | } 112 | .padding-right > .list .item { 113 | margin-right: 0; 114 | } 115 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 | display: none; 26 | } 27 | &.visible { 28 | visibility: visible; 29 | } 30 | &.active { 31 | opacity: 1; 32 | } 33 | 34 | .loading { 35 | padding: $loading-padding; 36 | 37 | border-radius: $loading-border-radius; 38 | background-color: $loading-bg-color; 39 | 40 | color: $loading-text-color; 41 | 42 | text-align: center; 43 | text-overflow: ellipsis; 44 | font-size: $loading-font-size; 45 | 46 | h1, h2, h3, h4, h5, h6 { 47 | color: $loading-text-color; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 | 40 | .grade-b .menu-content, 41 | .grade-c .menu-content { 42 | @include box-sizing(content-box); 43 | right: -1px; 44 | left: -1px; 45 | border-right: 1px solid #ccc; 46 | border-left: 1px solid #ccc; 47 | box-shadow: none; 48 | } 49 | 50 | .menu-left { 51 | left: 0; 52 | } 53 | 54 | .menu-right { 55 | right: 0; 56 | } 57 | 58 | .aside-open.aside-resizing .menu-right { 59 | display: none; 60 | } 61 | 62 | .menu-animated { 63 | @include transition-transform($menu-animation-speed ease); 64 | } 65 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_modal.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Modals 4 | * -------------------------------------------------- 5 | * Modals are independent windows that slide in from off-screen. 6 | */ 7 | 8 | .modal-backdrop { 9 | @include transition(background-color 300ms ease-in-out); 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | z-index: $z-index-modal; 14 | width: 100%; 15 | height: 100%; 16 | background-color: $modal-backdrop-bg-inactive; 17 | 18 | &.active { 19 | background-color: $modal-backdrop-bg-active; 20 | } 21 | } 22 | 23 | .modal { 24 | display: block; 25 | position: absolute; 26 | top: 0; 27 | z-index: $z-index-modal; 28 | overflow: hidden; 29 | min-height: 100%; 30 | width: 100%; 31 | background-color: $modal-bg-color; 32 | } 33 | 34 | @media (min-width: $modal-inset-mode-break-point) { 35 | // inset mode is when the modal doesn't fill the entire 36 | // display but instead is centered within a large display 37 | .modal { 38 | top: $modal-inset-mode-top; 39 | right: $modal-inset-mode-right; 40 | bottom: $modal-inset-mode-bottom; 41 | left: $modal-inset-mode-left; 42 | overflow: visible; 43 | min-height: $modal-inset-mode-min-height; 44 | width: (100% - $modal-inset-mode-left - $modal-inset-mode-right); 45 | } 46 | 47 | .modal.ng-leave-active { 48 | bottom: 0; 49 | } 50 | 51 | // remove ios header padding from inset header 52 | .platform-ios.platform-cordova .modal-wrapper .modal{ 53 | .bar-header:not(.bar-subheader) { 54 | height: $bar-height; 55 | > * { 56 | margin-top: 0; 57 | } 58 | } 59 | .tabs-top > .tabs, 60 | .tabs.tabs-top { 61 | top: $bar-height; 62 | } 63 | .has-header, 64 | .bar-subheader { 65 | top: $bar-height; 66 | } 67 | .has-subheader { 68 | top: (2 * $bar-height); 69 | } 70 | .has-tabs-top { 71 | top: $bar-height + $tabs-height; 72 | } 73 | .has-header.has-subheader.has-tabs-top { 74 | top: 2 * $bar-height + $tabs-height; 75 | } 76 | } 77 | } 78 | 79 | // disable clicks on all but the modal 80 | .modal-open { 81 | pointer-events: none; 82 | 83 | .modal, 84 | .modal-backdrop { 85 | pointer-events: auto; 86 | } 87 | // prevent clicks on modal when loading overlay is active though 88 | &.loading-active { 89 | .modal, 90 | .modal-backdrop { 91 | pointer-events: none; 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_platform.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Platform 4 | * -------------------------------------------------- 5 | * Platform specific tweaks 6 | */ 7 | 8 | 9 | /** 10 | * Apply roboto font 11 | */ 12 | 13 | .roboto { 14 | font-family: "Roboto", $font-family-base; 15 | 16 | input { 17 | font-family: "Roboto", $font-family-base; 18 | } 19 | } 20 | /* 21 | .platform-android { 22 | 23 | 24 | .bar { 25 | padding: 0; 26 | 27 | line-height: 40px; 28 | 29 | .button { 30 | line-height: 40px; 31 | } 32 | 33 | .button-icon:before { 34 | font-size: 24px; 35 | } 36 | } 37 | 38 | .back-button { 39 | &.button-icon:before { 40 | line-height: 40px; 41 | } 42 | margin-left: -3px; 43 | padding: 0px 2px !important; 44 | &.ion-android-arrow-back:before { 45 | font-size: 12px; 46 | } 47 | 48 | &.back-button.active, 49 | &.back-button.activated { 50 | background-color: rgba(0,0,0,0.1); 51 | } 52 | } 53 | 54 | .item-divider { 55 | background: none; 56 | border-top-width: 0; 57 | border-bottom-width: 2px; 58 | text-transform: uppercase; 59 | margin-top: 10px; 60 | font-size: 14px; 61 | } 62 | .item { 63 | border-left-width: 0; 64 | border-right-width: 0; 65 | } 66 | 67 | .item-divider ~ .item:not(.item-divider) { 68 | border-bottom-width: 0; 69 | } 70 | 71 | .back-button:not(.ng-hide) + .left-buttons + .title { 72 | // Don't allow normal titles in this mode 73 | display: none; 74 | } 75 | 76 | .bar .title { 77 | text-align: left; 78 | font-weight: normal; 79 | } 80 | 81 | font-family: 'Roboto'; 82 | 83 | h1, h2, h3, h4, h5 { 84 | font-family: 'Roboto', $font-family-base; 85 | } 86 | 87 | .tab-item { 88 | font-family: 'Roboto', $font-family-base; 89 | } 90 | 91 | 92 | input, button, select, textarea { 93 | font-family: 'Roboto', $font-family-base; 94 | } 95 | */ 96 | //} 97 | 98 | .platform-ios.platform-cordova { 99 | // iOS7/8 has a status bar which sits on top of the header. 100 | // Bump down everything to make room for it. However, if 101 | // if its in Cordova, and set to fullscreen, then disregard the bump. 102 | &:not(.fullscreen) { 103 | .bar-header:not(.bar-subheader) { 104 | height: $bar-height + $ios-statusbar-height; 105 | 106 | &.item-input-inset .item-input-wrapper { 107 | margin-top: 19px !important; 108 | } 109 | 110 | > * { 111 | margin-top: $ios-statusbar-height; 112 | } 113 | } 114 | .tabs-top > .tabs, 115 | .tabs.tabs-top { 116 | top: $bar-height + $ios-statusbar-height; 117 | } 118 | 119 | .has-header, 120 | .bar-subheader { 121 | top: $bar-height + $ios-statusbar-height; 122 | } 123 | .has-subheader { 124 | top: (2 * $bar-height) + $ios-statusbar-height; 125 | } 126 | .has-tabs-top { 127 | top: $bar-height + $tabs-height + $ios-statusbar-height; 128 | } 129 | .has-header.has-subheader.has-tabs-top { 130 | top: 2 * $bar-height + $tabs-height + $ios-statusbar-height; 131 | } 132 | } 133 | &.status-bar-hide { 134 | // Cordova doesn't adjust the body height correctly, this makes up for it 135 | margin-bottom: 20px; 136 | } 137 | } 138 | 139 | @media (orientation:landscape) { 140 | .platform-ios.platform-browser.platform-ipad { 141 | position: fixed; // required for iPad 7 Safari 142 | } 143 | } 144 | 145 | .platform-c:not(.enable-transitions) * { 146 | // disable transitions on grade-c devices (Android 2) 147 | -webkit-transition: none !important; 148 | transition: none !important; 149 | } 150 | 151 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 | } 78 | 79 | .popover, 80 | .popover .bar-header { 81 | border-radius: $popover-border-radius-ios; 82 | } 83 | .popover .scroll-content { 84 | margin: 8px 0; 85 | border-radius: $popover-border-radius-ios; 86 | } 87 | .popover .scroll-content.has-header { 88 | margin-top: 0; 89 | } 90 | .popover-arrow { 91 | position: absolute; 92 | display: block; 93 | top: -17px; 94 | width: 30px; 95 | height: 19px; 96 | overflow: hidden; 97 | 98 | &:after { 99 | position: absolute; 100 | top: 12px; 101 | left: 5px; 102 | width: 20px; 103 | height: 20px; 104 | background-color: $popover-bg-color; 105 | border-radius: 3px; 106 | content: ''; 107 | @include rotate(-45deg); 108 | } 109 | } 110 | .popover-bottom .popover-arrow { 111 | top: auto; 112 | bottom: -10px; 113 | &:after { 114 | top: -6px; 115 | } 116 | } 117 | } 118 | 119 | 120 | // Android Popover 121 | .platform-android { 122 | 123 | .popover { 124 | margin-top: -32px; 125 | background-color: $popover-bg-color-android; 126 | box-shadow: $popover-box-shadow-android; 127 | 128 | .item { 129 | border-color: $popover-bg-color-android; 130 | background-color: $popover-bg-color-android; 131 | color: #4d4d4d; 132 | } 133 | &.popover-bottom { 134 | margin-top: 32px; 135 | } 136 | } 137 | 138 | .popover-backdrop, 139 | .popover-backdrop.active { 140 | background-color: transparent; 141 | } 142 | } 143 | 144 | 145 | // disable clicks on all but the popover 146 | .popover-open { 147 | pointer-events: none; 148 | 149 | .popover, 150 | .popover-backdrop { 151 | pointer-events: auto; 152 | } 153 | // prevent clicks on popover when loading overlay is active though 154 | &.loading-active { 155 | .popover, 156 | .popover-backdrop { 157 | pointer-events: none; 158 | } 159 | } 160 | } 161 | 162 | 163 | // wider popover on larger viewports 164 | @media (min-width: $popover-large-break-point) { 165 | .popover { 166 | width: $popover-large-width; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 | 54 | .popup-head { 55 | padding: 15px 10px; 56 | border-bottom: 1px solid #eee; 57 | text-align: center; 58 | } 59 | .popup-title { 60 | margin: 0; 61 | padding: 0; 62 | font-size: 15px; 63 | } 64 | .popup-sub-title { 65 | margin: 5px 0 0 0; 66 | padding: 0; 67 | font-weight: normal; 68 | font-size: 11px; 69 | } 70 | .popup-body { 71 | padding: 10px; 72 | overflow: scroll; 73 | } 74 | 75 | .popup-buttons { 76 | @include display-flex(); 77 | @include flex-direction(row); 78 | padding: 10px; 79 | min-height: $popup-button-min-height + 20; 80 | 81 | .button { 82 | @include flex(1); 83 | display: block; 84 | min-height: $popup-button-min-height; 85 | border-radius: $popup-button-border-radius; 86 | line-height: $popup-button-line-height; 87 | 88 | margin-right: 5px; 89 | &:last-child { 90 | margin-right: 0px; 91 | } 92 | } 93 | } 94 | 95 | .popup-open { 96 | pointer-events: none; 97 | 98 | &.modal-open .modal { 99 | pointer-events: none; 100 | } 101 | 102 | .popup-backdrop, .popup { 103 | pointer-events: auto; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_progress.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Progress 4 | * -------------------------------------------------- 5 | */ 6 | 7 | progress { 8 | display: block; 9 | margin: $progress-margin; 10 | width: $progress-width; 11 | } 12 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 ~ .item-content { 38 | /* style the item content when its checked */ 39 | background: #f7f7f7; 40 | } 41 | 42 | &:checked ~ .radio-icon { 43 | /* show the checkmark icon when its checked */ 44 | visibility: visible; 45 | } 46 | } 47 | 48 | // Hack for Android to correctly display the checked item 49 | // http://timpietrusky.com/advanced-checkbox-hack 50 | .platform-android.grade-b .item-radio, 51 | .platform-android.grade-c .item-radio { 52 | -webkit-animation: androidCheckedbugfix infinite 1s; 53 | } 54 | @-webkit-keyframes androidCheckedbugfix { 55 | from { padding: 0; } 56 | to { padding: 0; } 57 | } 58 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_range.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Range 4 | * -------------------------------------------------- 5 | */ 6 | 7 | input[type="range"] { 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 | &::-webkit-slider-thumb { 25 | position: relative; 26 | width: $range-slider-width; 27 | height: $range-slider-height; 28 | border-radius: $range-slider-border-radius; 29 | background-color: $toggle-handle-off-bg-color; 30 | box-shadow: 0 0 2px rgba(0,0,0,.5), 1px 3px 5px rgba(0,0,0,0.25); 31 | cursor: pointer; 32 | -webkit-appearance: none; 33 | } 34 | 35 | &::-webkit-slider-thumb:before { 36 | /* what creates the colorful line on the left side of the slider */ 37 | position: absolute; 38 | top: ($range-slider-height / 2) - ($range-track-height / 2); 39 | left: -2001px; 40 | width: 2000px; 41 | height: $range-track-height; 42 | background: $dark; 43 | content: ' '; 44 | } 45 | 46 | &::-webkit-slider-thumb:after { 47 | /* create a larger (but hidden) hit area */ 48 | position: absolute; 49 | top: -20px; 50 | left: -20px; 51 | padding: 30px; 52 | content: ' '; 53 | //background: red; 54 | //opacity: .5; 55 | } 56 | 57 | } 58 | 59 | .range { 60 | @include display-flex(); 61 | @include align-items(center); 62 | padding: 2px 11px; 63 | 64 | &.range-light { 65 | input { @include range-style($range-light-track-bg); } 66 | } 67 | &.range-stable { 68 | input { @include range-style($range-stable-track-bg); } 69 | } 70 | &.range-positive { 71 | input { @include range-style($range-positive-track-bg); } 72 | } 73 | &.range-calm { 74 | input { @include range-style($range-calm-track-bg); } 75 | } 76 | &.range-balanced { 77 | input { @include range-style($range-balanced-track-bg); } 78 | } 79 | &.range-assertive { 80 | input { @include range-style($range-assertive-track-bg); } 81 | } 82 | &.range-energized { 83 | input { @include range-style($range-energized-track-bg); } 84 | } 85 | &.range-royal { 86 | input { @include range-style($range-royal-track-bg); } 87 | } 88 | &.range-dark { 89 | input { @include range-style($range-dark-track-bg); } 90 | } 91 | } 92 | 93 | .range .icon { 94 | @include flex(0); 95 | display: block; 96 | min-width: $range-icon-size; 97 | text-align: center; 98 | font-size: $range-icon-size; 99 | } 100 | 101 | .range input { 102 | @include flex(1); 103 | display: block; 104 | margin-right: 10px; 105 | margin-left: 10px; 106 | } 107 | 108 | .range-label { 109 | @include flex(0, 0, auto); 110 | display: block; 111 | white-space: nowrap; 112 | } 113 | 114 | .range-label:first-child { 115 | padding-left: 5px; 116 | } 117 | .range input + .range-label { 118 | padding-right: 5px; 119 | padding-left: 0; 120 | } 121 | 122 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 | right: 0; 15 | padding: ($item-padding - 2) ($item-padding * 3) ($item-padding) $item-padding; 16 | max-width: 65%; 17 | 18 | border: none; 19 | background: $item-default-bg; 20 | color: #333; 21 | 22 | // hack to hide default dropdown arrow in FF 23 | text-indent: .01px; 24 | text-overflow: ''; 25 | 26 | white-space: nowrap; 27 | font-size: $font-size-base; 28 | 29 | cursor: pointer; 30 | direction: rtl; // right align the select text 31 | } 32 | 33 | select::-ms-expand { 34 | // hide default dropdown arrow in IE 35 | display: none; 36 | } 37 | 38 | option { 39 | direction: ltr; 40 | } 41 | 42 | &:after { 43 | position: absolute; 44 | top: 50%; 45 | right: $item-padding; 46 | margin-top: -3px; 47 | width: 0; 48 | height: 0; 49 | border-top: 5px solid; 50 | border-right: 5px solid rgba(0, 0, 0, 0); 51 | border-left: 5px solid rgba(0, 0, 0, 0); 52 | color: #999; 53 | content: ""; 54 | pointer-events: none; 55 | } 56 | &.item-light { 57 | select{ 58 | background:$item-light-bg; 59 | color:$item-light-text; 60 | } 61 | } 62 | &.item-stable { 63 | select{ 64 | background:$item-stable-bg; 65 | color:$item-stable-text; 66 | } 67 | &:after, .input-label{ 68 | color:darken($item-stable-border,30%); 69 | } 70 | } 71 | &.item-positive { 72 | select{ 73 | background:$item-positive-bg; 74 | color:$item-positive-text; 75 | } 76 | &:after, .input-label{ 77 | color:$item-positive-text; 78 | } 79 | } 80 | &.item-calm { 81 | select{ 82 | background:$item-calm-bg; 83 | color:$item-calm-text; 84 | } 85 | &:after, .input-label{ 86 | color:$item-calm-text; 87 | } 88 | } 89 | &.item-assertive { 90 | select{ 91 | background:$item-assertive-bg; 92 | color:$item-assertive-text; 93 | } 94 | &:after, .input-label{ 95 | color:$item-assertive-text; 96 | } 97 | } 98 | &.item-balanced { 99 | select{ 100 | background:$item-balanced-bg; 101 | color:$item-balanced-text; 102 | } 103 | &:after, .input-label{ 104 | color:$item-balanced-text; 105 | } 106 | } 107 | &.item-energized { 108 | select{ 109 | background:$item-energized-bg; 110 | color:$item-energized-text; 111 | } 112 | &:after, .input-label{ 113 | color:$item-energized-text; 114 | } 115 | } 116 | &.item-royal { 117 | select{ 118 | background:$item-royal-bg; 119 | color:$item-royal-text; 120 | } 121 | &:after, .input-label{ 122 | color:$item-royal-text; 123 | } 124 | } 125 | &.item-dark { 126 | select{ 127 | background:$item-dark-bg; 128 | color:$item-dark-text; 129 | } 130 | &:after, .input-label{ 131 | color:$item-dark-text; 132 | } 133 | } 134 | } 135 | 136 | select { 137 | &[multiple], 138 | &[size] { 139 | height: auto; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 | &.toggle-light { 28 | @include toggle-style($toggle-on-light-border, $toggle-on-light-bg); 29 | } 30 | &.toggle-stable { 31 | @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg); 32 | } 33 | &.toggle-positive { 34 | @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg); 35 | } 36 | &.toggle-calm { 37 | @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg); 38 | } 39 | &.toggle-assertive { 40 | @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg); 41 | } 42 | &.toggle-balanced { 43 | @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg); 44 | } 45 | &.toggle-energized { 46 | @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg); 47 | } 48 | &.toggle-royal { 49 | @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg); 50 | } 51 | &.toggle-dark { 52 | @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg); 53 | } 54 | } 55 | 56 | .toggle input { 57 | // hide the actual input checkbox 58 | display: none; 59 | } 60 | 61 | /* the track appearance when the toggle is "off" */ 62 | .toggle .track { 63 | @include transition-timing-function(ease-in-out); 64 | @include transition-duration($toggle-transition-duration); 65 | @include transition-property((background-color, border)); 66 | 67 | display: inline-block; 68 | box-sizing: border-box; 69 | width: $toggle-width; 70 | height: $toggle-height; 71 | border: solid $toggle-border-width $toggle-off-border-color; 72 | border-radius: $toggle-border-radius; 73 | background-color: $toggle-off-bg-color; 74 | content: ' '; 75 | cursor: pointer; 76 | pointer-events: none; 77 | } 78 | 79 | /* Fix to avoid background color bleeding */ 80 | /* (occured on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */ 81 | .platform-android4_2 .toggle .track { 82 | -webkit-background-clip: padding-box; 83 | } 84 | 85 | /* the handle (circle) thats inside the toggle's track area */ 86 | /* also the handle's appearance when it is "off" */ 87 | .toggle .handle { 88 | @include transition($toggle-transition-duration ease-in-out); 89 | position: absolute; 90 | display: block; 91 | width: $toggle-handle-width; 92 | height: $toggle-handle-height; 93 | border-radius: $toggle-handle-radius; 94 | background-color: $toggle-handle-off-bg-color; 95 | top: $toggle-border-width + $toggle-hit-area-expansion; 96 | left: $toggle-border-width + $toggle-hit-area-expansion; 97 | 98 | &:before { 99 | // used to create a larger (but hidden) hit area to slide the handle 100 | position: absolute; 101 | top: -4px; 102 | left: ( ($toggle-handle-width / 2) * -1) - 8; 103 | padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7); 104 | content: " "; 105 | } 106 | } 107 | 108 | .toggle input:checked + .track .handle { 109 | // the handle when the toggle is "on" 110 | @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0); 111 | background-color: $toggle-handle-on-bg-color; 112 | } 113 | 114 | .item-toggle.active { 115 | box-shadow: none; 116 | } 117 | 118 | .item-toggle, 119 | .item-toggle.item-complex .item-content { 120 | // make sure list item content have enough padding on right to fit the toggle 121 | padding-right: ($item-padding * 3) + $toggle-width; 122 | } 123 | 124 | .item-toggle.item-complex { 125 | padding-right: 0; 126 | } 127 | 128 | .item-toggle .toggle { 129 | // position the toggle to the right within a list item 130 | position: absolute; 131 | top: $item-padding / 2; 132 | right: $item-padding; 133 | z-index: $z-index-item-toggle; 134 | } 135 | 136 | .toggle input:disabled + .track { 137 | opacity: .6; 138 | } 139 | -------------------------------------------------------------------------------- /server/ionic/scss_test/_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 | 152 | a.subdued { 153 | padding-right: 10px; 154 | color: #888; 155 | text-decoration: none; 156 | 157 | &:hover { 158 | text-decoration: none; 159 | } 160 | &:last-child { 161 | padding-right: 0; 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /server/ionic/scss_test/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 | 31 | // Forms 32 | "form", 33 | "checkbox", 34 | "toggle", 35 | "radio", 36 | "range", 37 | "select", 38 | "progress", 39 | 40 | // Buttons 41 | "button", 42 | "button-bar", 43 | 44 | // Util 45 | "animations", 46 | "grid", 47 | "util", 48 | "platform"; 49 | -------------------------------------------------------------------------------- /server/routes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main application routes 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var errors = require('./components/errors'); 8 | 9 | module.exports = function(app) { 10 | 11 | // Insert routes below 12 | app.use('/api/themes', require('./api/themes')); 13 | app.use('/api/compile', require('./api/compile')); 14 | 15 | // All undefined asset or api routes should return a 404 16 | app.route('/:url(api|auth|components|app|bower_components|assets)/*') 17 | .get(errors[404]); 18 | 19 | // All other routes should redirect to the index.html 20 | app.route('/*') 21 | .get(function(req, res) { 22 | res.sendfile(app.get('appPath') + '/index.html'); 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /server/views/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found :( 6 | 141 | 142 | 143 |
144 |

Not found :(

145 |

Sorry, but the page you were trying to view does not exist.

146 |

It looks like this was the result of either:

147 | 151 | 154 | 155 |
156 | 157 | 158 | --------------------------------------------------------------------------------