├── .bowerrc
├── .gitignore
├── README.rst
├── bower.json
├── dist
    ├── ionic-multiselect.js
    ├── ionic-multiselect.min.js
    └── templates
    │   ├── item-template.html
    │   └── modal-template.html
├── example
    ├── controller.main.js
    ├── index.html
    └── lib
    │   └── ionic
    │       ├── css
    │           ├── ionic.css
    │           └── ionic.min.css
    │       ├── fonts
    │           ├── ionicons.eot
    │           ├── ionicons.svg
    │           ├── ionicons.ttf
    │           └── ionicons.woff
    │       ├── js
    │           ├── angular-ui
    │           │   ├── angular-ui-router.js
    │           │   └── angular-ui-router.min.js
    │           ├── angular
    │           │   ├── angular-animate.js
    │           │   ├── angular-animate.min.js
    │           │   ├── angular-resource.js
    │           │   ├── angular-resource.min.js
    │           │   ├── angular-sanitize.js
    │           │   ├── angular-sanitize.min.js
    │           │   ├── angular.js
    │           │   └── angular.min.js
    │           ├── ionic-angular.js
    │           ├── ionic-angular.min.js
    │           ├── ionic.bundle.js
    │           ├── ionic.bundle.min.js
    │           ├── ionic.js
    │           └── ionic.min.js
    │       ├── scss
    │           ├── _action-sheet.scss
    │           ├── _animations.scss
    │           ├── _backdrop.scss
    │           ├── _badge.scss
    │           ├── _bar.scss
    │           ├── _button-bar.scss
    │           ├── _button.scss
    │           ├── _checkbox.scss
    │           ├── _form.scss
    │           ├── _grid.scss
    │           ├── _items.scss
    │           ├── _list.scss
    │           ├── _loading.scss
    │           ├── _menu.scss
    │           ├── _mixins.scss
    │           ├── _modal.scss
    │           ├── _platform.scss
    │           ├── _popover.scss
    │           ├── _popup.scss
    │           ├── _progress.scss
    │           ├── _radio.scss
    │           ├── _range.scss
    │           ├── _refresher.scss
    │           ├── _reset.scss
    │           ├── _scaffolding.scss
    │           ├── _select.scss
    │           ├── _slide-box.scss
    │           ├── _spinner.scss
    │           ├── _tabs.scss
    │           ├── _toggle.scss
    │           ├── _transitions.scss
    │           ├── _type.scss
    │           ├── _util.scss
    │           ├── _variables.scss
    │           ├── ionic.scss
    │           └── ionicons
    │           │   ├── _ionicons-font.scss
    │           │   ├── _ionicons-icons.scss
    │           │   ├── _ionicons-variables.scss
    │           │   └── ionicons.scss
    │       └── version.json
├── gulpfile.js
└── package.json


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "bower_components",
3 |   "json": "bower.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | example/bower_components


--------------------------------------------------------------------------------
/README.rst:
--------------------------------------------------------------------------------
  1 | Ionic Multiselect
  2 | ===================
  3 | 
  4 | **THIS REPO IS DEPRECATED.** Multiselect for Inonic Framework. Inspired by ionic-fancy-select and this snippet: http://codepen.io/mhartington/pen/CImqy?editors=101.
  5 | 
  6 | Install
  7 | -------
  8 | 
  9 | Via bower::
 10 | 
 11 |     bower install ionic-multiselect
 12 | 
 13 | Getting started
 14 | ---------------
 15 | 
 16 | 1. Add script js::
 17 | 
 18 |     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
 19 |     <script src="bower_components/ionic-multiselect/dist/ionic-multiselect.min.js"></script>
 20 | 
 21 | 2. Add the module **ionic-multiselect** to module main::
 22 | 
 23 |     var App = angular.module("MainApp", ["ionic-multiselect"]);
 24 | 
 25 | 3. Configure module::
 26 | 
 27 |     App.config(function(multiselectProvider) {
 28 |         multiselectProvider.setTemplateUrl('bower_components/ionic-multiselect/dist/templates/item-template.html');
 29 |         multiselectProvider.setModalTemplateUrl('bower_components/ionic-multiselect/dist/templates/modal-template.html');
 30 |     });
 31 | 
 32 | 4. Add to html this line::
 33 | 
 34 |     <multiselect
 35 |       items="data"
 36 |       text-property="value"
 37 |       value-property="id"
 38 |       text="Text default multiselect">
 39 |     </multiselect>
 40 | 
 41 |     #or
 42 | 
 43 |     <multiselect
 44 |       header-text="Header"
 45 |       items="data"
 46 |       text-property="value"
 47 |       value-property="id"
 48 |       checked-property="selected"
 49 |       is-translate="true"
 50 |       index-translate="TAG_TRANSLATE"
 51 |       text="Text default multiselect"
 52 |       modal-template-url="bower_components/ionic-multiselect/templates/modal-template.html"
 53 |       template-url="bower_components/ionic-multiselect/templates/item-template.html"
 54 |       note-text="Note Text"
 55 |       value-changed="onValueChanged(value)"
 56 |       defaul-value="datadefault">
 57 |     </multiselect>
 58 | 
 59 | 5. Get value selected::
 60 | 
 61 | 	//Your controller
 62 | 	$scope.onValueChanged = function(value){
 63 | 		//Value return a array objects with items selected
 64 | 		console.log(value);
 65 | 	}
 66 | 
 67 | Attributes
 68 | ----------
 69 | 
 70 | 1. header-text
 71 | 
 72 | 	Type: String
 73 | 	Used to specify the text that is shown in the Modal's header bar.
 74 | 
 75 | 2. Items
 76 | 
 77 | 	Type: Array
 78 | 	A list of items that is bound to the select.
 79 | 
 80 | 3- text-property
 81 | 
 82 | 	Type: String
 83 | 	Property description of item the array.
 84 | 
 85 | 4. value-property
 86 | 
 87 | 	Type: String
 88 | 	Property id of item the array.
 89 | 
 90 | 5. Is-Translate
 91 | 
 92 | 	type: Boolean
 93 | 	If used angular translate for item text.
 94 | 
 95 | 6. Index-translate
 96 | 
 97 | 	type: String
 98 | 	If used angular-translate this is the tag for indicate el tag main for items. For example, if we need to show the categories used the tag 'CATEGORY_' and ionic-multiselect automatically search the following internally in the ng-repeat 'CATEGORY_1' 'CATEGORY_2', etc. Internally uses the value-property field.
 99 | 
100 | 7. text
101 | 
102 | 	Type: String
103 | 	Value default multiselect.
104 | 
105 | 8. modal-template-url
106 | 
107 | 	Type: URL
108 | 	An optional URL that can be used to customise the look and feel of the Modal
109 | 
110 | 9. template-url
111 | 
112 | 	Type: URL
113 | 	An optional URL that can be used to custome the look and feel of fancy-select element.
114 | 
115 | 10. note-text
116 | 
117 | 	Type: String
118 | 	An optional note that can be displayed in the default multiselect element.
119 | 
120 | 11. value-changed (Callback)
121 | 
122 | 	Parameters: value - The currently selected value or list of values
123 | 	Raised when the current value changes.
124 | 
125 | 12. default-value
126 | 
127 |     Type: Array
128 | 	A list of values (from the value-property) that is default to the select
129 | 
130 | Example
131 | -------
132 | 
133 | Check the file `index`_.
134 | 
135 | .. _index: https://github.com/mapeveri/ionic-multiselect/blob/master/example/index.html
136 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-multiselect",
 3 |   "version": "0.1.8",
 4 |   "authors": [
 5 |     "Martin Peveri <martinpeveri@gmail.com>"
 6 |   ],
 7 |   "description": "Multiselect for Inonic Framework.",
 8 |   "main": "./dist/ionic-multiselect.js",
 9 |   "moduleType": [],
