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

refactor(search-bar): Added iOS styling for cancel button

Browse Source 
Cancel button shows when clicking in input box, animation isn’t done
though. Added some examples. References #247
This commit is contained in:
Brandy Carney
2015-10-06 18:10:13 -04:00
parent 4ff55392ce
commit 9b60da4308
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ionic/components/search-bar/modes/ios.scss
View File

@ -33,15 +33,15 @@ $search-bar-ios-input-close-icon-size: 17px !default;
width: $search-bar-ios-input-search-icon-size + 1;
height: $search-bar-ios-input-search-icon-size + 1;
@include calc(margin-left, "50% - 60px");
transition: $search-bar-ios-input-transition;
@include svg-background-image($search-bar-ios-input-search-icon-svg);
background-size: $search-bar-ios-input-search-icon-size;
background-repeat: no-repeat;
position: absolute;
left: 10px;
top: 8px;
@include calc(margin-left, "50% - 60px");
transition: $search-bar-ios-input-transition;
}
.search-bar-input {
@ -57,13 +57,12 @@ $search-bar-ios-input-close-icon-size: 17px !default;
background-repeat: no-repeat;
background-position: 8px center;
transition: $search-bar-ios-input-transition;
&::placeholder {
color: $search-bar-ios-input-placeholder-color;
}
@include calc(padding-left, "50% - 28px");
transition: $search-bar-ios-input-transition;
}
.search-bar-close-icon {
@ -89,6 +88,14 @@ $search-bar-ios-input-close-icon-size: 17px !default;
}
}
.search-bar-cancel.left-align {
@extend button[clear];
display: block;
padding-left: 8px;
padding-right: 0;
min-height: 0;
}
&.hairlines .search-bar {
border-bottom-width: 0.55px;
}