Merge remote-tracking branch 'origin/css-refactor' into css-refactor

CHANGELOG.md

@@ -0,0 +1,25 @@
+<a name="2.0.0-alpha.41"></a>
+# 2.0.0-alpha.41 (2015-12-8)
+
+
+### Breaking Changes
+
+#### CSS Refactor
+
+* Attributes are now used by Ionic to add the correct CSS classes to elements
+* Drastically reduced the depth of CSS selectors
+* Further modularized Sass files to allow individual imports
+* Ionic CSS comes in 3 flavors
+    * `ionic.css`: Core CSS, iOS CSS, and Material Design CSS
+    * `ionic.ios.css`: Core CSS and iOS CSS
+    * `ionic.md.css`: Core CSS and Material Design CSS
+* App's `index.html` file can be setup to dynamically load only the stylesheet it needs
+* Different Sass color maps for iOS and Material Design
+    * Allows colors to be different per platform
+    * ie: Gray navbars in iOS, blue navbars in MD. Identical HTML/JS
+
+
+####  `<ion-nav-items>` renamed to `<ion-buttons>`
+
+* `primary` attribute `<ion-nav-items primary>` now `<ion-buttons start>`
+* `secondary` attribute `<ion-nav-items secondary>` now `<ion-buttons end>`

ionic/components/item/item.scss

@@ -13,11 +13,15 @@
   margin: 0;
   padding: 0;
   border: 0;
+  width: 100%;
   min-height: 4.4rem;
-  text-align: initial;
   overflow: hidden;
 
-  box-sizing: border-box;
+  text-align: initial;
+  font-weight: normal;
+  line-height: normal;
+  text-decoration: none;
+  color: inherit;
 }
 
 .item-inner {
@@ -26,7 +30,6 @@
   padding: 0;
   border: 0;
   overflow: hidden;
-  box-sizing: border-box;
 
   flex: 1;
   flex-direction: inherit;
@@ -34,12 +37,9 @@
   align-self: stretch;
 }
 
-.item[no-lines] {
+.item[no-lines],
+.item[no-lines] .item-inner {
   border: none;
-
-  .item-inner {
-    border: none;
-  }
 }
 
 ion-item-group {
@@ -49,9 +49,9 @@ ion-item-group {
 ion-item-divider {
   display: block;
   min-height: 30px;
-  font-weight: 500;
   width: 100%;
   z-index: 1000;
+  font-weight: 500;
 
   &[sticky] {
     position: -webkit-sticky;
@@ -60,23 +60,6 @@ ion-item-divider {
   }
 }
 
-a.item,
-button.item {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  width: 100%;
-  justify-content: inherit;
-  min-height: 4.4rem;
-  font-weight: normal;
-  line-height: normal;
-  text-decoration: none;
-  text-transform: none;
-  color: inherit;
-  border-radius: 0;
-  box-shadow: none;
-}
-
 ion-item-content {
   margin: 0;
   flex: 1;
@@ -86,7 +69,8 @@ ion-item-content {
   pointer-events: none;
 
   a,
-  button {
+  button,
+  [tappable] {
     pointer-events: auto;
   }
 }
@@ -103,3 +87,6 @@ ion-input.item {
 ion-item-content + ion-item-content[cnt] {
   display: none;
 }
+
+@import "item-media";
+@import "item-sliding";

ionic/components/item/modes/ios.scss

@@ -209,8 +209,6 @@ ion-item-divider {
 }
 
 
-&.hairlines {
+&.hairlines .item-inner {
-  .item-inner {
   border-bottom-width: 0.55px;
 }
-}