10 |   "keywords": [
11 |     "angular",
12 |     "angularjs",
13 |     "javascript",
14 |     "ionic",
15 |     "Multiselect"
16 |   ],
17 |   "license": "MIT",
18 |   "homepage": "https://github.com/mapeveri/ionic-multiselect",
19 |   "ignore": [
20 |     "**/.*",
21 |     "node_modules",
22 |     "bower_components",
23 |     "test",
24 |     "tests",
25 |     "images",
26 |     "example"
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/dist/ionic-multiselect.js:
--------------------------------------------------------------------------------
  1 | (function () {
  2 | "use strict";
  3 | 
  4 | angular.module("ionic-multiselect", [])
  5 |   .filter('translateItem', ["$injector", "$parse", function($injector, $parse) {
  6 |     /**
  7 |     * @name translateItem
  8 |     * @desc Translate value item modal in base to value_property
  9 |     * @param {Object} item: Object data item
 10 |     * @returns {String}
 11 |     */
 12 |     return function(item, scope) {
 13 | 
 14 |       var filterTranslate;
 15 |       try{
 16 |           var filterTranslate = $injector.get('$filter');
 17 |           //Parse item property of the object
 18 |           var parseFun = $parse('item.' + scope.valueProperty);
 19 |           var valueTranslate = parseFun(scope);
 20 |           return filterTranslate('translate')(scope.indexTranslate + valueTranslate);
 21 |       }catch(e){
 22 |         return "";
 23 |       }
 24 |     };
 25 |   }])
 26 |   .filter('showTextData', ["$injector", function($injector) {
 27 |     /**
 28 |     * @name showTextData
 29 |     * @desc Filter that show data text
 30 |     * @param {String} value: Value text show
 31 |     * @returns {Array}
 32 |     */
 33 |     return function(value, scope) {
 34 | 
 35 |       var filterTranslate;
 36 |       try{
 37 |           var filterTranslate = $injector.get('$filter');
 38 |       }catch(e){}
 39 | 
 40 |       var arr = [];
 41 |       if(value.indexOf("^") > -1){
 42 |         arr = value.split("^");
 43 |         arr = arr.filter(Boolean);
 44 |         var tot = arr.length;
 45 | 
 46 |         for(var i=0;i<tot;i++){
 47 |             if(scope.isTranslate){
 48 |               var valueAux = filterTranslate('translate')(scope.indexTranslate + arr[i].trim());
 49 |             }else{
 50 |               var valueAux = arr[i].trim();
 51 |             }
 52 |             arr[i] = valueAux;
 53 |         }
 54 |       }else{
 55 |         if(scope.isTranslate){
 56 |           arr.push(filterTranslate('translate')(scope.indexTranslate + value.trim()));
 57 |         }else{
 58 |           arr.push(value);
 59 |         }
 60 |       }
 61 | 
 62 |       if(arr.length == 0){
 63 |         return "";
 64 |       }else{
 65 |         return arr;
 66 |       }
 67 |     };
 68 |   }])
 69 |   .provider('multiselect', function () {
 70 |       this.setModalTemplateUrl = function (url) {
 71 |         this.modalTemplateUrl = url;
 72 |       };
 73 |       this.setTemplateUrl = function (url) {
 74 |         this.templateUrl = url;
 75 |       };
 76 |       this.$get = function () {
 77 |         return this;
 78 |       };
 79 |     })
 80 |   /**
 81 |   * @desc Multiselect for Ionic Framework
 82 |   * @example
 83 |   *   <multiselect
 84 |   *      header-text="Header"
 85 |   *      items="data"
 86 |   *      text-property="value"
 87 |   *      value-property="id"
 88 |   *      is-translate="true"
 89 |   *      index-translate="TAG_TRANSLATE"
 90 |   *      text="Text default multiselect"
 91 |   *      modal-template-url="bower_components/ionic-multiselect/templates/modal-template.html"
 92 |   *      template-url="bower_components/ionic-multiselect/templates/item-template.html"
 93 |   *      note-text="Note Text"
 94 |   *      value-changed="onValueChanged(value)"
 95 |   *      defaul-value="datadefault">
 96 |   *   </multiselect>
 97 |   */
 98 |   .directive("multiselect", ["$ionicModal", "multiselect", function($ionicModal, multiselect) {
 99 |     return {
100 |       restrict: "E",
101 |       //Template with item for show modal
102 |       template: function(element, attrs) {
103 |         if (attrs.templateUrl || multiselect.templateUrl) {
104 |           return "<ng-include src=\"'" + (attrs.templateUrl || multiselect.templateUrl) + "'\"></ng-include>";
105 |         } else {
106 |           return '';
107 |         }
108 |       },
109 |       //Attributes
110 |       scope: {
111 |         items: "=", // Needs to have a values
112 |         defaultValue: "=", // Needs to have a default values selected
113 |         valueChangedCallback: "&valueChanged", // The callback used to signal that the value has changed
114 |         getCustomTextCallback: "&getCustomText" // The callback used to get custom text based on the selected value
115 |       },
116 |       //Conected directive
117 |       link: function(scope, element, attrs) {
118 |         // Header usado en ion-header-bar
119 |         scope.headerText = attrs.headerText || '';
120 |         // Text displayed on label
121 |         scope.text = attrs.text || '';
122 |         scope.defaultText = attrs.text || '';
123 |         // Data binding properties
124 |         scope.checkedProperty = attrs.checkedProperty || "checked";
125 |         scope.textProperty = attrs.textProperty || "text";
126 |         scope.valueProperty = attrs.valueProperty || "id";
127 |         //Translate properties
128 |         scope.isTranslate = (attrs.isTranslate === "true") || false;
129 |         scope.indexTranslate = attrs.indexTranslate || "";
130 |         // The modal properties
131 |         scope.modalTemplateUrl = attrs.modalTemplateUrl || multiselect.modalTemplateUrl;
132 |         scope.modalAnimation = attrs.modalAnimation;
133 |         // Note properties
134 |         scope.noteText = attrs.noteText || "";
135 | 
136 |         //Init modal with the items
137 |         if (scope.modalTemplateUrl) {
138 |           $ionicModal.fromTemplateUrl(
139 |             scope.modalTemplateUrl,
140 |             {
141 |               scope: scope,
142 |               animation: scope.modalAnimation
143 |             }
144 |           ).then(function(modal) {
145 |             scope.modal = modal;
146 |           });
147 |         } else {
148 |           scope.modal = $ionicModal.fromTemplate('',
149 |             {
150 |               scope: scope,
151 |               animation: scope.modalAnimation
152 |             }
153 |           );
154 |         }
155 | 
156 |         //Remove modal
157 |         scope.$on("$destroy", function() {
158 |           scope.modal.remove();
159 |         });
160 | 
161 |         /**
162 |         * @name getItemText
163 |         * @desc Get text property of objeto
164 |         * @param {Object} item: Object data item
165 |         * @returns {String}
166 |         */
167 |         scope.getItemText = function(item) {
168 |           return scope.textProperty ? item[scope.textProperty] : item;
169 |         };
170 | 
171 |         /**
172 |         * @name getItemValue
173 |         * @desc Get value property of objet
174 |         * @param {Object} item: Object data item
175 |         * @returns {String}
176 |         */
177 |         scope.getItemValue = function(item) {
178 |           return scope.valueProperty ? item[scope.valueProperty] : item;
179 |         };
180 | 
181 |         /**
182 |         * @name getText
183 |         * @desc Get items selected
184 |         * @param {Array} value: Array with values showed in modal
185 |         * @returns {String}
186 |         */
187 |         scope.getText = function(value) {
188 |           // Push the values into a temporary array so that they can be iterated through
189 |           var temp = value ? value : [];
190 | 
191 |           var text = "";
192 |           if (temp.length) {
193 |             //Concatenate the items
194 |             angular.forEach(scope.items, function(item, key) {
195 |               for (var i = 0; i < temp.length; i++) {
196 |                 if (scope.getItemValue(item) == temp[i]) {
197 |                   //if is translate
198 |                   if(scope.isTranslate){
199 |                     text += (text.length ? "^" : "") + scope.getItemValue(item);
200 |                   }else{
201 |                     text += (text.length ? "^" : "") + scope.getItemText(item);
202 |                   }
203 |                   break;
204 |                 }
205 |               }
206 |             });
207 |           }else{
208 |             //Text default (When is translate)
209 |             text = scope.defaultText;
210 |           }
211 | 
212 |           //Text default when not select nothing and not is translate
213 |           if (!text.length && !scope.isTranslate) {
214 |             text = scope.defaultText;
215 |           }
216 | 
217 |           //Check if empty
218 |           if(scope.isTranslate){
219 |             if(text.trim() == ""){
220 |               text = "^";
221 |             }
222 |           }
223 | 
224 |           // If a callback has been specified for the text
225 |           return scope.getCustomTextCallback({value: value}) || text;
226 |         };
227 | 
228 |         /**
229 |         * @name hideItems
230 |         * @desc Hide modal
231 |         * @param {Object} event: Event js
232 |         */
233 |         scope.hideItems = function(event) {
234 |           scope.modal.hide();
235 |         };
236 | 
237 |         /**
238 |         * @name onCheckValueChanged
239 |         * @desc Raised by watch when the check value changes
240 |         * @param {Object} newValue: New value object
241 |         * @param {Object} oldValue: Old value object
242 |         */
243 |         scope.onCheckValueChanged = function(newValue, oldValue) {
244 |           if(typeof(newValue) !== "undefined"){
245 |             // Notify subscribers that the value has changed
246 |             scope.valueChangedCallback({value: newValue});
247 |           }
248 |         };
249 | 
250 |         /**
251 |         * @name onValueChanged
252 |         * @desc Raised by watch when the value changes
253 |         * @param {Object} newValue: New value object
254 |         * @param {Object} oldValue: Old value object
255 |         */
256 |         scope.onValueChanged = function(newValue, oldValue) {
257 |           scope.text = scope.getText(newValue);
258 |         };
259 | 
260 |         /**
261 |         * @name showItems
262 |         * @desc Show modal
263 |         * @param {Object} event: Event js
264 |         */
265 |         scope.showItems = function(event) {
266 |           event.preventDefault(); // Prevent the event from bubbling
267 |           scope.modal.show();
268 |         };
269 | 
270 |         /**
271 |         * @name validate
272 |         * @desc Validates the current list
273 |         */
274 |         scope.validate = function() {
275 |           scope.fetchCheckedItems();
276 |           scope.hideItems();
277 |         };
278 | 
279 |         /**
280 |          * @name fetchCheckedItems
281 |          * @desc parses the items array and determines which items are checked
282 |          */
283 |         scope.fetchCheckedItems = function() {
284 |           scope.value = [];
285 |           if (scope.items) {
286 |             var arrChecked = [];
287 |             angular.forEach(scope.items, function(item, key) {
288 |               if (item[scope.checkedProperty]) {
289 |                 scope.value[key] = scope.getItemValue(item);
290 |                 arrChecked.push(item);
291 |               }else{
292 |                 scope.value[key] = "";
293 |               }
294 |             });
295 | 
296 |             scope.itemChecked = arrChecked;
297 |           }
298 |         }
299 | 
300 |         // Update scope.items checked attribute with scope.defaultValue
301 |         scope.fetchCheckedDefaultItems = function() {
302 |           scope.value = [];
303 |           if (scope.items) {
304 |             var arrChecked = [];
305 |             angular.forEach(scope.defaultValue, function(defaultitem){
306 |                 angular.forEach(scope.items, function(item, key) {
307 |                 if (item[scope.valueProperty]==defaultitem) {
308 |                   scope.value[key] = scope.getItemValue(item);
309 |                   item.checked=true;
310 |                   arrChecked.push(item);
311 |                 }
312 |               });
313 |             })
314 |             scope.itemChecked = arrChecked;
315 |           }
316 |         }
317 |         scope.fetchCheckedDefaultItems();
318 | 
319 |         // Watch itemChecked property
320 |         scope.$watch(function(){
321 |           return scope.itemChecked;
322 |         }, scope.onCheckValueChanged, true);
323 | 
324 |         // Watch value property
325 |         scope.$watch(function(){
326 |           return scope.value;
327 |         }, scope.onValueChanged, true);
328 | 
329 |         // Watch items property
330 |         scope.$watch(function(){
331 |           return scope.items;
332 |         }, scope.fetchCheckedItems, true);
333 | 
334 |         // Watch defaultValue property
335 |         scope.$watch(function(){
336 |           return scope.defaultValue;
337 |         }, scope.fetchCheckedDefaultItems, true);
338 |       }
339 |     };
340 |   }]);
341 | }());
342 | 


--------------------------------------------------------------------------------
/dist/ionic-multiselect.min.js:
--------------------------------------------------------------------------------
1 | !function(){"use strict";angular.module("ionic-multiselect",[]).filter("translateItem",["$injector","$parse",function(e,t){return function(a,n){var l;try{var l=e.get("$filter"),r=t("item."+n.valueProperty),i=r(n);return l("translate")(n.indexTranslate+i)}catch(u){return""}}}]).filter("showTextData",["$injector",function(e){return function(t,a){var n;try{var n=e.get("$filter")}catch(l){}var r=[];if(t.indexOf("^")>-1){r=t.split("^"),r=r.filter(Boolean);for(var i=r.length,u=0;i>u;u++){if(a.isTranslate)var o=n("translate")(a.indexTranslate+r[u].trim());else var o=r[u].trim();r[u]=o}}else a.isTranslate?r.push(n("translate")(a.indexTranslate+t.trim())):r.push(t);return 0==r.length?"":r}}]).provider("multiselect",function(){this.setModalTemplateUrl=function(e){this.modalTemplateUrl=e},this.setTemplateUrl=function(e){this.templateUrl=e},this.$get=function(){return this}}).directive("multiselect",["$ionicModal","multiselect",function(e,t){return{restrict:"E",template:function(e,a){return a.templateUrl||t.templateUrl?"<ng-include src=\"'"+(a.templateUrl||t.templateUrl)+"'\"></ng-include>":""},scope:{items:"=",defaultValue:"=",valueChangedCallback:"&valueChanged",getCustomTextCallback:"&getCustomText"},link:function(a,n,l){a.headerText=l.headerText||"",a.text=l.text||"",a.defaultText=l.text||"",a.checkedProperty=l.checkedProperty||"checked",a.textProperty=l.textProperty||"text",a.valueProperty=l.valueProperty||"id",a.isTranslate="true"===l.isTranslate||!1,a.indexTranslate=l.indexTranslate||"",a.modalTemplateUrl=l.modalTemplateUrl||t.modalTemplateUrl,a.modalAnimation=l.modalAnimation,a.noteText=l.noteText||"",a.modalTemplateUrl?e.fromTemplateUrl(a.modalTemplateUrl,{scope:a,animation:a.modalAnimation}).then(function(e){a.modal=e}):a.modal=e.fromTemplate("",{scope:a,animation:a.modalAnimation}),a.$on("$destroy",function(){a.modal.remove()}),a.getItemText=function(e){return a.textProperty?e[a.textProperty]:e},a.getItemValue=function(e){return a.valueProperty?e[a.valueProperty]:e},a.getText=function(e){var t=e?e:[],n="";return t.length?angular.forEach(a.items,function(e,l){for(var r=0;r<t.length;r++)if(a.getItemValue(e)==t[r]){n+=a.isTranslate?(n.length?"^":"")+a.getItemValue(e):(n.length?"^":"")+a.getItemText(e);break}}):n=a.defaultText,n.length||a.isTranslate||(n=a.defaultText),a.isTranslate&&""==n.trim()&&(n="^"),a.getCustomTextCallback({value:e})||n},a.hideItems=function(e){a.modal.hide()},a.onCheckValueChanged=function(e,t){"undefined"!=typeof e&&a.valueChangedCallback({value:e})},a.onValueChanged=function(e,t){a.text=a.getText(e)},a.showItems=function(e){e.preventDefault(),a.modal.show()},a.validate=function(){a.fetchCheckedItems(),a.hideItems()},a.fetchCheckedItems=function(){if(a.value=[],a.items){var e=[];angular.forEach(a.items,function(t,n){t[a.checkedProperty]?(a.value[n]=a.getItemValue(t),e.push(t)):a.value[n]=""}),a.itemChecked=e}},a.fetchCheckedDefaultItems=function(){if(a.value=[],a.items){var e=[];angular.forEach(a.defaultValue,function(t){angular.forEach(a.items,function(n,l){n[a.valueProperty]==t&&(a.value[l]=a.getItemValue(n),n.checked=!0,e.push(n))})}),a.itemChecked=e}},a.fetchCheckedDefaultItems(),a.$watch(function(){return a.itemChecked},a.onCheckValueChanged,!0),a.$watch(function(){return a.value},a.onValueChanged,!0),a.$watch(function(){return a.items},a.fetchCheckedItems,!0),a.$watch(function(){return a.defaultValue},a.fetchCheckedDefaultItems,!0)}}}])}();


--------------------------------------------------------------------------------
/dist/templates/item-template.html:
--------------------------------------------------------------------------------
 1 | <ion-list>
 2 |   <ion-item ng-click="showItems($event)">
 3 |     <div ng-repeat="item in text | showTextData:this track by $index">
 4 |       {{ item }}
 5 |     </div>
 6 | 
 7 |     <span class="item-note">{{noteText}}</span>
 8 |   </ion-item>
 9 | </ion-list>
10 | 


--------------------------------------------------------------------------------
/dist/templates/modal-template.html:
--------------------------------------------------------------------------------
 1 | <ion-modal-view>
 2 |   <ion-header-bar class="bar-positive">
 3 |     <button class="button button-positive button-icon ion-ios-arrow-back" ng-click="hideItems()" />
 4 |     <h1 class="title">{{headerText}}</h1>
 5 |     <button class="button button-positive button-icon ion-checkmark" ng-click="validate()" />
 6 |   </ion-header-bar>
 7 | 
 8 |   <ion-content>
 9 |     <ion-list>
10 |       <ion-item class="item-checkbox" ng-repeat="item in items">
11 |         <label class="checkbox">
12 |           <input type="checkbox" ng-checked="item.checked" ng-model="item.checked">
13 |         </label>
14 |         <div ng-if="isTranslate">
15 |           {{ item | translateItem:this }}
16 |         </div>
17 |         <div ng-if="!isTranslate">
18 |           {{ $eval('item.' + textProperty) }} 
19 |         </div>
20 |       </ion-item>
21 |     </ion-list>
22 |   </ion-content>
23 | </ion-modal-view>
24 | 


--------------------------------------------------------------------------------
/example/controller.main.js:
--------------------------------------------------------------------------------
 1 | var App = angular.module("MainApp", ["ionic", "ionic-multiselect"]);
 2 | 
 3 | App.config(function(multiselectProvider) {
 4 |     multiselectProvider.setTemplateUrl('bower_components/ionic-multiselect/dist/templates/item-template.html');
 5 |     multiselectProvider.setModalTemplateUrl('bower_components/ionic-multiselect/dist/templates/modal-template.html');
 6 | });
 7 | 
 8 | App.controller("MainController", function($scope){
 9 | 
10 |   $scope.data = [{id: 1, value: "Item 1"}, {id: 2, value: "Item 2"}, {id: 3, value: "Item 3"}];
11 |   $scope.default=["Item 2"];
12 |   $scope.onValueChanged = function(value){
13 |   	console.log(value);
14 |   }
15 | });
16 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Ionic multiselect</title>
 5 |    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
 6 |    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 7 | </head>
 8 | <body ng-app="MainApp" ng-controller="MainController">
 9 | 
10 |   <center>
11 |     <multiselect
12 |       header-text="Header"
13 |       items="data"
14 |       text-property="value"
15 |       value-property="id"
16 |       is-translate="false"
17 |       text="Text default multiselect"
18 |       note-text="Note Text"
19 |       value-changed="onValueChanged(value)"
20 |       default-value="default">
21 |     </multiselect>
22 |   </center>
23 | 
24 |   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
25 |   <script src="lib/ionic/js/ionic.bundle.min.js"></script>
26 |   <script src="bower_components/ionic-multiselect/dist/ionic-multiselect.min.js"></script>
27 |   <script src="controller.main.js"></script>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/example/lib/ionic/fonts/ionicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapeveri/ionic-multiselect/9f617493b210883f84138066b75e89fe5d91fdf6/example/lib/ionic/fonts/ionicons.eot


--------------------------------------------------------------------------------
/example/lib/ionic/fonts/ionicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapeveri/ionic-multiselect/9f617493b210883f84138066b75e89fe5d91fdf6/example/lib/ionic/fonts/ionicons.ttf


--------------------------------------------------------------------------------
/example/lib/ionic/fonts/ionicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapeveri/ionic-multiselect/9f617493b210883f84138066b75e89fe5d91fdf6/example/lib/ionic/fonts/ionicons.woff


--------------------------------------------------------------------------------
/example/lib/ionic/js/angular/angular-animate.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  AngularJS v1.4.3
 3 |  (c) 2010-2015 Google, Inc. http://angularjs.org
 4 |  License: MIT
 5 | */
 6 | (function(F,t,W){'use strict';function ua(a,b,c){if(!a)throw ngMinErr("areq",b||"?",c||"required");return a}function va(a,b){if(!a&&!b)return"";if(!a)return b;if(!b)return a;X(a)&&(a=a.join(" "));X(b)&&(b=b.join(" "));return a+" "+b}function Ea(a){var b={};a&&(a.to||a.from)&&(b.to=a.to,b.from=a.from);return b}function ba(a,b,c){var d="";a=X(a)?a:a&&U(a)&&a.length?a.split(/\s+/):[];u(a,function(a,s){a&&0<a.length&&(d+=0<s?" ":"",d+=c?b+a:a+b)});return d}function Fa(a){if(a instanceof G)switch(a.length){case 0:return[];
 7 | case 1:if(1===a[0].nodeType)return a;break;default:return G(ka(a))}if(1===a.nodeType)return G(a)}function ka(a){if(!a[0])return a;for(var b=0;b<a.length;b++){var c=a[b];if(1==c.nodeType)return c}}function Ga(a,b,c){u(b,function(b){a.addClass(b,c)})}function Ha(a,b,c){u(b,function(b){a.removeClass(b,c)})}function ha(a){return function(b,c){c.addClass&&(Ga(a,b,c.addClass),c.addClass=null);c.removeClass&&(Ha(a,b,c.removeClass),c.removeClass=null)}}function ia(a){a=a||{};if(!a.$$prepared){var b=a.domOperation||
 8 | H;a.domOperation=function(){a.$$domOperationFired=!0;b();b=H};a.$$prepared=!0}return a}function ca(a,b){wa(a,b);xa(a,b)}function wa(a,b){b.from&&(a.css(b.from),b.from=null)}function xa(a,b){b.to&&(a.css(b.to),b.to=null)}function R(a,b,c){var d=(b.addClass||"")+" "+(c.addClass||""),e=(b.removeClass||"")+" "+(c.removeClass||"");a=Ia(a.attr("class"),d,e);ya(b,c);b.addClass=a.addClass?a.addClass:null;b.removeClass=a.removeClass?a.removeClass:null;return b}function Ia(a,b,c){function d(a){U(a)&&(a=a.split(" "));
 9 | var b={};u(a,function(a){a.length&&(b[a]=!0)});return b}var e={};a=d(a);b=d(b);u(b,function(a,b){e[b]=1});c=d(c);u(c,function(a,b){e[b]=1===e[b]?null:-1});var s={addClass:"",removeClass:""};u(e,function(b,c){var d,e;1===b?(d="addClass",e=!a[c]):-1===b&&(d="removeClass",e=a[c]);e&&(s[d].length&&(s[d]+=" "),s[d]+=c)});return s}function z(a){return a instanceof t.element?a[0]:a}function za(a,b,c){var d=Object.create(null),e=a.getComputedStyle(b)||{};u(c,function(a,b){var c=e[a];if(c){var k=c.charAt(0);
10 | if("-"===k||"+"===k||0<=k)c=Ja(c);0===c&&(c=null);d[b]=c}});return d}function Ja(a){var b=0;a=a.split(/\s*,\s*/);u(a,function(a){"s"==a.charAt(a.length-1)&&(a=a.substring(0,a.length-1));a=parseFloat(a)||0;b=b?Math.max(a,b):a});return b}function la(a){return 0===a||null!=a}function Aa(a,b){var c=O,d=a+"s";b?c+="Duration":d+=" linear all";return[c,d]}function ja(a,b){var c=b?"-"+b+"s":"";da(a,[ea,c]);return[ea,c]}function ma(a,b){var c=b?"paused":"",d=V+"PlayState";da(a,[d,c]);return[d,c]}function da(a,
11 | b){a.style[b[0]]=b[1]}function Ba(){var a=Object.create(null);return{flush:function(){a=Object.create(null)},count:function(b){return(b=a[b])?b.total:0},get:function(b){return(b=a[b])&&b.value},put:function(b,c){a[b]?a[b].total++:a[b]={total:1,value:c}}}}var H=t.noop,ya=t.extend,G=t.element,u=t.forEach,X=t.isArray,U=t.isString,na=t.isObject,Ka=t.isUndefined,La=t.isDefined,Ca=t.isFunction,oa=t.isElement,O,pa,V,qa;F.ontransitionend===W&&F.onwebkittransitionend!==W?(O="WebkitTransition",pa="webkitTransitionEnd transitionend"):
12 | (O="transition",pa="transitionend");F.onanimationend===W&&F.onwebkitanimationend!==W?(V="WebkitAnimation",qa="webkitAnimationEnd animationend"):(V="animation",qa="animationend");var ra=V+"Delay",sa=V+"Duration",ea=O+"Delay";F=O+"Duration";var Ma={transitionDuration:F,transitionDelay:ea,transitionProperty:O+"Property",animationDuration:sa,animationDelay:ra,animationIterationCount:V+"IterationCount"},Na={transitionDuration:F,transitionDelay:ea,animationDuration:sa,animationDelay:ra};t.module("ngAnimate",
13 | []).directive("ngAnimateChildren",[function(){return function(a,b,c){a=c.ngAnimateChildren;t.isString(a)&&0===a.length?b.data("$$ngAnimateChildren",!0):c.$observe("ngAnimateChildren",function(a){b.data("$$ngAnimateChildren","on"===a||"true"===a)})}}]).factory("$$rAFMutex",["$$rAF",function(a){return function(){var b=!1;a(function(){b=!0});return function(c){b?c():a(c)}}}]).factory("$$rAFScheduler",["$$rAF",function(a){function b(a){d.push([].concat(a));c()}function c(){if(d.length){for(var b=[],n=
14 | 0;n<d.length;n++){var h=d[n];h.shift()();h.length&&b.push(h)}d=b;e||a(function(){e||c()})}}var d=[],e;b.waitUntilQuiet=function(b){e&&e();e=a(function(){e=null;b();c()})};return b}]).factory("$$AnimateRunner",["$q","$$rAFMutex",function(a,b){function c(a){this.setHost(a);this._doneCallbacks=[];this._runInAnimationFrame=b();this._state=0}c.chain=function(a,b){function c(){if(n===a.length)b(!0);else a[n](function(a){!1===a?b(!1):(n++,c())})}var n=0;c()};c.all=function(a,b){function c(s){h=h&&s;++n===
15 | a.length&&b(h)}var n=0,h=!0;u(a,function(a){a.done(c)})};c.prototype={setHost:function(a){this.host=a||{}},done:function(a){2===this._state?a():this._doneCallbacks.push(a)},progress:H,getPromise:function(){if(!this.promise){var b=this;this.promise=a(function(a,c){b.done(function(b){!1===b?c():a()})})}return this.promise},then:function(a,b){return this.getPromise().then(a,b)},"catch":function(a){return this.getPromise()["catch"](a)},"finally":function(a){return this.getPromise()["finally"](a)},pause:function(){this.host.pause&&
16 | this.host.pause()},resume:function(){this.host.resume&&this.host.resume()},end:function(){this.host.end&&this.host.end();this._resolve(!0)},cancel:function(){this.host.cancel&&this.host.cancel();this._resolve(!1)},complete:function(a){var b=this;0===b._state&&(b._state=1,b._runInAnimationFrame(function(){b._resolve(a)}))},_resolve:function(a){2!==this._state&&(u(this._doneCallbacks,function(b){b(a)}),this._doneCallbacks.length=0,this._state=2)}};return c}]).provider("$$animateQueue",["$animateProvider",
17 | function(a){function b(a,b,c,h){return d[a].some(function(a){return a(b,c,h)})}function c(a,b){a=a||{};var c=0<(a.addClass||"").length,d=0<(a.removeClass||"").length;return b?c&&d:c||d}var d=this.rules={skip:[],cancel:[],join:[]};d.join.push(function(a,b,d){return!b.structural&&c(b.options)});d.skip.push(function(a,b,d){return!b.structural&&!c(b.options)});d.skip.push(function(a,b,c){return"leave"==c.event&&b.structural});d.skip.push(function(a,b,c){return c.structural&&!b.structural});d.cancel.push(function(a,
18 | b,c){return c.structural&&b.structural});d.cancel.push(function(a,b,c){return 2===c.state&&b.structural});d.cancel.push(function(a,b,c){a=b.options;c=c.options;return a.addClass&&a.addClass===c.removeClass||a.removeClass&&a.removeClass===c.addClass});this.$get=["$$rAF","$rootScope","$rootElement","$document","$$HashMap","$$animation","$$AnimateRunner","$templateRequest","$$jqLite",function(d,s,n,h,k,D,A,Z,I){function w(a,b){var c=z(a),f=[],m=l[b];m&&u(m,function(a){a.node.contains(c)&&f.push(a.callback)});
19 | return f}function B(a,b,c,f){d(function(){u(w(b,a),function(a){a(b,c,f)})})}function r(a,S,p){function d(b,c,f,p){B(c,a,f,p);b.progress(c,f,p)}function g(b){Da(a,p);ca(a,p);p.domOperation();l.complete(!b)}var P,E;if(a=Fa(a))P=z(a),E=a.parent();p=ia(p);var l=new A;if(!P)return g(),l;X(p.addClass)&&(p.addClass=p.addClass.join(" "));X(p.removeClass)&&(p.removeClass=p.removeClass.join(" "));p.from&&!na(p.from)&&(p.from=null);p.to&&!na(p.to)&&(p.to=null);var e=[P.className,p.addClass,p.removeClass].join(" ");
20 | if(!v(e))return g(),l;var M=0<=["enter","move","leave"].indexOf(S),h=!x||L.get(P),e=!h&&m.get(P)||{},k=!!e.state;h||k&&1==e.state||(h=!ta(a,E,S));if(h)return g(),l;M&&K(a);h={structural:M,element:a,event:S,close:g,options:p,runner:l};if(k){if(b("skip",a,h,e)){if(2===e.state)return g(),l;R(a,e.options,p);return e.runner}if(b("cancel",a,h,e))2===e.state?e.runner.end():e.structural?e.close():R(a,h.options,e.options);else if(b("join",a,h,e))if(2===e.state)R(a,p,{});else return S=h.event=e.event,p=R(a,
21 | e.options,h.options),l}else R(a,p,{});(k=h.structural)||(k="animate"===h.event&&0<Object.keys(h.options.to||{}).length||c(h.options));if(!k)return g(),C(a),l;M&&f(E);var r=(e.counter||0)+1;h.counter=r;ga(a,1,h);s.$$postDigest(function(){var b=m.get(P),v=!b,b=b||{},e=a.parent()||[],E=0<e.length&&("animate"===b.event||b.structural||c(b.options));if(v||b.counter!==r||!E){v&&(Da(a,p),ca(a,p));if(v||M&&b.event!==S)p.domOperation(),l.end();E||C(a)}else S=!b.structural&&c(b.options,!0)?"setClass":b.event,
22 | b.structural&&f(e),ga(a,2),b=D(a,S,b.options),b.done(function(b){g(!b);(b=m.get(P))&&b.counter===r&&C(z(a));d(l,S,"close",{})}),l.setHost(b),d(l,S,"start",{})});return l}function K(a){a=z(a).querySelectorAll("[data-ng-animate]");u(a,function(a){var b=parseInt(a.getAttribute("data-ng-animate")),c=m.get(a);switch(b){case 2:c.runner.end();case 1:c&&m.remove(a)}})}function C(a){a=z(a);a.removeAttribute("data-ng-animate");m.remove(a)}function E(a,b){return z(a)===z(b)}function f(a){a=z(a);do{if(!a||1!==
23 | a.nodeType)break;var b=m.get(a);if(b){var f=a;!b.structural&&c(b.options)&&(2===b.state&&b.runner.end(),C(f))}a=a.parentNode}while(1)}function ta(a,b,c){var f=c=!1,d=!1,v;for((a=a.data("$ngAnimatePin"))&&(b=a);b&&b.length;){f||(f=E(b,n));a=b[0];if(1!==a.nodeType)break;var e=m.get(a)||{};d||(d=e.structural||L.get(a));if(Ka(v)||!0===v)a=b.data("$$ngAnimateChildren"),La(a)&&(v=a);if(d&&!1===v)break;f||(f=E(b,n),f||(a=b.data("$ngAnimatePin"))&&(b=a));c||(c=E(b,g));b=b.parent()}return(!d||v)&&f&&c}function ga(a,
24 | b,c){c=c||{};c.state=b;a=z(a);a.setAttribute("data-ng-animate",b);c=(b=m.get(a))?ya(b,c):c;m.put(a,c)}var m=new k,L=new k,x=null,M=s.$watch(function(){return 0===Z.totalPendingRequests},function(a){a&&(M(),s.$$postDigest(function(){s.$$postDigest(function(){null===x&&(x=!0)})}))}),g=G(h[0].body),l={},P=a.classNameFilter(),v=P?function(a){return P.test(a)}:function(){return!0},Da=ha(I);return{on:function(a,b,c){b=ka(b);l[a]=l[a]||[];l[a].push({node:b,callback:c})},off:function(a,b,c){function f(a,
25 | b,c){var d=ka(b);return a.filter(function(a){return!(a.node===d&&(!c||a.callback===c))})}var d=l[a];d&&(l[a]=1===arguments.length?null:f(d,b,c))},pin:function(a,b){ua(oa(a),"element","not an element");ua(oa(b),"parentElement","not an element");a.data("$ngAnimatePin",b)},push:function(a,b,c,f){c=c||{};c.domOperation=f;return r(a,b,c)},enabled:function(a,b){var c=arguments.length;if(0===c)b=!!x;else if(oa(a)){var f=z(a),d=L.get(f);1===c?b=!d:(b=!!b)?d&&L.remove(f):L.put(f,!0)}else b=x=!!a;return b}}}]}]).provider("$$animation",
26 | ["$animateProvider",function(a){function b(a){return a.data("$$animationRunner")}var c=this.drivers=[];this.$get=["$$jqLite","$rootScope","$injector","$$AnimateRunner","$$rAFScheduler",function(a,e,s,n,h){var k=[],D=ha(a),A=0,Z=0,I=[];return function(w,B,r){function K(a){a=a.hasAttribute("ng-animate-ref")?[a]:a.querySelectorAll("[ng-animate-ref]");var b=[];u(a,function(a){var c=a.getAttribute("ng-animate-ref");c&&c.length&&b.push(a)});return b}function C(a){var b=[],c={};u(a,function(a,f){var d=z(a.element),
27 | m=0<=["enter","move"].indexOf(a.event),d=a.structural?K(d):[];if(d.length){var g=m?"to":"from";u(d,function(a){var b=a.getAttribute("ng-animate-ref");c[b]=c[b]||{};c[b][g]={animationID:f,element:G(a)}})}else b.push(a)});var f={},d={};u(c,function(c,m){var g=c.from,e=c.to;if(g&&e){var l=a[g.animationID],h=a[e.animationID],x=g.animationID.toString();if(!d[x]){var B=d[x]={structural:!0,beforeStart:function(){l.beforeStart();h.beforeStart()},close:function(){l.close();h.close()},classes:E(l.classes,h.classes),
28 | from:l,to:h,anchors:[]};B.classes.length?b.push(B):(b.push(l),b.push(h))}d[x].anchors.push({out:g.element,"in":e.element})}else g=g?g.animationID:e.animationID,e=g.toString(),f[e]||(f[e]=!0,b.push(a[g]))});return b}function E(a,b){a=a.split(" ");b=b.split(" ");for(var c=[],f=0;f<a.length;f++){var d=a[f];if("ng-"!==d.substring(0,3))for(var g=0;g<b.length;g++)if(d===b[g]){c.push(d);break}}return c.join(" ")}function f(a){for(var b=c.length-1;0<=b;b--){var f=c[b];if(s.has(f)&&(f=s.get(f)(a)))return f}}
29 | function ta(a,c){a.from&&a.to?(b(a.from.element).setHost(c),b(a.to.element).setHost(c)):b(a.element).setHost(c)}function ga(){var a=b(w);!a||"leave"===B&&r.$$domOperationFired||a.end()}function m(b){w.off("$destroy",ga);w.removeData("$$animationRunner");D(w,r);ca(w,r);r.domOperation();g&&a.removeClass(w,g);w.removeClass("ng-animate");x.complete(!b)}r=ia(r);var L=0<=["enter","move","leave"].indexOf(B),x=new n({end:function(){m()},cancel:function(){m(!0)}});if(!c.length)return m(),x;w.data("$$animationRunner",
30 | x);var M=va(w.attr("class"),va(r.addClass,r.removeClass)),g=r.tempClasses;g&&(M+=" "+g,r.tempClasses=null);var l;L||(l=A,A+=1);k.push({element:w,classes:M,event:B,classBasedIndex:l,structural:L,options:r,beforeStart:function(){w.addClass("ng-animate");g&&a.addClass(w,g)},close:m});w.on("$destroy",ga);if(1<k.length)return x;e.$$postDigest(function(){Z=A;A=0;I.length=0;var a=[];u(k,function(c){b(c.element)&&a.push(c)});k.length=0;u(C(a),function(a){function c(){a.beforeStart();var d,g=a.close,e=a.anchors?
31 | a.from.element||a.to.element:a.element;b(e)&&z(e).parentNode&&(e=f(a))&&(d=e.start);d?(d=d(),d.done(function(a){g(!a)}),ta(a,d)):g()}a.structural?c():(I.push({node:z(a.element),fn:c}),a.classBasedIndex===Z-1&&(I=I.sort(function(a,b){return b.node.contains(a.node)}).map(function(a){return a.fn}),h(I)))})});return x}}]}]).provider("$animateCss",["$animateProvider",function(a){var b=Ba(),c=Ba();this.$get=["$window","$$jqLite","$$AnimateRunner","$timeout","$document","$sniffer","$$rAFScheduler",function(a,
32 | e,s,n,h,k,D){function A(a,b){var c=a.parentNode;return(c.$$ngAnimateParentKey||(c.$$ngAnimateParentKey=++r))+"-"+a.getAttribute("class")+"-"+b}function Z(h,f,B,k){var m;0<b.count(B)&&(m=c.get(B),m||(f=ba(f,"-stagger"),e.addClass(h,f),m=za(a,h,k),m.animationDuration=Math.max(m.animationDuration,0),m.transitionDuration=Math.max(m.transitionDuration,0),e.removeClass(h,f),c.put(B,m)));return m||{}}function I(a){C.push(a);D.waitUntilQuiet(function(){b.flush();c.flush();for(var a=K.offsetWidth+1,d=0;d<
33 | C.length;d++)C[d](a);C.length=0})}function w(c,f,e){f=b.get(e);f||(f=za(a,c,Ma),"infinite"===f.animationIterationCount&&(f.animationIterationCount=1));b.put(e,f);c=f;e=c.animationDelay;f=c.transitionDelay;c.maxDelay=e&&f?Math.max(e,f):e||f;c.maxDuration=Math.max(c.animationDuration*c.animationIterationCount,c.transitionDuration);return c}var B=ha(e),r=0,K=z(h).body,C=[];return function(a,c){function d(){m()}function h(){m(!0)}function m(b){if(!(K||C&&D)){K=!0;D=!1;e.removeClass(a,Y);e.removeClass(a,
34 | W);ma(g,!1);ja(g,!1);u(l,function(a){g.style[a[0]]=""});B(a,c);ca(a,c);if(c.onDone)c.onDone();p&&p.complete(!b)}}function L(a){q.blockTransition&&ja(g,a);q.blockKeyframeAnimation&&ma(g,!!a)}function x(){p=new s({end:d,cancel:h});m();return{$$willAnimate:!1,start:function(){return p},end:d}}function M(){function b(){if(!K){L(!1);u(l,function(a){g.style[a[0]]=a[1]});B(a,c);e.addClass(a,W);if(q.recalculateTimingStyles){fa=g.className+" "+Y;$=A(g,fa);y=w(g,fa,$);Q=y.maxDelay;H=Math.max(Q,0);J=y.maxDuration;
35 | if(0===J){m();return}q.hasTransitions=0<y.transitionDuration;q.hasAnimations=0<y.animationDuration}if(q.applyTransitionDelay||q.applyAnimationDelay){Q="boolean"!==typeof c.delay&&la(c.delay)?parseFloat(c.delay):Q;H=Math.max(Q,0);var k;q.applyTransitionDelay&&(y.transitionDelay=Q,k=[ea,Q+"s"],l.push(k),g.style[k[0]]=k[1]);q.applyAnimationDelay&&(y.animationDelay=Q,k=[ra,Q+"s"],l.push(k),g.style[k[0]]=k[1])}F=1E3*H;G=1E3*J;if(c.easing){var r=c.easing;q.hasTransitions&&(k=O+"TimingFunction",l.push([k,
36 | r]),g.style[k]=r);q.hasAnimations&&(k=V+"TimingFunction",l.push([k,r]),g.style[k]=r)}y.transitionDuration&&p.push(pa);y.animationDuration&&p.push(qa);x=Date.now();a.on(p.join(" "),h);n(d,F+1.5*G);xa(a,c)}}function d(){m()}function h(a){a.stopPropagation();var b=a.originalEvent||a;a=b.$manualTimeStamp||b.timeStamp||Date.now();b=parseFloat(b.elapsedTime.toFixed(3));Math.max(a-x,0)>=F&&b>=J&&(C=!0,m())}if(!K)if(g.parentNode){var x,p=[],k=function(a){if(C)D&&a&&(D=!1,m());else if(D=!a,y.animationDuration)if(a=
37 | ma(g,D),D)l.push(a);else{var b=l,c=b.indexOf(a);0<=a&&b.splice(c,1)}},r=0<U&&(y.transitionDuration&&0===T.transitionDuration||y.animationDuration&&0===T.animationDuration)&&Math.max(T.animationDelay,T.transitionDelay);r?n(b,Math.floor(r*U*1E3),!1):b();t.resume=function(){k(!0)};t.pause=function(){k(!1)}}else m()}var g=z(a);if(!g||!g.parentNode)return x();c=ia(c);var l=[],r=a.attr("class"),v=Ea(c),K,D,C,p,t,H,F,J,G;if(0===c.duration||!k.animations&&!k.transitions)return x();var aa=c.event&&X(c.event)?
38 | c.event.join(" "):c.event,R="",N="";aa&&c.structural?R=ba(aa,"ng-",!0):aa&&(R=aa);c.addClass&&(N+=ba(c.addClass,"-add"));c.removeClass&&(N.length&&(N+=" "),N+=ba(c.removeClass,"-remove"));c.applyClassesEarly&&N.length&&(B(a,c),N="");var Y=[R,N].join(" ").trim(),fa=r+" "+Y,W=ba(Y,"-active"),r=v.to&&0<Object.keys(v.to).length;if(!(0<(c.keyframeStyle||"").length||r||Y))return x();var $,T;0<c.stagger?(v=parseFloat(c.stagger),T={transitionDelay:v,animationDelay:v,transitionDuration:0,animationDuration:0}):
39 | ($=A(g,fa),T=Z(g,Y,$,Na));e.addClass(a,Y);c.transitionStyle&&(v=[O,c.transitionStyle],da(g,v),l.push(v));0<=c.duration&&(v=0<g.style[O].length,v=Aa(c.duration,v),da(g,v),l.push(v));c.keyframeStyle&&(v=[V,c.keyframeStyle],da(g,v),l.push(v));var U=T?0<=c.staggerIndex?c.staggerIndex:b.count($):0;(aa=0===U)&&ja(g,9999);var y=w(g,fa,$),Q=y.maxDelay;H=Math.max(Q,0);J=y.maxDuration;var q={};q.hasTransitions=0<y.transitionDuration;q.hasAnimations=0<y.animationDuration;q.hasTransitionAll=q.hasTransitions&&
40 | "all"==y.transitionProperty;q.applyTransitionDuration=r&&(q.hasTransitions&&!q.hasTransitionAll||q.hasAnimations&&!q.hasTransitions);q.applyAnimationDuration=c.duration&&q.hasAnimations;q.applyTransitionDelay=la(c.delay)&&(q.applyTransitionDuration||q.hasTransitions);q.applyAnimationDelay=la(c.delay)&&q.hasAnimations;q.recalculateTimingStyles=0<N.length;if(q.applyTransitionDuration||q.applyAnimationDuration)J=c.duration?parseFloat(c.duration):J,q.applyTransitionDuration&&(q.hasTransitions=!0,y.transitionDuration=
41 | J,v=0<g.style[O+"Property"].length,l.push(Aa(J,v))),q.applyAnimationDuration&&(q.hasAnimations=!0,y.animationDuration=J,l.push([sa,J+"s"]));if(0===J&&!q.recalculateTimingStyles)return x();null==c.duration&&0<y.transitionDuration&&(q.recalculateTimingStyles=q.recalculateTimingStyles||aa);F=1E3*H;G=1E3*J;c.skipBlocking||(q.blockTransition=0<y.transitionDuration,q.blockKeyframeAnimation=0<y.animationDuration&&0<T.animationDelay&&0===T.animationDuration);wa(a,c);q.blockTransition||ja(g,!1);L(J);return{$$willAnimate:!0,
42 | end:d,start:function(){if(!K)return t={end:d,cancel:h,resume:null,pause:null},p=new s(t),I(M),p}}}}]}]).provider("$$animateCssDriver",["$$animationProvider",function(a){a.drivers.push("$$animateCssDriver");this.$get=["$animateCss","$rootScope","$$AnimateRunner","$rootElement","$document","$sniffer",function(a,c,d,e,s,n){function h(a){return a.replace(/\bng-\S+\b/g,"")}function k(a,b){U(a)&&(a=a.split(" "));U(b)&&(b=b.split(" "));return a.filter(function(a){return-1===b.indexOf(a)}).join(" ")}function D(c,
43 | e,A){function D(a){var b={},c=z(a).getBoundingClientRect();u(["width","height","top","left"],function(a){var d=c[a];switch(a){case "top":d+=I.scrollTop;break;case "left":d+=I.scrollLeft}b[a]=Math.floor(d)+"px"});return b}function s(){var c=h(A.attr("class")||""),d=k(c,t),c=k(t,c),d=a(n,{to:D(A),addClass:"ng-anchor-in "+d,removeClass:"ng-anchor-out "+c,delay:!0});return d.$$willAnimate?d:null}function f(){n.remove();e.removeClass("ng-animate-shim");A.removeClass("ng-animate-shim")}var n=G(z(e).cloneNode(!0)),
44 | t=h(n.attr("class")||"");e.addClass("ng-animate-shim");A.addClass("ng-animate-shim");n.addClass("ng-anchor");w.append(n);var m;c=function(){var c=a(n,{addClass:"ng-anchor-out",delay:!0,from:D(e)});return c.$$willAnimate?c:null}();if(!c&&(m=s(),!m))return f();var L=c||m;return{start:function(){function a(){c&&c.end()}var b,c=L.start();c.done(function(){c=null;if(!m&&(m=s()))return c=m.start(),c.done(function(){c=null;f();b.complete()}),c;f();b.complete()});return b=new d({end:a,cancel:a})}}}function A(a,
45 | b,c,e){var h=t(a),f=t(b),k=[];u(e,function(a){(a=D(c,a.out,a["in"]))&&k.push(a)});if(h||f||0!==k.length)return{start:function(){function a(){u(b,function(a){a.end()})}var b=[];h&&b.push(h.start());f&&b.push(f.start());u(k,function(a){b.push(a.start())});var c=new d({end:a,cancel:a});d.all(b,function(a){c.complete(a)});return c}}}function t(c){var d=c.element,e=c.options||{};c.structural?(e.structural=e.applyClassesEarly=!0,e.event=c.event,"leave"===e.event&&(e.onDone=e.domOperation)):e.event=null;
46 | c=a(d,e);return c.$$willAnimate?c:null}if(!n.animations&&!n.transitions)return H;var I=z(s).body;c=z(e);var w=G(I.parentNode===c?I:c);return function(a){return a.from&&a.to?A(a.from,a.to,a.classes,a.anchors):t(a)}}]}]).provider("$$animateJs",["$animateProvider",function(a){this.$get=["$injector","$$AnimateRunner","$$rAFMutex","$$jqLite",function(b,c,d,e){function s(c){c=X(c)?c:c.split(" ");for(var d=[],e={},A=0;A<c.length;A++){var n=c[A],s=a.$$registeredAnimations[n];s&&!e[n]&&(d.push(b.get(s)),e[n]=
47 | !0)}return d}var n=ha(e);return function(a,b,d,e){function t(){e.domOperation();n(a,e)}function z(a,b,d,e,g){switch(d){case "animate":b=[b,e.from,e.to,g];break;case "setClass":b=[b,r,K,g];break;case "addClass":b=[b,r,g];break;case "removeClass":b=[b,K,g];break;default:b=[b,g]}b.push(e);if(a=a.apply(a,b))if(Ca(a.start)&&(a=a.start()),a instanceof c)a.done(g);else if(Ca(a))return a;return H}function w(a,b,d,e,g){var f=[];u(e,function(e){var h=e[g];h&&f.push(function(){var e,g,f=!1,l=function(a){f||
48 | (f=!0,(g||H)(a),e.complete(!a))};e=new c({end:function(){l()},cancel:function(){l(!0)}});g=z(h,a,b,d,function(a){l(!1===a)});return e})});return f}function B(a,b,d,e,g){var f=w(a,b,d,e,g);if(0===f.length){var h,k;"beforeSetClass"===g?(h=w(a,"removeClass",d,e,"beforeRemoveClass"),k=w(a,"addClass",d,e,"beforeAddClass")):"setClass"===g&&(h=w(a,"removeClass",d,e,"removeClass"),k=w(a,"addClass",d,e,"addClass"));h&&(f=f.concat(h));k&&(f=f.concat(k))}if(0!==f.length)return function(a){var b=[];f.length&&
49 | u(f,function(a){b.push(a())});b.length?c.all(b,a):a();return function(a){u(b,function(b){a?b.cancel():b.end()})}}}3===arguments.length&&na(d)&&(e=d,d=null);e=ia(e);d||(d=a.attr("class")||"",e.addClass&&(d+=" "+e.addClass),e.removeClass&&(d+=" "+e.removeClass));var r=e.addClass,K=e.removeClass,C=s(d),E,f;if(C.length){var F,G;"leave"==b?(G="leave",F="afterLeave"):(G="before"+b.charAt(0).toUpperCase()+b.substr(1),F=b);"enter"!==b&&"move"!==b&&(E=B(a,b,e,C,G));f=B(a,b,e,C,F)}if(E||f)return{start:function(){function b(c){n=
50 | !0;t();ca(a,e);g.complete(c)}var d,k=[];E&&k.push(function(a){d=E(a)});k.length?k.push(function(a){t();a(!0)}):t();f&&k.push(function(a){d=f(a)});var n=!1,g=new c({end:function(){n||((d||H)(void 0),b(void 0))},cancel:function(){n||((d||H)(!0),b(!0))}});c.chain(k,b);return g}}}}]}]).provider("$$animateJsDriver",["$$animationProvider",function(a){a.drivers.push("$$animateJsDriver");this.$get=["$$animateJs","$$AnimateRunner",function(a,c){function d(c){return a(c.element,c.event,c.classes,c.options)}
51 | return function(a){if(a.from&&a.to){var b=d(a.from),n=d(a.to);if(b||n)return{start:function(){function a(){return function(){u(d,function(a){a.end()})}}var d=[];b&&d.push(b.start());n&&d.push(n.start());c.all(d,function(a){e.complete(a)});var e=new c({end:a(),cancel:a()});return e}}}else return d(a)}}]}])})(window,window.angular);
52 | //# sourceMappingURL=angular-animate.min.js.map
53 | 


--------------------------------------------------------------------------------
/example/lib/ionic/js/angular/angular-resource.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  AngularJS v1.4.3
 3 |  (c) 2010-2015 Google, Inc. http://angularjs.org
 4 |  License: MIT
 5 | */
 6 | (function(I,d,B){'use strict';function D(f,q){q=q||{};d.forEach(q,function(d,h){delete q[h]});for(var h in f)!f.hasOwnProperty(h)||"$"===h.charAt(0)&&"$"===h.charAt(1)||(q[h]=f[h]);return q}var x=d.$$minErr("$resource"),C=/^(\.[a-zA-Z_$@][0-9a-zA-Z_$@]*)+$/;d.module("ngResource",["ng"]).provider("$resource",function(){var f=this;this.defaults={stripTrailingSlashes:!0,actions:{get:{method:"GET"},save:{method:"POST"},query:{method:"GET",isArray:!0},remove:{method:"DELETE"},"delete":{method:"DELETE"}}};
 7 | this.$get=["$http","$q",function(q,h){function u(d,g){this.template=d;this.defaults=s({},f.defaults,g);this.urlParams={}}function w(y,g,l,m){function c(b,k){var c={};k=s({},g,k);r(k,function(a,k){v(a)&&(a=a());var d;if(a&&a.charAt&&"@"==a.charAt(0)){d=b;var e=a.substr(1);if(null==e||""===e||"hasOwnProperty"===e||!C.test("."+e))throw x("badmember",e);for(var e=e.split("."),n=0,g=e.length;n<g&&d!==B;n++){var h=e[n];d=null!==d?d[h]:B}}else d=a;c[k]=d});return c}function F(b){return b.resource}function e(b){D(b||
 8 | {},this)}var G=new u(y,m);l=s({},f.defaults.actions,l);e.prototype.toJSON=function(){var b=s({},this);delete b.$promise;delete b.$resolved;return b};r(l,function(b,k){var g=/^(POST|PUT|PATCH)$/i.test(b.method);e[k]=function(a,z,m,y){var n={},f,l,A;switch(arguments.length){case 4:A=y,l=m;case 3:case 2:if(v(z)){if(v(a)){l=a;A=z;break}l=z;A=m}else{n=a;f=z;l=m;break}case 1:v(a)?l=a:g?f=a:n=a;break;case 0:break;default:throw x("badargs",arguments.length);}var u=this instanceof e,p=u?f:b.isArray?[]:new e(f),
 9 | t={},w=b.interceptor&&b.interceptor.response||F,C=b.interceptor&&b.interceptor.responseError||B;r(b,function(b,a){"params"!=a&&"isArray"!=a&&"interceptor"!=a&&(t[a]=H(b))});g&&(t.data=f);G.setUrlParams(t,s({},c(f,b.params||{}),n),b.url);n=q(t).then(function(a){var c=a.data,g=p.$promise;if(c){if(d.isArray(c)!==!!b.isArray)throw x("badcfg",k,b.isArray?"array":"object",d.isArray(c)?"array":"object",t.method,t.url);b.isArray?(p.length=0,r(c,function(a){"object"===typeof a?p.push(new e(a)):p.push(a)})):
10 | (D(c,p),p.$promise=g)}p.$resolved=!0;a.resource=p;return a},function(a){p.$resolved=!0;(A||E)(a);return h.reject(a)});n=n.then(function(a){var b=w(a);(l||E)(b,a.headers);return b},C);return u?n:(p.$promise=n,p.$resolved=!1,p)};e.prototype["$"+k]=function(a,b,c){v(a)&&(c=b,b=a,a={});a=e[k].call(this,a,this,b,c);return a.$promise||a}});e.bind=function(b){return w(y,s({},g,b),l)};return e}var E=d.noop,r=d.forEach,s=d.extend,H=d.copy,v=d.isFunction;u.prototype={setUrlParams:function(f,g,l){var m=this,
11 | c=l||m.template,h,e,q=m.urlParams={};r(c.split(/\W/),function(b){if("hasOwnProperty"===b)throw x("badname");!/^\d+$/.test(b)&&b&&(new RegExp("(^|[^\\\\]):"+b+"(\\W|$)")).test(c)&&(q[b]=!0)});c=c.replace(/\\:/g,":");g=g||{};r(m.urlParams,function(b,k){h=g.hasOwnProperty(k)?g[k]:m.defaults[k];d.isDefined(h)&&null!==h?(e=encodeURIComponent(h).replace(/%40/gi,"@").replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,"%20").replace(/%26/gi,"&").replace(/%3D/gi,"=").replace(/%2B/gi,
12 | "+"),c=c.replace(new RegExp(":"+k+"(\\W|$)","g"),function(b,a){return e+a})):c=c.replace(new RegExp("(/?):"+k+"(\\W|$)","g"),function(b,a,c){return"/"==c.charAt(0)?c:a+c})});m.defaults.stripTrailingSlashes&&(c=c.replace(/\/+$/,"")||"/");c=c.replace(/\/\.(?=\w+($|\?))/,".");f.url=c.replace(/\/\\\./,"/.");r(g,function(b,c){m.urlParams[c]||(f.params=f.params||{},f.params[c]=b)})}};return w}]})})(window,window.angular);
13 | //# sourceMappingURL=angular-resource.min.js.map
14 | 


