123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- /**
- * SuperModal (https://github.com/GianlucaChiarani/SuperModal)
- * @version 0.8 beta1
- * @author Gianluca Chiarani
- * @license The MIT License (MIT)
- */
- .supermodal {
- display: none;
- }
- .supermodal-container {
- box-sizing: border-box;
- display: flex;
- justify-content: center;
- align-items: center;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100vh;
- padding: 1rem;
- }
- .supermodal-container .supermodal-window {
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- position: relative;
- width: 100%;
- height: 100%;
- background: white;
- z-index: 1;
- }
- .supermodal-container .supermodal-title {
- height: 45px;
- line-height: 45px;
- color: white;
- font-size: 18px;
- padding-left: 1rem;
- padding-right: calc(2rem + 30px);
- }
- .supermodal-container .supermodal-title .supermodal-close {
- position: absolute;
- right: 1rem;
- top: 7.5px;
- background-color: #dc3545;
- color: white;
- line-height: 30px;
- text-align: center;
- font-size: 18px;
- width: 30px;
- height: 30px;
- border-radius: 100px;
- cursor: pointer;
- transition: all 0.3s;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- }
- .supermodal-container .supermodal-title .supermodal-close:hover {
- background-color: #bb2d3b;
- }
- .supermodal-container .supermodal-body {
- overflow-y: auto;
- }
- .supermodal-window.show{
- opacity:1;
- z-index:2;
- transform: scale(1);
- animation: show .3s;
- -webkit-animation: show .3s;
- }
- .supermodal-window.hide{
- opacity: 0;
- transform: scale(1);
- animation: hide .3s;
- -webkit-animation: hide .3s;
- }
- .supermodal-container + .supermodal-container .supermodal-window {
- top: 1rem;
- left: 1rem;
- position: relative;
- }
- .supermodal-container + .supermodal-container {
- padding-right: 2rem;
- }
- @keyframes show {
- from {
- transform: scale(0);
- opacity:0;
- z-index:-1;
- }
- to {
- transform: scale(1);
- opacity: 1;
- z-index:2;
- }
- }
- @keyframes hide {
- from {
- z-index:2;
- transform: scale(1);
- opacity:1;
- }
- to {
- z-index:-1;
- transform: scale(0);
- opacity: 0;
- }
- }
- /* xs */
- @media (max-width: 575px){
- .supermodal-container {
- padding: .5rem;
- }
- .supermodal-container + .supermodal-container .supermodal-window {
- top: .5rem;
- left: .5rem;
- position: relative;
- }
- .supermodal-container + .supermodal-container {
- padding-right: 1rem;
- }
- }
|