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

refactor(search-bar): Fix search icon positioning

Browse Source 
references #247
This commit is contained in:
Brandy Carney
2015-10-06 17:48:12 -04:00
parent 319fc9db1f
commit b9bb3d11aa
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,8 @@ $search-bar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/sv
$search-bar-ios-input-search-icon-size: 13px !default;
$search-bar-ios-input-height: 28px !default;
$search-bar-ios-input-text-color: #9D9D9D !default;
$search-bar-ios-input-placeholder-color: #9D9D9D !default;
$search-bar-ios-input-text-color: #000 !default;
$search-bar-ios-input-background-color: #FFFFFF !default;
$search-bar-ios-input-transition: all 0.3s cubic-bezier(.25, .45, .05, 1) !default;
@@ -29,10 +30,10 @@ $search-bar-ios-input-close-icon-size: 17px !default;
}
.search-bar-search-icon {
width: $search-bar-ios-input-search-icon-size + 1;
width: 100%;
height: $search-bar-ios-input-search-icon-size + 1;
transform: translateX(calc(50% + 90px));
transform: translateX(calc(50% - 60px));
transition: $search-bar-ios-input-transition;
@include svg-background-image($search-bar-ios-input-search-icon-svg);
@@ -58,6 +59,10 @@ $search-bar-ios-input-close-icon-size: 17px !default;
transition: $search-bar-ios-input-transition;
&::placeholder {
color: $search-bar-ios-input-placeholder-color;
}
@include calc(padding-left, "50% - 28px");
}