1 files changed, 115 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less
new file mode 100644
index 0000000000..a35f829e6a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.less
@@ -0,0 +1,115 @@
+@import '../../../../assets/styles/variables';
+@import '../../../../assets/styles/mixins';
+@import '../../../../assets/styles/sprite-old';
+/deep/ modal {
+    display: none;
+
+    .custom-modal {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1000;
+        overflow: auto;
+        margin: auto;
+        display: flex;
+        align-items: center;
+
+        .ng2-modal-content {
+            background: #fff;
+            width: 100%;
+            box-shadow: 0 5px 15px rgba(0,0,0,.5);
+            border-radius: 4px;
+            .ng2-modal-body{
+                padding: 20px;
+            }
+
+            .ng2-modal-header{
+                .m_18_m;
+                font-weight: bold;
+                -webkit-box-flex: 1;
+                -ms-flex-positive: 1;
+                flex-grow: 1;
+                height: 50px;
+                line-height: 50px;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                text-align: left;
+                border-bottom: solid 1px @main_color_o;
+                -webkit-box-align: center;
+                -ms-flex-align: center;
+                align-items: center;
+                margin: 0px 20px;
+                .title{
+                    -webkit-box-flex: 999;
+                    -ms-flex-positive: 999;
+                    flex-grow: 999;
+                }
+                .close-button{
+                    .sprite;
+                    .sprite.x-btn-black;
+                    cursor: pointer;
+                }
+            }
+
+            .ng2-modal-footer{
+                background-color: @tlv_color_t;
+                padding: 17px 30px;
+                clear: both;
+                -webkit-box-flex: 1;
+                -ms-flex-positive: 1;
+                flex-grow: 1;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                -webkit-box-align: center;
+                -ms-flex-align: center;
+                align-items: center;
+                -webkit-box-pack: end;
+                -ms-flex-pack: end;
+                justify-content: flex-end;
+                border-radius: 4px;
+                button{
+                    margin: 0 12px 0 6px;
+                }
+            }
+        }
+    }
+
+    .modal-background {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: #000;
+        opacity: 0.5;
+        z-index: 900;
+    }
+}
+
+.xl {
+    width: 1200px;
+}
+
+.l {
+    width: 875px;
+}
+
+.md {
+    width: 650px;
+}
+
+.sm {
+    width: 552px;
+}
+
+.xsm {
+    width: 432px;
+}
+
+body.modal-open {
+    overflow: hidden;
+}