From 4192e3caac2662624a7368252a3bc5619539caa7 Mon Sep 17 00:00:00 2001 From: ojasdubey Date: Mon, 18 Mar 2019 14:15:03 +0530 Subject: Service Consumption FE Service consumption feature frontend implementation Change-Id: I68e1b507b1d4379b271fe97428ff8ae86dc11b4c Issue-ID: SDC-1990 Signed-off-by: ojasdubey --- .../service-consumption-editor.component.less | 143 +++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less (limited to 'catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less') 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 new file mode 100644 index 0000000000..83481c1d74 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less @@ -0,0 +1,143 @@ +@import './../../../../assets/styles/variables.less'; +@import './../../../../assets/styles/variables-old.less'; +@import './../../../../assets/styles/sprite.less'; +@import './../../../../assets/styles/mixins_old.less'; + +.service-consumption-editor { + .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; + font-size: 12px; + font-family: @font-opensans-regular; + cursor: pointer; + width: max-content; + line-height: 24px; + } + .separator-line { + border-left: 1px solid @main_color_o; + margin: 0 7px; + } + } + + .i-sdc-form-content-operation-inputs-content { + margin-top: 6px; + 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; + } + + .i-sdc-form-content-operation-input-box-title { + .hand; + display: flex; + align-items: center; + 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; + } + } + } + + .operation-input-section-row { + &.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; + .i-sdc-form-label { + margin-bottom: 0; + } + } + + /deep/ ui-element-dropdown select, select, + /deep/ dynamic-element input { + height: 30px; + } + + select { + margin-top: 2px; + border: solid 1px @main_color_o; + } + } + } + + //for complex types + /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; + } + } + } + } + } +} \ No newline at end of file -- cgit 1.2.3-korg