diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less')
-rw-r--r-- | catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less | 206 |
1 files changed, 157 insertions, 49 deletions
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less index 435502066e..b79e2f580c 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less +++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less @@ -1,88 +1,196 @@ @import '../../../../assets/styles/variables.less'; +@import '../../../../assets/styles/override.less'; .interface-operation { - .add-btn { + font-size: 14px; + + .top-add-btn { position: relative; top: -31px; text-transform: uppercase; font-size: 14px; + font-family: @font-opensans-medium; } - a:not(.disabled) { - &:hover { - cursor: pointer; + .link { + color: @sdcui_color_blue; + text-decoration: underline; + font-family: @font-opensans-regular; + + &:not(.disabled) { + &:not(.empty-list-add-btn) { + &:hover { + color: @sdcui_color_dark-blue; + cursor: pointer; + } + } } } .operation-list { border-top: 1px solid @main_color_o; - padding-top: 25px; + padding-top: 5px; - .operation-row { + .empty-list-container { width: 100%; - border: 1px solid @main_color_o; display: flex; - justify-content: space-between; - align-items: center; - height: 100px; + justify-content: center; - &:hover { - border-color: @main_color_c; - cursor: pointer; + .empty-list-add-btn { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + border: 1px solid @main_color_o; + margin-top: 50px; + + height: 229px; + width: 480px; + + &.disabled { + pointer-events: none; + } + + &:hover { + &:not(.disabled) { + border: 1px solid @sdcui_color_blue; + cursor: pointer; + } + } + + .button-text { + margin-top: 9px; + font-family: @font-opensans-medium; + font-size: 16px; + text-transform: uppercase; + color: @sdcui_color_blue; + } } + } + + .expand-collapse { + margin-top: 4px; + margin-bottom: 18px; + color: @sdcui_color_light-gray; + } + + .interface-row { + width: 100%; + margin-top: 13px; + border-bottom: 1px solid @main_color_o; + padding-left: 4px; + min-height: 37px; + + + .interface-accordion { + cursor: pointer; - &:not(:first-child) { - margin-top: 20px; + .chevron-container { + position: relative; + margin-right: 5px; + + &.isCollapsed { + right: -6px; + top: 0; + * { + transform: rotate(270deg); + } + } + &:not(.isCollapsed) { + top: 6px; + } + * { + &:hover { + cursor: pointer; + } + } + } + .interface-name { + font-size: 18px; + font-family: @font-opensans-bold; + margin-bottom: 15px; + } } - .operation-info-container { - height: 100%; - display: flex; - align-items: center; - margin-right: 60px; + .generic-table { + margin-bottom: 24px; + margin-top: 10px; + margin-left: 22px; + font-size: 14px; - .operation-title, .operation-description { - display: flex; - align-items: center; + .header-row, .data-row { + .cell { + &.field-description { + flex: 2.5; + } - .operation-text { - overflow: hidden; - margin-bottom: 0; - max-height: 5rem; + &.field-actions { + flex-basis: 72px; + display: flex; + justify-content: center; + align-items: center; + } } } - .operation-title { - flex-shrink: 0; - width: 200px; - height: calc(100% - 13px); - border-right: 1px solid @main_color_o; - margin: 4px 0; - padding: 0 30px; + .header-row { + .cell { + background: @sdcui_color_silver; - .operation-text { - white-space: nowrap; - text-overflow: ellipsis; + &.field-actions { + font-size: 10px; + } } } - .operation-description { - padding-left: 30px; - text-align: left; - font-family: @font-opensans-regular; + .data-row { + cursor: pointer; + + &:hover { + background: @sdcui_color_light-silver; - .operation-text { - word-break: break-word; + .cell { + &.field-name { + color: @sdcui_color_dark-blue; + } + } } + + &:not(:hover) { + .field-actions { + visibility: hidden; + } + } + + .cell { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + + &.field-description { + &:not(.collapsed) { + white-space: normal; + } + &.collapsed { + text-overflow: clip; + } + .more-or-less { + margin-left: 5px; + } + } + + &.field-actions { + .delete-action { + position: relative; + top: 2px; + } + } + } + } } - .operation-dumbo { - padding-right: 20px; - display: flex; - flex-direction: column; - align-items: left; - } } } } |