diff options
Diffstat (limited to 'openecomp-ui/resources/scss/components')
14 files changed, 585 insertions, 386 deletions
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss index 5e9418ed7d..7a5b77b58c 100644 --- a/openecomp-ui/resources/scss/components/_activityLog.scss +++ b/openecomp-ui/resources/scss/components/_activityLog.scss @@ -23,6 +23,7 @@ $message-info-icon-size: 16px; .list-editor-view-list { border: 1px solid $light-gray; border-bottom: none; + overflow-y: hidden; } .activity-list-item { display: flex; diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss deleted file mode 100644 index 357a799e93..0000000000 --- a/openecomp-ui/resources/scss/components/_buttons.scss +++ /dev/null @@ -1,30 +0,0 @@ -.primary-btn{ - border: 1px solid; - border-color: $blue; - color: $blue; - @extend .body-1-semibold; - text-align: center; - padding: 7px; - border-radius: 5px; - cursor: pointer; - align-self: center; - background-color: $white; - .primary-btn-text { - width: 100%; - } - &:hover { - color: $blue; - border-color: $blue; - background-color: $tlv-hover; - &:active { - color: $blue; - border-color: $blue; - } - } - - &:focus:not(:hover) { - color: $blue; - border-color: $blue; - background-color: $white; - } -} diff --git a/openecomp-ui/resources/scss/components/_commitModal.scss b/openecomp-ui/resources/scss/components/_commitModal.scss new file mode 100644 index 0000000000..e7f5d28933 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_commitModal.scss @@ -0,0 +1,10 @@ + +.comment-commit-form { + .commit-modal-text { + padding-bottom: 30px; + } + .validation-buttons .sdc-button-default{ + min-width: 94px; + width: auto; + } +}
\ No newline at end of file diff --git a/openecomp-ui/resources/scss/components/_dropzone.scss b/openecomp-ui/resources/scss/components/_dropzone.scss index cad752d415..2479ae7f0c 100644 --- a/openecomp-ui/resources/scss/components/_dropzone.scss +++ b/openecomp-ui/resources/scss/components/_dropzone.scss @@ -6,3 +6,26 @@ opacity: 0.5; } } +.file-upload-box { + @extend .body-1; + display: flex; + text-align: center; + flex-direction: column; + justify-content: center; + border: 2px dashed $light-gray; + padding-top: 20px; + padding-bottom: 20px; + width: 382px; + align-items: center; + .upload-btn { + padding: 4px 20px; + } + .drag-text { + color: $blue; + @extend .body-1-semibold; + } + .or-text { + margin-top: 10px; + margin-bottom: 10px; + } +} diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss index 4353ab39e8..0c7d82e31c 100644 --- a/openecomp-ui/resources/scss/components/_dualListBox.scss +++ b/openecomp-ui/resources/scss/components/_dualListBox.scss @@ -8,10 +8,7 @@ .dual-search-multi-select-section { flex: 1; - .dual-text-box-search-title, .dual-list-box-multi-select-text { - @extend .body-1; - color: $dark-gray; - } + .dual-text-box-search { margin: 5px 0 30px 0; } @@ -30,6 +27,9 @@ padding: 4px 0 4px 10px; } } + option:checked { + background: $blue linear-gradient(0deg, $blue 0%, $blue 100%); + } } } .dual-list-options-bar { diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss index b662ce873c..58e843047f 100644 --- a/openecomp-ui/resources/scss/components/_forms.scss +++ b/openecomp-ui/resources/scss/components/_forms.scss @@ -1,8 +1,8 @@ .section-title { @extend .heading-3-semibold; - padding: 50px 0 30px 0; + padding: 50px 0 20px 0; &:first-child { - padding: 0 0 30px 0; + padding-top: 0; } } diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss index 9a76f97546..f210b64df6 100644 --- a/openecomp-ui/resources/scss/components/_grid.scss +++ b/openecomp-ui/resources/scss/components/_grid.scss @@ -1,66 +1,71 @@ -$gridItemSpace: 15%; - .grid-section { - &:not(:last-of-type) { - padding-bottom: 30px; - } - .grid-items { - display: flex; - flex-direction: row; - flex-wrap: wrap; - } - - %grid-col-base { - flex-shrink: 0; - display: flex; - } - - .grid-item { - flex: 1; - display: flex; - flex-direction: column; - } - - .grid-item-stretch { - @extend .grid-item; - & *:last-child { - flex: 1; - display: flex; - flex-direction: column; - } - } + $gridItemSpace: 15%; - .grid-col-1 { - @extend %grid-col-base; - flex-basis: 25%; - &:after { - flex-basis: $gridItemSpace; + @mixin gridCol($numOfCols, $flexBasis) { + .#{grid-col- + $numOfCols} { + @extend %grid-col-base; + flex-basis: $flexBasis; + &:not(.last-col-in-row):after { + flex-basis: $gridItemSpace / $numOfCols; content: ' '; } - } + } + } - .grid-col-2 { - @extend %grid-col-base; - flex-basis: 50%; - &:after { - flex-basis: $gridItemSpace / 2; - content: ' '; - } - } - .grid-col-3 { - @extend %grid-col-base; - flex-basis: 75%; - &:after { - flex-basis: $gridItemSpace / 3; - content: ' '; + @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) { + .#{grid-col- + $numOfCols} { + @extend %grid-col-base; + &:not(.last-col-in-row) { + flex-basis: $flexBasis; + margin-right: 5%; } - } - .grid-col-4 { - @extend %grid-col-base; - flex-basis: 100%; - &:after { - flex-basis: $gridItemSpace / 4; - content: ' '; + &.last-col-in-row { + flex-basis: $flexBasisLast; } - } + } + } + + &:not(:last-of-type) { + padding-bottom: 30px; + } + + .grid-items { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + %grid-col-base { + flex-shrink: 0; + display: flex; + } + + .grid-item { + flex: 1; + display: flex; + flex-direction: column; + } + + .grid-item-stretch { + @extend .grid-item; + & *:last-child { + flex: 1; + display: flex; + flex-direction: column; + } + } + + &.has-last-col-set { + @include gridColWithLastColumn(1, 21%, 22%); + @include gridColWithLastColumn(2, 47%, 48%); + @include gridColWithLastColumn(3, 73%, 74%); + @include gridColWithLastColumn(4, 100%, 100%); + } + + &:not(.has-last-col-set) { + @include gridCol(1, 25%); + @include gridCol(2, 50%); + @include gridCol(3, 75%); + @include gridCol(4, 100%); + } } diff --git a/openecomp-ui/resources/scss/components/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss deleted file mode 100644 index c80055d055..0000000000 --- a/openecomp-ui/resources/scss/components/_icon.scss +++ /dev/null @@ -1,164 +0,0 @@ -$image-icon-normal-size: 20px; - -.icon-component { - display: inline-flex; - align-items: center; - - &.clickable:hover { - cursor: pointer; - } - .icon-label { - color: $blue; - } - &.disabled { - .icon-label { - color: $tlv-light-gray; - opacity: 0.7; - } - } - .icon { - width: $image-icon-normal-size; - height: $image-icon-normal-size; - margin: 0 6px; - background-repeat: no-repeat; - - &.trash { - background-image: url($trash-icon); - } - - &.artifacts { - background-image: url($artifacts-icon); - } - - &.base { - background-image: url($base-module-icon); - } - - &.module { - background-image: url($module-icon); - } - - &.pencil { - background-image: url($pencil-icon); - } - - &.check { - background-image: url($check-icon); - width: 30px; - height: 30px; - } - - &.download { - background-image: url($download-icon); - width: 16px; - height: 14px; - } - - &.upload { - background-image: url($upload-icon); - width: 16px; - height: 14px; - } - &.validation-artifacts { - width: 13px; - height: 17px; - position: relative; - top: 3px; - background-image: url($artifacts-regular-icon); - &.selected { - background-image: url($artifacts-selected-icon); - } - } - &.network { - background-image: url($network-icon); - width: 12px; - height: 12px; - &.selected { - background-image: url($network-selected-icon); - } - } - &.validation-other { - background-image: url($others-icon); - width: 12px; - height: 12px; - &.selected { - background-image: url($others-selected-icon); - } - } - &.volume { - width: 15px; - height: 16px; - background-image: url($volume-icon); - &.selected { - background-image: url($volume-selected-icon); - } - } - &.zip { - background-image: url($zip-icon); - height: 23px; - width: 29px; - &.selected { - background-image: url($zip-selected-icon); - } - } - &.heat { - background-image: url($heat-icon); - height: 14px; - width: 16px; - &.selected { - background-image: url($heat-selected-icon); - } - } - &.env { - background-image: url($env-icon); - height: 15px; - width: 16px; - &.selected { - background-image: url($env-selected-icon); - } - } - &.error { - width: 14px; - min-width: 14px; - height: 14px; - background-image: url($error-icon-sm); - } - &.warning { - height: 13px; - width: 15px; - min-width: 15px; - background-image: url($warning-icon-sm); - } - &.error-lg { - width: 17px; - min-width: 17px; - height: 17px; - background-image: url($error-icon-lg); - } - &.warning-lg { - width: 19px; - min-width: 19px; - height: 17px; - background-image: url($warning-icon-lg); - } - &.chevron-up { - background-image: url($chevron_down); - transform: rotate(180deg); - height: 7px; - width: 11px; - } - &.chevron-down { - background-image: url($chevron_down); - height: 7px; - width: 11px; - } - &.go-to-overview { - background-image: url($go-to-overview-icon); - height: 15px; - width: 18px; - &.disabled { - background-image: url($go-to-overview-disabled-icon); - } - } - } -} diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss index c3e9fa6081..354a6a1f70 100644 --- a/openecomp-ui/resources/scss/components/_listEditorView.scss +++ b/openecomp-ui/resources/scss/components/_listEditorView.scss @@ -17,27 +17,6 @@ .list-editor-view-title { @extend .heading-3-semibold; } - .list-editor-view-add-controller { - @extend .body-1-semibold; - color: $blue; - display: table; - cursor: pointer; - position: relative; - padding-top: 0; - padding-bottom: 0; - margin-left: auto; - .list-editor-view-add-title { - display: flex; - } - span { - display: table-cell; - vertical-align: middle; - margin-top:4px; - &:nth-child(2) { - padding-left: 10px; - } - } - } } .list-editor-view-list-scroller { @@ -68,9 +47,6 @@ overflow-wrap: break-word; white-space: initial; - .description { - @include multiline-ellipsis(1.3em, 3); - } .number-field { align-content: center; @@ -82,6 +58,9 @@ line-height: 0.9; } } + .description { + @include multiline-ellipsis(1.3em, 3); + } .text { @extend .body-1; } @@ -105,9 +84,8 @@ } } .svg-icon { + margin-top: 5px; transition: fill .3s; - height: 18px; - width: 18px; fill: $white; } } diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss index daf5025bee..ab4d15fd90 100644 --- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss +++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss @@ -18,9 +18,10 @@ .group-name { @extend .heading-4-semibold; @include ellipsis; - min-height: 56px; + min-height: 70px; display: block; - padding: 18px 12px 13px 40px; + height: 70px; + padding: 24px 12px 13px 40px; background-color: $white; border-bottom: 1px solid $tlv-light-gray; } diff --git a/openecomp-ui/resources/scss/components/_overlay.scss b/openecomp-ui/resources/scss/components/_overlay.scss new file mode 100644 index 0000000000..7c310bf1a6 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_overlay.scss @@ -0,0 +1,26 @@ +.onboarding-overlay { + z-index: 1000; + border: 1px solid $light-gray; + position: absolute; + background-color: $white; + border-radius: 2px; + box-shadow: 0 3px 7px 1px rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + justify-content: space-around; + margin-top: 5px; + margin-left: -86px; + .arrow-up { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + background-color: transparent; + border-bottom: 5px solid $blue; + margin-left: 114px; + margin-top: -5px; + } + .arrow-border { + border-top: 5px solid $blue; + } +}
\ No newline at end of file diff --git a/openecomp-ui/resources/scss/components/_tree.scss b/openecomp-ui/resources/scss/components/_tree.scss new file mode 100644 index 0000000000..e03594ee64 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_tree.scss @@ -0,0 +1,56 @@ + +.tree-view { + overflow: hidden; + + &.scrollable { + overflow: auto; + } + + .node { + text-shadow: none; + stroke: none; + + .outer-circle { + stroke: $blue; + stroke-width: 2px; + fill: $white; + } + + .inner-circle { + fill: $blue; + } + + text { + text-anchor: end; + @extend .body-2-semibold; + fill: $blue; + } + + &.clickable { + cursor: pointer; + } + + &.selectedNode { + .outer-circle { + fill: $blue; + } + + .inner-circle { + fill: $blue; + } + + text { + fill: $blue; + } + } + } + + + .link { + fill: none; + stroke: $dark-gray; + stroke-opacity: 0.4; + stroke-width: 1.5px; + } + +} diff --git a/openecomp-ui/resources/scss/components/_userNotifications.scss b/openecomp-ui/resources/scss/components/_userNotifications.scss new file mode 100644 index 0000000000..74cafae438 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_userNotifications.scss @@ -0,0 +1,123 @@ + +.onboarding-notifications { + margin-left: 10px; + .notifications-icon { + display: flex; + @extend .clickable; + .notifications-count { + color: $white; + font-size: 11px; + text-align: center; + width: 16px; + height: 16px; + background-color: $orange; + border-radius: 50%; + position: relative; + right: 7px; + top: -2px; + &.hidden-count { + background-color: transparent; + color: transparent; + } + } + } + .onboarding-overlay { + width: 520px; + right: 39px; + margin-top: 18px; + .arrow-up { + margin-left: 487px; + } + + .user-notifications { + .notifications-title { + color: $blue; + @extend .heading-5-semibold; + @extend .text-uppercase !optional; + padding: 13px 20px 10px 20px; + border-bottom: 1px solid $tlv-light-gray; + } + .notifications-list { + max-height: 600px; + overflow-y: auto; + .notification { + border-bottom: 1px solid $tlv-light-gray; + padding: 16px 20px 18px 20px; + display: flex; + &.unread { + background-color: lighten($gray, 38%); + .item-name { + display: flex; + @include base-font-bold; + } + .unread-circle-icon { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: $blue; + align-self: center; + margin-bottom: 3px; + margin-left: 9px; + } + } + .notification-data { + width: 366px; + margin-right: 30px; + color: $dark-gray; + .item-name { + @extend .body-2-semibold; + @extend .text-uppercase !optional; + margin-bottom: 6px; + } + .flex-items { + display: flex; + margin: 6px 0 11px 0; + @extend .body-3; + line-height: 20px; + @extend .text-uppercase !optional; + color: $gray; + .separator { + border-left: 1px solid $dark-gray; + margin: 5px 8px; + } + } + .description { + @extend .body-3; + margin: 11px 0 8px 0; + .more-less { + font-size: $icon-font-size; + color: $blue; + } + } + .date { + font-size: $icon-font-size; + @include base-font-regular; + color: $gray; + margin-top: 8px; + } + } + + .notification-action .action-button { + @extend .clickable; + width: 74px; + height: 28px; + color: $white; + background-color: $blue; + border-radius: 2px; + text-align: center; + line-height: 2; + margin-top: 4px; + &.active { + background-color: #0091c7; + border: solid 1px #006186; + } + &:hover { + background-color: #1ec2ff; + border: solid 1px #0091c8; + } + } + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss index 57610986c3..11e5b41675 100644 --- a/openecomp-ui/resources/scss/components/_versionController.scss +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -1,102 +1,272 @@ .version-controller-bar { - display: flex; - min-height: 57px; - border-bottom: 1px solid $tlv-light-gray; - background-color: transparent; - .vc-container { - display: flex; - flex: 1; - align-self: center; - background-color: transparent; - justify-content: space-between; - padding-left: 16px; - padding-right: 40px; - .version-status-container { - display: flex; - height: 30px; - .version-selector { - border: none; - margin-top: 7px; - padding-right: 10px; - margin-right: 15px; - margin-left: 10px; - @extend .body-1; - } - .version-section { - .form-group { - margin-right: 20px; - .input-options { - border: none; - .input-options-select { - padding-top: 4px; - } - } - } - } - .vc-status { - display: flex; - padding-left: 20px; - border-left: $light-gray thin solid; - .status-text { - align-self: center; - margin-top: 2px; - @extend .heading-5; - color: $dark-gray; - } - } - } - .save-submit-cancel-container { - display: flex; - height: 30px; - .action-buttons { - display: flex; - padding: 0 13px; - .version-control-buttons { - display: flex; - } - .action-buttons-svg { - padding-top: 5px; - margin-right: 20px; - padding-bottom: 5px; - - - .svg-icon { - fill: $dark-gray; - &:hover { - fill: $black; - } - &.__versionControllerLockClosed { - margin-top: -3px; - } - &.__versionControllerLockOpen { - margin-top: -6px; - } - &.__versionControllerSubmit { - fill: $blue; - &:hover { - fill: $dark-blue; - } - &.disabled { - fill: $dark-gray; - } - } - } - } - - - - - } - .vc-nav-item-close { - display: flex; - padding-left: 18px; - padding-top: 3px; - align-self: center; - @extend .body-1; - color: $gray; - cursor: pointer; - border-left: $gray thin solid; - } - } - } + display: flex; + min-height: 70px; + border-bottom: 1px solid $tlv-light-gray; + background-color: transparent; + + .vc-container { + display: flex; + flex: 1; + align-self: center; + background-color: transparent; + justify-content: space-between; + align-items: center; + padding-left: 16px; + padding-right: 40px; + + .vc-separator { + border-left: 1px solid $tlv-light-gray; + height: 37px; + margin-left: 5px; + margin-right: 5px; + } + + .version-status-container { + display: flex; + height: 30px; + + .version-selector-more-versions { + color: $blue; + cursor: pointer; + } + + .version-selector { + margin-top: 0px; + padding-right: 10px; + margin-right: 15px; + margin-left: 10px; + border-color: $light-gray; + border-radius: 2px; + width: 243px; + height: 30px; + @extend .body-1; + } + + .version-section { + .form-group { + margin-right: 20px; + + .input-options { + border: none; + + .input-options-select { + padding-top: 4px; + } + } + } + } + + .vc-status { + display: flex; + padding-left: 20px; + border-left: $light-gray thin solid; + + .status-text { + align-self: center; + margin-top: 2px; + @extend .heading-5; + color: $dark-gray; + } + } + } + + .save-submit-cancel-container { + display: flex; + align-items: center; + height: 100%; + + .action-buttons, .collaborator-action-buttons, .vc-save-section, .vc-submit-section { + display: flex; + align-items: center; + height: 100%; + + .vc-submit-button { + border: 1px solid $dark-gray; + width: 94px; + height: 30px; + border-radius: 2px; + padding-top: 5px; + padding-left: 10px; + margin-left: 10px; + margin-right: 10px; + + &:hover:not(.disabled) { + cursor: pointer; + background-color: $tlv-light-gray; + } + + &.disabled { + border-color: $light-gray; + } + + .vc-v-submit { + width: 11px; + height: 8px; + margin-right: 10px; + position: relative; + top: -1px; + } + } + + .version-control-buttons { + display: flex; + } + + .action-button-wrapper { + display: flex; + align-items: center; + height: 70px; + + &:hover:not(.disabled) { + background-color: $tlv-light-gray; + } + + &:active:not(.disabled) { + background-color: $light-gray; + } + + .action-buttons-svg { + padding-left: 10px; + padding-right: 10px; + + .svg-icon { + fill: $text-black; + height: 20px; + + &, &.__version-controller-save { width: 20px; } + &.__version-controller-permissions { width: 32px; } + &.__version-controller-undo, &.__version-controller-revert { width: 20px; } + &.__version-controller-sync, &.__version-controller-commit { width: 28px; } + } + } + + .version-controller-permissions { + width: 32px; + height: 20px; + fill: $dark-gray; + } + } + + .action-button-label { + display: block; + font-size: $icon-font-size; + font-family: $icon-font-family; + height: 1em; + margin-top: 5px; + margin-bottom: 0; + } + + .onboarding-overlay { + margin-top: -6px; + .permissions-overlay { + width: 237px; + + .permissions-overlay-header { + text-align: left; + color: $blue; + padding-bottom: 15px; + padding-top: 15px; + border-bottom: 1px solid $light-gray; + .permissions-overlay-header-title { + margin-left: 20px; + } + } + .permissions-overlay-content { + max-height: 290px; + overflow-y: auto; + padding-left: 10px; + padding-right: 10px; + .contributor { + &:last-child { + border-bottom: none; + } + border-bottom: 1px solid $tlv-light-gray; + .contributor-content { + padding-top: 12px; + padding-bottom: 10px; + margin-left: 10px; + display: flex; + .contributor-icon-circle { + &.selected { + border: 1px solid $blue; + } + + border-radius: 65px; + padding: 2px; + width: 32px; + height: 32px; + margin-top: 4px; + .contributer-icon { + width: 26px; + border-radius: 50px; + height: 26px; + margin-top: 0px; + .__user { + height: 18px; + width: 16px; + stroke: $blue; + fill: transparent; + margin-left: 5px; + margin-top: 3px; + } + &.selected { + border: 1px solid $blue; + background-color: $blue; + .__user { + stroke: $white; + margin-left: 4px; + } + } + } + } + + .contributer-info { + padding-left: 11px; + .contributer-name { + @extend .body-2-semibold; + text-transform: uppercase; + color: $dark-gray; + } + .contributer-role { + @extend .body-3; + color: $gray; + display: flex; + text-transform: lowercase; + p:first-letter { + text-transform: uppercase; + } + justify-content: space-between; + } + } + } + } + } + .permissions-overlay-footer { + .manage-permissions-btn { + @extend .body-2-semibold; + margin-top: 20px; + padding-top: 10px; + padding-bottom: 10px; + color: $blue; + text-align: center; + cursor: pointer; + background-color: $tlv-gray; + } + } + + } + } + } + } + .vc-nav-item-close { + display: flex; + padding-left: 18px; + padding-top: 3px; + align-self: center; + @extend .body-1; + color: $gray; + cursor: pointer; + border-left: $gray thin solid; + } + } } |