github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/sass/components/_modal.scss (about)

     1  .modal {
     2    @extend .z-depth-4;
     3  
     4    display: none;
     5    position: fixed;
     6    left: 0;
     7    right: 0;
     8    background-color: #fafafa;
     9    padding: 0;
    10    max-height: 70%;
    11    width: 55%;
    12    margin: auto;
    13    overflow-y: auto;
    14  
    15    border-radius: 2px;
    16    will-change: top, opacity;
    17  
    18    @media #{$medium-and-down} {
    19     width: 80%;
    20    }
    21  
    22    h1,h2,h3,h4 {
    23      margin-top: 0;
    24    }
    25  
    26    .modal-content {
    27      padding: 24px;
    28    }
    29    .modal-close {
    30      cursor: pointer;
    31    }
    32  
    33    .modal-footer {
    34      border-radius: 0 0 2px 2px;
    35      background-color: #fafafa;
    36      padding: 4px 6px;
    37      height: 56px;
    38      width: 100%;
    39  
    40      .btn, .btn-flat {
    41        float: right;
    42        margin: 6px 0;
    43      }
    44    }
    45  }
    46  .lean-overlay {
    47      position: fixed;
    48      z-index:999;
    49      top: -100px;
    50      left: 0;
    51      bottom: 0;
    52      right: 0;
    53      height: 125%;
    54      width: 100%;
    55      background: #000;
    56      display: none;
    57  
    58      will-change: opacity;
    59  }
    60  
    61  // Modal with fixed action footer
    62  .modal.modal-fixed-footer {
    63    padding: 0;
    64    height: 70%;
    65  
    66    .modal-content {
    67      position: absolute;
    68      height: calc(100% - 56px);
    69      max-height: 100%;
    70      width: 100%;
    71      overflow-y: auto;
    72    }
    73  
    74    .modal-footer {
    75      border-top: 1px solid rgba(0,0,0,.1);
    76      position: absolute;
    77      bottom: 0;
    78    }
    79  }
    80  
    81  // Modal Bottom Sheet Style
    82  .modal.bottom-sheet {
    83    top: auto;
    84    bottom: -100%;
    85    margin: 0;
    86    width: 100%;
    87    max-height: 45%;
    88    border-radius: 0;
    89    will-change: bottom, opacity;
    90  }