156 lines
3.0 KiB
SCSS
156 lines
3.0 KiB
SCSS
.movieShowcase {
|
|
background-color: $color-background;
|
|
grid-column: 2 / 13;
|
|
color: #fff;
|
|
|
|
&__heading {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
&__container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
&__container {
|
|
overflow-y: hidden;
|
|
transition: transform 450ms;
|
|
overflow: -moz-hidden-unscrollable;
|
|
// overflow-x: scroll;
|
|
display: flex;
|
|
width: 95vw;
|
|
// overflow: -moz-scrollbars-horizontal;
|
|
// grid-template-columns: repeat(20, 1fr);
|
|
column-gap: 0;
|
|
|
|
@include responsive(phone) {
|
|
width: 98vw;
|
|
}
|
|
|
|
|
|
&:hover &--movie {
|
|
opacity: .3;
|
|
|
|
&:hover {
|
|
transform: scale(1.5);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&:hover>* {
|
|
transform: translate3d(-5rem, 0, 0);
|
|
|
|
@include responsive(tab_port) {
|
|
transform: translate3d(-5rem, 0, 0);
|
|
}
|
|
|
|
@include responsive(phone) {
|
|
transform: translate3d(-3rem, 0, 0);
|
|
}
|
|
}
|
|
|
|
&--movie:hover~&--movie {
|
|
transform: translate3d(6rem, 0, 0);
|
|
|
|
@include responsive(tab_port) {
|
|
transform: translate3d(4.5rem, 0, 0);
|
|
}
|
|
|
|
@include responsive(phone) {
|
|
transform: translate3d(2.8rem, 0, 0);
|
|
}
|
|
}
|
|
|
|
|
|
&:hover>&--movie__netflix {
|
|
transform: translate3d(-1rem, 0, 0);
|
|
}
|
|
|
|
&--movie__netflix:hover~&--movie__netflix {
|
|
// transform: translate3d(1rem, 0, 0);
|
|
}
|
|
|
|
&:hover &--movie__netflix {
|
|
opacity: .3;
|
|
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&--movie {
|
|
cursor: pointer;
|
|
transition: all 450ms;
|
|
transform: center left;
|
|
padding-top: 3.5rem;
|
|
padding-bottom: 4rem;
|
|
height: 21.5rem;
|
|
min-height: 0;
|
|
object-fit: contain;
|
|
|
|
@include responsive(tab_port) {
|
|
height: 18.5rem;
|
|
}
|
|
|
|
@include responsive(phone) {
|
|
height: 14rem;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
&-image {
|
|
height: 100%;
|
|
// object-fit: contain;
|
|
}
|
|
|
|
&__netflix {
|
|
min-height: 0;
|
|
padding-top: 3rem;
|
|
padding-bottom: 4rem;
|
|
padding-right: 1rem;
|
|
height: 52rem;
|
|
cursor: pointer;
|
|
transition: all 450ms;
|
|
transform: center left;
|
|
|
|
@include responsive(tab_port) {
|
|
height: 42rem;
|
|
}
|
|
|
|
@include responsive(phone) {
|
|
height: 34rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Slick carousel override styles
|
|
.slick-track {
|
|
transition: transform 450ms;
|
|
|
|
&:hover>div.movieShowcase__container--movie-image {
|
|
opacity: .3;
|
|
|
|
&:hover {
|
|
transform: scale(1.5);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slick-slider {
|
|
margin-right: 4rem;
|
|
// right: -5px !important;
|
|
}
|
|
|
|
.slick-prev {
|
|
left: 0 !important;
|
|
z-index: 10000;
|
|
}
|
|
|
|
.slick-next {
|
|
right: 0 !important;
|
|
} |