javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(searchbar): add iOS11 design for searchbar

Browse Source
This commit is contained in:
Brandy Carney
2017-11-15 14:51:23 -06:00
parent 22f9877619
commit 6806e25a71
3 changed files with 81 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/core/src/components/searchbar/searchbar.ios.scss
View File

@ -4,17 +4,17 @@
// iOS Searchbar
// --------------------------------------------------
/// @prop - Padding top/bottom of the searchbar
$searchbar-ios-padding-vertical: 0 !default;
/// @prop - Padding top of the searchbar
$searchbar-ios-padding-top: 12px !default;
/// @prop - Padding start/end of the searchbar
$searchbar-ios-padding-horizontal: 8px !default;
/// @prop - Padding end of the searchbar
$searchbar-ios-padding-end: $searchbar-ios-padding-top !default;
/// @prop - Background of the searchbar
$searchbar-ios-background-color: rgba(0, 0, 0, .2) !default;
/// @prop - Padding bottom of the searchbar
$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default;
/// @prop - Border color of the searchbar
$searchbar-ios-border-color: rgba(0, 0, 0, .05) !default;
/// @prop - Padding start of the searchbar
$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 {

30
packages/core/src/components/searchbar/test/basic.html
View File

@ -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"

41
packages/core/src/components/searchbar/test/toolbar.html Normal file
View File

@ -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>