summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app
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
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')
-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
-rw-r--r--catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less2
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less12
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less4
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less6
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less3
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less7
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less70
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less292
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less20
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less35
-rw-r--r--catalog-ui/src/app/ng2/pages/home/home.component.less38
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less292
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less78
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less362
-rw-r--r--catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less30
-rw-r--r--catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less12
-rw-r--r--catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less5
-rw-r--r--catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less5
-rw-r--r--catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less6
-rw-r--r--catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less75
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.less4
35 files changed, 1678 insertions, 1477 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 26ae0d4d74..774b7eb798 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,264 +1,292 @@
@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;
- height: 100%;
- text-align: left;
-
+ background-color: @main_color_p;
+
+ .no-data {
+ border: #d2d2d2 solid 1px;
+ border-top: none;
+ text-align: center;
+ height: 100%;
+ padding: 20px;
+ }
- .inner-cell-div {
- text-overflow: ellipsis;
- overflow: hidden;
- height: 20px;
+ /deep/ .selected {
+ background-color: #e6f6fb;
+ color: #009fdb;
}
- .inner-cell-div-multiline {
- max-width: 100%;
+ &.view-mode {
+ /deep/ .dynamic-property-row:not(.selected) {
+ background-color: #f8f8f8;
+ }
}
- .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-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-rows-header {
- border: #d2d2d2 solid 1px;
- border-top:none;
- display: flex;
- align-items: center;
- .archive-label{
- margin-left: 10px;
- }
+ .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;
}
- .table-body {
- display:flex;
- flex-direction: column;
- overflow-y:auto;
+ // Column: Property Name
+ &.col1 {
+ flex: 1 0 190px;
+ max-width: 300px;
+ display: flex;
+ @media @smaller-screen {
+ flex: 0 0 25%;
+ }
+
+ .attribute-name {
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;
+ overflow: hidden;
+ //max-width: 90%; fix bug 327139
+ }
- &:last-child {
- border-right:#d2d2d2 solid 1px;
- }
+ .property-description-icon {
+ float: right;
+ margin-top: 4px;
+ margin-left: 15px;
+ flex: 0 0 auto;
+ }
+ }
- // 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;
- }
- }
+ // Column: Type
+ &.col2 {
+ flex: 0 0 150px;
+ max-width: 150px;
+ @media @smaller-screen {
+ flex: 0 0 20%;
+ }
+ }
- // Column: Type
- &.col2 {
- flex: 0 0 150px;
- max-width:150px;
- @media @smaller-screen { flex: 0 0 20%;}
- }
+ // Column: ES
+ &.col3 {
+ flex: 0 0 120px;
+ max-width: 120px;
+ @media @smaller-screen {
+ flex: 0 0 15%;
+ }
+ }
- // Column: ES
- &.col3 {
- flex:0 0 120px;
- max-width:120px;
- @media @smaller-screen { flex: 0 0 15%;}
- }
+ // Column: Value
+ &.valueCol {
+ flex: 2 0 250px;
+ display: flex;
+ @media @smaller-screen {
+ flex: 1 0 40%;
+ }
+ }
- // Column: Value
- &.valueCol {
- flex: 2 0 250px;
- display: flex;
- @media @smaller-screen { flex: 1 0 40%;}
- }
+ /deep/ .checkbox-container {
+ margin-right: 10px;
+ }
- /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;
}
- /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;
- }
- }
+ &[disabled] ~ .checkbox-icon::before {
+ .sprite-new;
+ .round-checked-icon.disabled;
+ background-color: inherit;
+ border: none;
+ //animation: addDisabledCheck 4s linear;
}
+ }
}
+ }
- .delete-button-container {
- max-height: 24px;
- cursor: pointer;
+ .delete-button-container {
+ max-height: 24px;
+ cursor: pointer;
+ }
+
+ .filtered {
+ /deep/ .checkbox-label-content {
+ background-color: yellow;
}
+ }
- .filtered {
- /deep/ .checkbox-label-content{
- background-color: yellow;
- }
+ .dynamic-property {
+ width: 100%;
+
+ &:last-child /deep/ .dynamic-property-row {
+ border-bottom: none;
}
+ }
- dynamic-property {
- width:100%;
- &:last-child /deep/ .dynamic-property-row {
- border-bottom:none;
- }
+ .table-row {
+ /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+ padding-left: 1em;
}
- .table-row {
- /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #ffffff 80%);
- padding-left: 1em;
- }
+ &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
+ padding-left: 1em;
+ }
- &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
- padding-left: 1em;
- }
+ &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+ padding-left: 1em;
+ }
- &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
- padding-left: 1em;
- }
+ &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+ padding-left: 1em;
+ }
+ }
- &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
- padding-left: 1em;
- }
+ .prop-instance-icon {
+ vertical-align: middle;
+ margin-right: 7px;
+
+ &.defaulticon.small {
+ background-color: @main_color_q;
+ border-radius: 14px;
}
- .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;
+ // square icons
+ &.icon-group {
+ .square-icon();
+ background-color: @main_color_a;
- &::before {
- content: "P";
- }
- }
+ &::before {
+ content: "G";
+ }
+ }
+ &.icon-policy {
+ .square-icon();
+ background-color: @main_color_r;
+
+ &::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 fd572b0f2d..38339bdb8e 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,82 +1,92 @@
@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)
- }
- .nested-border-loop(10);
+ .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 {
- &:first-child .dynamic-property-row.with-top-border {
- border-top:solid 1px #d2d2d2;
- }
- &:not(:last-child) .dynamic-property-row {
- border-bottom:solid 1px #d2d2d2;
- }
+ .nested-border-loop(10);
+ }
+
+ .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;
+ }
+ }
}
+
.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;
- }
+ &.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;
- .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;
- &:first-child {
- flex: 0 0 50%;
- border-right:#d2d2d2 solid 1px;
- &:only-of-type {
- flex: 1 1 100%;
- border-right:none;
- }
- }
- &.empty {
- height:40px;
- }
+ &:only-of-type {
+ flex: 1 1 100%;
+ border-right: none;
+ }
}
- .property-icon {
- flex: 0 0 auto;
- margin-right:10px;
- align-self:center;
- cursor:pointer;
+
+ &.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/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
index 1007292854..601aaae2f9 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,84 +1,94 @@
@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)
- }
- .nested-border-loop(10);
+ .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 {
- &:first-child .dynamic-property-row.with-top-border {
- border-top:solid 1px #d2d2d2;
- }
- &:not(:last-child) .dynamic-property-row {
- border-bottom:solid 1px #d2d2d2;
- }
+ .nested-border-loop(10);
+ }
+
+ .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;
+ }
+ }
}
+
.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;
- }
+ &.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;
+
+ &: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;
-
- &:first-child {
- flex: 0 0 50%;
- border-right:#d2d2d2 solid 1px;
- &:only-of-type {
- flex: 1 1 100%;
- border-right:none;
- }
- }
- &.empty {
- height:40px;
- }
+ &:only-of-type {
+ flex: 1 1 100%;
+ border-right: none;
+ }
}
- .property-icon {
- flex: 0 0 auto;
- margin-right:10px;
- align-self:center;
- cursor:pointer;
+
+ &.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 8c2c6ce940..ed5db0bc64 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,265 +1,293 @@
@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;
+ 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;
+ }
- .inner-cell-div {
- text-overflow: ellipsis;
- overflow: hidden;
- height: 20px;
+ &.down {
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-top: 5px solid;
+ }
+ }
}
+ }
- .inner-cell-div-multiline {
- max-width: 100%;
+ .table-rows-header {
+ border: #d2d2d2 solid 1px;
+ border-top: none;
+ display: flex;
+ align-items: center;
+
+ .archive-label {
+ margin-left: 10px;
}
+ }
- .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-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;
}
- .table-rows-header {
- border: #d2d2d2 solid 1px;
- border-top:none;
- display: flex;
- align-items: center;
- .archive-label{
- margin-left: 10px;
- }
+ /deep/ .selected {
+ background-color: #e6f6fb;
+ color: #009fdb;
}
- .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;
-
- }
+ &.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;
+ }
+
+ .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;
+ }
+
+ // 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;
- min-height:40px;
+ overflow: hidden;
+ //max-width: 90%; fix bug 327139
+ }
- &:last-child {
- border-right:#d2d2d2 solid 1px;
- }
+ .property-description-icon {
+ float: right;
+ margin-top: 4px;
+ margin-left: 15px;
+ flex: 0 0 auto;
+ }
+ }
- // 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;
- }
- }
+ // Column: Type
+ &.col2 {
+ flex: 0 0 150px;
+ max-width: 150px;
+ @media @smaller-screen {
+ flex: 0 0 20%;
+ }
+ }
- // Column: Type
- &.col2 {
- flex: 0 0 150px;
- max-width:150px;
- @media @smaller-screen { flex: 0 0 20%;}
- }
+ // Column: ES
+ &.col3 {
+ flex: 0 0 120px;
+ max-width: 120px;
+ @media @smaller-screen {
+ flex: 0 0 15%;
+ }
+ }
- // Column: ES
- &.col3 {
- flex:0 0 120px;
- max-width:120px;
- @media @smaller-screen { flex: 0 0 15%;}
- }
+ // Column: Value
+ &.valueCol {
+ flex: 2 0 250px;
+ display: flex;
+ @media @smaller-screen {
+ flex: 1 0 40%;
+ }
+ }
- // Column: Value
- &.valueCol {
- flex: 2 0 250px;
- display: flex;
- @media @smaller-screen { flex: 1 0 40%;}
- }
+ /deep/ .checkbox-container {
+ margin-right: 10px;
+ }
- /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;
}
- /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;
- }
- }
+ &[disabled] ~ .checkbox-icon::before {
+ .sprite-new;
+ .round-checked-icon.disabled;
+ background-color: inherit;
+ border: none;
+ //animation: addDisabledCheck 4s linear;
}
+ }
}
+ }
- .delete-button-container {
- max-height: 24px;
- cursor: pointer;
+ .delete-button-container {
+ max-height: 24px;
+ cursor: pointer;
+ }
+
+ .filtered {
+ /deep/ .checkbox-label-content {
+ background-color: yellow;
}
+ }
- .filtered {
- /deep/ .checkbox-label-content{
- background-color: yellow;
- }
+ .dynamic-property {
+ width: 100%;
+
+ &:last-child /deep/ .dynamic-property-row {
+ border-bottom: none;
}
+ }
- dynamic-property {
- width:100%;
- &:last-child /deep/ .dynamic-property-row {
- border-bottom:none;
- }
+ .table-row {
+ /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+ padding-left: 1em;
}
- .table-row {
- /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #ffffff 80%);
- padding-left: 1em;
- }
+ &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
+ padding-left: 1em;
+ }
- &.selected /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #e6f6fb 80%);
- padding-left: 1em;
- }
+ &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+ padding-left: 1em;
+ }
- &.readonly /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
- padding-left: 1em;
- }
+ &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
+ background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
+ padding-left: 1em;
+ }
+ }
- &:hover:not(.selected) /deep/ .table-cell-multiline-ellipsis .multiline-ellipsis-dots {
- background: linear-gradient(to right, transparent 0%, #f8f8f8 80%);
- padding-left: 1em;
- }
+ .prop-instance-icon {
+ vertical-align: middle;
+ margin-right: 7px;
+
+ &.defaulticon.small {
+ background-color: @main_color_q;
+ border-radius: 14px;
}
- .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;
+ // square icons
- &::before {
- content: "P";
- }
- }
+ &.icon-group {
+ .square-icon();
+ background-color: @main_color_a;
+ &::before {
+ content: "G";
+ }
}
+
+ &.icon-policy {
+ .square-icon();
+ background-color: @main_color_r;
+
+ &::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 edcb87db3d..df3797e069 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,76 +1,94 @@
@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 9b1535864e..f854f809d8 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,22 +12,26 @@
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;
}
}
@@ -50,19 +54,24 @@
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;
@@ -72,19 +81,21 @@
}
}
+
.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;
@@ -104,11 +115,12 @@
.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 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);
+ }
}
+ }
}
diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less
index 386d243976..9cce0a51c6 100644
--- a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less
@@ -17,7 +17,7 @@
height: 100%;
}
-/deep/ tabs {
+/deep/ .tabs {
display: flex;
flex-direction: column;
height: 100%;
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
index 188fb7b5ef..4ceb43ef5d 100644
--- a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
@@ -14,6 +14,7 @@
.i-sdc-form-item {
width: 250px;
+
&.operation {
width: 60px;
}
@@ -22,20 +23,25 @@
.rule-builder-content {
display: flex;
align-items: flex-end;
+
.rule-input-field {
flex: 1;
+
&:not(:last-of-type) {
margin-right: 20px;
}
- &.operator{
+
+ &.operator {
width: 55px;
flex: 0 1 auto;
}
+
&.assigned-value-field {
margin-bottom: 10px;
}
- /deep/ ui-element-dropdown select,
- /deep/ ui-element-input input {
+
+ /deep/ .ui-element-dropdown select,
+ /deep/ .ui-element-input input {
height: 30px;
}
}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less
index b3e5ef3a0c..aebea3bea6 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.less
@@ -1,4 +1,4 @@
-:host(composition-graph) {
+:host(.composition-graph) {
flex: 1;
padding-top: 53px;
}
@@ -34,7 +34,7 @@
right: 310px;
}
- ng2-zone-container {
+ .ng2-zone-container {
display: flex;
margin-left: 10px;
}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less
index 07f9aa2135..87e9ae1e03 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-properties-view/connection-properties-view.component.less
@@ -1,4 +1,4 @@
-connection-wizard-header {
- display: block;
- margin-bottom: 15px;
+.connection-wizard-header {
+ display: block;
+ margin-bottom: 15px;
}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less
index 316d49e406..2d77d9ae4a 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less
@@ -24,7 +24,7 @@
align-items: center;
justify-content: center;
- svg-icon {
+ .svg-icon {
position: relative;
right: -3px;
@@ -34,7 +34,6 @@
}
}
-
.cell {
min-height: 50px;
padding: 10px;
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less
index 4c7f8aba48..4c72281626 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less
@@ -44,7 +44,7 @@
height: 38px;
line-height: 35px;
- svg-icon {
+ .svg-icon {
margin: 13px 6px;
}
}
@@ -142,11 +142,13 @@
position: relative;
top: 2px;
}
+
/deep/ .tooltip-inner {
padding: 2px;
max-width: 270px;
font-size: 11px;
}
+
&.remove {
padding: 10px;
font-size: 10px;
@@ -204,7 +206,8 @@
display: flex;
justify-content: flex-end;
align-items: center;
- sdc-button {
+
+ .sdc-button {
margin: 0 5px;
}
}
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less
index 12eacc6473..55fb59c526 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less
@@ -21,52 +21,52 @@
@import '../../../../../../../assets/styles/variables.less';
.remove {
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
- svg-icon {
- position: relative;
- right: -3px;
+ .svg-icon {
+ position: relative;
+ right: -3px;
- &:hover {
- cursor: pointer;
- }
+ &:hover {
+ cursor: pointer;
}
+ }
}
.cell {
- min-height: 50px;
- padding: 10px;
- display: flex;
- align-items: center;
+ min-height: 50px;
+ padding: 10px;
+ display: flex;
+ align-items: center;
- > * {
- flex-basis: 100%;
- }
+ > * {
+ flex-basis: 100%;
+ }
- /deep/ select {
- height: 30px;
- }
+ /deep/ select {
+ height: 30px;
+ }
- input {
- height: 30px;
- border: none;
- padding-left: 10px;
- }
+ input {
+ height: 30px;
+ border: none;
+ padding-left: 10px;
+ }
- select {
- width: 100%;
- }
+ select {
+ width: 100%;
+ }
- &.field-property {
- &:last-child {
- flex: 1;
- }
+ &.field-property {
+ &:last-child {
+ flex: 1;
+ }
- .no-properties-error {
- color: @func_color_q;
- font-style: italic;
- }
+ .no-properties-error {
+ color: @func_color_q;
+ font-style: italic;
}
+ }
}
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
index 8bbed9de02..3d44cad740 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
@@ -22,179 +22,181 @@
@import '../../../../../../assets/styles/override.less';
.operation-handler {
- font-family: @font-opensans-regular;
- user-select: none;
- padding-top: 12px;
- padding-bottom: 20px;
-
- .i-sdc-form-label {
- font-size: 12px;
- }
-
- .w-sdc-form .i-sdc-form-item {
- margin-bottom: 15px;
- }
-
- textarea {
- min-height: 74px;
- margin-bottom: 18px;
- }
-
- /deep/ .sdc-dropdown__component-container {
- .sdc-dropdown__header {
- height: 38px;
- line-height: 35px;
-
- svg-icon {
- margin: 13px 6px;
- }
- }
+ font-family: @font-opensans-regular;
+ user-select: none;
+ padding-top: 12px;
+ padding-bottom: 20px;
+
+ .i-sdc-form-label {
+ font-size: 12px;
+ }
+
+ .w-sdc-form .i-sdc-form-item {
+ margin-bottom: 15px;
+ }
+
+ textarea {
+ min-height: 74px;
+ margin-bottom: 18px;
+ }
+
+ /deep/ .sdc-dropdown__component-container {
+ .sdc-dropdown__header {
+ height: 38px;
+ line-height: 35px;
+
+ .svg-icon {
+ margin: 13px 6px;
+ }
}
+ }
- /deep/ .sdc-input {
- margin-bottom: 0;
+ /deep/ .sdc-input {
+ margin-bottom: 0;
- .sdc-input__input {
- height: 38px;
- }
+ .sdc-input__input {
+ height: 38px;
}
+ }
- .side-by-side {
- display: flex;
-
- .form-item {
- flex: 1;
+ .side-by-side {
+ display: flex;
- &:first-child {
- margin-right: 14px;
- flex-basis: 37%;
- flex-grow: 0;
- flex-shrink: 0;
- }
+ .form-item {
+ flex: 1;
- &:nth-child(3) {
- margin-left: 14px;
- flex: 0.4;
- }
+ &:first-child {
+ margin-right: 14px;
+ flex-basis: 37%;
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
- .i-sdc-form-file-upload {
- height: 37px;
- margin-bottom: 0;
+ &:nth-child(3) {
+ margin-left: 14px;
+ flex: 0.4;
+ }
- .i-sdc-form-file-name {
- padding: 8px 10px;
- }
+ .i-sdc-form-file-upload {
+ height: 37px;
+ margin-bottom: 0;
- .i-sdc-form-file-upload-x-btn {
- top: 13px;
- }
+ .i-sdc-form-file-name {
+ padding: 8px 10px;
+ }
- .file-upload-browse-btn {
- height: 100%;
- padding: 7px 6px;
- z-index: 1;
- }
- }
+ .i-sdc-form-file-upload-x-btn {
+ top: 13px;
+ }
+ .file-upload-browse-btn {
+ height: 100%;
+ padding: 7px 6px;
+ z-index: 1;
}
- }
+ }
- .archive-warning {
- font-family: @font-opensans-bold;
- color: @main_color_i;
}
-
- .no-workflow-warning {
- font-family: @font-opensans-bold;
- color: @sdcui_color_red;
- float: right;
+ }
+
+ .archive-warning {
+ font-family: @font-opensans-bold;
+ color: @main_color_i;
+ }
+
+ .no-workflow-warning {
+ font-family: @font-opensans-bold;
+ color: @sdcui_color_red;
+ float: right;
+ }
+
+ .input-param-title {
+ font-size: 16px;
+ text-transform: uppercase;
+ }
+
+ .separator-buttons {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 10px;
+
+ .add-param-link {
+ &:not(.disabled):hover {
+ cursor: pointer;
+ }
}
- .input-param-title {
- font-size: 16px;
- text-transform: uppercase;
+ .tab {
+ width: 84px;
+ text-align: center;
}
+ }
- .separator-buttons {
- display: flex;
- justify-content: space-between;
- margin-top: 10px;
+ .generic-table {
+ max-height: 244px;
+ min-height: 91px;
+ background: @main_color_p;
+
+ .header-row .header-cell {
+ .info-icon {
+ float: right;
+ position: relative;
+ top: 2px;
+ }
+
+ /deep/ .tooltip-inner {
+ padding: 2px;
+ max-width: 270px;
+ font-size: 11px;
+ }
+
+ &.remove {
+ padding: 10px;
+ font-size: 10px;
+ }
+ }
- .add-param-link {
- &:not(.disabled):hover {
- cursor: pointer;
- }
+ .data-row {
+ &.empty-msg {
+ .bold-message {
+ font-family: @font-opensans-bold;
}
- .tab {
- width: 84px;
- text-align: center;
+ :first-child {
+ &:not(:only-child) {
+ margin: 6px 0;
+ }
}
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 14px;
+ }
}
- .generic-table {
- max-height: 244px;
- min-height: 91px;
- background: @main_color_p;
-
- .header-row .header-cell {
- .info-icon {
- float: right;
- position: relative;
- top: 2px;
- }
- /deep/ .tooltip-inner {
- padding: 2px;
- max-width: 270px;
- font-size: 11px;
- }
- &.remove {
- padding: 10px;
- font-size: 10px;
- }
- }
+ /deep/ .cell {
+ &.field-input-name, &.field-input-value {
+ flex: 1;
+ }
- .data-row {
- &.empty-msg {
- .bold-message {
- font-family: @font-opensans-bold;
- }
-
- :first-child {
- &:not(:only-child) {
- margin: 6px 0;
- }
- }
-
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 14px;
- }
+ &.field-property {
+ &, &:last-child {
+ flex: 1;
}
+ }
- /deep/ .cell {
- &.field-input-name, &.field-input-value{
- flex: 1;
- }
-
- &.field-property {
- &, &:last-child {
- flex: 1;
- }
- }
-
- &.field-mandatory {
- flex: 0.5;
- text-align: center;
- }
-
- &.remove {
- min-width: 40px;
- max-width: 40px;
- }
- }
+ &.field-mandatory {
+ flex: 0.5;
+ text-align: center;
+ }
+ &.remove {
+ min-width: 40px;
+ max-width: 40px;
+ }
}
+
+ }
}
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less
index 37461ba1c5..b7533cc664 100644
--- a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.less
@@ -1,19 +1,20 @@
@import "./../../../../../assets/styles/override";
-:host(composition-palette) {
- display:flex;
+:host(.composition-palette) {
+ display: flex;
flex: 0 0 244px;
}
-sdc-loader.inactive {
- display:none;
+.sdc-loader.inactive {
+ display: none;
}
:host ::ng-deep .sdc-filter-bar .sdc-input {
- margin-bottom:0px;
+ margin-bottom: 0px;
}
+
:host ::ng-deep .sdc-loader-wrapper {
- position:static;
+ position: static;
}
.composition-palette-component {
@@ -22,7 +23,7 @@ sdc-loader.inactive {
overflow-x: hidden;
display: flex;
flex-direction: column;
- position:relative;
+ position: relative;
width: 244px;
box-shadow: 7px -3px 6px -8px @sdcui_color_gray;
@@ -31,6 +32,7 @@ sdc-loader.inactive {
line-height: 40px;
padding: 0 17px;
color: @sdcui_color_white;
+
.palette-elements-count-value {
float: right;
}
@@ -41,19 +43,23 @@ sdc-loader.inactive {
.no-elements-found {
padding-left: 40px;
}
+
/deep/ .palette-category {
display: flex;
margin: 0px;
+
.sdc-accordion-header {
background-color: @sdcui_color_silver;
margin: 0px;
line-height: 40px;
padding: 0px 10px;
}
+
.sdc-accordion-body {
padding: 0px;
}
}
+
.palette-subcategory {
padding: 0 10px;
background-color: @sdcui_color_lighter-silver;
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
index 124d606079..9a39871e7a 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
@@ -2,27 +2,28 @@
@import '../../../../../assets/styles/mixins_old';
:host ::ng-deep .sdc-loader-wrapper {
- position:static;
+ position: static;
}
.component-details-panel-tabs {
- flex: 1;
- display:flex;
- overflow:hidden;
- }
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+}
-.component-details-panel-tabs /deep/ sdc-tabs {
- display:flex;
- flex-direction:column;
- width: 100%;
+.component-details-panel-tabs /deep/ .sdc-tabs {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
- /deep/ sdc-tab {
- display: flex;
- flex-direction: column;
- overflow-y: auto;
- }
- .svg-icon-wrapper.label-placement-left .svg-icon-label {
- margin-right: 0;
- }
+ /deep/ .sdc-tab {
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ }
+
+ .svg-icon-wrapper.label-placement-left .svg-icon-label {
+ margin-right: 0;
+ }
}
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.less b/catalog-ui/src/app/ng2/pages/home/home.component.less
index c5b73748ba..687b06674d 100644
--- a/catalog-ui/src/app/ng2/pages/home/home.component.less
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.less
@@ -1,5 +1,6 @@
@import '../../../../assets/styles/mixins_old';
@import '../../../../assets/styles/sprite';
+
.w-sdc-left-sidebar-nav {
margin-top: 46px;
}
@@ -27,11 +28,13 @@
font-weight: bold;
}
-.i-sdc-left-sidebar-item{
+.i-sdc-left-sidebar-item {
display: flex;
- &.category-title .title-text, sdc-checkbox{
+
+ &.category-title .title-text, .sdc-checkbox {
flex-grow: 1;
}
+
&:not(.category-title).i-sdc-left-sidebar-item-state-count {
line-height: 14px;
}
@@ -96,28 +99,31 @@
width: 140px;
- sdc-button,
- sdc-button-file-opener {
+ .sdc-button,
+ .sdc-button-file-opener {
padding-bottom: 5px;
- &:last-child{
+
+ &:last-child {
padding-bottom: 0;
}
}
-
- .import-file{
+
+ .import-file {
position: relative;
- file-opener{
+
+ .file-opener {
position: absolute;
top: 0;
+
/deep/ input[type="file"] {
- .hand;
- filter: alpha(opacity=0);
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- width: 140px;
- height: 36px;
+ .hand;
+ filter: alpha(opacity=0);
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 140px;
+ height: 36px;
}
}
}
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
index 2721d300c4..084744ad68 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
@@ -2,179 +2,181 @@
@import '../../../../../assets/styles/override.less';
.operation-creator {
- font-family: @font-opensans-regular;
- user-select: none;
- padding-top: 12px;
- padding-bottom: 20px;
-
- .i-sdc-form-label {
- font-size: 12px;
- }
-
- .w-sdc-form .i-sdc-form-item {
- margin-bottom: 15px;
- }
-
- textarea {
- min-height: 74px;
- margin-bottom: 18px;
- }
-
- /deep/ .sdc-dropdown__component-container {
- .sdc-dropdown__header {
- height: 38px;
- line-height: 35px;
-
- svg-icon {
- margin: 13px 6px;
- }
- }
+ font-family: @font-opensans-regular;
+ user-select: none;
+ padding-top: 12px;
+ padding-bottom: 20px;
+
+ .i-sdc-form-label {
+ font-size: 12px;
+ }
+
+ .w-sdc-form .i-sdc-form-item {
+ margin-bottom: 15px;
+ }
+
+ textarea {
+ min-height: 74px;
+ margin-bottom: 18px;
+ }
+
+ /deep/ .sdc-dropdown__component-container {
+ .sdc-dropdown__header {
+ height: 38px;
+ line-height: 35px;
+
+ .svg-icon {
+ margin: 13px 6px;
+ }
}
+ }
- /deep/ .sdc-input {
- margin-bottom: 0;
+ /deep/ .sdc-input {
+ margin-bottom: 0;
- .sdc-input__input {
- height: 38px;
- }
+ .sdc-input__input {
+ height: 38px;
}
+ }
- .side-by-side {
- display: flex;
-
- .form-item {
- flex: 1;
+ .side-by-side {
+ display: flex;
- &:first-child {
- margin-right: 14px;
- flex-basis: 37%;
- flex-grow: 0;
- flex-shrink: 0;
- }
+ .form-item {
+ flex: 1;
- &:nth-child(3) {
- margin-left: 14px;
- flex: 0.4;
- }
+ &:first-child {
+ margin-right: 14px;
+ flex-basis: 37%;
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
- .i-sdc-form-file-upload {
- height: 37px;
- margin-bottom: 0;
+ &:nth-child(3) {
+ margin-left: 14px;
+ flex: 0.4;
+ }
- .i-sdc-form-file-name {
- padding: 8px 10px;
- }
+ .i-sdc-form-file-upload {
+ height: 37px;
+ margin-bottom: 0;
- .i-sdc-form-file-upload-x-btn {
- top: 13px;
- }
+ .i-sdc-form-file-name {
+ padding: 8px 10px;
+ }
- .file-upload-browse-btn {
- height: 100%;
- padding: 7px 6px;
- z-index: 1;
- }
- }
+ .i-sdc-form-file-upload-x-btn {
+ top: 13px;
+ }
+ .file-upload-browse-btn {
+ height: 100%;
+ padding: 7px 6px;
+ z-index: 1;
}
- }
+ }
- .archive-warning {
- font-family: @font-opensans-bold;
- color: @main_color_i;
}
-
- .no-workflow-warning {
- font-family: @font-opensans-bold;
- color: @sdcui_color_red;
- float: right;
+ }
+
+ .archive-warning {
+ font-family: @font-opensans-bold;
+ color: @main_color_i;
+ }
+
+ .no-workflow-warning {
+ font-family: @font-opensans-bold;
+ color: @sdcui_color_red;
+ float: right;
+ }
+
+ .input-param-title {
+ font-size: 16px;
+ text-transform: uppercase;
+ }
+
+ .separator-buttons {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 10px;
+
+ .add-param-link {
+ &:not(.disabled):hover {
+ cursor: pointer;
+ }
}
- .input-param-title {
- font-size: 16px;
- text-transform: uppercase;
+ .tab {
+ width: 84px;
+ text-align: center;
}
+ }
- .separator-buttons {
- display: flex;
- justify-content: space-between;
- margin-top: 10px;
+ .generic-table {
+ max-height: 244px;
+ min-height: 91px;
+ background: @main_color_p;
+
+ .header-row .header-cell {
+ .info-icon {
+ float: right;
+ position: relative;
+ top: 2px;
+ }
+
+ /deep/ .tooltip-inner {
+ padding: 2px;
+ max-width: 270px;
+ font-size: 11px;
+ }
+
+ &.remove {
+ padding: 10px;
+ font-size: 10px;
+ }
+ }
- .add-param-link {
- &:not(.disabled):hover {
- cursor: pointer;
- }
+ .data-row {
+ &.empty-msg {
+ .bold-message {
+ font-family: @font-opensans-bold;
}
- .tab {
- width: 84px;
- text-align: center;
+ :first-child {
+ &:not(:only-child) {
+ margin: 6px 0;
+ }
}
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 14px;
+ }
}
- .generic-table {
- max-height: 244px;
- min-height: 91px;
- background: @main_color_p;
-
- .header-row .header-cell {
- .info-icon {
- float: right;
- position: relative;
- top: 2px;
- }
- /deep/ .tooltip-inner {
- padding: 2px;
- max-width: 270px;
- font-size: 11px;
- }
- &.remove {
- padding: 10px;
- font-size: 10px;
- }
- }
+ /deep/ .cell {
+ &.field-name, &.field-type {
+ flex: 1;
+ }
- .data-row {
- &.empty-msg {
- .bold-message {
- font-family: @font-opensans-bold;
- }
-
- :first-child {
- &:not(:only-child) {
- margin: 6px 0;
- }
- }
-
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 14px;
- }
+ &.field-property {
+ &, &:last-child {
+ flex: 1;
}
+ }
- /deep/ .cell {
- &.field-name, &.field-type {
- flex: 1;
- }
-
- &.field-property {
- &, &:last-child {
- flex: 1;
- }
- }
-
- &.field-mandatory {
- flex: 0.5;
- text-align: center;
- }
-
- &.remove {
- min-width: 40px;
- max-width: 40px;
- }
- }
+ &.field-mandatory {
+ flex: 0.5;
+ text-align: center;
+ }
+ &.remove {
+ min-width: 40px;
+ max-width: 40px;
+ }
}
+
+ }
}
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
index 5447fe532b..76cc79e5e7 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -1,53 +1,53 @@
@import '../../../../../../assets/styles/variables.less';
.remove {
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
- svg-icon {
- position: relative;
- right: -3px;
+ .svg-icon {
+ position: relative;
+ right: -3px;
- &:hover {
- cursor: pointer;
- }
+ &:hover {
+ cursor: pointer;
}
+ }
}
.cell {
- min-height: 50px;
- padding: 10px;
- display: flex;
- align-items: center;
-
- > * {
- flex-basis: 100%;
- }
-
- /deep/ select {
- height: 30px;
- }
-
- input {
- height: 30px;
- border: none;
- padding-left: 10px;
- }
-
- select {
- width: 100%;
+ min-height: 50px;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+
+ > * {
+ flex-basis: 100%;
+ }
+
+ /deep/ select {
+ height: 30px;
+ }
+
+ input {
+ height: 30px;
+ border: none;
+ padding-left: 10px;
+ }
+
+ select {
+ width: 100%;
+ }
+
+ &.field-property {
+ &:last-child {
+ flex: 1;
}
- &.field-property {
- &:last-child {
- flex: 1;
- }
-
- .no-properties-error {
- color: @func_color_q;
- font-style: italic;
- }
+ .no-properties-error {
+ color: @func_color_q;
+ font-style: italic;
}
+ }
}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index a1309aba61..dacc3303f6 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -1,5 +1,6 @@
@import '../../../../assets/styles/variables';
@import '../../../../assets/styles/mixins';
+
@ng2-shadow-gray: #f8f8f8;
@ng2-light-gray: #eaeaea;
@ng2-medium-gray: #d2d2d2;
@@ -7,210 +8,227 @@
@ng2-dark-gray: #5a5a5a;
@ng2-shadow-blue: #e6f6fb;
@ng2-bold-blue: #009fdb;
-@ng2-success-green:#4ca90c;
-@ng2-title-font-size:16px;
+@ng2-success-green: #4ca90c;
+@ng2-title-font-size: 16px;
@ng2-text-font-size: 14px;
-:host { display:block; height: 100%; }
-/deep/ tabs {display:flex; flex-direction:column; height:100%; }
+:host {
+ display: block;
+ height: 100%;
+}
+
+/deep/ .tabs {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
.properties-assignment-page {
+ height: 100%;
+ font-family: @font-opensans-regular;
+
+ .main-content {
+ display: flex;
+ flex-direction: row;
height: 100%;
- font-family: @font-opensans-regular;
+ }
- .main-content {
- display:flex;
- flex-direction:row;
- height: 100%;
- }
+ .left-column {
+ flex: 1 0 500px;
+ position: relative;
+ min-width: 930px;
- .left-column {
- flex: 1 0 500px;
- position: relative;
- min-width:930px;
+ /deep/ .tabs {
+ width: 33%;
+ text-align: center;
+ }
- /deep/ .tabs {
- width:33%;
- text-align:center;
- }
+ /deep/ .tab {
+ padding: 12px;
+ flex: 1;
+ font-family: @font-opensans-regular;
+
+ &.active {
+ color: #009fdb;
+ border-color: #d2d2d2;
+ border-top: solid 4px #009fdb;
+ background-color: white;
+ padding-top: 9px;
+ font-family: @font-opensans-medium;
+ }
+
+ .tab-indication {
+ background-color: #4ca90c;
+ border: solid 2px #fff;
+ border-radius: 50%;
+ font-size: 12px;
+ }
+ }
- /deep/ .tab {
- padding: 12px;
- flex: 1;
- font-family: @font-opensans-regular;
-
- &.active {
- color:#009fdb;
- border-color: #d2d2d2;
- border-top: solid 4px #009fdb;
- background-color: white;
- padding-top:9px;
- font-family: @font-opensans-medium;
- }
-
- .tab-indication {
- background-color:#4ca90c;
- border:solid 2px #fff;
- border-radius:50%;
- font-size:12px;
- }
- }
+ .header {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ }
- .header {
- position:absolute;
- top:0;
- right:0;
- display: flex;
+ .search-filter-container {
+ display: flex;
+ flex-direction: row;
+
+ .search-box {
+ border: 1px solid @ng2-medium-gray;
+ border-radius: 3px;
+ height: 32px;
+ margin: 0;
+ padding: 2px 20px 4px 10px;
+ outline: none;
+ font-style: italic;
+ color: @ng2-med-dark-gray;
+ width: auto;
+
+ &::-moz-placeholder {
+ color: @ng2-med-dark-gray;
}
- .search-filter-container{
- display:flex;
- flex-direction:row;
-
- .search-box {
- border: 1px solid @ng2-medium-gray;
- border-radius: 3px;
- height: 32px;
- margin: 0;
- padding: 2px 20px 4px 10px;
- outline: none;
- font-style: italic;
- color:@ng2-med-dark-gray;
- width: auto;
-
- &::-moz-placeholder { color:@ng2-med-dark-gray;}
- &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
- }
-
- .search-icon {
- background-position: -48px -3137px;
- width: 14px;
- height: 14px;
- position: absolute;
- left:170px;
- top: 8px;
- }
-
- &.without-filter {
- margin-right:10px;
- .search-icon {
- right: 4px;
- }
- }
-
- }
-
- .clear-filter{
- cursor: pointer;
- color:#009fdb;
- font-family: @font-opensans-medium-italic;
- text-decoration: underline;
- padding-right:10px;
- font-size:12px;
+ &::-webkit-input-placeholder {
+ color: @ng2-med-dark-gray;
}
-
- .declare-button{
- &:not(:last-of-type) {
- margin-right: 10px;
- }
+ }
+
+ .search-icon {
+ background-position: -48px -3137px;
+ width: 14px;
+ height: 14px;
+ position: absolute;
+ left: 170px;
+ top: 8px;
+ }
+
+ &.without-filter {
+ margin-right: 10px;
+
+ .search-icon {
+ right: 4px;
}
+ }
- .main-tabs-section {
- position: relative;
+ }
- .main-tabs-section-buttons {
- position: absolute;
- top: 45px;
- right: 0;
- padding: 4px;
- }
- }
+ .clear-filter {
+ cursor: pointer;
+ color: #009fdb;
+ font-family: @font-opensans-medium-italic;
+ text-decoration: underline;
+ padding-right: 10px;
+ font-size: 12px;
}
- .right-column {
- display:flex;
- flex:0 0 350px;
- flex-direction:column;
- margin: 0px 0 0 1em;
- overflow-x:auto;
- .add-btn{
-
- align-self: flex-end;
- margin-top: 10px;
- margin-bottom: 19px;
- }
- /deep/ .tabs {
- border-bottom: solid 1px #d0d0d0;
- }
+ .declare-button {
+ &:not(:last-of-type) {
+ margin-right: 10px;
+ }
+ }
- /deep/ .tab {
- flex: none;
- padding: 8px 20px 0;
- font-size: 14px;
- line-height:30px;
- font-family: @font-opensans-regular;
+ .main-tabs-section {
+ position: relative;
- &.active {
- font-family: @font-opensans-medium;
- }
- }
+ .main-tabs-section-buttons {
+ position: absolute;
+ top: 45px;
+ right: 0;
+ padding: 4px;
+ }
}
+ }
+
+ .right-column {
+ display: flex;
+ flex: 0 0 350px;
+ flex-direction: column;
+ margin: 0px 0 0 1em;
+ overflow-x: auto;
+
+ .add-btn {
- .hierarchy-tabs {
- flex: 0 0 40px;
+ align-self: flex-end;
+ margin-top: 10px;
+ margin-bottom: 19px;
}
- .gray-border {
- border: 1px solid #ddd;
+ /deep/ .tabs {
+ border-bottom: solid 1px #d0d0d0;
}
- /deep/ .white-sub-header {
- background-color: #fffefe;
- box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
- border-bottom: #d2d2d2 solid 1px;
- font-size:14px;
- text-align:left;
- flex:0 0 auto;
- padding: 10px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- .a_13_r;
- text-transform: uppercase;
-
- &.hierarchy-header {
- padding-left:20px;
- &.selected {
- background-color: #e6f6fb;
- }
- }
+ /deep/ .tab {
+ flex: none;
+ padding: 8px 20px 0;
+ font-size: 14px;
+ line-height: 30px;
+ font-family: @font-opensans-regular;
+ &.active {
+ font-family: @font-opensans-medium;
+ }
}
-
- .hierarchy-nav-container {
- display:flex;
- flex-direction: column;
- height: 100%;
+ }
+
+ .hierarchy-tabs {
+ flex: 0 0 40px;
+ }
+
+ .gray-border {
+ border: 1px solid #ddd;
+ }
+
+ /deep/ .white-sub-header {
+ background-color: #fffefe;
+ box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
+ border-bottom: #d2d2d2 solid 1px;
+ font-size: 14px;
+ text-align: left;
+ flex: 0 0 auto;
+ padding: 10px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ .a_13_r;
+ text-transform: uppercase;
+
+ &.hierarchy-header {
+ padding-left: 20px;
+
+ &.selected {
+ background-color: #e6f6fb;
+ }
}
- .hierarchy-header {
+ }
- span{
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 290px;
- }
- }
+ .hierarchy-nav-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
- .hierarchy-nav {
- flex:1;
- overflow:auto;
- display: grid;
- margin-top: 1em;
- margin-left: 1em;
- font-size: 12px;
- padding-top: 1em;
+ .hierarchy-header {
+
+ span {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ max-width: 290px;
}
+ }
+
+ .hierarchy-nav {
+ flex: 1;
+ overflow: auto;
+ display: grid;
+ margin-top: 1em;
+ margin-left: 1em;
+ font-size: 12px;
+ padding-top: 1em;
+ }
}
diff --git a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less
index 83481c1d74..6b77b18fcd 100644
--- a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less
+++ b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less
@@ -7,14 +7,17 @@
.sdc-modal-top-bar {
display: flex;
justify-content: space-between;
+
.operation-name {
text-transform: capitalize;
font-family: @font-opensans-bold;
font-size: 18px;
}
}
+
.expand-collapse-all {
display: flex;
+
.expand-all, .collapse-all {
color: @main_color_a;
border-bottom: solid 1px @main_color_a;
@@ -24,6 +27,7 @@
width: max-content;
line-height: 24px;
}
+
.separator-line {
border-left: 1px solid @main_color_o;
margin: 0 7px;
@@ -35,16 +39,20 @@
padding-top: 10px;
height: 390px;
overflow: auto;
+
&.no-inputs {
border: 1px solid @main_color_o;
}
+
.no-inputs-text {
text-align: center;
padding: 30px;
opacity: 0.7;
}
+
.i-sdc-form-content-operation-input-box {
border: solid 1px @main_color_o;
+
&:not(:last-of-type) {
margin-bottom: 17px;
}
@@ -56,23 +64,28 @@
padding-left: 10px;
height: 38px;
font-size: 14px;
+
.expand-collapse-icon {
.sprite-new;
.expand-collapse-plus-icon;
vertical-align: middle;
+
&.expanded {
.expand-collapse-minus-icon;
}
}
+
.operation-input-name {
margin-left: 10px;
margin-right: 7px;
font-family: @font-opensans-bold
}
+
.operation-input-type {
.type-text {
font-family: @font-opensans-bold;
}
+
.type-val {
font-family: @font-opensans-regular;
}
@@ -83,29 +96,34 @@
&.with-top-border, .separator {
border-top: 1px solid @main_color_o;
}
+
background-color: @tlv_color_t;
display: flex;
padding: 19px 20px 12px 19px;
+
.operation-input-section-col {
flex: 45%;
+
&:not(:last-of-type) {
margin-right: 38px;
}
+
.i-sdc-form-label {
font-size: 12px;
font-family: @font-opensans-bold;
}
&.assigned-value {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
+
.i-sdc-form-label {
margin-bottom: 0;
}
}
- /deep/ ui-element-dropdown select, select,
- /deep/ dynamic-element input {
+ /deep/ .ui-element-dropdown select, select,
+ /deep/ .dynamic-element input {
height: 30px;
}
@@ -120,18 +138,22 @@
/deep/ .operation-input-complex-type-section {
background-color: @tlv_color_t;
padding: 0 20px 12px 19px;
+
.separator {
border-top: 1px solid @main_color_o;
padding-bottom: 19px;
}
+
.static-values-title-for-complex-type {
font-size: 14px;
font-family: @font-opensans-bold;
margin-bottom: 10px;
}
+
.flat-children-container {
border: solid 1px @main_color_o;
}
+
.dynamic-property {
.dynamic-property-row {
background-color: @tlv_color_t;
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less
index e03b73c8c0..9d00d86142 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less
@@ -13,6 +13,7 @@
.i-sdc-form-item {
width: 250px;
+
&.operation {
width: 60px;
}
@@ -21,20 +22,25 @@
.rule-builder-content {
display: flex;
align-items: flex-end;
+
.rule-input-field {
flex: 1;
+
&:not(:last-of-type) {
margin-right: 20px;
}
- &.operator{
+
+ &.operator {
width: 55px;
flex: 0 1 auto;
}
+
&.assigned-value-field {
margin-bottom: 10px;
}
- /deep/ ui-element-dropdown select,
- /deep/ ui-element-input input {
+
+ /deep/ .ui-element-dropdown select,
+ /deep/ .ui-element-input input {
height: 30px;
}
}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less
index 4845f4f606..ae28aa36ae 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/activity-log/activity-log.component.less
@@ -1,8 +1,9 @@
.sdc-filter-bar-wrapper {
- sdc-filter-bar {
+ .sdc-filter-bar {
flex: 0 0 30%;
}
+
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
-} \ No newline at end of file
+}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less
index 4b7a1e7e9f..5213babd9e 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/deployment-page.component.less
@@ -1,5 +1,6 @@
@import './../../../../../assets/styles/variables.less';
@import './../../../../../assets/styles/override.less';
+
.deployment-page {
width: 100%;
height: 100%;
@@ -7,16 +8,18 @@
/deep/ .sdc-tabs {
height: 100%;
}
+
/deep/ .sdc-tabs-list {
position: absolute;
top: 22px;
right: 303px;
background-color: @sdcui_color_silver;
- svg-icon-label {
+ .svg-icon-label {
vertical-align: middle;
}
}
+
/deep/ .sdc-tab-content {
height: 100%;
}
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
index 269ca0aee0..e5415a323b 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
@@ -1,4 +1,5 @@
@import './../../../../../../../../assets/styles/variables.less';
+
.sdc-hierarchy-tab {
padding: 15px 0 0 0;
background-color: #f8f8f8;
@@ -67,7 +68,7 @@
}
}
- sdc-accordion.selected {
+ .sdc-accordion.selected {
/deep/ .expand-collapse-container {
.sdc-accordion-header {
background-color: @main_color_a;
@@ -102,6 +103,7 @@
border: 1px solid @main_color_a;
border-top: 4px solid @main_color_a;
box-shadow: 0.3px 1px 2px rgba(24, 24, 25, 0.32);
+
.module-data {
color: @main_color_a;
padding: 10px 0 10px 0;
@@ -139,7 +141,7 @@
height: 20px;
padding-left: 12px;
- svg-icon {
+ .svg-icon {
padding-top: 3px;
fill: @main_color_s;
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
index b630881fdc..442eb537ec 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
@@ -2,7 +2,8 @@
.ngx-datatable {
> div {
min-height: 500px;
- datatable-body {
+
+ .datatable-body {
max-height: max-content;
}
}
@@ -18,7 +19,7 @@
flex-grow: 5;
}
- .w-sdc-distribution-view-title{
+ .w-sdc-distribution-view-title {
color: #191919;
font-family: OpenSans-Regular, sans-serif;
font-size: 14px;
@@ -38,47 +39,47 @@
max-height: 150px;
}
- .distributionIDBlock {
- display: inline-block;
- }
+.distributionIDBlock {
+ display: inline-block;
+}
- .expand-collapse-cell {
- display: inline-block;
- }
+.expand-collapse-cell {
+ display: inline-block;
+}
- .statusIcon {
- display: inline-block;
- margin-right: 10px;
- }
+.statusIcon {
+ display: inline-block;
+ margin-right: 10px;
+}
- .btnMarkAsDistributed {
- float: right;
- background-color: #E5F3FF;
- border: 1px solid #8DCCD5;
- width: 55px;
- height: 21px;
- text-align: center;
- }
+.btnMarkAsDistributed {
+ float: right;
+ background-color: #E5F3FF;
+ border: 1px solid #8DCCD5;
+ width: 55px;
+ height: 21px;
+ text-align: center;
+}
- .distributionRowContainer{
- background-color: #eaeaea;
- text-align: center;
- }
+.distributionRowContainer {
+ background-color: #eaeaea;
+ text-align: center;
+}
- .distributionRowLabel {
- overflow: hidden;
- padding-top: 10px;
- color: #000000;
- font-family: OpenSans-Semibold, sans-serif;
- font-size: 12px;
- font-weight: bold;
- }
+.distributionRowLabel {
+ overflow: hidden;
+ padding-top: 10px;
+ color: #000000;
+ font-family: OpenSans-Semibold, sans-serif;
+ font-size: 12px;
+ font-weight: bold;
+}
- .distributionRowValue {
- color: #263d4d;
- font-family: OpenSans-Regular, sans-serif;
- font-size: 14px;
- }
+.distributionRowValue {
+ color: #263d4d;
+ font-family: OpenSans-Regular, sans-serif;
+ font-size: 14px;
+}
.ellipsisCell {
width: 92%;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.less b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.less
index 3e91ae4689..4d00c8ef4c 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.less
@@ -5,7 +5,7 @@
margin-bottom: 10px;
}
-.add-attr-icon{
+.add-attr-icon {
cursor: pointer;
}
@@ -26,7 +26,7 @@
margin-bottom: 10px;
}
-sdc-checkbox {
+.sdc-checkbox {
margin-top: 20px;
}