Lightbox

_base-button.vue

<template>
  <button
    :class="{'c-btn--text': text}"
    class="c-btn"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

<style lang="scss">
.c-btn {
  color: inherit;
  font-size: inherit;
  outline: none;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  white-space: nowrap;

  > * {
    pointer-events: none;
  }

  &:hover,
  &:active,
  &:focus {
    color: $color-fountain-blue;
  }
}

.c-btn:not(.c-btn--text) {
  background-color: $color-fountain-blue;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  color: $color-white;
  line-height: rem-calc(80px);
  padding: 0 rem-calc(80px);
  transition: all 0.3s ease;

  @include mq(0 $mq-md) {
    margin-top: rem-calc(30px);
    padding: 0 rem-calc(30px);
  }

  [class*='--gray'] & {
    background-color: $color-white;
    color: $color-fountain-blue;

    &:hover {
      background-color: $color-fountain-blue;
      color: $color-white;
    }
  }

  [class*='--fountain-blue'] & {
    background-color: $color-white;
    color: $color-fountain-blue;

    &:hover {
      background-color: $color-dove-gray;
      color: $color-white;
    }
  }
}

.c-btn--text {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
</style>

<script>
export default {
  props: {
    text: {
      type: Boolean,
      default: false
    }
  }
}
</script>

_base-modal.vue

<template>
  <div class="c-modal__wrapper">
    <BaseButton
      text
      @click="toggle"
    >
      <slot />
    </BaseButton>
    <transition name="c-modal--unfold">
      <template v-if="state">
        <div
          class="c-modal__overlay"
          @click="toggle"
        />
      </template>
    </transition>
    <transition name="c-modal--zoom">
      <template v-if="state">
        <div class="c-modal">
          <BaseButton
            class="c-modal__close"
            text
            @click="toggle"
          >
            <BaseSvg
              color="#50bbbe"
              fill
              width="20"
              icon="close"
            />
          </BaseButton>
          <div class="c-modal__guts">
            <BaseSection>
              <slot name="modal" />
            </BaseSection>
          </div>
        </div>
      </template>
    </transition>
  </div>
</template>

<style lang="scss">
.c-modal {
  display: block;
  width: 900px;
  max-width: 100%;
  height: 90vh;
  max-height: 100%;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;

  &--unfold-enter-active {
    transform: scaleY(0.01) scaleX(0);
    animation: unfold 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  }

  &--unfold-leave-active {
    transform: scale(1);
    animation: unfold 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) reverse;
  }

  &--zoom-enter-active {
    transform: translate(-50%, -50%) scale(0);
    animation: zoom 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  }

  &--zoom-leave-active {
    animation: zoom 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) reverse;
  }

  &__wrapper {
    display: inherit;
  }

  &__close {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 20px;

    &:hover svg {
      transform: rotate(360deg);
    }
  }

  &__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
  }

  &__guts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: rem-calc(40px);
    color: $color-dove-gray;

    & .c-section {
      box-shadow: none;
      &__wrapper {
        padding: 0;
      }
    }
  }

  @keyframes unfold {
    0% {
      transform: scaleY(0.005) scaleX(0);
    }
    50% {
      transform: scaleY(0.005) scaleX(1);
    }
    100% {
      transform: scaleY(1) scaleX(1);
    }
  }

  @keyframes zoom {
    0% {
      transform: translate(-50%, -50%) scale(0);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }
}

.is-modal {
  overflow: hidden;

  header {
    display: none;
  }
}
</style>

<script>
export default {
  data() {
    return {
      state: false
    }
  },
  methods: {
    toggle() {
      this.state = !this.state

      if (this.state) {
        document.body.classList.add('is-modal')
      } else {
        setTimeout(() => {
          document.body.classList.remove('is-modal')
        }, 1250)
      }
    }
  }
}
</script>

_base-section.vue

<template>
  <section
    :class="{
      'c-section--fountain-blue': blue,
      'c-section--gray': gray,
      'c-section--transparent': transparent
    }"
    class="c-section"
  >
    <div
      :class="{'c-section__wrapper--bgi': bgi}"
      class="c-section__wrapper"
    >
      <slot name="before" />
      <div class="c-section__content">
        <slot />
      </div>
    </div>
    <div
      v-if="hasAfter()"
      :class="{
        'c-section--fountain-blue': blue,
        'c-section--gray': gray,
      }"
      class="c-section__wrapper"
    >
      <div class="c-section__content">
        <slot name="after" />
      </div>
    </div>
  </section>
</template>

<style lang="scss">
.c-section {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.25);
  background-color: transparent;
  position: relative;
  overflow: hidden;
  z-index: 1;

  &--fountain-blue {
    background-color: $color-fountain-blue;
    color: $color-white;
  }

  &--gray {
    background-color: $color-dove-gray;
    color: $color-white;
  }

  &--transparent {
    background-color: transparent;
  }

  &__wrapper {
    padding: rem-calc(90px);
    display: flex;
    justify-content: center;
    width: 100%;

    @include mq(0 $mq-md) {
      padding: rem-calc(40px);
    }

    &--bgi {
      position: relative;
    }
  }

  &__content {
    width: 100%;
    max-width: rem-calc(900px);

    > *:first-child,
    > .c-bgi-parallax + * {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }

    .c-btn:not(.c-btn--text) {
      margin-top: rem-calc(60px);
    }
  }
}
</style>

<script>
export default {
  props: {
    blue: {
      type: Boolean,
      default: false
    },
    gray: {
      type: Boolean,
      default: false
    },
    transparent: {
      type: Boolean,
      default: false
    },
    bgi: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    hasAfter() {
      return !!this.$slots.after
    }
  }
}
</script>

gistfile1.txt

<BaseModal>
  Impressum
  <template slot="modal">
    <Imprint />
  </template>
</BaseModal>