diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index a851cdd..8a66ba7 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -64,7 +64,7 @@
@@ -220,14 +220,14 @@ export default {
@import "./src/scss/variables";
@import "./src/scss/media-queries";
-.movie{
- &__wrap{
+.movie {
+ &__wrap {
display: flex;
- &--header{
+ &--header {
align-items: center;
height: 100%;
}
- &--main{
+ &--main {
display: flex;
flex-wrap: wrap;
flex-direction: column;
@@ -236,7 +236,7 @@ export default {
}
}
}
- &__header{
+ &__header {
height: 250px;
position: relative;
background-size: cover;
@@ -259,9 +259,9 @@ export default {
}
}
- &__poster{
+ &__poster {
display: none;
- @include tablet-min{
+ @include tablet-min {
background: $c-white;
height: 0;
display: block;
@@ -280,7 +280,7 @@ export default {
transform: scale(0.97) translateZ(0);
transition: opacity 0.5s ease, transform 0.5s ease;
- &.is-loaded{
+ &.is-loaded {
opacity: 1;
transform: scale(1);
}
@@ -314,7 +314,7 @@ export default {
margin-top: 10px;
}
}
- &__main{
+ &__main {
background: $c-light;
min-height: calc(100vh - 250px);
@include tablet-min {
@@ -323,20 +323,20 @@ export default {
height: 100%;
}
- &__actions{
+ &__actions {
text-align: center;
// min-height: 394px;
width: 100%;
order: 2;
padding: 20px;
border-top: 1px solid rgba($c-dark, 0.05);
- @include tablet-min{
+ @include tablet-min {
order: 1;
width: 45%;
padding: 185px 0 40px 40px;
border-top: 0;
}
- &-link{
+ &-link {
display: flex;
align-items: center;
text-decoration: none;
@@ -344,107 +344,109 @@ export default {
color: rgba($c-dark, 0.5);
transition: color 0.5s ease;
font-size: 11px;
- padding: 10px 0;
+ padding: 5px 0;
border-bottom: 1px solid rgba($c-dark, 0.05);
- &:hover{
+ &:hover {
color: rgba($c-dark, 0.75);
}
- &.active{
+ &.active {
color: $c-dark;
}
- &.pending{
+ &.pending {
color: #f8bd2d;
}
}
- &-icon{
+ &-icon {
width: 18px;
height: 18px;
margin: 0 10px 0 0;
fill: rgba($c-dark, 0.5);
transition: fill 0.5s ease, transform 0.5s ease;
- &.waiting{
+ &.waiting {
transform: scale(0.8, 0.8);
}
- &.pending{
+ &.pending {
fill: #f8bd2d;
}
}
- &-link:hover &-icon{
+ &-link:hover &-icon {
fill: rgba($c-dark, 0.75);
cursor: pointer;
}
- &-link.active &-icon{
+ &-link.active &-icon {
fill: $c-green;
}
- &-text{
+ &-text {
display: block;
padding-top: 2px;
cursor: pointer;
+ margin:4.4px;
+ margin-left: -3px;
}
}
- &__info{
+ &__info {
width: 100%;
padding: 20px;
order: 1;
- @include tablet-min{
+ @include tablet-min {
order: 2;
padding: 40px;
width: 55%;
margin-left: 45%;
}
}
- &__actions + &__info{
+ &__actions + &__info {
margin-left: 0;
}
- &__description{
- font-weight: 300;
- font-size: 13px;
- line-height: 1.8;
+ &__description {
+ font-weight: 300;
+ font-size: 13px;
+ line-height: 1.8;
+ margin-bottom: 20px;
+ @include tablet-min {
+ margin-bottom: 30px;
+ font-size: 14px;
+ }
+ }
+ &__details {
+ &-block {
+ float: left;
+ }
+ &-block:not(:last-child) {
margin-bottom: 20px;
- @include tablet-min{
+ margin-right: 20px;
+ @include tablet-min {
margin-bottom: 30px;
- font-size: 14px;
+ margin-right: 30px;
}
}
- &__details{
- &-block{
- float: left;
- }
- &-block:not(:last-child){
- margin-bottom: 20px;
- margin-right: 20px;
- @include tablet-min{
- margin-bottom: 30px;
- margin-right: 30px;
- }
- }
- &-title{
- margin: 0;
- font-weight: 400;
- text-transform: uppercase;
- font-size: 14px;
- color: $c-green;
- @include tablet-min{
- font-size: 16px;
- }
- }
- &-text{
- font-weight: 300;
- font-size: 14px;
- margin-top: 5px;
+ &-title {
+ margin: 0;
+ font-weight: 400;
+ text-transform: uppercase;
+ font-size: 14px;
+ color: $c-green;
+ @include tablet-min {
+ font-size: 16px;
}
}
- &__admin{
+ &-text {
+ font-weight: 300;
+ font-size: 14px;
+ margin-top: 5px;
+ }
+ }
+ &__admin {
width: 100%;
padding: 20px;
order: 2;
- @include tablet-min{
+ @include tablet-min {
order: 3;
padding: 40px;
padding-top: 0px;
width: 100%;
}
- &-title{
+ &-title {
margin: 0;
font-weight: 400;
text-transform: uppercase;
@@ -452,7 +454,7 @@ export default {
font-size: 14px;
color: $c-green;
padding-bottom: 20px;
- @include tablet-min{
+ @include tablet-min {
font-size: 16px;
}
}