Merge branch 'masteDerpr' of https://github.com/driftyco/ionic

Conflicts:
	dist/css/themes/ionic-ios7.css

dist/css/ionic.css

@@ -1,4 +1,9 @@
 @charset "UTF-8";
+/**
+ * Mixins
+ * --------------------------------------------------
+ * Useful utilities and mixins for SCSS files.
+ */
 @font-face {
   font-family: "Ionicons";
   src: url("../fonts/ionicons.eot?v=1.3.0");
@@ -1831,14 +1836,15 @@
   content: "\f2ba"; }
 
 /**
-* Adapted from normalize.css and some reset.css. We don't care even one
-* bit about old IE, so we don't need any hacks for that in here.
-* 
-* There are probably other things we could remove here, as well.
-*
-* normalize.css v2.1.2 | MIT License | git.io/normalize
-*/
-/**
+ * Resets
+ * --------------------------------------------------
+ * Adapted from normalize.css and some reset.css. We don't care even one
+ * bit about old IE, so we don't need any hacks for that in here.
+ * 
+ * There are probably other things we could remove here, as well.
+ *
+ * normalize.css v2.1.2 | MIT License | git.io/normalize
+ 
  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
  * http://cssreset.com
  */
@@ -2141,6 +2147,10 @@ table {
   border-spacing: 0;
   border-collapse: collapse; }
 
