skillbox/client/src/components/Modal.vue

<template>
  <div class="modal__backdrop">
    <div
      :class="{
        'modal--hide-header': hideHeader || fullscreen,
        'modal--fullscreen': fullscreen,
        'modal--small': small,
      }"
      class="modal"
    >
      <div class="modal__header">
        <slot name="header" />
      </div>
      <div class="modal__body">
        <slot />
        <div
          class="modal__close-button"
          @click="hideModal"
        >
          <cross class="modal__close-icon" />
        </div>
      </div>
      <div class="modal__footer">
        <slot name="footer">
          <!--<a class="button button&#45;&#45;active">Speichern</a>-->
          <a
            class="button"
            @click="hideModal"
            >Abbrechen</a
          >
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));

export default {
  props: {
    hideHeader: {
      type: Boolean,
      default: false,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    small: {
      type: Boolean,
      default: false,
    },
  },

  components: {
    Cross,
  },

  methods: {
    hideModal() {
      this.$store.dispatch('hideModal');
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/styles/_variables.scss';

.modal {
  align-self: center;
  justify-self: center;
  width: 700px;
  height: 80vh;
  background-color: $color-white;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  border: 1px solid $color-silver-light;
  display: -ms-grid;
  @supports (display: grid) {
    display: grid;
  }
  grid-template-rows: auto 1fr 65px;
  grid-template-areas: 'header' 'body' 'footer';
  -ms-grid-rows: auto 1fr 65px;
  position: relative;

  &__backdrop {
    display: flex;
    justify-content: center;
    @supports (display: grid) {
      display: grid;
    }
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba($color-white, 0.8);
    z-index: 90;
  }

  &__header {
    grid-area: header;
    -ms-grid-row: 1;
    padding: 10px $modal-lateral-padding;
    border-bottom: 1px solid $color-silver-light;
  }

  &__body {
    grid-area: body;
    -ms-grid-row: 2;
    padding: 10px $modal-lateral-padding;
    overflow: auto;
    box-sizing: border-box;
    min-height: 30vh;
  }

  &__close-button {
    display: none;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
    background: rgba($color-white, 0.5);
    border-radius: 40px;
    padding: 10px;
    align-content: center;
  }

  &__footer {
    grid-area: footer;
    -ms-grid-row: 3;
    border-top: 1px solid $color-silver-light;
    padding: 16px $modal-lateral-padding;
    display: flex;
    gap: $small-spacing;
  }

  $parent: &;

  &--hide-header {
    grid-template-rows: 1fr 65px;
    grid-template-areas: 'body' 'footer';

    #{$parent}__header {
      display: none;
    }

    #{$parent}__body {
      padding: $default-padding;
    }
  }

  &--fullscreen {
    width: 95vw;
    height: auto;
    grid-template-rows: 1fr;
    -ms-grid-rows: 1fr;
    grid-template-areas: 'body';
    overflow: hidden;

    #{$parent}__footer {
      display: none;
    }

    #{$parent}__body {
      padding: 0;
      scrollbar-width: none;
      margin-right: -5px;

      height: auto;
      max-height: 95vh;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    #{$parent}__close-button {
      display: flex;
    }
  }

  &--small {
    height: auto;

    #{$parent}__body {
      min-height: 0;
    }
  }
}
</style>