anthonymidili/Bullhorn

View on GitHub
app/assets/stylesheets/modal.scss

Summary

Maintainability
Test Coverage
/* The Modal (background) */
.modal {
  display: block;
  position: fixed; /* Stay in place */
  z-index: 1030; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal_content {
  background-color: var(--modal-background);
  padding: 20px;
  border: 1px solid var(--modal-border);
  margin: 5% auto; /* from the top and centered */
  /* Modal width */
  width: 95%;
  @include media-breakpoint-down(sm) {
    width: 100%;
  }
}

.close-btn {
  float: right;
  @extend .red;
  height: 1em;
  svg {
    height: 1em;
    width: unset;
    font-size: 2rem;
  }
}