psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated modal styles

Browse Source
This commit is contained in:
andres alcocer
2021-10-08 20:38:30 -04:00
parent 8fcbe7adaa
commit 8ee1dc1bfd
3 changed files with 142 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/UI/Backdrop.js
View File

@@ -1,6 +1,11 @@
import React from 'react' import React from 'react'
const backdrop = ({ toggleBackdrop, show }) => const backdrop = ({ toggleBackdrop, show }) =>
show ? <div onClick={toggleBackdrop} className='backdrop'></div> : null show ? (
<div
onClick={toggleBackdrop}
className={`backdrop ${show ? 'hideB' : ''}`}
></div>
) : null
export default backdrop export default backdrop

27
src/static/sass/components/_backdrop.scss
View File

@@ -1,10 +1,19 @@
.backdrop { .backdrop {
width: 120%; width: 120%;
height: 100%; height: 100%;
position: fixed; position: fixed;
z-index: 100; z-index: 100;
left: 0; left: 0;
top: 0; top: 0;
background-color: rgba($color-background, .7); animation: fadeIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
transition: all .3s; background-color: rgba($color-background, 0.7);
} }
@keyframes fadeIn {
0% {
background: rgba(0, 0, 0, 0);
}
100% {
background: rgba(0, 0, 0, 0.7);
}
}

231
src/static/sass/components/_modal.scss
View File

@@ -1,142 +1,147 @@
.modal { .modal {
position: fixed; position: fixed;
z-index: 500; z-index: 500;
width: 100%; width: 100%;
top: 0; top: 0;
left: 0; left: 0;
color: #fff; color: #fff;
height: 52rem; height: 52rem;
opacity: 0; opacity: 0;
box-shadow: 0 1.5rem 4rem rgba($color-dark, .15); box-shadow: 0 1.5rem 4rem rgba($color-dark, 0.15);
transition: all .3s; transition: all 0.3s;
@include responsive(tab_port) { @include responsive(tab_port) {
height: 38rem; height: 38rem;
} }
@include responsive(phone) { @include responsive(phone) {
height: 50rem; height: 50rem;
} }
&__container {
background: linear-gradient(90deg, #000 50%, transparent);
width: 70%;
padding-top: 3rem;
height: 100%;
padding-left: 5rem;
&__container { @include responsive(tab_port) {
background: linear-gradient(90deg, #000 50%, transparent); background: linear-gradient(
width: 70%; 90deg,
padding-top: 3rem; rgb(0, 0, 0) 55%,
height: 100%; rgba(0, 0, 0, 0.733),
padding-left: 5rem; transparent
);
width: 88%;
}
@include responsive(tab_port) { @include responsive(tab_medium) {
background: linear-gradient(90deg, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0.733), transparent); background: linear-gradient(90deg, rgba(0, 0, 0, 0.966) 65%, transparent);
width: 88%; width: 100%;
} }
@include responsive(tab_medium) { @include responsive(phone) {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.966) 65%, transparent); padding-top: 1rem;
width: 100%; padding-left: 1rem;
} }
}
@include responsive(phone) { &__title {
padding-top: 1rem; font-size: 4rem;
padding-left: 1rem; }
}
}
&__title { &__rating {
font-size: 4rem; font-size: 2rem;
} color: $color-green-modal;
}
&__rating { &__info {
font-size: 2rem; padding-top: 1.6rem;
color: $color-green-modal; font-size: 2rem;
}
&__info { @include responsive(phone) {
padding-top: 1.6rem; padding-top: 1.2rem;
font-size: 2rem; }
}
@include responsive(phone) { &__episode {
padding-top: 1.2rem; padding-top: 0.5rem;
} font-size: 2rem;
} }
&__episode { &__overview {
padding-top: .5rem; color: $color-modal-grey-2;
font-size: 2rem; padding-top: 2rem;
} font-size: 2rem;
hyphens: auto;
width: 60%;
line-height: 1.2;
&__overview { @include responsive(lg_desktop) {
color: $color-modal-grey-2;
padding-top: 2rem;
font-size: 2rem;
hyphens: auto;
width: 60%; width: 60%;
line-height: 1.2; font-size: 1.8rem;
}
@include responsive(lg_desktop) { @include responsive(tab_port) {
width: 60%; width: 80%;
font-size: 1.8rem; }
}
@include responsive(tab_port) { @include responsive(tab_medium) {
width: 80%; width: 95%;
} color: rgba(255, 255, 255, 0.877);
}
@include responsive(tab_medium) { @include responsive(phone) {
width: 95%; padding-top: 1rem;
color: rgba(255, 255, 255, 0.877); font-size: 1.7rem;
} }
}
@include responsive(phone) { &__btn {
padding-top: 1rem; text-transform: uppercase;
font-size: 1.7rem; font-weight: 500;
} cursor: pointer;
} background-color: transparent;
color: #fff;
border: 0.5px solid $color-modal-grey-2;
border-radius: 2px;
font-size: 1.5rem;
margin-top: 2rem;
margin-right: 1rem;
padding: 1rem 2rem 1rem 2rem;
transition: all 0.2s;
&__btn { @include responsive(phone) {
text-transform: uppercase; margin-top: 1rem;
font-weight: 500; }
cursor: pointer;
background-color: transparent;
color: #fff;
border: .5px solid $color-modal-grey-2;
border-radius: 2px;
font-size: 1.5rem;
margin-top: 2rem;
margin-right: 1rem;
padding: 1rem 2rem 1rem 2rem;
transition: all .2s;
@include responsive(phone) { &:hover {
margin-top: 1rem; transform: scale(1.09);
} }
&:hover { &--red {
transform: scale(1.09); background-color: $color-red-2;
} border: none;
}
&--red { &--icon {
background-color: $color-red-2; fill: #fff;
border: none; padding-right: 1rem;
} height: 1.4rem;
width: 1.4rem;
&--icon { }
fill: #fff; }
padding-right: 1rem;
height: 1.4rem;
width: 1.4rem;
}
}
} }
.show { .show {
transition: .5s .3s ease-out; transition: 0.3s 0.3s ease-out;
top: 25%; top: 25%;
left: 0; left: 0;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.hide { .hide {
visibility: hidden; visibility: hidden;
} transition: 0.3s ease-out;
}