Difference between revisions of "Template:Valencia UPV/custom.css"

Line 207: Line 207:
 
margin-left: 0 !important;
 
margin-left: 0 !important;
 
}
 
}
 +
 +
 +
 +
/* MODAL TEST */
 +
 +
 +
 +
$primary: #2c3e50;
 +
 +
html, body { box-sizing: border-box; }
 +
body {
 +
  background: $primary;
 +
  margin: 5%;
 +
}
 +
 +
.center {
 +
  transform: translate(-50%, -50%);
 +
  position: absolute;
 +
  left: 50%;
 +
  top: 50%;
 +
}
 +
 +
// show button
 +
.show {
 +
  transition: background 500ms ease;
 +
  background: lighten($primary, 5%);
 +
  padding: 10px 15px;
 +
  margin-right: 5px;
 +
  cursor: pointer;
 +
  color: #fff;
 +
  border: 0;
 +
 
 +
  &:hover {
 +
    background: darken($primary, 10%);
 +
  }
 +
}
 +
 +
// Close Button
 +
.close {
 +
  position: absolute;
 +
  cursor: pointer;
 +
  padding: 20px;
 +
  color: white;
 +
  bottom: 0;
 +
  right: 0;
 +
  top: 0;
 +
}
 +
 +
// The mask
 +
.mask {
 +
  background: rgba(0, 0, 0, 0.68);
 +
  visibility: hidden;
 +
  transition: 0.7s;
 +
  position: fixed;
 +
  height: 100vh;
 +
  width: 100vw;
 +
  z-index: 50;
 +
  opacity: 0;
 +
  left: 0;
 +
  top: 0;
 +
}
 +
 +
// Modal
 +
.modal {
 +
  transition: 0.5s ease-out;
 +
  background: dodgerblue;
 +
  visibility: hidden;
 +
  position: fixed;
 +
  @extend .center;
 +
  height: 80vh;
 +
  width: 80vw;
 +
  z-index: 100;
 +
  opacity: 0;
 +
 
 +
  .modal__content {
 +
    @extend .center;
 +
  }
 +
}
 +
 +
// Class Active
 +
.active {
 +
  visibility: visible;
 +
  opacity: 1;
 +
}
 +
 +
// When active class is added, that affects the modal class
 +
.active + .modal{
 +
  visibility: visible;
 +
  opacity: 1;
 +
}
 +
  
  

Revision as of 17:25, 10 September 2018