├── .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 | [](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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
148 | - a mistyped address
149 | - an out-of-date link
150 |
151 |
154 |
155 |
156 |
157 |
158 |
--------------------------------------------------------------------------------