refactor(searchbar): add iOS11 design for searchbar

packages/core/src/components/searchbar/searchbar.ios.scss

@@ -4,17 +4,17 @@
 // iOS Searchbar
 // --------------------------------------------------
 
-/// @prop - Padding top/bottom of the searchbar
+/// @prop - Padding top of the searchbar
-$searchbar-ios-padding-vertical:          0 !default;
+$searchbar-ios-padding-top:               12px !default;
 
-/// @prop - Padding start/end of the searchbar
+/// @prop - Padding end of the searchbar
-$searchbar-ios-padding-horizontal:        8px !default;
+$searchbar-ios-padding-end:               $searchbar-ios-padding-top !default;
 
-/// @prop - Background of the searchbar
+/// @prop - Padding bottom of the searchbar
-$searchbar-ios-background-color:          rgba(0, 0, 0, .2) !default;
+$searchbar-ios-padding-bottom:            $searchbar-ios-padding-top !default;
 
-/// @prop - Border color of the searchbar
+/// @prop - Padding start of the searchbar
-$searchbar-ios-border-color:              rgba(0, 0, 0, .05) !default;
+$searchbar-ios-padding-start:             $searchbar-ios-padding-end !default;
 
 /// @prop - Minimum height of the searchbar
 $searchbar-ios-min-height:                44px !default;
@@ -29,7 +29,10 @@ $searchbar-ios-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/sv
 $searchbar-ios-input-search-icon-size:    13px !default;
 
 /// @prop - Height of the searchbar input
-$searchbar-ios-input-height:              3rem !default;
+$searchbar-ios-input-height:              36px !default;
+
+/// @prop - Border radius of the searchbar input
+$searchbar-ios-input-border-radius:       10px !default;
 
 /// @prop - Color of the searchbar input placeholder
 $searchbar-ios-input-placeholder-color:   rgba(0, 0, 0, .5) !default;
@@ -38,7 +41,7 @@ $searchbar-ios-input-placeholder-color:   rgba(0, 0, 0, .5) !default;
 $searchbar-ios-input-text-color:          #000 !default;
 
 /// @prop - Background of the searchbar input
-$searchbar-ios-input-background-color:    #fff !default;
+$searchbar-ios-input-background-color:    rgba(225, 226, 231, 1) !default;
 
 /// @prop - Transition of the searchbar input
 $searchbar-ios-input-transition:          all 300ms ease !default;
@@ -55,21 +58,14 @@ $searchbar-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/sv
 /// @prop - Size of the searchbar input clear icon
 $searchbar-ios-input-clear-icon-size:     18px !default;
 
-/// @prop - Background of the searchbar input inside of a toolbar
-$searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
-
 
 // Searchbar
 // -----------------------------------------
 
 .searchbar-ios {
-  @include padding($searchbar-ios-padding-vertical, $searchbar-ios-padding-horizontal);
+  @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);
 
   min-height: $searchbar-ios-min-height;
-
-  border-top: $hairlines-width solid transparent;
-  border-bottom: $hairlines-width solid $searchbar-ios-border-color;
-  background: $searchbar-ios-background-color;
 }
 
 
@@ -87,17 +83,18 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 // -----------------------------------------
 
 .searchbar-ios .searchbar-search-icon {
-  @include position(9px, null, null, 9px);
+  @include position(0, null, null, 9px);
   @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color);
   @include margin-horizontal(calc(50% - 60px), null);
 
   position: absolute;
 
   width: $searchbar-ios-input-search-icon-size + 1;
-  height: $searchbar-ios-input-search-icon-size + 1;
+  height: 100%;
 
   background-repeat: no-repeat;
   background-size: $searchbar-ios-input-search-icon-size;
+  background-position: center;
 }
 
 
