summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less460
-rw-r--r--catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less138
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less142
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less466
-rw-r--r--catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less58
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less20
-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
14 files changed, 837 insertions, 960 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less b/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less
index 774b7eb798..26ae0d4d74 100644
--- a/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/attributes-table/attributes-table.component.less
@@ -1,292 +1,264 @@
@import './../../../../../assets/styles/mixins.less';
@import '../../../../../assets/styles/sprite';
-
@smaller-screen: ~"only screen and (max-width: 1580px)";
-:host /deep/ input {
- width: 100%;
-}
+:host /deep/ input { width:100%;}
.attributes-table {
- display: flex;
- flex-direction: column;
- flex: 1;
- height: 100%;
- text-align: left;
-
-
- .inner-cell-div {
- text-overflow: ellipsis;
- overflow: hidden;
- height: 20px;
- }
-
- .inner-cell-div-multiline {
- max-width: 100%;
- }
-
- .table-header {
- display: flex;
- flex-direction: row;
- flex: 0 0 auto;
- font-weight: bold;
- border-top: #d2d2d2 solid 1px;
- background-color: #f2f2f2;
-
- .table-cell {
- color: #191919;
- font-size: 13px;
-
- .table-header-sort-arrow {
- display: inline-block;
- background-color: transparent;
- border: none;
- color: #AAA;
- margin: 8px 0 0 5px;
-
- &.up {
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-bottom: 5px solid;
- height: 5px;
- }
-
- &.down {
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid;
- }
- }
- }
- }
-
- .table-rows-header {
- border: #d2d2d2 solid 1px;
- border-top: none;
- display: flex;
- align-items: center;
-
- .archive-label {
- margin-left: 10px;
- }
- }
-
- .table-body {
display: flex;
flex-direction: column;
- overflow-y: auto;
flex: 1;
- background-color: @main_color_p;
-
- .no-data {
- border: #d2d2d2 solid 1px;
- border-top: none;
- text-align: center;
- height: 100%;
- padding: 20px;
- }
+ height: 100%;
+ text-align: left;
- /deep/ .selected {
- background-color: #e6f6fb;
- color: #009fdb;
- }
-
- &.view-mode {
- /deep/ .dynamic-property-row:not(.selected) {
- background-color: #f8f8f8;
- }
- }
-
- .table-row {
- display: flex;
- flex-direction: row;
- flex: 0 0 auto;
-
- &.readonly {
- background-color: #f8f8f8;
- cursor: auto;
- }
-
- &:hover:not(.selected) {
- background-color: #f8f8f8;
- cursor: pointer;
-
- /deep/ .dynamic-property-row:not(.selected) {
- background-color: #f8f8f8;
- cursor: pointer;
- }
- }
- .selected-row {
- background-color: #e6f6fb;
- }
-
- .table-cell.valueCol {
- padding: 0px;
-
- }
+ .inner-cell-div {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ height: 20px;
}
- }
- .table-cell {
- font-size: 13px;
- flex: 1;
- border: #d2d2d2 solid 1px;
- border-right: none;
- border-top: none;
- padding: 10px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- display: flex;
- min-height: 40px;
-
- &:last-child {
- border-right: #d2d2d2 solid 1px;
+ .inner-cell-div-multiline {
+ max-width: 100%;
}
- // Column: Property Name
- &.col1 {
- flex: 1 0 190px;
- max-width: 300px;
- display: flex;
- @media @smaller-screen {
- flex: 0 0 25%;
- }
-
- .attribute-name {
- flex: 1;
+ .table-header {
display: flex;
- overflow: hidden;
- //max-width: 90%; fix bug 327139
- }
-
- .property-description-icon {
- float: right;
- margin-top: 4px;
- margin-left: 15px;
+ flex-direction:row;
flex: 0 0 auto;
- }
- }
-
- // Column: Type
- &.col2 {
- flex: 0 0 150px;
- max-width: 150px;
- @media @smaller-screen {
- flex: 0 0 20%;
- }
+ font-weight:bold;
+ border-top: #d2d2d2 solid 1px;
+ background-color: #f2f2f2;
+
+ .table-cell {
+ color:#191919;
+ font-size:13px;
+ .table-header-sort-arrow {
+ display: inline-block;
+ background-color: transparent;
+ border: none;
+ color: #AAA;
+ margin: 8px 0 0 5px;
+ &.up {
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid;
+ height:5px;
+ }
+ &.down {
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-top: 5px solid;
+ }
+ }
+ }
}
- // Column: ES
- &.col3 {
- flex: 0 0 120px;
- max-width: 120px;
- @media @smaller-screen {
- flex: 0 0 15%;
- }
+ .table-rows-header {
+ border: #d2d2d2 solid 1px;
+ border-top:none;
+ display: flex;
+ align-items: center;
+ .archive-label{
+ margin-left: 10px;
+ }
}
- // Column: Value
- &.valueCol {
- flex: 2 0 250px;
- display: flex;
- @media @smaller-screen {
- flex: 1 0 40%;
- }
+ .table-body {
+ display:flex;
+ flex-direction: column;
+ overflow-y:auto;
+ flex: 1;
+ background-color: @main_color_p;
+
+ .no-data {
+ border: #d2d2d2 solid 1px;
+ border-top:none;
+ text-align: center;
+ height: 100%;
+ padding: 20px;
+ }
+ /deep/.selected{
+ background-color: #e6f6fb;
+ color: #009fdb;
+ }
+ &.view-mode{
+ /deep/ .dynamic-property-row:not(.selected){
+ background-color:#f8f8f8;
+ }
+ }
+ .table-row {
+ display: flex;
+ flex-direction:row;
+ flex: 0 0 auto;
+ &.readonly{
+ background-color: #f8f8f8;
+ cursor: auto;
+ }
+
+ &:hover:not(.selected){
+ background-color:#f8f8f8; cursor:pointer;
+ /deep/ .dynamic-property-row:not(.selected){
+ background-color:#f8f8f8; cursor:pointer;
+ }
+ }
+
+ .selected-row {
+ background-color:#e6f6fb;
+ }
+
+ .table-cell.valueCol {
+ padding:0px;
+
+ }
+ }
}
+ .table-cell {
+ font-size:13px;
+ flex:1;
+ border: #d2d2d2 solid 1px;
+ border-right:none;
+ border-top:none;
+ padding:10px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow:hidden;
+ display: flex;
+ min-height:40px;
+ &:last-child {
+ border-right:#d2d2d2 solid 1px;
+ }
- /deep/ .checkbox-container {
- margin-right: 10px;
- }
-
- /deep/ &.round-checkbox {
- .checkbox-container input[type=checkbox].checkbox-hidden {
- &:checked ~ .checkbox-icon::before {
- .sprite-new;
- .round-checked-icon;
+ // Column: Property Name
+ &.col1 {
+ flex: 1 0 190px;
+ max-width:300px;
+ display: flex;
+ @media @smaller-screen { flex: 0 0 25%;}
+
+ .attribute-name {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+ //max-width: 90%; fix bug 327139
+ }
+
+ .property-description-icon {
+ float: right;
+ margin-top: 4px;
+ margin-left: 15px;
+ flex: 0 0 auto;
+ }
}
- &[disabled] ~ .checkbox-icon::before {
- .sprite-new;
- .round-checked-icon.disabled;
- background-color: inherit;
- border: none;
- //animation: addDisabledCheck 4s linear;
+ // Column: Type
+ &.col2 {
+ flex: 0 0 150px;
+ max-width:150px;
+ @media @smaller-screen { flex: 0 0 20%;}
}
- }
- }
- }
- .delete-button-container {
- max-height: 24px;
- cursor: pointer;
- }
+ // Column: ES
+ &.col3 {
+ flex:0 0 120px;
+ max-width:120px;
+ @media @smaller-screen { flex: 0 0 15%;}
+ }
- .filtered {
- /deep/ .checkbox-label-content {
- background-color: yellow;
- }
- }
+ // Column: Value
+ &.valueCol {
+ flex: 2 0 250px;
+ display: flex;
+ @media @smaller-screen { flex: 1 0 40%;}
+ }
- .dynamic-property {
- width: 100%;
- &:last-child /deep/ .dynamic-property-row {
- border-bottom: none;
- }
- }
+ /deep/ .checkbox-container {
+ margin-right: 10px;
+ }
- .table-row {
- /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #ffffff 80%);
- padding-left: 1em;
+ /deep/ &.round-checkbox {
+ .checkbox-container input[type=checkbox].checkbox-hidden {
+ &:checked ~ .checkbox-icon::before {
+ .sprite-new;
+ .round-checked-icon;
+ }
+ &[disabled] ~ .checkbox-icon::before {
+ .sprite-new;
+ .round-checked-icon.disabled;
+ background-color:inherit;
+ border:none;
+ //animation: addDisabledCheck 4s linear;
+ }
+ }
+ }
}
- &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
- padding-left: 1em;
+ .delete-button-container {
+ max-height: 24px;
+ cursor: pointer;
}
- &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
- padding-left: 1em;
+ .filtered {
+ /deep/ .checkbox-label-content{
+ background-color: yellow;
+ }
}
- &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
- padding-left: 1em;
+ dynamic-property {
+ width:100%;
+ &:last-child /deep/ .dynamic-property-row {
+ border-bottom:none;
+ }
}
- }
- .prop-instance-icon {
- vertical-align: middle;
- margin-right: 7px;
+ .table-row {
+ /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+ padding-left: 1em;
+ }
- &.defaulticon.small {
- background-color: @main_color_q;
- border-radius: 14px;
- }
+ &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
+ padding-left: 1em;
+ }
- // square icons
- &.icon-group {
- .square-icon();
- background-color: @main_color_a;
+ &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+ padding-left: 1em;
+ }
- &::before {
- content: "G";
- }
+ &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+ padding-left: 1em;
+ }
}
- &.icon-policy {
- .square-icon();
- background-color: @main_color_r;
+ .prop-instance-icon {
+ vertical-align: middle;
+ margin-right: 7px;
+ &.defaulticon.small {
+ background-color: @main_color_q;
+ border-radius:14px;
+ }
+ // square icons
+ &.icon-group {
+ .square-icon();
+ background-color: @main_color_a;
+
+ &::before {
+ content: "G";
+ }
+ }
+ &.icon-policy {
+ .square-icon();
+ background-color: @main_color_r;
- &::before {
- content: "P";
- }
- }
+ &::before {
+ content: "P";
+ }
+ }
- }
+ }
}
diff --git a/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less b/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less
index 38339bdb8e..fd572b0f2d 100644
--- a/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.less
@@ -1,92 +1,82 @@
@import '../../../../../../assets/styles/variables.less';
-
.flat-children-container {
- .dynamic-property-row {
- /*create nested left border classes for up to 10 levels of nesting*/
- .nested-border-loop(@i) when (@i > 0) {
- @size: (@i - 1) *2;
- &.nested-level-@{i} .table-cell:first-child {
- border-left: ~"solid @{size}px #009fdb";
- }
- .nested-border-loop(@i - 1)
+ .dynamic-property-row {
+ /*create nested left border classes for up to 10 levels of nesting*/
+ .nested-border-loop(@i) when (@i > 0) {
+ @size: (@i - 1) *2;
+ &.nested-level-@{i} .table-cell:first-child {
+ border-left: ~"solid @{size}px #009fdb";
+ }
+ .nested-border-loop(@i - 1)
+ }
+ .nested-border-loop(10);
}
- .nested-border-loop(10);
- }
-
- .dynamic-property {
- &:first-child .dynamic-property-row.with-top-border {
- border-top: solid 1px #d2d2d2;
+ dynamic-property {
+ &:first-child .dynamic-property-row.with-top-border {
+ border-top:solid 1px #d2d2d2;
+ }
+ &:not(:last-child) .dynamic-property-row {
+ border-bottom:solid 1px #d2d2d2;
+ }
}
-
- &:not(:last-child) .dynamic-property-row {
- border-bottom: solid 1px #d2d2d2;
- }
- }
}
-
.dynamic-property-row {
- display: flex;
- flex-direction: row;
- align-items: stretch;
+ display:flex;
+ flex-direction:row;
+ align-items: stretch;
- &.readonly {
- background-color: @tlv_color_t;
- cursor: auto;
- }
-
- //for the case that the parent is disabled but the child is enabled
- &:not(.readonly) {
- background-color: @main_color_p;
- }
-
- .table-cell {
- flex: 1;
- padding: 9px;
- justify-content: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ &.readonly{
+ background-color: @tlv_color_t;
+ cursor: auto;
+ }
+ //for the case that the parent is disabled but the child is enabled
+ &:not(.readonly){
+ background-color: @main_color_p;
+ }
- &:first-child {
- flex: 0 0 50%;
- border-right: #d2d2d2 solid 1px;
+ .table-cell {
+ flex: 1;
+ padding:9px;
+ justify-content: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
- &:only-of-type {
- flex: 1 1 100%;
- border-right: none;
- }
+ &:first-child {
+ flex: 0 0 50%;
+ border-right:#d2d2d2 solid 1px;
+ &:only-of-type {
+ flex: 1 1 100%;
+ border-right:none;
+ }
+ }
+ &.empty {
+ height:40px;
+ }
}
-
- &.empty {
- height: 40px;
+ .property-icon {
+ flex: 0 0 auto;
+ margin-right:10px;
+ align-self:center;
+ cursor:pointer;
}
- }
-
- .property-icon {
- flex: 0 0 auto;
- margin-right: 10px;
- align-self: center;
- cursor: pointer;
- }
}
.filtered {
- /deep/ .checkbox-label-content {
- background-color: yellow;
- }
+ /deep/ .checkbox-label-content{
+ background-color: yellow;
+ }
}
-
-.inner-cell-div {
- max-width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- display: inline;
- padding-left: 8px;
+.inner-cell-div{
+ max-width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: inline;
+ padding-left: 8px;
}
-
.error {
- border: solid 1px @func_color_q;
- color: @func_color_q;
- outline: none;
- box-sizing: border-box;
+ 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/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
index 601aaae2f9..1007292854 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,94 +1,84 @@
@import '../../../../../../assets/styles/variables.less';
-
.flat-children-container {
- .dynamic-property-row {
- /*create nested left border classes for up to 10 levels of nesting*/
- .nested-border-loop(@i) when (@i > 0) {
- @size: (@i - 1) *2;
- &.nested-level-@{i} .table-cell:first-child {
- border-left: ~"solid @{size}px #009fdb";
- }
- .nested-border-loop(@i - 1)
+ .dynamic-property-row {
+ /*create nested left border classes for up to 10 levels of nesting*/
+ .nested-border-loop(@i) when (@i > 0) {
+ @size: (@i - 1) *2;
+ &.nested-level-@{i} .table-cell:first-child {
+ border-left: ~"solid @{size}px #009fdb";
+ }
+ .nested-border-loop(@i - 1)
+ }
+ .nested-border-loop(10);
}
- .nested-border-loop(10);
- }
-
- .dynamic-property {
- &:first-child .dynamic-property-row.with-top-border {
- border-top: solid 1px #d2d2d2;
+ dynamic-property {
+ &:first-child .dynamic-property-row.with-top-border {
+ border-top:solid 1px #d2d2d2;
+ }
+ &:not(:last-child) .dynamic-property-row {
+ border-bottom:solid 1px #d2d2d2;
+ }
}
-
- &:not(:last-child) .dynamic-property-row {
- border-bottom: solid 1px #d2d2d2;
- }
- }
}
-
.dynamic-property-row {
- display: flex;
- flex-direction: row;
- align-items: stretch;
-
- &.readonly {
- background-color: @tlv_color_t;
- cursor: auto;
- }
-
- //for the case that the parent is disabled but the child is enabled
- &:not(.readonly) {
- background-color: @main_color_p;
- }
-
- .table-cell {
- flex: 1;
- padding: 9px;
- justify-content: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ display:flex;
+ flex-direction:row;
+ align-items: stretch;
- &:first-child {
- flex: 0 0 50%;
- border-right: #d2d2d2 solid 1px;
-
- &:only-of-type {
- flex: 1 1 100%;
- border-right: none;
- }
+ &.readonly{
+ background-color: @tlv_color_t;
+ cursor: auto;
}
-
- &.empty {
- height: 40px;
+ //for the case that the parent is disabled but the child is enabled
+ &:not(.readonly){
+ background-color: @main_color_p;
}
- }
-
- .property-icon {
- flex: 0 0 auto;
- margin-right: 10px;
- align-self: center;
- cursor: pointer;
- }
+ .table-cell {
+ flex: 1;
+ padding:9px;
+ justify-content: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &:first-child {
+ flex: 0 0 50%;
+ border-right:#d2d2d2 solid 1px;
+ &:only-of-type {
+ flex: 1 1 100%;
+ border-right:none;
+ }
+ }
+ &.empty {
+ height:40px;
+ }
+ }
+ .property-icon {
+ flex: 0 0 auto;
+ margin-right:10px;
+ align-self:center;
+ cursor:pointer;
+ }
+
}
.filtered {
- /deep/ .checkbox-label-content {
- background-color: yellow;
- }
+ /deep/ .checkbox-label-content{
+ background-color: yellow;
+ }
}
-
-.inner-cell-div {
- max-width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- display: inline;
- padding-left: 8px;
+.inner-cell-div{
+ max-width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: inline;
+ padding-left: 8px;
}
-
.error {
- border: solid 1px @func_color_q;
- color: @func_color_q;
- outline: none;
- box-sizing: border-box;
+ 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/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
index ed5db0bc64..8c2c6ce940 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
@@ -1,293 +1,265 @@
@import './../../../../../assets/styles/mixins.less';
@import '../../../../../assets/styles/sprite';
-
@smaller-screen: ~"only screen and (max-width: 1580px)";
-:host /deep/ input {
- width: 100%;
-}
+:host /deep/ input { width:100%;}
.properties-table {
- display: flex;
- flex-direction: column;
- flex: 1;
- height: 100%;
- text-align: left;
-
-
- .inner-cell-div {
- text-overflow: ellipsis;
- overflow: hidden;
- height: 20px;
- }
-
- .inner-cell-div-multiline {
- max-width: 100%;
- }
-
- .table-header {
- display: flex;
- flex-direction: row;
- flex: 0 0 auto;
- font-weight: bold;
- border-top: #d2d2d2 solid 1px;
- background-color: #f2f2f2;
-
- .table-cell {
- color: #191919;
- font-size: 13px;
-
- .table-header-sort-arrow {
- display: inline-block;
- background-color: transparent;
- border: none;
- color: #AAA;
- margin: 8px 0 0 5px;
-
- &.up {
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-bottom: 5px solid;
- height: 5px;
- }
-
- &.down {
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid;
- }
- }
- }
- }
-
- .table-rows-header {
- border: #d2d2d2 solid 1px;
- border-top: none;
- display: flex;
- align-items: center;
-
- .archive-label {
- margin-left: 10px;
- }
- }
-
- .table-body {
- display: flex;
- flex-direction: column;
- overflow-y: auto;
+ display:flex;
+ flex-direction:column;
flex: 1;
- background-color: @main_color_p;
-
- .no-data {
- border: #d2d2d2 solid 1px;
- border-top: none;
- text-align: center;
- height: 100%;
- padding: 20px;
- }
-
- /deep/ .selected {
- background-color: #e6f6fb;
- color: #009fdb;
- }
-
- &.view-mode {
- /deep/ .dynamic-property-row:not(.selected) {
- background-color: #f8f8f8;
- }
- }
+ height:100%;
+ text-align:left;
- .table-row {
- display: flex;
- flex-direction: row;
- flex: 0 0 auto;
-
- &.readonly {
- background-color: #f8f8f8;
- cursor: auto;
- }
- &:hover:not(.selected) {
- background-color: #f8f8f8;
- cursor: pointer;
-
- /deep/ .dynamic-property-row:not(.selected) {
- background-color: #f8f8f8;
- cursor: pointer;
- }
- }
-
- .selected-row {
- background-color: #e6f6fb;
- }
-
- .table-cell.valueCol {
- padding: 0px;
-
- }
+ .inner-cell-div {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ height: 20px;
}
- }
- .table-cell {
- font-size: 13px;
- flex: 1;
- border: #d2d2d2 solid 1px;
- border-right: none;
- border-top: none;
- padding: 10px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- display: flex;
- min-height: 40px;
-
- &:last-child {
- border-right: #d2d2d2 solid 1px;
+ .inner-cell-div-multiline {
+ max-width: 100%;
}
- // Column: Property Name
- &.col1 {
- flex: 1 0 190px;
- max-width: 300px;
- display: flex;
- @media @smaller-screen {
- flex: 0 0 25%;
- }
-
- .property-name {
- flex: 1;
+ .table-header {
display: flex;
- overflow: hidden;
- //max-width: 90%; fix bug 327139
- }
-
- .property-description-icon {
- float: right;
- margin-top: 4px;
- margin-left: 15px;
+ flex-direction:row;
flex: 0 0 auto;
- }
- }
-
- // Column: Type
- &.col2 {
- flex: 0 0 150px;
- max-width: 150px;
- @media @smaller-screen {
- flex: 0 0 20%;
- }
+ font-weight:bold;
+ border-top: #d2d2d2 solid 1px;
+ background-color: #f2f2f2;
+
+ .table-cell {
+ color:#191919;
+ font-size:13px;
+ .table-header-sort-arrow {
+ display: inline-block;
+ background-color: transparent;
+ border: none;
+ color: #AAA;
+ margin: 8px 0 0 5px;
+ &.up {
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid;
+ height:5px;
+ }
+ &.down {
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-top: 5px solid;
+ }
+ }
+ }
}
- // Column: ES
- &.col3 {
- flex: 0 0 120px;
- max-width: 120px;
- @media @smaller-screen {
- flex: 0 0 15%;
- }
+ .table-rows-header {
+ border: #d2d2d2 solid 1px;
+ border-top:none;
+ display: flex;
+ align-items: center;
+ .archive-label{
+ margin-left: 10px;
+ }
}
- // Column: Value
- &.valueCol {
- flex: 2 0 250px;
- display: flex;
- @media @smaller-screen {
- flex: 1 0 40%;
- }
+ .table-body {
+ display:flex;
+ flex-direction: column;
+ overflow-y:auto;
+ flex: 1;
+ background-color: @main_color_p;
+
+ .no-data {
+ border: #d2d2d2 solid 1px;
+ border-top:none;
+ text-align: center;
+ height: 100%;
+ padding: 20px;
+ }
+ /deep/.selected{
+ background-color: #e6f6fb;
+ color: #009fdb;
+ }
+ &.view-mode{
+ /deep/ .dynamic-property-row:not(.selected){
+ background-color:#f8f8f8;
+ }
+ }
+ .table-row {
+ display: flex;
+ flex-direction:row;
+ flex: 0 0 auto;
+ &.readonly{
+ background-color: #f8f8f8;
+ cursor: auto;
+ }
+
+ &:hover:not(.selected){
+ background-color:#f8f8f8; cursor:pointer;
+ /deep/ .dynamic-property-row:not(.selected){
+ background-color:#f8f8f8; cursor:pointer;
+ }
+ }
+
+ .selected-row {
+ background-color:#e6f6fb;
+ }
+
+ .table-cell.valueCol {
+ padding:0px;
+
+ }
+ }
}
+ .table-cell {
+ font-size:13px;
+ flex:1;
+ border: #d2d2d2 solid 1px;
+ border-right:none;
+ border-top:none;
+ padding:10px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow:hidden;
+ display: flex;
+ min-height:40px;
+ &:last-child {
+ border-right:#d2d2d2 solid 1px;
+ }
- /deep/ .checkbox-container {
- margin-right: 10px;
- }
-
- /deep/ &.round-checkbox {
- .checkbox-container input[type=checkbox].checkbox-hidden {
- &:checked ~ .checkbox-icon::before {
- .sprite-new;
- .round-checked-icon;
+ // Column: Property Name
+ &.col1 {
+ flex: 1 0 190px;
+ max-width:300px;
+ display: flex;
+ @media @smaller-screen { flex: 0 0 25%;}
+
+ .property-name {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+ //max-width: 90%; fix bug 327139
+ }
+
+ .property-description-icon {
+ float: right;
+ margin-top: 4px;
+ margin-left: 15px;
+ flex: 0 0 auto;
+ }
}
- &[disabled] ~ .checkbox-icon::before {
- .sprite-new;
- .round-checked-icon.disabled;
- background-color: inherit;
- border: none;
- //animation: addDisabledCheck 4s linear;
+ // Column: Type
+ &.col2 {
+ flex: 0 0 150px;
+ max-width:150px;
+ @media @smaller-screen { flex: 0 0 20%;}
}
- }
- }
- }
- .delete-button-container {
- max-height: 24px;
- cursor: pointer;
- }
+ // Column: ES
+ &.col3 {
+ flex:0 0 120px;
+ max-width:120px;
+ @media @smaller-screen { flex: 0 0 15%;}
+ }
- .filtered {
- /deep/ .checkbox-label-content {
- background-color: yellow;
- }
- }
+ // Column: Value
+ &.valueCol {
+ flex: 2 0 250px;
+ display: flex;
+ @media @smaller-screen { flex: 1 0 40%;}
+ }
- .dynamic-property {
- width: 100%;
- &:last-child /deep/ .dynamic-property-row {
- border-bottom: none;
- }
- }
+ /deep/ .checkbox-container {
+ margin-right: 10px;
+ }
- .table-row {
- /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #ffffff 80%);
- padding-left: 1em;
+ /deep/ &.round-checkbox {
+ .checkbox-container input[type=checkbox].checkbox-hidden {
+ &:checked ~ .checkbox-icon::before {
+ .sprite-new;
+ .round-checked-icon;
+ }
+ &[disabled] ~ .checkbox-icon::before {
+ .sprite-new;
+ .round-checked-icon.disabled;
+ background-color:inherit;
+ border:none;
+ //animation: addDisabledCheck 4s linear;
+ }
+ }
+ }
}
- &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
- padding-left: 1em;
+ .delete-button-container {
+ max-height: 24px;
+ cursor: pointer;
}
- &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
- padding-left: 1em;
+ .filtered {
+ /deep/ .checkbox-label-content{
+ background-color: yellow;
+ }
}
- &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
- padding-left: 1em;
+ dynamic-property {
+ width:100%;
+ &:last-child /deep/ .dynamic-property-row {
+ border-bottom:none;
+ }
}
- }
- .prop-instance-icon {
- vertical-align: middle;
- margin-right: 7px;
-
- &.defaulticon.small {
- background-color: @main_color_q;
- border-radius: 14px;
- }
+ .table-row {
+ /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+ padding-left: 1em;
+ }
- // square icons
+ &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
+ padding-left: 1em;
+ }
- &.icon-group {
- .square-icon();
- background-color: @main_color_a;
+ &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+ padding-left: 1em;
+ }
- &::before {
- content: "G";
- }
+ &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+ padding-left: 1em;
+ }
}
- &.icon-policy {
- .square-icon();
- background-color: @main_color_r;
+ .prop-instance-icon {
+ vertical-align: middle;
+ margin-right: 7px;
+ &.defaulticon.small {
+ background-color: @main_color_q;
+ border-radius:14px;
+ }
+ // square icons
+
+ &.icon-group {
+ .square-icon();
+ background-color: @main_color_a;
+
+ &::before {
+ content: "G";
+ }
+ }
+ &.icon-policy {
+ .square-icon();
+ background-color: @main_color_r;
+
+ &::before {
+ content: "P";
+ }
+ }
- &::before {
- content: "P";
- }
}
-
- }
}
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
index df3797e069..edcb87db3d 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less
@@ -1,94 +1,76 @@
@import './../../../../../assets/styles/variables.less';
@import './../../../../../assets/styles/mixins.less';
-
-.main-container {
+.main-container{
color: @main_color_m;
}
-
.select-req-or-cap-span {
float: left;
margin-right: 15px;
font-size: 13px;
}
-
-.select-type-label {
+.select-type-label{
.m_12_m;
margin-bottom: 2px;
}
-
-.select-type {
+.select-type{
display: flex;
margin-bottom: 10px;
-
- .ui-element-dropdown {
+ ui-element-dropdown{
width: 40%;
font-size: 13px;
-
- /deep/ select {
+ /deep/ select{
height: 31px;
}
}
}
-
-.table-and-list-container {
+.table-and-list-container{
display: flex;
padding-top: 10px;
-
- .inner-container {
+ .inner-container{
height: 300px;
overflow-y: auto;
border: @main_color_o solid 1px;
}
-
- .inner-container:not(:last-of-type) {
+ .inner-container:not(:last-of-type){
border-right: none;
}
-
.requirements-or-capabilities-container {
width: 40%;
-
- &.empty-list {
+ &.empty-list{
background-color: @tlv_color_t;
text-align: center;
-
- &:before {
+ &:before{
content: 'Select "type" above';
line-height: 298px;
}
}
-
- .req-or-cap-item {
+ .req-or-cap-item{
border-bottom: @main_color_o solid 1px;
padding: 10px;
font-size: 13px;
-
- &:hover:not(.selected) {
- background-color: @tlv_color_t;
- cursor: pointer;
+ &:hover:not(.selected){
+ background-color:@tlv_color_t; cursor:pointer;
}
}
}
-
- .properties-table-container {
+ .properties-table-container{
width: 60%;
display: flex;
-
- &.cap-selected {
+ &.cap-selected{
background-color: @tlv_color_t;
border: @main_color_a solid 1px;
- -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1);
- -moz-box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1);
- box-shadow: inset 8px -2px 7px -9px rgba(84, 84, 84, 1);
+ -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
+ -moz-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
+ box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1);
}
-
- .properties-table {
+ properties-table{
margin: 15px;
width: 100%;
}
}
}
-.selected {
+.selected{
color: @main_color_a;
background-color: @tlv_color_v;
border-left: @main_color_a solid 4px;
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
index f854f809d8..9b1535864e 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
@@ -12,26 +12,22 @@
color: @main_color_a;
box-shadow: 0 2px 7px @main_color_o;
border-bottom: 1px solid @main_color_o;
-
.checkbox-label {
margin-top: 14px;
-
.checkbox-label-content {
font-size: 14px;
}
}
-
.checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content {
opacity: 0.5;
}
-
.delete-btn {
background-position: -137px -415px;
width: 24px;
height: 24px
}
- .loader {
+ loader {
top: 20px;
}
}
@@ -54,24 +50,19 @@
justify-content: space-between;
margin-left: 5px;
width: 180px;
-
.delete-icon {
visibility: hidden;
}
-
&:not(.readonly):hover {
.a_1;
}
-
- &:hover .delete-icon {
+ &:hover .delete-icon{
visibility: visible;
}
-
&.readonly {
opacity: 0.5;
}
}
-
.filter-desc {
.sdc-ellipsis;
width: 220px;
@@ -81,21 +72,19 @@
}
}
-
.w-sdc-designer-sidebar-section-node-filter-footer {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
width: 100%;
}
-
.w-sdc-designer-sidebar-section-node-filter-footer-action {
width: 180px;
margin-top: 10px;
}
}
-/deep/ .sdc-accordion {
+/deep/.sdc-accordion {
margin-bottom: 0;
display: grid;
@@ -115,12 +104,11 @@
.sdc-accordion-body.open {
padding-left: 0;
padding-top: 0;
-
.sdc-accordion-header { /*Second level - nested accordion */
background-color: #f8f8f8;
padding: 4px 20px 4px 37px;
border-bottom: 1px solid #d2d2d2;
- border-left: none;
+ border-left:none;
height: 30px;
}
}
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);
+ }
+ }
}
- }
}