javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(searchbar): update background for iOS11 translucency

Browse Source
This commit is contained in:
Brandy Carney
2017-11-16 14:48:05 -06:00
parent a1b8b6e6e9
commit 62f03490e5
2 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,7 +41,7 @@ $searchbar-ios-input-placeholder-color: rgba(0, 0, 0, .5) !default;
$searchbar-ios-input-text-color: #000 !default; $searchbar-ios-input-text-color: #000 !default;
/// @prop - Background of the searchbar input /// @prop - Background of the searchbar input
$searchbar-ios-input-background-color: rgba(225, 226, 231, 1) !default; $searchbar-ios-input-background-color: rgba(15, 22, 64, .1) !default;
/// @prop - Transition of the searchbar input /// @prop - Transition of the searchbar input
$searchbar-ios-input-transition: all 300ms ease !default; $searchbar-ios-input-transition: all 300ms ease !default;

35
packages/core/src/components/searchbar/test/toolbar.html → packages/core/src/components/searchbar/test/toolbar/index.html
View File

@ -9,7 +9,20 @@
<body> <body>
<ion-app> <ion-app>
<ion-page> <ion-page>
<ion-content> <ion-header no-border translucent>
<ion-toolbar>
<ion-title>Searchbar - Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar translucent></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<div class="block red"></div>
<div class="block green"></div>
<div class="block blue"></div>
<h5 padding-left padding-top> Search - Transparent Toolbar </h5> <h5 padding-left padding-top> Search - Transparent Toolbar </h5>
<ion-toolbar transparent> <ion-toolbar transparent>
<ion-searchbar></ion-searchbar> <ion-searchbar></ion-searchbar>
@ -37,5 +50,25 @@
</ion-content> </ion-content>
</ion-page> </ion-page>
</ion-app> </ion-app>
<style>
.block {
width: 100%;
height: 200px;
margin: 20px auto;
}
.red {
background-color: #ea445a;
}
.green {
background-color: #76d672;
}
.blue {
background-color: #3478f6;
}
</style>
</body> </body>
</html> </html>