Revert "Fix 46 CRITICAL BUGs"

This reverts commit eb57d1efc197968a4073b331b2dc8f40d8109847.

Reason for revert: some UI components are broken

Change-Id: I533a827e9913250d5cb29ed2cc4736fd8c57a8e5
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Issue-ID: SDC-3529

8 files changed, 248 insertions, 265 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less
index bbefbcb4b2..e219d49aa4 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less
@@ -1,3 +1,3 @@
-.dynamic-element {
+dynamic-element {
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
index d1291d6c2c..ea3e35140e 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less
@@ -1,11 +1,11 @@
 @import '../../../../../../assets/styles/variables';
 
-/deep/ .ui-element-dropdown {
+/deep/ ui-element-dropdown {
 
-  select {
-    text-indent: 6px;
-    border: solid 1px @main_color_o;
-    width: 100%;
-  }
+    select {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+        width: 100%;
+    }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
index 4c9d31463b..d320c7ff8b 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less
@@ -1,17 +1,17 @@
 @import '../../../../../../assets/styles/variables';
 
-/deep/ .ui-element-input {
+/deep/ ui-element-input {
 
-  input {
-    text-indent: 6px;
-    border: solid 1px @main_color_o;
-  }
+    input {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+    }
 
-  .error {
-    border: solid 1px @func_color_q;
-    color: @func_color_q;
-    outline: none;
-    box-sizing: border-box;
-  }
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
+    }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less
index e0e748d16a..8073c3858e 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less
@@ -1,17 +1,17 @@
 @import '../../../../../../assets/styles/variables';
 
-/deep/ .ui-element-integer-input {
+/deep/ ui-element-integer-input {
 
-  input {
-    text-indent: 6px;
-    border: solid 1px @main_color_o;
-  }
+    input {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+    }
 
-  .error {
-    border: solid 1px @func_color_q;
-    color: @func_color_q;
-    outline: none;
-    box-sizing: border-box;
-  }
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
+    }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
index 545fe65cfb..5be443f7b6 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less
@@ -1,36 +1,36 @@
 @import '../../../../../../assets/styles/variables';
 
 .popover-input-wrapper {
-  display: flex;
+    display: flex;
 }
 
-/deep/ .ui-element-popover-input {
+/deep/ ui-element-popover-input {
 
-  .popover {
-    max-width: 350px;
-    width: 350px;
-  }
+    .popover {
+        max-width: 350px;
+        width: 350px;
+    }
+
+    .edit-subnet-wrapper {
+        padding: 12px;
 
-  .edit-subnet-wrapper {
-    padding: 12px;
+        .subnet-value {
+            width: 100%;
+            resize: none;
+        }
+    }
+
+    input {
+        padding-right: 6px;
+        padding-left: 6px;
+        border: solid 1px @main_color_o;
+    }
 
-    .subnet-value {
-      width: 100%;
-      resize: none;
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
     }
-  }
-
-  input {
-    padding-right: 6px;
-    padding-left: 6px;
-    border: solid 1px @main_color_o;
-  }
-
-  .error {
-    border: solid 1px @func_color_q;
-    color: @func_color_q;
-    outline: none;
-    box-sizing: border-box;
-  }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
index 75cfb95e86..03b2a70667 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
@@ -1,147 +1,145 @@
 @import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/mixins';
 @import '../../../../../assets/styles/sprite-old';
-
-/deep/ .modal {
-  display: none;
+/deep/ modal {
+    display: none;
 }
 
 .custom-modal {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 15007;
-  overflow: visible;
-  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_r;
-      font-weight: bold;
-
-      -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-      flex-grow: 1;
-
-      height: 50px;
-      line-height: 50px;
-      margin: 0px 20px;
-
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-
-      text-align: left;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-
-      &.ng-draggable {
-        cursor: move;
-        user-select: none;
-      }
-
-      &.modal-type-standard {
-        border-bottom: solid 3px @main_color_a;
-      }
-
-      &.modal-type-error {
-        border-bottom: solid 3px @func_color_q;
-      }
-
-      &.modal-type-alert {
-        border-bottom: solid 3px @main_color_h;
-      }
-
-      .title {
-        .s_18_r;
-        -webkit-box-flex: 999;
-        -ms-flex-positive: 999;
-        flex-grow: 999;
-      }
-
-      .close-button {
-        .sprite;
-        .sprite.x-btn-black;
-        cursor: pointer;
-      }
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 15007;
+    overflow: visible;
+    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_r;
+            font-weight: bold;
+
+            -webkit-box-flex: 1;
+            -ms-flex-positive: 1;
+            flex-grow: 1;
+
+            height: 50px;
+            line-height: 50px;
+            margin: 0px 20px;
+
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+
+            text-align: left;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+
+            &.ng-draggable {
+                cursor: move;
+                user-select: none;
+            }
+
+            &.modal-type-standard {
+                border-bottom: solid 3px @main_color_a;
+            }
+
+            &.modal-type-error {
+                border-bottom: solid 3px @func_color_q;
+            }
+
+            &.modal-type-alert{
+                border-bottom: solid 3px @main_color_h;
+            }
+
+            .title{
+                .s_18_r;
+                -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;
+            }
+        }
     }
-
-    .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;
-
-  &.transparent {
-    background-color: transparent;
-  }
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #000;
+    opacity: 0.5;
+    z-index: 900;
+
+    &.transparent {
+        background-color: transparent;
+    }
 }
 
 
+
 .xl {
-  width: 1200px;
+    width: 1200px;
 }
 
 .l {
-  width: 875px;
+    width: 875px;
 }
 
 .md {
-  width: 650px;
+    width: 650px;
 }
 
 .sm {
-  width: 552px;
+    width: 552px;
 }
 
 .xsm {
-  width: 432px;
+    width: 432px;
 }
 
 body.modal-open {
-  overflow: hidden;
+    overflow: hidden;
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
index 959a99663a..3a2168aeb0 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
@@ -2,59 +2,52 @@
 
 @circle_size: 13px;
 
-.custom-modal {
+.custom-modal{
   font-family: @font-opensans-regular;
 }
 
-/deep/ .multi-steps-wizard {
+/deep/ multi-steps-wizard {
   display: none;
 }
 
-.ng2-modal-header {
+.ng2-modal-header{
   border: none !important;
 }
 
-.ng2-modal-body {
+.ng2-modal-body{
   padding-top: 0 !important;
 }
 
-header {
+header{
   margin-bottom: 10px;
-
-  .dynamic-header-container {
+  .dynamic-header-container{
     position: relative;
     top: -9px;
   }
-
-  .steps-header {
+  .steps-header{
     display: flex;
-
-    .step-title {
+    .step-title{
       flex: 1;
-
-      .title-text {
+      .title-text{
         width: 100%;
         text-align: center;
         line-height: 40px;
         background-color: @tlv_color_u;
         font-size: 13px;
       }
-
-      .line {
+      .line{
         width: calc(~'100% - @{circle_size}');
         position: relative;
         left: calc(~'(100% - @{circle_size})/2 * (-1)');
         float: left;
         height: 2px;
-
-        .inner-line {
+        .inner-line{
           background-color: @main_color_a;
           height: 100%;
         }
       }
-
-      .circle {
-        margin: 0 auto;
+      .circle{
+        margin:0 auto;
         border: @main_color_o solid 1px;
         height: @circle_size;
         width: @circle_size;
@@ -64,17 +57,14 @@ header {
         background-color: @main_color_p;
         z-index: 1;
       }
-
-      .full-circle {
+      .full-circle{
         border-color: @main_color_a;
         background-color: @main_color_a;
       }
-
-      &.active {
+      &.active{
         color: @main_color_a;
         font-family: @font-opensans-medium;
-
-        .circle {
+        .circle{
           border-color: @main_color_a;
         }
       }
@@ -82,21 +72,17 @@ header {
   }
 }
 
-.navigation-buttons {
+.navigation-buttons{
   padding-left: 6px;
   border-left: 1px solid @main_color_a;
-
-  .navigation-button {
+  .navigation-button{
     padding: 0 8px;
-
-    .navigation-icon {
+    .navigation-icon{
       margin: 3px 0;
-
-      &.blue-arrow-back {
+      &.blue-arrow-back{
         float: left;
       }
-
-      &.white-arrow-next {
+      &.white-arrow-next{
         float: right;
       }
     }
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
index 8f666bd2a5..f7b18b1cc8 100644
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
@@ -1,86 +1,85 @@
 @import '../../../../../assets/styles/variables';
 
-.tab {
-  height: 100%;
+tab {
+    height: 100%;
 }
 
 .tabs {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: row;
+    display:flex;
+    flex: 0 0 auto;
+    flex-direction:row;
 }
 
 .tab {
-  flex: 1 0 auto;
-  cursor: pointer;
-  padding: .5em;
+    flex: 1 0 auto;
+    cursor: pointer;
+    padding: .5em;
 }
 
 .tab-content-container {
-  flex: 1;
-  width: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
+    flex: 1;
+    width:100%;
+    overflow-y:hidden;
+    overflow-x:hidden;
 }
 
 .tab-content {
-  height: 100%;
+    height:100%;
 }
 
 /*Tab styles*/
-.tabs {
-  &.round-tabs .tab {
-    background-color: #f8f8f8;
-    color: #959595;
-    border: solid 1px #d2d2d2;
-    border-bottom: none;
-    border-left: none;
-    position: relative;
+.tabs{
+    &.round-tabs .tab{
+        background-color: #f8f8f8;
+        color: #959595;
+        border: solid 1px #d2d2d2;
+        border-bottom:none;
+        border-left:none;
+        position:relative;
 
-    &:first-child {
-      border-left: solid 1px #d2d2d2;
-    }
+        &:first-child {
+            border-left:solid 1px #d2d2d2;
+        }
 
-    &.active {
-      background-color: #009fdb;
-      color: #e9e9e9;
-      border-color: #009fdb;
-    }
+        &.active {
+            background-color:#009fdb;
+            color:#e9e9e9;
+            border-color:#009fdb;
+        }
 
-    .tab-indication {
-      position: absolute;
-      top: -10px;
-      background-color: #009fdb;
-      right: 10px;
-      padding: 2px 0;
-      border-radius: 15px;
-      border: solid 1px #d2d2d2;
-      color: white;
-      width: 25px;
-      height: 25px;
-      text-align: center;
+        .tab-indication {
+            position: absolute;
+            top: -10px;
+            background-color: #009fdb;
+            right: 10px;
+            padding: 2px 0;
+            border-radius: 15px;
+            border: solid 1px #d2d2d2;
+            color:white;
+            width: 25px;
+            height: 25px;
+            text-align: center;
 
+        }
     }
-  }
-
-  &.simple-tabs .tab {
-    font-size: 12px;
-    color: @main_color_n;
 
-    &:after {
-      display: block;
-      content: '';
-      border-bottom: 2px solid @main_color_a;
-      transform: scaleX(0);
-      transition: transform 200ms ease-in-out;
-    }
+    &.simple-tabs .tab {
+        font-size: 12px;
+        color: @main_color_n;
 
-    &.active {
-      color: @main_color_a;
+        &:after {
+            display:block;
+            content: '';
+            border-bottom: 2px solid @main_color_a;
+            transform: scaleX(0);
+            transition: transform 200ms ease-in-out;
+        }
 
-      &:after {
-        transform: scaleX(1.2);
-      }
+        &.active {
+            color: @main_color_a;
+            &:after {
+                transform: scaleX(1.2);
+            }
+        }
     }
-  }
 }