catalog-ui/src/app/ng2/components/ui/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
   8 .custom-modal {
   9     position: fixed;
  10     top: 0;
  11     right: 0;
  12     bottom: 0;
  13     left: 0;
  14     z-index: 15007;
  15     overflow: visible;
  16     margin: auto;
  17     display: flex;
  18     align-items: center;
  19
  20     .ng2-modal-content {
  21         background: #fff;
  22         width: 100%;
  23         box-shadow: 0 5px 15px rgba(0,0,0,.5);
  24         border-radius: 4px;
  25
  26
  27         .ng2-modal-body{
  28             padding: 20px;
  29         }
  30
  31         .ng2-modal-header{
  32             .m_18_r;
  33             font-weight: bold;
  34
  35             -webkit-box-flex: 1;
  36             -ms-flex-positive: 1;
  37             flex-grow: 1;
  38
  39             height: 50px;
  40             line-height: 50px;
  41             margin: 0px 20px;
  42
  43             display: -webkit-box;
  44             display: -ms-flexbox;
  45             display: flex;
  46
  47             text-align: left;
  48             -webkit-box-align: center;
  49             -ms-flex-align: center;
  50             align-items: center;
  51
  52             &.ng-draggable {
  53                 cursor: move;
  54                 user-select: none;
  55             }
  56
  57             &.modal-type-standard {
  58                 border-bottom: solid 3px @main_color_a;
  59             }
  60
  61             &.modal-type-error {
  62                 border-bottom: solid 3px @func_color_q;
  63             }
  64
  65             &.modal-type-alert{
  66                 border-bottom: solid 3px @main_color_h;
  67             }
  68
  69             .title{
  70                 .s_18_r;
  71                 -webkit-box-flex: 999;
  72                 -ms-flex-positive: 999;
  73                 flex-grow: 999;
  74             }
  75             .close-button{
  76                 .sprite;
  77                 .sprite.x-btn-black;
  78                 cursor: pointer;
  79             }
  80         }
  81
  82         .ng2-modal-footer{
  83             background-color: @tlv_color_t;
  84             padding: 17px 30px;
  85             clear: both;
  86             -webkit-box-flex: 1;
  87             -ms-flex-positive: 1;
  88             flex-grow: 1;
  89             display: -webkit-box;
  90             display: -ms-flexbox;
  91             display: flex;
  92             -webkit-box-align: center;
  93             -ms-flex-align: center;
  94             align-items: center;
  95             -webkit-box-pack: end;
  96             -ms-flex-pack: end;
  97             justify-content: flex-end;
  98             border-radius: 4px;
  99             button{
 100                 margin: 0 12px 0 6px;
 101             }
 102         }
 103     }
 104 }
 105
 106 .modal-background {
 107     position: fixed;
 108     top: 0;
 109     right: 0;
 110     bottom: 0;
 111     left: 0;
 112     background-color: #000;
 113     opacity: 0.5;
 114     z-index: 900;
 115
 116     &.transparent {
 117         background-color: transparent;
 118     }
 119 }
 120
 121
 122
 123 .xl {
 124     width: 1200px;
 125 }
 126
 127 .l {
 128     width: 875px;
 129 }
 130
 131 .md {
 132     width: 650px;
 133 }
 134
 135 .sm {
 136     width: 552px;
 137 }
 138
 139 .xsm {
 140     width: 432px;
 141 }
 142
 143 body.modal-open {
 144     overflow: hidden;
 145 }