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): working on animations

Browse Source
This commit is contained in:
Brandy Carney
2015-10-07 14:38:37 -04:00
parent 8aa3e3e842
commit bbdbe823cd
3 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,8 +15,8 @@ $search-bar-ios-input-height: 28px !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;
$search-bar-ios-input-transition: all 0.3s linear !default;
//cubic-bezier(.25, .45, .05, 1)
$search-bar-ios-input-close-icon-color: #8F8E94 !default;
$search-bar-ios-input-close-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $search-bar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
$search-bar-ios-input-close-icon-size: 17px !default;
@@ -88,14 +88,20 @@ $search-bar-ios-input-close-icon-size: 17px !default;
.search-bar-cancel {
@extend button[clear];
padding-left: 8px;
padding-right: 0;
// transition: all 2s cubic-bezier(.25, .45, .05, 1);
transition: $search-bar-ios-input-transition;
transition-duration: 3s !important;
margin-right: calc(-100%);
// transform: translate3d(100px,0,0);
// max-width: 0;
min-height: 0;
}
.search-bar-cancel.left-align {
max-width: initial;
margin-right: 0;
visibility: visible;
padding-left: 8px;
padding-right: 0;
}
&.hairlines .search-bar {

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

@@ -31,9 +31,3 @@ input[type="search"].search-bar-input {
line-height: 3rem;
@include appearance(none);
}
.search-bar-cancel {
visibility: hidden;
margin-right: -200px;
min-height: 0;
}

1
ionic/components/search-bar/test/floating/index.ts
View File

@@ -20,5 +20,6 @@ class IonicApp {
}
myCancelAction = function() {
console.log('myCancelAction');
alert("My custom action!");
}
}