Commit 3058f708 authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt

add new cover-screen style for images

parent 9a2e46e6
......@@ -61,15 +61,17 @@
autoSize: Boolean,
contain: Boolean,
cover: Boolean,
coverScreen: Boolean,
calculateLuminosity: Boolean
},
computed: {
cssClasses () {
const result = []
if (this.contain) result.push('is-contained')
if (this.cover) result.push('is-covering')
if (this.size) result.push('is-fixed-size')
return result
return {
'is-contained': this.contain,
'is-covering': this.cover,
'is-covering-screen': this.coverScreen,
'is-fixed-size': this.size
}
},
style () {
const result = {}
......@@ -145,7 +147,9 @@
}
</script>
<style>
<style lang="scss">
@import '../../styles/variables';
.image {
overflow: hidden;
}
......@@ -168,4 +172,37 @@
.image.is-covering img {
object-fit: cover;
}
.image.is-covering-screen {
--luminosity: .5;
width: calc(100% + 2rem) !important;
height: 75vh !important;
overflow: hidden;
pointer-events: none;
filter: blur(10px);
opacity: .3;
position: fixed;
top: -1rem;
left: -1rem;
right: -1rem;
img {
max-height: none !important;
height: auto !important;
transform: translateY(-10%);
filter: brightness(calc(1 - var(--luminosity)));
}
&::after {
content: ' ';
display: block;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 100%;
background-image: linear-gradient(fade_out($color-base, 1), $color-base);
z-index: 2;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment