Remove react-modal-video as a dep and use the sass directly
This commit is contained in:
fragosti
parent
8001daad8c
commit
6c72239365
@ -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",
|
||||
|
||||
134
packages/website/sass/modal_video.scss
Normal file
134
packages/website/sass/modal_video.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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.
|
||||
|
||||
@ -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'),
|
||||
},
|
||||
},
|
||||
|
||||
17
yarn.lock
17
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user