update item

ionic/components/item/item.scss

@@ -18,14 +18,6 @@
   overflow: hidden;
 
   box-sizing: border-box;
-
-  &[no-lines] {
-    border: none;
-
-    .item-inner {
-      border: none;
-    }
-  }
 }
 
 .item-inner {
@@ -42,6 +34,14 @@
   align-self: stretch;
 }
 
+.item[no-lines] {
+  border: none;
+
+  .item-inner {
+    border: none;
+  }
+}
+
 ion-item-group {
   display: block;
 }
@@ -64,6 +64,7 @@ a.item,
 button.item {
   margin: 0;
   padding: 0;
+  border: 0;
   width: 100%;
   justify-content: inherit;
   min-height: 4.4rem;
@@ -74,7 +75,6 @@ button.item {
   color: inherit;
   border-radius: 0;
   box-shadow: none;
-  will-change: initial;
 }
 
 ion-item-content {
@@ -95,52 +95,6 @@ ion-item-content {
   white-space: normal;
 }
 
-.item {
-
-  h1 {
-    margin: 0 0 2px;
-    font-size: 2.4rem;
-    font-weight: normal;
-  }
-
-  h2 {
-    margin: 0 0 2px;
-    font-size: 1.6rem;
-    font-weight: normal;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: normal;
-    margin: 0 0 3px 0;
-    font-size: 1.4rem;
-    font-weight: normal;
-  }
-
-  p {
-    line-height: normal;
-    color: #666;
-    font-size: 1.2rem;
-    margin: 0 0 2px;
-  }
-
-  h2:last-child,
-  h3:last-child,
-  h4:last-child,
-  h5:last-child,
-  h6:last-child,
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-}
-
 .vertical-align-top,
 ion-input.item {
   align-items: flex-start;

ionic/components/item/modes/ios.scss

@@ -18,54 +18,65 @@ $item-ios-sliding-content-bg:         $background-ios-color !default;
 $item-ios-sliding-transition:         transform 250ms ease-in-out !default;
 
 
-.item {
+// iOS Item
-  background-color: $list-ios-background-color;
+// --------------------------------------------------
-  color: $list-ios-text-color;
-}
-
-
-ion-item-group {
-  .item:first-child {
-    .item-inner {
-      border-top-width: 0;
-    }
-  }
-
-  .item:last-child .item-inner,
-  ion-item-sliding:last-child .item .item-inner {
-    border: none;
-  }
-}
-
-ion-item-divider {
-  padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
-  background-color: $item-ios-divider-bg;
-  color: $item-ios-divider-color;
-}
-
-ion-note {
-  color: $item-ios-note-color;
-}
 
 .item {
-  border-radius: 0;
   padding-left: $item-ios-padding-left;
   font-size: $item-ios-font-size;
+  border-radius: 0;
+  color: $list-ios-text-color;
+  background-color: $list-ios-background-color;
+  transition-duration: 200ms;
+
+  h1 {
+    margin: 0 0 2px;
+    font-size: 2.4rem;
+    font-weight: normal;
   }
 
-.item.activated,
+  h2 {
-a.item.activated,
+    margin: 0 0 2px;
-button.item.activated {
+    font-size: 1.6rem;
+    font-weight: normal;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: normal;
+    margin: 0 0 3px 0;
+    font-size: 1.4rem;
+    font-weight: normal;
+  }
+
+  p {
+    line-height: normal;
+    color: #666;
+    font-size: 1.2rem;
+    margin: 0 0 2px;
+  }
+
+  h2:last-child,
+  h3:last-child,
+  h4:last-child,
+  h5:last-child,
+  h6:last-child,
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.item.activated {
   background-color: $list-ios-activated-background-color;
   transition-duration: 0ms;
 }
 
-.item,
-a.item,
-button.item {
-  transition-duration: 200ms;
-}
-
 .item-inner {
   padding-right: ($item-ios-padding-right / 2);
   border-bottom: 1px solid $list-ios-border-color;
@@ -75,6 +86,10 @@ ion-item-content {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
 }
 
+
+// iOS Item Media
+// --------------------------------------------------
+
 [item-left] {
   margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
 }
@@ -152,6 +167,10 @@ ion-thumbnail {
   }
 }
 
+ion-note {
+  color: $item-ios-note-color;
+}
+
 button.item:not([detail-none]) .item-inner,
 a.item:not([detail-none]) .item-inner,
 .item[detail-push] .item-inner {
@@ -162,6 +181,34 @@ a.item:not([detail-none]) .item-inner,
   padding-right: 32px;
 }
 
+
+// iOS Item Group
+// --------------------------------------------------
+
+ion-item-group {
+  .item:first-child {
+    .item-inner {
+      border-top-width: 0;
+    }
+  }
+
+  .item:last-child .item-inner,
+  ion-item-sliding:last-child .item .item-inner {
+    border: none;
+  }
+}
+
+
+// iOS Item Divider
+// --------------------------------------------------
+
+ion-item-divider {
+  padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+  color: $item-ios-divider-color;
+  background-color: $item-ios-divider-bg;
+}
+
+
 &.hairlines {
   .item-inner {
     border-bottom-width: 0.55px;

ionic/components/item/modes/md.scss

@@ -20,16 +20,6 @@ $item-md-sliding-content-bg:         $background-md-color !default;
 $item-md-sliding-transition:         transform 250ms ease-in-out !default;
 
 
-ion-item-divider {
-  padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
-  background-color: $item-md-divider-bg;
-  color: $item-md-divider-color;
-}
-
-ion-note {
-  color: $item-md-note-color;
-}
-
 .item {
   position: relative;
   padding-right: 0;
@@ -37,10 +27,11 @@ ion-note {
   font-size: $item-md-font-size;
   text-transform: none;
   font-weight: normal;
-  box-shadow: none;
 
-  background-color: $list-md-background-color;
   color: $list-md-text-color;
+  background-color: $list-md-background-color;
+  box-shadow: none;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
 
   h1 {
     margin: 0 0 2px;
@@ -72,18 +63,26 @@ ion-note {
   }
 }
 
+.item.activated {
+  background-color: $list-md-activated-background-color;
+}
+
+.item[no-lines] {
+  border-width: 0;
+}
+
 .item-inner {
-  border-bottom: 1px solid $list-md-border-color;
   padding-right: ($item-md-padding-right / 2);
+  border-bottom: 1px solid $list-md-border-color;
 }
 
 ion-item-content {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
 }
 
-button.item.activated {
+
-  box-shadow: none;
+// Material Design Item Media
-}
+// --------------------------------------------------
 
 [item-left],
 [item-right] {
@@ -93,8 +92,8 @@ button.item.activated {
 icon[item-left],
 icon[item-right] {
   margin-top: $item-md-padding-icon-top;
-  margin-left: 0;
   margin-bottom: $item-md-padding-icon-bottom;
+  margin-left: 0;
 }
 
 button[item-left],
@@ -120,8 +119,8 @@ button[item-right],
 
 [item-left].icon-left icon,
 [item-right].icon-left icon {
-  margin-left: 0;
   margin-bottom: 1px;
+  margin-left: 0;
   padding-right: 0.3em;
 }
 
@@ -172,19 +171,16 @@ ion-thumbnail {
   }
 }
 
-.item,
+ion-note {
-a.item,
+  color: $item-md-note-color;
-button.item {
-  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
 }
 
-.item.activated,
-a.item.activated,
-button.item.activated {
-  background-color: $list-md-activated-background-color;
-  box-shadow: none;
-}
 
-.item[no-lines] {
+// Material Design Item Divider
-  border-width: 0;
+// --------------------------------------------------
+
+ion-item-divider {
+  padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
+  background-color: $item-md-divider-bg;
+  color: $item-md-divider-color;
 }