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); @include hairline(bottom, $search-bar-ios-border-color);
.search-bar-icon { .search-bar-icon {
width: 13px; width: 100%;
height: 13px; height: 13px;
transform: translateX(calc(50% - 60px));
-webkit-transform: translateX(-webkit-calc(50% - 60px));
@include svg-background-image($search-bar-ios-background-svg); @include svg-background-image($search-bar-ios-background-svg);
background-size: $search-bar-ios-background-size; background-size: $search-bar-ios-background-size;
background-repeat: no-repeat;
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 8px; top: 8px;
@ -38,13 +43,20 @@ $search-bar-ios-background-size: 13px 13px !default;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 8px center; 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-input-container.focused {
.search-bar-icon {
transform: translateX(0);
-webkit-transform: translateX(0);
}
.search-bar-input { .search-bar-input {
padding-left: 28px; 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; align-items: center;
width: 100%; width: 100%;
min-height: $search-bar-min-height; 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 { .search-bar-input-container {
@ -21,12 +25,13 @@ $search-bar-min-height: 44px !default;
width: 100%; width: 100%;
} }
.search-bar-input { input[type="search"].search-bar-input {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
font-family: inherit; font-family: inherit;
line-height: 3rem;
@include appearance(none); @include appearance(none);
} }