From 5265f210629fe89ae7cb461c879cf5ea5f8d45a6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 16 Nov 2015 16:35:13 -0500
Subject: [PATCH] refactor(list): moved item css outside of the list selector
 and into the proper file md

Cleaned up duplicated CSS and combined selectors, renamed Sass
variables so they are named list if used in the list files.
---
 ionic/components/item/modes/md.scss  | 129 +++++++++++++++++++
 ionic/components/list/modes/ios.scss |  14 +-
 ionic/components/list/modes/md.scss  | 183 ++++-----------------------
 3 files changed, 159 insertions(+), 167 deletions(-)

diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 651d0bcf52..3c0f67390f 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -42,6 +42,135 @@ ion-note {
   color: $item-md-note-color;
 }
 
+.item {
+  padding-right: ($item-md-padding-right / 2);
+  padding-left: ($item-md-padding-left);
+  font-size: $item-md-font-size;
+  text-transform: none;
+
+  h1 {
+    margin: 0 0 2px;
+    font-size: 2.4rem;
+    font-weight: normal;
+  }
+
+  h2 {
+    margin: 2px 0 2px;
+    font-size: 1.6rem;
+    font-weight: normal;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: normal;
+    margin: 2px 0 2px;
+    font-size: 1.4rem;
+    font-weight: normal;
+  }
+
+  p {
+    line-height: normal;
+    color: #666;
+    font-size: 1.4rem;
+    margin: 0 0 2px;
+  }
+}
+
+.item-inner {
+  border-bottom: 1px solid $item-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;
+}
+
+[item-left],
+[item-right] {
+  margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
+}
+
+icon[item-left],
+icon[item-right] {
+  margin-top: $item-md-padding-icon-top;
+  margin-left: 0;
+  margin-bottom: $item-md-padding-icon-bottom;
+}
+
+button[item-left],
+button[item-right],
+[button][item-left],
+[button][item-right] {
+  padding: 0 0.6em;
+  min-height: 26px;
+  font-size: 1.2rem;
+}
+
+[item-left].icon-only,
+[item-right].icon-only,
+[item-left].icon-only icon,
+[item-right].icon-only icon {
+  padding: 0 1px;
+}
+
+[item-left][clear],
+[item-right][clear] {
+  padding: 0 8px;
+}
+
+[item-left].icon-left icon,
+[item-right].icon-left icon {
+  margin-left: 0;
+  margin-bottom: 1px;
+  padding-right: 0.3em;
+}
+
+[item-left].icon-right icon,
+[item-right].icon-right icon {
+  margin-right: 0;
+  margin-bottom: 1px;
+}
+
+[text-wrap] ion-item-content {
+  font-size: $item-md-body-text-font-size;
+  line-height: $item-md-body-text-line-height;
+}
+
+.item[actions] ion-item-content {
+  margin: 4px;
+}
+
+icon[item-left] + .item-inner,
+icon[item-left] + [text-input] {
+  margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
+}
+
+ion-avatar {
+  min-width: $item-md-avatar-size;
+  min-height: $item-md-avatar-size;
+
+  img {
+    max-width: $item-md-avatar-size;
+    max-height: $item-md-avatar-size;
+    border-radius: $item-md-avatar-size / 2;
+  }
+}
+
+ion-thumbnail {
+  min-width: $item-md-thumbnail-size;
+  min-height: $item-md-thumbnail-size;
+
+  img {
+    max-width: $item-md-thumbnail-size;
+    max-height: $item-md-thumbnail-size;
+  }
+}
+
 .item,
 a.item,
 button.item {
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index 6016fedefe..9cb37bb381 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -19,6 +19,8 @@ $list-ios-header-font-weight:         500 !default;
 $list-ios-header-letter-spacing:      0.1rem !default;
 $list-ios-header-color:               #333 !default;
 
+$list-ios-border-color:               $list-border-color !default;
+
 
 /****************/
 /* DEFAULT LIST */
@@ -39,16 +41,16 @@ $list-ios-header-color:               #333 !default;
 
   ion-header,
   ion-item-group-title {
-    border-bottom: 1px solid $item-ios-border-color;
+    border-bottom: 1px solid $list-ios-border-color;
   }
 
   > .item:first-child {
-    border-top: 1px solid $item-ios-border-color;
+    border-top: 1px solid $list-ios-border-color;
   }
 
   > .item:last-child,
   > ion-item-sliding:last-child .item {
-    border-bottom: 1px solid $item-ios-border-color;
+    border-bottom: 1px solid $list-ios-border-color;
 
     .item-inner {
       border-bottom: none;
@@ -56,7 +58,7 @@ $list-ios-header-color:               #333 !default;
   }
 
   .item-inner {
-    border-bottom: 1px solid $item-ios-border-color;
+    border-bottom: 1px solid $list-ios-border-color;
   }
 
   // If the item has the no-lines attribute remove the bottom border from:
@@ -68,7 +70,7 @@ $list-ios-header-color:               #333 !default;
   }
 
   ion-item-options {
-    border-bottom: 1px solid $item-ios-border-color;
+    border-bottom: 1px solid $list-ios-border-color;
 
     button, [button] {
       min-height: 100%;
@@ -135,7 +137,7 @@ $list-ios-header-color:               #333 !default;
 
   .item {
     margin-top: 0;
-    border-bottom: 1px solid $item-ios-border-color;
+    border-bottom: 1px solid $list-ios-border-color;
 
     .item-inner {
       border-bottom: none;
diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss
index bac8854a72..c0836995ac 100644
--- a/ionic/components/list/modes/md.scss
+++ b/ionic/components/list/modes/md.scss
@@ -17,174 +17,43 @@ $list-md-header-padding:         16px $item-md-padding-right 16px $item-md-paddi
 $list-md-header-font-size:       1.4rem !default;
 $list-md-header-color:           #858585 !default;
 
+$list-md-border-color:          $item-md-border-color !default;
+
 
 /****************/
 /* DEFAULT LIST */
 /****************/
 
 .list {
+  margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
+
   ion-header,
-  ion-item-group-title , {
-    border-bottom: 1px solid $item-md-border-color;
+  ion-item-group-title {
+    border-bottom: 1px solid $list-md-border-color;
+    margin-left: 0;
+    padding: $list-md-header-padding;
+    font-size: $list-md-header-font-size;
+    color: $list-md-header-color;
   }
 
-  .item {
-    padding-right: ($item-md-padding-right / 2);
-    padding-left: ($item-md-padding-left);
-    font-size: $item-md-font-size;
-    text-transform: none;
-
-    .item-inner {
-      border-bottom: 1px solid $item-md-border-color;
-    }
+  .item-inner {
+    border-bottom: 1px solid $list-md-border-color;
   }
 
-  > .item:first-child {
-    border-top: 1px solid $item-md-border-color;
+  > .item:first-child,
+  > ion-item-sliding:first-child .item {
+    border-top: 1px solid $list-md-border-color;
   }
 
   > .item:last-child,
   > ion-item-sliding:last-child .item {
-    border-bottom: 1px solid $item-md-border-color;
+    border-bottom: 1px solid $list-md-border-color;
 
     .item-inner {
       border-bottom: none;
     }
   }
 
-  // If the item has the no-lines attribute remove the bottom border from:
-  // the item itself (for last-child items)
-  // the item-inner class (if it is not last)
-  .item[no-lines],
-  .item[no-lines] .item-inner {
-    border-width: 0;
-  }
-
-  ion-header,
-  ion-item-group-title {
-    border-bottom: 1px solid $item-md-border-color;
-    margin-left: 0;
-    padding-left: $item-md-padding-left;
-  }
-
-  ion-item-content {
-    margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
-  }
-
-  [item-left],
-  [item-right] {
-    margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
-  }
-
-  icon[item-left],
-  icon[item-right] {
-    margin-top: $item-md-padding-icon-top;
-    margin-left: 0;
-    margin-bottom: $item-md-padding-icon-bottom;
-  }
-
-  button[item-left],
-  button[item-right],
-  [button][item-left],
-  [button][item-right] {
-    padding: 0 0.6em;
-    min-height: 26px;
-    font-size: 1.2rem;
-  }
-
-  [item-left].icon-only,
-  [item-right].icon-only,
-  [item-left].icon-only icon,
-  [item-right].icon-only icon {
-    padding: 0 1px;
-  }
-
-  [item-left][clear],
-  [item-right][clear] {
-    padding: 0 8px;
-  }
-
-  [item-left].icon-left icon,
-  [item-right].icon-left icon {
-    margin-left: 0;
-    margin-bottom: 1px;
-    padding-right: 0.3em;
-  }
-
-  [item-left].icon-right icon,
-  [item-right].icon-right icon {
-    margin-right: 0;
-    margin-bottom: 1px;
-  }
-
-  [text-wrap] ion-item-content {
-    font-size: $item-md-body-text-font-size;
-    line-height: $item-md-body-text-line-height;
-  }
-
-  .item[actions] ion-item-content {
-    margin: 4px;
-  }
-
-  icon[item-left] + .item-inner,
-  icon[item-left] + [text-input] {
-    margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
-  }
-
-  ion-avatar {
-    min-width: $item-md-avatar-size;
-    min-height: $item-md-avatar-size;
-
-    img {
-      max-width: $item-md-avatar-size;
-      max-height: $item-md-avatar-size;
-      border-radius: $item-md-avatar-size / 2;
-    }
-  }
-
-  ion-thumbnail {
-    min-width: $item-md-thumbnail-size;
-    min-height: $item-md-thumbnail-size;
-
-    img {
-      max-width: $item-md-thumbnail-size;
-      max-height: $item-md-thumbnail-size;
-    }
-  }
-
-  h1 {
-    margin: 0 0 2px;
-    font-size: 2.4rem;
-    font-weight: normal;
-  }
-
-  h2 {
-    margin: 2px 0 2px;
-    font-size: 1.6rem;
-    font-weight: normal;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: normal;
-    margin: 2px 0 2px;
-    font-size: 1.4rem;
-    font-weight: normal;
-  }
-
-  p {
-    line-height: normal;
-    color: #666;
-    font-size: 1.4rem;
-    margin: 0 0 2px;
-  }
-
-  button.item.activated {
-    box-shadow: none;
-  }
-
   ion-item-options {
     button, [button] {
       height: calc(100% - 2px);
@@ -202,15 +71,13 @@ $list-md-header-color:           #858585 !default;
       }
     }
   }
-}
 
-.list {
-  margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
-
-  ion-header {
-    padding: $list-md-header-padding;
-    font-size: $list-md-header-font-size;
-    color: $list-md-header-color;
+  // If the item has the no-lines attribute remove the bottom border from:
+  // the item itself (for last-child items)
+  // the item-inner class (if it is not last)
+  .item[no-lines],
+  .item[no-lines] .item-inner {
+    border-width: 0;
   }
 
   + .list {
@@ -234,22 +101,16 @@ $list-md-header-color:           #858585 !default;
 
   .item:first-child {
     border-top-width: 0;
-    margin-top: 0;
     border-top-right-radius: $list-inset-md-border-radius;
     border-top-left-radius: $list-inset-md-border-radius;
   }
 
   .item:last-child {
     border-bottom-width: 0;
-    margin-bottom: 0;
     border-bottom-right-radius: $list-inset-md-border-radius;
     border-bottom-left-radius: $list-inset-md-border-radius;
   }
 
-  .item:not(ion-input):last-child:after {
-    border-bottom: none;
-  }
-
   + .list[inset] {
     margin-top: 0;
   }