Fix 46 CRITICAL BUGs

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

8 files changed, 265 insertions, 248 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 e219d49aa4..bbefbcb4b2 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 ea3e35140e..d1291d6c2c 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 d320c7ff8b..4c9d31463b 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 8073c3858e..e0e748d16a 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 5be443f7b6..545fe65cfb 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;
-    }
-
-    .edit-subnet-wrapper {
-        padding: 12px;
+  .popover {
+    max-width: 350px;
+    width: 350px;
+  }
 
-        .subnet-value {
-            width: 100%;
-            resize: none;
-        }
-    }
-
-    input {
-        padding-right: 6px;
-        padding-left: 6px;
-        border: solid 1px @main_color_o;
-    }
+  .edit-subnet-wrapper {
+    padding: 12px;
 
-    .error {
-        border: solid 1px @func_color_q;
-        color: @func_color_q;
-        outline: none;
-        box-sizing: border-box;
+    .subnet-value {
+      width: 100%;
+      resize: none;
     }
+  }
+
+  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 03b2a70667..75cfb95e86 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,145 +1,147 @@
 @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;
-            }
-        }
-
-        .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;
-            }
-        }
+  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;
     }
-}
 
-.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;
+    .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;
+      }
+    }
+  }
 }
 
+.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;
+  }
+}
 
 
 .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 3a2168aeb0..959a99663a 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,52 +2,59 @@
 
 @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;
@@ -57,14 +64,17 @@ 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;
         }
       }
@@ -72,17 +82,21 @@ 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 f7b18b1cc8..8f666bd2a5 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,85 +1,86 @@
 @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;
 
-    &.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;
+    }
 
-        &:after {
-            display:block;
-            content: '';
-            border-bottom: 2px solid @main_color_a;
-            transform: scaleX(0);
-            transition: transform 200ms ease-in-out;
-        }
+    &.active {
+      color: @main_color_a;
 
-        &.active {
-            color: @main_color_a;
-            &:after {
-                transform: scaleX(1.2);
-            }
-        }
+      &:after {
+        transform: scaleX(1.2);
+      }
     }
+  }
 }