--------------------------------------------------------------------------------
/example/lib/ionic/js/angular/angular-sanitize.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  AngularJS v1.4.3
 3 |  (c) 2010-2015 Google, Inc. http://angularjs.org
 4 |  License: MIT
 5 | */
 6 | (function(n,h,p){'use strict';function E(a){var f=[];r(f,h.noop).chars(a);return f.join("")}function g(a,f){var d={},c=a.split(","),b;for(b=0;b<c.length;b++)d[f?h.lowercase(c[b]):c[b]]=!0;return d}function F(a,f){function d(a,b,d,l){b=h.lowercase(b);if(s[b])for(;e.last()&&t[e.last()];)c("",e.last());u[b]&&e.last()==b&&c("",b);(l=v[b]||!!l)||e.push(b);var m={};d.replace(G,function(b,a,f,c,d){m[a]=q(f||c||d||"")});f.start&&f.start(b,m,l)}function c(b,a){var c=0,d;if(a=h.lowercase(a))for(c=e.length-
 7 | 1;0<=c&&e[c]!=a;c--);if(0<=c){for(d=e.length-1;d>=c;d--)f.end&&f.end(e[d]);e.length=c}}"string"!==typeof a&&(a=null===a||"undefined"===typeof a?"":""+a);var b,k,e=[],m=a,l;for(e.last=function(){return e[e.length-1]};a;){l="";k=!0;if(e.last()&&w[e.last()])a=a.replace(new RegExp("([\\W\\w]*)<\\s*\\/\\s*"+e.last()+"[^>]*>","i"),function(a,b){b=b.replace(H,"$1").replace(I,"$1");f.chars&&f.chars(q(b));return""}),c("",e.last());else{if(0===a.indexOf("\x3c!--"))b=a.indexOf("--",4),0<=b&&a.lastIndexOf("--\x3e",
 8 | b)===b&&(f.comment&&f.comment(a.substring(4,b)),a=a.substring(b+3),k=!1);else if(x.test(a)){if(b=a.match(x))a=a.replace(b[0],""),k=!1}else if(J.test(a)){if(b=a.match(y))a=a.substring(b[0].length),b[0].replace(y,c),k=!1}else K.test(a)&&((b=a.match(z))?(b[4]&&(a=a.substring(b[0].length),b[0].replace(z,d)),k=!1):(l+="<",a=a.substring(1)));k&&(b=a.indexOf("<"),l+=0>b?a:a.substring(0,b),a=0>b?"":a.substring(b),f.chars&&f.chars(q(l)))}if(a==m)throw L("badparse",a);m=a}c()}function q(a){if(!a)return"";A.innerHTML=
 9 | a.replace(/</g,"&lt;");return A.textContent}function B(a){return a.replace(/&/g,"&amp;").replace(M,function(a){var d=a.charCodeAt(0);a=a.charCodeAt(1);return"&#"+(1024*(d-55296)+(a-56320)+65536)+";"}).replace(N,function(a){return"&#"+a.charCodeAt(0)+";"}).replace(/</g,"&lt;").replace(/>/g,"&gt;")}function r(a,f){var d=!1,c=h.bind(a,a.push);return{start:function(a,k,e){a=h.lowercase(a);!d&&w[a]&&(d=a);d||!0!==C[a]||(c("<"),c(a),h.forEach(k,function(d,e){var k=h.lowercase(e),g="img"===a&&"src"===k||
10 | "background"===k;!0!==O[k]||!0===D[k]&&!f(d,g)||(c(" "),c(e),c('="'),c(B(d)),c('"'))}),c(e?"/>":">"))},end:function(a){a=h.lowercase(a);d||!0!==C[a]||(c("</"),c(a),c(">"));a==d&&(d=!1)},chars:function(a){d||c(B(a))}}}var L=h.$$minErr("$sanitize"),z=/^<((?:[a-zA-Z])[\w:-]*)((?:\s+[\w:-]+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)\s*(>?)/,y=/^<\/\s*([\w:-]+)[^>]*>/,G=/([\w:-]+)(?:\s*=\s*(?:(?:"((?:[^"])*)")|(?:'((?:[^'])*)')|([^>\s]+)))?/g,K=/^</,J=/^<\//,H=/\x3c!--(.*?)--\x3e/g,x=/<!DOCTYPE([^>]*?)>/i,
11 | I=/<!\[CDATA\[(.*?)]]\x3e/g,M=/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,N=/([^\#-~| |!])/g,v=g("area,br,col,hr,img,wbr");n=g("colgroup,dd,dt,li,p,tbody,td,tfoot,th,thead,tr");p=g("rp,rt");var u=h.extend({},p,n),s=h.extend({},n,g("address,article,aside,blockquote,caption,center,del,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5,h6,header,hgroup,hr,ins,map,menu,nav,ol,pre,script,section,table,ul")),t=h.extend({},p,g("a,abbr,acronym,b,bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,q,ruby,rp,rt,s,samp,small,span,strike,strong,sub,sup,time,tt,u,var"));
12 | n=g("circle,defs,desc,ellipse,font-face,font-face-name,font-face-src,g,glyph,hkern,image,linearGradient,line,marker,metadata,missing-glyph,mpath,path,polygon,polyline,radialGradient,rect,stop,svg,switch,text,title,tspan,use");var w=g("script,style"),C=h.extend({},v,s,t,u,n),D=g("background,cite,href,longdesc,src,usemap,xlink:href");n=g("abbr,align,alt,axis,bgcolor,border,cellpadding,cellspacing,class,clear,color,cols,colspan,compact,coords,dir,face,headers,height,hreflang,hspace,ismap,lang,language,nohref,nowrap,rel,rev,rows,rowspan,rules,scope,scrolling,shape,size,span,start,summary,tabindex,target,title,type,valign,value,vspace,width");
13 | p=g("accent-height,accumulate,additive,alphabetic,arabic-form,ascent,baseProfile,bbox,begin,by,calcMode,cap-height,class,color,color-rendering,content,cx,cy,d,dx,dy,descent,display,dur,end,fill,fill-rule,font-family,font-size,font-stretch,font-style,font-variant,font-weight,from,fx,fy,g1,g2,glyph-name,gradientUnits,hanging,height,horiz-adv-x,horiz-origin-x,ideographic,k,keyPoints,keySplines,keyTimes,lang,marker-end,marker-mid,marker-start,markerHeight,markerUnits,markerWidth,mathematical,max,min,offset,opacity,orient,origin,overline-position,overline-thickness,panose-1,path,pathLength,points,preserveAspectRatio,r,refX,refY,repeatCount,repeatDur,requiredExtensions,requiredFeatures,restart,rotate,rx,ry,slope,stemh,stemv,stop-color,stop-opacity,strikethrough-position,strikethrough-thickness,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,systemLanguage,target,text-anchor,to,transform,type,u1,u2,underline-position,underline-thickness,unicode,unicode-range,units-per-em,values,version,viewBox,visibility,width,widths,x,x-height,x1,x2,xlink:actuate,xlink:arcrole,xlink:role,xlink:show,xlink:title,xlink:type,xml:base,xml:lang,xml:space,xmlns,xmlns:xlink,y,y1,y2,zoomAndPan",
14 | !0);var O=h.extend({},D,p,n),A=document.createElement("pre");h.module("ngSanitize",[]).provider("$sanitize",function(){this.$get=["$$sanitizeUri",function(a){return function(f){var d=[];F(f,r(d,function(c,b){return!/^unsafe/.test(a(c,b))}));return d.join("")}}]});h.module("ngSanitize").filter("linky",["$sanitize",function(a){var f=/((ftp|https?):\/\/|(www\.)|(mailto:)?[A-Za-z0-9._%+-]+@)\S*[^\s.;,(){}<>"\u201d\u2019]/i,d=/^mailto:/i;return function(c,b){function k(a){a&&g.push(E(a))}function e(a,
15 | c){g.push("<a ");h.isDefined(b)&&g.push('target="',b,'" ');g.push('href="',a.replace(/"/g,"&quot;"),'">');k(c);g.push("</a>")}if(!c)return c;for(var m,l=c,g=[],n,p;m=l.match(f);)n=m[0],m[2]||m[4]||(n=(m[3]?"http://":"mailto:")+n),p=m.index,k(l.substr(0,p)),e(n,m[0].replace(d,"")),l=l.substring(p+m[0].length);k(l);return a(g.join(""))}}])})(window,window.angular);
16 | //# sourceMappingURL=angular-sanitize.min.js.map
17 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_action-sheet.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Action Sheets
  3 |  * --------------------------------------------------
  4 |  */
  5 | 
  6 | .action-sheet-backdrop {
  7 |   @include transition(background-color 150ms ease-in-out);
  8 |   position: fixed;
  9 |   top: 0;
 10 |   left: 0;
 11 |   z-index: $z-index-action-sheet;
 12 |   width: 100%;
 13 |   height: 100%;
 14 |   background-color: rgba(0,0,0,0);
 15 | 
 16 |   &.active {
 17 |     background-color: rgba(0,0,0,0.4);
 18 |   }
 19 | }
 20 | 
 21 | .action-sheet-wrapper {
 22 |   @include translate3d(0, 100%, 0);
 23 |   @include transition(all cubic-bezier(.36, .66, .04, 1) 500ms);
 24 |   position: absolute;
 25 |   bottom: 0;
 26 |   left: 0;
 27 |   right: 0;
 28 |   width: 100%;
 29 |   max-width: 500px;
 30 |   margin: auto;
 31 | }
 32 | 
 33 | .action-sheet-up {
 34 |   @include translate3d(0, 0, 0);
 35 | }
 36 | 
 37 | .action-sheet {
 38 |   margin-left: $sheet-margin;
 39 |   margin-right: $sheet-margin;
 40 |   width: auto;
 41 |   z-index: $z-index-action-sheet;
 42 |   overflow: hidden;
 43 | 
 44 |   .button {
 45 |     display: block;
 46 |     padding: 1px;
 47 |     width: 100%;
 48 |     border-radius: 0;
 49 |     border-color: $sheet-options-border-color;
 50 |     background-color: transparent;
 51 | 
 52 |     color: $sheet-options-text-color;
 53 |     font-size: 21px;
 54 | 
 55 |     &:hover {
 56 |       color: $sheet-options-text-color;
 57 |     }
 58 |     &.destructive {
 59 |       color: #ff3b30;
 60 |       &:hover {
 61 |         color: #ff3b30;
 62 |       }
 63 |     }
 64 |   }
 65 | 
 66 |   .button.active, .button.activated {
 67 |     box-shadow: none;
 68 |     border-color: $sheet-options-border-color;
 69 |     color: $sheet-options-text-color;
 70 |     background: $sheet-options-bg-active-color;
 71 |   }
 72 | }
 73 | 
 74 | .action-sheet-has-icons .icon {
 75 |   position: absolute;
 76 |   left: 16px;
 77 | }
 78 | 
 79 | .action-sheet-title {
 80 |   padding: $sheet-margin * 2;
 81 |   color: #8f8f8f;
 82 |   text-align: center;
 83 |   font-size: 13px;
 84 | }
 85 | 
 86 | .action-sheet-group {
 87 |   margin-bottom: $sheet-margin;
 88 |   border-radius: $sheet-border-radius;
 89 |   background-color: #fff;
 90 |   overflow: hidden;
 91 | 
 92 |   .button {
 93 |     border-width: 1px 0px 0px 0px;
 94 |   }
 95 |   .button:first-child:last-child {
 96 |     border-width: 0;
 97 |   }
 98 | }
 99 | 
100 | .action-sheet-options {
101 |   background: $sheet-options-bg-color;
102 | }
103 | 
104 | .action-sheet-cancel {
105 |   .button {
106 |     font-weight: 500;
107 |   }
108 | }
109 | 
110 | .action-sheet-open {
111 |   pointer-events: none;
112 | 
113 |   &.modal-open .modal {
114 |     pointer-events: none;
115 |   }
116 | 
117 |   .action-sheet-backdrop {
118 |     pointer-events: auto;
119 |   }
120 | }
121 | 
122 | 
123 | .platform-android {
124 | 
125 |   .action-sheet-backdrop.active {
126 |     background-color: rgba(0,0,0,0.2);
127 |   }
128 | 
129 |   .action-sheet {
130 |     margin: 0;
131 | 
132 |     .action-sheet-title,
133 |     .button {
134 |       text-align: left;
135 |       border-color: transparent;
136 |       font-size: 16px;
137 |       color: inherit;
138 |     }
139 | 
140 |     .action-sheet-title {
141 |       font-size: 14px;
142 |       padding: 16px;
143 |       color: #666;
144 |     }
145 | 
146 |     .button.active,
147 |     .button.activated {
148 |       background: #e8e8e8;
149 |     }
150 |   }
151 | 
152 |   .action-sheet-group {
153 |     margin: 0;
154 |     border-radius: 0;
155 |     background-color: #fafafa;
156 |   }
157 | 
158 |   .action-sheet-cancel {
159 |     display: none;
160 |   }
161 | 
162 |   .action-sheet-has-icons {
163 | 
164 |     .button {
165 |       padding-left: 56px;
166 |     }
167 | 
168 |   }
169 | 
170 | }
171 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_animations.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | // Slide up from the bottom, used for modals
 3 | // -------------------------------
 4 | 
 5 | .slide-in-up {
 6 |   @include translate3d(0, 100%, 0);
 7 | }
 8 | .slide-in-up.ng-enter,
 9 | .slide-in-up > .ng-enter {
10 |   @include transition(all cubic-bezier(.1, .7, .1, 1) 400ms);
11 | }
12 | .slide-in-up.ng-enter-active,
13 | .slide-in-up > .ng-enter-active {
14 |   @include translate3d(0, 0, 0);
15 | }
16 | 
17 | .slide-in-up.ng-leave,
18 | .slide-in-up > .ng-leave {
19 |   @include transition(all ease-in-out 250ms);
20 | }
21 | 
22 | 
23 | // Scale Out
24 | // Scale from hero (1 in this case) to zero
25 | // -------------------------------
26 | 
27 | @-webkit-keyframes scaleOut {
28 |   from { -webkit-transform: scale(1); opacity: 1; }
29 |   to { -webkit-transform: scale(0.8); opacity: 0; }
30 | }
31 | @keyframes scaleOut {
32 |   from { transform: scale(1); opacity: 1; }
33 |   to { transform: scale(0.8); opacity: 0; }
34 | }
35 | 
36 | 
37 | // Super Scale In
38 | // Scale from super (1.x) to duper (1 in this case)
39 | // -------------------------------
40 | 
41 | @-webkit-keyframes superScaleIn {
42 |   from { -webkit-transform: scale(1.2); opacity: 0; }
43 |   to { -webkit-transform: scale(1); opacity: 1 }
44 | }
45 | @keyframes superScaleIn {
46 |   from { transform: scale(1.2); opacity: 0; }
47 |   to { transform: scale(1); opacity: 1; }
48 | }
49 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_backdrop.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | .backdrop {
 3 |   position: fixed;
 4 |   top: 0;
 5 |   left: 0;
 6 |   z-index: $z-index-backdrop;
 7 | 
 8 |   width: 100%;
 9 |   height: 100%;
10 | 
11 |   background-color: $loading-backdrop-bg-color;
12 | 
13 |   visibility: hidden;
14 |   opacity: 0;
15 | 
16 |   &.visible {
17 |     visibility: visible;
18 |   }
19 |   &.active {
20 |     opacity: 1;
21 |   }
22 | 
23 |   @include transition($loading-backdrop-fadein-duration opacity linear);
24 | }
25 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_badge.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Badges
 4 |  * --------------------------------------------------
 5 |  */
 6 | 
 7 | .badge {
 8 |   @include badge-style($badge-default-bg, $badge-default-text);
 9 |   z-index: $z-index-badge;
10 |   display: inline-block;
11 |   padding: 3px 8px;
12 |   min-width: 10px;
13 |   border-radius: $badge-border-radius;
14 |   vertical-align: baseline;
15 |   text-align: center;
16 |   white-space: nowrap;
17 |   font-weight: $badge-font-weight;
18 |   font-size: $badge-font-size;
19 |   line-height: $badge-line-height;
20 | 
21 |   &:empty {
22 |     display: none;
23 |   }
24 | }
25 | 
26 | //Be sure to override specificity of rule that 'badge color matches tab color by default'
27 | .tabs .tab-item .badge,
28 | .badge {
29 |   &.badge-light {
30 |     @include badge-style($badge-light-bg, $badge-light-text);
31 |   }
32 |   &.badge-stable {
33 |     @include badge-style($badge-stable-bg, $badge-stable-text);
34 |   }
35 |   &.badge-positive {
36 |     @include badge-style($badge-positive-bg, $badge-positive-text);
37 |   }
38 |   &.badge-calm {
39 |     @include badge-style($badge-calm-bg, $badge-calm-text);
40 |   }
41 |   &.badge-assertive {
42 |     @include badge-style($badge-assertive-bg, $badge-assertive-text);
43 |   }
44 |   &.badge-balanced {
45 |     @include badge-style($badge-balanced-bg, $badge-balanced-text);
46 |   }
47 |   &.badge-energized {
48 |     @include badge-style($badge-energized-bg, $badge-energized-text);
49 |   }
50 |   &.badge-royal {
51 |     @include badge-style($badge-royal-bg, $badge-royal-text);
52 |   }
53 |   &.badge-dark {
54 |     @include badge-style($badge-dark-bg, $badge-dark-text);
55 |   }
56 | }
57 | 
58 | // Quick fix for labels/badges in buttons
59 | .button .badge {
60 |   position: relative;
61 |   top: -1px;
62 | }
63 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_bar.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Bar (Headers and Footers)
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | .bar {
  8 |   @include display-flex();
  9 |   @include translate3d(0,0,0);
 10 |   @include user-select(none);
 11 |   position: absolute;
 12 |   right: 0;
 13 |   left: 0;
 14 |   z-index: $z-index-bar;
 15 | 
 16 |   @include box-sizing(border-box);
 17 |   padding: $bar-padding-portrait;
 18 | 
 19 |   width: 100%;
 20 |   height: $bar-height;
 21 |   border-width: 0;
 22 |   border-style: solid;
 23 |   border-top: 1px solid transparent;
 24 |   border-bottom: 1px solid $bar-default-border;
 25 | 
 26 |   background-color: $bar-default-bg;
 27 | 
 28 |   /* border-width: 1px will actually create 2 device pixels on retina */
 29 |   /* this nifty trick sets an actual 1px border on hi-res displays */
 30 |   background-size: 0;
 31 |   @media (min--moz-device-pixel-ratio: 1.5),
 32 |          (-webkit-min-device-pixel-ratio: 1.5),
 33 |          (min-device-pixel-ratio: 1.5),
 34 |          (min-resolution: 144dpi),
 35 |          (min-resolution: 1.5dppx) {
 36 |     border: none;
 37 |     background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%);
 38 |     background-position: bottom;
 39 |     background-size: 100% 1px;
 40 |     background-repeat: no-repeat;
 41 |   }
 42 | 
 43 |   &.bar-clear {
 44 |     border: none;
 45 |     background: none;
 46 |     color: #fff;
 47 | 
 48 |     .button {
 49 |       color: #fff;
 50 |     }
 51 |     .title {
 52 |       color: #fff;
 53 |     }
 54 |   }
 55 | 
 56 |   &.item-input-inset {
 57 |     .item-input-wrapper {
 58 |       margin-top: -1px;
 59 | 
 60 |       input {
 61 |         padding-left: 8px;
 62 |         width: 94%;
 63 |         height: 28px;
 64 |         background: transparent;
 65 |       }
 66 |     }
 67 |   }
 68 | 
 69 |   &.bar-light {
 70 |     @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
 71 |     &.bar-footer{
 72 |       background-image: linear-gradient(180deg, $bar-light-border, $bar-light-border 50%, transparent 50%);
 73 |     }
 74 |   }
 75 |   &.bar-stable {
 76 |     @include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text);
 77 |     &.bar-footer{
 78 |       background-image: linear-gradient(180deg, $bar-stable-border, $bar-stable-border 50%, transparent 50%);
 79 |     }
 80 |   }
 81 |   &.bar-positive {
 82 |     @include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text);
 83 |     &.bar-footer{
 84 |       background-image: linear-gradient(180deg, $bar-positive-border, $bar-positive-border 50%, transparent 50%);
 85 |     }
 86 |   }
 87 |   &.bar-calm {
 88 |     @include bar-style($bar-calm-bg, $bar-calm-border, $bar-calm-text);
 89 |     &.bar-footer{
 90 |       background-image: linear-gradient(180deg, $bar-calm-border, $bar-calm-border 50%, transparent 50%);
 91 |     }
 92 |   }
 93 |   &.bar-assertive {
 94 |     @include bar-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-text);
 95 |     &.bar-footer{
 96 |       background-image: linear-gradient(180deg, $bar-assertive-border, $bar-assertive-border 50%, transparent 50%);
 97 |     }
 98 |   }
 99 |   &.bar-balanced {
100 |     @include bar-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-text);
101 |     &.bar-footer{
102 |       background-image: linear-gradient(180deg, $bar-balanced-border, $bar-positive-border 50%, transparent 50%);
103 |     }
104 |   }
105 |   &.bar-energized {
106 |     @include bar-style($bar-energized-bg, $bar-energized-border, $bar-energized-text);
107 |     &.bar-footer{
108 |       background-image: linear-gradient(180deg, $bar-energized-border, $bar-energized-border 50%, transparent 50%);
109 |     }
110 |   }
111 |   &.bar-royal {
112 |     @include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
113 |     &.bar-footer{
114 |       background-image: linear-gradient(180deg, $bar-royal-border, $bar-royal-border 50%, transparent 50%);
115 |     }
116 |   }
117 |   &.bar-dark {
118 |     @include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
119 |     &.bar-footer{
120 |       background-image: linear-gradient(180deg, $bar-dark-border, $bar-dark-border 50%, transparent 50%);
121 |     }
122 |   }
123 | 
124 |   // Title inside of a bar is centered
125 |   .title {
126 |     position: absolute;
127 | 
128 |     top: 0;
129 |     right: 0;
130 |     left: 0;
131 |     z-index: $z-index-bar-title;
132 |     overflow: hidden;
133 | 
134 |     margin: 0 10px;
135 | 
136 |     min-width: 30px;
137 |     height: $bar-height - 1;
138 | 
139 |     text-align: center;
140 | 
141 |     // Go into ellipsis if too small
142 |     text-overflow: ellipsis;
143 |     white-space: nowrap;
144 | 
145 |     font-size: $bar-title-font-size;
146 |     font-weight: $headings-font-weight;
147 | 
148 |     line-height: $bar-height;
149 | 
150 |     &.title-left {
151 |       text-align: left;
152 |     }
153 |     &.title-right {
154 |       text-align: right;
155 |     }
156 |   }
157 | 
158 |   .title a {
159 |     color: inherit;
160 |   }
161 | 
162 |   .button {
163 |     z-index: $z-index-bar-button;
164 |     padding: 0 $button-bar-button-padding;
165 |     min-width: initial;
166 |     min-height: $button-bar-button-height - 1;
167 |     font-weight: 400;
168 |     font-size: $button-bar-button-font-size;
169 |     line-height: $button-bar-button-height;
170 | 
171 |     &.button-icon:before,
172 |     .icon:before,
173 |     &.icon:before,
174 |     &.icon-left:before,
175 |     &.icon-right:before {
176 |       padding-right: 2px;
177 |       padding-left: 2px;
178 |       font-size: $button-bar-button-icon-size;
179 |       line-height: $button-bar-button-height;
180 |     }
181 | 
182 |     &.button-icon {
183 |       font-size: $bar-title-font-size;
184 |       .icon:before,
185 |       &:before,
186 |       &.icon-left:before,
187 |       &.icon-right:before {
188 |         vertical-align: top;
189 |         font-size: $button-large-icon-size;
190 |         line-height: $button-bar-button-height;
191 |       }
192 |     }
193 |     &.button-clear {
194 |       padding-right: 2px;
195 |       padding-left: 2px;
196 |       font-weight: 300;
197 |       font-size: $bar-title-font-size;
198 | 
199 |       .icon:before,
200 |       &.icon:before,
201 |       &.icon-left:before,
202 |       &.icon-right:before {
203 |         font-size: $button-large-icon-size;
204 |         line-height: $button-bar-button-height;
205 |       }
206 |     }
207 | 
208 |     &.back-button {
209 |       display: block;
210 |       margin-right: 5px;
211 |       padding: 0;
212 |       white-space: nowrap;
213 |       font-weight: 400;
214 |     }
215 | 
216 |     &.back-button.active,
217 |     &.back-button.activated {
218 |       opacity: 0.2;
219 |     }
220 |   }
221 | 
222 |   .button-bar > .button,
223 |   .buttons > .button {
224 |     min-height: $button-bar-button-height - 1;
225 |     line-height: $button-bar-button-height;
226 |   }
227 | 
228 |   .button-bar + .button,
229 |   .button + .button-bar {
230 |     margin-left: 5px;
231 |   }
232 | 
233 |   // Android 4.4 messes with the display property
234 |   .buttons,
235 |   .buttons.primary-buttons,
236 |   .buttons.secondary-buttons {
237 |     display: inherit;
238 |   }
239 |   .buttons span {
240 |     display: inline-block;
241 |   }
242 |   .buttons-left span {
243 |     margin-right: 5px;
244 |     display: inherit;
245 |   }
246 |   .buttons-right span {
247 |     margin-left: 5px;
248 |     display: inherit;
249 |   }
250 | 
251 |   // Place the last button in a bar on the right of the bar
252 |   .title + .button:last-child,
253 |   > .button + .button:last-child,
254 |   > .button.pull-right,
255 |   .buttons.pull-right,
256 |   .title + .buttons {
257 |     position: absolute;
258 |     top: 5px;
259 |     right: 5px;
260 |     bottom: 5px;
261 |   }
262 | 
263 | }
264 | 
265 | .platform-android {
266 | 
267 |   .nav-bar-has-subheader .bar {
268 |     background-image: none;
269 |   }
270 | 
271 |   .bar {
272 | 
273 |     .back-button .icon:before {
274 |       font-size: 24px;
275 |     }
276 | 
277 |     .title {
278 |       font-size: 19px;
279 |       line-height: $bar-height;
280 |     }
281 |   }
282 | 
283 | }
284 | 
285 | // Default styles for buttons inside of styled bars
286 | .bar-light {
287 |   .button {
288 |     @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
289 |     @include button-clear($bar-light-text, $bar-title-font-size);
290 |   }
291 | }
292 | .bar-stable {
293 |   .button {
294 |     @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text);
295 |     @include button-clear($bar-stable-text, $bar-title-font-size);
296 |   }
297 | }
298 | .bar-positive {
299 |   .button {
300 |     @include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text);
301 |     @include button-clear(#fff, $bar-title-font-size);
302 |   }
303 | }
304 | .bar-calm {
305 |   .button {
306 |     @include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text);
307 |     @include button-clear(#fff, $bar-title-font-size);
308 |   }
309 | }
310 | .bar-assertive {
311 |   .button {
312 |     @include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text);
313 |     @include button-clear(#fff, $bar-title-font-size);
314 |   }
315 | }
316 | .bar-balanced {
317 |   .button {
318 |     @include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text);
319 |     @include button-clear(#fff, $bar-title-font-size);
320 |   }
321 | }
322 | .bar-energized {
323 |   .button {
324 |     @include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text);
325 |     @include button-clear(#fff, $bar-title-font-size);
326 |   }
327 | }
328 | .bar-royal {
329 |   .button {
330 |     @include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text);
331 |     @include button-clear(#fff, $bar-title-font-size);
332 |   }
333 | }
334 | .bar-dark {
335 |   .button {
336 |     @include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text);
337 |     @include button-clear(#fff, $bar-title-font-size);
338 |   }
339 | }
340 | 
341 | // Header at top
342 | .bar-header {
343 |   top: 0;
344 |   border-top-width: 0;
345 |   border-bottom-width: 1px;
346 |   &.has-tabs-top{
347 |     border-bottom-width: 0px;
348 |     background-image: none;
349 |   }
350 | }
351 | .tabs-top .bar-header{
352 |   border-bottom-width: 0px;
353 |   background-image: none;
354 | }
355 | 
356 | // Footer at bottom
357 | .bar-footer {
358 |   bottom: 0;
359 |   border-top-width: 1px;
360 |   border-bottom-width: 0;
361 |   background-position: top;
362 | 
363 |   height: $bar-footer-height;
364 | 
365 |   &.item-input-inset {
366 |     position: absolute;
367 |   }
368 | }
369 | 
370 | // Don't render padding if the bar is just for tabs
371 | .bar-tabs {
372 |   padding: 0;
373 | }
374 | 
375 | .bar-subheader {
376 |   top: $bar-height;
377 |   display: block;
378 | 
379 |   height: $bar-subheader-height;
380 | }
381 | .bar-subfooter {
382 |   bottom: $bar-footer-height;
383 |   display: block;
384 | 
385 |   height: $bar-subfooter-height;
386 | }
387 | 
388 | .nav-bar-block {
389 |   position: absolute;
390 |   top: 0;
391 |   right: 0;
392 |   left: 0;
393 |   z-index: $z-index-bar;
394 | }
395 | 
396 | .bar .back-button.hide,
397 | .bar .buttons .hide {
398 |   display: none;
399 | }
400 | 
401 | .nav-bar-tabs-top .bar {
402 |   background-image: none;
403 | }
404 | 
405 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_button-bar.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Button Bar
 4 |  * --------------------------------------------------
 5 |  */
 6 | 
 7 | .button-bar {
 8 |   @include display-flex();
 9 |   @include flex(1);
10 |   width: 100%;
11 | 
12 |   &.button-bar-inline {
13 |     display: block;
14 |     width: auto;
15 | 
16 |     @include clearfix();
17 | 
18 |     > .button {
19 |       width: auto;
20 |       display: inline-block;
21 |       float: left;
22 |     }
23 |   }
24 | }
25 | 
26 | .button-bar > .button {
27 |   @include flex(1);
28 |   display: block;
29 | 
30 |   overflow: hidden;
31 | 
32 |   padding: 0 16px;
33 | 
34 |   width: 0;
35 | 
36 |   border-width: 1px 0px 1px 1px;
37 |   border-radius: 0;
38 |   text-align: center;
39 |   text-overflow: ellipsis;
40 |   white-space: nowrap;
41 | 
42 |   &:before,
43 |   .icon:before {
44 |     line-height: 44px;
45 |   }
46 | 
47 |   &:first-child {
48 |     border-radius: $button-border-radius 0px 0px $button-border-radius;
49 |   }
50 |   &:last-child {
51 |     border-right-width: 1px;
52 |     border-radius: 0px $button-border-radius $button-border-radius 0px;
53 |   }
54 | }
55 | 
56 | .button-bar > .button-small {
57 |   &:before,
58 |   .icon:before {
59 |     line-height: 28px;
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_button.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Buttons
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | .button {
  8 |   // set the color defaults
  9 |   @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $button-default-text);
 10 | 
 11 |   position: relative;
 12 |   display: inline-block;
 13 |   margin: 0;
 14 |   padding: 0 $button-padding;
 15 | 
 16 |   min-width: ($button-padding * 3) + $button-font-size;
 17 |   min-height: $button-height + 5px;
 18 | 
 19 |   border-width: $button-border-width;
 20 |   border-style: solid;
 21 |   border-radius: $button-border-radius;
 22 | 
 23 |   vertical-align: top;
 24 |   text-align: center;
 25 | 
 26 |   text-overflow: ellipsis;
 27 |   font-size: $button-font-size;
 28 |   line-height: $button-height - $button-border-width + 1px;
 29 | 
 30 |   cursor: pointer;
 31 | 
 32 |   &:after {
 33 |     // used to create a larger button "hit" area
 34 |     position: absolute;
 35 |     top: -6px;
 36 |     right: -6px;
 37 |     bottom: -6px;
 38 |     left: -6px;
 39 |     content: ' ';
 40 |   }
 41 | 
 42 |   .icon {
 43 |     vertical-align: top;
 44 |     pointer-events: none;
 45 |   }
 46 | 
 47 |   .icon:before,
 48 |   &.icon:before,
 49 |   &.icon-left:before,
 50 |   &.icon-right:before {
 51 |     display: inline-block;
 52 |     padding: 0 0 $button-border-width 0;
 53 |     vertical-align: inherit;
 54 |     font-size: $button-icon-size;
 55 |     line-height: $button-height - $button-border-width;
 56 |     pointer-events: none;
 57 |   }
 58 |   &.icon-left:before {
 59 |     float: left;
 60 |     padding-right: .2em;
 61 |     padding-left: 0;
 62 |   }
 63 |   &.icon-right:before {
 64 |     float: right;
 65 |     padding-right: 0;
 66 |     padding-left: .2em;
 67 |   }
 68 | 
 69 |   &.button-block, &.button-full {
 70 |     margin-top: $button-block-margin;
 71 |     margin-bottom: $button-block-margin;
 72 |   }
 73 | 
 74 |   &.button-light {
 75 |     @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
 76 |     @include button-clear($button-light-border);
 77 |     @include button-outline($button-light-border);
 78 |   }
 79 | 
 80 |   &.button-stable {
 81 |     @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
 82 |     @include button-clear($button-stable-border);
 83 |     @include button-outline($button-stable-border);
 84 |   }
 85 | 
 86 |   &.button-positive {
 87 |     @include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text);
 88 |     @include button-clear($button-positive-bg);
 89 |     @include button-outline($button-positive-bg);
 90 |   }
 91 | 
 92 |   &.button-calm {
 93 |     @include button-style($button-calm-bg, $button-calm-border, $button-calm-active-bg, $button-calm-active-border, $button-calm-text);
 94 |     @include button-clear($button-calm-bg);
 95 |     @include button-outline($button-calm-bg);
 96 |   }
 97 | 
 98 |   &.button-assertive {
 99 |     @include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text);
100 |     @include button-clear($button-assertive-bg);
101 |     @include button-outline($button-assertive-bg);
102 |   }
103 | 
104 |   &.button-balanced {
105 |     @include button-style($button-balanced-bg, $button-balanced-border, $button-balanced-active-bg, $button-balanced-active-border, $button-balanced-text);
106 |     @include button-clear($button-balanced-bg);
107 |     @include button-outline($button-balanced-bg);
108 |   }
109 | 
110 |   &.button-energized {
111 |     @include button-style($button-energized-bg, $button-energized-border, $button-energized-active-bg, $button-energized-active-border, $button-energized-text);
112 |     @include button-clear($button-energized-bg);
113 |     @include button-outline($button-energized-bg);
114 |   }
115 | 
116 |   &.button-royal {
117 |     @include button-style($button-royal-bg, $button-royal-border, $button-royal-active-bg, $button-royal-active-border, $button-royal-text);
118 |     @include button-clear($button-royal-bg);
119 |     @include button-outline($button-royal-bg);
120 |   }
121 | 
122 |   &.button-dark {
123 |     @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text);
124 |     @include button-clear($button-dark-bg);
125 |     @include button-outline($button-dark-bg);
126 |   }
127 | }
128 | 
129 | .button-small {
130 |   padding: 2px $button-small-padding 1px;
131 |   min-width: $button-small-height;
132 |   min-height: $button-small-height + 2;
133 |   font-size: $button-small-font-size;
134 |   line-height: $button-small-height - $button-border-width - 1;
135 | 
136 |   .icon:before,
137 |   &.icon:before,
138 |   &.icon-left:before,
139 |   &.icon-right:before {
140 |     font-size: $button-small-icon-size;
141 |     line-height: $button-small-icon-size + 3;
142 |     margin-top: 3px;
143 |   }
144 | }
145 | 
146 | .button-large {
147 |   padding: 0 $button-large-padding;
148 |   min-width: ($button-large-padding * 3) + $button-large-font-size;
149 |   min-height: $button-large-height + 5;
150 |   font-size: $button-large-font-size;
151 |   line-height: $button-large-height - $button-border-width;
152 | 
153 |   .icon:before,
154 |   &.icon:before,
155 |   &.icon-left:before,
156 |   &.icon-right:before {
157 |     padding-bottom: ($button-border-width * 2);
158 |     font-size: $button-large-icon-size;
159 |     line-height: $button-large-height - ($button-border-width * 2) - 1;
160 |   }
161 | }
162 | 
163 | .button-icon {
164 |   @include transition(opacity .1s);
165 |   padding: 0 6px;
166 |   min-width: initial;
167 |   border-color: transparent;
168 |   background: none;
169 | 
170 |   &.button.active,
171 |   &.button.activated {
172 |     border-color: transparent;
173 |     background: none;
174 |     box-shadow: none;
175 |     opacity: 0.3;
176 |   }
177 | 
178 |   .icon:before,
179 |   &.icon:before {
180 |     font-size: $button-large-icon-size;
181 |   }
182 | }
183 | 
184 | .button-clear {
185 |   @include button-clear($button-default-border);
186 |   @include transition(opacity .1s);
187 |   padding: 0 $button-clear-padding;
188 |   max-height: $button-height;
189 |   border-color: transparent;
190 |   background: none;
191 |   box-shadow: none;
192 | 
193 |   &.active,
194 |   &.activated {
195 |     opacity: 0.3;
196 |   }
197 | }
198 | 
199 | .button-outline {
200 |   @include button-outline($button-default-border);
201 |   @include transition(opacity .1s);
202 |   background: none;
203 |   box-shadow: none;
204 | }
205 | 
206 | .padding > .button.button-block:first-child {
207 |   margin-top: 0;
208 | }
209 | 
210 | .button-block {
211 |   display: block;
212 |   clear: both;
213 | 
214 |   &:after {
215 |     clear: both;
216 |   }
217 | }
218 | 
219 | .button-full,
220 | .button-full > .button {
221 |   display: block;
222 |   margin-right: 0;
223 |   margin-left: 0;
224 |   border-right-width: 0;
225 |   border-left-width: 0;
226 |   border-radius: 0;
227 | }
228 | 
229 | button.button-block,
230 | button.button-full,
231 | .button-full > button.button,
232 | input.button.button-block  {
233 |   width: 100%;
234 | }
235 | 
236 | a.button {
237 |   text-decoration: none;
238 | 
239 |   .icon:before,
240 |   &.icon:before,
241 |   &.icon-left:before,
242 |   &.icon-right:before {
243 |     margin-top: 2px;
244 |   }
245 | }
246 | 
247 | .button.disabled,
248 | .button[disabled] {
249 |   opacity: .4;
250 |   cursor: default !important;
251 |   pointer-events: none;
252 | }
253 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_checkbox.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Checkbox
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | .checkbox {
  8 |   // set the color defaults
  9 |   @include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default);
 10 | 
 11 |   position: relative;
 12 |   display: inline-block;
 13 |   padding: ($checkbox-height / 4) ($checkbox-width / 4);
 14 |   cursor: pointer;
 15 | }
 16 | .checkbox-light  {
 17 |   @include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light);
 18 | }
 19 | .checkbox-stable  {
 20 |   @include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable);
 21 | }
 22 | .checkbox-positive  {
 23 |   @include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive);
 24 | }
 25 | .checkbox-calm  {
 26 |   @include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm);
 27 | }
 28 | .checkbox-assertive  {
 29 |   @include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive);
 30 | }
 31 | .checkbox-balanced  {
 32 |   @include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced);
 33 | }
 34 | .checkbox-energized{
 35 |   @include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized);
 36 | }
 37 | .checkbox-royal  {
 38 |   @include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal);
 39 | }
 40 | .checkbox-dark  {
 41 |   @include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark);
 42 | }
 43 | 
 44 | .checkbox input:disabled:before,
 45 | .checkbox input:disabled + .checkbox-icon:before {
 46 |   border-color: $checkbox-off-border-light;
 47 | }
 48 | 
 49 | .checkbox input:disabled:checked:before,
 50 | .checkbox input:disabled:checked + .checkbox-icon:before {
 51 |   background: $checkbox-on-bg-light;
 52 | }
 53 | 
 54 | 
 55 | .checkbox.checkbox-input-hidden input {
 56 |   display: none !important;
 57 | }
 58 | 
 59 | .checkbox input,
 60 | .checkbox-icon {
 61 |   position: relative;
 62 |   width: $checkbox-width;
 63 |   height: $checkbox-height;
 64 |   display: block;
 65 |   border: 0;
 66 |   background: transparent;
 67 |   cursor: pointer;
 68 |   -webkit-appearance: none;
 69 | 
 70 |   &:before {
 71 |     // what the checkbox looks like when its not checked
 72 |     display: table;
 73 |     width: 100%;
 74 |     height: 100%;
 75 |     border-width: $checkbox-border-width;
 76 |     border-style: solid;
 77 |     border-radius: $checkbox-border-radius;
 78 |     background: $checkbox-off-bg-color;
 79 |     content: ' ';
 80 |     @include transition(background-color 20ms ease-in-out);
 81 |   }
 82 | }
 83 | 
 84 | .checkbox input:checked:before,
 85 | input:checked + .checkbox-icon:before {
 86 |   border-width: $checkbox-border-width + 1;
 87 | }
 88 | 
 89 | // the checkmark within the box
 90 | .checkbox input:after,
 91 | .checkbox-icon:after {
 92 |   @include transition(opacity .05s ease-in-out);
 93 |   @include rotate(-45deg);
 94 |   position: absolute;
 95 |   top: 33%;
 96 |   left: 25%;
 97 |   display: table;
 98 |   width: ($checkbox-width / 2);
 99 |   height: ($checkbox-width / 4) - 1;
100 |   border: $checkbox-check-width solid $checkbox-check-color;
101 |   border-top: 0;
102 |   border-right: 0;
103 |   content: ' ';
104 |   opacity: 0;
105 | }
106 | 
107 | .platform-android .checkbox-platform input:before,
108 | .platform-android .checkbox-platform .checkbox-icon:before,
109 | .checkbox-square input:before,
110 | .checkbox-square .checkbox-icon:before {
111 |   border-radius: 2px;
112 |   width: 72%;
113 |   height: 72%;
114 |   margin-top: 14%;
115 |   margin-left: 14%;
116 |   border-width: 2px;
117 | }
118 | 
119 | .platform-android .checkbox-platform input:after,
120 | .platform-android .checkbox-platform .checkbox-icon:after,
121 | .checkbox-square input:after,
122 | .checkbox-square .checkbox-icon:after {
123 |   border-width: 2px;
124 |   top: 19%;
125 |   left: 25%;
126 |   width: ($checkbox-width / 2) - 1;
127 |   height: 7px;
128 | }
129 | 
130 | .grade-c .checkbox input:after,
131 | .grade-c .checkbox-icon:after {
132 |   @include rotate(0);
133 |   top: 3px;
134 |   left: 4px;
135 |   border: none;
136 |   color: $checkbox-check-color;
137 |   content: '\2713';
138 |   font-weight: bold;
139 |   font-size: 20px;
140 | }
141 | 
142 | // what the checkmark looks like when its checked
143 | .checkbox input:checked:after,
144 | input:checked + .checkbox-icon:after {
145 |   opacity: 1;
146 | }
147 | 
148 | // make sure item content have enough padding on left to fit the checkbox
149 | .item-checkbox {
150 |   padding-left: ($item-padding * 2) + $checkbox-width;
151 | 
152 |   &.active {
153 |     box-shadow: none;
154 |   }
155 | }
156 | 
157 | // position the checkbox to the left within an item
158 | .item-checkbox .checkbox {
159 |   position: absolute;
160 |   top: 50%;
161 |   right: $item-padding / 2;
162 |   left: $item-padding / 2;
163 |   z-index: $z-index-item-checkbox;
164 |   margin-top: (($checkbox-height + ($checkbox-height / 2)) / 2) * -1;
165 | }
166 | 
167 | 
168 | .item-checkbox.item-checkbox-right {
169 |   padding-right: ($item-padding * 2) + $checkbox-width;
170 |   padding-left: $item-padding;
171 | }
172 | 
173 | .item-checkbox-right .checkbox input,
174 | .item-checkbox-right .checkbox-icon {
175 |   float: right;
176 | }
177 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_form.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Forms
  3 |  * --------------------------------------------------
  4 |  */
  5 | 
  6 | // Make all forms have space below them
  7 | form {
  8 |   margin: 0 0 $line-height-base;
  9 | }
 10 | 
 11 | // Groups of fields with labels on top (legends)
 12 | legend {
 13 |   display: block;
 14 |   margin-bottom: $line-height-base;
 15 |   padding: 0;
 16 |   width: 100%;
 17 |   border: $input-border-width solid $input-border;
 18 |   color: $dark;
 19 |   font-size: $font-size-base * 1.5;
 20 |   line-height: $line-height-base * 2;
 21 | 
 22 |   small {
 23 |     color: $stable;
 24 |     font-size: $line-height-base * .75;
 25 |   }
 26 | }
 27 | 
 28 | // Set font for forms
 29 | label,
 30 | input,
 31 | button,
 32 | select,
 33 | textarea {
 34 |   @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
 35 | }
 36 | input,
 37 | button,
 38 | select,
 39 | textarea {
 40 |   font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
 41 | }
 42 | 
 43 | 
 44 | // Input List
 45 | // -------------------------------
 46 | 
 47 | .item-input {
 48 |   @include display-flex();
 49 |   @include align-items(center);
 50 |   position: relative;
 51 |   overflow: hidden;
 52 |   padding: 6px 0 5px 16px;
 53 | 
 54 |   input {
 55 |     @include border-radius(0);
 56 |     @include flex(1, 220px);
 57 |     @include appearance(none);
 58 |     margin: 0;
 59 |     padding-right: 24px;
 60 |     background-color: transparent;
 61 |   }
 62 | 
 63 |   .button .icon {
 64 |     @include flex(0, 0, 24px);
 65 |     position: static;
 66 |     display: inline-block;
 67 |     height: auto;
 68 |     text-align: center;
 69 |     font-size: 16px;
 70 |   }
 71 | 
 72 |   .button-bar {
 73 |     @include border-radius(0);
 74 |     @include flex(1, 0, 220px);
 75 |     @include appearance(none);
 76 |   }
 77 | 
 78 |   .icon {
 79 |     min-width: 14px;
 80 |   }
 81 | }
 82 | // prevent flex-shrink on WP
 83 | .platform-windowsphone .item-input input{
 84 |   flex-shrink: 1;
 85 | }
 86 | 
 87 | .item-input-inset {
 88 |   @include display-flex();
 89 |   @include align-items(center);
 90 |   position: relative;
 91 |   overflow: hidden;
 92 |   padding: ($item-padding / 3) * 2;
 93 | }
 94 | 
 95 | .item-input-wrapper {
 96 |   @include display-flex();
 97 |   @include flex(1, 0);
 98 |   @include align-items(center);
 99 |   @include border-radius(4px);
100 |   padding-right: 8px;
101 |   padding-left: 8px;
102 |   background: #eee;
103 | }
104 | 
105 | .item-input-inset .item-input-wrapper input {
106 |   padding-left: 4px;
107 |   height: 29px;
108 |   background: transparent;
109 |   line-height: 18px;
110 | }
111 | 
112 | .item-input-wrapper ~ .button {
113 |   margin-left: ($item-padding / 3) * 2;
114 | }
115 | 
116 | .input-label {
117 |   display: table;
118 |   padding: 7px 10px 7px 0px;
119 |   max-width: 200px;
120 |   width: 35%;
121 |   color: $input-label-color;
122 |   font-size: 16px;
123 | }
124 | 
125 | .placeholder-icon {
126 |   color: #aaa;
127 |   &:first-child {
128 |     padding-right: 6px;
129 |   }
130 |   &:last-child {
131 |     padding-left: 6px;
132 |   }
133 | }
134 | 
135 | .item-stacked-label {
136 |   display: block;
137 |   background-color: transparent;
138 |   box-shadow: none;
139 | 
140 |   .input-label, .icon {
141 |     display: inline-block;
142 |     padding: 4px 0 0 0px;
143 |     vertical-align: middle;
144 |   }
145 | }
146 | 
147 | .item-stacked-label input,
148 | .item-stacked-label textarea {
149 |   @include border-radius(2px);
150 |   padding: 4px 8px 3px 0;
151 |   border: none;
152 |   background-color: $input-bg;
153 | }
154 | .item-stacked-label input {
155 |   overflow: hidden;
156 |   height: $line-height-computed + $font-size-base + 12px;
157 | }
158 | 
159 | .item-floating-label {
160 |   display: block;
161 |   background-color: transparent;
162 |   box-shadow: none;
163 | 
164 |   .input-label {
165 |     position: relative;
166 |     padding: 5px 0 0 0;
167 |     opacity: 0;
168 |     top: 10px;
169 |     @include transition(opacity .15s ease-in, top .2s linear);
170 | 
171 |     &.has-input {
172 |       opacity: 1;
173 |       top: 0;
174 |       @include transition(opacity .15s ease-in, top .2s linear);
175 |     }
176 |   }
177 | }
178 | 
179 | 
180 | // Form Controls
181 | // -------------------------------
182 | 
183 | // Shared size and type resets
184 | textarea,
185 | input[type="text"],
186 | input[type="password"],
187 | input[type="datetime"],
188 | input[type="datetime-local"],
189 | input[type="date"],
190 | input[type="month"],
191 | input[type="time"],
192 | input[type="week"],
193 | input[type="number"],
194 | input[type="email"],
195 | input[type="url"],
196 | input[type="search"],
197 | input[type="tel"],
198 | input[type="color"] {
199 |   display: block;
200 |   padding-top: 2px;
201 |   padding-left: 0;
202 |   height: $line-height-computed + $font-size-base;
203 |   color: $input-color;
204 |   vertical-align: middle;
205 |   font-size: $font-size-base;
206 |   line-height: $font-size-base + 2;
207 | }
208 | 
209 | .platform-ios,
210 | .platform-android {
211 |   input[type="datetime-local"],
212 |   input[type="date"],
213 |   input[type="month"],
214 |   input[type="time"],
215 |   input[type="week"] {
216 |     padding-top: 8px;
217 |   }
218 | }
219 | 
220 | .item-input {
221 |   input,
222 |   textarea {
223 |     width: 100%;
224 |   }
225 | }
226 | 
227 | textarea {
228 |   padding-left: 0;
229 |   @include placeholder($input-color-placeholder, -3px);
230 | }
231 | 
232 | // Reset height since textareas have rows
233 | textarea {
234 |   height: auto;
235 | }
236 | 
237 | // Everything else
238 | textarea,
239 | input[type="text"],
240 | input[type="password"],
241 | input[type="datetime"],
242 | input[type="datetime-local"],
243 | input[type="date"],
244 | input[type="month"],
245 | input[type="time"],
246 | input[type="week"],
247 | input[type="number"],
248 | input[type="email"],
249 | input[type="url"],
250 | input[type="search"],
251 | input[type="tel"],
252 | input[type="color"] {
253 |   border: 0;
254 | }
255 | 
256 | // Position radios and checkboxes better
257 | input[type="radio"],
258 | input[type="checkbox"] {
259 |   margin: 0;
260 |   line-height: normal;
261 | }
262 | 
263 | // Reset width of input images, buttons, radios, checkboxes
264 | .item-input {
265 |   input[type="file"],
266 |   input[type="image"],
267 |   input[type="submit"],
268 |   input[type="reset"],
269 |   input[type="button"],
270 |   input[type="radio"],
271 |   input[type="checkbox"] {
272 |     width: auto; // Override of generic input selector
273 |   }
274 | }
275 | 
276 | // Set the height of file to match text inputs
277 | input[type="file"] {
278 |   line-height: $input-height-base;
279 | }
280 | 
281 | // Text input classes to hide text caret during scroll
282 | .previous-input-focus,
283 | .cloned-text-input + input,
284 | .cloned-text-input + textarea {
285 |   position: absolute !important;
286 |   left: -9999px;
287 |   width: 200px;
288 | }
289 | 
290 | 
291 | // Placeholder
292 | // -------------------------------
293 | input,
294 | textarea {
295 |   @include placeholder();
296 | }
297 | 
298 | 
299 | // DISABLED STATE
300 | // -------------------------------
301 | 
302 | // Disabled and read-only inputs
303 | input[disabled],
304 | select[disabled],
305 | textarea[disabled],
306 | input[readonly]:not(.cloned-text-input),
307 | textarea[readonly]:not(.cloned-text-input),
308 | select[readonly] {
309 |   background-color: $input-bg-disabled;
310 |   cursor: not-allowed;
311 | }
312 | // Explicitly reset the colors here
313 | input[type="radio"][disabled],
314 | input[type="checkbox"][disabled],
315 | input[type="radio"][readonly],
316 | input[type="checkbox"][readonly] {
317 |   background-color: transparent;
318 | }
319 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_grid.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Grid
  3 |  * --------------------------------------------------
  4 |  * Using flexbox for the grid, inspired by Philip Walton:
  5 |  * http://philipwalton.github.io/solved-by-flexbox/demos/grids/
  6 |  * By default each .col within a .row will evenly take up
  7 |  * available width, and the height of each .col with take
  8 |  * up the height of the tallest .col in the same .row.
  9 |  */
 10 | 
 11 | .row {
 12 |   @include display-flex();
 13 |   padding: ($grid-padding-width / 2);
 14 |   width: 100%;
 15 | }
 16 | 
 17 | .row-wrap {
 18 |   @include flex-wrap(wrap);
 19 | }
 20 | 
 21 | .row-no-padding {
 22 |   padding: 0;
 23 | 
 24 |   > .col {
 25 |     padding: 0;
 26 |   }
 27 | }
 28 | 
 29 | .row + .row {
 30 |   margin-top: ($grid-padding-width / 2) * -1;
 31 |   padding-top: 0;
 32 | }
 33 | 
 34 | .col {
 35 |   @include flex(1);
 36 |   display: block;
 37 |   padding: ($grid-padding-width / 2);
 38 |   width: 100%;
 39 | }
 40 | 
 41 | 
 42 | /* Vertically Align Columns */
 43 | /* .row-* vertically aligns every .col in the .row */
 44 | .row-top {
 45 |   @include align-items(flex-start);
 46 | }
 47 | .row-bottom {
 48 |   @include align-items(flex-end);
 49 | }
 50 | .row-center {
 51 |   @include align-items(center);
 52 | }
 53 | .row-stretch {
 54 |   @include align-items(stretch);
 55 | }
 56 | .row-baseline {
 57 |   @include align-items(baseline);
 58 | }
 59 | 
 60 | /* .col-* vertically aligns an individual .col */
 61 | .col-top {
 62 |   @include align-self(flex-start);
 63 | }
 64 | .col-bottom {
 65 |   @include align-self(flex-end);
 66 | }
 67 | .col-center {
 68 |   @include align-self(center);
 69 | }
 70 | 
 71 | /* Column Offsets */
 72 | .col-offset-10 {
 73 |   margin-left: 10%;
 74 | }
 75 | .col-offset-20 {
 76 |   margin-left: 20%;
 77 | }
 78 | .col-offset-25 {
 79 |   margin-left: 25%;
 80 | }
 81 | .col-offset-33, .col-offset-34 {
 82 |   margin-left: 33.3333%;
 83 | }
 84 | .col-offset-50 {
 85 |   margin-left: 50%;
 86 | }
 87 | .col-offset-66, .col-offset-67 {
 88 |   margin-left: 66.6666%;
 89 | }
 90 | .col-offset-75 {
 91 |   margin-left: 75%;
 92 | }
 93 | .col-offset-80 {
 94 |   margin-left: 80%;
 95 | }
 96 | .col-offset-90 {
 97 |   margin-left: 90%;
 98 | }
 99 | 
