1
  2/**
  3 * Popups
  4 * --------------------------------------------------
  5 */
  6
  7.popup-container {
  8  position: absolute;
  9  top: 0;
 10  left: 0;
 11  bottom: 0;
 12  right: 0;
 13  background: rgba(0,0,0,0);
 14
 15  @include display-flex();
 16  @include justify-content(center);
 17  @include align-items(center);
 18
 19  z-index: $z-index-popup;
 20
 21  // Start hidden
 22  visibility: hidden;
 23  &.popup-showing {
 24    visibility: visible;
 25  }
 26
 27  &.popup-hidden .popup {
 28    @include animation-name(scaleOut);
 29    @include animation-duration($popup-leave-animation-duration);
 30    @include animation-timing-function(ease-in-out);
 31    @include animation-fill-mode(both);
 32  }
 33
 34  &.active .popup {
 35    @include animation-name(superScaleIn);
 36    @include animation-duration($popup-enter-animation-duration);
 37    @include animation-timing-function(ease-in-out);
 38    @include animation-fill-mode(both);
 39  }
 40
 41  .popup {
 42    width: $popup-width;
 43    max-width: 100%;
 44    max-height: 90%;
 45
 46    border-radius: $popup-border-radius;
 47    background-color: $popup-background-color;
 48
 49    @include display-flex();
 50    @include flex-direction(column);
 51  }
 52
 53  input,
 54  textarea {
 55    width: 100%;
 56  }
 57}
 58
 59.popup-head {
 60  padding: 15px 10px;
 61  border-bottom: 1px solid #eee;
 62  text-align: center;
 63}
 64.popup-title {
 65  margin: 0;
 66  padding: 0;
 67  font-size: 15px;
 68}
 69.popup-sub-title {
 70  margin: 5px 0 0 0;
 71  padding: 0;
 72  font-weight: normal;
 73  font-size: 11px;
 74}
 75.popup-body {
 76  padding: 10px;
 77  overflow: auto;
 78}
 79
 80.popup-buttons {
 81  @include display-flex();
 82  @include flex-direction(row);
 83  padding: 10px;
 84  min-height: $popup-button-min-height + 20;
 85
 86  .button {
 87    @include flex(1);
 88    display: block;
 89    min-height: $popup-button-min-height;
 90    border-radius: $popup-button-border-radius;
 91    line-height: $popup-button-line-height;
 92
 93    margin-right: 5px;
 94    &:last-child {
 95      margin-right: 0px;
 96    }
 97  }
 98}
 99
100.popup-open {
101  pointer-events: none;
102
103  &.modal-open .modal {
104    pointer-events: none;
105  }
106
107  .popup-backdrop, .popup {
108    pointer-events: auto;
109  }
110}