diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic')
6 files changed, 695 insertions, 589 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; } } |