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

Search bar animations

Browse Source
This commit is contained in:
Max Lynch
2015-06-02 17:27:00 -05:00
parent 26637815ea
commit 3838a6b71e
2 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ionic/components/search-bar/extensions/ios.scss
View File

@ -16,10 +16,15 @@ $search-bar-ios-background-size: 13px 13px !default;
@include hairline(bottom, $search-bar-ios-border-color);
.search-bar-icon {
width: 13px;
width: 100%;
height: 13px;
transform: translateX(calc(50% - 60px));
-webkit-transform: translateX(-webkit-calc(50% - 60px));
@include svg-background-image($search-bar-ios-background-svg);
background-size: $search-bar-ios-background-size;
background-repeat: no-repeat;
position: absolute;
left: 10px;
top: 8px;
@ -38,13 +43,20 @@ $search-bar-ios-background-size: 13px 13px !default;
background-repeat: no-repeat;
background-position: 8px center;
transition: all .2s ease;
@include calc(padding-left, "50% - 35px");
@include calc(padding-left, "50% - 28px");
}
.search-bar-input, .search-bar-icon {
transition: all .2s ease;
}
.search-bar-input-container.focused {
.search-bar-icon {
transform: translateX(0);
-webkit-transform: translateX(0);
}
.search-bar-input {
padding-left: 28px;
}

9
ionic/components/search-bar/search-bar.scss
View File

@ -11,7 +11,11 @@ $search-bar-min-height: 44px !default;
align-items: center;
width: 100%;
min-height: $search-bar-min-height;
line-height: 3rem;
}
.search-bar-icon {
// Don't let them tap on the icon
pointer-events: none;
}
.search-bar-input-container {
@ -21,12 +25,13 @@ $search-bar-min-height: 44px !default;
width: 100%;
}
.search-bar-input {
input[type="search"].search-bar-input {
display: block;
width: 100%;
height: 100%;
border: none;
font-family: inherit;
line-height: 3rem;
@include appearance(none);
}