Merge pull request #542 from shayanbinary/sticky-header-animation

add animation for sticky dialog on mobile
deriv-com · Oct 10, 2018 · 6bc1873 · 6bc1873
2 parents ea4ed96 + e2f8530
commit 6bc1873
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/sass/components/_categorical-display.scss b/sass/components/_categorical-display.scss
@@ -17,6 +17,11 @@
             background: themed('CatDisplayFilterBg');
         }
     }
+    .cq-filter-panel {
+        @include themify($themes) {
+            background: themed('CatDisplayFilterBg');
+        }
+    }
     .cq-lookup-input {
         margin: 1.5em 1.1em 1.6em 1.3em;
         position: relative;
@@ -374,21 +379,20 @@
         width: 100%;
         height: 100%;
 
+        .category-title {
+            &.fixed {
+                margin-top: -3px;
+            }
+        }
         .cq-lookup-filters {
             width: 100%;
-            height: 10.5em;
             border-right: none;
-            max-height: 200px;
-            overflow: hidden;
+            position: relative;
+            z-index: 9;
             transition: max-height 0.2s ease-in;
             @include themify($themes) {
                 border-bottom: 1px solid themed('CatDisplaySearchBorder');
             }
-
-            &.scroll-down {
-                max-height: 0;
-                transition: max-height 0.2s ease-out;
-            }
         }
         .cq-lookup-input {
             margin: 1.2em 1em 0.5em;
@@ -411,7 +415,7 @@
             .cq-filter {
                 border-right: none;
                 background: transparent;
-                padding: 0px 20px;
+                padding: 7px 20px;
                 line-height: 3em;
 
                 &.cq-active-filter {

diff --git a/src/components/categoricaldisplay/CategoricalDisplay.jsx b/src/components/categoricaldisplay/CategoricalDisplay.jsx
@@ -5,16 +5,15 @@ import '../../../sass/components/_categorical-display.scss';
 const CategoricalDisplay = ({
     onSelectItem,
     setScrollPanel,
-    isScrollingDown,
     updateScrollSpy,
     scrollUp,
     scrollDown,
     ResultsPanel,
     FilterPanel,
-    SearchInput,
+    SearchInput
 }) => (
     <div className="cq-categorical-display">
-        <div className={`cq-lookup-filters ${isScrollingDown ? 'scroll-down' : ''}`}>
+        <div className="cq-lookup-filters">
             <SearchInput />
             <FilterPanel />
         </div>