100 | 
101 | /* Explicit Column Percent Sizes */
102 | /* By default each grid column will evenly distribute */
103 | /* across the grid. However, you can specify individual */
104 | /* columns to take up a certain size of the available area */
105 | .col-10 {
106 |   @include flex(0, 0, 10%);
107 |   max-width: 10%;
108 | }
109 | .col-20 {
110 |   @include flex(0, 0, 20%);
111 |   max-width: 20%;
112 | }
113 | .col-25 {
114 |   @include flex(0, 0, 25%);
115 |   max-width: 25%;
116 | }
117 | .col-33, .col-34 {
118 |   @include flex(0, 0, 33.3333%);
119 |   max-width: 33.3333%;
120 | }
121 | .col-50 {
122 |   @include flex(0, 0, 50%);
123 |   max-width: 50%;
124 | }
125 | .col-66, .col-67 {
126 |   @include flex(0, 0, 66.6666%);
127 |   max-width: 66.6666%;
128 | }
129 | .col-75 {
130 |   @include flex(0, 0, 75%);
131 |   max-width: 75%;
132 | }
133 | .col-80 {
134 |   @include flex(0, 0, 80%);
135 |   max-width: 80%;
136 | }
137 | .col-90 {
138 |   @include flex(0, 0, 90%);
139 |   max-width: 90%;
140 | }
141 | 
142 | 
143 | /* Responsive Grid Classes */
144 | /* Adding a class of responsive-X to a row */
145 | /* will trigger the flex-direction to */
146 | /* change to column and add some margin */
147 | /* to any columns in the row for clearity */
148 | 
149 | @include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
150 | @include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
151 | @include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);
152 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_list.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Lists
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | .list {
  8 |   position: relative;
  9 |   padding-top: $item-border-width;
 10 |   padding-bottom: $item-border-width;
 11 |   padding-left: 0; // reset padding because ul and ol
 12 |   margin-bottom: 20px;
 13 | }
 14 | .list:last-child {
 15 |   margin-bottom: 0px;
 16 |   &.card{
 17 |     margin-bottom:40px;
 18 |   }
 19 | }
 20 | 
 21 | 
 22 | /**
 23 |  * List Header
 24 |  * --------------------------------------------------
 25 |  */
 26 | 
 27 | .list-header {
 28 |   margin-top: $list-header-margin-top;
 29 |   padding: $list-header-padding;
 30 |   background-color: $list-header-bg;
 31 |   color: $list-header-color;
 32 |   font-weight: bold;
 33 | }
 34 | 
 35 | // when its a card make sure it doesn't duplicate top and bottom borders
 36 | .card.list .list-item {
 37 |   padding-right: 1px;
 38 |   padding-left: 1px;
 39 | }
 40 | 
 41 | 
 42 | /**
 43 |  * Cards and Inset Lists
 44 |  * --------------------------------------------------
 45 |  * A card and list-inset are close to the same thing, except a card as a box shadow.
 46 |  */
 47 | 
 48 | .card,
 49 | .list-inset {
 50 |   overflow: hidden;
 51 |   margin: ($content-padding * 2) $content-padding;
 52 |   border-radius: $card-border-radius;
 53 |   background-color: $card-body-bg;
 54 | }
 55 | 
 56 | .card {
 57 |   padding-top: $item-border-width;
 58 |   padding-bottom: $item-border-width;
 59 |   box-shadow: $card-box-shadow;
 60 | 
 61 |   .item {
 62 |     border-left: 0;
 63 |     border-right: 0;
 64 |   }
 65 |   .item:first-child {
 66 |     border-top: 0;
 67 |   }
 68 |   .item:last-child {
 69 |     border-bottom: 0;
 70 |   }
 71 | }
 72 | 
 73 | .padding {
 74 |   .card, .list-inset {
 75 |     margin-left: 0;
 76 |     margin-right: 0;
 77 |   }
 78 | }
 79 | 
 80 | .card .item,
 81 | .list-inset .item,
 82 | .padding > .list .item
 83 | {
 84 |   &:first-child {
 85 |     border-top-left-radius: $card-border-radius;
 86 |     border-top-right-radius: $card-border-radius;
 87 | 
 88 |     .item-content {
 89 |       border-top-left-radius: $card-border-radius;
 90 |       border-top-right-radius: $card-border-radius;
 91 |     }
 92 |   }
 93 |   &:last-child {
 94 |     border-bottom-right-radius: $card-border-radius;
 95 |     border-bottom-left-radius: $card-border-radius;
 96 | 
 97 |     .item-content {
 98 |       border-bottom-right-radius: $card-border-radius;
 99 |       border-bottom-left-radius: $card-border-radius;
100 |     }
101 |   }
102 | }
103 | 
104 | .card .item:last-child,
105 | .list-inset .item:last-child {
106 |   margin-bottom: $item-border-width * -1;
107 | }
108 | 
109 | .card .item,
110 | .list-inset .item,
111 | .padding > .list .item,
112 | .padding-horizontal > .list .item {
113 |   margin-right: 0;
114 |   margin-left: 0;
115 | 
116 |   &.item-input input {
117 |     padding-right: 44px;
118 |   }
119 | }
120 | .padding-left > .list .item {
121 |   margin-left: 0;
122 | }
123 | .padding-right > .list .item {
124 |   margin-right: 0;
125 | }
126 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_loading.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Loading
 4 |  * --------------------------------------------------
 5 |  */
 6 | 
 7 | .loading-container {
 8 |   position: absolute;
 9 |   left: 0;
10 |   top: 0;
11 |   right: 0;
12 |   bottom: 0;
13 | 
14 |   z-index: $z-index-loading;
15 | 
16 |   @include display-flex();
17 |   @include justify-content(center);
18 |   @include align-items(center);
19 | 
20 |   @include transition(0.2s opacity linear);
21 |   visibility: hidden;
22 |   opacity: 0;
23 | 
24 |   &:not(.visible) .icon,
25 |   &:not(.visible) .spinner{
26 |     display: none;
27 |   }
28 |   &.visible {
29 |     visibility: visible;
30 |   }
31 |   &.active {
32 |     opacity: 1;
33 |   }
34 | 
35 |   .loading {
36 |     padding: $loading-padding;
37 | 
38 |     border-radius: $loading-border-radius;
39 |     background-color: $loading-bg-color;
40 | 
41 |     color: $loading-text-color;
42 | 
43 |     text-align: center;
44 |     text-overflow: ellipsis;
45 |     font-size: $loading-font-size;
46 | 
47 |     h1, h2, h3, h4, h5, h6 {
48 |       color: $loading-text-color;
49 |     }
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_menu.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Menus
 4 |  * --------------------------------------------------
 5 |  * Side panel structure
 6 |  */
 7 | 
 8 | .menu {
 9 |   position: absolute;
10 |   top: 0;
11 |   bottom: 0;
12 |   z-index: $z-index-menu;
13 |   overflow: hidden;
14 | 
15 |   min-height: 100%;
16 |   max-height: 100%;
17 |   width: $menu-width;
18 | 
19 |   background-color: $menu-bg;
20 | 
21 |   .scroll-content {
22 |     z-index: $z-index-menu-scroll-content;
23 |   }
24 | 
25 |   .bar-header {
26 |     z-index: $z-index-menu-bar-header;
27 |   }
28 | }
29 | 
30 | .menu-content {
31 |   @include transform(none);
32 |   box-shadow: $menu-side-shadow;
33 | }
34 | 
35 | .menu-open .menu-content .pane,
36 | .menu-open .menu-content .scroll-content {
37 |   pointer-events: none;
38 |   overflow: hidden;
39 | }
40 | 
41 | .grade-b .menu-content,
42 | .grade-c .menu-content {
43 |   @include box-sizing(content-box);
44 |   right: -1px;
45 |   left: -1px;
46 |   border-right: 1px solid #ccc;
47 |   border-left: 1px solid #ccc;
48 |   box-shadow: none;
49 | }
50 | 
51 | .menu-left {
52 |   left: 0;
53 | }
54 | 
55 | .menu-right {
56 |   right: 0;
57 | }
58 | 
59 | .aside-open.aside-resizing .menu-right {
60 |   display: none;
61 | }
62 | 
63 | .menu-animated {
64 |   @include transition-transform($menu-animation-speed ease);
65 | }
66 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_mixins.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | // Button Mixins
  3 | // --------------------------------------------------
  4 | 
  5 | @mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
  6 |   border-color: $border-color;
  7 |   background-color: $bg-color;
  8 |   color: $color;
  9 | 
 10 |   // Give desktop users something to play with
 11 |   &:hover {
 12 |     color: $color;
 13 |     text-decoration: none;
 14 |   }
 15 |   &.active,
 16 |   &.activated {
 17 |     border-color: $active-border-color;
 18 |     background-color: $active-bg-color;
 19 |     box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
 20 |   }
 21 | }
 22 | 
 23 | @mixin button-clear($color, $font-size:"") {
 24 |   &.button-clear {
 25 |     border-color: transparent;
 26 |     background: none;
 27 |     box-shadow: none;
 28 |     color: $color;
 29 | 
 30 |     @if $font-size != "" {
 31 |       font-size: $font-size;
 32 |     }
 33 |   }
 34 |   &.button-icon {
 35 |     border-color: transparent;
 36 |     background: none;
 37 |   }
 38 | }
 39 | 
 40 | @mixin button-outline($color, $text-color:"") {
 41 |   &.button-outline {
 42 |     border-color: $color;
 43 |     background: transparent;
 44 |     @if $text-color == "" {
 45 |       $text-color: $color;
 46 |     }
 47 |     color: $text-color;
 48 |     &.active,
 49 |     &.activated {
 50 |       background-color: $color;
 51 |       box-shadow: none;
 52 |       color: #fff;
 53 |     }
 54 |   }
 55 | }
 56 | 
 57 | 
 58 | // Bar Mixins
 59 | // --------------------------------------------------
 60 | 
 61 | @mixin bar-style($bg-color, $border-color, $color) {
 62 |   border-color: $border-color;
 63 |   background-color: $bg-color;
 64 |   background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
 65 |   color: $color;
 66 | 
 67 |   .title {
 68 |     color: $color;
 69 |   }
 70 | }
 71 | 
 72 | 
 73 | // Tab Mixins
 74 | // --------------------------------------------------
 75 | 
 76 | @mixin tab-style($bg-color, $border-color, $color) {
 77 |   border-color: $border-color;
 78 |   background-color: $bg-color;
 79 |   background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
 80 |   color: $color;
 81 | }
 82 | 
 83 | @mixin tab-badge-style($bg-color, $color) {
 84 |   .tab-item .badge {
 85 |     background-color: $bg-color;
 86 |     color: $color;
 87 |   }
 88 | }
 89 | 
 90 | 
 91 | // Item Mixins
 92 | // --------------------------------------------------
 93 | 
 94 | @mixin item-style($bg-color, $border-color, $color) {
 95 |   border-color: $border-color;
 96 |   background-color: $bg-color;
 97 |   color: $color;
 98 | }
 99 | 
100 | @mixin item-active-style($active-bg-color, $active-border-color) {
101 |   border-color: $active-border-color;
102 |   background-color: $active-bg-color;
103 | }
104 | 
105 | 
106 | // Badge Mixins
107 | // --------------------------------------------------
108 | 
109 | @mixin badge-style($bg-color, $color) {
110 |   background-color: $bg-color;
111 |   color: $color;
112 | }
113 | 
114 | 
115 | // Range Mixins
116 | // --------------------------------------------------
117 | 
118 | @mixin range-style($track-bg-color) {
119 |   &::-webkit-slider-thumb:before {
120 |     background: $track-bg-color;
121 |   }
122 |   &::-ms-fill-lower{
123 |     background: $track-bg-color;
124 |   }
125 | }
126 | 
127 | 
128 | // Checkbox Mixins
129 | // --------------------------------------------------
130 | 
131 | @mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) {
132 |   & input:before,
133 |   & .checkbox-icon:before {
134 |     border-color: $off-border-color;
135 |   }
136 | 
137 |   // what the background looks like when its checked
138 |   & input:checked:before,
139 |   & input:checked + .checkbox-icon:before {
140 |     background: $on-bg-color;
141 |     border-color: $on-border-color;
142 |   }
143 | }
144 | 
145 | 
146 | // Toggle Mixins
147 | // --------------------------------------------------
148 | 
149 | @mixin toggle-style($on-border-color, $on-bg-color) {
150 |   // the track when the toggle is "on"
151 |   & input:checked + .track {
152 |     border-color: $on-border-color;
153 |     background-color: $on-bg-color;
154 |   }
155 | }
156 | @mixin toggle-small-style($on-bg-color) {
157 |   // the track when the toggle is "on"
158 |   & input:checked + .track {
159 |     background-color: rgba($on-bg-color, .5);
160 |   }
161 |   & input:checked + .track .handle {
162 |     background-color: $on-bg-color;
163 |   }
164 | }
165 | 
166 | 
167 | // Clearfix
168 | // --------------------------------------------------
169 | 
170 | @mixin clearfix {
171 |   *zoom: 1;
172 |   &:before,
173 |   &:after {
174 |     display: table;
175 |     content: "";
176 |     line-height: 0;
177 |   }
178 |   &:after {
179 |     clear: both;
180 |   }
181 | }
182 | 
183 | 
184 | // Placeholder text
185 | // --------------------------------------------------
186 | 
187 | @mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
188 |   &::-moz-placeholder { // Firefox 19+
189 |     color: $color;
190 |   }
191 |   &:-ms-input-placeholder {
192 |     color: $color;
193 |   }
194 |   &::-webkit-input-placeholder {
195 |     color: $color;
196 |     // Safari placeholder margin issue
197 |     text-indent: $text-indent;
198 |   }
199 | }
200 | 
201 | 
202 | // Text Mixins
203 | // --------------------------------------------------
204 | 
205 | @mixin text-size-adjust($value: none) {
206 |   -webkit-text-size-adjust: $value;
207 |      -moz-text-size-adjust: $value;
208 |           text-size-adjust: $value;
209 | }
210 | @mixin tap-highlight-transparent() {
211 |   -webkit-tap-highlight-color: rgba(0,0,0,0);
212 |   -webkit-tap-highlight-color: transparent; // For some Androids
213 | }
214 | @mixin touch-callout($value: none) {
215 |   -webkit-touch-callout: $value;
216 | }
217 | 
218 | 
219 | // Font Mixins
220 | // --------------------------------------------------
221 | 
222 | @mixin font-family-serif() {
223 |   font-family: $serif-font-family;
224 | }
225 | @mixin font-family-sans-serif() {
226 |   font-family: $sans-font-family;
227 | }
228 | @mixin font-family-monospace() {
229 |   font-family: $mono-font-family;
230 | }
231 | @mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
232 |   font-weight: $weight;
233 |   font-size: $size;
234 |   line-height: $line-height;
235 | }
236 | @mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
237 |   @include font-family-serif();
238 |   @include font-shorthand($size, $weight, $line-height);
239 | }
240 | @mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
241 |   @include font-family-sans-serif();
242 |   @include font-shorthand($size, $weight, $line-height);
243 | }
244 | @mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
245 |   @include font-family-monospace();
246 |   @include font-shorthand($size, $weight, $line-height);
247 | }
248 | @mixin font-smoothing($font-smoothing) {
249 |   -webkit-font-smoothing: $font-smoothing;
250 |           font-smoothing: $font-smoothing;
251 | }
252 | 
253 | 
254 | // Appearance
255 | // --------------------------------------------------
256 | 
257 | @mixin appearance($val) {
258 |   -webkit-appearance: $val;
259 |      -moz-appearance: $val;
260 |           appearance: $val;
261 | }
262 | 
263 | 
264 | // Border Radius Mixins
265 | // --------------------------------------------------
266 | 
267 | @mixin border-radius($radius) {
268 |   -webkit-border-radius: $radius;
269 |           border-radius: $radius;
270 | }
271 | 
272 | // Single Corner Border Radius
273 | @mixin border-top-left-radius($radius) {
274 |   -webkit-border-top-left-radius: $radius;
275 |           border-top-left-radius: $radius;
276 | }
277 | @mixin border-top-right-radius($radius) {
278 |   -webkit-border-top-right-radius: $radius;
279 |           border-top-right-radius: $radius;
280 | }
281 | @mixin border-bottom-right-radius($radius) {
282 |   -webkit-border-bottom-right-radius: $radius;
283 |           border-bottom-right-radius: $radius;
284 | }
285 | @mixin border-bottom-left-radius($radius) {
286 |   -webkit-border-bottom-left-radius: $radius;
287 |           border-bottom-left-radius: $radius;
288 | }
289 | 
290 | // Single Side Border Radius
291 | @mixin border-top-radius($radius) {
292 |   @include border-top-right-radius($radius);
293 |   @include border-top-left-radius($radius);
294 | }
295 | @mixin border-right-radius($radius) {
296 |   @include border-top-right-radius($radius);
297 |   @include border-bottom-right-radius($radius);
298 | }
299 | @mixin border-bottom-radius($radius) {
300 |   @include border-bottom-right-radius($radius);
301 |   @include border-bottom-left-radius($radius);
302 | }
303 | @mixin border-left-radius($radius) {
304 |   @include border-top-left-radius($radius);
305 |   @include border-bottom-left-radius($radius);
306 | }
307 | 
308 | 
309 | // Box shadows
310 | // --------------------------------------------------
311 | 
312 | @mixin box-shadow($shadow...) {
313 |   -webkit-box-shadow: $shadow;
314 |           box-shadow: $shadow;
315 | }
316 | 
317 | 
318 | // Transition Mixins
319 | // --------------------------------------------------
320 | 
321 | @mixin transition($transition...) {
322 |   -webkit-transition: $transition;
323 |           transition: $transition;
324 | }
325 | @mixin transition-delay($transition-delay) {
326 |   -webkit-transition-delay: $transition-delay;
327 |           transition-delay: $transition-delay;
328 | }
329 | @mixin transition-duration($transition-duration) {
330 |   -webkit-transition-duration: $transition-duration;
331 |           transition-duration: $transition-duration;
332 | }
333 | @mixin transition-timing-function($transition-timing) {
334 |    -webkit-transition-timing-function: $transition-timing;
335 |            transition-timing-function: $transition-timing;
336 |  }
337 |  @mixin transition-property($property) {
338 |   -webkit-transition-property: $property;
339 |           transition-property: $property;
340 | }
341 | @mixin transition-transform($properties...) {
342 |   // special case cuz of transform vendor prefixes
343 |   -webkit-transition: -webkit-transform $properties;
344 |           transition: transform $properties;
345 | }
346 | 
347 | 
348 | // Animation Mixins
349 | // --------------------------------------------------
350 | 
351 | @mixin animation($animation) {
352 |  -webkit-animation: $animation;
353 |          animation: $animation;
354 | }
355 | @mixin animation-duration($duration) {
356 |  -webkit-animation-duration: $duration;
357 |          animation-duration: $duration;
358 | }
359 | @mixin animation-direction($direction) {
360 |  -webkit-animation-direction: $direction;
361 |          animation-direction: $direction;
362 | }
363 | @mixin animation-timing-function($animation-timing) {
364 |  -webkit-animation-timing-function: $animation-timing;
365 |          animation-timing-function: $animation-timing;
366 | }
367 | @mixin animation-fill-mode($fill-mode) {
368 |  -webkit-animation-fill-mode: $fill-mode;
369 |          animation-fill-mode: $fill-mode;
370 | }
371 | @mixin animation-name($name...) {
372 |  -webkit-animation-name: $name;
373 |          animation-name: $name;
374 | }
375 | @mixin animation-iteration-count($count) {
376 |  -webkit-animation-iteration-count: $count;
377 |          animation-iteration-count: $count;
378 | }
379 | 
380 | 
381 | // Transformation Mixins
382 | // --------------------------------------------------
383 | 
384 | @mixin rotate($degrees) {
385 |   @include transform( rotate($degrees) );
386 | }
387 | @mixin scale($ratio) {
388 |   @include transform( scale($ratio) );
389 | }
390 | @mixin translate($x, $y) {
391 |   @include transform( translate($x, $y) );
392 | }
393 | @mixin skew($x, $y) {
394 |   @include transform( skew($x, $y) );
395 |   -webkit-backface-visibility: hidden;
396 | }
397 | @mixin translate3d($x, $y, $z) {
398 |   @include transform( translate3d($x, $y, $z) );
399 | }
400 | @mixin translateZ($z) {
401 |   @include transform( translateZ($z) );
402 | }
403 | @mixin transform($val) {
404 |   -webkit-transform: $val;
405 |           transform: $val;
406 | }
407 | 
408 | @mixin transform-origin($left, $top) {
409 |   -webkit-transform-origin: $left $top;
410 |           transform-origin: $left $top;
411 | }
412 | 
413 | 
414 | // Backface visibility
415 | // --------------------------------------------------
416 | // Prevent browsers from flickering when using CSS 3D transforms.
417 | // Default value is `visible`, but can be changed to `hidden
418 | 
419 | @mixin backface-visibility($visibility){
420 |   -webkit-backface-visibility: $visibility;
421 |           backface-visibility: $visibility;
422 | }
423 | 
424 | 
425 | // Background clipping
426 | // --------------------------------------------------
427 | 
428 | @mixin background-clip($clip) {
429 |   -webkit-background-clip: $clip;
430 |           background-clip: $clip;
431 | }
432 | 
433 | 
434 | // Background sizing
435 | // --------------------------------------------------
436 | 
437 | @mixin background-size($size) {
438 |   -webkit-background-size: $size;
439 |           background-size: $size;
440 | }
441 | 
442 | 
443 | // Box sizing
444 | // --------------------------------------------------
445 | 
446 | @mixin box-sizing($boxmodel) {
447 |   -webkit-box-sizing: $boxmodel;
448 |      -moz-box-sizing: $boxmodel;
449 |           box-sizing: $boxmodel;
450 | }
451 | 
452 | 
453 | // User select
454 | // --------------------------------------------------
455 | 
456 | @mixin user-select($select) {
457 |   -webkit-user-select: $select;
458 |      -moz-user-select: $select;
459 |       -ms-user-select: $select;
460 |           user-select: $select;
461 | }
462 | 
463 | 
464 | // Content Columns
465 | // --------------------------------------------------
466 | 
467 | @mixin content-columns($columnCount, $columnGap: $grid-gutter-width) {
468 |   -webkit-column-count: $columnCount;
469 |      -moz-column-count: $columnCount;
470 |           column-count: $columnCount;
471 |   -webkit-column-gap: $columnGap;
472 |      -moz-column-gap: $columnGap;
473 |           column-gap: $columnGap;
474 | }
475 | 
476 | 
477 | // Flexbox Mixins
478 | // --------------------------------------------------
479 | // http://philipwalton.github.io/solved-by-flexbox/
480 | // https://github.com/philipwalton/solved-by-flexbox
481 | 
482 | @mixin display-flex {
483 |   display: -webkit-box;
484 |   display: -webkit-flex;
485 |   display: -moz-box;
486 |   display: -moz-flex;
487 |   display: -ms-flexbox;
488 |   display: flex;
489 | }
490 | 
491 | @mixin display-inline-flex {
492 |   display: -webkit-inline-box;
493 |   display: -webkit-inline-flex;
494 |   display: -moz-inline-flex;
495 |   display: -ms-inline-flexbox;
496 |   display: inline-flex;
497 | }
498 | 
499 | @mixin flex-direction($value: row) {
500 |   @if $value == row-reverse {
501 |     -webkit-box-direction: reverse;
502 |     -webkit-box-orient: horizontal;
503 |   } @else if $value == column {
504 |     -webkit-box-direction: normal;
505 |     -webkit-box-orient: vertical;
506 |   } @else if $value == column-reverse {
507 |     -webkit-box-direction: reverse;
508 |     -webkit-box-orient: vertical;
509 |   } @else {
510 |     -webkit-box-direction: normal;
511 |     -webkit-box-orient: horizontal;
512 |   }
513 |   -webkit-flex-direction: $value;
514 |   -moz-flex-direction: $value;
515 |   -ms-flex-direction: $value;
516 |   flex-direction: $value;
517 | }
518 | 
519 | @mixin flex-wrap($value: nowrap) {
520 |   // No Webkit Box fallback.
521 |   -webkit-flex-wrap: $value;
522 |   -moz-flex-wrap: $value;
523 |   @if $value == nowrap {
524 |       -ms-flex-wrap: none;
525 |   } @else {
526 |       -ms-flex-wrap: $value;
527 |   }
528 |   flex-wrap: $value;
529 | }
530 | 
531 | @mixin flex($fg: 1, $fs: null, $fb: null) {
532 |   -webkit-box-flex: $fg;
533 |   -webkit-flex: $fg $fs $fb;
534 |   -moz-box-flex: $fg;
535 |   -moz-flex: $fg $fs $fb;
536 |   -ms-flex: $fg $fs $fb;
537 |   flex: $fg $fs $fb;
538 | }
539 | 
540 | @mixin flex-flow($values: (row nowrap)) {
541 |   // No Webkit Box fallback.
542 |   -webkit-flex-flow: $values;
543 |   -moz-flex-flow: $values;
544 |   -ms-flex-flow: $values;
545 |   flex-flow: $values;
546 | }
547 | 
548 | @mixin align-items($value: stretch) {
549 |   @if $value == flex-start {
550 |     -webkit-box-align: start;
551 |     -ms-flex-align: start;
552 |   } @else if $value == flex-end {
553 |     -webkit-box-align: end;
554 |     -ms-flex-align: end;
555 |   } @else {
556 |     -webkit-box-align: $value;
557 |     -ms-flex-align: $value;
558 |   }
559 |   -webkit-align-items: $value;
560 |   -moz-align-items: $value;
561 |   align-items: $value;
562 | }
563 | 
564 | @mixin align-self($value: auto) {
565 |   -webkit-align-self: $value;
566 |   -moz-align-self: $value;
567 |   @if $value == flex-start {
568 |     -ms-flex-item-align: start;
569 |   } @else if $value == flex-end {
570 |     -ms-flex-item-align: end;
571 |   } @else {
572 |     -ms-flex-item-align: $value;
573 |   }
574 |   align-self: $value;
575 | }
576 | 
577 | @mixin align-content($value: stretch) {
578 |   -webkit-align-content: $value;
579 |   -moz-align-content: $value;
580 |   @if $value == flex-start {
581 |     -ms-flex-line-pack: start;
582 |   } @else if $value == flex-end {
583 |     -ms-flex-line-pack: end;
584 |   } @else {
585 |     -ms-flex-line-pack: $value;
586 |   }
587 |   align-content: $value;
588 | }
589 | 
590 | @mixin justify-content($value: stretch) {
591 |   @if $value == flex-start {
592 |     -webkit-box-pack: start;
593 |     -ms-flex-pack: start;
594 |   } @else if $value == flex-end {
595 |     -webkit-box-pack: end;
596 |     -ms-flex-pack: end;
597 |   } @else if $value == space-between {
598 |     -webkit-box-pack: justify;
599 |     -ms-flex-pack: justify;
600 |   } @else {
601 |     -webkit-box-pack: $value;
602 |     -ms-flex-pack: $value;
603 |   }
604 |   -webkit-justify-content: $value;
605 |   -moz-justify-content: $value;
606 |   justify-content: $value;
607 | }
608 | 
609 | @mixin flex-order($n) {
610 |   -webkit-order: $n;
611 |   -ms-flex-order: $n;
612 |   order: $n;
613 |   -webkit-box-ordinal-group: $n;
614 | }
615 | 
616 | @mixin responsive-grid-break($selector, $max-width) {
617 |   @media (max-width: $max-width) {
618 |     #{$selector} {
619 |       -webkit-box-direction: normal;
620 |       -moz-box-direction: normal;
621 |       -webkit-box-orient: vertical;
622 |       -moz-box-orient: vertical;
623 |       -webkit-flex-direction: column;
624 |       -ms-flex-direction: column;
625 |       flex-direction: column;
626 | 
627 |       .col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
628 |         @include flex(1);
629 |         margin-bottom: ($grid-padding-width * 3) / 2;
630 |         margin-left: 0;
631 |         max-width: 100%;
632 |         width: 100%;
633 |       }
634 |     }
635 |   }
636 | }
637 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_modal.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Modals
  4 |  * --------------------------------------------------
  5 |  * Modals are independent windows that slide in from off-screen.
  6 |  */
  7 | 
  8 | .modal-backdrop,
  9 | .modal-backdrop-bg {
 10 |   position: fixed;
 11 |   top: 0;
 12 |   left: 0;
 13 |   z-index: $z-index-modal;
 14 |   width: 100%;
 15 |   height: 100%;
 16 | }
 17 | 
 18 | .modal-backdrop-bg {
 19 |   pointer-events: none;
 20 | }
 21 | 
 22 | .modal {
 23 |   display: block;
 24 |   position: absolute;
 25 |   top: 0;
 26 |   z-index: $z-index-modal;
 27 |   overflow: hidden;
 28 |   min-height: 100%;
 29 |   width: 100%;
 30 |   background-color: $modal-bg-color;
 31 | }
 32 | 
 33 | @media (min-width: $modal-inset-mode-break-point) {
 34 |   // inset mode is when the modal doesn't fill the entire
 35 |   // display but instead is centered within a large display
 36 |   .modal {
 37 |     top: $modal-inset-mode-top;
 38 |     right: $modal-inset-mode-right;
 39 |     bottom: $modal-inset-mode-bottom;
 40 |     left: $modal-inset-mode-left;
 41 |     min-height: $modal-inset-mode-min-height;
 42 |     width: (100% - $modal-inset-mode-left - $modal-inset-mode-right);
 43 |   }
 44 | 
 45 |   .modal.ng-leave-active {
 46 |     bottom: 0;
 47 |   }
 48 | 
 49 |   // remove ios header padding from inset header
 50 |   .platform-ios.platform-cordova .modal-wrapper .modal {
 51 |     .bar-header:not(.bar-subheader) {
 52 |       height: $bar-height;
 53 |       > * {
 54 |         margin-top: 0;
 55 |       }
 56 |     }
 57 |     .tabs-top > .tabs,
 58 |     .tabs.tabs-top {
 59 |       top: $bar-height;
 60 |     }
 61 |     .has-header,
 62 |     .bar-subheader {
 63 |       top: $bar-height;
 64 |     }
 65 |     .has-subheader {
 66 |       top: $bar-height + $bar-subheader-height;
 67 |     }
 68 |     .has-header.has-tabs-top {
 69 |       top: $bar-height + $tabs-height;
 70 |     }
 71 |     .has-header.has-subheader.has-tabs-top {
 72 |       top: $bar-height + $bar-subheader-height + $tabs-height;
 73 |     }
 74 |   }
 75 | 
 76 |   .modal-backdrop-bg {
 77 |     @include transition(opacity 300ms ease-in-out);
 78 |     background-color: $modal-backdrop-bg-active;
 79 |     opacity: 0;
 80 |   }
 81 | 
 82 |   .active .modal-backdrop-bg {
 83 |     opacity: 0.5;
 84 |   }
 85 | }
 86 | 
 87 | // disable clicks on all but the modal
 88 | .modal-open {
 89 |   pointer-events: none;
 90 | 
 91 |   .modal,
 92 |   .modal-backdrop {
 93 |     pointer-events: auto;
 94 |   }
 95 |   // prevent clicks on modal when loading overlay is active though
 96 |   &.loading-active {
 97 |     .modal,
 98 |     .modal-backdrop {
 99 |       pointer-events: none;
100 |     }
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_platform.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Platform
 4 |  * --------------------------------------------------
 5 |  * Platform specific tweaks
 6 |  */
 7 | 
 8 | .platform-ios.platform-cordova {
 9 |   // iOS has a status bar which sits on top of the header.
10 |   // Bump down everything to make room for it. However, if
11 |   // if its in Cordova, and set to fullscreen, then disregard the bump.
12 |   &:not(.fullscreen) {
13 |     .bar-header:not(.bar-subheader) {
14 |       height: $bar-height + $ios-statusbar-height;
15 | 
16 |       &.item-input-inset .item-input-wrapper {
17 |         margin-top: 19px !important;
18 |       }
19 | 
20 |       > * {
21 |         margin-top: $ios-statusbar-height;
22 |       }
23 |     }
24 |     .tabs-top > .tabs,
25 |     .tabs.tabs-top {
26 |       top: $bar-height + $ios-statusbar-height;
27 |     }
28 | 
29 |     .has-header,
30 |     .bar-subheader {
31 |       top: $bar-height + $ios-statusbar-height;
32 |     }
33 |     .has-subheader {
34 |       top: $bar-height + $bar-subheader-height + $ios-statusbar-height;
35 |     }
36 |     .has-header.has-tabs-top {
37 |       top: $bar-height + $tabs-height + $ios-statusbar-height;
38 |     }
39 |     .has-header.has-subheader.has-tabs-top {
40 |       top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height;
41 |     }
42 |   }
43 |   .popover{
44 |     .bar-header:not(.bar-subheader) {
45 |       height: $bar-height;
46 |       &.item-input-inset .item-input-wrapper {
47 |         margin-top: -1px;
48 |       }
49 |       > * {
50 |         margin-top: 0;
51 |       }
52 |     }
53 |     .has-header,
54 |     .bar-subheader {
55 |       top: $bar-height;
56 |     }
57 |     .has-subheader {
58 |       top: $bar-height + $bar-subheader-height;
59 |     }
60 |   }
61 |   &.status-bar-hide {
62 |     // Cordova doesn't adjust the body height correctly, this makes up for it
63 |     margin-bottom: 20px;
64 |   }
65 | }
66 | 
67 | @media (orientation:landscape) {
68 |   .platform-ios.platform-browser.platform-ipad {
69 |     position: fixed; // required for iPad 7 Safari
70 |   }
71 | }
72 | 
73 | .platform-c:not(.enable-transitions) * {
74 |   // disable transitions on grade-c devices (Android 2)
75 |   -webkit-transition: none !important;
76 |   transition: none !important;
77 | }
78 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_popover.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Popovers
  4 |  * --------------------------------------------------
  5 |  * Popovers are independent views which float over content
  6 |  */
  7 | 
  8 | .popover-backdrop {
  9 |   position: fixed;
 10 |   top: 0;
 11 |   left: 0;
 12 |   z-index: $z-index-popover;
 13 |   width: 100%;
 14 |   height: 100%;
 15 |   background-color: $popover-backdrop-bg-inactive;
 16 | 
 17 |   &.active {
 18 |     background-color: $popover-backdrop-bg-active;
 19 |   }
 20 | }
 21 | 
 22 | .popover {
 23 |   position: absolute;
 24 |   top: 25%;
 25 |   left: 50%;
 26 |   z-index: $z-index-popover;
 27 |   display: block;
 28 |   margin-top: 12px;
 29 |   margin-left: -$popover-width / 2;
 30 |   height: $popover-height;
 31 |   width: $popover-width;
 32 |   background-color: $popover-bg-color;
 33 |   box-shadow: $popover-box-shadow;
 34 |   opacity: 0;
 35 | 
 36 |   .item:first-child {
 37 |     border-top: 0;
 38 |   }
 39 | 
 40 |   .item:last-child {
 41 |     border-bottom: 0;
 42 |   }
 43 | 
 44 |   &.popover-bottom {
 45 |     margin-top: -12px;
 46 |   }
 47 | }
 48 | 
 49 | 
 50 | // Set popover border-radius
 51 | .popover,
 52 | .popover .bar-header {
 53 |   border-radius: $popover-border-radius;
 54 | }
 55 | .popover .scroll-content {
 56 |   z-index: 1;
 57 |   margin: 2px 0;
 58 | }
 59 | .popover .bar-header {
 60 |   border-bottom-right-radius: 0;
 61 |   border-bottom-left-radius: 0;
 62 | }
 63 | .popover .has-header {
 64 |   border-top-right-radius: 0;
 65 |   border-top-left-radius: 0;
 66 | }
 67 | .popover-arrow {
 68 |   display: none;
 69 | }
 70 | 
 71 | 
 72 | // iOS Popover
 73 | .platform-ios {
 74 | 
 75 |   .popover {
 76 |     box-shadow: $popover-box-shadow-ios;
 77 |     border-radius: $popover-border-radius-ios;
 78 |   }
 79 |   .popover .bar-header {
 80 |     @include border-top-radius($popover-border-radius-ios);
 81 |   }
 82 |   .popover .scroll-content {
 83 |     margin: 8px 0;
 84 |     border-radius: $popover-border-radius-ios;
 85 |   }
 86 |   .popover .scroll-content.has-header {
 87 |     margin-top: 0;
 88 |   }
 89 |   .popover-arrow {
 90 |     position: absolute;
 91 |     display: block;
 92 |     top: -17px;
 93 |     width: 30px;
 94 |     height: 19px;
 95 |     overflow: hidden;
 96 | 
 97 |     &:after {
 98 |       position: absolute;
 99 |       top: 12px;
100 |       left: 5px;
101 |       width: 20px;
102 |       height: 20px;
103 |       background-color: $popover-bg-color;
104 |       border-radius: 3px;
105 |       content: '';
106 |       @include rotate(-45deg);
107 |     }
108 |   }
109 |   .popover-bottom .popover-arrow {
110 |     top: auto;
111 |     bottom: -10px;
112 |     &:after {
113 |       top: -6px;
114 |     }
115 |   }
116 | }
117 | 
118 | 
119 | // Android Popover
120 | .platform-android {
121 | 
122 |   .popover {
123 |     margin-top: -32px;
124 |     background-color: $popover-bg-color-android;
125 |     box-shadow: $popover-box-shadow-android;
126 | 
127 |     .item {
128 |       border-color: $popover-bg-color-android;
129 |       background-color: $popover-bg-color-android;
130 |       color: #4d4d4d;
131 |     }
132 |     &.popover-bottom {
133 |       margin-top: 32px;
134 |     }
135 |   }
136 | 
137 |   .popover-backdrop,
138 |   .popover-backdrop.active {
139 |     background-color: transparent;
140 |   }
141 | }
142 | 
143 | 
144 | // disable clicks on all but the popover
145 | .popover-open {
146 |   pointer-events: none;
147 | 
148 |   .popover,
149 |   .popover-backdrop {
150 |     pointer-events: auto;
151 |   }
152 |   // prevent clicks on popover when loading overlay is active though
153 |   &.loading-active {
154 |     .popover,
155 |     .popover-backdrop {
156 |       pointer-events: none;
157 |     }
158 |   }
159 | }
160 | 
161 | 
162 | // wider popover on larger viewports
163 | @media (min-width: $popover-large-break-point) {
164 |   .popover {
165 |     width: $popover-large-width;
166 |   }
167 | }
168 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_popup.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Popups
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | .popup-container {
  8 |   position: absolute;
  9 |   top: 0;
 10 |   left: 0;
 11 |   bottom: 0;
 12 |   right: 0;
 13 |   background: rgba(0,0,0,0);
 14 | 
 15 |   @include display-flex();
 16 |   @include justify-content(center);
 17 |   @include align-items(center);
 18 | 
 19 |   z-index: $z-index-popup;
 20 | 
 21 |   // Start hidden
 22 |   visibility: hidden;
 23 |   &.popup-showing {
 24 |     visibility: visible;
 25 |   }
 26 | 
 27 |   &.popup-hidden .popup {
 28 |     @include animation-name(scaleOut);
 29 |     @include animation-duration($popup-leave-animation-duration);
 30 |     @include animation-timing-function(ease-in-out);
 31 |     @include animation-fill-mode(both);
 32 |   }
 33 | 
 34 |   &.active .popup {
 35 |     @include animation-name(superScaleIn);
 36 |     @include animation-duration($popup-enter-animation-duration);
 37 |     @include animation-timing-function(ease-in-out);
 38 |     @include animation-fill-mode(both);
 39 |   }
 40 | 
 41 |   .popup {
 42 |     width: $popup-width;
 43 |     max-width: 100%;
 44 |     max-height: 90%;
 45 | 
 46 |     border-radius: $popup-border-radius;
 47 |     background-color: $popup-background-color;
 48 | 
 49 |     @include display-flex();
 50 |     @include flex-direction(column);
 51 |   }
 52 | 
 53 |   input,
 54 |   textarea {
 55 |     width: 100%;
 56 |   }
 57 | }
 58 | 
 59 | .popup-head {
 60 |   padding: 15px 10px;
 61 |   border-bottom: 1px solid #eee;
 62 |   text-align: center;
 63 | }
 64 | .popup-title {
 65 |   margin: 0;
 66 |   padding: 0;
 67 |   font-size: 15px;
 68 | }
 69 | .popup-sub-title {
 70 |   margin: 5px 0 0 0;
 71 |   padding: 0;
 72 |   font-weight: normal;
 73 |   font-size: 11px;
 74 | }
 75 | .popup-body {
 76 |   padding: 10px;
 77 |   overflow: auto;
 78 | }
 79 | 
 80 | .popup-buttons {
 81 |   @include display-flex();
 82 |   @include flex-direction(row);
 83 |   padding: 10px;
 84 |   min-height: $popup-button-min-height + 20;
 85 | 
 86 |   .button {
 87 |     @include flex(1);
 88 |     display: block;
 89 |     min-height: $popup-button-min-height;
 90 |     border-radius: $popup-button-border-radius;
 91 |     line-height: $popup-button-line-height;
 92 | 
 93 |     margin-right: 5px;
 94 |     &:last-child {
 95 |       margin-right: 0px;
 96 |     }
 97 |   }
 98 | }
 99 | 
100 | .popup-open {
101 |   pointer-events: none;
102 | 
103 |   &.modal-open .modal {
104 |     pointer-events: none;
105 |   }
106 | 
107 |   .popup-backdrop, .popup {
108 |     pointer-events: auto;
109 |   }
110 | }
111 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_progress.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Progress
 4 |  * --------------------------------------------------
 5 |  */
 6 | 
 7 | progress {
 8 |   display: block;
 9 |   margin: $progress-margin;
10 |   width: $progress-width;
11 | }
12 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_radio.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Radio Button Inputs
 4 |  * --------------------------------------------------
 5 |  */
 6 | 
 7 | .item-radio {
 8 |   padding: 0;
 9 | 
10 |   &:hover {
11 |     cursor: pointer;
12 |   }
13 | }
14 | 
15 | .item-radio .item-content {
16 |   /* give some room to the right for the checkmark icon */
17 |   padding-right: $item-padding * 4;
18 | }
19 | 
20 | .item-radio .radio-icon {
21 |   /* checkmark icon will be hidden by default */
22 |   position: absolute;
23 |   top: 0;
24 |   right: 0;
25 |   z-index: $z-index-item-radio;
26 |   visibility: hidden;
27 |   padding: $item-padding - 2;
28 |   height: 100%;
29 |   font-size: 24px;
30 | }
31 | 
32 | .item-radio input {
33 |   /* hide any radio button inputs elements (the ugly circles) */
34 |   position: absolute;
35 |   left: -9999px;
36 | 
37 |   &:checked ~ .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 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_range.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Range
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 |  .range input{
  8 |   display: inline-block;
  9 |   overflow: hidden;
 10 |   margin-top: 5px;
 11 |   margin-bottom: 5px;
 12 |   padding-right: 2px;
 13 |   padding-left: 1px;
 14 |   width: auto;
 15 |   height: $range-slider-height + 15;
 16 |   outline: none;
 17 |   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $range-default-track-bg), color-stop(100%, $range-default-track-bg));
 18 |   background: linear-gradient(to right, $range-default-track-bg 0%, $range-default-track-bg 100%);
 19 |   background-position: center;
 20 |   background-size: 99% $range-track-height;
 21 |   background-repeat: no-repeat;
 22 |   -webkit-appearance: none;
 23 | 
 24 |   &::-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 |    &::-ms-track{
 58 |      background: transparent;
 59 |      border-color: transparent;
 60 |      border-width: 11px 0 16px;
 61 |      color:transparent;
 62 |      margin-top:20px;
 63 |    }
 64 |    &::-ms-thumb {
 65 |      width: $range-slider-width;
 66 |      height: $range-slider-height;
 67 |      border-radius: $range-slider-border-radius;
 68 |      background-color: $toggle-handle-off-bg-color;
 69 |      border-color:$toggle-handle-off-bg-color;
 70 |      box-shadow: $range-slider-box-shadow;
 71 |      margin-left:1px;
 72 |      margin-right:1px;
 73 |      outline:none;
 74 |    }
 75 |    &::-ms-fill-lower{
 76 |      height: $range-track-height;
 77 |      background:$dark;
 78 |    }
 79 |    &::-ms-fill-upper {
 80 |      height: $range-track-height;
 81 |      background:$range-default-track-bg;
 82 |    }
 83 | }
 84 | 
 85 | .range {
 86 |   @include display-flex();
 87 |   @include align-items(center);
 88 |   padding: 2px 11px;
 89 | 
 90 |   &.range-light {
 91 |     input { @include range-style($range-light-track-bg); }
 92 |   }
 93 |   &.range-stable {
 94 |     input { @include range-style($range-stable-track-bg); }
 95 |   }
 96 |   &.range-positive {
 97 |     input { @include range-style($range-positive-track-bg); }
 98 |   }
 99 |   &.range-calm {
100 |     input { @include range-style($range-calm-track-bg); }
101 |   }
102 |   &.range-balanced {
103 |     input { @include range-style($range-balanced-track-bg); }
104 |   }
105 |   &.range-assertive {
106 |     input { @include range-style($range-assertive-track-bg); }
107 |   }
108 |   &.range-energized {
109 |     input { @include range-style($range-energized-track-bg); }
110 |   }
111 |   &.range-royal {
112 |     input { @include range-style($range-royal-track-bg); }
113 |   }
114 |   &.range-dark {
115 |     input { @include range-style($range-dark-track-bg); }
116 |   }
117 | }
118 | 
119 | .range .icon {
120 |   @include flex(0);
121 |   display: block;
122 |   min-width: $range-icon-size;
123 |   text-align: center;
124 |   font-size: $range-icon-size;
125 | }
126 | 
127 | .range input {
128 |   @include flex(1);
129 |   display: block;
130 |   margin-right: 10px;
131 |   margin-left: 10px;
132 | }
133 | 
134 | .range-label {
135 |   @include flex(0, 0, auto);
136 |   display: block;
137 |   white-space: nowrap;
138 | }
139 | 
140 | .range-label:first-child {
141 |   padding-left: 5px;
142 | }
143 | .range input + .range-label {
144 |   padding-right: 5px;
145 |   padding-left: 0;
146 | }
147 | 
148 | // WP range height must be auto
149 | .platform-windowsphone{
150 |   .range input{
151 |     height:auto;
152 |   }
153 | }


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_refresher.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | // Scroll refresher (for pull to refresh)
  3 | .scroll-refresher {
  4 |   position: absolute;
  5 |   top: -60px;
  6 |   right: 0;
  7 |   left: 0;
  8 |   overflow: hidden;
  9 |   margin: auto;
 10 |   height: 60px;
 11 |   .ionic-refresher-content {
 12 |     position: absolute;
 13 |     bottom: 15px;
 14 |     left: 0;
 15 |     width: 100%;
 16 |     color: $scroll-refresh-icon-color;
 17 |     text-align: center;
 18 | 
 19 |     font-size: 30px;
 20 | 
 21 |     .text-refreshing,
 22 |     .text-pulling {
 23 |       font-size: 16px;
 24 |       line-height: 16px;
 25 |     }
 26 |     &.ionic-refresher-with-text {
 27 |       bottom: 10px;
 28 |     }
 29 |   }
 30 | 
 31 |   .icon-refreshing,
 32 |   .icon-pulling {
 33 |     width: 100%;
 34 |     -webkit-backface-visibility: hidden;
 35 |     backface-visibility: hidden;
 36 |     -webkit-transform-style: preserve-3d;
 37 |     transform-style: preserve-3d;
 38 |   }
 39 |   .icon-pulling {
 40 |     @include animation-name(refresh-spin-back);
 41 |     @include animation-duration(200ms);
 42 |     @include animation-timing-function(linear);
 43 |     @include animation-fill-mode(none);
 44 |     -webkit-transform: translate3d(0,0,0) rotate(0deg);
 45 |     transform: translate3d(0,0,0) rotate(0deg);
 46 |   }
 47 |   .icon-refreshing,
 48 |   .text-refreshing {
 49 |     display: none;
 50 |   }
 51 |   .icon-refreshing {
 52 |     @include animation-duration(1.5s);
 53 |   }
 54 | 
 55 |   &.active {
 56 |     .icon-pulling:not(.pulling-rotation-disabled) {
 57 |       @include animation-name(refresh-spin);
 58 |       -webkit-transform: translate3d(0,0,0) rotate(-180deg);
 59 |       transform: translate3d(0,0,0) rotate(-180deg);
 60 |     }
 61 |     &.refreshing {
 62 |       @include transition(-webkit-transform .2s);
 63 |       @include transition(transform .2s);
 64 |       -webkit-transform: scale(1,1);
 65 |       transform: scale(1,1);
 66 | 
 67 |       .icon-pulling,
 68 |       .text-pulling {
 69 |         display: none;
 70 |       }
 71 |       .icon-refreshing,
 72 |       .text-refreshing {
 73 |         display: block;
 74 |       }
 75 |       &.refreshing-tail {
 76 |         -webkit-transform: scale(0,0);
 77 |         transform: scale(0,0);
 78 |       }
 79 |     }
 80 |   }
 81 | }
 82 | .overflow-scroll > .scroll{
 83 |   &.overscroll{
 84 |     position:fixed;
 85 |   }
 86 |   -webkit-overflow-scrolling:touch;
 87 |   width:100%;
 88 | }
 89 | 
 90 | @-webkit-keyframes refresh-spin {
 91 |   0%   { -webkit-transform: translate3d(0,0,0) rotate(0); }
 92 |   100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
 93 | }
 94 | 
 95 | @keyframes refresh-spin {
 96 |   0%   { transform: translate3d(0,0,0) rotate(0); }
 97 |   100% { transform: translate3d(0,0,0) rotate(180deg); }
 98 | }
 99 | 
100 | @-webkit-keyframes refresh-spin-back {
101 |   0%   { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
102 |   100% { -webkit-transform: translate3d(0,0,0) rotate(0); }
103 | }
104 | 
105 | @keyframes refresh-spin-back {
106 |   0%   { transform: translate3d(0,0,0) rotate(180deg); }
107 |   100% { transform: translate3d(0,0,0) rotate(0); }
108 | }
109 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_reset.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Resets
  4 |  * --------------------------------------------------
  5 |  * Adapted from normalize.css and some reset.css. We don't care even one
  6 |  * bit about old IE, so we don't need any hacks for that in here.
  7 |  *
  8 |  * There are probably other things we could remove here, as well.
  9 |  *
 10 |  * normalize.css v2.1.2 | MIT License | git.io/normalize
 11 | 
 12 |  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 13 |  * http://cssreset.com
 14 |  */
 15 | 
 16 | html, body, div, span, applet, object, iframe,
 17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 18 | a, abbr, acronym, address, big, cite, code,
 19 | del, dfn, em, img, ins, kbd, q, s, samp,
 20 | small, strike, strong, sub, sup, tt, var,
 21 | b, i, u, center,
 22 | dl, dt, dd, ol, ul, li,
 23 | fieldset, form, label, legend,
 24 | table, caption, tbody, tfoot, thead, tr, th, td,
 25 | article, aside, canvas, details, embed, fieldset,
 26 | figure, figcaption, footer, header, hgroup,
 27 | menu, nav, output, ruby, section, summary,
 28 | time, mark, audio, video {
 29 |   margin: 0;
 30 |   padding: 0;
 31 |   border: 0;
 32 |   vertical-align: baseline;
 33 |   font: inherit;
 34 |   font-size: 100%;
 35 | }
 36 | 
 37 | ol, ul {
 38 |   list-style: none;
 39 | }
 40 | blockquote, q {
 41 |   quotes: none;
 42 | }
 43 | blockquote:before, blockquote:after,
 44 | q:before, q:after {
 45 |   content: '';
 46 |   content: none;
 47 | }
 48 | 
 49 | /**
 50 |  * Prevent modern browsers from displaying `audio` without controls.
 51 |  * Remove excess height in iOS 5 devices.
 52 |  */
 53 | 
 54 | audio:not([controls]) {
 55 |   display: none;
 56 |   height: 0;
 57 | }
 58 | 
 59 | /**
 60 |  * Hide the `template` element in IE, Safari, and Firefox < 22.
 61 |  */
 62 | 
 63 | [hidden],
 64 | template {
 65 |   display: none;
 66 | }
 67 | 
 68 | script {
 69 |   display: none !important;
 70 | }
 71 | 
 72 | /* ==========================================================================
 73 |    Base
 74 |    ========================================================================== */
 75 | 
 76 | /**
 77 |  * 1. Set default font family to sans-serif.
 78 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
 79 |  *  user zoom.
 80 |  */
 81 | 
 82 | html {
 83 |   @include user-select(none);
 84 |   font-family: sans-serif; /* 1 */
 85 |   -webkit-text-size-adjust: 100%;
 86 |   -ms-text-size-adjust: 100%; /* 2 */
 87 |   -webkit-text-size-adjust: 100%; /* 2 */
 88 | }
 89 | 
 90 | /**
 91 |  * Remove default margin.
 92 |  */
 93 | 
 94 | body {
 95 |   margin: 0;
 96 |   line-height: 1;
 97 | }
 98 | 
 99 | 
100 | /**
101 |  * Remove default outlines.
102 |  */
103 | a,
104 | button,
105 | :focus,
106 | a:focus,
107 | button:focus,
108 | a:active,
109 | a:hover {
110 |   outline: 0;
111 | }
112 | 
113 | /* *
114 |  * Remove tap highlight color
115 |  */
116 | 
117 | a {
118 |   -webkit-user-drag: none;
119 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
120 |   -webkit-tap-highlight-color: transparent;
121 | 
122 |   &[href]:hover {
123 |     cursor: pointer;
124 |   }
125 | }
126 | 
127 | /* ==========================================================================
128 |    Typography
129 |    ========================================================================== */
130 | 
131 | 
132 | /**
133 |  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
134 |  */
135 | 
136 | b,
137 | strong {
138 |   font-weight: bold;
139 | }
140 | 
141 | /**
142 |  * Address styling not present in Safari 5 and Chrome.
143 |  */
144 | 
145 | dfn {
146 |   font-style: italic;
147 | }
148 | 
149 | /**
150 |  * Address differences between Firefox and other browsers.
151 |  */
152 | 
153 | hr {
154 |   -moz-box-sizing: content-box;
155 |   box-sizing: content-box;
156 |   height: 0;
157 | }
158 | 
159 | 
160 | /**
161 |  * Correct font family set oddly in Safari 5 and Chrome.
162 |  */
163 | 
164 | code,
165 | kbd,
166 | pre,
167 | samp {
168 |   font-size: 1em;
169 |   font-family: monospace, serif;
170 | }
171 | 
172 | /**
173 |  * Improve readability of pre-formatted text in all browsers.
174 |  */
175 | 
176 | pre {
177 |   white-space: pre-wrap;
178 | }
179 | 
180 | /**
181 |  * Set consistent quote types.
182 |  */
183 | 
184 | q {
185 |   quotes: "\201C" "\201D" "\2018" "\2019";
186 | }
187 | 
188 | /**
189 |  * Address inconsistent and variable font size in all browsers.
190 |  */
191 | 
192 | small {
193 |   font-size: 80%;
194 | }
195 | 
196 | /**
197 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
198 |  */
199 | 
200 | sub,
201 | sup {
202 |   position: relative;
203 |   vertical-align: baseline;
204 |   font-size: 75%;
205 |   line-height: 0;
206 | }
207 | 
208 | sup {
209 |   top: -0.5em;
210 | }
211 | 
212 | sub {
213 |   bottom: -0.25em;
214 | }
215 | 
216 | /**
217 |  * Define consistent border, margin, and padding.
218 |  */
219 | 
220 | fieldset {
221 |   margin: 0 2px;
222 |   padding: 0.35em 0.625em 0.75em;
223 |   border: 1px solid #c0c0c0;
224 | }
225 | 
226 | /**
227 |  * 1. Correct `color` not being inherited in IE 8/9.
228 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
229 |  */
230 | 
231 | legend {
232 |   padding: 0; /* 2 */
233 |   border: 0; /* 1 */
234 | }
235 | 
236 | /**
237 |  * 1. Correct font family not being inherited in all browsers.
238 |  * 2. Correct font size not being inherited in all browsers.
239 |  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
240 |  * 4. Remove any default :focus styles
241 |  * 5. Make sure webkit font smoothing is being inherited
242 |  * 6. Remove default gradient in Android Firefox / FirefoxOS
243 |  */
244 | 
245 | button,
246 | input,
247 | select,
248 | textarea {
249 |   margin: 0; /* 3 */
250 |   font-size: 100%; /* 2 */
251 |   font-family: inherit; /* 1 */
252 |   outline-offset: 0; /* 4 */
253 |   outline-style: none; /* 4 */
254 |   outline-width: 0; /* 4 */
255 |   -webkit-font-smoothing: inherit; /* 5 */
256 |   background-image: none; /* 6 */
257 | }
258 | 
259 | /**
260 |  * Address Firefox 4+ setting `line-height` on `input` using `importnt` in
261 |  * the UA stylesheet.
262 |  */
263 | 
264 | button,
265 | input {
266 |   line-height: normal;
267 | }
268 | 
269 | /**
270 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
271 |  * All other form control elements do not inherit `text-transform` values.
272 |  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
273 |  * Correct `select` style inheritance in Firefox 4+ and Opera.
274 |  */
275 | 
276 | button,
277 | select {
278 |   text-transform: none;
279 | }
280 | 
281 | /**
282 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
283 |  *  and `video` controls.
284 |  * 2. Correct inability to style clickable `input` types in iOS.
285 |  * 3. Improve usability and consistency of cursor style between image-type
286 |  *  `input` and others.
287 |  */
288 | 
289 | button,
290 | html input[type="button"], /* 1 */
291 | input[type="reset"],
292 | input[type="submit"] {
293 |   cursor: pointer; /* 3 */
294 |   -webkit-appearance: button; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Re-set default cursor for disabled elements.
299 |  */
300 | 
301 | button[disabled],
302 | html input[disabled] {
303 |   cursor: default;
304 | }
305 | 
306 | /**
307 |  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
308 |  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
309 |  *  (include `-moz` to future-proof).
310 |  */
311 | 
312 | input[type="search"] {
313 |   -webkit-box-sizing: content-box; /* 2 */
314 |   -moz-box-sizing: content-box;
315 |   box-sizing: content-box;
316 |   -webkit-appearance: textfield; /* 1 */
317 | }
318 | 
319 | /**
320 |  * Remove inner padding and search cancel button in Safari 5 and Chrome
321 |  * on OS X.
322 |  */
323 | 
324 | input[type="search"]::-webkit-search-cancel-button,
325 | input[type="search"]::-webkit-search-decoration {
326 |   -webkit-appearance: none;
327 | }
328 | 
329 | /**
330 |  * Remove inner padding and border in Firefox 4+.
331 |  */
332 | 
333 | button::-moz-focus-inner,
334 | input::-moz-focus-inner {
335 |   padding: 0;
336 |   border: 0;
337 | }
338 | 
339 | /**
340 |  * 1. Remove default vertical scrollbar in IE 8/9.
341 |  * 2. Improve readability and alignment in all browsers.
342 |  */
343 | 
344 | textarea {
345 |   overflow: auto; /* 1 */
346 |   vertical-align: top; /* 2 */
347 | }
348 | 
349 | 
350 | img {
351 |   -webkit-user-drag: none;
352 | }
353 | 
354 | /* ==========================================================================
355 |    Tables
356 |    ========================================================================== */
357 | 
358 | /**
359 |  * Remove most spacing between table cells.
360 |  */
361 | 
362 | table {
363 |   border-spacing: 0;
364 |   border-collapse: collapse;
365 | }
366 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_scaffolding.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Scaffolding
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | *,
  8 | *:before,
  9 | *:after {
 10 |   @include box-sizing(border-box);
 11 | }
 12 | 
 13 | html {
 14 |   overflow: hidden;
 15 |   -ms-touch-action: pan-y;
 16 |   touch-action: pan-y;
 17 | }
 18 | 
 19 | body,
 20 | .ionic-body {
 21 |   @include touch-callout(none);
 22 |   @include font-smoothing(antialiased);
 23 |   @include text-size-adjust(none);
 24 |   @include tap-highlight-transparent();
 25 |   @include user-select(none);
 26 | 
 27 |   top: 0;
 28 |   right: 0;
 29 |   bottom: 0;
 30 |   left: 0;
 31 |   overflow: hidden;
 32 | 
 33 |   margin: 0;
 34 |   padding: 0;
 35 | 
 36 |   color: $base-color;
 37 |   word-wrap: break-word;
 38 |   font-size: $font-size-base;
 39 |   font-family: $font-family-base;
 40 |   line-height: $line-height-computed;
 41 |   text-rendering: optimizeLegibility;
 42 |   -webkit-backface-visibility: hidden;
 43 |   -webkit-user-drag: none;
 44 |   -ms-content-zooming: none;
 45 | }
 46 | 
 47 | body.grade-b,
 48 | body.grade-c {
 49 |   // disable optimizeLegibility for low end devices
 50 |   text-rendering: auto;
 51 | }
 52 | 
 53 | .content {
 54 |   // used for content areas not using the content directive
 55 |   position: relative;
 56 | }
 57 | 
 58 | .scroll-content {
 59 |   position: absolute;
 60 |   top: 0;
 61 |   right: 0;
 62 |   bottom: 0;
 63 |   left: 0;
 64 |   overflow: hidden;
 65 | 
 66 |   // Hide the top border if any
 67 |   margin-top: -1px;
 68 | 
 69 |   // Prevents any distortion of lines
 70 |   padding-top: 1px;
 71 |   margin-bottom: -1px;
 72 | 
 73 |   width: auto;
 74 |   height: auto;
 75 | }
 76 | 
 77 | .menu .scroll-content.scroll-content-false{
 78 |   z-index: $z-index-scroll-content-false;
 79 | }
 80 | 
 81 | .scroll-view {
 82 |   position: relative;
 83 |   display: block;
 84 |   overflow: hidden;
 85 | 
 86 |   // Hide the top border if any
 87 |   margin-top: -1px;
 88 | }
 89 | 
 90 | /**
 91 |  * Scroll is the scroll view component available for complex and custom
 92 |  * scroll view functionality.
 93 |  */
 94 | .scroll {
 95 |   @include user-select(none);
 96 |   @include touch-callout(none);
 97 |   @include text-size-adjust(none);
 98 |   @include transform-origin(left, top);
 99 | }
100 | /**
101 |  * Set ms-viewport to prevent MS "page squish" and allow fluid scrolling
102 |  * https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx
103 |  */
104 | @-ms-viewport { width: device-width; }
105 | 
106 | // Scroll bar styles
107 | .scroll-bar {
108 |   position: absolute;
109 |   z-index: $z-index-scroll-bar;
110 | }
111 | // hide the scroll-bar during animations
112 | .ng-animate .scroll-bar {
113 |   visibility: hidden;
114 | }
115 | .scroll-bar-h {
116 |   right: 2px;
117 |   bottom: 3px;
118 |   left: 2px;
119 |   height: 3px;
120 | 
121 |   .scroll-bar-indicator {
122 |     height: 100%;
123 |   }
124 | }
125 | 
126 | .scroll-bar-v {
127 |   top: 2px;
128 |   right: 3px;
129 |   bottom: 2px;
130 |   width: 3px;
131 | 
132 |   .scroll-bar-indicator {
133 |     width: 100%;
134 |   }
135 | }
136 | .scroll-bar-indicator {
137 |   position: absolute;
138 |   border-radius: 4px;
139 |   background: rgba(0,0,0,0.3);
140 |   opacity: 1;
141 |   @include transition(opacity .3s linear);
142 | 
143 |   &.scroll-bar-fade-out {
144 |     opacity: 0;
145 |   }
146 | }
147 | .platform-android .scroll-bar-indicator {
148 |   // android doesn't have rounded ends on scrollbar
149 |   border-radius: 0;
150 | }
151 | .grade-b .scroll-bar-indicator,
152 | .grade-c .scroll-bar-indicator {
153 |   // disable rgba background and border radius for low end devices
154 |   background: #aaa;
155 | 
156 |   &.scroll-bar-fade-out {
157 |     @include transition(none);
158 |   }
159 | }
160 | 
161 | ion-infinite-scroll {
162 |   height: 60px;
163 |   width: 100%;
164 |   display: block;
165 | 
166 |   @include display-flex();
167 |   @include flex-direction(row);
168 |   @include justify-content(center);
169 |   @include align-items(center);
170 | 
171 |   .icon {
172 |     color: #666666;
173 |     font-size: 30px;
174 |     color: $scroll-refresh-icon-color;
175 |   }
176 |   &:not(.active){
177 |     .spinner,
178 |     .icon:before{
179 |       display:none;
180 |     }
181 |   }
182 | }
183 | 
184 | .overflow-scroll {
185 |   overflow-x: hidden;
186 |   overflow-y: scroll;
187 |   -webkit-overflow-scrolling: touch;
188 |   top: 0;
189 |   right: 0;
190 |   bottom: 0;
191 |   left: 0;
192 |   position: absolute;
193 | 
194 |   .scroll {
195 |     position: static;
196 |     height: 100%;
197 |     -webkit-transform: translate3d(0, 0, 0);   // fix iOS bug where relative children of scroller disapear while scrolling.  see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
198 |   }
199 | }
200 | 
201 | 
202 | // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
203 | // Note: For these to work, content must come after both bars in the markup
204 | /* If you change these, change platform.scss as well */
205 | .has-header {
206 |   top: $bar-height;
207 | }
208 | // Force no header
209 | .no-header {
210 |   top: 0;
211 | }
212 | 
213 | .has-subheader {
214 |   top: $bar-height + $bar-subheader-height;
215 | }
216 | .has-tabs-top {
217 |   top: $bar-height + $tabs-height;
218 | }
219 | .has-header.has-subheader.has-tabs-top {
220 |   top: $bar-height + $bar-subheader-height + $tabs-height;
221 | }
222 | 
223 | .has-footer {
224 |   bottom: $bar-footer-height;
225 | }
226 | .has-subfooter {
227 |   bottom: $bar-footer-height + $bar-subfooter-height;
228 | }
229 | 
230 | .has-tabs,
231 | .bar-footer.has-tabs {
232 |   bottom: $tabs-height;
233 |   &.pane{
234 |     bottom: $tabs-height;
235 |     height:auto;
236 |   }
237 | }
238 | 
239 | .has-footer.has-tabs {
240 |   bottom: $tabs-height + $bar-footer-height;
241 | }
242 | 
243 | // A full screen section with a solid background
244 | .pane {
245 |   @include translate3d(0,0,0);
246 |   @include transition-duration(0);
247 |   z-index: $z-index-pane;
248 | }
249 | .view {
250 |   z-index: $z-index-view;
251 | }
252 | .pane,
253 | .view {
254 |   position: absolute;
255 |   top: 0;
256 |   right: 0;
257 |   bottom: 0;
258 |   left: 0;
259 |   width: 100%;
260 |   height: 100%;
261 |   background-color: $base-background-color;
262 |   overflow: hidden;
263 | }
264 | .view-container {
265 |   position: absolute;
266 |   display: block;
267 |   width: 100%;
268 |   height: 100%;
269 | }
270 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_select.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Select
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | .item-select {
  8 |   position: relative;
  9 | 
 10 |   select {
 11 |     @include appearance(none);
 12 |     position: absolute;
 13 |     top: 0;
 14 |     bottom: 0;
 15 |     right: 0;
 16 |     padding: 0 ($item-padding * 3) 0 $item-padding;
 17 |     max-width: 65%;
 18 | 
 19 |     border: none;
 20 |     background: $item-default-bg;
 21 |     color: #333;
 22 | 
 23 |     // hack to hide default dropdown arrow in FF
 24 |     text-indent: .01px;
 25 |     text-overflow: '';
 26 | 
 27 |     white-space: nowrap;
 28 |     font-size: $font-size-base;
 29 | 
 30 |     cursor: pointer;
 31 |     direction: rtl; // right align the select text
 32 |   }
 33 | 
 34 |   select::-ms-expand {
 35 |     // hide default dropdown arrow in IE
 36 |     display: none;
 37 |   }
 38 | 
 39 |   option {
 40 |     direction: ltr;
 41 |   }
 42 | 
 43 |   &:after {
 44 |     position: absolute;
 45 |     top: 50%;
 46 |     right: $item-padding;
 47 |     margin-top: -3px;
 48 |     width: 0;
 49 |     height: 0;
 50 |     border-top: 5px solid;
 51 |     border-right: 5px solid rgba(0, 0, 0, 0);
 52 |     border-left: 5px solid rgba(0, 0, 0, 0);
 53 |     color: #999;
 54 |     content: "";
 55 |     pointer-events: none;
 56 |   }
 57 |   &.item-light {
 58 |     select{
 59 |       background:$item-light-bg;
 60 |       color:$item-light-text;
 61 |     }
 62 |   }
 63 |   &.item-stable {
 64 |     select{
 65 |       background:$item-stable-bg;
 66 |       color:$item-stable-text;
 67 |     }
 68 |     &:after, .input-label{
 69 |       color:darken($item-stable-border,30%);
 70 |     }
 71 |   }
 72 |   &.item-positive {
 73 |     select{
 74 |       background:$item-positive-bg;
 75 |       color:$item-positive-text;
 76 |     }
 77 |     &:after, .input-label{
 78 |       color:$item-positive-text;
 79 |     }
 80 |   }
 81 |   &.item-calm {
 82 |     select{
 83 |       background:$item-calm-bg;
 84 |       color:$item-calm-text;
 85 |     }
 86 |     &:after, .input-label{
 87 |       color:$item-calm-text;
 88 |     }
 89 |   }
 90 |   &.item-assertive {
 91 |     select{
 92 |       background:$item-assertive-bg;
 93 |       color:$item-assertive-text;
 94 |     }
 95 |     &:after, .input-label{
 96 |       color:$item-assertive-text;
 97 |     }
 98 |   }
 99 |   &.item-balanced {
100 |     select{
101 |       background:$item-balanced-bg;
102 |       color:$item-balanced-text;
103 |     }
104 |     &:after, .input-label{
105 |       color:$item-balanced-text;
106 |     }
107 |   }
108 |   &.item-energized  {
109 |     select{
110 |       background:$item-energized-bg;
111 |       color:$item-energized-text;
112 |     }
113 |     &:after, .input-label{
114 |       color:$item-energized-text;
115 |     }
116 |   }
117 |   &.item-royal {
118 |     select{
119 |       background:$item-royal-bg;
120 |       color:$item-royal-text;
121 |     }
122 |     &:after, .input-label{
123 |       color:$item-royal-text;
124 |     }
125 |   }
126 |   &.item-dark  {
127 |     select{
128 |       background:$item-dark-bg;
129 |       color:$item-dark-text;
130 |     }
131 |     &:after, .input-label{
132 |       color:$item-dark-text;
133 |     }
134 |   }
135 | }
136 | 
137 | select {
138 |   &[multiple],
139 |   &[size] {
140 |     height: auto;
141 |   }
142 | }
143 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_slide-box.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * Slide Box
 4 |  * --------------------------------------------------
 5 |  */
 6 | 
 7 | .slider {
 8 |   position: relative;
 9 |   visibility: hidden;
10 |   // Make sure items don't scroll over ever
11 |   overflow: hidden;
12 | }
13 | 
14 | .slider-slides {
15 |   position: relative;
16 |   height: 100%;
17 | }
18 | 
19 | .slider-slide {
20 |   position: relative;
21 |   display: block;
22 |   float: left;
23 |   width: 100%;
24 |   height: 100%;
25 |   vertical-align: top;
26 | }
27 | 
28 | .slider-slide-image {
29 |   > img {
30 |     width: 100%;
31 |   }
32 | }
33 | 
34 | .slider-pager {
35 |   position: absolute;
36 |   bottom: 20px;
37 |   z-index: $z-index-slider-pager;
38 |   width: 100%;
39 |   height: 15px;
40 |   text-align: center;
41 | 
42 |   .slider-pager-page {
43 |     display: inline-block;
44 |     margin: 0px 3px;
45 |     width: 15px;
46 |     color: #000;
47 |     text-decoration: none;
48 | 
49 |     opacity: 0.3;
50 | 
51 |     &.active {
52 |       @include transition(opacity 0.4s ease-in);
53 |       opacity: 1;
54 |     }
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_spinner.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Spinners
  3 |  * --------------------------------------------------
  4 |  */
  5 | 
  6 | .spinner {
  7 |   svg {
  8 |     width: $spinner-width;
  9 |     height: $spinner-height;
 10 |   }
 11 | 
 12 |   stroke: $spinner-default-stroke;
 13 |   fill: $spinner-default-fill;
 14 | 
 15 |   &.spinner-light {
 16 |     stroke: $spinner-light-stroke;
 17 |     fill: $spinner-light-fill;
 18 |   }
 19 |   &.spinner-stable {
 20 |     stroke: $spinner-stable-stroke;
 21 |     fill: $spinner-stable-fill;
 22 |   }
 23 |   &.spinner-positive {
 24 |     stroke: $spinner-positive-stroke;
 25 |     fill: $spinner-positive-fill;
 26 |   }
 27 |   &.spinner-calm {
 28 |     stroke: $spinner-calm-stroke;
 29 |     fill: $spinner-calm-fill;
 30 |   }
 31 |   &.spinner-balanced {
 32 |     stroke: $spinner-balanced-stroke;
 33 |     fill: $spinner-balanced-fill;
 34 |   }
 35 |   &.spinner-assertive {
 36 |     stroke: $spinner-assertive-stroke;
 37 |     fill: $spinner-assertive-fill;
 38 |   }
 39 |   &.spinner-energized {
 40 |     stroke: $spinner-energized-stroke;
 41 |     fill: $spinner-energized-fill;
 42 |   }
 43 |   &.spinner-royal {
 44 |     stroke: $spinner-royal-stroke;
 45 |     fill: $spinner-royal-fill;
 46 |   }
 47 |   &.spinner-dark {
 48 |     stroke: $spinner-dark-stroke;
 49 |     fill: $spinner-dark-fill;
 50 |   }
 51 | }
 52 | 
 53 | .spinner-android {
 54 |   stroke: #4b8bf4;
 55 | }
 56 | 
 57 | .spinner-ios,
 58 | .spinner-ios-small {
 59 |   stroke: #69717d;
 60 | }
 61 | 
 62 | .spinner-spiral {
 63 |   .stop1 {
 64 |     stop-color: $spinner-light-fill;
 65 |     stop-opacity: 0;
 66 |   }
 67 | 
 68 |   &.spinner-light {
 69 |     .stop1 {
 70 |       stop-color: $spinner-default-fill;
 71 |     }
 72 |     .stop2 {
 73 |       stop-color: $spinner-light-fill;
 74 |     }
 75 |   }
 76 |   &.spinner-stable .stop2 {
 77 |     stop-color: $spinner-stable-fill;
 78 |   }
 79 |   &.spinner-positive .stop2 {
 80 |     stop-color: $spinner-positive-fill;
 81 |   }
 82 |   &.spinner-calm .stop2 {
 83 |     stop-color: $spinner-calm-fill;
 84 |   }
 85 |   &.spinner-balanced .stop2 {
 86 |     stop-color: $spinner-balanced-fill;
 87 |   }
 88 |   &.spinner-assertive .stop2 {
 89 |     stop-color: $spinner-assertive-fill;
 90 |   }
 91 |   &.spinner-energized .stop2 {
 92 |     stop-color: $spinner-energized-fill;
 93 |   }
 94 |   &.spinner-royal .stop2 {
 95 |     stop-color: $spinner-royal-fill;
 96 |   }
 97 |   &.spinner-dark .stop2 {
 98 |     stop-color: $spinner-dark-fill;
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_tabs.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Tabs
  3 |  * --------------------------------------------------
  4 |  * A navigation bar with any number of tab items supported.
  5 |  */
  6 | 
  7 | .tabs {
  8 |   @include display-flex();
  9 |   @include flex-direction(horizontal);
 10 |   @include justify-content(center);
 11 |   @include translate3d(0,0,0);
 12 | 
 13 |   @include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text);
 14 |   @include tab-badge-style($tabs-default-text, $tabs-default-bg);
 15 | 
 16 |   position: absolute;
 17 |   bottom: 0;
 18 | 
 19 |   z-index: $z-index-tabs;
 20 | 
 21 |   width: 100%;
 22 |   height: $tabs-height;
 23 | 
 24 |   border-style: solid;
 25 |   border-top-width: 1px;
 26 | 
 27 |   background-size: 0;
 28 |   line-height: $tabs-height;
 29 | 
 30 |   @media (min--moz-device-pixel-ratio: 1.5),
 31 |          (-webkit-min-device-pixel-ratio: 1.5),
 32 |          (min-device-pixel-ratio: 1.5),
 33 |          (min-resolution: 144dpi),
 34 |          (min-resolution: 1.5dppx) {
 35 |     padding-top: 2px;
 36 |     border-top: none !important;
 37 |     border-bottom: none;
 38 |     background-position: top;
 39 |     background-size: 100% 1px;
 40 |     background-repeat: no-repeat;
 41 |   }
 42 | 
 43 | }
 44 | /* Allow parent element of tabs to define color, or just the tab itself */
 45 | .tabs-light > .tabs,
 46 | .tabs.tabs-light {
 47 |   @include tab-style($tabs-light-bg, $tabs-light-border, $tabs-light-text);
 48 |   @include tab-badge-style($tabs-light-text, $tabs-light-bg);
 49 | }
 50 | .tabs-stable > .tabs,
 51 | .tabs.tabs-stable {
 52 |   @include tab-style($tabs-stable-bg, $tabs-stable-border, $tabs-stable-text);
 53 |   @include tab-badge-style($tabs-stable-text, $tabs-stable-bg);
 54 | }
 55 | .tabs-positive > .tabs,
 56 | .tabs.tabs-positive {
 57 |   @include tab-style($tabs-positive-bg, $tabs-positive-border, $tabs-positive-text);
 58 |   @include tab-badge-style($tabs-positive-text, $tabs-positive-bg);
 59 | }
 60 | .tabs-calm > .tabs,
 61 | .tabs.tabs-calm {
 62 |   @include tab-style($tabs-calm-bg, $tabs-calm-border, $tabs-calm-text);
 63 |   @include tab-badge-style($tabs-calm-text, $tabs-calm-bg);
 64 | }
 65 | .tabs-assertive > .tabs,
 66 | .tabs.tabs-assertive {
 67 |   @include tab-style($tabs-assertive-bg, $tabs-assertive-border, $tabs-assertive-text);
 68 |   @include tab-badge-style($tabs-assertive-text, $tabs-assertive-bg);
 69 | }
 70 | .tabs-balanced > .tabs,
 71 | .tabs.tabs-balanced {
 72 |   @include tab-style($tabs-balanced-bg, $tabs-balanced-border, $tabs-balanced-text);
 73 |   @include tab-badge-style($tabs-balanced-text, $tabs-balanced-bg);
 74 | }
 75 | .tabs-energized > .tabs,
 76 | .tabs.tabs-energized {
 77 |   @include tab-style($tabs-energized-bg, $tabs-energized-border, $tabs-energized-text);
 78 |   @include tab-badge-style($tabs-energized-text, $tabs-energized-bg);
 79 | }
 80 | .tabs-royal > .tabs,
 81 | .tabs.tabs-royal {
 82 |   @include tab-style($tabs-royal-bg, $tabs-royal-border, $tabs-royal-text);
 83 |   @include tab-badge-style($tabs-royal-text, $tabs-royal-bg);
 84 | }
 85 | .tabs-dark > .tabs,
 86 | .tabs.tabs-dark {
 87 |   @include tab-style($tabs-dark-bg, $tabs-dark-border, $tabs-dark-text);
 88 |   @include tab-badge-style($tabs-dark-text, $tabs-dark-bg);
 89 | }
 90 | 
 91 | @mixin tabs-striped($style, $color, $background) {
 92 |   &.#{$style} {
 93 |     .tabs{
 94 |       background-color: $background;
 95 |     }
 96 |     .tab-item {
 97 |       color: rgba($color, $tabs-striped-off-opacity);
 98 |       opacity: 1;
 99 |       .badge{
100 |         opacity:$tabs-striped-off-opacity;
101 |       }
102 |       &.tab-item-active,
103 |       &.active,
104 |       &.activated {
105 |         margin-top: -$tabs-striped-border-width;
106 |         color: $color;
107 |         border-style: solid;
108 |         border-width: $tabs-striped-border-width 0 0 0;
109 |         border-color: $color;
110 |       }
111 |     }
112 |   }
113 |   &.tabs-top{
114 |     .tab-item {
115 |       &.tab-item-active,
116 |       &.active,
117 |       &.activated {
118 |         .badge {
119 |           top: 4%;
120 |         }
121 |       }
122 |     }
123 |   }
124 | }
125 | 
126 | @mixin tabs-background($style, $color, $border-color) {
127 |   .#{$style} {
128 |     .tabs,
129 |     &> .tabs{
130 |       background-color: $color;
131 |       background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
132 |       border-color: $border-color;
133 |     }
134 |   }
135 | }
136 | 
137 | @mixin tabs-striped-background($style, $color) {
138 |   &.#{$style} {
139 |     .tabs {
140 |       background-color: $color;
141 |       background-image:none;
142 |     }
143 |   }
144 | }
145 | 
146 | @mixin tabs-color($style, $color) {
147 |   .#{$style} {
148 |     .tab-item {
149 |       color: rgba($color, $tabs-off-opacity);
150 |       opacity: 1;
151 |       .badge{
152 |         opacity:$tabs-off-opacity;
153 |       }
154 |       &.tab-item-active,
155 |       &.active,
156 |       &.activated {
157 |         color: $color;
158 |         border: 0 solid $color;
159 |         .badge{
160 |           opacity: 1;
161 |         }
162 |       }
163 |     }
164 |   }
165 | }
166 | 
167 | @mixin tabs-striped-color($style, $color) {
168 |   &.#{$style} {
169 |     .tab-item {
170 |       color: rgba($color, $tabs-striped-off-opacity);
171 |       opacity: 1;
172 |       .badge{
173 |         opacity:$tabs-striped-off-opacity;
174 |       }
175 |       &.tab-item-active,
176 |       &.active,
177 |       &.activated {
178 |         margin-top: -$tabs-striped-border-width;
179 |         color: $color;
180 |         border: 0 solid $color;
181 |         border-top-width: $tabs-striped-border-width;
182 |         .badge{
183 |           top:$tabs-striped-border-width;
184 |           opacity: 1;
185 |         }
186 |       }
187 |     }
188 |   }
189 | }
190 | 
191 | .tabs-striped {
192 |   .tabs {
193 |     background-color: white;
194 |     background-image: none;
195 |     border: none;
196 |     border-bottom: 1px solid #ddd;
197 |     padding-top: $tabs-striped-border-width;
198 |   }
199 |   .tab-item {
200 |     // default android tab style
201 |     &.tab-item-active,
202 |     &.active,
203 |     &.activated {
204 |       margin-top: -$tabs-striped-border-width;
205 |       border-style: solid;
206 |       border-width: $tabs-striped-border-width 0 0 0;
207 |       border-color: $dark;
208 |       .badge{
209 |         top:$tabs-striped-border-width;
210 |         opacity: 1;
211 |       }
212 |     }
213 |   }
214 |   @include tabs-striped('tabs-light', $dark, $light);
215 |   @include tabs-striped('tabs-stable', $dark, $stable);
216 |   @include tabs-striped('tabs-positive', $light, $positive);
217 |   @include tabs-striped('tabs-calm', $light, $calm);
218 |   @include tabs-striped('tabs-assertive', $light, $assertive);
219 |   @include tabs-striped('tabs-balanced', $light, $balanced);
220 |   @include tabs-striped('tabs-energized', $light, $energized);
221 |   @include tabs-striped('tabs-royal', $light, $royal);
222 |   @include tabs-striped('tabs-dark', $light, $dark);
223 | 
224 |   // doing this twice so striped tabs styles don't override specific bg and color vals
225 |   @include tabs-striped-background('tabs-background-light', $light);
226 |   @include tabs-striped-background('tabs-background-stable', $stable);
227 |   @include tabs-striped-background('tabs-background-positive', $positive);
228 |   @include tabs-striped-background('tabs-background-calm', $calm);
229 |   @include tabs-striped-background('tabs-background-assertive', $assertive);
230 |   @include tabs-striped-background('tabs-background-balanced', $balanced);
231 |   @include tabs-striped-background('tabs-background-energized',$energized);
232 |   @include tabs-striped-background('tabs-background-royal', $royal);
233 |   @include tabs-striped-background('tabs-background-dark', $dark);
234 | 
235 |   @include tabs-striped-color('tabs-color-light', $light);
236 |   @include tabs-striped-color('tabs-color-stable', $stable);
237 |   @include tabs-striped-color('tabs-color-positive', $positive);
238 |   @include tabs-striped-color('tabs-color-calm', $calm);
239 |   @include tabs-striped-color('tabs-color-assertive', $assertive);
240 |   @include tabs-striped-color('tabs-color-balanced', $balanced);
241 |   @include tabs-striped-color('tabs-color-energized',$energized);
242 |   @include tabs-striped-color('tabs-color-royal', $royal);
243 |   @include tabs-striped-color('tabs-color-dark', $dark);
244 | 
245 | }
246 | 
247 | @include tabs-background('tabs-background-light', $light, $bar-light-border);
248 | @include tabs-background('tabs-background-stable', $stable, $bar-stable-border);
249 | @include tabs-background('tabs-background-positive', $positive, $bar-positive-border);
250 | @include tabs-background('tabs-background-calm', $calm, $bar-calm-border);
251 | @include tabs-background('tabs-background-assertive', $assertive, $bar-assertive-border);
252 | @include tabs-background('tabs-background-balanced', $balanced, $bar-balanced-border);
253 | @include tabs-background('tabs-background-energized',$energized, $bar-energized-border);
254 | @include tabs-background('tabs-background-royal', $royal, $bar-royal-border);
255 | @include tabs-background('tabs-background-dark', $dark, $bar-dark-border);
256 | 
257 | @include tabs-color('tabs-color-light', $light);
258 | @include tabs-color('tabs-color-stable', $stable);
259 | @include tabs-color('tabs-color-positive', $positive);
260 | @include tabs-color('tabs-color-calm', $calm);
261 | @include tabs-color('tabs-color-assertive', $assertive);
262 | @include tabs-color('tabs-color-balanced', $balanced);
263 | @include tabs-color('tabs-color-energized',$energized);
264 | @include tabs-color('tabs-color-royal', $royal);
265 | @include tabs-color('tabs-color-dark', $dark);
266 | 
267 | @mixin tabs-standard-color($style, $color, $off-color:$dark) {
268 |   &.#{$style} {
269 |     .tab-item {
270 |       color: $off-color;
271 |       &.tab-item-active,
272 |       &.active,
273 |       &.activated {
274 |         color: $color;
275 |       }
276 |     }
277 |   }
278 | }
279 | 
280 | ion-tabs {
281 |   @include tabs-standard-color('tabs-color-active-light', $light, $dark);
282 |   @include tabs-standard-color('tabs-color-active-stable', $stable, $dark);
283 |   @include tabs-standard-color('tabs-color-active-positive', $positive, $dark);
284 |   @include tabs-standard-color('tabs-color-active-calm', $calm, $dark);
285 |   @include tabs-standard-color('tabs-color-active-assertive', $assertive, $dark);
286 |   @include tabs-standard-color('tabs-color-active-balanced', $balanced, $dark);
287 |   @include tabs-standard-color('tabs-color-active-energized',$energized, $dark);
288 |   @include tabs-standard-color('tabs-color-active-royal', $royal, $dark);
289 |   @include tabs-standard-color('tabs-color-active-dark', $dark, $light);
290 | }
291 | 
292 | .tabs-top {
293 |   &.tabs-striped {
294 |     padding-bottom:0;
295 |     .tab-item{
296 |       background: transparent;
297 |       // animate the top bar, leave bottom for platform consistency
298 |       -webkit-transition: color .1s ease;
299 |       -moz-transition: color .1s ease;
300 |       -ms-transition: color .1s ease;
301 |       -o-transition: color .1s ease;
302 |       transition: color .1s ease;
303 |       &.tab-item-active,
304 |       &.active,
305 |       &.activated {
306 |         margin-top: $tabs-striped-border-width - 1px;
307 |         border-width: 0px 0px $tabs-striped-border-width 0px !important;
308 |         border-style: solid;
309 |         > .badge, > i{
310 |           margin-top: -$tabs-striped-border-width + 1px;
311 |         }
312 |       }
313 |       .badge{
314 |         -webkit-transition: color .2s ease;
315 |         -moz-transition: color .2s ease;
316 |         -ms-transition: color .2s ease;
317 |         -o-transition: color .2s ease;
318 |         transition: color .2s ease;
319 |       }
320 |     }
321 |    &:not(.tabs-icon-left):not(.tabs-icon-top){
322 |        .tab-item{
323 |           &.tab-item-active,
324 |           &.active,
325 |           &.activated {
326 |              .tab-title, i{
327 |             display:block;
328 |             margin-top: -$tabs-striped-border-width + 1px;
329 |           }
330 |         }
331 |       }
332 |     }
333 |     &.tabs-icon-left{
334 |        .tab-item{
335 |           margin-top: 1px;
336 |           &.tab-item-active,
337 |           &.active,
338 |           &.activated {
339 |             .tab-title, i {
340 |               margin-top: -0.1em;
341 |           }
342 |         }
343 |       }
344 |     }
345 |   }
346 | }
347 | 
348 | /* Allow parent element to have tabs-top */
349 | /* If you change this, change platform.scss as well */
350 | .tabs-top > .tabs,
351 | .tabs.tabs-top {
352 |   top: $bar-height;
353 |   padding-top: 0;
354 |   background-position: bottom;
355 |   border-top-width: 0;
356 |   border-bottom-width: 1px;
357 |   .tab-item {
358 |     &.tab-item-active,
359 |     &.active,
360 |     &.activated {
361 |       .badge {
362 |         top: 4%;
363 |       }
364 |     }
365 |   }
366 | }
367 | .tabs-top ~ .bar-header {
368 |   border-bottom-width: 0;
369 | }
370 | 
371 | .tab-item {
372 |   @include flex(1);
373 |   display: block;
374 |   overflow: hidden;
375 | 
376 |   max-width: $tab-item-max-width;
377 |   height: 100%;
378 | 
379 |   color: inherit;
380 |   text-align: center;
381 |   text-decoration: none;
382 |   text-overflow: ellipsis;
383 |   white-space: nowrap;
384 | 
385 |   font-weight: 400;
386 |   font-size: $tabs-text-font-size;
387 |   font-family: $font-family-sans-serif;
388 | 
389 |   opacity: 0.7;
390 | 
391 |   &:hover {
392 |     cursor: pointer;
393 |   }
394 |   &.tab-hidden{
395 |     display:none;
396 |   }
397 | }
398 | 
399 | .tabs-item-hide > .tabs,
400 | .tabs.tabs-item-hide {
401 |   display: none;
402 | }
403 | 
404 | .tabs-icon-top > .tabs .tab-item,
405 | .tabs-icon-top.tabs .tab-item,
406 | .tabs-icon-bottom > .tabs .tab-item,
407 | .tabs-icon-bottom.tabs .tab-item {
408 |   font-size: $tabs-text-font-size-side-icon;
409 |   line-height: $tabs-text-font-size;
410 | }
411 | 
412 | .tab-item .icon {
413 |   display: block;
414 |   margin: 0 auto;
415 |   height: $tabs-icon-size;
416 |   font-size: $tabs-icon-size;
417 | }
418 | 
419 | .tabs-icon-left.tabs .tab-item,
420 | .tabs-icon-left > .tabs .tab-item,
421 | .tabs-icon-right.tabs .tab-item,
422 | .tabs-icon-right > .tabs .tab-item {
423 |   font-size: $tabs-text-font-size-side-icon;
424 | 
425 |   .icon, .tab-title {
426 |     display: inline-block;
427 |     vertical-align: top;
428 |     margin-top: -.1em;
429 | 
430 |     &:before {
431 |     font-size: $tabs-icon-size - 8;
432 |     line-height: $tabs-height;
433 |     }
434 |   }
435 | }
436 | 
437 | .tabs-icon-left > .tabs .tab-item .icon,
438 | .tabs-icon-left.tabs .tab-item .icon {
439 |   padding-right: 3px;
440 | }
441 | 
442 | .tabs-icon-right > .tabs .tab-item .icon,
443 | .tabs-icon-right.tabs .tab-item .icon {
444 |   padding-left: 3px;
445 | }
446 | 
447 | .tabs-icon-only > .tabs .icon,
448 | .tabs-icon-only.tabs .icon {
449 |   line-height: inherit;
450 | }
451 | 
452 | 
453 | .tab-item.has-badge {
454 |   position: relative;
455 | }
456 | 
457 | .tab-item .badge {
458 |   position: absolute;
459 |   top: 4%;
460 |   right: 33%; // fallback
461 |   right: calc(50% - 26px);
462 |   padding: $tabs-badge-padding;
463 |   height: auto;
464 |   font-size: $tabs-badge-font-size;
465 |   line-height: $tabs-badge-font-size + 4;
466 | }
467 | 
468 | 
469 | /* Navigational tab */
470 | 
471 | /* Active state for tab */
472 | .tab-item.tab-item-active,
473 | .tab-item.active,
474 | .tab-item.activated {
475 |   opacity: 1;
476 | 
477 |   &.tab-item-light {
478 |     color: $light;
479 |   }
480 |   &.tab-item-stable {
481 |     color: $stable;
482 |   }
483 |   &.tab-item-positive {
484 |     color: $positive;
485 |   }
486 |   &.tab-item-calm {
487 |     color: $calm;
488 |   }
489 |   &.tab-item-assertive {
490 |     color: $assertive;
491 |   }
492 |   &.tab-item-balanced {
493 |     color: $balanced;
494 |   }
495 |   &.tab-item-energized {
496 |     color: $energized;
497 |   }
498 |   &.tab-item-royal {
499 |     color: $royal;
500 |   }
501 |   &.tab-item-dark {
502 |     color: $dark;
503 |   }
504 | }
505 | 
506 | .item.tabs {
507 |   @include display-flex();
508 |   padding: 0;
509 | 
510 |   .icon:before {
511 |     position: relative;
512 |   }
513 | }
514 | 
515 | .tab-item.disabled,
516 | .tab-item[disabled] {
517 |   opacity: .4;
518 |   cursor: default;
519 |   pointer-events: none;
520 | }
521 | 
522 | .nav-bar-tabs-top.hide ~ .view-container .tabs-top .tabs{
523 |   top: 0
524 | }
525 | .pane[hide-nav-bar="true"] .has-tabs-top{
526 |   top:49px
527 | }
528 | 
529 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_toggle.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Toggle
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | .item-toggle {
  8 |   pointer-events: none;
  9 | }
 10 | 
 11 | .toggle {
 12 |   // set the color defaults
 13 |   @include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
 14 | 
 15 |   position: relative;
 16 |   display: inline-block;
 17 |   pointer-events: auto;
 18 |   margin: -$toggle-hit-area-expansion;
 19 |   padding: $toggle-hit-area-expansion;
 20 | 
 21 |   &.dragging {
 22 |     .handle {
 23 |       background-color: $toggle-handle-dragging-bg-color !important;
 24 |     }
 25 |   }
 26 | 
 27 | }
 28 | 
 29 | .toggle {
 30 |   &.toggle-light  {
 31 |     @include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
 32 |   }
 33 |   &.toggle-stable  {
 34 |     @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
 35 |   }
 36 |   &.toggle-positive  {
 37 |     @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
 38 |   }
 39 |   &.toggle-calm  {
 40 |     @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
 41 |   }
 42 |   &.toggle-assertive  {
 43 |     @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
 44 |   }
 45 |   &.toggle-balanced  {
 46 |     @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
 47 |   }
 48 |   &.toggle-energized  {
 49 |     @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
 50 |   }
 51 |   &.toggle-royal  {
 52 |     @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
 53 |   }
 54 |   &.toggle-dark  {
 55 |     @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
 56 |   }
 57 | }
 58 | 
 59 | .toggle input {
 60 |   // hide the actual input checkbox
 61 |   display: none;
 62 | }
 63 | 
 64 | /* the track appearance when the toggle is "off" */
 65 | .toggle .track {
 66 |   @include transition-timing-function(ease-in-out);
 67 |   @include transition-duration($toggle-transition-duration);
 68 |   @include transition-property((background-color, border));
 69 | 
 70 |   display: inline-block;
 71 |   box-sizing: border-box;
 72 |   width: $toggle-width;
 73 |   height: $toggle-height;
 74 |   border: solid $toggle-border-width $toggle-off-border-color;
 75 |   border-radius: $toggle-border-radius;
 76 |   background-color: $toggle-off-bg-color;
 77 |   content: ' ';
 78 |   cursor: pointer;
 79 |   pointer-events: none;
 80 | }
 81 | 
 82 | /* Fix to avoid background color bleeding */
 83 | /* (occured on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */
 84 | .platform-android4_2 .toggle .track {
 85 |   -webkit-background-clip: padding-box;
 86 | }
 87 | 
 88 | /* the handle (circle) thats inside the toggle's track area */
 89 | /* also the handle's appearance when it is "off" */
 90 | .toggle .handle {
 91 |   @include transition($toggle-transition-duration cubic-bezier(0, 1.1, 1, 1.1));
 92 |   @include transition-property((background-color, transform));
 93 |   position: absolute;
 94 |   display: block;
 95 |   width: $toggle-handle-width;
 96 |   height: $toggle-handle-height;
 97 |   border-radius: $toggle-handle-radius;
 98 |   background-color: $toggle-handle-off-bg-color;
 99 |   top: $toggle-border-width + $toggle-hit-area-expansion;
100 |   left: $toggle-border-width + $toggle-hit-area-expansion;
101 |   box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.15);
102 | 
103 |   &:before {
104 |     // used to create a larger (but hidden) hit area to slide the handle
105 |     position: absolute;
106 |     top: -4px;
107 |     left: ( ($toggle-handle-width / 2) * -1) - 8;
108 |     padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
109 |     content: " ";
110 |   }
111 | }
112 | 
113 | .toggle input:checked + .track .handle {
114 |   // the handle when the toggle is "on"
115 |   @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
116 |   background-color: $toggle-handle-on-bg-color;
117 | }
118 | 
119 | .item-toggle.active {
120 |   box-shadow: none;
121 | }
122 | 
123 | .item-toggle,
124 | .item-toggle.item-complex .item-content {
125 |   // make sure list item content have enough padding on right to fit the toggle
126 |   padding-right: ($item-padding * 3) + $toggle-width;
127 | }
128 | 
129 | .item-toggle.item-complex {
130 |   padding-right: 0;
131 | }
132 | 
133 | .item-toggle .toggle {
134 |   // position the toggle to the right within a list item
135 |   position: absolute;
136 |   top: ($item-padding / 2) + 2;
137 |   right: $item-padding;
138 |   z-index: $z-index-item-toggle;
139 | }
140 | 
141 | .toggle input:disabled + .track {
142 |   opacity: .6;
143 | }
144 | 
145 | .toggle-small {
146 | 
147 |   .track {
148 |     border: 0;
149 |     width: 34px;
150 |     height: 15px;
151 |     background: #9e9e9e;
152 |   }
153 |   input:checked + .track {
154 |     background: rgba(0,150,137,.5);
155 |   }
156 |   .handle {
157 |     top: 2px;
158 |     left: 4px;
159 |     width: 21px;
160 |     height: 21px;
161 |     box-shadow: 0 2px 5px rgba(0,0,0,.25);
162 |   }
163 |   input:checked + .track .handle {
164 |     @include translate3d(16px, 0, 0);
165 |     background: rgb(0,150,137);
166 |   }
167 |   &.item-toggle .toggle {
168 |     top: 19px;
169 |   }
170 | 
171 |   .toggle-light  {
172 |     @include toggle-small-style($toggle-on-light-bg);
173 |   }
174 |   .toggle-stable  {
175 |     @include toggle-small-style($toggle-on-stable-bg);
176 |   }
177 |   .toggle-positive  {
178 |     @include toggle-small-style($toggle-on-positive-bg);
179 |   }
180 |   .toggle-calm  {
181 |     @include toggle-small-style($toggle-on-calm-bg);
182 |   }
183 |   .toggle-assertive  {
184 |     @include toggle-small-style($toggle-on-assertive-bg);
185 |   }
186 |   .toggle-balanced  {
187 |     @include toggle-small-style($toggle-on-balanced-bg);
188 |   }
189 |   .toggle-energized  {
190 |     @include toggle-small-style($toggle-on-energized-bg);
191 |   }
192 |   .toggle-royal  {
193 |     @include toggle-small-style($toggle-on-royal-bg);
194 |   }
195 |   .toggle-dark  {
196 |     @include toggle-small-style($toggle-on-dark-bg);
197 |   }
198 | }
199 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_transitions.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | // iOS View Transitions
  3 | // -------------------------------
  4 | 
  5 | $ios-transition-duration:              500ms !default;
  6 | $ios-transition-timing-function:       cubic-bezier(.36, .66, .04, 1) !default;
  7 | $ios-transition-container-bg-color:    #000 !default;
  8 | 
  9 | 
 10 | [nav-view-transition="ios"] {
 11 | 
 12 |   [nav-view="entering"],
 13 |   [nav-view="leaving"] {
 14 |     @include transition-duration( $ios-transition-duration );
 15 |     @include transition-timing-function( $ios-transition-timing-function );
 16 |     -webkit-transition-property: opacity, -webkit-transform, box-shadow;
 17 |             transition-property: opacity, transform, box-shadow;
 18 |   }
 19 | 
 20 |   &[nav-view-direction="forward"],
 21 |   &[nav-view-direction="back"] {
 22 |     background-color: $ios-transition-container-bg-color;
 23 |   }
 24 | 
 25 |   [nav-view="active"],
 26 |   &[nav-view-direction="forward"] [nav-view="entering"],
 27 |   &[nav-view-direction="back"] [nav-view="leaving"] {
 28 |     z-index: $z-index-view-above;
 29 |   }
 30 | 
 31 |   &[nav-view-direction="back"] [nav-view="entering"],
 32 |   &[nav-view-direction="forward"] [nav-view="leaving"] {
 33 |     z-index: $z-index-view-below;
 34 |   }
 35 | 
 36 | }
 37 | 
 38 | 
 39 | 
 40 | // iOS Nav Bar Transitions
 41 | // -------------------------------
 42 | 
 43 | [nav-bar-transition="ios"] {
 44 | 
 45 |   .title,
 46 |   .buttons,
 47 |   .back-text {
 48 |     @include transition-duration( $ios-transition-duration );
 49 |     @include transition-timing-function( $ios-transition-timing-function );
 50 |     -webkit-transition-property: opacity, -webkit-transform;
 51 |             transition-property: opacity, transform;
 52 |   }
 53 | 
 54 |   [nav-bar="active"],
 55 |   [nav-bar="entering"] {
 56 |     z-index: $z-index-bar-above;
 57 | 
 58 |    .bar {
 59 |       background: transparent;
 60 |     }
 61 |   }
 62 | 
 63 |   [nav-bar="cached"] {
 64 |     display: block;
 65 | 
 66 |     .header-item {
 67 |       display: none;
 68 |     }
 69 |   }
 70 | 
 71 | }
 72 | 
 73 | 
 74 | 
 75 | // Android View Transitions
 76 | // -------------------------------
 77 | 
 78 | $android-transition-duration:             200ms !default;
 79 | $android-transition-timing-function:      cubic-bezier(0.4, 0.6, 0.2, 1) !default;
 80 | 
 81 | 
 82 | [nav-view-transition="android"] {
 83 | 
 84 |   [nav-view="entering"],
 85 |   [nav-view="leaving"] {
 86 |     @include transition-duration( $android-transition-duration );
 87 |     @include transition-timing-function( $android-transition-timing-function );
 88 |     -webkit-transition-property: -webkit-transform;
 89 |             transition-property: transform;
 90 |   }
 91 | 
 92 |   [nav-view="active"],
 93 |   &[nav-view-direction="forward"] [nav-view="entering"],
 94 |   &[nav-view-direction="back"] [nav-view="leaving"] {
 95 |     z-index: $z-index-view-above;
 96 |   }
 97 | 
 98 |   &[nav-view-direction="back"] [nav-view="entering"],
 99 |   &[nav-view-direction="forward"] [nav-view="leaving"] {
100 |     z-index: $z-index-view-below;
101 |   }
102 | 
103 | }
104 | 
105 | 
106 | 
107 | // Android Nav Bar Transitions
108 | // -------------------------------
109 | 
110 | [nav-bar-transition="android"] {
111 | 
112 |   .title,
113 |   .buttons {
114 |     @include transition-duration( $android-transition-duration );
115 |     @include transition-timing-function( $android-transition-timing-function );
116 |     -webkit-transition-property: opacity;
117 |             transition-property: opacity;
118 |   }
119 | 
120 |   [nav-bar="active"],
121 |   [nav-bar="entering"] {
122 |     z-index: $z-index-bar-above;
123 | 
124 |    .bar {
125 |       background: transparent;
126 |     }
127 |   }
128 | 
129 |   [nav-bar="cached"] {
130 |     display: block;
131 | 
132 |     .header-item {
133 |       display: none;
134 |     }
135 |   }
136 | 
137 | }
138 | 
139 | 
140 | 
141 | // Nav Swipe
142 | // -------------------------------
143 | 
144 | [nav-swipe="fast"] {
145 |   [nav-view],
146 |   .title,
147 |   .buttons,
148 |   .back-text {
149 |     @include transition-duration(50ms);
150 |     @include transition-timing-function(linear);
151 |   }
152 | }
153 | 
154 | [nav-swipe="slow"] {
155 |   [nav-view],
156 |   .title,
157 |   .buttons,
158 |   .back-text {
159 |     @include transition-duration(160ms);
160 |     @include transition-timing-function(linear);
161 |   }
162 | }
163 | 
164 | 
165 | 
166 | // Transition Settings
167 | // -------------------------------
168 | 
169 | [nav-view="cached"],
170 | [nav-bar="cached"] {
171 |   display: none;
172 | }
173 | 
174 | [nav-view="stage"] {
175 |   opacity: 0;
176 |   @include transition-duration( 0 );
177 | }
178 | 
179 | [nav-bar="stage"] {
180 |   .title,
181 |   .buttons,
182 |   .back-text {
183 |     position: absolute;
184 |     opacity: 0;
185 |     @include transition-duration(0s);
186 |   }
187 | }
188 | 
189 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_type.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Typography
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | 
  8 | // Body text
  9 | // -------------------------
 10 | 
 11 | p {
 12 |   margin: 0 0 ($line-height-computed / 2);
 13 | }
 14 | 
 15 | 
 16 | // Emphasis & misc
 17 | // -------------------------
 18 | 
 19 | small   { font-size: 85%; }
 20 | cite    { font-style: normal; }
 21 | 
 22 | 
 23 | // Alignment
 24 | // -------------------------
 25 | 
 26 | .text-left           { text-align: left; }
 27 | .text-right          { text-align: right; }
 28 | .text-center         { text-align: center; }
 29 | 
 30 | 
 31 | // Headings
 32 | // -------------------------
 33 | 
 34 | h1, h2, h3, h4, h5, h6,
 35 | .h1, .h2, .h3, .h4, .h5, .h6 {
 36 |   color: $base-color;
 37 |   font-weight: $headings-font-weight;
 38 |   font-family: $headings-font-family;
 39 |   line-height: $headings-line-height;
 40 | 
 41 |   small {
 42 |     font-weight: normal;
 43 |     line-height: 1;
 44 |   }
 45 | }
 46 | 
 47 | h1, .h1,
 48 | h2, .h2,
 49 | h3, .h3 {
 50 |   margin-top: $line-height-computed;
 51 |   margin-bottom: ($line-height-computed / 2);
 52 | 
 53 |   &:first-child {
 54 |     margin-top: 0;
 55 |   }
 56 | 
 57 |   + h1, + .h1,
 58 |   + h2, + .h2,
 59 |   + h3, + .h3 {
 60 |     margin-top: ($line-height-computed / 2);
 61 |   }
 62 | }
 63 | 
 64 | h4, .h4,
 65 | h5, .h5,
 66 | h6, .h6 {
 67 |   margin-top: ($line-height-computed / 2);
 68 |   margin-bottom: ($line-height-computed / 2);
 69 | }
 70 | 
 71 | h1, .h1 { font-size: floor($font-size-base * 2.60); } // ~36px
 72 | h2, .h2 { font-size: floor($font-size-base * 2.15); } // ~30px
 73 | h3, .h3 { font-size: ceil($font-size-base * 1.70); } // ~24px
 74 | h4, .h4 { font-size: ceil($font-size-base * 1.25); } // ~18px
 75 | h5, .h5 { font-size:  $font-size-base; }
 76 | h6, .h6 { font-size: ceil($font-size-base * 0.85); } // ~12px
 77 | 
 78 | h1 small, .h1 small { font-size: ceil($font-size-base * 1.70); } // ~24px
 79 | h2 small, .h2 small { font-size: ceil($font-size-base * 1.25); } // ~18px
 80 | h3 small, .h3 small,
 81 | h4 small, .h4 small { font-size: $font-size-base; }
 82 | 
 83 | 
 84 | // Description Lists
 85 | // -------------------------
 86 | 
 87 | dl {
 88 |   margin-bottom: $line-height-computed;
 89 | }
 90 | dt,
 91 | dd {
 92 |   line-height: $line-height-base;
 93 | }
 94 | dt {
 95 |   font-weight: bold;
 96 | }
 97 | 
 98 | 
 99 | // Blockquotes
