refactor(css): appearance mixin (#8212)

src/components/alert/alert.ios.scss

@@ -149,14 +149,14 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-ios .alert-input {
+  @include appearance(none);
+
   margin-top: $alert-ios-input-margin-top;
   padding: $alert-ios-input-padding;
 
   border: $alert-ios-input-border;
   border-radius: $alert-ios-input-border-radius;
   background-color: $alert-ios-input-background-color;
-
-  -webkit-appearance: none;
 }
 
 

src/components/alert/alert.scss

@@ -89,6 +89,8 @@ ion-alert input {
 }
 
 .alert-tappable {
+  @include appearance(none);
+
   margin: 0;
   padding: 0;
 
@@ -98,6 +100,4 @@ ion-alert input {
   line-height: initial;
   text-align: left;
   background: transparent;
-
-  -webkit-appearance: none;
 }

src/components/input/input.scss

@@ -32,6 +32,7 @@ ion-textarea {
 
 .text-input {
   @include placeholder();
+  @include appearance(none);
 
   display: inline-block;
 
@@ -43,8 +44,6 @@ ion-textarea {
   border: 0;
   border-radius: 0;
   background: transparent;
-
-  -webkit-appearance: none;
 }
 
 textarea.text-input {

src/components/slides/slides.scss

@@ -176,14 +176,12 @@
   opacity: .2;
 }
 button.swiper-pagination-bullet {
+  @include appearance(none);
+
   border: 0;
   margin: 0;
   padding: 0;
   box-shadow: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;

src/themes/ionic.mixins.scss

@@ -3,8 +3,10 @@
 // --------------------------------------------------
 
 @mixin appearance($val) {
-  -webkit-appearance: $val;
   -moz-appearance: $val;
+  -ms-appearance: $val;
+  -webkit-appearance: $val;
+  appearance: $val;
 }