diff --git a/packages/website/package.json b/packages/website/package.json index 44864af19d..b112590361 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -52,6 +52,7 @@ "material-ui": "^0.20.0", "moment": "2.21.0", "moment-precise-range-plugin": "^1.3.0", + "node-sass": "^4.12.0", "numeral": "^2.0.6", "polished": "^1.9.2", "query-string": "^6.0.0", @@ -66,7 +67,6 @@ "react-lazyload": "^2.3.0", "react-loadable": "^5.5.0", "react-markdown": "^4.0.6", - "react-modal-video": "^1.2.2", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", "react-responsive": "^6.0.1", @@ -80,6 +80,7 @@ "redux": "^3.6.0", "redux-devtools-extension": "^2.13.2", "rollbar": "^2.4.7", + "sass-loader": "^7.1.0", "semver": "5.5.0", "semver-sort": "0.0.4", "styled-components": "^4.1.1", @@ -119,11 +120,9 @@ "css-loader": "0.23.x", "less-loader": "^4.1.0", "make-promises-safe": "^1.1.0", - "node-sass": "^4.12.0", "raw-loader": "^0.5.1", "react-svg-loader": "^2.1.0", "rollbar-sourcemap-webpack-plugin": "^2.4.0", - "sass-loader": "^7.1.0", "shx": "^0.2.2", "source-map-loader": "^0.2.4", "style-loader": "0.23.x", diff --git a/packages/website/sass/modal_video.scss b/packages/website/sass/modal_video.scss new file mode 100644 index 0000000000..1b378cf981 --- /dev/null +++ b/packages/website/sass/modal_video.scss @@ -0,0 +1,134 @@ +$animation-speed: .3s; +$animation-function: ease-out; +$backdrop-color: rgba(0, 0, 0, .5); + +@keyframes modal-video { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes modal-video-inner { + from { + transform: translate(0, 100px); + } + + to { + transform: translate(0, 0); + } +} + +.modal-video { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: $backdrop-color; + z-index: 1000000; + cursor: pointer; + opacity: 1; + animation-timing-function: $animation-function; + animation-duration: $animation-speed; + animation-name: modal-video; + -webkit-transition: opacity $animation-speed $animation-function; + -moz-transition: opacity $animation-speed $animation-function; + -ms-transition: opacity $animation-speed $animation-function; + -o-transition: opacity $animation-speed $animation-function; + transition: opacity $animation-speed $animation-function; +} + +.modal-video-effect-exit { + opacity: 0; + + & .modal-video-movie-wrap { + -webkit-transform: translate(0, 100px); + -moz-transform: translate(0, 100px); + -ms-transform: translate(0, 100px); + -o-transform: translate(0, 100px); + transform: translate(0, 100px); + } +} + +.modal-video-body { + max-width: 940px; + width: 100%; + height: 100%; + margin: 0 auto; + display: table; +} + +.modal-video-inner { + display: table-cell; + vertical-align: middle; + width: 100%; + height: 100%; +} + +.modal-video-movie-wrap { + width: 100%; + height: 0; + position: relative; + padding-bottom: 56.25%; + background-color: #333; + animation-timing-function: $animation-function; + animation-duration: $animation-speed; + animation-name: modal-video-inner; + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); + -webkit-transition: -webkit-transform $animation-speed $animation-function; + -moz-transition: -moz-transform $animation-speed $animation-function; + -ms-transition: -ms-transform $animation-speed $animation-function; + -o-transition: -o-transform $animation-speed $animation-function; + transition: transform $animation-speed $animation-function; + + & iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.modal-video-close-btn { + position: absolute; + z-index: 2; + top: -35px; + right: -35px; + display: inline-block; + width: 35px; + height: 35px; + overflow: hidden; + border: none; + background: transparent; + + &:before { + transform: rotate(45deg); + } + + &:after { + transform: rotate(-45deg); + } + + &:before, + &:after { + content: ''; + position: absolute; + height: 2px; + width: 100%; + top: 50%; + left: 0; + margin-top: -1px; + background: #fff; + border-radius: 5px; + margin-top: -6px; + } +} \ No newline at end of file diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index b65b93e7da..5dcd168785 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -38,7 +38,7 @@ tradeHistoryStorage.clearIfRequired(); trackedTokenStorage.clearIfRequired(); import 'less/all.less'; -import 'react-modal-video/scss/modal-video.scss'; +import 'sass/modal_video.scss'; // We pass modulePromise returning lambda instead of module promise, // cause we only want to import the module when the user navigates to the page. diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js index 7c85b1ff8c..994b619c1e 100644 --- a/packages/website/webpack.config.js +++ b/packages/website/webpack.config.js @@ -28,6 +28,7 @@ const config = { alias: { ts: path.join(__dirname, '/ts'), less: path.join(__dirname, '/less'), + sass: path.join(__dirname, '/sass'), md: path.join(__dirname, '/md'), }, }, diff --git a/yarn.lock b/yarn.lock index 3ae0961233..d74c944cfc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14445,13 +14445,6 @@ react-markdown@^4.0.6: unist-util-visit "^1.3.0" xtend "^4.0.1" -react-modal-video@^1.2.2: - version "1.2.2" - resolved "https://registry.npmjs.org/react-modal-video/-/react-modal-video-1.2.2.tgz#d45069f112a4e79306470b7e893fbe03252b8e6b" - integrity sha512-isfaRFvCZZRWkPvoPRzXL1FaHtI3PQHqkX2UrtOGjGUPNGZeMBDT5xPqON7h4e5CGvpf62XIq3lxT0InPKAUgw== - dependencies: - react-transition-group "^2.2.1" - react-popper@^1.0.0-beta.6: version "1.0.0-beta.6" resolved "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0-beta.6.tgz#cb27a2ac56adccbaf5f9c4132387289069240834" @@ -14595,16 +14588,6 @@ react-transition-group@^1.2.1: prop-types "^15.5.6" warning "^3.0.0" -react-transition-group@^2.2.1: - version "2.9.0" - resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" - integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== - dependencies: - dom-helpers "^3.4.0" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react-lifecycles-compat "^3.0.4" - react-transition-group@^4.2.1: version "4.2.1" resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.2.1.tgz#61fc9e36568bff9a1fe4e60fae323c8a6dbc0680"