100 | // -------------------------
101 | 
102 | blockquote {
103 |   margin: 0 0 $line-height-computed;
104 |   padding: ($line-height-computed / 2) $line-height-computed;
105 |   border-left: 5px solid gray;
106 |   
107 |   p {
108 |     font-weight: 300;
109 |     font-size: ($font-size-base * 1.25);
110 |     line-height: 1.25;
111 |   }
112 |   
113 |   p:last-child {
114 |     margin-bottom: 0;
115 |   }
116 | 
117 |   small {
118 |     display: block;
119 |     line-height: $line-height-base;
120 |     &:before {
121 |       content: '\2014 \00A0';// EM DASH, NBSP;
122 |     }
123 |   }
124 | }
125 | 
126 | 
127 | // Quotes
128 | // -------------------------
129 | 
130 | q:before,
131 | q:after,
132 | blockquote:before,
133 | blockquote:after {
134 |   content: "";
135 | }
136 | 
137 | 
138 | // Addresses
139 | // -------------------------
140 | 
141 | address {
142 |   display: block;
143 |   margin-bottom: $line-height-computed;
144 |   font-style: normal;
145 |   line-height: $line-height-base;
146 | }
147 | 
148 | 
149 | // Links
150 | // -------------------------
151 | 
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 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/_util.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Utility Classes
  4 |  * --------------------------------------------------
  5 |  */
  6 | 
  7 | .hide {
  8 |   display: none;
  9 | }
 10 | .opacity-hide {
 11 |   opacity: 0;
 12 | }
 13 | .grade-b .opacity-hide,
 14 | .grade-c .opacity-hide {
 15 |   opacity: 1;
 16 |   display: none;
 17 | }
 18 | .show {
 19 |   display: block;
 20 | }
 21 | .opacity-show {
 22 |   opacity: 1;
 23 | }
 24 | .invisible {
 25 |   visibility: hidden;
 26 | }
 27 | 
 28 | .keyboard-open .hide-on-keyboard-open {
 29 |   display: none;
 30 | }
 31 | 
 32 | .keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs,
 33 | .keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer {
 34 |   bottom: 0;
 35 | }
 36 | 
 37 | .inline {
 38 |   display: inline-block;
 39 | }
 40 | 
 41 | .disable-pointer-events {
 42 |   pointer-events: none;
 43 | }
 44 | 
 45 | .enable-pointer-events {
 46 |   pointer-events: auto;
 47 | }
 48 | 
 49 | .disable-user-behavior {
 50 |   // used to prevent the browser from doing its native behavior. this doesnt
 51 |   // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc
 52 | 
 53 |   @include user-select(none);
 54 |   @include touch-callout(none);
 55 |   @include tap-highlight-transparent();
 56 | 
 57 |   -webkit-user-drag: none;
 58 | 
 59 |   -ms-touch-action: none;
 60 |   -ms-content-zooming: none;
 61 | }
 62 | 
 63 | // Fill the screen to block clicks (a better pointer-events: none) for the body
 64 | // to avoid full-page reflows and paints which can cause flickers
 65 | .click-block {
 66 |   position: absolute;
 67 |   top: 0;
 68 |   right: 0;
 69 |   bottom: 0;
 70 |   left: 0;
 71 |   opacity: 0;
 72 |   z-index: $z-index-click-block;
 73 |   @include translate3d(0, 0, 0);
 74 |   overflow: hidden;
 75 | }
 76 | .click-block-hide {
 77 |   @include translate3d(-9999px, 0, 0);
 78 | }
 79 | 
 80 | .no-resize {
 81 |   resize: none;
 82 | }
 83 | 
 84 | .block {
 85 |   display: block;
 86 |   clear: both;
 87 |   &:after {
 88 |     display: block;
 89 |     visibility: hidden;
 90 |     clear: both;
 91 |     height: 0;
 92 |     content: ".";
 93 |   }
 94 | }
 95 | 
 96 | .full-image {
 97 |   width: 100%;
 98 | }
 99 | 
