diff --git a/package.json b/package.json
index 35371b21..66264012 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
"react-modal": "^3.5.1",
"react-qr-svg": "^2.1.0",
"react-time": "^4.3.0",
+ "react-transition-group": "^2.4.0",
"slugify": "^1.3.1",
"vex-js": "^4.1.0"
},
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index e691a053..3dd567cd 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -22,6 +22,8 @@
/////////////////////////////////////
.document {
+ @include transition;
+
width: 100%;
padding-top: ($spacer * 2);
background-color: $page-background-color;
@@ -36,8 +38,6 @@
}
@media (min-width: $screen-sm) {
- @include transition;
-
margin-top: $spacer * 2.65;
margin-bottom: $spacer * 20; // height of footer
position: relative;
diff --git a/src/components/molecules/Search.jsx b/src/components/molecules/Search.jsx
index ba2dd20f..f38b365e 100644
--- a/src/components/molecules/Search.jsx
+++ b/src/components/molecules/Search.jsx
@@ -1,6 +1,7 @@
import React, { PureComponent, Fragment } from 'react'
// import { Link } from 'gatsby'
import Helmet from 'react-helmet'
+import { CSSTransition } from 'react-transition-group'
import Input from '../atoms/Input'
import SearchIcon from '../svg/MagnifyingGlass'
import styles from './Search.module.scss'
@@ -10,9 +11,7 @@ class Search extends PureComponent {
super(props)
this.state = {
- searchOpen: false,
- query: '',
- results: []
+ searchOpen: false
}
}
@@ -40,22 +39,29 @@ class Search extends PureComponent {
{this.state.searchOpen && (
-
+
+
+
)}
)
diff --git a/src/components/molecules/Search.module.scss b/src/components/molecules/Search.module.scss
index 69d86532..94ea83ee 100644
--- a/src/components/molecules/Search.module.scss
+++ b/src/components/molecules/Search.module.scss
@@ -38,16 +38,15 @@
right: $spacer / 2;
top: 0;
z-index: 10;
- // transition: transform .3s ease-out;
- // transform: translate3d(0, -150%, 0);
-
- // :global(.has-search-open) & {
- // transform: translate3d(0, 0, 0);
- // }
input {
width: 100%;
}
+
+ @media (min-width: $screen-md) {
+ left: 0;
+ right: 0;
+ }
}
.searchInputClose {
@@ -55,3 +54,27 @@
right: $spacer / 4;
top: $spacer / 4;
}
+
+.appear,
+.enter {
+ opacity: .01;
+ transform: translate3d(0, -100px, 0);
+
+ &.appearActive,
+ &.enterActive {
+ opacity: 1;
+ transition: 200ms cubic-bezier(.4, 1.72, .61, .7);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.exit {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+
+ &.exitActive {
+ opacity: .01;
+ transition: 200ms ease-in;
+ transform: translate3d(0, -100px, 0);
+ }
+}