diff options
Diffstat (limited to 'openecomp-ui/resources/scss')
57 files changed, 1457 insertions, 854 deletions
diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss index 7c726aa8dd..7f73047c91 100644 --- a/openecomp-ui/resources/scss/_components.scss +++ b/openecomp-ui/resources/scss/_components.scss @@ -1,5 +1,4 @@ @import "components/punchOut"; -@import "components/buttons"; @import "components/forms"; @import "components/validationForm"; @import "components/dualListBox"; @@ -19,6 +18,10 @@ @import "components/activityLog"; @import "components/selectActionTable"; @import "components/datepicker"; +@import "components/tree"; +@import "components/commitModal"; +@import "components/userNotifications"; +@import "components/overlay"; %noselect { -webkit-touch-callout: none; @@ -70,10 +73,6 @@ } } -.warning-icon { - margin-left: 50%; - color: $yellow; -} .chevron::before { border-style: solid; diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss index 405e91a61b..6fe6e30ab6 100644 --- a/openecomp-ui/resources/scss/_modules.scss +++ b/openecomp-ui/resources/scss/_modules.scss @@ -23,4 +23,8 @@ @import "modules/uploadScreen"; @import "modules/vspHeatSetup"; @import "modules/softwareProductDependencies"; +@import "modules/_permissions.scss"; +@import "modules/_revisions.scss"; @import "modules/softwareProductDeployment"; +@import "modules/versionsPage"; +@import "modules/mergeEditor"; diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_buttons.scss b/openecomp-ui/resources/scss/bootstrap-cust/_buttons.scss deleted file mode 100644 index bf58006d89..0000000000 --- a/openecomp-ui/resources/scss/bootstrap-cust/_buttons.scss +++ /dev/null @@ -1,13 +0,0 @@ - -.btn { - height: 30px; - min-width: 95px; -} - -.btn-default .fa { - color: $brand-primary; -} - -.btn-info { - @include button-variant($text-black, $tlv-gray, $light-gray); -} diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss index 60fd7ab07d..4ec2341011 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss @@ -1,6 +1,7 @@ .form-group { .control-label { @extend .body-2-semibold; + font-weight: normal; } &.required { label:before { @@ -28,6 +29,15 @@ label { margin-bottom: 8px; } +.sdc-radio { + label { + font-weight: normal; + margin-bottom: 0; + } + input[type="radio"] { + margin: 0; + } +} select.form-control { display: block; width: 215px; @@ -37,7 +47,7 @@ select[multiple] { background: none; } -input[type="radio"], input[type="checkbox"] { +input[type="checkbox"] { margin: 0; &:before { @@ -77,14 +87,6 @@ input[type="radio"], input[type="checkbox"] { border-radius: 2px; } -input[type=radio]:checked:before { - content: "\2022"; - color: $blue; - font-size: 30px; - text-align: center; - line-height: 11px; - font-family: $radio-font-family; -} input[type=checkbox]:checked:before { font-family: $icon-font-family; diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss index ad6b4f8aca..1f132043ab 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss @@ -11,9 +11,13 @@ padding: 0; .validation-form-content { padding: 50px; + padding-bottom: 30px; overflow-y: auto; max-height: 490px; } + .validation-buttons { + padding-right: 50px; + } } .modal-footer { diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_navbar.scss b/openecomp-ui/resources/scss/bootstrap-cust/_navbar.scss deleted file mode 100644 index acf2024b56..0000000000 --- a/openecomp-ui/resources/scss/bootstrap-cust/_navbar.scss +++ /dev/null @@ -1,3 +0,0 @@ -.navbar { - border: none; -} diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss b/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss deleted file mode 100644 index 914a7794f1..0000000000 --- a/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss +++ /dev/null @@ -1,30 +0,0 @@ -.nav { - > li { - > a { - padding: 10px 10px 3px; - } - } -} - -.nav-tabs { - @include box-shadow(0px 2px 1px -1px $gray); - padding: 0 28px; - - > li { - @extend .body-1; - - > a { - color: $dark-gray; - text-transform: uppercase; - } - - &.active > a { - &, - &:hover, - &:focus { - @extend .body-1-semibold; - border-bottom: 3px solid $blue; - } - } - } -} diff --git a/openecomp-ui/resources/scss/bootstrap.scss b/openecomp-ui/resources/scss/bootstrap.scss index 777f490a89..32890b35f0 100644 --- a/openecomp-ui/resources/scss/bootstrap.scss +++ b/openecomp-ui/resources/scss/bootstrap.scss @@ -20,18 +20,12 @@ @import "bootstrap-cust/tables"; @import "bootstrap/forms"; @import "bootstrap-cust/forms"; -//@import "bootstrap/buttons"; -//@import "bootstrap-cust/buttons"; // Components @import "bootstrap/component-animations"; @import "bootstrap/dropdowns"; @import "bootstrap-cust/dropdowns"; @import "bootstrap/button-groups"; @import "bootstrap/input-groups"; -@import "bootstrap/navs"; -@import "bootstrap-cust/navs"; -@import "bootstrap/navbar"; -@import "bootstrap-cust/navbar"; @import "bootstrap/breadcrumbs"; @import "bootstrap/pagination"; @import "bootstrap/pager"; diff --git a/openecomp-ui/resources/scss/bootstrap/_button-groups.scss b/openecomp-ui/resources/scss/bootstrap/_button-groups.scss index dc2906e44f..14ee0d348c 100644 --- a/openecomp-ui/resources/scss/bootstrap/_button-groups.scss +++ b/openecomp-ui/resources/scss/bootstrap/_button-groups.scss @@ -92,21 +92,9 @@ outline: 0; } -// Sizing -// -// Remix the default button sizing classes into new ones for easier manipulation. -.btn-group-xs > .btn { - @extend .btn-xs; -} -.btn-group-sm > .btn { - @extend .btn-sm; -} -.btn-group-lg > .btn { - @extend .btn-lg; -} // Split button dropdowns // ---------------------- diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss index e901db000e..ff3a830e6b 100644 --- a/openecomp-ui/resources/scss/common/_base.scss +++ b/openecomp-ui/resources/scss/common/_base.scss @@ -11,10 +11,14 @@ body { @extend %noselect; } +$scrollbar-width: 8px; +$scrollbar-height: 8px; +/* firefox */ +$ff-scrollbar-width: 17px; /* scrollbar styling for Google Chrome | Safari | Opera */ ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: $scrollbar-width; + height: $scrollbar-height; } ::-webkit-scrollbar-track { diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss index dc2a33ccc7..6c6a0cf165 100644 --- a/openecomp-ui/resources/scss/common/_layout.scss +++ b/openecomp-ui/resources/scss/common/_layout.scss @@ -26,4 +26,10 @@ .modal-title { text-transform: uppercase; } -}
\ No newline at end of file +} +.page-title { + @extend .heading-1; + @extend .text-uppercase !optional; + margin-bottom: 20px; + color: $blue; +} diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss index 95d6d88595..c4ae856b5f 100644 --- a/openecomp-ui/resources/scss/common/_typography.scss +++ b/openecomp-ui/resources/scss/common/_typography.scss @@ -31,9 +31,9 @@ $body-font-2: 13px; $body-font-3: 12px; $body-font-4: 10px; -$icon-font-size: 11px; +$icon-font-size: 10px; $icon-font-family: Arial; -$radio-font-family: Arial; + .heading-1 { @include base-font-light; @@ -133,10 +133,6 @@ $radio-font-family: Arial; font-size: $body-font-3; } -.circle-icon-text { - @include base-font-semibold; - font-size: $body-font-1; -} .warning-text { color: $yellow; diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss index 88a9ece7a8..99b1ff5d9a 100644 --- a/openecomp-ui/resources/scss/common/_utils.scss +++ b/openecomp-ui/resources/scss/common/_utils.scss @@ -118,7 +118,6 @@ $browserPrefixes: webkit moz o ms; max-height: $lineHeight * $lineCount; text-align: justify; word-break: break-all; - white-space: nowrap; // margin-right: -1em; padding-right: 1em; &:before { @@ -215,7 +214,7 @@ $browserPrefixes: webkit moz o ms; } } -@mixin create-circle($size, $bgcolor, $content) { +@mixin create-circle($size, $bgcolor) { border-radius: 50%; width: $size; height: $size; diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss index 3a3178c6b0..5125b652ea 100644 --- a/openecomp-ui/resources/scss/common/_variables.scss +++ b/openecomp-ui/resources/scss/common/_variables.scss @@ -21,12 +21,10 @@ $white: #ffffff; $red: #cf2a2a; $crimson: #a94442; -$background-alice-blue: #e5f5fb; $background-gray: #f2f2f2; $text-black: #191919; $link-blue: #056bae; $functional-green: #007a3e; -$functional-yellow: #ffb81c; $tlv-gray: #f8f8f8; $tlv-light-gray: #eaeaea; $tlv-hover: #e6f6fb; @@ -34,7 +32,7 @@ $highlight-gray: #eceff3; $content-background-color: $white; -$scroll-bar-color: $text-black;//$light-gray; +$scroll-bar-color: $text-black; $vc-status-text-color: #42b72a; // sizes @@ -45,72 +43,8 @@ $tablet-max-width: 1024px; $laptop-min-width: 1224px; $desktop-min-width: 1824px; -/* Textures */ -$images-folder-name: "../images"; -/* -$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; -$interface-icon: $images-folder-name + "/interface.svg"; -$sdc-logo: $images-folder-name + "/logo.svg"; -$warning-icon: $images-folder-name + "/warning.svg"; -*/ -/* Icons */ -$icons-folder: "../images/icons"; -/* -$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; -$interface-icon: $images-folder-name + "/interface.svg"; -$sdc-logo: $images-folder-name + "/logo.svg"; -$warning-icon: $images-folder-name + "/warning.svg"; -*/ -$pencil-icon: $images-folder-name + "/pencil_icon-01.svg"; -/* -$vc-check-in-icon: $icons-folder + "/checked_in.png"; -$vc-checkout-icon: $icons-folder + "/checked_out.png"; -$vc-revert-icon: $icons-folder + "/reverticon.png"; -$vc-revert-disabled-icon: $icons-folder + "/revert_icon_disabled.png"; -$vc-save-icon: $icons-folder + "/saveicon.png"; -$vc-save-disabled-icon: $icons-folder + "/save_icon_disable.png"; -$vc-submit-icon: $icons-folder + "/submiticonactive.png"; -$vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png"; -$trash-icon: $images-folder-name + "/trash_icon.png"; -$download-icon: $images-folder-name + "/download_icon.png"; -$upload-icon: $images-folder-name + "/upload_icon.png"; -*/ -/***** -// catalog icons -$back-icon: $icons-folder + "/back_icon.png"; -// validation icons -$artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png"; -$artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png"; -$chevron_down: $icons-folder + "/down_chevron.png"; -$error-icon-lg: $icons-folder + "/error_icon_big.png"; -$error-icon-sm: $icons-folder + "/error_icon_small.png"; -$go-to-overview-icon: $icons-folder + "/go_to_overview_icon.png"; -$go-to-overview-disabled-icon: $icons-folder + "/go_to_overview_disable_icon.png"; -$network-selected-icon: $icons-folder + "/network_blue_icon.png"; -$network-icon: $icons-folder + "/network_icon.png"; -$others-selected-icon: $icons-folder + "/others_blue_icon.png"; -$others-icon: $icons-folder + "/others_icon.png"; -$volume-selected-icon: $icons-folder + "/volume_blue_icon.png"; -$volume-icon: $icons-folder + "/volume_icon.png"; -$warning-icon-lg: $icons-folder + "/warning_icon_big.png"; -$warning-icon-sm: $icons-folder + "/warning_icon_small.png"; -$zip-icon: $icons-folder + "/ZIP_icon.png"; -$zip-selected-icon: $icons-folder + "/ZIP_blue_icon.png"; -$heat-icon: $icons-folder + "/nested_heat_icon.png"; -$heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png"; -$env-icon: $icons-folder + "/env_icon.png"; -$env-selected-icon: $icons-folder + "/env_icon_blue.png"; -// vlm summary icons -$vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png"; -$vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png"; -$vlm-summary-plus-disabled: $icons-folder + "/plus_vlm_summary_disabled_icon.png"; -$vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png"; -$vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png"; -$vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png"; -$vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png"; -*****/ 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; + } + } } diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss index ad0bb77e8d..d9919c27e3 100644 --- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss +++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss @@ -1,51 +1,22 @@ .entitlement-pools-list-editor { - .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } .list-editor-item-view-field { - .entitlement-pools-count, .contract-number, .type{ - color: $purple; - } .entitlement-pools-count { @extend .heading-1; - margin-top: -10px; - - } + color: $purple; } } } .entitlement-pools-modal { - .modal-body { - padding: 0; - } - .sdc-tab-content { - margin: 0; - } .entitlement-pools-form { - .threshold-section { + .threshold-section, .date-section { display: flex; justify-content: space-between; .validation-input-wrapper { flex: 0 0 46%; } } - .date-section { - display: flex; - justify-content: space-between; - .validation-input-wrapper { - flex: 0 0 46%; - } - } - .validation-form-content { - padding: 20px 50px; } - } - .validation-buttons { - padding: 20px 50px; - } } diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index 5f98ed2c05..cf681b8758 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -37,48 +37,5 @@ } } -.feature-group-modal { - .modal-body { - padding: 0; - } - .feature-group-form { - .no-items-msg { - margin-top: 55px; - color: $dark-gray; - } - .validation-form-content { - padding: 0; - } - .nav.nav-tabs { - padding-left: 50px; - } - .tab-content { - padding: 50px; - .field-section { - @extend .body-2-semibold; - margin-bottom: 23px; - width: 400px; - color: $black; - } - .description-field { - height: 170px; - } - .list-editor-item-view-content { - white-space: nowrap; - overflow: hidden; - > div { - overflow: hidden; - text-overflow: ellipsis; - &:not(:last-of-type) { - margin-right: 24px; - } - } - } - } - .validation-buttons { - padding: 20px 50px; - } - } -} diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss index 7a7b87677e..579e9bab2b 100644 --- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss +++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss @@ -2,10 +2,6 @@ .license-agreement-list-editor { .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } .list-editor-item-view-field { .list-editor-item-view-field-tight { vertical-align: top; @@ -17,46 +13,14 @@ overflow-wrap: break-word; } } - .feature-groups-count, .contract-number, .type { + .feature-groups-count, .type { color: $light-green; } .feature-groups-count { @extend .heading-1; padding-top: 2px; - text-align: center; - } - .contract-number { - margin-bottom: 8px; } - } - } -} -.license-agreement-modal { - .modal-body { - padding: 0; - } - .license-agreement-form { - .no-items-msg { - margin-top: 55px; - color: $dark-gray; - } - .tab-content { - padding: 50px; - .list-editor-item-view-content { - white-space: nowrap; - overflow: hidden; - > div { - overflow: hidden; - text-overflow: ellipsis; - &:not(:last-of-type) { - margin-right: 24px; - } - } - } - } - .validation-buttons { - padding: 20px 50px; } } } diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss index d072849c08..bcb6abc83d 100644 --- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss +++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss @@ -1,16 +1,11 @@ .license-key-groups-list-editor { .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } .list-editor-item-view-field { .operational-scope, .type { color: $orange; } .operational-scope { - margin-bottom: 0px; @include ellipsis; } } diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss index fab091fe67..e93ea989fd 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModel.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss @@ -6,9 +6,6 @@ border-bottom: none; padding-bottom: 30px; } - .modal-body { - padding: 0; - } .sdc-tabs-list { padding-left: 50px; border-bottom: 1px solid $tlv-light-gray; @@ -25,10 +22,7 @@ text-align: end; } .license-model-form { - .validation-form-content { - padding: 20px 50px; - } - .validation-buttons { + .validation-form-content, .validation-buttons { padding: 20px 50px; } &.license-agreement-form, &.feature-group-form { @@ -51,3 +45,11 @@ } } } +.license-model-list-editor { + .list-editor-view-list { + .list-editor-item-view { + min-height: 110px; + height: 110px; + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss index 9246b5fcbf..21c5bd8007 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -4,17 +4,14 @@ $icon-margin: 30px; $arrow-element-width: 30px; $list-item-padding: 15px; -@mixin overview-tile-shadow() { - @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); -} -// @mixin vlm-list-item-inset($color) { -// @include box-shadow(inset 6px 0 0 0 $color); -// } $la-color: $dark-blue; $fg-color: $blue; $lkg-ep-color: $light-blue; +@mixin overview-tile-shadow() { + @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); +} .license-model-overview { .overview-top-section { @@ -185,11 +182,8 @@ $lkg-ep-color: $light-blue; width: 100%; } .svg-icon-wrapper { - .svg-icon { &.__plusCircle { - width: 20px; - height: 20px; margin-top: 3px; margin-left: auto; fill: $dark-gray; @@ -197,7 +191,8 @@ $lkg-ep-color: $light-blue; fill: $blue; } } - } + } + } .summary-name-and-count { @@ -406,7 +401,7 @@ $lkg-ep-color: $light-blue; &.vlm-list-item-la { margin-top: 10px; .la-icon { - @include create-circle($circle-icon-size,$la-color,'LA'); + @include create-circle($circle-icon-size, $la-color); color: $white; } .vlm-list-item-title { @@ -439,7 +434,7 @@ $lkg-ep-color: $light-blue; margin-left: 29px; } .fg-icon { - @include create-circle($circle-icon-size,$fg-color,'FG'); + @include create-circle($circle-icon-size, $fg-color); color: $white; } @@ -467,7 +462,7 @@ $lkg-ep-color: $light-blue; margin-top: 10px; cursor: default; .ep-icon { - @include create-circle($circle-icon-size,$lkg-ep-color,'EP'); + @include create-circle($circle-icon-size, $lkg-ep-color); color: $white; } .vlm-list-item-title { @@ -490,7 +485,7 @@ $lkg-ep-color: $light-blue; margin-left: $list-indentation * 2; cursor: default; .lkg-icon { - @include create-circle($circle-icon-size,$lkg-ep-color,'KG'); + @include create-circle($circle-icon-size, $lkg-ep-color); color: $white; } .vlm-list-item-title { diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss new file mode 100644 index 0000000000..96648dd20f --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss @@ -0,0 +1,207 @@ +$yours-bg-color: $tlv-gray; +$theirs-bg-color: $tlv-light-gray; +$error-text-color: $red; +$selected-width: 1px; +$selected-color: $blue; + +@mixin levels { + @for $i from 1 to 6 { + .level-#{$i} { + padding-left: 18px + 10 * $i; + } + } +} + +.merge-editor-modal { + .modal-lg { + width: 1300px; + } +} + +.merge-editor { + margin: 30px 40px; + max-height: 600px; + border: 1px solid $light-gray; + .grid-section { + &.conflict-titles-section { + @extend .body-1; + background-color: $blue; + height: 33px; + padding-top: 6px; + padding-bottom: 3px; + color: $white; + position: sticky; + top: 0; + z-index: 2; + border-bottom: 1px solid $tlv-light-gray; + .grid-item { + padding-left: 10px; + } + .form-group { + margin-bottom: 0; + .checkbox { + label { + margin-right: 0; + } + + text-align: right; + + input[type="checkbox"] { + cursor: pointer; + margin-top: 1px; + } + } + } + } + } + .merge-editor-body { + max-height: 500px; + overflow-y: scroll; + padding: 10px; + .conflict-section { + margin-bottom: 0; + border-left: 0; + border-right: 0; + padding: 5px 0; + + .conflict-resolve-btn { + align-self: flex-end; + } + + .grid-items { + align-items: center; + + input[type="radio"]:not(:checked) { + cursor: pointer; + } + } + } + + .collapsible-section { + display: flex; + cursor: pointer; + + .conflict-title { + @extend .heading-5-semibold; + text-transform: uppercase; + } + } + + .merge-chevron { + margin-right: 7px; + &.right { + transform: rotate(90deg); + } + } + + .grid-section .grid-items .field-col:not(.grid-col-title) { + &.grid-col-yours { + border-top: $selected-width solid $yours-bg-color; + border-bottom: $selected-width solid $yours-bg-color; + } + + &.theirs-color { + border-top: $selected-width solid $theirs-bg-color; + border-bottom: $selected-width solid $theirs-bg-color; + } + } + + .merge-editor-text-field { + display: flex; + justify-content: space-between; + // margin: 0 0 10px 0; + margin: 0; + + .field { + color: $text-black; + + &.field-name:not(.field-object-name) { + color: $gray; + } + } + + &.diff { + .field { + color: $red; + } + } + + &.grid-section { + padding-bottom: 0; + + .grid-items { + flex: 1; + + + .field-col { + padding: 7px 0; + height: 100%; + + &:not(:first-child) { + padding-left: 8px; + } + + &.grid-col-yours { + background-color: $yours-bg-color; + } + + &.grid-col-theirs { + background-color: $theirs-bg-color; + } + + @include levels; + + + .field { + @extend .body-1; + flex: 2; + min-width: 0; + + &.field-name { + @include multiline-ellipsis($bgColor: white); + &.diff { + color: $red; + } + text-transform: uppercase; + &.field-object-name { + @extend .body-1-semibold; + margin-bottom: 5px; + margin-top: 10px; + + } + } + + &.field-yours { + @include multiline-ellipsis($bgColor: $yours-bg-color); + } + + &.field-theirs { + @include multiline-ellipsis($bgColor: $theirs-bg-color); + } + &.field-name, &.field.field-yours, &.field.field-theirs { + word-break: break-word; + text-align: initial; + } + &.empty-field { + padding-top: 2px; + } + } + + *::after { + bottom: 0; + } + } + } + } + + &.field-error { + @extend .body-1; + color: $error-text-color; + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss index 6c56d11049..4fb0f7c99e 100644 --- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss +++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss @@ -8,6 +8,7 @@ $transitionLength: 0.6s; @import "onboardingCatalog/catalogHeader"; @import "onboardingCatalog/vendorPageHeader"; @import "onboardingCatalog/catalogList"; + @import "onboardingCatalog/vspOverlay"; .catalog-wrapper { height: 100%; overflow: auto; @@ -19,6 +20,38 @@ $transitionLength: 0.6s; .catalog-list { overflow: hidden; height: auto; + .sdc-tile { + margin: 9px; + .sdc-tile-header { + position: initial; + display: block; + flex-shrink: initial; + align-items: initial; + flex-direction: initial; + } + .sdc-tile-content { + position: initial; + flex: initial; + display: flex; + align-items: initial; + flex-direction: column; + justify-content: space-between; + overflow: initial; + .sdc-tile-info-line { + .with-overlay { + line-height: 1.2em; + @include ellipsis($width: initial, $max-width: 100%); + } + } + } + .sdc-tile-footer { + position: initial; + flex-shrink: initial; + display: flex; + align-items: center; + flex-direction: row; + } + } } } } diff --git a/openecomp-ui/resources/scss/modules/_permissions.scss b/openecomp-ui/resources/scss/modules/_permissions.scss new file mode 100644 index 0000000000..e652d9d82f --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_permissions.scss @@ -0,0 +1,55 @@ +.modal-content { + .modal-body { + .manage-permissions-page { + .validation-form-content { + overflow-y: visible; + } + + .manage-permissions-title { + @extend .body-1-semibold; + margin-bottom: 10px; + } + .owner-details { + @extend .body-2; + display: flex; + margin-bottom: 30px; + .change-owner { + margin-left: auto; + color: $blue; + cursor: pointer; + &:hover { + color: $dark-blue; + } + } + } + .change-owner-wrapper { + .form-group { + margin-bottom: 30px; + } + + } + .change-owner-title { + display: flex; + align-items: center; + margin-bottom: 10px; + .manage-permissions-title { + margin-bottom: 0; + } + .svg-icon-wrapper { + margin-left: 5px; + .svg-icon { + width: 13px; + height: 13px; + fill: $dark-gray; + } + } + } + .contributors-select { + .Select-menu { + max-height: 150px; + overflow-y: auto + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_revisions.scss b/openecomp-ui/resources/scss/modules/_revisions.scss new file mode 100644 index 0000000000..2b196c132c --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_revisions.scss @@ -0,0 +1,86 @@ +.manage-revisions-modal { + .modal-dialog { + width: 700px; + } + .modal-content { + .modal-body { + .validation-form-content { + padding-top: 30px; + } + //.selected { + // .selectable { + // border-color: $light-blue; + // } + // .selectable:hover{ + // border-color: hotpink; + // } + //} + + .revision-list-item { + &.selected { + .selectable, .selectable:hover { + border-width: 2px; + border-color: $light-blue; + } + } + .selectable:hover{ + border-color: $gray; + } + .selectable:active { + border-color: $light-blue; + } + } + + .list-editor-view-list-scroller { + margin-top : 0px; + } + + .list-editor-view-header { + border-bottom: none; + .list-editor-view-title { + @extend .heading-5; + text-transform: none; + color: $blue; + } + } + + .list-editor-item-view-content { + background-color: $background-gray; + } + .revision-list-item-fields { + width: 100%; + display: flex; + flex-wrap: wrap; + .revision-user { + flex-basis: 50%; + fill: transparent; + stroke: $blue; + .svg-icon-label { + margin-left: 13px; + } + } + + .revision-date { + flex-basis: 50%; + text-align: right; + @extend .body-3; + color: $gray; + .revision-time { + margin-left: 5px; + } + } + + .revision-message { + flex-basis: 100%; + margin-top: 5px; + @extend .body-2; + .more-less { + @extend .body-3; + color: $blue; + margin-left: 5px; + } + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index c8d8cf4e0b..0ae3f00a29 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -1,21 +1,25 @@ .vsp-attachments-view { position: relative; - #attachments-tabs { - .nav-tabs { + .attachments-tabs { + .sdc-tabs-list { + padding-left: 28px; background-color: $tlv-gray; box-shadow: none; border-bottom: 1px solid $light-gray; - & > li { - & > a { + .sdc-tab { @extend .heading-2; - padding-left: 0; - padding-right: 0; - margin-right: 40px; - }; - &.active > a {color: $blue;}; + padding-top: 10px; + margin-top: 0; + &.sdc-tab-active { + color: $blue; + font-weight: bold; + } } } + .sdc-tab-content { + margin-top: 0; + } } .attachments-view-controllers { position: absolute; @@ -91,6 +95,11 @@ z-index: 1; padding-right: 20px; .counter { + .svg-icon { + &.__exclamationTriangleLine { + fill: $orange; + } + } display: flex; &:first-child { margin-right: 20px; @@ -215,6 +224,7 @@ .svg-icon { width: 20px; height: 20px; + fill: $orange; } } .error-item-file-type { diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss index 6c5bcee03c..d31c7f0b92 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss @@ -10,7 +10,4 @@ } } } - .additional-validation-form { - margin-top: 50px; - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss index dad837f356..b67c448b54 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss @@ -23,9 +23,6 @@ } .image-modal-edit, .image-modal-new { - .modal-body { - padding: 0; - } .vsp-components-image-editor { .image-format, .image-md5, .image-version { @@ -35,13 +32,19 @@ padding-left: 30px; } .section-title { - text-transform: capitalize; + text-transform: uppercase; font-size: 18px; } } } .vsp-components-image { + .list-editor-view { + margin-top: 50px; + .manual-title { + @extend .body-1-semibold; + } + } .list-editor-item-view-content { flex:1; min-width: 0; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss index 402918bc5e..eaba47acb4 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss @@ -20,16 +20,7 @@ display: flex; } } -.network-nic-modal-edit, .network-nic-modal-create { - .modal-body { - padding: 0; - } - .validation-form-content { - padding-left: 50px; - padding-right: 50px; - padding-top: 20px; - } -} + .network-nic-modal-edit { .modal-dialog { width: 900px; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss index be4caacfb5..9476d7043d 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss @@ -1,7 +1,4 @@ .edit-process-modal { - .vsp-process-dropzone-view .grid-section { - padding-bottom: 30px !important; - } .component-process-description > textarea { height: 113px; } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss index 8fb739234f..65c558fa0e 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss @@ -2,14 +2,22 @@ .software-product-dependencies-title { @extend .heading-1; @extend .text-uppercase !optional; + position: sticky; + top: -30px; + z-index: 1; + background: $white; margin-bottom: 20px; color: $blue; } .select-action-table-controllers { + position: sticky; + top: 4px; + z-index: 1; + background: $white; justify-content: flex-end; cursor: pointer; color: $blue; - padding-right: 33px; + padding-right: 27px; margin-bottom: 3px; &:hover { color: $dark-blue; @@ -18,8 +26,23 @@ .select-action-table-view { min-width: 770px; } + .select-action-table-headers { + position: sticky; + top: 27px; + z-index: 1; .select-action-table-header { @extend .body-1-semibold; color: $text-black; + } + } + .select-action-table-row-wrapper { + .svg-icon { + &.__trashO, &.__plusCircle { + fill: $dark-gray; + &:hover { + fill: $black; } + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss index e0de8fc969..b5f9a546d9 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss @@ -2,9 +2,6 @@ .modal-dialog { width: 780px; } - .grid-section { - padding-bottom: 25px; - } .deployment-feature-groups-section.no-feature-groups { padding-bottom: 0; .form-group { @@ -25,15 +22,12 @@ } .modal-content { .modal-body { - padding: 0; .validation-form-content { + overflow-y: visible; .grid-col-1 { - flex-basis: 35%; + flex-basis: 30%; } - .Select-value, .Select-placeholder { - font-family: omnes-regular, sans-serif; - } .grid-section.vfc-table { padding-bottom: 50px; @@ -46,9 +40,6 @@ .grid-col-3 { flex-basis: 65%; } - padding-left: 54px; - padding-right: 33px; - overflow-y: visible; } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index 28b54cc78f..99027d66ed 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -18,12 +18,7 @@ .description { @extend .body-1; - // overflow: hidden; padding-right: 20px; - // text-overflow: ellipsis; - // display: -webkit-box; - // -webkit-line-clamp: 2; - // -webkit-box-orient: vertical; .missing-license { display: flex; @@ -56,15 +51,9 @@ } } .software-product-landing-view { - transition: border .2s; padding-bottom: 50px; - .list-editor-view { - padding-top: 50px; - padding-left: 0; - padding-right: 0; - } .software-product-landing-view-top { .details-container { @extend .flex-column; @@ -110,6 +99,10 @@ &:last-child { margin-right: 0; } + .software-product-landing-view-top-block-col-upl { + height: 215px; + width: initial; + } } .col-md-6 { padding: 0; @@ -134,16 +127,19 @@ } } .software-product-landing-view-top-block { + &.clickable { cursor: pointer; + &:hover { + @extend .box-hover; + } + } border: 1px solid $light-gray; padding: 20px 18px 0 18px; height: 215px; display: flex; justify-content: space-between; background-color: $white; - &:hover { - @extend .box-hover; - } + .col-md-6 { @extend .body-1; } @@ -164,30 +160,12 @@ color: $light-blue; } } - } .software-product-landing-view-top-block-col-upl { @extend .flex; - height: 215px; - text-align: center; - flex-direction: column; - justify-content: center; - border: 2px dashed $light-gray; margin-bottom: 20px; - @extend .body-1; - align-items: center; - .upload-btn { - padding: 15px 55px; } - .drag-text { - color: $blue; - @extend .body-1-semibold; - } - .or-text { - margin-top: 10px; - margin-bottom: 10px; - } } } } @@ -195,6 +173,9 @@ } .vsp-details-page { + .grid-section-general { + padding-bottom: 30px; + } .vsp-general-tab { .validation-form-content { margin: 0; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss index d75e7447ab..3f2a2f9a69 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss @@ -1,10 +1,5 @@ .edit-process-modal { - background-color: $white; height: 100%; - &.modal-body { - padding: 0; - background-color: $white; - } .vsp-processes-editor { padding-left: 0; padding-right: 0; @@ -23,41 +18,22 @@ padding-top: 20px; padding-bottom: 20px; - align-items: center; - .upload-btn { - padding: 4px 20px; - } - .drag-text { - color: $blue; - @extend .body-1-semibold; - } - .or-text { - margin-top: 10px; - margin-bottom: 10px; + .process-type { + width: 100%; } } .vsp-processes-editor-data { - transition: border .2s; - .vsp-process-dropzone-view { - background-color: transparent; - &.active-dragging { - border: 3px dashed $dark-blue; - border-radius: 20px; - .draggable-wrapper { - opacity: 0.5; - } - } - .grid-section { - .section-title { - padding-bottom: 0; - } - } - } .validation-input-wrapper { .form-group.vsp-process-description > textarea { height: 113px; } } + .process-type { + width: 100%; + } + .process-editor-file-box { + width: 380px; + } } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss index d1f3f488bd..440b2424df 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -5,12 +5,6 @@ } .halb-data { - .load-balancing-page-title { - @extend .section-title; - &:first-child { - padding: 0 0 40px 0; - } - } .question { padding-top: 10px; &:first-child { diff --git a/openecomp-ui/resources/scss/modules/_uploadScreen.scss b/openecomp-ui/resources/scss/modules/_uploadScreen.scss index 4aa07f1580..23f41c8816 100644 --- a/openecomp-ui/resources/scss/modules/_uploadScreen.scss +++ b/openecomp-ui/resources/scss/modules/_uploadScreen.scss @@ -5,20 +5,6 @@ text-align: center; margin-bottom: 50px; } - .upload-screen-upload-block { - text-align: center; - padding: 50px; - border: 2px dashed lightgray; - } - .upload-screen-drop-zone { - &.active-dragging { - border: 3px dashed $dark-blue; - border-radius: 20px; - .draggable-wrapper { - opacity: 0.5; - } - } - } } .attachments-screen { diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss new file mode 100644 index 0000000000..fa1dc11ec6 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss @@ -0,0 +1,325 @@ +.dox-ui-punch-out { + background-color: $content-background-color; +} + +.dox-ui-punch-out.dox-ui-punch-out-full-page { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-y: auto; +} + +@mixin version-page-box-shadow() { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06); +} + +@mixin version-page-sub-title(){ + color: $text-black; + text-transform: uppercase; + background-color: $white; + border-bottom: 1px solid $light-gray; + padding: 12px 0 10px 23px; +} + +.versions-tree-modal { + .modal-dialog { + width: 800px; + } + + .tree-view { + display: flex; + align-items: center; + } +} + +.versions-page-view { + height: 100%; + background-color: $background-gray; + overflow: auto; + padding: 35px 50px 20px 50px; + + .svg-icon-wrapper { + justify-content: flex-start; + } + + .versions-page-title { + @extend .heading-1; + text-transform: uppercase; + margin-bottom: 29px; + color: $blue; + } + + .versions-page-permissions-view-wrapper { + @extend .body-1-semibold; + @include version-page-box-shadow(); + + .permissions-view-wrapper-title { + @include version-page-sub-title(); + } + + .svg-icon-wrapper.user-view { + fill: transparent; + stroke: $blue; + .svg-icon { + height: 18px; + width: 16px; + margin: 0 7px; + } + &.current-user { + .svg-icon { + background-color: $blue; + stroke: $white; + padding-top: 5px; + padding-bottom: 3px; + height: 29px; + width: 29px; + border-radius: 20px; + border: 1px solid $blue; + box-shadow: inset 0px 0px 0px 2px $white; + margin: 0; + } + .svg-icon-label { + margin-left: 7px; + } + } + .svg-icon-label { + @extend .body-2; + color: $dark-gray; + margin-left: 6px; + } + } + + .permissions-view-content { + padding: 20px 40px 20px 25px; + background-color: $white; + + height: 120px; + display: flex; + } + + .permissions-view { + display: flex; + flex: 1; + flex-direction: column; + justify-content: space-around; + + .permissions-view-title { + text-transform: uppercase; + color: $dark-gray; + } + + .contributors-view, .owner-view { + display: flex; + height: 16px; + @extend .body-1-semibold; + + .permissions-view-title { + width: 130px; + line-height: 16px; + } + + .extra-contributors { + border-radius: 30px; + background-color: $gray; + width: 26px; + height: 26px; + padding-right: 2px; + display: flex; + align-items: center; + justify-content: center; + color: $white; + cursor: default; + &:hover { + background-color: $dark-gray; + } + } + + .user-view { + margin-right: 38px; + } + + .manage-permissions { + color: $blue; + margin-left: auto; + cursor: pointer; + + &:hover { + color: $dark-blue; + } + } + } + } + } + + .versions-page-list-and-tree { + display: flex; + margin-top: 20px; + + .version-tree-wrapper { + display: flex; + flex-direction: column; + margin-right:10px; + transition: all 1s ease; + @include version-page-box-shadow(); + + .version-tree-title-container { + display: flex; + align-items: center; + height: 40px; + @include version-page-sub-title(); + padding-right: 10px; + + .version-tree-full-screen { + margin-left: auto; + } + } + + .tree-view { + background-color: $white; + flex: 1; + } + } + } + + .version-list { + flex: 1; + @extend .body-1-semibold; + color: $text-black; + display: flex; + flex-direction: column; + + .version-list-items { + flex: 1; + display: flex; + flex-direction: column; + + .version-item-row { + border-bottom: 1px solid $tlv-light-gray; + + &:last-child { + border-bottom: none; + } + } + } + + .version-item-row { + $row-hover-color: lighten($blue, 54%); + $row-active-color: lighten($blue, 51%); + + display: flex; + align-items: center; + padding: 15px 30px; + @include version-page-box-shadow(); + background-color: $white; + height: 70px; + + &:hover { + background-color: $row-hover-color; + } + + &.selected { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue; + background-color: $row-active-color; + &:hover { + background-color: $row-hover-color; + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%); + } + } + + &.header-row { + height: 40px; + + @extend .body-1-semibold; + @include version-page-sub-title(); + padding: 15px 27px; + + &:hover { + background-color: $white; + pointer-events: none; + &:active { + background-color: $white; + @include version-page-box-shadow(); + } + } + .header-field.actions { + margin-right: 57px; + } + } + + .version-item-field { + flex: 1; + display: flex; + margin-right: 10px; + + &.item-version, &.item-status { + flex: 0 1 10%; + @extend .body-1-semibold; + color: $text-black; + } + + &.item-description, &.item-last-edited { + @extend .body-1; + color: $dark-gray; + } + + &.item-description, &.header-description { + flex: 2 1 0; + } + + &.item-description > .description-text { + margin-right: 10px; + @include ellipsis($max-width: 300px); + } + + &.item-actions { + display: flex; + flex: 1 1 3%; + justify-content: space-between; + } + + &.item-select, &.item-create { + @extend .body-1; + flex: 0 1 auto; + margin-right: 0; + + .svg-icon-wrapper { + fill: $blue; + color: $blue; + + &[disabled] { + cursor: default; + } + + .svg-icon { + width: 16px; + height: 16px; + } + + &:hover:not([disabled]) { + fill: $dark-blue; + color: $dark-blue; + } + } + } + + } + + /* To keep ellipsis hider's background the same color as row background */ + &:not(.selected):hover .item-description > .description-text:after { + background: $row-hover-color + } + + &:hover:active .item-description > .description-text:after { + background: $row-active-color; + } + + } + + } + + &.clickable { + cursor: pointer; + } +} diff --git a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss index ee8cfa5c7f..9f88e94393 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss @@ -1,16 +1,3 @@ -.vsp-component-computeFlavor-view { - .component-questionnaire-validation-form { - .vm-sizing-section { - .section-title { - text-transform: capitalize; - font-size: 18px; - } - .duplicate-title-line label.control-label{ - height: 2.7em; - } - } - } -} .compute-flavor-editor-modal-edit { .modal-lg { diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss index bda8512f36..14bad18179 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss @@ -1,34 +1,9 @@ .vsp-component-monitoring { .dropzone { - .section-title { - padding-bottom: 20px; - } &:not(:last-child) { padding-bottom: 50px; } - .software-product-landing-view-top-block-col-upl { - @extend .body-1; - width: 400px; - display: flex; - text-align: center; - flex-direction: column; - justify-content: center; - border: 2px dashed $light-gray; - padding: 25px 0; - align-items: center; - .upload-btn { - padding: 4px 20px; - } - .drag-text { - color: $blue; - @extend .body-1-semibold - } - .or-text { - margin-top: 10px; - margin-bottom: 10px; - } - } .monitoring-file { display: flex; @@ -46,7 +21,4 @@ } } - .delete-button { - min-width: 0; - } } diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss index 5696b354a7..2a99263285 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss @@ -1,6 +1,6 @@ .vsp-component-questionnaire-view { - input[type='radio'], input[type='checkbox'] { + input[type='checkbox'] { &:before { border: 1px solid $dark-gray; cursor: pointer; @@ -30,14 +30,13 @@ .radio-options-content-row { display: flex; margin-top: -4px; - .validation-input-wrapper { - width: 240px; - margin-right: 7px; + .validation-radio-wrapper { + margin-right: 20px; & > .form-group { display: flex; } - .form-group .radio { + .form-group .sdc-radio { width: auto; margin-right: 0; } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss index d29a95d3d6..0a234a5a96 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss @@ -14,7 +14,7 @@ flex-direction: row; .tab-separator { position: relative; - top: 13px; + top: 8px; } .catalog-header-tab { @extend .heading-1; diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss index 32ebac98cf..f97641cbe3 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss @@ -5,15 +5,16 @@ justify-content: flex-end; background-color: $tlv-light-gray; margin-bottom: 2px; + padding-left: 60px; + padding-right: 40px; @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2)); .expandable-input-top { - margin-right: 60px; + margin-right: 20px; margin-left: auto; } .onboard-header-tabs { display: flex; flex-direction: row; - margin-left: 60px; .onboard-header-tab { @extend .body-1-semibold; margin-right: 40px; diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss index 80ed7385e0..e0b72bf9ff 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss @@ -54,7 +54,7 @@ &:hover { color: $blue; } - text-transform: uppercase; + text-transform: none; @include ellipsis(auto, block); border-bottom: 1px solid $tlv-light-gray; cursor: pointer; diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss index fc05f7493e..2c7c55530d 100644 --- a/openecomp-ui/resources/scss/onboarding.scss +++ b/openecomp-ui/resources/scss/onboarding.scss @@ -130,6 +130,16 @@ div[data-reactroot].tooltip { border-top-color: $dark-gray !important; } } + &.right { + .tooltip-arrow { + border-right-color: $dark-gray !important; + } + } + &.left { + .tooltip-arrow { + border-left-color: $dark-gray !important; + } + } .tooltip-inner { @extend .body-1; max-width: 100%; @@ -149,6 +159,18 @@ div[data-reactroot].tooltip { padding: 3px 12px; } } + // manage permisions modal + &.manage-permissions-owner-tooltip { + .tooltip-inner { + width: 400px; + } + } + // WS/Catalog Tile + &.tile-super-info { + .tooltip-inner { + font-size: $body-font-3; + } + } //dependency table error tooltip &.select-action-table-error-tooltip{ @include base-font-regular; |