KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Cleaned up some of the styling for movieslistitem.

Browse Source
This commit is contained in:
Kevin
2020-02-19 23:54:20 +01:00
parent f7a579a438
commit 2f430b2d8f
1 changed files with 68 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/MoviesListItem.vue
View File

@@ -97,46 +97,45 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "./src/scss/variables";
@import "./src/scss/media-queries"; @import "./src/scss/media-queries";
@import "./src/scss/main";
.movies-item { .movie-item {
padding: 10px; padding: 10px;
width: 50%; width: 50%;
background-color: $background-color; background-color: $background-color;
transition: background-color 0.5s ease; transition: background-color 0.5s ease;
@include tablet-min{ @include tablet-min {
padding: 15px; padding: 15px;
width: 33%;
} }
@include tablet-landscape-min{ @include tablet-landscape-min {
padding: 15px; padding: 15px;
width: 25%; width: 25%;
} }
@include desktop-min{ @include desktop-min {
padding: 15px; padding: 15px;
width: 20%; width: 20%;
} }
@include desktop-lg-min{ @include desktop-lg-min {
padding: 15px; padding: 15px;
width: 12.5%; width: 12.5%;
} }
&__link{ &:hover &__info > p {
color: $text-color;
}
&__poster {
text-decoration: none; text-decoration: none;
color: $text-color-70; color: $text-color-70;
font-weight: 300; font-weight: 300;
}
&__content{ > img {
padding-top: 15px;
}
&__poster{
transition: transform 0.5s ease, box-shadow 0.3s ease;
transform: translateZ(0);
}
&__img{
width: 100%; width: 100%;
opacity: 0; opacity: 0;
transform: scale(0.97) translateZ(0); transform: scale(0.97) translateZ(0);
@@ -145,12 +144,20 @@ export default {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
}
&__link:not(.no-image):hover &__poster{ &:hover {
transform: scale(1.03); transform: scale(1.03);
box-shadow: 0 0 10px rgba($dark, 0.1); box-shadow: 0 0 10px rgba($dark, 0.1);
} }
&__title{ }
}
&__info {
padding-top: 15px;
font-weight: 300;
> p {
color: $text-color-70;
margin: 0; margin: 0;
font-size: 11px; font-size: 11px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@@ -163,8 +170,30 @@ export default {
font-size: 14px; font-size: 14px;
} }
} }
&__link:hover &__title{ }
color: $text-color; }
.no-image {
background-color: var(--text-color);
color: var(--background-color);
width: 100%;
height: 383px;
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 1.5rem;
width: 70%;
text-align: center;
text-transform: uppercase;
}
&:hover {
transform: scale(1);
} }
} }
</style> </style>