100 | .clearfix {
101 |   *zoom: 1;
102 |   &:before,
103 |   &:after {
104 |     display: table;
105 |     content: "";
106 |     // Fixes Opera/contenteditable bug:
107 |     // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
108 |     line-height: 0;
109 |   }
110 |   &:after {
111 |     clear: both;
112 |   }
113 | }
114 | 
115 | /**
116 |  * Content Padding
117 |  * --------------------------------------------------
118 |  */
119 | 
120 | .padding {
121 |   padding: $content-padding;
122 | }
123 | 
124 | .padding-top,
125 | .padding-vertical {
126 |   padding-top: $content-padding;
127 | }
128 | 
129 | .padding-right,
130 | .padding-horizontal {
131 |   padding-right: $content-padding;
132 | }
133 | 
134 | .padding-bottom,
135 | .padding-vertical {
136 |   padding-bottom: $content-padding;
137 | }
138 | 
139 | .padding-left,
140 | .padding-horizontal {
141 |   padding-left: $content-padding;
142 | }
143 | 
144 | 
145 | /**
146 |  * Scrollable iFrames
147 |  * --------------------------------------------------
148 |  */
149 | 
150 | .iframe-wrapper {
151 |   position: fixed;
152 |   -webkit-overflow-scrolling: touch;
153 |   overflow: scroll;
154 | 
155 |   iframe {
156 |     height: 100%;
157 |     width: 100%;
158 |   }
159 | }
160 | 
161 | 
162 | /**
163 |  * Rounded
164 |  * --------------------------------------------------
165 |  */
166 | 
167 | .rounded {
168 |   border-radius: $border-radius-base;
169 | }
170 | 
171 | 
172 | /**
173 |  * Utility Colors
174 |  * --------------------------------------------------
175 |  * Utility colors are added to help set a naming convention. You'll
176 |  * notice we purposely do not use words like "red" or "blue", but
177 |  * instead have colors which represent an emotion or generic theme.
178 |  */
179 | 
180 | .light, a.light {
181 |   color: $light;
182 | }
183 | .light-bg {
184 |   background-color: $light;
185 | }
186 | .light-border {
187 |   border-color: $button-light-border;
188 | }
189 | 
190 | .stable, a.stable {
191 |   color: $stable;
192 | }
193 | .stable-bg {
194 |   background-color: $stable;
195 | }
196 | .stable-border {
197 |   border-color: $button-stable-border;
198 | }
199 | 
200 | .positive, a.positive {
201 |   color: $positive;
202 | }
203 | .positive-bg {
204 |   background-color: $positive;
205 | }
206 | .positive-border {
207 |   border-color: $button-positive-border;
208 | }
209 | 
210 | .calm, a.calm {
211 |   color: $calm;
212 | }
213 | .calm-bg {
214 |   background-color: $calm;
215 | }
216 | .calm-border {
217 |   border-color: $button-calm-border;
218 | }
219 | 
220 | .assertive, a.assertive {
221 |   color: $assertive;
222 | }
223 | .assertive-bg {
224 |   background-color: $assertive;
225 | }
226 | .assertive-border {
227 |   border-color: $button-assertive-border;
228 | }
229 | 
230 | .balanced, a.balanced {
231 |   color: $balanced;
232 | }
233 | .balanced-bg {
234 |   background-color: $balanced;
235 | }
236 | .balanced-border {
237 |   border-color: $button-balanced-border;
238 | }
239 | 
240 | .energized, a.energized {
241 |   color: $energized;
242 | }
243 | .energized-bg {
244 |   background-color: $energized;
245 | }
246 | .energized-border {
247 |   border-color: $button-energized-border;
248 | }
249 | 
250 | .royal, a.royal {
251 |   color: $royal;
252 | }
253 | .royal-bg {
254 |   background-color: $royal;
255 | }
256 | .royal-border {
257 |   border-color: $button-royal-border;
258 | }
259 | 
260 | .dark, a.dark {
261 |   color: $dark;
262 | }
263 | .dark-bg {
264 |   background-color: $dark;
265 | }
266 | .dark-border {
267 |   border-color: $button-dark-border;
268 | }
269 | 
270 | [collection-repeat] {
271 |   /* Position is set by transforms */
272 |   left: 0 !important;
273 |   top: 0 !important;
274 |   position: absolute !important;
275 |   z-index: 1;
276 | }
277 | .collection-repeat-container {
278 |   position: relative;
279 |   z-index: 1; //make sure it's above the after-container
280 | }
281 | .collection-repeat-after-container {
282 |   z-index: 0;
283 |   display: block;
284 | 
285 |   /* when scrolling horizontally, make sure the after container doesn't take up 100% width */
286 |   &.horizontal {
287 |     display: inline-block;
288 |   }
289 | }
290 | 
291 | // ng-show fix for windows phone
292 | // https://www.hoessl.eu/2014/12/on-using-the-ionic-framework-for-windows-phone-8-1-apps/
293 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
294 | .x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
295 |   display: none !important;
296 | }


