From a7037032b8c5c9abc43e98eb115383b792a145a4 Mon Sep 17 00:00:00 2001
From: Jeff Smith <37851214+eljefe223@users.noreply.github.com>
Date: Fri, 29 May 2020 16:50:48 -0700
Subject: [PATCH] fix: outline on flipper (#3204)

---
 .../fast-components-msft/src/flipper/flipper.styles.ts   | 1 +
 .../fast-components/src/flipper/flipper.styles.ts        | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts b/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts
index de4c934c424..0753bf04fe9 100644
--- a/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts
+++ b/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts
@@ -30,6 +30,7 @@ export const FlipperStyles = css`
         color: var(--neutral-foreground-rest);
         background: transparent;
         border: none;
+        outline: none;
         padding: 0;
     }
 
diff --git a/packages/web-components/fast-components/src/flipper/flipper.styles.ts b/packages/web-components/fast-components/src/flipper/flipper.styles.ts
index fe8f081cd5c..f5d30c94945 100644
--- a/packages/web-components/fast-components/src/flipper/flipper.styles.ts
+++ b/packages/web-components/fast-components/src/flipper/flipper.styles.ts
@@ -30,6 +30,7 @@ export const FlipperStyles = css`
         fill: var(--accent-foreground-cut-rest);
         color: var(--accent-foreground-cut-rest);
         background: transparent;
+        outline: none;
         border: none;
         padding: 0;
     }
@@ -64,17 +65,19 @@ export const FlipperStyles = css`
         color: var(--neutral-foreground-rest);
     }
 
-    :host(.disabled)::before {
+    :host(.disabled)::before,
+    :host(.disabled:hover)::before,
+    :host(.disabled:active)::before {
         background: var(--neutral-fill-stealth-rest);
         border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
     }
 
-    :host(:hover:enabled)::before {
+    :host(:hover)::before {
         background: var(--accent-fill-hover);
         border-color: var(--accent-fill-hover);
     }
 
-    :host(:active:enabled)::before {
+    :host(:active)::before {
         background: var(--accent-fill-active);
         border-color: var(--accent-fill-active);
     }