summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/ui
diff options
context:
space:
mode:
authorvasraz <vasyl.razinkov@est.tech>2021-03-23 19:17:37 +0000
committerChristophe Closset <christophe.closset@intl.att.com>2021-03-24 07:09:23 +0000
commiteb57d1efc197968a4073b331b2dc8f40d8109847 (patch)
tree2a5fbddd3afb741bc0a9543a06110dd73a7b7d08 /catalog-ui/src/app/ng2/components/ui
parentb2c0528da052b5c73e3fc1f7f98d22578acd91f0 (diff)
Fix 46 CRITICAL BUGs
Change-Id: Id354491665a1d8c25a7c1f3e83fcb4d146ca2f37 Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech> Issue-ID: SDC-3529
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui')
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less12
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less22
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less22
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less50
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/modal.component.less232
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less56
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less117
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);
+ }
}
+ }
}