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

107
src/components/MoviesListItem.vue
View File

@@ -97,74 +97,103 @@ 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;
> img {
width: 100%;
opacity: 0;
transform: scale(0.97) translateZ(0);
transition: opacity 0.5s ease, transform 0.5s ease;
&.is-loaded{
opacity: 1;
transform: scale(1);
}
&:hover {
transform: scale(1.03);
box-shadow: 0 0 10px rgba($dark, 0.1);
}
}
} }
&__content{
&__info {
padding-top: 15px; padding-top: 15px;
} font-weight: 300;
&__poster{
transition: transform 0.5s ease, box-shadow 0.3s ease; > p {
transform: translateZ(0); color: $text-color-70;
} margin: 0;
&__img{ font-size: 11px;
width: 100%; letter-spacing: 0.5px;
opacity: 0; transition: color 0.5s ease;
transform: scale(0.97) translateZ(0); cursor: pointer;
transition: opacity 0.5s ease, transform 0.5s ease; @include mobile-ls-min{
&.is-loaded{ font-size: 12px;
opacity: 1; }
transform: scale(1); @include tablet-min{
font-size: 14px;
}
} }
} }
&__link:not(.no-image):hover &__poster{ }
transform: scale(1.03);
box-shadow: 0 0 10px rgba($dark, 0.1);
.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;
} }
&__title{
margin: 0; &:hover {
font-size: 11px; transform: scale(1);
letter-spacing: 0.5px;
transition: color 0.5s ease;
cursor: pointer;
@include mobile-ls-min{
font-size: 12px;
}
@include tablet-min{
font-size: 14px;
}
}
&__link:hover &__title{
color: $text-color;
} }
} }
</style> </style>