vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.scss

   1 .templatebody.modal-open{
   2   position: fixed;
   3   top: 0;
   4   right: 0;
   5   bottom: 0;
   6   left: 0;
   7   z-index: 1040;
   8   background-color: #000;
   9   opacity: 0.5;
  10 }
  11 .modal{
  12
  13   #audit-info-modal {
  14     .leftColumn {
  15       padding-left: 0;
  16     }
  17
  18     .rightColumn {
  19       padding-right: 0;
  20       text-align: right;
  21     }
  22     .modal-content{
  23       border-radius: 0px;
  24       border: none;
  25       .modal-header{
  26         background: #009FDB;
  27         font-size: 24px;
  28         color: #ffffff;
  29         .close{
  30           font-size: 32px;
  31           font-weight: 200;
  32           color: #ffffff;
  33           text-shadow: none;
  34           filter: none;
  35           opacity: 1;
  36           &:hover{
  37             color: #d2d2d2;
  38           }
  39         }
  40         .modal-title{
  41
  42         }
  43       }
  44       .modal-body{
  45         padding: 0px;
  46         margin: 0px;
  47         display: flex;
  48         .left-panel{
  49           background: #f2f2f2;
  50           border-right: 1px solid #D2D2D2;
  51           padding-right: 0px;
  52           .row:first-child{
  53             border-bottom: 1px solid #D2D2D2;
  54             height: 50px;
  55             font-size: 12px;
  56             line-height: 50px;
  57             padding-left: 30px;
  58             font-weight: 700;
  59             margin-right: 0px;
  60           }
  61           .service-model{
  62             padding-left: 30px;
  63             padding-top: 15px;
  64           }
  65         }
  66         .right-panel{
  67           padding: 30px 30px 15px 30px;
  68           .row{
  69             margin: 0px;
  70           }
  71           .table-title{
  72             font-size: 12px;
  73             text-transform: uppercase;
  74             font-weight: bold;
  75           }
  76           .no-result{
  77             margin-bottom: 20px;
  78             text-align: center;
  79             border: 1px solid #d2d2d2;
  80             padding: 20px;
  81             margin-top: -23px;
  82           }
  83
  84           .table-bordered{
  85             width: 100%;
  86             margin-top: 10px;
  87             font-family: OpenSans-Semibold;
  88             font-size: 12px;
  89             overflow-x: auto;
  90             display: block;
  91             color: #5A5A5A;
  92             .request-id {
  93               width: 85px;
  94             }
  95             thead {
  96               position: sticky;
  97               top: 0;
  98               z-index: 100;
  99               display: block;
 100               background: rgb(242, 242, 242);
 101               border-bottom: 1px solid #d2d2d2;
 102               tr {
 103                 display: flex;
 104                 th {
 105                   flex-grow: 1;
 106                   border-right: 1px solid #d2d2d2;
 107                   &:last-child{
 108                     border-right: none;
 109                   }
 110                   &.request-id {
 111                     flex-grow: 0;
 112                   }
 113                 }
 114               }
 115             }
 116
 117             tbody {
 118               border: none !important;
 119               max-height: 152px;
 120               display: block;
 121
 122               tr {
 123                 display: flex;
 124                 border-bottom: 1px solid #d2d2d2;
 125                 &:last-child{
 126                   border-bottom: none;
 127                 }
 128                 td {
 129                   border: none;
 130                   border-right: 1px solid #d2d2d2;
 131                   flex-grow: 1;
 132                   &:last-child{
 133                     border-right: none;
 134                   }
 135                   &.request-id {
 136                     flex-grow: 0;
 137                   }
 138                 }
 139               }
 140             }
 141
 142             th {
 143               background: #f2f2f2;
 144               font-family: OpenSans-Semibold;
 145               color: #000000;
 146               font-weight: bold;
 147               border: none;
 148             }
 149
 150             tr.odd {
 151               background-color: rgb(242, 242, 242);
 152             }
 153
 154             tr:hover {
 155               background: #e1e1e1;
 156             }
 157           }
 158         }
 159       }
 160       .modal-footer{
 161         margin: 0px;
 162         .cancel{
 163           width: 120px;
 164           height: 36px;
 165           background: #009fdb;
 166           border-radius: 2px;
 167           font-family: OpenSans-Regular;
 168           font-size: 14px;
 169           color: #ffffff;
 170           line-height: 16px;
 171         }
 172       }
 173     }
 174   }
 175 }