@@ -107,7 +104,7 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 .searchbar-ios .searchbar-input {
   @include placeholder($searchbar-ios-input-placeholder-color);
   @include padding(0, 28px);
-  @include border-radius(5px);
+  @include border-radius($searchbar-ios-input-border-radius);
 
   height: $searchbar-ios-input-height;
 
@@ -181,15 +178,6 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 // Searchbar in Toolbar
 // -----------------------------------------
 
-.toolbar .searchbar-ios {
-  border-bottom-width: 0;
-  background: transparent;
-}
-
-.toolbar .searchbar-ios .searchbar-input {
-  background: $searchbar-ios-toolbar-input-background;
-}
-
 .toolbar .searchbar-ios .searchbar-ios-cancel {
   @include padding(0);
 }
@@ -228,7 +216,7 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
   .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-input {
     @include placeholder($fg-color);
     color: $color-contrast;
-    background: rgba($color-contrast, .08);
+    background: rgba($color-contrast, .1);
   }
 
   .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-clear-icon {

packages/core/src/components/searchbar/test/basic.html

@@ -9,8 +9,20 @@
 <body>
   <ion-app>
     <ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>
+            Basic Searchbar
+          </ion-title>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-searchbar>
+          </ion-searchbar>
+        </ion-toolbar>
+      </ion-header>
+
       <ion-content>
-        <h5> Search - Default </h5>
+        <h5 padding-left padding-top> Search - Default </h5>
         <ion-searchbar
           value="test"
           type="tel"
@@ -18,14 +30,14 @@
           debounce="500">
         </ion-searchbar>
 
-        <h5> Search - Animated </h5>
+        <h5 padding-left padding-top> Search - Animated </h5>
         <ion-searchbar
           animated="true"
           show-cancel-button
           debounce="500">
         </ion-searchbar>
 
-        <h5> Search - Custom Placeholder </h5>
+        <h5 padding-left padding-top> Search - Custom Placeholder </h5>
         <ion-searchbar
           id="dynamicProp"
           value="33"
@@ -37,7 +49,7 @@
           placeholder="Filter Schedules">
         </ion-searchbar>
 
-        <h5> Search - No Cancel Button </h5>
+        <h5 padding-left padding-top> Search - No Cancel Button </h5>
         <ion-searchbar
           value="after view"
           autocorrect="off"
@@ -47,14 +59,14 @@
           show-cancel-button="false">
         </ion-searchbar>
 
-        <h5> Search - Custom Cancel Button Danger </h5>
+        <h5 padding-left padding-top> Search - Custom Cancel Button Danger </h5>
         <ion-searchbar
           show-cancel-button
           cancel-button-text="Really Long Cancel"
           color="danger">
         </ion-searchbar>
 
-        <h5> Search - Value passed </h5>
+        <h5 padding-left padding-top> Search - Value passed </h5>
         <ion-searchbar
           value="mysearch"
           cancel-button-text="Really Long Cancel"
@@ -62,7 +74,7 @@
           show-cancel-button>
         </ion-searchbar>
 
-        <h5> Search - Mode iOS</h5>
+        <h5 padding-left padding-top> Search - Mode iOS</h5>
         <ion-searchbar
           mode="ios"
           animated="true"
@@ -70,7 +82,7 @@
           placeholder="Search">
         </ion-searchbar>
 
-        <h5> Search - Mode MD</h5>
+        <h5 padding-left padding-top> Search - Mode MD</h5>
         <ion-searchbar
           mode="md"
           animated="true"
@@ -78,7 +90,7 @@
           placeholder="Search">
         </ion-searchbar>
 
-        <h5> Search - Animated and No Cancel</h5>
+        <h5 padding-left padding-top> Search - Animated and No Cancel</h5>
         <ion-searchbar
           id="dynamicAttr"
           placeholder="Search"

packages/core/src/components/searchbar/test/toolbar.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Searchbar Toolbar</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+    <ion-page>
+      <ion-content>
+        <h5 padding-left padding-top> Search - Transparent Toolbar </h5>
+        <ion-toolbar transparent>
+          <ion-searchbar></ion-searchbar>
+        </ion-toolbar>
+
+        <h5 padding-left padding-top> Search - Default Toolbar </h5>
+        <ion-toolbar>
+          <ion-searchbar></ion-searchbar>
+        </ion-toolbar>
+
+        <h5 padding-left padding-top> Search - Primary Toolbar </h5>
+        <ion-toolbar color="primary">
+          <ion-searchbar show-cancel-button></ion-searchbar>
+        </ion-toolbar>
+
+        <h5 padding-left padding-top> Search - Dark Toolbar </h5>
+        <ion-toolbar color="dark">
+          <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
+        </ion-toolbar>
+
+        <h5 padding-left padding-top> Search - Light Toolbar </h5>
+        <ion-toolbar color="light">
+          <ion-searchbar show-cancel-button></ion-searchbar>
+        </ion-toolbar>
+      </ion-content>
+    </ion-page>
+  </ion-app>
+</body>
+</html>