vimo-dt/lib/components/modal/backup/modal.less

A Vue2.x UI Project For Mobile & HyBrid

@import "../../../themes/index.less";

// Modals
// --------------------------------------------------

/// @prop - Min width of the modal inset
@modal-inset-min-width: 768px;

/// @prop - Minimum height of the small modal inset
@modal-inset-min-height-small: 600px;

/// @prop - Minimum height of the large modal inset
@modal-inset-min-height-large: 768px;

/// @prop - Width of the large modal inset
@modal-inset-width: 600px;

/// @prop - Height of the small modal inset
@modal-inset-height-small: 500px;

/// @prop - Height of the large modal inset
@modal-inset-height-large: 600px;

.ion-modal {
  position: fixed;
  top: 0;
  left: 0;

  display: block;

  width: 100%;
  height: 100%;

  contain: strict;

  z-index: @z-index-overlay + @z-index-overlay-modal;
}

.ion-modal .ion-backdrop {
  @media not all and (min-width: @modal-inset-min-width) and (min-height: @modal-inset-min-height-small) {
    visibility: hidden;
  }
}

.modal-wrapper {
  z-index: 13;
  position: relative;

  height: 100%;

  contain: strict;

  background: #fff;

  @media only screen and (min-width: @modal-inset-min-width) and (min-height: @modal-inset-min-height-small) {
    position: absolute;
    top: ~'calc(50% - (@{modal-inset-height-small} / 2))';
    left: ~'calc(50% - (@{modal-inset-width} / 2))';

    width: @modal-inset-width;
    height: @modal-inset-height-small;
  }

  @media only screen and (min-width: @modal-inset-min-width) and (min-height: @modal-inset-min-height-large) {
    position: absolute;
    top: ~'calc(50% - (@{modal-inset-height-large} / 2))';
    left: ~'calc(50% - (@{modal-inset-width} / 2))';

    width: @modal-inset-width;
    height: @modal-inset-height-large;
  }
}