KevinMidboe
fa50dd3455
variables.scss file and defining css variables in :root and alterting them based on prefered color scheme. This gives us a mechanism to set custom color schemes for the entire site from one place and changing between them just by setting a class to the body element. This is done by overwriting the css variables and then our scss variables use these changes and apply them downward. This seems like a really nice setup for the switching between- and adding color schemes. Also did a lot of cleanup of unused, duplicate or errors styling throughout the application.
88 lines
1.6 KiB
Vue
88 lines
1.6 KiB
Vue
<template>
|
|
<div class="movie-popup" @click="$popup.close()">
|
|
<div class="movie-popup__box" @click.stop>
|
|
<movie :id="id" :type="type"></movie>
|
|
<button class="movie-popup__close" @click="$popup.close()"></button>
|
|
</div>
|
|
<i class="loader"></i>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Movie from './Movie.vue';
|
|
|
|
export default {
|
|
props: ['id', 'type'],
|
|
components: { Movie },
|
|
created(){
|
|
let that = this
|
|
window.addEventListener('keyup', function(e){
|
|
if (e.keyCode == 27) {
|
|
that.$popup.close()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./src/scss/variables";
|
|
@import "./src/scss/media-queries";
|
|
|
|
.movie-popup{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 20;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: rgba($dark, 0.93);
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow: auto;
|
|
&__box{
|
|
width: 100%;
|
|
max-width: 768px;
|
|
position: relative;
|
|
z-index: 5;
|
|
background: $background-color-secondary;
|
|
padding-bottom: 50px;
|
|
@include tablet-min{
|
|
padding-bottom: 0;
|
|
margin: 40px auto;
|
|
}
|
|
}
|
|
&__close{
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
width: 40px;
|
|
height: 40px;
|
|
transition: background 0.5s ease;
|
|
cursor: pointer;
|
|
&:before,
|
|
&:after{
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 19px;
|
|
left: 10px;
|
|
width: 20px;
|
|
height: 2px;
|
|
background: $white;
|
|
}
|
|
&:before{
|
|
transform: rotate(45deg);
|
|
}
|
|
&:after{
|
|
transform: rotate(-45deg);
|
|
}
|
|
&:hover{
|
|
background: $green;
|
|
}
|
|
}
|
|
}
|
|
</style>
|