fix: outline on flipper (#3204)

microsoft · May 29, 2020 · a703703 · a703703
1 parent baff146
commit a703703
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 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
@@ -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
@@ -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);
     }