diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss')
| -rw-r--r-- | openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss | 284 |
1 files changed, 184 insertions, 100 deletions
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index 657bb544a7..37068975a2 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -1,153 +1,237 @@ -.software-product-attachments { + +.vsp-attachments-view { + position: relative; + #attachments-tabs { + .nav-tabs { + background-color: $tlv-gray; + box-shadow: none; + border-bottom: 1px solid $light-gray; + & > li { + & > a { + font-size: 24px; + font-weight: lighter; + padding-left: 0; + padding-right: 0; + margin-right: 40px; + }; + &.active > a {color: $blue;}; + } + } + } + .attachments-view-controllers { + position: absolute; + right: 40px; + top: 15px; + display: flex; + .icon-label { + color: $dark-gray; + } + + .go-to-overview-icon { + .icon-label { + color: $blue; + } + &.disabled { + .icon-label { + color: $gray; + } + } + } + + .icon-component { + margin-right: 30px; + + } + + input[type="file"] { + visibility: hidden; + width: 1px; + padding: 0; + margin-left: -1px; + } + } +} + +.vsp-attachments-heat-validation { @extend .body-1; - width: 100%; - height: 100%; display: flex; - - .software-product-attachments-tree { + .svg-icon.exclamation-triangle-line { + fill: $orange; + width: 15px; + height: 15px; + &.large { + width: 20px; + height: 20px; + } + } + .validation-tree-section { display: flex; - border-right: 1px solid $light-gray; - margin: 0px; - padding: 5px 3px 10px 3px; + width: 400px; + justify-content: space-between; + } + .vsp-attachments-heat-validation-tree { + @extend .flex-column; + margin: 0; overflow: auto; height: 100%; - + .attachments-tree-header { + display: flex; + justify-content: space-between; + height: 55px; + align-items: center; + &.header-selected { + background: $tlv-gray; + } + .header-icon { + top: -3px; + position: relative; + margin-left: 20px; + } + .tree-header-title-text { + @extend .heading-4-medium; + padding-left: 32px; + cursor: pointer; + &.tree-header-title-selected{ + color: $blue; + } + } + .tree-header-title { + display: flex; + } + } + .counters { + display: flex; + justify-content: space-between; + z-index: 1; + padding-right: 20px; + .counter { + display: flex; + &:first-child { + margin-right: 20px; + } + &:only-child { + margin-right: 0; + } + .svg-icon-wrapper { + margin-right: 5px; + } + .counter-icon { + margin-right: 5px; + } + .error-text, .warning-text { + @extend .body-3; + &.large { + @extend .heading-4-medium; + } + } + } + } .tree-wrapper { flex: 1 1; position: relative; padding-bottom: 10px; + @-moz-document url-prefix() { + .tree-block-inside { + top: 0; + position: relative; + } + } .tree-block-inside { - padding-left: 17px; - padding-top: 8px; - padding-bottom: 1px; + padding-left: 20px; .tree-node-row { cursor: default; white-space: nowrap; - &.tree-node-selected::before { + display: flex; + justify-content: space-between; + height: 40px; + align-items: center; + .svg-icon.chevron-down, .svg-icon.chevron-up { + height: 10px; + width: 10px; + } + + &:after { + border-top: 1px solid $tlv-gray; + height: 40px; position: absolute; left: 0; right: 0; - height: 20px; - display: inline-block; content: ' '; - background-color: $light-gray; } - - &.tree-node-clicked::before { + @-moz-document url-prefix() { + &:after { + top: 0; + } + } + &.tree-node-selected::before { position: absolute; - left: 4px; - right: 4px; + left: 0; + right: 0; height: 20px; display: inline-block; content: ' '; - font-weight: bold; - background-color: $white; + background-color: $tlv-gray; + color: $blue; } + &.tree-node-clicked { + color: $blue; + &:after { + background: $tlv-gray; + height: 40px; + position: absolute; + left: 0; + right: 0; + content: ' '; + } + } + .tree-node-name { + cursor: pointer; + } + .name-section { + z-index: 1; + flex: 1; + @include ellipsis(auto); + } .tree-node-expander { position: relative; display: inline-block; cursor: pointer; - .fa { - position: absolute; - left: -7px; - top: -11px; - @include transition(transform 0.3s); - } - &.tree-node-expander-collapsed .fa { - @include transform-rotate(-90); - } } - .tree-node-icon { margin: 0 7px; - color: $text-black; - opacity: .5; - .tree-node-validation-error::after { - content: "!"; - font-weight: bold; - position: absolute; - color: $red; - font-size: large; - left: -7px; - bottom: -5px; - } - } - - .error-status { - color: $red; - &.error-status-selected { - font-weight: bold; - } - &.error-status-hovered { - font-weight: bold; - background-color: $blue; - } - } - - .tree-element-text { - @extend %noselect; - position: relative; - padding-right: 5px; - &.error-status-selected { - font-weight: bold; - } } } - } } } - .software-product-attachments-separator { - border: 1px solid $tlv-light-gray; + .vsp-attachments-heat-validation-separator { + border-left: 1px solid $tlv-light-gray; height: 100%; width: 5px; cursor: e-resize; } - .software-product-attachments-error-list { - text-align: center; - margin-top: 12px; - display: flex; - align-content: flex-start; - flex-direction: column; - padding-left: 70px; - padding-right: 50px; + .message-board-section { + @extend .flex-column; + padding-left: 25px; + padding-top: 10px; + padding-right: 60px; overflow: auto; margin-bottom: 70px; .error-item { - &.selected { - background-color: $light-gray; - } - &.clicked { - color: $blue; - } - &.shifted { - margin-top: 20px; - } - text-align: left; - .error-item-file-name { - font-weight: bold; - } + display: flex; + margin: 10px 0; .error-item-file-type { + margin-left: 15px; + } + .error-file-name { + @extend .body-1-medium; margin-right: 5px; - &.strong { - font-weight: bold; - } - &.ERROR { - color: $red; - } - &.WARNING { - color: $yellow; - } } } - .error-item:hover { - cursor: default; - background-color: $tlv-hover; - } } } |