diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss index bf0fe24b8b..9227c78f88 100644 --- a/ionic/components/search-bar/modes/ios.scss +++ b/ionic/components/search-bar/modes/ios.scss @@ -2,13 +2,15 @@ // iOS Search Bar // -------------------------------------------------- -$search-bar-ios-background-color: #c9c9ce !default; -$search-bar-ios-border-color: $item-ios-border-color !default; -$search-bar-ios-padding: 0 8px !default; -$search-bar-ios-input-height: 28px !default; -$search-bar-ios-background-svg: "" !default; -$search-bar-ios-background-size: 13px 13px !default; - +$search-bar-ios-background-color: rgba(0, 0, 0, 0.2) !default; +$search-bar-ios-border-color: rgba(0, 0, 0, 0.05) !default; +$search-bar-ios-padding: 0 8px !default; +$search-bar-ios-input-height: 28px !default; +$search-bar-ios-input-text-color: #9D9D9D !default; +$search-bar-ios-input-background-color: #FFFFFF !default; +$search-bar-ios-input-icon-color: #767676 !default; +$search-bar-ios-input-background-svg: "" !default; +$search-bar-ios-background-size: 13px 13px !default; .search-bar { padding: $search-bar-ios-padding; @@ -22,7 +24,7 @@ $search-bar-ios-background-size: 13px 13px !default; transform: translateX(calc(50% - 60px)); - @include svg-background-image($search-bar-ios-background-svg); + @include svg-background-image($search-bar-ios-input-background-svg); background-size: $search-bar-ios-background-size; background-repeat: no-repeat; position: absolute; @@ -38,20 +40,26 @@ $search-bar-ios-background-size: 13px 13px !default; font-weight: 400; border-radius: 5px; - color: #000; - background-color: #fff; + color: $search-bar-ios-input-text-color; + background-color: $search-bar-ios-input-background-color; background-repeat: no-repeat; background-position: 8px center; @include calc(padding-left, "50% - 28px"); } + + .search-bar-input-container.left-align { .search-bar-icon { transform: translateX(0); + -webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1); + -moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1); } .search-bar-input { padding-left: 28px; + -webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1); + -moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1); } } diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts index 7515762138..cc9bf98a6a 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/ionic/components/search-bar/search-bar.ts @@ -26,6 +26,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
+
` }) diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts new file mode 100644 index 0000000000..cf5eadfd07 --- /dev/null +++ b/ionic/components/search-bar/test/floating/index.ts @@ -0,0 +1,21 @@ +import {NgControl} from 'angular2/angular2'; +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms'; + +import {App} from 'ionic/ionic'; +import {SearchPipe} from 'ionic/components/search-bar/search-bar'; + +@App({ + templateUrl: 'main.html', + bindings: [NgControl, FormBuilder], + directives: [FORM_DIRECTIVES] +}) +class IonicApp { + constructor(fb: FormBuilder) { + this.form = fb.group({ + searchQuery: ['', Validators.required] + }); + this.toolbarForm = fb.group({ + toolbarSearchQuery: ['', Validators.required] + }) + } +} diff --git a/ionic/components/search-bar/test/floating/main.html b/ionic/components/search-bar/test/floating/main.html new file mode 100644 index 0000000000..429fdf6eed --- /dev/null +++ b/ionic/components/search-bar/test/floating/main.html @@ -0,0 +1,13 @@ + + +
+ + + + +
+