fix(button): fix button in firefox

A-l-y-l-e · Nov 15, 2018 · b163c1f · b163c1f
1 parent b61bf7c
commit b163c1f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
@@ -127,6 +127,13 @@ export class LyButton implements OnInit, AfterViewInit, OnDestroy {
     @Optional() bgAndColor: LyCommon
   ) {
     this._renderer.addClass(this._elementRef.nativeElement, this.classes.root);
+    if (Platform.FIREFOX) {
+      this._theme.addStyle('button-ff', {
+        '&::-moz-focus-inner,&::-moz-focus-inner,&::-moz-focus-inner,&::-moz-focus-inner': {
+          border: 0
+        }
+      }, this._elementRef.nativeElement, undefined, STYLE_PRIORITY);
+    }
     if (bgAndColor) {
       bgAndColor.setAutoContrast();
     }

diff --git a/src/lib/src/platform/platform.ts b/src/lib/src/platform/platform.ts
@@ -9,32 +9,32 @@ const hasV8BreakIterator = (typeof(Intl) !== 'undefined' && (Intl as any).v8Brea
 export class Platform {
   static readonly isBrowser: boolean = typeof document === 'object' && !!document;
   /** Layout Engines */
-  EDGE = Platform.isBrowser && /(edge)/i.test(navigator.userAgent);
-  TRIDENT = Platform.isBrowser && /(msie|trident)/i.test(navigator.userAgent);
+  static readonly EDGE = Platform.isBrowser && /(edge)/i.test(navigator.userAgent);
+  static readonly TRIDENT = Platform.isBrowser && /(msie|trident)/i.test(navigator.userAgent);
 
   // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.
-  BLINK = Platform.isBrowser &&
-      (!!((window as any).chrome || hasV8BreakIterator) && !!CSS && !this.EDGE && !this.TRIDENT);
+  static readonly BLINK = Platform.isBrowser &&
+      (!!((window as any).chrome || hasV8BreakIterator) && !!CSS && !Platform.EDGE && !Platform.TRIDENT);
 
   // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to
   // ensure that Webkit runs standalone and is not used as another engine's base.
-  WEBKIT = Platform.isBrowser &&
-      /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;
+  static readonly WEBKIT = Platform.isBrowser &&
+      /AppleWebKit/i.test(navigator.userAgent) && !Platform.BLINK && !Platform.EDGE && !Platform.TRIDENT;
 
   /** Browsers and Platform Types */
-  IOS = Platform.isBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
+  static readonly IOS = Platform.isBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
 
   // It's difficult to detect the plain Gecko engine, because most of the browsers identify
   // them self as Gecko-like browsers and modify the userAgent's according to that.
   // Since we only cover one explicit Firefox case, we can simply check for Firefox
   // instead of having an unstable check for Gecko.
-  FIREFOX = Platform.isBrowser && /(firefox|minefield)/i.test(navigator.userAgent);
+  static readonly FIREFOX = Platform.isBrowser && /(firefox|minefield)/i.test(navigator.userAgent);
 
   // Trident on mobile adds the android platform to the userAgent to trick detections.
-  ANDROID = Platform.isBrowser && /android/i.test(navigator.userAgent) && !this.TRIDENT;
+  static readonly ANDROID = Platform.isBrowser && /android/i.test(navigator.userAgent) && !Platform.TRIDENT;
 
   // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake
   // this and just place the Safari keyword in the userAgent. To be more safe about Safari every
   // Safari browser should also use Webkit as its layout engine.
-  SAFARI = Platform.isBrowser && /safari/i.test(navigator.userAgent) && this.WEBKIT;
+  static readonly SAFARI = Platform.isBrowser && /safari/i.test(navigator.userAgent) && Platform.WEBKIT;
 }