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