_auk-modal.scss

/* ==========================================================================
  auk-modal
   ========================================================================== */

/* Variables
   ========================================================================== */

$auk-modal-padding-horizontal: 2.4rem !default;
$auk-modal-padding-vertical: 2.4rem !default;
$auk-modal-border-radius: 0.3rem !default;
$auk-modal-shadow-color: $auk-gray-600 !default;

$auk-modal-header-bg-color: #fff !default;
$auk-modal-footer-bg-color: #fff !default;
$auk-modal-header-border-color: $auk-gray-300 !default;
$auk-modal-footer-border-color: $auk-gray-300 !default;

/* Component
  ========================================================================== */

.auk-modal-context {
  display: flex;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transform: translateY(-4rem) scale(0.98);
  transition: visibility 0s linear 0.2s, opacity 0.2s linear,
    transform 0.2s ease-in-out;
  visibility: hidden;
  width: 100%;
  align-items: center;
  justify-content: center;

  &.auk-modal-context--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
    visibility: visible;
  }
}

.auk-modal {
  z-index: $z-index-modal;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  height: 100%;
}

/* Parts
   ========================================================================== */

// We use a specific logic of divs to make sure the modal flexes correctly
.auk-modal__push {
  flex: 1 0 auto;
}

.auk-modal__content {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  max-height: calc(100vh - 4rem);
  border-radius: $auk-modal-border-radius;
  box-shadow: $auk-shadow-large;

  > *:first-child {
    border-radius: $auk-modal-border-radius $auk-modal-border-radius 0 0;
  }

  > *:last-child {
    border-radius: 0 0 $auk-modal-border-radius $auk-modal-border-radius;
  }
}

.auk-modal__header {
  padding: 0 2rem;
}

.auk-modal__header--bordered {
  border-bottom: 0.1rem solid $auk-gray-300;
}

.auk-modal__body {
  flex: 0 1 auto;
  overflow: auto;
}

.auk-modal__footer {
  padding: 0 2rem;
}

.auk-modal__footer--bordered {
  border-top: 0.1rem solid $auk-gray-300;
}

.auk-modal__header,
.auk-modal__body,
.auk-modal__footer {
  background: #fff;
}

.auk-modal__header,
.auk-modal__footer {
  flex: 0 0 auto;
}

/* Sizes
   ========================================================================== */

.auk-modal--large {
  width: 90rem;
}

.auk-modal--medium {
  width: 70rem;
}

.auk-modal--small {
  width: 50rem;
}

.auk-modal--xsmall {
  width: 30rem;
}

.auk-modal--full-screen {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;

  .auk-modal__body,
  .auk-modal__content {
    height: 100%;
    flex: 1 1 auto;
  }

  .auk-modal__content {
    max-height: none;

    > *:first-child,
    > *:last-child {
      border-radius: 0;
    }
  }

  .auk-modal__push {
    display: none;
  }
}

/* Backdrop
   ========================================================================== */

.auk-modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba($auk-gray-900, 0.2);
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;
  visibility: hidden;
  z-index: $z-index-modal-backdrop;

  &.auk-modal-backdrop--visible {
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
  }
}

.auk-modal-context + .auk-modal-context {
  background: rgba($auk-gray-900, 0.2);
}