From f6783dbd2ed9136194e24e522624ecbcf36dc422 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 15 Mar 2019 12:47:31 -0400
Subject: [PATCH] fix(chip): use transparent outline on color chips (#17719)

---
 core/src/components/chip/chip.scss | 50 +++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss
index b8d5c3c66c..3dae8fdf1e 100644
--- a/core/src/components/chip/chip.scss
+++ b/core/src/components/chip/chip.scss
@@ -37,20 +37,9 @@
   box-sizing: border-box;
 }
 
-:host(:focus) {
-  outline: none;
-}
 
-:host(:focus) {
-  --background: rgba(0, 0, 0, .16);
-}
-
-:host(.activated) {
-  --background: rgba(0, 0, 0, .20);
-}
-
-
-// Colors
+// Chip Colors
+// ---------------------------------------------
 
 :host(.ion-color) {
   background: current-color(base, .08);
@@ -66,14 +55,16 @@
 }
 
 
-// Outline
+// Outline Chip
+// ---------------------------------------------
 
 :host(.chip-outline) {
   border-width: 1px;
   border-style: solid;
 }
 
-:host(.chip-outline:not(.ion-color)) {
+:host(.chip-outline) {
+
   border-color: rgba(0, 0, 0, .32);
 
   background: transparent;
@@ -92,7 +83,8 @@
 }
 
 
-// Icon
+// Chip Icon
+// ---------------------------------------------
 
 ::slotted(ion-icon) {
   font-size: 20px;
@@ -111,7 +103,8 @@
 }
 
 
-// Avatar
+// Chip Avatar
+// ---------------------------------------------
 
 ::slotted(ion-avatar) {
   width: 24px;
@@ -127,7 +120,28 @@
 }
 
 
-// Hover
+// Chip: Focus
+// ---------------------------------------------
+
+:host(:focus) {
+  outline: none;
+}
+
+:host(:focus) {
+  --background: rgba(0, 0, 0, .16);
+}
+
+
+// Chip: Activated
+// ---------------------------------------------
+
+:host(.activated) {
+  --background: rgba(0, 0, 0, .20);
+}
+
+
+// Chip: Hover
+// ---------------------------------------------
 
 @media (any-hover: hover) {
   :host(:hover) {