fix(inputs): fix styles in firefox (#17066)

ionic-team · Jan 11, 2019 · 0120eee · 0120eee
1 parent 6364e4e
commit 0120eee
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 26 deletions.
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
@@ -225,6 +225,10 @@
   appearance: none;
 }
 
+.button-native::-moz-focus-inner {
+  border: 0;
+}
+
 .button-native[disabled] {
   cursor: default;
   opacity: .5;

diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
@@ -152,6 +152,10 @@
   box-sizing: border-box;
 }
 
+.item-native::-moz-focus-inner {
+  border: 0;
+}
+
 button, a {
   cursor: pointer;
   user-select: none;

diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss
@@ -86,20 +86,11 @@
 .searchbar-cancel-button {
   @include padding(0, 0, 0, 8px);
 
-  display: none;
-
   flex-shrink: 0;
 
-  border: 0;
-
-  outline: none;
-
   background-color: $searchbar-ios-cancel-button-background-color;
 
   font-size: $searchbar-ios-cancel-button-font-size;
-
-  cursor: pointer;
-  appearance: none;
 }
 
 
@@ -118,8 +109,8 @@
 // Searchbar Has Focus & Animated
 // -----------------------------------------
 
-:host(.searchbar-show-cancel.searchbar-has-focus) .searchbar-cancel-button,
-:host(.searchbar-show-cancel.searchbar-animated) .searchbar-cancel-button {
+:host(.searchbar-has-focus) .searchbar-cancel-button,
+:host(.searchbar-animated) .searchbar-cancel-button {
   display: block;
 }
 

diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
@@ -33,13 +33,6 @@
 
 .searchbar-cancel-button {
   @include position(0, null, null, 5px);
-  @include margin(0);
-
-  display: none;
-
-  height: 100%;
-
-  border: 0;
 
   background-color: $searchbar-md-cancel-button-background-color;
 
@@ -108,12 +101,12 @@
 // Searchbar Focused
 // -----------------------------------------
 
-:host(.searchbar-has-focus.searchbar-show-cancel) .searchbar-search-icon {
+:host(.searchbar-has-focus) .searchbar-search-icon {
   display: none;
 }
 
-:host(.searchbar-has-focus.searchbar-show-cancel) .searchbar-cancel-button {
-  display: inline-flex;
+:host(.searchbar-has-focus) .searchbar-cancel-button {
+  display: block;
 }
 
 

diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss
@@ -100,7 +100,30 @@
 }
 
 .searchbar-cancel-button {
+  @include margin(0);
+
+  display: none;
+
+  height: 100%;
+
+  border: 0;
+
+  outline: none;
+
   color: var(--cancel-button-color);
+
+  cursor: pointer;
+  appearance: none;
+}
+
+.searchbar-cancel-button > div {
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
 }
 
 .searchbar-clear-button {

diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
@@ -347,7 +347,6 @@ export class Searchbar implements ComponentInterface {
         'searchbar-animated': animated,
         'searchbar-no-animate': animated && this.noAnimate,
         'searchbar-has-value': (this.getValue() !== ''),
-        'searchbar-show-cancel': this.showCancelButton,
         'searchbar-left-aligned': this.shouldAlignLeft,
         'searchbar-has-focus': this.focused
       }
@@ -366,10 +365,12 @@ export class Searchbar implements ComponentInterface {
         onTouchStart={this.onCancelSearchbar}
         class="searchbar-cancel-button"
       >
-        { this.mode === 'md'
-          ? <ion-icon mode={this.mode} icon={this.cancelButtonIcon} lazy={false}></ion-icon>
-          : this.cancelButtonText
-        }
+        <div>
+          { this.mode === 'md'
+            ? <ion-icon mode={this.mode} icon={this.cancelButtonIcon} lazy={false}></ion-icon>
+            : this.cancelButtonText
+          }
+        </div>
       </button>
     );
 

diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
@@ -13,6 +13,10 @@
 
   appearance: none;
   outline: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
 }
 
 @mixin text-inherit() {