github.com/replicatedhq/ship@v0.55.0/web/init/src/scss/utilities/modals.scss (about)

     1  /*
     2    Styles for the default global modal go here.
     3    Specific modal styles should go in their own respective css files.
     4  */
     5  
     6  .ReactModal__Overlay {
     7      background-color: rgba(50,50,50,.4) !important;
     8      z-index: 500;
     9      overflow: auto;
    10  
    11      @import "./buttons.scss";
    12      @import "./utilities.scss";
    13  
    14      .Modal {
    15          position: absolute;
    16          top: 50%;
    17          left: 50%;
    18          border: 1px solid #C4C8CA;
    19          border-radius: 6px;
    20          padding: 0;
    21          margin: 0;
    22          outline: none;
    23          background: #ffffff;
    24          overflow: hidden;
    25          transform: translate(-50%, -50%);
    26      
    27          &.tall {
    28              top: 60px;
    29              transform: translate(-50%, 0);
    30          }
    31      
    32          &.DefaultSize {
    33              width: 100%;
    34              max-width: 400px;
    35            }
    36          &.MediumSize {
    37              width: 100%;
    38              max-width: 600px;
    39          }
    40          &.LargeSize {
    41              width: 100%;
    42              max-width: 800px;
    43          }
    44          
    45          .Modal-header {
    46              padding: 20px 25px 0;
    47              margin: 0;
    48          }
    49          
    50          .Modal-header p {
    51              font-size: 22px;
    52              font-weight: bold;
    53              color: #4A4A4A;
    54              line-height: 34px;
    55              margin: 0;
    56          }
    57          .Modal-header.has-border {
    58              border-bottom: 1px solid #C4C8CA;
    59              padding: 20px 25px 18px;
    60          }
    61          .Modal-body {
    62              padding: 20px 25px;
    63              overflow: auto;
    64              -webkit-overflow-scrolling: touch;
    65          }
    66      }
    67  }
    68  
    69    
    70    @media screen and (max-height: 43em) {
    71      .Modal {
    72        top: 60px;
    73        transform: translate(-50%, 0);
    74      }
    75    }
    76