refactor(label): move label css to the correct scss files

references #5651
ionic-team · Feb 29, 2016 · 4c93eb0 · 4c93eb0
1 parent 0480fa3
commit 4c93eb0
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 41 deletions.
diff --git a/ionic/components/card/test/list/main.html b/ionic/components/card/test/list/main.html
@@ -11,27 +11,20 @@
         Card List
       </ion-list-header>
 
-      <ion-item>
-        <ion-icon name="wifi" item-left></ion-icon>
-        <ion-label>Wifi</ion-label>
-        <ion-toggle></ion-toggle>
-      </ion-item>
-
-      <ion-item>
-        <ion-icon name="heart" item-left></ion-icon>
-        Affection
-        <ion-note item-right>
-          Very Little
-        </ion-note>
-      </ion-item>
-
-      <ion-item>
-        <ion-icon name="home" item-left></ion-icon>
-        Home
-        <ion-note item-right>
-          Where the heart is
-        </ion-note>
-      </ion-item>
+      <button ion-item>
+        <ion-icon name="cart" item-left></ion-icon>
+        Shopping
+      </button>
+
+      <button ion-item>
+        <ion-icon name="medical" item-left></ion-icon>
+        Hospital
+      </button>
+
+      <button ion-item>
+        <ion-icon name="paw" item-left></ion-icon>
+        Dog Park
+      </button>
 
     </ion-list>
 

diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss
@@ -103,11 +103,6 @@ ion-icon[item-right] {
    padding: 0 1px;
  }
 
-[text-wrap] ion-label {
-  font-size: $item-md-body-text-font-size;
-  line-height: $item-md-body-text-line-height;
-}
-
 ion-icon[item-left] + .item-inner,
 ion-icon[item-left] + .item-input {
   margin-left: $item-md-padding-left + ($item-md-padding-left / 2);

diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
@@ -61,18 +61,6 @@ ion-item-divider {
   }
 }
 
-ion-label {
-  margin: 0;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-[text-wrap] ion-label {
-  white-space: normal;
-}
-
 [vertical-align-top],
 ion-input.item {
   align-items: flex-start;

diff --git a/ionic/components/label/label.ios.scss b/ionic/components/label/label.ios.scss
@@ -5,13 +5,14 @@
 // --------------------------------------------------
 
 $label-ios-text-color:         #7f7f7f !default;
+$label-ios-margin:             $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0 !default;
 
 
 // iOS Default Label
 // --------------------------------------------------
 
 ion-label {
-  margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
+  margin: $label-ios-margin;
 }
 
 

diff --git a/ionic/components/label/label.md.scss b/ionic/components/label/label.md.scss
@@ -6,15 +6,20 @@
 
 $label-md-text-color:                 #999 !default;
 $label-md-text-color-focused:         map-get($colors-md, primary) !default;
+$label-md-margin:                     $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
 
 
 // Material Design Default Label
 // --------------------------------------------------
 
 ion-label {
-  margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
+  margin: $label-md-margin;
 }
 
+[text-wrap] ion-label {
+  font-size: $item-md-body-text-font-size;
+  line-height: $item-md-body-text-line-height;
+}
 
 // Material Design Default Label Inside An Input Item
 // --------------------------------------------------

diff --git a/ionic/components/label/label.scss b/ionic/components/label/label.scss
@@ -7,15 +7,22 @@ ion-label {
   display: block;
   font-size: inherit;
   white-space: nowrap;
+  margin: 0;
+  flex: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-
 .item-input ion-label {
   max-width: 200px;
   flex: initial;
   pointer-events: none;
 }
 
+[text-wrap] ion-label {
+  white-space: normal;
+}
+
 
 // Stacked & Floating Inputs
 // --------------------------------------------------