--------------------------------------------------------------------------------
/example/lib/ionic/scss/ionic.scss:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | 
 3 | @import
 4 |   // Ionicons
 5 |   "ionicons/ionicons.scss",
 6 | 
 7 |   // Variables
 8 |   "mixins",
 9 |   "variables",
10 | 
11 |   // Base
12 |   "reset",
13 |   "scaffolding",
14 |   "type",
15 | 
16 |   // Components
17 |   "action-sheet",
18 |   "backdrop",
19 |   "bar",
20 |   "tabs",
21 |   "menu",
22 |   "modal",
23 |   "popover",
24 |   "popup",
25 |   "loading",
26 |   "items",
27 |   "list",
28 |   "badge",
29 |   "slide-box",
30 |   "refresher",
31 |   "spinner",
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 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/ionicons/_ionicons-font.scss:
--------------------------------------------------------------------------------
 1 | // Ionicons Font Path
 2 | // --------------------------
 3 | 
 4 | @font-face {
 5 |  font-family: $ionicons-font-family;
 6 |  src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}");
 7 |  src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}#iefix") format("embedded-opentype"),
 8 |   url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"),
 9 |   url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
10 |   url("#{$ionicons-font-path}/ionicons.woff") format("woff"), /* for WP8 */
11 |   url("#{$ionicons-font-path}/ionicons.svg?v=#{$ionicons-version}#Ionicons") format("svg");
12 |  font-weight: normal;
13 |  font-style: normal;
14 | }
15 | 
16 | .ion {
17 |   display: inline-block;
18 |   font-family: $ionicons-font-family;
19 |   speak: none;
20 |   font-style: normal;
21 |   font-weight: normal;
22 |   font-variant: normal;
23 |   text-transform: none;
24 |   text-rendering: auto;
25 |   line-height: 1;
26 |   -webkit-font-smoothing: antialiased;
27 |   -moz-osx-font-smoothing: grayscale;
28 | }
29 | 


