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

Line 213: Line 213:
  
  
−
 
+
button{
−
$primary: #2c3e50;
+
  border:none !important;
−
 
+
  background: #ddd !important;
−
.center {
+
   padding: 10px !important;
−
   transform: translate(-50%, -50%);
+
   display: block !important;
−
   position: absolute;
+
   margin: 50px auto !important;
−
   left: 50%;
+
   cursor: pointer !important;
−
   top: 50%;
+
 
}
 
}
  
−
// show button
+
.modal{
−
.show {
+
   h1{font-size: 20px; !important}
−
   transition: background 500ms ease;
+
   button{margin: 0px auto;margin-top: 20px; !important}
−
   background: lighten($primary, 5%);
+
−
  padding: 10px 15px;
+
−
  margin-right: 5px;
+
−
  cursor: pointer;
+
−
  color: #fff;
+
−
  border: 0;
+
−
 
+
−
  &:hover {
+
−
    background: darken($primary, 10%);
+
−
  }
+
 
}
 
}
  
−
// Close Button
+
.modal{
−
.close {
+
   position: fixed !important;
−
   position: absolute;
+
   top: 0px !important;
−
   cursor: pointer;
+
   pointer-events: none !important;
−
   padding: 20px;
+
   left: 0px !important;
−
   color: white;
+
   background: fade(#333, 90) !important;
−
   bottom: 0;
+
   width: 100vw !important;
−
   right: 0;
+
   height: 100vh !important;
−
   top: 0;
+
   z-index: 100 !important;
−
}
+
   opacity: 0 !important;
−
 
+
   transition: 0.3s !important;
−
// The mask
+
   &.active{
−
.mask {
+
    opacity: 1 !important;
−
   background: rgba(0, 0, 0, 0.68);
+
    pointer-events: auto !important;
−
   visibility: hidden;
+
    .box{top: 50%; !important}
−
   transition: 0.7s;
+
   }
−
   position: fixed;
+
  &#success{h1{font-size: 1.5em; !important}}
−
  height: 100vh;
+
   .close{
−
  width: 100vw;
+
    position: absolute !important;  
−
   z-index: 50;
+
    top: -20px !important;
−
   opacity: 0;
+
    right: -20px !important;
−
  left: 0;
+
    cursor: pointer !important;
−
  top: 0;
+
    color: #ddd !important;
−
}
+
  }
−
 
+
  .box{
−
// Modal
+
    background: #fff !important;
−
.modal {
+
    display: block !important;
−
  transition: 0.5s ease-out;
+
    box-sizing: border-box !important;
−
  background: dodgerblue;
+
    border-radius: 5px !important;
−
  visibility: hidden;
+
    text-align: center !important;
−
  position: fixed;
+
    padding: 20px !important;
−
  @extend .center;
+
    position: absolute !important;
−
  height: 80vh;
+
    top: 70% !important;
−
  width: 80vw;
+
    left: 50% !important;
−
  z-index: 100;
+
    transform: translate(-50%,-50%) !important;
−
  opacity: 0;
+
     transition: 0.3s !important;
−
 
+
−
  .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:31, 10 September 2018