+/**
+ * Scaffolding
+ * --------------------------------------------------
+ */
 *,
 *:before,
 *:after {
@@ -2202,9 +2212,9 @@ body, .ionic-body {
 .scroll-content {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   overflow: hidden; }
 
 /**
@@ -2260,15 +2270,13 @@ body, .ionic-body {
   height: 100%;
   background-color: #fff; }
 
+/**
+ * Typography
+ * --------------------------------------------------
+ */
 p {
   margin: 0 0 10px; }
 
-.lead {
-  margin-bottom: 20px;
-  font-weight: 200;
-  font-size: 16.1px;
-  line-height: 1.4; }
-
 small {
   font-size: 85%; }
 
@@ -2397,6 +2405,10 @@ a.subdued‎ {
   a.subdued‎:last-child {
     padding-right: 0; }
 
+/**
+ * Action Sheets
+ * --------------------------------------------------
+ */
 .action-sheet {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
@@ -2427,6 +2439,10 @@ a.subdued‎ {
   border-radius: 3px;
   background-color: rgba(255, 255, 255, 0.95); }
 
+/**
+ * Bar (Headers and Footers)
+ * --------------------------------------------------
+ */
 .bar {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2722,7 +2738,7 @@ a.subdued‎ {
 
 /**
  * Tabs
- * 
+ * --------------------------------------------------
  * A navigation bar with any number of tab items supported.
  */
 .tabs {
@@ -2748,8 +2764,8 @@ a.subdued‎ {
   height: 49px;
   border-style: solid;
   border-top-width: 1px;
-  line-height: 49px;
-  background-size: 0; }
+  background-size: 0;
+  line-height: 49px; }
   .tabs.tabs-default {
     background-color: white;
     background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
@@ -2840,9 +2856,9 @@ a.subdued‎ {
   font-size: 10px; }
   .tabs-icon-left .tab-item .icon,
   .tabs-icon-right .tab-item .icon {
-    font-size: 24px;
     display: inline-block;
     vertical-align: top;
+    font-size: 24px;
     line-height: 49px; }
 
 .tabs-icon-only .icon {
@@ -2877,6 +2893,11 @@ a.subdued‎ {
   .item.tabs .icon {
     position: relative; }
 
+/**
+ * Menus
+ * --------------------------------------------------
+ * Side panel structure
+ */
 .menu {
   position: absolute;
   top: 0;
@@ -2904,21 +2925,28 @@ a.subdued‎ {
   transition: transform 200ms ease; }
 
 /**
+ * Modals
+ * --------------------------------------------------
  * Modals are independent windows that slide in from off-screen.
  */
 .modal {
-  position: fixed;
-  z-index: 10;
-  top: 0;
-  opacity: 0;
   -webkit-transform: translate3d(0, 100%, 0);
-  width: 100%;
-  min-height: 100%;
+  transform: translate3d(0, 100%, 0);
+  position: fixed;
+  top: 0;
+  z-index: 10;
   overflow: hidden;
-  background-color: white; }
+  min-height: 100%;
+  width: 100%;
+  background-color: white;
+  opacity: 0; }
   .modal.active {
     height: 100%; }
 
+/**
+ * Popups
+ * --------------------------------------------------
+ */
 .popup {
   position: fixed; }
 
@@ -2927,12 +2955,12 @@ a.subdued‎ {
 
 .loading-backdrop {
   position: fixed;
-  visibility: hidden;
-  -webkit-transition: visibility 0s linear 0.3s;
   top: 0;
   left: 0;
+  visibility: hidden;
   width: 100%;
-  height: 100%; }
+  height: 100%;
+  -webkit-transition: visibility 0s linear 0.3s; }
   .loading-backdrop.enabled {
     background-color: rgba(0, 0, 0, 0.7); }
   .loading-backdrop.active {
@@ -2941,18 +2969,22 @@ a.subdued‎ {
 
 .loading {
   position: fixed;
-  left: 50%;
   top: 50%;
-  text-align: center;
-  text-overflow: ellipsis;
-  border-radius: 5px;
+  left: 50%;
   padding: 20px;
+  border-radius: 5px;
   background-color: rgba(0, 0, 0, 0.7);
   color: #fff;
+  text-align: center;
+  text-overflow: ellipsis;
   font-size: 15px; }
   .loading h1, .loading h2, .loading h3, .loading h4, .loading h5 {
     color: #fff; }
 
+/**
+ * Items
+ * --------------------------------------------------
+ */
 .item {
   position: relative;
   z-index: 2;
@@ -3428,6 +3460,10 @@ button.item-button-right:after {
     border: none;
     border-radius: 0; }
 
+/**
+ * Lists
+ * --------------------------------------------------
+ */
 .list {
   position: relative;
   overflow: hidden;
@@ -3519,12 +3555,20 @@ button.item-button-right:after {
 .padding-right > .list .item-divider {
   margin-right: 0; }
 
+/**
+ * Nav
+ * --------------------------------------------------
+ */
 .nav-content {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: white; }
 
+/**
+ * Badges
+ * --------------------------------------------------
+ */
 .badge {
   display: inline-block;
   min-width: 10px;
@@ -3584,6 +3628,10 @@ button.item-button-right:after {
 .badge-gray-ligher {
   background: #eeeeee; }
 
+/**
+ * Slide Box
+ * --------------------------------------------------
+ */
 .slide-box {
   background-color: #000;
   position: relative;
@@ -3621,9 +3669,11 @@ button.item-button-right:after {
       -webkit-transition: opacity 0.4s ease-in;
       opacity: 1; }
 
+/**
+ * Split Pane
+ * --------------------------------------------------
+ */
 .split-pane {
-  height: 100%;
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-flex;
@@ -3633,7 +3683,9 @@ button.item-button-right:after {
   -ms-flex-align: stretch;
   -webkit-align-items: stretch;
   -moz-align-items: stretch;
-  align-items: stretch; }
+  align-items: stretch;
+  width: 100%;
+  height: 100%; }
 
 .split-pane-menu {
   -webkit-box-flex: 0;
@@ -3642,10 +3694,10 @@ button.item-button-right:after {
   -moz-flex: 0 0 320px;
   -ms-flex: 0 0 320px;
   flex: 0 0 320px;
-  height: 100%;
+  overflow-y: auto;
   width: 320px;
-  border-right: 1px solid #eeeeee;
-  overflow-y: auto; }
+  height: 100%;
+  border-right: 1px solid #eeeeee; }
   @media all and (max-width: 568px) {
     .split-pane-menu {
       border-right: none; } }
@@ -3658,6 +3710,10 @@ button.item-button-right:after {
   -ms-flex: 1 0 auto;
   flex: 1 0 auto; }
 
+/**
+ * Forms
+ * --------------------------------------------------
+ */
 form {
   margin: 0 0 1.42857; }
 
@@ -3867,6 +3923,10 @@ input[type="radio"][readonly],
 input[type="checkbox"][readonly] {
   background-color: transparent; }
 
+/**
+ * Checkbox
+ * --------------------------------------------------
+ */
 .checkbox {
   position: relative;
   display: inline-block;
@@ -3932,6 +3992,10 @@ input[type="checkbox"][readonly] {
   height: 100%;
   align-items: center; }
 
+/**
+ * Toggle
+ * --------------------------------------------------
+ */
 /* the overall container of the toggle */
 .toggle {
   position: relative;
@@ -3959,6 +4023,8 @@ input[type="checkbox"][readonly] {
 /* the handle (circle) thats inside the toggle's track area */
 /* also the handle's appearance when it is "off" */
 .toggle .handle {
+  -webkit-transition: 0.1s ease-in-out;
+  transition: 0.1s ease-in-out;
   position: absolute;
   top: 2px;
   left: 2px;
@@ -3967,8 +4033,6 @@ input[type="checkbox"][readonly] {
   height: 28px;
   border-radius: 50%;
   background-color: white;
-  -webkit-transition: 0.1s ease-in-out;
-  transition: 0.1s ease-in-out;
   /* used to create a larger (but hidden) hit area to slide the handle */ }
   .toggle .handle:before {
     position: absolute;
@@ -3999,6 +4063,10 @@ input[type="checkbox"][readonly] {
   right: 15px;
   z-index: 3; }
 
+/**
+ * Radio Button Inputs
+ * --------------------------------------------------
+ */
 .item-radio {
   padding: 0; }
   .item-radio:hover {
@@ -4019,16 +4087,20 @@ input[type="checkbox"][readonly] {
   height: 100%;
   font-size: 24px; }
 
-.item-radio input[type="radio"] {
+.item-radio input {
   /* hide any radio button inputs elements (the ugly circles) */
   display: none; }
-  .item-radio input[type="radio"]:checked ~ .item-content {
+  .item-radio input:checked ~ .item-content {
     /* style the item content when its checked */
     background: #f7f7f7; }
-  .item-radio input[type="radio"]:checked ~ .radio-icon {
+  .item-radio input:checked ~ .radio-icon {
     /* show the checkmark icon when its checked */
     visibility: visible; }
 
+/**
+ * Range
+ * --------------------------------------------------
+ */
 input[type="range"] {
   display: inline-block;
   margin-top: 20px;
@@ -4057,6 +4129,10 @@ input[type="range"] {
     padding: 20px;
     content: ' '; }
 
+/**
+ * Buttons
+ * --------------------------------------------------
+ */
 .button {
   position: relative;
   display: inline-block;
@@ -4340,6 +4416,10 @@ button.button-full,
 a.button {
   text-decoration: none; }
 
+/**
+ * Button Bar
+ * --------------------------------------------------
+ */
 .button-bar {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4380,6 +4460,13 @@ a.button {
     border-right-width: 1px;
     border-radius: 0px 2px 2px 0px; }
 
+/**
+ * Animations
+ * --------------------------------------------------
+ * The animations in this file are "simple" - not too complex
+ * and pretty easy on performance. They can be overidden
+ * and enhanced easily.
+ */
 @-webkit-keyframes slideInLeft {
   0% {
     -webkit-transform: translate3d(100%, 0, 0); }
@@ -4552,6 +4639,10 @@ a.button {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg); } }
 
+/**
+ * Icons
+ * --------------------------------------------------
+ */
 .ion-default {
   color: white; }
 
@@ -4655,6 +4746,10 @@ a.button {
   .ion-refreshing:before {
     content: "\e144"; }
 
+/**
+ * Util
+ * --------------------------------------------------
+ */
 .hidden,
 .hide {
   display: none !important; }
@@ -4745,6 +4840,10 @@ a.button {
 .white {
   color: white; }
 
+/**
+ * Platform
+ * --------------------------------------------------
+ */
 .platform-ios7 .bar-header {
   height: 64px; }
   .platform-ios7 .bar-header > * {

scss/_action-sheet.scss

@@ -1,6 +1,8 @@
 
-// Action Sheets
-// --------------------------------------------------
+/**
+ * Action Sheets
+ * --------------------------------------------------
+ */
 
 .action-sheet {
   @include translate3d(0, 100%, 0);

scss/_animations.scss

@@ -1,6 +1,11 @@
-// The animations in this file are "simple" - not too complex
-// and pretty easy on performance. They can be overidden
-// and enhanced easily.
+
+/**
+ * Animations
+ * --------------------------------------------------
+ * The animations in this file are "simple" - not too complex
+ * and pretty easy on performance. They can be overidden
+ * and enhanced easily.
+ */
 
 @-webkit-keyframes slideInLeft {
   0% {

scss/_badge.scss

@@ -1,6 +1,8 @@
 
-// Badges
-// --------------------------------------------------
+/**
+ * Badges
+ * --------------------------------------------------
+ */
 
 .badge {
   display: inline-block;

scss/_bar.scss

@@ -1,6 +1,8 @@
 
-// Bar (Headers and Footers)
-// -------------------------------
+/**
+ * Bar (Headers and Footers)
+ * --------------------------------------------------
+ */
 
 .bar {
   @include user-select(none);

scss/_button-bar.scss

@@ -1,4 +1,9 @@
 
+/**
+ * Button Bar
+ * --------------------------------------------------
+ */
+
 .button-bar {
   @include display-flex();
   @include flex(1);

scss/_button.scss

@@ -1,6 +1,8 @@
 
-// Buttons
-// -------------------------------
+/**
+ * Buttons
+ * --------------------------------------------------
+ */
 
 .button {
   position: relative;

scss/_checkbox.scss

@@ -1,6 +1,8 @@
 
-// Checkbox
-// -------------------------------
+/**
+ * Checkbox
+ * --------------------------------------------------
+ */
 
 .checkbox {
   position: relative;

scss/_form.scss

@@ -1,6 +1,8 @@
 
-// Forms
-// -------------------------------
+/**
+ * Forms
+ * --------------------------------------------------
+ */
 
 // Make all forms have space below them
 form {

scss/_icons.scss

@@ -1,6 +1,8 @@
 
-// Icons
-// -------------------------------
+/**
+ * Icons
+ * --------------------------------------------------
+ */
 
 .ion-default {
   color: $brand-default;

scss/_items.scss

@@ -1,6 +1,8 @@
 
-// Item
-// -------------------------------
+/**
+ * Items
+ * --------------------------------------------------
+ */
 
 .item {
   position: relative;

scss/_list.scss

@@ -1,6 +1,8 @@
 
-// List
-// -------------------------------
+/**
+ * Lists
+ * --------------------------------------------------
+ */
 
 .list {
   position: relative;

scss/_menu.scss

@@ -1,6 +1,9 @@
-//
-// Side panel structure
-// Author: Adam Bradley <adam@drifty.com>
+
+/**
+ * Menus
+ * --------------------------------------------------
+ * Side panel structure
+ */
 
 .menu {
   position: absolute;

scss/_mixins.scss

@@ -1,6 +1,9 @@
-// _mixins.scss
-//
-// Useful utilities and mixins for SCSS files.
+
+/**
+ * Mixins
+ * --------------------------------------------------
+ * Useful utilities and mixins for SCSS files.
+ */
 
 @mixin button-style($bgColor, $borderColor, $activeBgColor, $activeBorderColor, $color) {
   color: $color;

scss/_modal.scss

@@ -1,27 +1,25 @@
+
 /**
+ * Modals
+ * --------------------------------------------------
  * Modals are independent windows that slide in from off-screen.
  */
 
 .modal {
+  @include translate3d(0, 100%, 0);
   position: fixed;
-
-  z-index: $zindex-modal;
-
   top: 0; 
-
-  opacity: 0;
-  -webkit-transform: translate3d(0,100%,0);
-
-  width: 100%;
-  min-height: 100%;
-
+  z-index: $zindex-modal;
   overflow: hidden;
 
+  min-height: 100%;
+  width: 100%;
+
   background-color: $modal-bg-color;
+  opacity: 0;
 
   // Active modal
   &.active {
     height: 100%;
   }
 }
-

scss/_nav.scss

@@ -1,4 +1,10 @@
-.nav-content {
+
+/**
+ * Nav
+ * --------------------------------------------------
+ */
+
+ .nav-content {
   position: absolute;
   width: 100%;
   height: 100%;

scss/_platform.scss

@@ -1,3 +1,9 @@
+
+/**
+ * Platform
+ * --------------------------------------------------
+ */
+
 .platform-ios7 {
   .bar-header {
     height: 64px;

scss/_popup.scss

@@ -1,3 +1,9 @@
+
+/**
+ * Popups
+ * --------------------------------------------------
+ */
+
 .popup {
   position: fixed;
 }
@@ -15,15 +21,15 @@
 
 .loading-backdrop {
   position: fixed;
-  visibility: hidden;
-
-  -webkit-transition: visibility 0s linear 0.3s;
 
   top: 0;
   left: 0;
+  visibility: hidden;
   width: 100%;
   height: 100%;
 
+  -webkit-transition: visibility 0s linear 0.3s;
+
   &.enabled {
     background-color: rgba(0,0,0,0.7);
   }
@@ -36,17 +42,17 @@
 
 .loading {
   position: fixed;
-  left: 50%;
   top: 50%;
-
-  text-align: center;
-  text-overflow: ellipsis;
+  left: 50%;
+  padding: 20px;
 
   border-radius: 5px;
-  padding: 20px;
   background-color: rgba(0,0,0,0.7);
 
   color: #fff;
+
+  text-align: center;
+  text-overflow: ellipsis;
   font-size: 15px;
 
   h1,h2,h3,h4,h5 {

scss/_radio.scss

@@ -1,6 +1,8 @@
 
-// Radio Buttons
-// -------------------------------
+/**
+ * Radio Button Inputs
+ * --------------------------------------------------
+ */
 
 .item-radio {
   padding: 0;
@@ -27,7 +29,7 @@
   font-size: 24px;
 }
 
-.item-radio input[type="radio"] {
+.item-radio input {
   /* hide any radio button inputs elements (the ugly circles) */
   display: none;
 

scss/_range.scss

@@ -1,6 +1,8 @@
 
-// Range
-// -------------------------------
+/**
+ * Range
+ * --------------------------------------------------
+ */
 
 input[type="range"] {
   display: inline-block;

scss/_reset.scss

@@ -1,16 +1,18 @@
-/**
-* Adapted from normalize.css and some reset.css. We don't care even one
-* bit about old IE, so we don't need any hacks for that in here.
-* 
-* There are probably other things we could remove here, as well.
-*
-* normalize.css v2.1.2 | MIT License | git.io/normalize
-*/
 
 /**
+ * Resets
+ * --------------------------------------------------
+ * Adapted from normalize.css and some reset.css. We don't care even one
+ * bit about old IE, so we don't need any hacks for that in here.
+ * 
+ * There are probably other things we could remove here, as well.
+ *
+ * normalize.css v2.1.2 | MIT License | git.io/normalize
+ 
  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
  * http://cssreset.com
  */
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,

scss/_scaffolding.scss

@@ -1,3 +1,9 @@
+
+/**
+ * Scaffolding
+ * --------------------------------------------------
+ */
+
 *,
 *:before,
 *:after {
@@ -68,9 +74,9 @@ body, .ionic-body {
 .scroll-content {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   overflow: hidden;
 }
 

scss/_slide-box.scss

@@ -1,3 +1,9 @@
+
+/**
+ * Slide Box
+ * --------------------------------------------------
+ */
+
 .slide-box {
   background-color: #000;
   position: relative;

scss/_split-pane.scss

@@ -1,21 +1,29 @@
+
+/**
+ * Split Pane
+ * --------------------------------------------------
+ */
+
 .split-pane {
-  height: 100%;
-  width: 100%;
   @include display-flex();
   @include align-items(stretch);
+  width: 100%;
+  height: 100%;
 }
+
 .split-pane-menu {
   @include flex(0, 0, $split-pane-menu-width);
-  height: 100%;
-  width: $split-pane-menu-width;
-  border-right: 1px solid $split-pane-menu-border-color;
 
   overflow-y: auto;
+  width: $split-pane-menu-width;
+  height: 100%;
+  border-right: 1px solid $split-pane-menu-border-color;
 
   @media all and (max-width: 568px) {
     border-right: none;
   }
 }
+
 .split-pane-content {
   @include flex(1, 0, auto);
 }

scss/_tabs.scss

@@ -1,6 +1,7 @@
+
 /**
  * Tabs
- * 
+ * --------------------------------------------------
  * A navigation bar with any number of tab items supported.
  */
 
@@ -17,6 +18,8 @@
   border-style: solid;
 
   border-top-width: 1px;
+
+  background-size: 0;
   line-height: $tabs-height;
 
   &.tabs-default {
@@ -43,8 +46,6 @@
   &.tabs-dark {
     @include tab-style($tabs-dark-bg, $tabs-dark-border-color, $white);
   }
-
-  background-size: 0;
   @media (min--moz-device-pixel-ratio: 1.5),
          (-webkit-min-device-pixel-ratio: 1.5),
          (min-device-pixel-ratio: 1.5),
@@ -105,9 +106,9 @@
   font-size: $tabs-text-with-icon-font-size;
 
   .icon {
-    font-size: $tabs-icon-size - 8;
     display: inline-block;
     vertical-align: top;
+    font-size: $tabs-icon-size - 8;
     line-height: $tabs-height;
   }
 }
@@ -153,4 +154,3 @@
     position: relative;
   }
 }
-

scss/_toggle.scss

@@ -1,6 +1,8 @@
 
-// Toggle
-// -------------------------------
+/**
+ * Toggle
+ * --------------------------------------------------
+ */
 
 /* the overall container of the toggle */
 .toggle {
@@ -33,6 +35,7 @@
 /* the handle (circle) thats inside the toggle's track area */
 /* also the handle's appearance when it is "off" */
 .toggle .handle {
+  @include transition($toggle-transition-duration ease-in-out);
   position: absolute;
   top: $toggle-border-width;
   left: $toggle-border-width;
@@ -41,7 +44,6 @@
   height: $toggle-handle-height;
   border-radius: $toggle-handle-radius;
   background-color: $toggle-handle-off-bg-color;
-  @include transition($toggle-transition-duration ease-in-out);
 
   /* used to create a larger (but hidden) hit area to slide the handle */
   &:before {

scss/_type.scss

@@ -1,6 +1,8 @@
 
-// Typography
-// --------------------------------------------------
+/**
+ * Typography
+ * --------------------------------------------------
+ */
 
 
 // Body text
@@ -9,12 +11,6 @@
 p {
   margin: 0 0 ($line-height-computed / 2);
 }
-.lead {
-  margin-bottom: $line-height-computed;
-  font-weight: 200;
-  font-size: ($font-size-base * 1.15);
-  line-height: 1.4;
-}
 
 
 // Emphasis & misc
@@ -41,6 +37,7 @@ h1, h2, h3, h4, h5, h6,
   font-weight: $headings-font-weight;
   font-family: $headings-font-family;
   line-height: $headings-line-height;
+
   small {
     font-weight: normal;
     line-height: 1;
@@ -173,4 +170,3 @@ a.subdued‎ {
     padding-right: 0;
   }
 }
-

scss/_util.scss

@@ -1,3 +1,9 @@
+
+/**
+ * Util
+ * --------------------------------------------------
+ */
+
 .hidden, 
 .hide { 
   display: none !important; 
@@ -26,6 +32,7 @@
   width: 100%;
 }
 
+
 // Content Padding
 // -------------------------------
 
@@ -61,6 +68,7 @@
   border-radius: $border-radius-base;
 }
 
+
 // Colors
 // -------------------------------
 
@@ -110,4 +118,3 @@
 .white {
   color: $white;
 }
-