catalog-ui/src/app/ng2/components/modal/modal.component.less

   1 @import '../../../../assets/styles/variables';
   2 @import '../../../../assets/styles/mixins';
   3 @import '../../../../assets/styles/sprite-old';
   4 /deep/ modal {
   5     display: none;
   6
   7     .custom-modal {
   8         position: fixed;
   9         top: 0;
  10         right: 0;
  11         bottom: 0;
  12         left: 0;
  13         z-index: 1000;
  14         overflow: auto;
  15         margin: auto;
  16         display: flex;
  17         align-items: center;
  18
  19         .ng2-modal-content {
  20             background: #fff;
  21             width: 100%;
  22             box-shadow: 0 5px 15px rgba(0,0,0,.5);
  23             border-radius: 4px;
  24             .ng2-modal-body{
  25                 padding: 20px;
  26             }
  27
  28             .ng2-modal-header{
  29                 .m_18_m;
  30                 font-weight: bold;
  31                 -webkit-box-flex: 1;
  32                 -ms-flex-positive: 1;
  33                 flex-grow: 1;
  34                 height: 50px;
  35                 line-height: 50px;
  36                 display: -webkit-box;
  37                 display: -ms-flexbox;
  38                 display: flex;
  39                 text-align: left;
  40                 border-bottom: solid 1px @main_color_o;
  41                 -webkit-box-align: center;
  42                 -ms-flex-align: center;
  43                 align-items: center;
  44                 margin: 0px 20px;
  45                 .title{
  46                     -webkit-box-flex: 999;
  47                     -ms-flex-positive: 999;
  48                     flex-grow: 999;
  49                 }
  50                 .close-button{
  51                     .sprite;
  52                     .sprite.x-btn-black;
  53                     cursor: pointer;
  54                 }
  55             }
  56
  57             .ng2-modal-footer{
  58                 background-color: @tlv_color_t;
  59                 padding: 17px 30px;
  60                 clear: both;
  61                 -webkit-box-flex: 1;
  62                 -ms-flex-positive: 1;
  63                 flex-grow: 1;
  64                 display: -webkit-box;
  65                 display: -ms-flexbox;
  66                 display: flex;
  67                 -webkit-box-align: center;
  68                 -ms-flex-align: center;
  69                 align-items: center;
  70                 -webkit-box-pack: end;
  71                 -ms-flex-pack: end;
  72                 justify-content: flex-end;
  73                 border-radius: 4px;
  74                 button{
  75                     margin: 0 12px 0 6px;
  76                 }
  77             }
  78         }
  79     }
  80
  81     .modal-background {
  82         position: fixed;
  83         top: 0;
  84         right: 0;
  85         bottom: 0;
  86         left: 0;
  87         background-color: #000;
  88         opacity: 0.5;
  89         z-index: 900;
  90     }
  91 }
  92
  93 .xl {
  94     width: 1200px;
  95 }
  96
  97 .l {
  98     width: 875px;
  99 }
 100
 101 .md {
 102     width: 650px;
 103 }
 104
 105 .sm {
 106     width: 552px;
 107 }
 108
 109 .xsm {
 110     width: 432px;
 111 }
 112
 113 body.modal-open {
 114     overflow: hidden;
 115 }