Newer
Older
CamaraComercioWeb / src / app / modules / public / discover / components / modal-site / modal-site.component.scss
Fabian VC on 23 Oct 2021 1 KB [fix] styles modal
.modal {
  height: inherit;
}

.modal-header__content {
  width: 100%;
}

.modal-dialog {
  max-width: 100% !important;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.modal-body{
  padding: 1.5rem 2rem;
}

.modal__content{
  gap: 1rem;
  div{
    width: 50%;
  }
}

.modal-content {
  width: 60rem;
  height: 40rem;
}

.has-bg-dark {
  color: var(--base-color-white);
}

.modal__galery {
  display: grid;
  gap: 1rem;
  grid-auto-rows: 14rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.modal__featured {
  width: 100%;
  img {
    width: 100%;
    max-height: 14rem;
    border-radius: var(--base-rounded-medium);
  }
}

.modal__gap{
  gap: 1rem;
  p{
    margin: 0;
  }
}

.modal-content__schedule-header{
  gap: .5rem;
  p{
    margin: 0;
  }
}

.modal-content__schedule{
  gap: .5rem;
  .modal-content__schedule-day{
    display: block;
    background: var(--base-color-secondary);
    width: 1.8rem;
    height: 1.8rem;
    color: var(--base-color-dark);
    text-align: center;
    border-radius: var(--base-rounded-small);
  }
}

.backdrop{
  background:rgba(0,0,0,0.6);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
}

.modal-header .btn-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
}


.modal__location{
  width: 100%;
  border-radius: var(--base-rounded-medium);
  height: 16rem;
}