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

fixed header bottom fade styling

Browse Source
This commit is contained in:
andres alcocer
2021-10-06 14:07:41 -04:00
parent e66e5bf133
commit 9d4e0194f7
3 changed files with 176 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.js
View File

@@ -11,7 +11,6 @@ import App from './containers/App';
import 'swiper/css'; import 'swiper/css';
import 'swiper/css/navigation'; import 'swiper/css/navigation';
import 'swiper/css/pagination'; import 'swiper/css/pagination';
// import 'swiper/css/scrollbar';
// Import main sass file to apply global styles // Import main sass file to apply global styles
import './static/sass/style.scss'; import './static/sass/style.scss';

12
src/static/sass/components/_movieShowcase.scss
View File

@@ -10,7 +10,7 @@
background-color: rgb(255, 255, 255) !important; background-color: rgb(255, 255, 255) !important;
} }
.swiper-container-horizontal>.swiper-pagination-bullets { .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0 !important; bottom: 0 !important;
left: 0 !important; left: 0 !important;
width: 100% !important; width: 100% !important;
@@ -32,7 +32,7 @@ div.swiper-button-next {
} }
.swiper-wrapper:hover .swiper-slide { .swiper-wrapper:hover .swiper-slide {
opacity: .3 !important; opacity: 0.3 !important;
&:hover { &:hover {
transform: scale(1.3) !important; transform: scale(1.3) !important;
@@ -45,7 +45,7 @@ div.swiper-button-next {
} }
.movieShowcase { .movieShowcase {
background-color: $color-background; background-color: transparent;
grid-column: 2 / 13; grid-column: 2 / 13;
color: #fff; color: #fff;
@@ -62,7 +62,7 @@ div.swiper-button-next {
width: 98vw; width: 98vw;
} }
&--movie:hover~&--movie { &--movie:hover ~ &--movie {
transform: translate3d(5rem, 0, 0); transform: translate3d(5rem, 0, 0);
@include responsive(tab_port) { @include responsive(tab_port) {
@@ -74,7 +74,7 @@ div.swiper-button-next {
} }
} }
&--movie__netflix:hover~&--movie__netflix { &--movie__netflix:hover ~ &--movie__netflix {
transform: translate3d(1rem, 0, 0); transform: translate3d(1rem, 0, 0);
} }
@@ -102,7 +102,7 @@ div.swiper-button-next {
object-fit: contain; object-fit: contain;
&:not(:last-child) { &:not(:last-child) {
padding-right: .5rem; padding-right: 0.5rem;
} }
&-image { &-image {

20
src/static/sass/layout/_header.scss
View File

@@ -8,7 +8,6 @@
height: 50rem; height: 50rem;
} }
&__container { &__container {
padding-top: 20rem; padding-top: 20rem;
padding-left: 4.5rem; padding-left: 4.5rem;
@@ -31,12 +30,12 @@
outline: none; outline: none;
border: none; border: none;
font-weight: 700; font-weight: 700;
border-radius: .2vw; border-radius: 0.2vw;
padding-left: 3.5rem; padding-left: 3.5rem;
padding-right: 3.5rem; padding-right: 3.5rem;
margin-right: 1rem; margin-right: 1rem;
padding-top: 1rem; padding-top: 1rem;
background-color: rgba(51,51,51,.5); background-color: rgba(51, 51, 51, 0.5);
padding-bottom: 1rem; padding-bottom: 1rem;
&-add { &-add {
@@ -56,8 +55,8 @@
&:hover { &:hover {
color: #000; color: #000;
background-color: #e6e6e6; background-color: #e6e6e6;
transition: all .2s; transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
& > * { & > * {
fill: #000; fill: #000;
@@ -79,7 +78,14 @@
&--fadeBottom { &--fadeBottom {
height: 28.5rem; height: 28.5rem;
background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17)); background-image: linear-gradient(
180deg,
transparent,
rgba(0, 0, 0, 0.61),
rgb(31, 30, 30),
rgb(17, 17, 17),
rgb(17, 17, 17),
rgb(17, 17, 17)
);
} }
} }