fix(chip): cleaned up some of the UI and added some sass variables

references #5386
ionic-team · Feb 23, 2016 · eeac795 · eeac795
1 parent dd206ad
commit eeac795
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/ionic/components/chip/chip.ios.scss b/ionic/components/chip/chip.ios.scss
@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 ion-chip {
+
 }
 
 
@@ -13,7 +14,7 @@ ion-chip {
 @each $color-name, $color-value in $colors-ios {
 
   ion-chip {
-    > ion-icon[#{$color-name}] {
+    ion-icon[#{$color-name}] {
       background-color: $color-value;
       color: color-inverse($color-value) !important;
     }

diff --git a/ionic/components/chip/chip.md.scss b/ionic/components/chip/chip.md.scss
@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 ion-chip {
+
 }
 
 
@@ -13,7 +14,7 @@ ion-chip {
 @each $color-name, $color-value in $colors-md {
 
   ion-chip {
-    > ion-icon [#{$color-name}] {
+    ion-icon[#{$color-name}] {
       background-color: $color-value;
       color: color-inverse($color-value) !important;
     }

diff --git a/ionic/components/chip/chip.scss b/ionic/components/chip/chip.scss
@@ -3,50 +3,60 @@
 // Chip
 // --------------------------------------------------
 
+$chip-background-color:      rgba(0,0,0,0.12) !default;
+$chip-font-size:             13px !default;
+$chip-height:                32px !default;
+$chip-border-radius:         16px !default;
+$chip-padding:               0 12px !default;
+$chip-margin:                2px 0 !default;
+
+$chip-label-color:           rgba(0,0,0,0.87) !default;
+
+$chip-icon-color:            rgba(0,0,0,0.87) !default;
 
 ion-chip {
-  font-size: 13px;
-  font-weight: normal;
-  background: rgba(0,0,0,0.12);
+  background: $chip-background-color;
   display: inline-block;
-  height: 32px;
-  line-height: 32px;
-  border-radius: 16px;
-  padding: 0 12px;
+  height: $chip-height;
+  line-height: $chip-height;
+  border-radius: $chip-border-radius;
+  padding: $chip-padding;
+  margin: $chip-margin;
+
   box-sizing: border-box;
   vertical-align: middle;
   display: inline-flex;
   align-self: center;
 
-  margin: 2px 0;
+  font-size: $chip-font-size;
+  font-weight: normal;
 
   ion-label {
     margin: 0;
-    color: rgba(0,0,0,0.87);
+    color: $chip-label-color;
   }
 
-  > ion-icon, > ion-avatar {
+  > ion-icon,
+  > ion-avatar {
     width: 32px;
     height: 32px;
     margin-left: -12px;
     vertical-align: top;
     border-radius: 50%;
     text-align: center;
     line-height: 32px;
-    color: rgba(0,0,0,0.87);
-    // .flex-shrink(0);
+    color: $chip-icon-color;
     font-size: 18px;
-    // .flexbox();
-    // .align-items(center);
-    // .justify-content(center);
+
     img {
-        max-width: 100%;
-        max-height: 100%;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        display: block;
+      max-width: 100%;
+      max-height: 100%;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      display: block;
     }
+
     + ion-label {
       margin-left: 8px;
     }
@@ -58,9 +68,9 @@ ion-chip {
   }
 
   .button {
-    min-height: inherit;
+    height: inherit;
+    margin: 0;
     margin-right: -4px;
-    margin-left: 8px;
   }
 
   ion-icon[name="close-circle"] {