diff options
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; } |