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