Commit 3058f708 authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt ✊
Browse files

add new cover-screen style for images

parent 9a2e46e6

src/components/generic/Image.vue

+43 −6
Original line number Diff line number Diff line
@@ -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>