accounts-frontend/packages/app/components/ui/popup/popup.scss

@import '~app/components/ui/colors.scss';
@import '~app/components/ui/fonts.scss';

$popupPadding: 20px; // Отступ контента внутри попапа
$popupMargin: 20px; // Отступ попапа от краёв окна

@mixin popupBounding($width, $padding: null) {
  @if ($padding == null) {
    $padding: $popupMargin;
  }

  @if ($padding != $popupMargin) {
    margin: $padding auto;
    padding: 0 $padding;
  }

  max-width: $width;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 200;

  background: rgba(#fff, 0.8);

  text-align: center;
  white-space: nowrap;

  overflow-x: hidden;
  overflow-y: auto;

  perspective: 600px;

  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
  }
}

.popupWrapper {
  box-sizing: border-box;
  margin: 0 auto;
  padding: $popupMargin;

  display: inline-block;
  width: 100%;
  vertical-align: middle;

  transition: max-width 0.3s;
}

.popup {
  white-space: normal;
  text-align: left;

  background: #fff;
  box-shadow: 0 0 10px rgba(#000, 0.2);

  color: #666;

  :invalid {
    button {
      opacity: 0.3;
      pointer-events: none;
    }
  }
}

.header {
  position: relative;
  background: $white;
  padding: 15px $popupPadding;
  border-bottom: 1px solid #dedede;
}

.headerTitle {
  font-size: 20px;
  font-family: $font-family-title;
  text-align: center;
}

.body {
  padding: $popupPadding;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 15px;
  cursor: pointer;
  font-size: 20px;
  color: rgba(#000, 0.4);
  background: rgba(#000, 0);
  transition: 0.25s;
  transform: translateX(0);

  &:hover {
    color: rgba(#000, 0.6);
    background: rgba(#fff, 0.75);
  }
}

@media (min-width: 655px) {
  .close {
    position: fixed;
    padding: 35px;
  }
}

/**
 * Transition states
 */
$popupInitPosition: translateY(10%) rotateX(-8deg);

.trEnter {
  opacity: 0;

  .popup {
    opacity: 0;
    transform: $popupInitPosition;
  }

  &Active {
    opacity: 1;
    transition: opacity 0.2s ease-in;

    .popup {
      opacity: 1;
      transform: translateY(0) rotateX(0deg);
      transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
    }
  }
}

.trExit {
  opacity: 1;
  overflow: hidden;

  .popup {
    opacity: 1;
    transform: translateY(0);
  }

  &Active {
    opacity: 0;
    transition: opacity 0.2s ease-in;

    .popup {
      opacity: 0;
      transform: $popupInitPosition;
      transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); // easeOutQuart
    }
  }
}

.trEnter,
.trExit {
  .close {
    // do not show close during transition, because transform forces position: fixed
    // to layout relative container, instead of body
    opacity: 0;
    transform: translate(100%);
    transition: 0s;
  }
}