catalog-ui/src/assets/styles/modal.less

   1 /* -----------------------------------------------------
   2 OVERRIDE BOOTSTRAP TO CENTER MODAL VERTICALLY.
   3 ----------------------------------------------------- */
   4 .modal {
   5     text-align: center;
   6     padding: 0!important;
   7 }
   8
   9 .modal:before {
  10     content: '';
  11     display: inline-block;
  12     height: 100%;
  13     vertical-align: middle;
  14     margin-right: -4px;
  15 }
  16
  17 /* -----------------------------------------------------
  18 MODAL SIZES
  19 ----------------------------------------------------- */
  20 .modal-dialog.modal-sdc-xl {
  21     width: 1200px;
  22 }
  23
  24 .modal-dialog.modal-sdc-l {
  25     width: 875px;
  26 }
  27
  28 .modal-dialog.modal-sdc-md {
  29     width: 650px;
  30 }
  31
  32 .modal-dialog.modal-sdc-sm {
  33     width: 552px;
  34 }
  35
  36 .modal-dialog.modal-sdc-xsm {
  37     width: 432px;
  38 }
  39
  40 /* -----------------------------------------------------
  41 MODAL WRAPPER
  42 ----------------------------------------------------- */
  43 .modal-dialog {
  44     /*
  45     margin-top: 110px;
  46     width: 1000px;
  47     */
  48     display: inline-block;
  49     text-align: left;
  50     vertical-align: middle;
  51 }
  52
  53 .modal-content {
  54     /*.border-radius(4px);
  55     background-color:  #ffffff;
  56     box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
  57     min-height: 200px;*/
  58 }
  59
  60 .modal-backdrop.in {
  61     // opacity: .8;
  62 }
  63
  64 .modal-backdrop {
  65     background-color: #111922; //TODO: Replace the color
  66 }
  67
  68 /* -----------------------------------------------------
  69 PREVIOUS MODAL
  70 ----------------------------------------------------- */
  71 /*.w-sdc-modal,
  72 .modal-dialog,
  73 .w-sdc-modal-confirmation {
  74
  75     .w-sdc-modal-head {
  76         .s_18_r;
  77         height: 48px;
  78         line-height: 48px;
  79         text-align: center;
  80     }
  81
  82     .w-sdc-modal-body {
  83         height: auto;
  84         padding: 20px 40px 20px 40px;
  85         border-bottom: solid 1px @color_a;
  86         position: relative;
  87     }
  88
  89     .w-sdc-modal-body-content {
  90         .b_1;
  91         padding: 10px 0 0 0;
  92     }
  93
  94     .w-sdc-modal-icon {
  95         display: inline-block;
  96     }
  97
  98     .w-sdc-modal-icon-DEBUG { .sprite; .message-DEBUG;}
  99     .w-sdc-modal-icon-INFO { .sprite; .message-INFO;}
 100     .w-sdc-modal-icon-WARNING { .sprite; .message-WARNING;}
 101     .w-sdc-modal-icon-ERROR { .sprite; .message-ERROR;}
 102
 103     .w-sdc-modal-caption {
 104         .a_6;
 105         display: inline-block;
 106         padding: 0 0 0 25px;
 107         vertical-align: top;
 108     }
 109
 110     .w-sdc-modal-action {
 111         height: 99px;
 112         text-align: center;
 113         vertical-align: middle;
 114         line-height: 105px;
 115     }
 116
 117     .sdc-resource-viewer-modal-head {
 118         .c_2;
 119         border-radius: 6px 6px 0 0;
 120         height: 30px;
 121         line-height: 30px;
 122         text-align: center;
 123     }
 124
 125     .w-sdc-modal-close {
 126         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAYAAACdKY9CAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkZDQUM1MUVFMDg1NDExRTVBMzdBQ0IxMzM2OTYwNjM2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkZDQUM1MUVGMDg1NDExRTVBMzdBQ0IxMzM2OTYwNjM2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkNBQzUxRUMwODU0MTFFNUEzN0FDQjEzMzY5NjA2MzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkNBQzUxRUQwODU0MTFFNUEzN0FDQjEzMzY5NjA2MzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4EGRD0AAAAhElEQVR42mL8/+8fAxAIAvF7BvwArIYJSKQB8V0gNsajGKEGaMMZIP4PxO+A2BhkIxpOg8qDcAdIQBCPJmTFM8HOh0pg04ShGFkDNk0YitE1wDTdRVK8Ct1P+DyINSAY8HgQa0DgDA1coYdLMc7QQ464mVgiDV0TPOLKcShG1gRWAxBgACObyGI1tr+eAAAAAElFTkSuQmCC');
 127         color: #3499F7; //TODO: Replace the color, should be sprite
 128         .hand;
 129         position: absolute;
 130         right: 20px;
 131         top: 20px;
 132         display: block;
 133         height: 13px;
 134         width: 12px;
 135         border-radius: 50%;
 136     }
 137
 138     .w-sdc-resource-viewer-modal-close {
 139         color: #3499F7; //TODO: Replace the color, should be sprite
 140         .hand;
 141         position: absolute;
 142         right: 20px;
 143         top: 5px;
 144         display: block;
 145         line-height: normal;
 146         font-size: 18px;
 147         font-weight: bold;
 148     }
 149
 150 }*/
 151
 152 /* -----------------------------------------------------
 153 NEW DESIGN MODAL
 154 ----------------------------------------------------- */
 155 .modal-type-standard.w-sdc-classic-modal {
 156     .w-sdc-modal-head {
 157         border-bottom: solid 3px @main_color_a;
 158     }
 159 }
 160 .modal-type-error.w-sdc-classic-modal {
 161     .w-sdc-modal-head {
 162         border-bottom: solid 3px @func_color_q;
 163     }
 164 }
 165 .modal-type-alert.w-sdc-classic-modal {
 166     .w-sdc-modal-head {
 167         border-bottom: solid 3px @main_color_h;
 168     }
 169 }
 170
 171 .w-sdc-classic-modal {
 172
 173     display: flex;
 174     flex-direction: column;
 175     .border-radius(4px);
 176     background-color:  #ffffff;
 177     box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
 178     min-height: 165px;
 179     min-width: 430px;
 180     word-wrap: break-word;
 181
 182     .w-sdc-modal-head {
 183         flex-grow: 1;
 184         .s_18_m;
 185         height: 48px;
 186         line-height: 48px;
 187         display: flex;
 188         text-align: left;
 189         border-bottom: solid 3px @main_color_a;
 190         align-items: center;
 191
 192         .w-sdc-modal-head-text {
 193             .s_18_m;
 194             flex-grow: 999;
 195         }
 196
 197         .w-sdc-modal-close {
 198             flex-grow: 1;
 199             .sprite;
 200             .sprite.x-btn-black;
 201             cursor: pointer;
 202         }
 203     }
 204
 205     .w-sdc-modal-body {
 206         flex-grow: 999;
 207         .m_14_r;
 208         padding-top: 20px;
 209         position: relative;
 210         border-bottom: none;
 211     }
 212
 213     .w-sdc-modal-footer {
 214         clear: both;
 215         flex-grow: 1;
 216         display: flex;
 217         align-items: center;
 218         justify-content: flex-end;
 219         border-radius: 6px;
 220         background-color: #f8f8f8;
 221
 222         button {
 223             display: block;
 224             margin-right: 11px;
 225         }
 226
 227         button:last-child {
 228             margin-right: 0;
 229         }
 230
 231     }
 232
 233 }
 234
 235 .w-sdc-classic-top-line-modal {
 236
 237     display: flex;
 238     flex-direction: column;
 239     background-color:  #ffffff;
 240     box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
 241     min-height: 165px;
 242     min-width: 430px;
 243     border-top: solid 3px @main_color_a;
 244
 245     .w-sdc-modal-head {
 246         flex-grow: 1;
 247         .s_18_r;
 248         height: 48px;
 249         line-height: 48px;
 250         display: flex;
 251         text-align: left;
 252         align-items: center;
 253
 254         .w-sdc-modal-head-text {
 255             .s_18_m;
 256             flex-grow: 999;
 257         }
 258
 259         .w-sdc-modal-close {
 260             flex-grow: 1;
 261             .sprite;
 262             .sprite.x-btn-black;
 263             cursor: pointer;
 264         }
 265     }
 266
 267     .w-sdc-modal-body {
 268         flex-grow: 999;
 269         .m_14_r;
 270         padding-top: 10px;
 271         position: relative;
 272         border-bottom: none;
 273     }
 274
 275     .w-sdc-modal-footer {
 276         flex-grow: 1;
 277         display: flex;
 278         align-items: center;
 279         justify-content: flex-end;
 280
 281         button {
 282             display: block;
 283             margin-right: 11px;
 284         }
 285
 286         button:last-child {
 287             margin-right: 0;
 288         }
 289
 290     }
 291
 292 }
 293
 294 .modal-sdc-xl {
 295     .w-sdc-classic-modal {
 296         padding: 0 40px;
 297
 298         .w-sdc-modal-head {
 299             .b_15;
 300             height: 60px;
 301             line-height: 60px;
 302
 303             .w-sdc-modal-head-text {
 304                 flex-grow: 999;
 305             }
 306
 307             .w-sdc-modal-close {
 308                 top: 27px;
 309                 right: 41px;
 310             }
 311         }
 312
 313         .w-sdc-modal-footer {
 314             height: 80px;
 315             margin: 0 -40px;
 316             padding: 0 40px;
 317             background-color: #f2f2f2;
 318         }
 319
 320     }
 321 }
 322
 323 .modal-sdc-xl,
 324 .modal-sdc-l,
 325 .modal-sdc-md,
 326 .modal-sdc-sm,
 327 .modal-sdc-xsm {
 328
 329     .w-sdc-classic-top-line-modal {
 330         padding: 0 30px;
 331
 332         .w-sdc-modal-footer {
 333             margin: 0 -30px;
 334             padding: 17px 30px;
 335         }
 336     }
 337
 338     .w-sdc-classic-modal {
 339         padding: 0 30px;
 340
 341         .w-sdc-modal-head {
 342             .b_19;
 343             height: 50px;
 344             line-height: 50px;
 345
 346             .w-sdc-modal-close {
 347                 top: 21px;
 348                 right: 30px;
 349             }
 350         }
 351
 352         .w-sdc-modal-footer {
 353             margin: 0 -30px;
 354             padding: 17px 30px;
 355         }
 356     }
 357 }