--------------------------------------------------------------------------------
/example/lib/ionic/scss/ionicons/ionicons.scss:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | @import "ionicons-variables";
 3 | /*!
 4 |   Ionicons, v2.0.1
 5 |   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
 6 |   https://twitter.com/benjsperry  https://twitter.com/ionicframework
 7 |   MIT License: https://github.com/driftyco/ionicons
 8 | 
 9 |   Android-style icons originally built by Google’s
10 |   Material Design Icons: https://github.com/google/material-design-icons
11 |   used under CC BY http://creativecommons.org/licenses/by/4.0/
12 |   Modified icons to fit ionicon’s grid from original.
13 | */
14 | 
15 | @import "ionicons-font";
16 | @import "ionicons-icons";
17 | 


--------------------------------------------------------------------------------
/example/lib/ionic/version.json:
--------------------------------------------------------------------------------
1 | {
2 |   "version": "1.1.0",
3 |   "codename": "xenon-xerus",
4 |   "date": "2015-08-13",
5 |   "time": "19:56:13"
6 | }
7 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var concat = require('gulp-concat');
 3 | var uglify = require('gulp-uglify');
 4 | 
 5 | gulp.task('scripts', function() {
 6 |   var src = [
 7 |       'dist/ionic-multiselect.js',
 8 |   ];
 9 | 
10 |   return gulp.src(src)
11 |     .pipe(concat('ionic-multiselect.min.js'))
12 |     .pipe(uglify())
13 |     .pipe(gulp.dest('dist'))
14 | });
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-multiselect",
 3 |   "version": "0.1.8",
 4 |   "description": "Multiselect for Inonic Framework.",
 5 |   "main": "ionic-multiselect.js",
 6 |   "directories": {
 7 |     "example": "example"
 8 |   },
 9 |   "scripts": {
10 |     "test": "echo \"Error: no test specified\" && exit 1"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/mapeveri/ionic-multiselect"
15 |   },
16 |   "keywords": [
17 |     "AngularJs"
18 |   ],
19 |   "author": "Martín Peveri",
20 |   "license": "ISC",
21 |   "bugs": {
22 |     "url": "https://github.com/mapeveri/ionic-multiselect/issues"
23 |   },
24 |   "homepage": "https://github.com/mapeveri/ionic-multiselect",
25 |   "devDependencies": {
26 |     "gulp": "^3.9.0",
27 |     "gulp-concat": "^2.6.0",
28 |     "gulp-uglify": "^1.4.2"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------