rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animate search options entrance

Browse Source
This commit is contained in:
Baptiste Grob
2021-03-10 17:26:21 +01:00
parent 24c5dba4e9
commit c6c8d842da
2 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/views/notes/notes-view.pug
View File

@@ -26,7 +26,7 @@
ng-click='self.clearFilterText();', ng-click='self.clearFilterText();',
ng-show='self.state.noteFilter.text' ng-show='self.state.noteFilter.text'
) ✕ ) ✕
label.sk-panel-row.justify-left.mt-2( label.sk-panel-row.justify-left.mt-2.animate-slide-in-top(
ng-if='self.state.searchIsFocused || self.state.searchOptionsAreFocused || self.state.authorizingSearchOptions' ng-if='self.state.searchIsFocused || self.state.searchOptionsAreFocused || self.state.authorizingSearchOptions'
style="padding-bottom: 0" style="padding-bottom: 0"
) )

17
app/assets/stylesheets/_ui.scss
View File

@@ -97,6 +97,23 @@ $screen-md-max: ($screen-lg-min - 1) !default;
justify-self: flex-start; justify-self: flex-start;
} }
.animate-slide-in-top {
animation: slide-in-top .1s ease-out;
}
@keyframes slide-in-top {
0% {
opacity: 0;
transform: translateY(-40%);
}
75% {
opacity: 1;
}
100% {
transform: translateY(0%);
}
}
.m-0 { .m-0 {
margin: 0; margin: 0;
} }