marc-leopold/components/GalleryFeatured.vue

<template>
  <ul class="gallery-featured">
    <li v-for="(gallery, index) in galleries"
        class="featured-image thumb-overlay selected-indicator"
        :class="{ 'is-active': index === galleryActive }"
        :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }"
        :key="index"
        @click="$emit('clicked', index)">
      <span class="gallery-title">{{ gallery.title }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    galleries: {
      type: Array,
      required: true
    },
    galleryActive: {
      type: Number,
      required: false,
      default () {
        return 0
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.featured-image {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

@media (max-width: $bp__layout) {
  .featured-image {
    height: calc(50vh - #{$site-menu__header-height / 2});
    width: 100vw;
    flex: 0 0 100vw;
  }

  .gallery-title {
    position: absolute;
    display: block;
    max-width: 66%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 1.5em;

    color: #fff;
  }

  .thumb-overlay {
    $color: $color__neutral-100; // color of overlay

    &::before {
      background: linear-gradient(
                    to bottom,
                    rgba($color, .9),
                    rgba($color, .5),
                    rgba($color, .5)
                  );
    }

    &::after {
      background: linear-gradient(
                    to left,
                    rgba($color, .4),
                    rgba($color, 0),
                    rgba($color, .4)
                  );
    }
  }

}

@media (min-width: $bp__layout) {
  .gallery-featured {
    transition: opacity .3s; // TEMP
    padding: 8px;

    cursor: pointer;
  }

  .featured-image {
    z-index: 10;
    position: relative;
    height: 0;
    padding-top: 100%;
    margin-bottom: 4px;

  }

  .gallery-title {
    z-index: 15;
    position: absolute;
    top: 8px;
    right: 8px;
    text-align: right;
    font-size: 1em;
    @include font-title();
    color: $color__neutral-900;

    @media (min-width: $bp__gallery-compact) {
      font-size: 1.3em;
    }
  }

}

</style>