signal-desktop/stylesheets/components/Modal.scss

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

.module-Modal {
  @include popper-shadow();
  border-radius: 8px;
  margin: 0 auto;
  max-width: 360px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;

  @include light-theme() {
    background: $color-white;
    color: $color-gray-90;
  }

  @include dark-theme() {
    background: $color-gray-95;
    color: $color-gray-05;
  }

  &__header {
    position: sticky;
    padding: 16px 16px 0 16px;
  }

  &__title {
    @include font-body-1-bold;
    margin: 0 0 1em 0;
    padding: 0;
  }

  &__close-button {
    @include button-reset;

    border-radius: 4px;
    float: right;
    height: 24px;
    width: 24px;

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;

      @include light-theme {
        @include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
      }

      @include dark-theme {
        @include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
      }
    }

    @include light-theme {
      &:hover,
      &:focus {
        background: $color-gray-02;
      }
      &:active {
        background: $color-gray-05;
      }
    }
    @include dark-theme {
      &:hover,
      &:focus {
        background: $color-gray-80;
      }
      &:active {
        background: $color-gray-75;
      }
    }
  }

  &__body {
    @include font-body-1;
    margin: 0;
  }

  &--has-header {
    .module-Modal__body {
      padding: 0 16px 16px 16px;
      border-top: 1px solid transparent;
      // If there's a header, just the body scrolls
      overflow: auto;

      &--scrolled {
        @include light-theme {
          border-top-color: $color-gray-05;
        }

        @include dark-theme {
          border-top-color: $color-gray-80;
        }
      }
    }
  }

  &--no-header {
    padding: 16px;
    // If there's no header, the whole thing scrolls
    overflow: auto;
  }

  &__button-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 8px;

    .module-Button {
      margin-left: 8px;
      margin-top: 8px;
    }

    &--one-button-per-line {
      flex-direction: column;
      align-items: flex-end;
    }
  }

  // Overrides for a modal with important message
  &--important {
    padding: 10px 12px 16px 12px;

    .module-Modal__header {
      padding: 0;
    }

    .module-Modal__body {
      padding: 0 12px 4px 12px !important;
    }

    .module-Modal__body p {
      margin: 0 0 20px 0;
    }

    .module-Modal__title {
      @include font-title-2;
      text-align: center;
      margin: 10px 0 22px 0;

      flex-grow: 0;
      flex-shrink: 0;

      &--with-x-button {
        margin-top: 31px;
      }
    }

    .module-Modal__button-footer {
      justify-content: center;
      margin-top: 27px;
      flex-grow: 0;
      flex-shrink: 0;

      .module-Button {
        flex-grow: 1;
        max-width: 152px;

        &:not(:first-child) {
          margin-left: 16px;
        }
      }
    }
  }
}