react 16 upgrade
Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>
diff --git a/openecomp-ui/resources/scss/_common.scss b/openecomp-ui/resources/scss/_common.scss
index 6ade0ab..6d6a685 100644
--- a/openecomp-ui/resources/scss/_common.scss
+++ b/openecomp-ui/resources/scss/_common.scss
@@ -1,6 +1,5 @@
-@import "common/variables";
-@import "common/typography";
-@import "common/base";
-@import "common/layout";
-@import "common/utils";
-
+@import 'common/variables';
+@import 'common/typography';
+@import 'common/base';
+@import 'common/layout';
+@import 'common/utils';
diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index 7bd9010..5458cbc 100644
--- a/openecomp-ui/resources/scss/_components.scss
+++ b/openecomp-ui/resources/scss/_components.scss
@@ -1,102 +1,100 @@
-@import "components/forms";
-@import "components/validationForm";
-@import "components/dualListBox";
-@import "components/listEditorView";
-@import "components/toggleInput";
-@import "components/notifications";
-@import "components/inputOptions";
-@import "components/progressBar";
-@import "components/versionController";
-@import "components/sequenceDiagram";
-@import "components/navigationSideBar";
-@import "components/loader";
-@import "components/dropzone";
-@import "components/submitErrorResponse";
-@import "components/expandableInput";
-@import "components/grid";
-@import "components/activityLog";
-@import "components/selectActionTable";
-@import "components/datepicker";
-@import "components/tree";
-@import "components/commitModal";
-@import "components/userNotifications";
-@import "components/overlay";
-@import "components/vspDetailsVendorSelect";
-@import "components/vnfBrowse";
+@import 'components/forms';
+@import 'components/validationForm';
+@import 'components/dualListBox';
+@import 'components/listEditorView';
+@import 'components/toggleInput';
+@import 'components/inputOptions';
+@import 'components/progressBar';
+@import 'components/versionController';
+@import 'components/sequenceDiagram';
+@import 'components/navigationSideBar';
+@import 'components/loader';
+@import 'components/dropzone';
+@import 'components/submitErrorResponse';
+@import 'components/expandableInput';
+@import 'components/grid';
+@import 'components/activityLog';
+@import 'components/selectActionTable';
+@import 'components/datepicker';
+@import 'components/tree';
+@import 'components/commitModal';
+@import 'components/userNotifications';
+@import 'components/overlay';
+@import 'components/vspDetailsVendorSelect';
+@import 'components/vnfBrowse';
%noselect {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.clickable {
- cursor: pointer;
+ cursor: pointer;
}
.no-padding {
- padding: 0;
+ padding: 0;
}
.next-to-icon-label {
- $margin: 10px;
- margin-left: $margin;
- &.right {
- margin-left: 0;
- margin-right: $margin;
- }
+ $margin: 10px;
+ margin-left: $margin;
+ &.right {
+ margin-left: 0;
+ margin-right: $margin;
+ }
}
.search-wrapper {
- display: flex;
- .search-input-control {
- flex: 1 1;
- margin: 0;
- .form-control {
- font-style: italic;
+ display: flex;
+ .search-input-control {
+ flex: 1 1;
+ margin: 0;
+ .form-control {
+ font-style: italic;
+ }
}
- }
- .search-icon {
- position: relative;
- left: -23px;
- align-self: center;
- width: 0;
- color: $dark-gray;
- }
- .filter-icon {
- position: relative;
- left: -20px;
- align-self: center;
- width: 0;
- background-color: $white;
- }
+ .search-icon {
+ position: relative;
+ left: -23px;
+ align-self: center;
+ width: 0;
+ color: $dark-gray;
+ }
+ .filter-icon {
+ position: relative;
+ left: -20px;
+ align-self: center;
+ width: 0;
+ background-color: $white;
+ }
}
-
.chevron::before {
- border-style: solid;
- border-width: 0.15em 0.15em 0 0;
- content: '';
- display: inline-block;
- height: 0.8em;
- left: 0.15em;
- position: relative;
- top: 0.15em;
- vertical-align: top;
- width: 0.8em;
+ border-style: solid;
+ border-width: 0.15em 0.15em 0 0;
+ content: '';
+ display: inline-block;
+ height: 0.8em;
+ left: 0.15em;
+ position: relative;
+ top: 0.15em;
+ vertical-align: top;
+ width: 0.8em;
}
.chevron.right:before {
- left: 0;
- transform: rotate(45deg);
+ left: 0;
+ transform: rotate(45deg);
}
.chevron.down:before {
- transform: rotate(135deg);
+ transform: rotate(135deg);
}
.chevron.left:before {
- transform: rotate(-135deg);
+ transform: rotate(-135deg);
}
.chevron.top:before {
- transform: rotate(-45deg);
+ transform: rotate(-45deg);
}
diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss
index 6fe6e30..ad33275 100644
--- a/openecomp-ui/resources/scss/_modules.scss
+++ b/openecomp-ui/resources/scss/_modules.scss
@@ -1,30 +1,29 @@
-@import "modules/licenseModelOverview";
-@import "modules/licenseModelLimits";
-@import "modules/licenseAgreement";
-@import "modules/featureGroup";
-@import "modules/entitlementPools";
-@import "modules/licenseKeyGroup";
-@import "modules/softwareProductLandingPage";
-@import "modules/softwareProductCreatePage";
-@import "modules/_softwareProductAttachmentPage";
-@import "modules/_softwareProductProcessesPage";
-@import "modules/_vspComponentQuestionnaire";
-@import "modules/_softwareProductComponentNetwork";
-@import "modules/_softwareProductComponentGeneral";
-@import "modules/_softwareproductComponentLoadBalancing";
-@import "modules/_softwareProductComponentProcessesPage";
-@import "modules/_softwareProductComponentImage";
-@import "modules/softwareProductComponentCompute";
-@import "modules/vspComponentCompute";
-@import "modules/vspComponentMonitoring";
-@import "modules/licenseModel";
-@import "modules/onboardingCatalog";
-@import "modules/workflows";
-@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";
+@import 'modules/licenseModelOverview';
+@import 'modules/licenseModelLimits';
+@import 'modules/licenseAgreement';
+@import 'modules/featureGroup';
+@import 'modules/entitlementPools';
+@import 'modules/licenseKeyGroup';
+@import 'modules/softwareProductLandingPage';
+@import 'modules/softwareProductCreatePage';
+@import 'modules/_softwareProductAttachmentPage';
+@import 'modules/_softwareProductProcessesPage';
+@import 'modules/_vspComponentQuestionnaire';
+@import 'modules/_softwareProductComponentNetwork';
+@import 'modules/_softwareProductComponentGeneral';
+@import 'modules/_softwareproductComponentLoadBalancing';
+@import 'modules/_softwareProductComponentProcessesPage';
+@import 'modules/_softwareProductComponentImage';
+@import 'modules/softwareProductComponentCompute';
+@import 'modules/vspComponentMonitoring';
+@import 'modules/licenseModel';
+@import 'modules/onboardingCatalog';
+@import 'modules/workflows';
+@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.scss b/openecomp-ui/resources/scss/bootstrap.scss
index 32890b3..7b6fed7 100644
--- a/openecomp-ui/resources/scss/bootstrap.scss
+++ b/openecomp-ui/resources/scss/bootstrap.scss
@@ -1,55 +1,43 @@
// DOX CORE
-@import "common/variables";
-@import "common/typography";
+@import 'common/variables';
+@import 'common/typography';
// Core variables and mixins
-@import "bootstrap-cust/variables";
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-// Reset and dependencies
-//@import "bootstrap/normalize";
-//@import "bootstrap/print";
-//@import "bootstrap/glyphicons";
+@import 'bootstrap-cust/variables';
+@import 'bootstrap/variables';
+@import 'bootstrap/mixins';
-// Core CSS
-//@import "bootstrap/scaffolding";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/grid";
-@import "bootstrap/tables";
-@import "bootstrap-cust/tables";
-@import "bootstrap/forms";
-@import "bootstrap-cust/forms";
+@import 'bootstrap/type';
+@import 'bootstrap/code';
+@import 'bootstrap/grid';
+@import 'bootstrap/tables';
+@import 'bootstrap-cust/tables';
+@import 'bootstrap/forms';
+@import 'bootstrap-cust/forms';
// Components
-@import "bootstrap/component-animations";
-@import "bootstrap/dropdowns";
-@import "bootstrap-cust/dropdowns";
-@import "bootstrap/button-groups";
-@import "bootstrap/input-groups";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
-@import "bootstrap/badges";
-@import "bootstrap/jumbotron";
-// @import "bootstrap/thumbnails";
-@import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
-@import "bootstrap/media";
-@import "bootstrap/list-group";
-@import "bootstrap-cust/list-group";
-@import "bootstrap/panels";
-@import "bootstrap-cust/panels";
-// @import "bootstrap/responsive-embed";
-//@import "bootstrap/wells";
-@import "bootstrap/close";
-@import "bootstrap-cust/close";
-// Components w/ JavaScript
-@import "bootstrap/modals";
-@import "bootstrap-cust/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-// @import "bootstrap/carousel";
-// Utility classes
-@import "bootstrap/utilities";
-@import "bootstrap/responsive-utilities";
+@import 'bootstrap/component-animations';
+@import 'bootstrap/dropdowns';
+@import 'bootstrap-cust/dropdowns';
+@import 'bootstrap/button-groups';
+@import 'bootstrap/input-groups';
+@import 'bootstrap/breadcrumbs';
+@import 'bootstrap/pagination';
+@import 'bootstrap/pager';
+@import 'bootstrap/labels';
+@import 'bootstrap/badges';
+@import 'bootstrap/jumbotron';
+@import 'bootstrap/alerts';
+@import 'bootstrap/progress-bars';
+@import 'bootstrap/media';
+@import 'bootstrap/list-group';
+@import 'bootstrap-cust/list-group';
+@import 'bootstrap/panels';
+@import 'bootstrap-cust/panels';
+@import 'bootstrap/close';
+@import 'bootstrap-cust/close';
+@import 'bootstrap/modals';
+@import 'bootstrap-cust/modals';
+@import 'bootstrap/tooltip';
+@import 'bootstrap/popovers';
+@import 'bootstrap/utilities';
+@import 'bootstrap/responsive-utilities';
diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss
index e4aa23f..b9cfd79 100644
--- a/openecomp-ui/resources/scss/common/_base.scss
+++ b/openecomp-ui/resources/scss/common/_base.scss
@@ -1,6 +1,6 @@
html {
- font-size: 100%;
- height: 100%;
+ font-size: 100%;
+ height: 100%;
}
body {
@@ -16,65 +16,70 @@
$ff-scrollbar-width: 17px;
/* scrollbar styling for Google Chrome | Safari | Opera */
::-webkit-scrollbar {
- width: $scrollbar-width;
- height: $scrollbar-height;
+ width: $scrollbar-width;
+ height: $scrollbar-height;
}
::-webkit-scrollbar-track {
- background-color: transparent;
- border-radius: 10px;
+ background-color: transparent;
+ border-radius: 10px;
}
::-webkit-scrollbar-thumb {
- border-radius: 10px;
- background-color: $light-gray;
- border-right: 2px solid $content-background-color;
+ border-radius: 10px;
+ background-color: $light-gray;
+ border-right: 2px solid $content-background-color;
}
/* Mozilla Firefox currently doesn't support scrollbar styling */
ul {
- list-style: none;
+ list-style: none;
}
-h1, h2, h3, h4, h5, h6, ul {
- margin: 0;
- padding: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul {
+ margin: 0;
+ padding: 0;
}
input {
-
- padding: 7px 10px;
+ padding: 7px 10px;
}
.disabled {
- opacity: 0.7 !important;
+ opacity: 0.7 !important;
}
fieldset {
- border: none;
+ border: none;
}
fieldset {
- label {
- display: inline-block;
- }
+ label {
+ display: inline-block;
+ }
}
.nav-tabs > li > a:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus {
- outline: none;
+ outline: none;
}
.box-hover {
- border: 1px solid $light-blue;
+ border: 1px solid $light-blue;
}
/* monkey patch */
.sdc-button.sdc-button__link.sdc-button.sdc-button__link {
- width: initial;
- &:focus {
- border: none;
- }
+ width: initial;
+ &:focus {
+ border: none;
+ }
}
diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss
index 6c6a0cf..58ed122 100644
--- a/openecomp-ui/resources/scss/common/_layout.scss
+++ b/openecomp-ui/resources/scss/common/_layout.scss
@@ -1,35 +1,53 @@
.sdc-app {
- height: 100%;
-
+ height: 100%;
}
.flex {
- display: flex;
- flex: 1;
+ display: flex;
+ flex: 1;
}
.flex-column {
- @extend .flex;
- flex-direction: column;
+ @extend .flex;
+ flex-direction: column;
}
.content-area {
- padding: 30px 60px 70px 60px;
- overflow-y: auto;
- overflow-x: hidden;
- height: 100%;
- &.no-padding-content-area {
- padding: 0;
- }
+ padding: 30px 60px 70px 60px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ height: 100%;
+ &.no-padding-content-area {
+ padding: 0;
+ }
}
-.onborading-modal {
- .modal-title {
- text-transform: uppercase;
- }
-}
.page-title {
- @extend .heading-1;
- @extend .text-uppercase !optional;
- margin-bottom: 20px;
- color: $blue;
+ @extend .heading-1;
+ @extend .text-uppercase !optional;
+ margin-bottom: 20px;
+ color: $blue;
+}
+.sdc-modal {
+ .sdc-modal__wrapper.sdc-modal-type-custom {
+ .sdc-modal__content {
+ padding: 0;
+ .entitlement-pools-modal,
+ .license-key-groups-modal,
+ .manage-permissions-page {
+ .validation-form-content {
+ overflow-y: visible;
+ }
+ }
+ .validation-form-content {
+ padding: 20px 40px;
+ overflow-y: auto;
+ .no-bottom-margin {
+ margin-bottom: 0;
+ .customized-date-picker {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index c4ae856..2308810 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,23 +1,24 @@
/* Fonts */
@mixin base-font-regular() {
- font-family: OpenSans, OpenSans-Regular, 'Open Sans',omnes-regular, Arial, sans-serif;
+ font-family: OpenSans, OpenSans-Regular, 'Open Sans', omnes-regular, Arial,
+ sans-serif;
}
@mixin base-font-light() {
- font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
+ font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
}
-@mixin base-font-italic(){
- font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
+@mixin base-font-italic() {
+ font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
}
@mixin base-font-semibold() {
- font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
+ font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
}
@mixin base-font-bold() {
- font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
+ font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
}
$heading-font-1: 28px;
@@ -34,109 +35,107 @@
$icon-font-size: 10px;
$icon-font-family: Arial;
-
.heading-1 {
- @include base-font-light;
- font-size: $heading-font-1;
+ @include base-font-light;
+ font-size: $heading-font-1;
}
.heading-2 {
- @include base-font-light;
- font-size: $heading-font-2;
+ @include base-font-light;
+ font-size: $heading-font-2;
}
.heading-3-light {
- @include base-font-light;
- font-size: $heading-font-3;
- @extend .text-uppercase !optional;
+ @include base-font-light;
+ font-size: $heading-font-3;
+ @extend .text-uppercase !optional;
}
.heading-3 {
- @include base-font-regular;
- font-size: $heading-font-3;
- @extend .text-uppercase !optional;
+ @include base-font-regular;
+ font-size: $heading-font-3;
+ @extend .text-uppercase !optional;
}
.heading-3-semibold {
- @include base-font-semibold;
- font-size: $heading-font-3;
- @extend .text-uppercase !optional;
+ @include base-font-semibold;
+ font-size: $heading-font-3;
+ @extend .text-uppercase !optional;
}
.heading-4 {
- @include base-font-regular;
- font-size: $heading-font-4;
+ @include base-font-regular;
+ font-size: $heading-font-4;
}
.heading-4-semibold {
- @include base-font-semibold;
- font-size: $heading-font-4;
+ @include base-font-semibold;
+ font-size: $heading-font-4;
}
.heading-5 {
- @include base-font-regular;
- font-size: $heading-font-5;
+ @include base-font-regular;
+ font-size: $heading-font-5;
}
.heading-5-semibold {
- @include base-font-semibold;
- font-size: $heading-font-5;
+ @include base-font-semibold;
+ font-size: $heading-font-5;
}
.body-1 {
- @include base-font-regular;
- font-size: $body-font-1;
+ @include base-font-regular;
+ font-size: $body-font-1;
}
.body-1-semibold {
- @include base-font-semibold;
- font-size: $body-font-1;
+ @include base-font-semibold;
+ font-size: $body-font-1;
}
.body-1-light {
- @include base-font-light;
- font-size: $body-font-1;
+ @include base-font-light;
+ font-size: $body-font-1;
}
.body-2 {
- @include base-font-regular;
- font-size: $body-font-2;
+ @include base-font-regular;
+ font-size: $body-font-2;
}
.body-2-semibold {
- @include base-font-semibold;
- font-size: $body-font-2;
+ @include base-font-semibold;
+ font-size: $body-font-2;
}
.body-3 {
- @include base-font-regular;
- font-size: $body-font-3;
+ @include base-font-regular;
+ font-size: $body-font-3;
}
.body-3-semibold {
- @include base-font-semibold;
- font-size: $body-font-3;
+ @include base-font-semibold;
+ font-size: $body-font-3;
}
.body-4 {
- @include base-font-regular;
- font-size: $body-font-4;
+ @include base-font-regular;
+ font-size: $body-font-4;
}
.body-4-semibold {
- @include base-font-semibold;
- font-size: $body-font-4;
+ @include base-font-semibold;
+ font-size: $body-font-4;
}
.body-3-light {
- @include base-font-light;
- font-size: $body-font-3;
+ @include base-font-light;
+ font-size: $body-font-3;
}
-
.warning-text {
- color: $yellow;
+ color: $yellow;
}
.error-text {
- color: $red;
+ color: $red;
}
diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
index 99b1ff5..aa1c0b6 100644
--- a/openecomp-ui/resources/scss/common/_utils.scss
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -1,5 +1,3 @@
-
-
/* Prefix */
$box-sizing-prefix: webkit moz spec;
@@ -14,163 +12,166 @@
$browserPrefixes: webkit moz o ms;
@mixin prefix($property, $value, $prefixeslist: 'all') {
- @if $prefixeslist == all {
- -webkit-#{$property}: $value;
- -moz-#{$property}: $value;
- -ms-#{$property}: $value;
- -o-#{$property}: $value;
- #{$property}: $value;
- } @else {
- @each $prefix in $prefixeslist {
- @if $prefix == webkit {
+ @if $prefixeslist == all {
-webkit-#{$property}: $value;
- } @else if $prefix == moz {
-moz-#{$property}: $value;
- } @else if $prefix == ms {
-ms-#{$property}: $value;
- } @else if $prefix == o {
-o-#{$property}: $value;
- } @else if $prefix == spec {
#{$property}: $value;
- } @else {
- @warn "No such prefix: #{$prefix}";
- }
+ } @else {
+ @each $prefix in $prefixeslist {
+ @if $prefix == webkit {
+ -webkit-#{$property}: $value;
+ } @else if $prefix == moz {
+ -moz-#{$property}: $value;
+ } @else if $prefix == ms {
+ -ms-#{$property}: $value;
+ } @else if $prefix == o {
+ -o-#{$property}: $value;
+ } @else if $prefix == spec {
+ #{$property}: $value;
+ } @else {
+ @warn "No such prefix: #{$prefix}";
+ }
+ }
}
- }
}
/* Value Prefix*/
@mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
-
- @if $prefixeslist == all {
- #{property} : -webkit-#{$valuesuffix}($from, $to);
- #{property} : -moz-#{$valuesuffix}($from, $to);
- #{property} : -o-#{$valuesuffix}($from, $to);
- #{property} : -ms-#{$valuesuffix}($from, $to);
-
- } @else {
- @each $prefix in $prefixeslist {
- @if $prefix == webkit {
- #{property} : -webkit-#{$valuesuffix}($from, $to);
- } @else if $prefix == moz {
- #{property} : -moz-#{$valuesuffix}($from, $to);
- } @else if $prefix == ms {
- #{property} : -ms-#{$valuesuffix}($from, $to);
- } @else if $prefix == o {
- #{property} : -o-#{$valuesuffix}($from, $to);
- } @else {
- @warn "No such prefix: #{$prefix}";
- }
+ @if $prefixeslist == all {
+ #{property}: -webkit-#{$valuesuffix}($from, $to);
+ #{property}: -moz-#{$valuesuffix}($from, $to);
+ #{property}: -o-#{$valuesuffix}($from, $to);
+ #{property}: -ms-#{$valuesuffix}($from, $to);
+ } @else {
+ @each $prefix in $prefixeslist {
+ @if $prefix == webkit {
+ #{property}: -webkit-#{$valuesuffix}($from, $to);
+ } @else if $prefix == moz {
+ #{property}: -moz-#{$valuesuffix}($from, $to);
+ } @else if $prefix == ms {
+ #{property}: -ms-#{$valuesuffix}($from, $to);
+ } @else if $prefix == o {
+ #{property}: -o-#{$valuesuffix}($from, $to);
+ } @else {
+ @warn "No such prefix: #{$prefix}";
+ }
+ }
}
- }
}
/* Box sizing */
@mixin box-sizing($value: border-box) {
- @include prefix(box-sizing, $value, $box-sizing-prefix);
+ @include prefix(box-sizing, $value, $box-sizing-prefix);
}
/* Borders & Shadows */
@mixin box-shadow($value) {
- @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
+ @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
}
@mixin text-shadow($value) {
- @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
+ @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
}
@mixin border-radius($value, $positions: all) {
- @if ($positions == all) {
- @include prefix(border-radius, $value, $border-radius-prefix);
- } @else {
- @each $position in $positions {
- @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+ @if ($positions == all) {
+ @include prefix(border-radius, $value, $border-radius-prefix);
+ } @else {
+ @each $position in $positions {
+ @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+ }
}
- }
-
}
@mixin transition($value) {
- @include prefix(transition, $value, $transition-prefix);
+ @include prefix(transition, $value, $transition-prefix);
}
/* Opacity */
@mixin opacity($alpha) {
- $ie-opacity: round($alpha * 100);
- opacity: $alpha;
- filter: unquote("alpha(opacity = #{$ie-opacity})");
+ $ie-opacity: round($alpha * 100);
+ opacity: $alpha;
+ filter: unquote('alpha(opacity = #{$ie-opacity})');
}
/* Ellipsis */
@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
- overflow: hidden;
- text-overflow: ellipsis;
- width: $width;
- white-space: nowrap;
- display: $display;
- max-width: $max-width;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: $width;
+ white-space: nowrap;
+ display: $display;
+ max-width: $max-width;
}
-@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
- overflow: hidden;
- position: relative;
- line-height: $lineHeight;
- max-height: $lineHeight * $lineCount;
- text-align: justify;
- word-break: break-all;
- // margin-right: -1em;
- padding-right: 1em;
- &:before {
- content: '...';
- position: absolute;
- right: 3px;
- bottom: 0;
- }
- &:after {
- content: '';
- position: absolute;
- right: 0;
- width: 1em;
- height: 1em;
- margin-top: 0.2em;
- background: $bgColor;
- }
+@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white) {
+ overflow: hidden;
+ position: relative;
+ line-height: $lineHeight;
+ max-height: $lineHeight * $lineCount;
+ text-align: justify;
+ word-break: break-all;
+ // margin-right: -1em;
+ padding-right: 1em;
+ &:before {
+ content: '...';
+ position: absolute;
+ right: 3px;
+ bottom: 0;
+ }
+ &:after {
+ content: '';
+ position: absolute;
+ right: 0;
+ width: 1em;
+ height: 1em;
+ margin-top: 0.2em;
+ background: $bgColor;
+ }
}
@mixin gradient($from, $to) {
- /* fallback/image non-cover color */
- background-color: $from;
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
- @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
+ /* fallback/image non-cover color */
+ background-color: $from;
+ background-image: -webkit-gradient(
+ linear,
+ 0% 0%,
+ 0% 100%,
+ from($from),
+ to($to)
+ );
+ @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
}
/* Vertical placement of multuple lines of text */
@mixin vertical-text($height) {
- position: absolute;
- top: 50%;
- margin-top: -$height/2;
+ position: absolute;
+ top: 50%;
+ margin-top: -$height/2;
}
@mixin text-vertical-align($align: middle) {
- display: table;
- width: 100%;
+ display: table;
+ width: 100%;
- & > * {
- vertical-align: $align;
- display: table-cell;
- }
+ & > * {
+ vertical-align: $align;
+ display: table-cell;
+ }
}
@mixin center-element($width) {
- width: $width;
- margin-left: auto;
- margin-right: auto;
+ width: $width;
+ margin-left: auto;
+ margin-right: auto;
}
@mixin center-content($width) {
- & > * {
- @include center-element($width);
- }
+ & > * {
+ @include center-element($width);
+ }
}
/* transform-rotate */
@@ -179,9 +180,9 @@
// @param
// $deg - angle in degrees
@mixin transform-rotate($deg) {
- transform: rotate($deg + deg); /* IE10 and Mozilla */
- -ms-transform: rotate($deg + deg); /* IE 9 */
- -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
+ transform: rotate($deg + deg); /* IE10 and Mozilla */
+ -ms-transform: rotate($deg + deg); /* IE 9 */
+ -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
}
/* transform-translate */
@@ -190,9 +191,9 @@
// @param
// $deg - angle in degrees
@mixin transform-translate($x, $y) {
- transform: translate($x, $y); /* IE10 and Mozilla */
- -ms-transform: translate($x, $y); /* IE 9 */
- -webkit-transform: translate($x, $y); /* Safari and Chrome */
+ transform: translate($x, $y); /* IE10 and Mozilla */
+ -ms-transform: translate($x, $y); /* IE 9 */
+ -webkit-transform: translate($x, $y); /* Safari and Chrome */
}
/* transform-scale */
@@ -203,104 +204,102 @@
// @param
// $height - height
@mixin transform-scale($width, $height) {
- transform: scale($width, $height); /* IE10 and Mozilla */
- -ms-transform: scale($width, $height); /* IE 9 */
- -webkit-transform: scale($width, $height); /* Safari and Chrome */
+ transform: scale($width, $height); /* IE10 and Mozilla */
+ -ms-transform: scale($width, $height); /* IE 9 */
+ -webkit-transform: scale($width, $height); /* Safari and Chrome */
}
@mixin scrollable() {
- ::-webkit-scrollbar {
- width: 8px;
- }
+ ::-webkit-scrollbar {
+ width: 8px;
+ }
}
@mixin create-circle($size, $bgcolor) {
- border-radius: 50%;
- width: $size;
- height: $size;
- background: $bgcolor;
- border: 3px solid $bgcolor;
- display: flex;
- align-items: center;
- justify-content: center;
+ border-radius: 50%;
+ width: $size;
+ height: $size;
+ background: $bgcolor;
+ border: 3px solid $bgcolor;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
/**/
@mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
-
- @keyframes #{$animationType} {
- from {
- $startIndex: 1;
- @each $property in $properties {
- #{$property}: nth($fromValue, $startIndex);
- $startIndex: $startIndex + 1;
- }
+ @keyframes #{$animationType} {
+ from {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($fromValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ to {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($toValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
}
- to {
- $startIndex: 1;
- @each $property in $properties {
- #{$property}: nth($toValue, $startIndex);
- $startIndex: $startIndex + 1;
- }
+ @-moz-keyframes #{$animationType} {
+ /* Firefox */
+ from {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($fromValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ to {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($toValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
}
- }
- @-moz-keyframes #{$animationType}{
- /* Firefox */
- from {
- $startIndex: 1;
- @each $property in $properties {
- #{$property}: nth($fromValue, $startIndex);
- $startIndex: $startIndex + 1;
- }
+ @-webkit-keyframes #{$animationType} {
+ /* Safari and Chrome */
+ from {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($fromValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ to {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($toValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
}
- to {
- $startIndex: 1;
- @each $property in $properties {
- #{$property}: nth($toValue, $startIndex);
- $startIndex: $startIndex + 1;
- }
+ @-o-keyframes #{$animationType} {
+ /* Opera */
+ from {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($fromValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
+ to {
+ $startIndex: 1;
+ @each $property in $properties {
+ #{$property}: nth($toValue, $startIndex);
+ $startIndex: $startIndex + 1;
+ }
+ }
}
- }
- @-webkit-keyframes #{$animationType} {
- /* Safari and Chrome */
- from {
- $startIndex: 1;
- @each $property in $properties {
- #{$property}: nth($fromValue, $startIndex);
- $startIndex: $startIndex + 1;
- }
- }
- to {
- $startIndex: 1;
- @each $property in $properties {
- #{$property}: nth($toValue, $startIndex);
- $startIndex: $startIndex + 1;
- }
- }
- }
- @-o-keyframes #{$animationType} {
- /* Opera */
- from {
- $startIndex: 1;
- @each $property in $properties {
- #{$property}: nth($fromValue, $startIndex);
- $startIndex: $startIndex + 1;
- }
- }
- to {
- $startIndex: 1;
- @each $property in $properties {
- #{$property}: nth($toValue, $startIndex);
- $startIndex: $startIndex + 1;
- }
- }
- }
}
-
/**/
@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
- @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
+ @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
}
/* percent-plus-value */
@@ -308,6 +307,6 @@
// Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels)
// to a percentage of container height/width
@mixin percent-plus-value($property, $value, $percent: 100%) {
- $string: 'calc(' + $percent + ' + ' + $value + ')';
- #{$property}: unquote($string);
+ $string: 'calc(' + $percent + ' + ' + $value + ')';
+ #{$property}: unquote($string);
}
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 6ea204a..48d9f4b 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -1,4 +1,3 @@
-
// primary colors
$blue: #009fdb;
$dark-blue: #0568ae;
@@ -29,7 +28,7 @@
$tlv-light-gray: #eaeaea;
$tlv-hover: #e6f6fb;
$highlight-gray: #eceff3;
-$transparent-black: rgba(0,0,0,.3);
+$transparent-black: rgba(0, 0, 0, 0.3);
$content-background-color: $white;
@@ -44,8 +43,9 @@
$laptop-min-width: 1224px;
$desktop-min-width: 1824px;
+$loader-background: #e1e4e6;
-
-
-
-
+$action-button-active-bg: #0091c7;
+$action-button-active-border: #006186;
+$action-button-hover-bg: #1ec2ff;
+$action-button-hover-border: #0091c8;
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 7a5b77b..dbe805f 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -1,101 +1,98 @@
$message-info-icon-size: 16px;
@mixin status-icon-class {
- @extend .body-1-light;
- width: $message-info-icon-size;
- height: $message-info-icon-size;
- margin-left: 8px;
- color: $white;
- border-radius: $message-info-icon-size / 2;
- display: inline-block;
- text-align: center;
+ @extend .body-1-light;
+ width: $message-info-icon-size;
+ height: $message-info-icon-size;
+ margin-left: 8px;
+ color: $white;
+ border-radius: $message-info-icon-size / 2;
+ display: inline-block;
+ text-align: center;
}
.activity-log-view {
+ .list-editor-view .list-editor-view-header {
+ border: none;
+ .list-editor-view-title {
+ @extend .heading-1;
+ color: $blue;
+ }
+ }
+ .list-editor-view-list {
+ border: 1px solid $light-gray;
+ border-bottom: none;
+ overflow-y: hidden;
+ }
+ .activity-list-item {
+ display: flex;
+ height: 36px;
+ @extend .body-1;
+ &.header {
+ @extend .body-1-semibold;
+ background-color: $tlv-light-gray;
+ color: $text-black;
+ }
+ }
- .list-editor-view .list-editor-view-header {
- border: none;
- .list-editor-view-title {
- @extend .heading-1;
- color: $blue;
- }
- }
- .list-editor-view-list {
- border: 1px solid $light-gray;
- border-bottom: none;
- overflow-y: hidden;
- }
- .activity-list-item {
- display: flex;
- height: 36px;
- @extend .body-1;
- &.header {
- @extend .body-1-semibold;
- background-color: $tlv-light-gray;
- color: $text-black;
- }
- }
+ .activity-status {
+ .svg-icon-wrapper {
+ float: right;
+ }
- .activity-status {
- .svg-icon-wrapper {
- float: right;
- }
+ .status-icon.false:after {
+ @include status-icon-class;
+ float: right;
+ background-color: $red;
+ content: '!';
+ }
+ }
- .status-icon.false:after {
- @include status-icon-class;
- float: right;
- background-color: $red;
- content: "!";
- }
- }
+ .message-further-info-icon {
+ @include status-icon-class;
+ background-color: $gray;
+ }
- .message-further-info-icon {
- @include status-icon-class;
- background-color: $gray;
- }
+ .table-cell {
+ border-right: 1px solid $light-gray;
+ border-bottom: 1px solid $light-gray;
+ &:last-child {
+ border-right: none;
+ }
+ flex-basis: 20%;
+ display: flex;
+ padding: 0 20px;
+ justify-content: center;
+ flex-direction: column;
+ &.activity-comment {
+ min-width: 0;
+ span {
+ @include ellipsis(100%);
+ }
+ }
+ }
- .table-cell {
- border-right: 1px solid $light-gray;
- border-bottom: 1px solid $light-gray;
- &:last-child {
- border-right: none;
- }
- flex-basis: 20%;
- display: flex;
- padding: 0 20px;
- justify-content: center;
- flex-direction: column;
- &.activity-comment {
- min-width: 0;
- span {
- @include ellipsis(100%);
- }
- }
- }
+ .date-header {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ .header-sort-arrow {
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ margin-left: 9px;
+ &.up {
+ border-bottom: 5px solid $black;
+ }
+ &.down {
+ border-top: 5px solid $black;
+ }
+ }
+ }
- .date-header {
- cursor: pointer;
- display: flex;
- align-items: center;
- .header-sort-arrow {
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- margin-left: 9px;
- &.up {
- border-bottom: 5px solid $black;
- }
- &.down {
- border-top: 5px solid $black;
- }
-
- }
- }
-
- .date-cell {
- display: flex;
- justify-content: space-between;
- }
-
+ .date-cell {
+ display: flex;
+ justify-content: space-between;
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_commitModal.scss b/openecomp-ui/resources/scss/components/_commitModal.scss
index e7f5d28..47036ea 100644
--- a/openecomp-ui/resources/scss/components/_commitModal.scss
+++ b/openecomp-ui/resources/scss/components/_commitModal.scss
@@ -1,10 +1,9 @@
-
.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
+ .commit-modal-text {
+ padding-bottom: 30px;
+ }
+ .validation-buttons .sdc-button-default {
+ min-width: 94px;
+ width: auto;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
index d51a1b6..e9c0f40 100644
--- a/openecomp-ui/resources/scss/components/_datepicker.scss
+++ b/openecomp-ui/resources/scss/components/_datepicker.scss
@@ -1,67 +1,163 @@
.customized-date-picker {
- margin-bottom: 24px;
- display: flex;
- .date-picker-label {
- &.required {
- &:before {
- content: "*";
- color: $red;
- margin: 0 4px 0 0;
- }
- }
+ margin-bottom: 24px;
+ display: flex;
+ > div:first-child {
+ flex: 1;
+ display: flex;
+ }
+ .react-datepicker-wrapper {
+ display: flex;
+ flex: 1;
+ }
+ .date-picker-label {
+ &.required {
+ &:before {
+ content: '*';
+ color: $red;
+ margin: 0 4px 0 0;
+ }
+ }
- @extend .body-2-semibold;
- color: $dark-gray;
- margin-bottom: 8px;
- }
- .react-datepicker__input-container {
- flex: 1;
- cursor: pointer;
- }
- .datepicker-custom-input {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 30px;
- border-radius: 2px;
- color: $dark-gray;
- border: 1px solid $light-gray;
- padding: 6px 8px 6px 12px;
- .clear-input {
- margin-left: auto;
- margin-right: 8px;
- .svg-icon {
- fill: transparent;
- height: 8px;
- width: 8px;
- }
- }
- &:hover {
- border-color: $gray;
- .clear-input {
- .svg-icon {
- fill: initial;
- }
- }
- }
- .datepicker-text {
- cursor: pointer;
- @extend .body-1;
- &.placeholder {
- color: $light-gray;
- }
+ @extend .body-2-semibold;
+ color: $dark-gray;
+ margin-bottom: 8px;
+ }
+ .react-datepicker__input-container {
+ flex: 1;
+ cursor: pointer;
+ }
+ .datepicker-custom-input {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 30px;
+ border-radius: 2px;
+ color: $dark-gray;
+ border: 1px solid $light-gray;
+ padding: 6px 8px 6px 12px;
+ .clear-input {
+ margin-left: auto;
+ margin-right: 8px;
+ .svg-icon {
+ fill: transparent;
+ height: 8px;
+ width: 8px;
+ }
+ }
+ &:hover {
+ border-color: $gray;
+ .clear-input {
+ .svg-icon {
+ fill: initial;
+ }
+ }
+ }
+ .datepicker-text {
+ cursor: pointer;
+ @extend .body-1;
+ &.placeholder {
+ color: $light-gray;
+ }
+ }
+ .calendar-input {
+ fill: $light-gray;
+ }
+ .svg-icon-wrapper.calendar {
+ .svg-icon {
+ fill: $dark-gray;
+ width: 17px;
+ height: 17px;
+ }
+ }
+ }
+ /* Out of namespace context for datepicker */
+ div.customized-date-picker-calendar {
+ @import 'common/variables';
+ @import 'common/typography';
+ border-color: $light-gray;
+ //margin-top: -8px;
+ color: $black;
+ .react-datepicker__triangle {
+ margin-top: 0px;
+ display: none;
+ }
- }
- .calendar-input {
- fill: $light-gray;
- }
- .svg-icon-wrapper.calendar {
- .svg-icon {
- fill: $dark-gray;
- width: 17px;
- height: 17px;
- }
- }
- }
+ .react-datepicker__navigation--previous::before,
+ .react-datepicker__navigation--next::before {
+ width: 8px;
+ height: 8px;
+ display: inline-block;
+ position: absolute;
+ top: -4px;
+ }
+ .react-datepicker__navigation--previous::before {
+ left: 0;
+ content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
+ }
+ .react-datepicker__navigation--next::before {
+ right: 0;
+ content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
+ }
+
+ .react-datepicker__navigation--previous,
+ .react-datepicker__navigation--next {
+ border: none;
+ }
+
+ .react-datepicker__month-container {
+ .react-datepicker__header {
+ background-color: $background-gray;
+ border-bottom: none;
+ .react-datepicker__current-month {
+ @extend .body-1-semibold;
+ background-color: $background-gray;
+ margin-bottom: 10px;
+ }
+ .react-datepicker__day-names {
+ @extend .body-1;
+ background-color: $white;
+ }
+ }
+ .react-datepicker__day--selected,
+ .react-datepicker__day--keyboard-selected {
+ @extend .body-1;
+ background-color: $blue;
+ color: $white;
+ }
+ .react-datepicker__day {
+ border-radius: 0px;
+ margin: 0;
+ flex: 1;
+ @extend .body-1;
+ }
+
+ .react-datepicker__day--in-range,
+ .react-datepicker__day--in-selecting-range {
+ background-color: $tlv-hover;
+ color: $black;
+ &.react-datepicker__day--selected,
+ &.react-datepicker__day--keyboard-selected,
+ &.react-datepicker__day--range-start,
+ &.react-datepicker__day--range-end {
+ background-color: $blue;
+ color: $white;
+ }
+ &.react-datepicker__day--selecting-range-start,
+ &.react-datepicker__day--selecting-range-end {
+ background-color: lighten($blue, 40%);
+ color: $black;
+ }
+ &.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
+ &.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
+ &.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
+ background-color: $blue;
+ color: $white;
+ }
+ }
+
+ .react-datepicker__week {
+ display: flex;
+ }
+ }
+ }
}
-
diff --git a/openecomp-ui/resources/scss/components/_dropzone.scss b/openecomp-ui/resources/scss/components/_dropzone.scss
index 2479ae7..31a67d9 100644
--- a/openecomp-ui/resources/scss/components/_dropzone.scss
+++ b/openecomp-ui/resources/scss/components/_dropzone.scss
@@ -1,31 +1,30 @@
-
.active-dragging {
- border: 3px dashed $dark-blue;
- border-radius: 20px;
- .draggable-wrapper {
- opacity: 0.5;
- }
+ border: 3px dashed $dark-blue;
+ border-radius: 20px;
+ .draggable-wrapper {
+ 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;
- }
+ @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 0c7d82e..65702df 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -1,53 +1,53 @@
.dual-list-box {
- display: flex;
- margin: 25px 0 10px 0;
- .svg-icon.search {
- height: 14px;
- width: 14px;
- }
-
- .dual-search-multi-select-section {
- flex: 1;
-
- .dual-text-box-search {
- margin: 5px 0 30px 0;
+ display: flex;
+ margin: 25px 0 10px 0;
+ .svg-icon.search {
+ height: 14px;
+ width: 14px;
}
- .dual-list-box-multi-select {
- flex: 1 1;
- display: flex;
- height: 166px;
- margin-bottom: 0;
- select {
- width: 100%;
- margin: 0;
- padding: 0;
- overflow-y: scroll;
- height: inherit;
- option {
- padding: 4px 0 4px 10px;
+
+ .dual-search-multi-select-section {
+ flex: 1;
+
+ .dual-text-box-search {
+ margin: 5px 0 30px 0;
}
- }
- option:checked {
- background: $blue linear-gradient(0deg, $blue 0%, $blue 100%);
- }
+ .dual-list-box-multi-select {
+ flex: 1 1;
+ display: flex;
+ height: 166px;
+ margin-bottom: 0;
+ select {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ overflow-y: scroll;
+ height: inherit;
+ option {
+ padding: 4px 0 4px 10px;
+ }
+ }
+ option:checked {
+ background: $blue linear-gradient(0deg, $blue 0%, $blue 100%);
+ }
+ }
}
- }
- .dual-list-options-bar {
- margin: 62px 54px 27px 54px;
- padding-top: 23px;
- .svg-icon {
- width: 14px;
- height: 14px;
- }
- .dual-list-option {
- text-align: center;
- line-height: 10px;
- font-size: 25px;
- width: 20px;
- height: 15px;
- cursor: pointer;
- margin-top: 20px;
- fill: $blue;
+ .dual-list-options-bar {
+ margin: 62px 54px 27px 54px;
+ padding-top: 23px;
+ .svg-icon {
+ width: 14px;
+ height: 14px;
+ }
+ .dual-list-option {
+ text-align: center;
+ line-height: 10px;
+ font-size: 25px;
+ width: 20px;
+ height: 15px;
+ cursor: pointer;
+ margin-top: 20px;
+ fill: $blue;
+ }
}
- }
}
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
index 2484a73..0508fac 100644
--- a/openecomp-ui/resources/scss/components/_expandableInput.scss
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -1,56 +1,55 @@
.expandable-input-top {
- display: flex;
- height: 22px;
- .expandable-input-wrapper {
- display: flex;
- &.closed {
- .svg-icon
- {
- &.__search {
- height: 17px;
- width: 17px;
- transition: fill 0.5s ease-in;
- fill: $blue;
- cursor: pointer;
- &:hover {
- transition: fill 0.5s ease-in;
- fill: $dark-blue;
- }
- }
- }
- }
- &.opened {
- .svg-icon-wrapper {
- margin-left: 3px;
- }
- .svg-icon {
- &.__search {
- height: 17px;
- width: 17px;
- fill: $dark-blue;
- }
- }
- .svg-icon {
- &.__close {
- margin-left: 7px;
- opacity: 0.6;
- fill: $dark-gray;
- &:hover {
- opacity: 1;
- }
- }
- }
- }
- .expandable-input-control {
- .form-control {
- border: none;
- background-color: transparent;
- border-radius: 0;
- border-bottom: 1px solid $gray;
- height: 22px;
- padding: 0 5px;
- }
- margin: 0;
- }
- }
+ display: flex;
+ height: 22px;
+ .expandable-input-wrapper {
+ display: flex;
+ &.closed {
+ .svg-icon {
+ &.__search {
+ height: 17px;
+ width: 17px;
+ transition: fill 0.5s ease-in;
+ fill: $blue;
+ cursor: pointer;
+ &:hover {
+ transition: fill 0.5s ease-in;
+ fill: $dark-blue;
+ }
+ }
+ }
+ }
+ &.opened {
+ .svg-icon-wrapper {
+ margin-left: 3px;
+ }
+ .svg-icon {
+ &.__search {
+ height: 17px;
+ width: 17px;
+ fill: $dark-blue;
+ }
+ }
+ .svg-icon {
+ &.__close {
+ margin-left: 7px;
+ opacity: 0.6;
+ fill: $dark-gray;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ .expandable-input-control {
+ .form-control {
+ border: none;
+ background-color: transparent;
+ border-radius: 0;
+ border-bottom: 1px solid $gray;
+ height: 22px;
+ padding: 0 5px;
+ }
+ margin: 0;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 58e8430..40c1aa1 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -1,76 +1,76 @@
.section-title {
- @extend .heading-3-semibold;
- padding: 50px 0 20px 0;
- &:first-child {
- padding-top: 0;
- }
+ @extend .heading-3-semibold;
+ padding: 50px 0 20px 0;
+ &:first-child {
+ padding-top: 0;
+ }
}
.validation-form-content {
- fieldset[disabled] {
- .form-group {
- opacity: 0.7;
- cursor: auto;
- pointer-events: none;
- .dropdown-multi-select {
- .form-group {
- opacity: 1;
- }
- .Select-control {
- background-color: $tlv-light-gray;
- }
- }
- }
- }
+ fieldset[disabled] {
+ .form-group {
+ opacity: 0.7;
+ cursor: auto;
+ pointer-events: none;
+ .dropdown-multi-select {
+ .form-group {
+ opacity: 1;
+ }
+ .Select-control {
+ background-color: $tlv-light-gray;
+ }
+ }
+ }
+ }
}
.dropdown-multi-select {
- .Select {
- display: block;
- width: 100%;
- .Select-menu-outer {
- .Select-option {
- &:hover {
- background-color: $blue;
- color: $white;
- }
- }
- }
- .Select-control {
- height: 28px;
- border-radius: 2px;
- .Select-input {
- height: 28px;
- input {
- height: 28px;
- padding: 0;
+ .Select {
+ display: block;
+ width: 100%;
+ .Select-menu-outer {
+ .Select-option {
+ &:hover {
+ background-color: $blue;
+ color: $white;
+ }
+ }
}
- }
- .Select-placeholder {
- line-height: 30px;
- }
+ .Select-control {
+ height: 28px;
+ border-radius: 2px;
+ .Select-input {
+ height: 28px;
+ input {
+ height: 28px;
+ padding: 0;
+ }
+ }
+ .Select-placeholder {
+ line-height: 30px;
+ }
+ }
+ &.Select--multi {
+ .Select-value {
+ color: $text-black;
+ background-color: $background-gray;
+ border: none;
+ margin: 3px 0 3px 10px;
+ border-radius: 10px;
+ padding-left: 8px;
+ padding-right: 6px;
+ }
+ .Select-value-icon {
+ border: none;
+ float: right;
+ &:hover {
+ background-color: inherit;
+ color: inherit;
+ }
+ }
+ .Select-arrow-zone {
+ padding-top: 4px;
+ }
+ }
}
- &.Select--multi {
- .Select-value {
- color: $text-black;
- background-color: $background-gray;
- border: none;
- margin: 3px 0 3px 10px;
- border-radius: 10px;
- padding-left: 8px;
- padding-right: 6px;
- }
- .Select-value-icon {
- border: none;
- float: right;
- &:hover {
- background-color: inherit;
- color: inherit;
- }
- }
- .Select-arrow-zone {
- padding-top: 4px;
- }
- }
- }
}
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index f210b64..595b0cd 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,71 +1,71 @@
.grid-section {
- $gridItemSpace: 15%;
+ $gridItemSpace: 15%;
- @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: ' ';
- }
+ @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: ' ';
+ }
+ }
}
- }
- @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
- .#{grid-col- + $numOfCols} {
- @extend %grid-col-base;
- &:not(.last-col-in-row) {
- flex-basis: $flexBasis;
- margin-right: 5%;
- }
- &.last-col-in-row {
- flex-basis: $flexBasisLast;
- }
+ @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
+ .#{grid-col- + $numOfCols} {
+ @extend %grid-col-base;
+ &:not(.last-col-in-row) {
+ flex-basis: $flexBasis;
+ margin-right: 5%;
+ }
+ &.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;
+ &:not(:last-of-type) {
+ padding-bottom: 30px;
}
- }
- &.has-last-col-set {
- @include gridColWithLastColumn(1, 21%, 22%);
- @include gridColWithLastColumn(2, 47%, 48%);
- @include gridColWithLastColumn(3, 73%, 74%);
- @include gridColWithLastColumn(4, 100%, 100%);
- }
+ .grid-items {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
- &:not(.has-last-col-set) {
- @include gridCol(1, 25%);
- @include gridCol(2, 50%);
- @include gridCol(3, 75%);
- @include gridCol(4, 100%);
- }
+ %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/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss
index face03d..eb0fe79 100644
--- a/openecomp-ui/resources/scss/components/_inputOptions.scss
+++ b/openecomp-ui/resources/scss/components/_inputOptions.scss
@@ -1,85 +1,84 @@
.disabled {
- .Select-control {
- background-color: $tlv-light-gray;
- .Select-placeholder {
- color: $dark-gray;
- }
- }
+ .Select-control {
+ background-color: $tlv-light-gray;
+ .Select-placeholder {
+ color: $dark-gray;
+ }
+ }
}
.input-options {
- display: flex;
- border: 1px solid $light-gray;
- border-radius: 2px;
- height: 30px;
- &:hover {
- border-color: $gray;
- }
- .input-options-select {
- float: left;
- border: none;
- transition-property: width;
- transition-duration: 300ms;
- padding-top:0px;
- padding-bottom: 0px;
- height:28px;
-
- }
-
- .input-options-other{
- float: left;
+ display: flex;
+ border: 1px solid $light-gray;
+ border-radius: 2px;
height: 30px;
- border: none;
- padding-top:0px;
- padding-bottom: 0px;
- height:28px;
- }
- .input-options-separator {
- width: 1px;
- height: 24px;
- margin-top: 2px;
- margin-bottom: 2px;
- border:1px solid $light-gray;
- }
+ &:hover {
+ border-color: $gray;
+ }
+ .input-options-select {
+ float: left;
+ border: none;
+ transition-property: width;
+ transition-duration: 300ms;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ height: 28px;
+ }
+
+ .input-options-other {
+ float: left;
+ height: 30px;
+ border: none;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ height: 28px;
+ }
+ .input-options-separator {
+ width: 1px;
+ height: 24px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ border: 1px solid $light-gray;
+ }
}
.input-options.has-error {
- border-color: $crimson;
+ border-color: $crimson;
}
.bootstrap-input-options {
- display: flex;
- flex-direction: column;
- .input-options-select {
- border: 1px solid $light-gray;
- border-radius: 2px;
- height: 30px;
- float: left;
- transition-property: width;
- transition-duration: 300ms;
- padding-top: 0px;
- padding-bottom: 0px;
- width: 100%;
- &:hover {
- border-color: $gray;
- }
- }
- .input-options-other {
- float: left;
- height: 30px;
- border: none;
- padding-top: 0px;
- padding-bottom: 0px;
- height: 28px;
- }
- .input-options-separator {
- width: 1px;
- height: 24px;
- margin-top: 2px;
- margin-bottom: 2px;
- border: 1px solid $light-gray;
- }
- &.has-error {
- border-color: $crimson;
- }
+ display: flex;
+ flex-direction: column;
+ .input-options-select {
+ border: 1px solid $light-gray;
+ border-radius: 2px;
+ height: 30px;
+ float: left;
+ transition-property: width;
+ transition-duration: 300ms;
+ padding-top: 0;
+ padding-bottom: 0;
+ width: 100%;
+ &:hover {
+ border-color: $gray;
+ }
+ }
+ .input-options-other {
+ float: left;
+ height: 30px;
+ border: none;
+ padding-top: 0;
+ padding-bottom: 0;
+ height: 28px;
+ }
+ .input-options-separator {
+ width: 1px;
+ height: 24px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ border: 1px solid $light-gray;
+ }
+ &.has-error {
+ border-color: $crimson;
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 354a6a1..9bda78e 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -1,162 +1,160 @@
.list-editor-view {
- @extend .flex-column;
- background-color: $content-background-color;
-
- .expandble-search-wrapper {
- display: flex;
- justify-content: flex-end;
- margin-top: 10px;
- }
-
- .list-editor-view-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-end;
- border-bottom: 1px solid $light-gray;
- padding-bottom: 5px;
- .list-editor-view-title {
- @extend .heading-3-semibold;
- }
- }
-
- .list-editor-view-list-scroller {
- @extend .flex;
- overflow: auto;
- margin: 18px 0 30px 0;
- }
-
- .list-editor-view-list {
@extend .flex-column;
+ background-color: $content-background-color;
- .list-editor-item-view {
- margin: 8px 0;
- border: 1px solid $light-gray;
- background-color: $white;
- display: flex;
- min-height: 100px;
- overflow: hidden;
- .list-editor-item-view-content {
- padding: 10px 28px;
+ .expandble-search-wrapper {
display: flex;
- flex: 1 1;
- .list-editor-item-view-field {
- flex: 1 1;
- color: $black;
- padding: 0;
- @include ellipsis;
- overflow-wrap: break-word;
- white-space: initial;
-
-
- .number-field {
- align-content: center;
- }
- .title {
- @extend .body-1;
- padding-bottom: 5px;
- &:not(:first-child) {
- line-height: 0.9;
- }
- }
- .description {
- @include multiline-ellipsis(1.3em, 3);
- }
- .text {
- @extend .body-1;
- }
- .textEllipses {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- padding-right: 5px;
- }
- }
- }
- .list-editor-item-view-controller {
- display: flex;
- flex-basis: 5%;
- align-self: center;
- justify-content: center;
- flex-direction: column;
- .svg-icon-wrapper {
- &:first-child {
- margin-bottom: 10px;
- }
- }
- .svg-icon {
- margin-top: 5px;
- transition: fill .3s;
- fill: $white;
- }
- }
- &.selectable:hover{
- @extend .box-hover;
- cursor: pointer;
- .list-editor-item-view-controller {
- .svg-icon {
- fill: $dark-gray;
- &:hover {
- fill: $black;
- }
- }
- }
- }
+ justify-content: flex-end;
+ margin-top: 10px;
}
- &.two-columns {
- flex-direction: row;
- flex-wrap: wrap;
+ .list-editor-view-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ border-bottom: 1px solid $light-gray;
+ padding-bottom: 5px;
+ .list-editor-view-title {
+ @extend .heading-3-semibold;
+ }
+ }
- .list-editor-item-view {
- .list-editor-item-view-content {
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 10px 18px 10px 0;
- .list-editor-item-view-field {
- flex: 0.3 1;
+ .list-editor-view-list-scroller {
+ @extend .flex;
+ overflow: auto;
+ margin: 18px 0 30px 0;
+ }
+
+ .list-editor-view-list {
+ @extend .flex-column;
+
+ .list-editor-item-view {
+ margin: 8px 0;
+ border: 1px solid $light-gray;
+ background-color: $white;
display: flex;
- justify-content: center;
- flex-direction: column;
- height: 100%;
- border-right : 1px solid $light-gray;
- margin-left: 18px;
- &:last-child{
- border: none;
- flex: 1;
- }
- .details{
- display: flex;
- flex-direction: row;
- .title {
- padding: 0;
- margin-right: 5px;
- }
- }
+ min-height: 100px;
+ overflow: hidden;
+ .list-editor-item-view-content {
+ padding: 10px 28px;
+ display: flex;
+ flex: 1 1;
+ .list-editor-item-view-field {
+ flex: 1 1;
+ color: $black;
+ padding: 0;
+ @include ellipsis;
+ overflow-wrap: break-word;
+ white-space: initial;
- .details-col{
- flex-direction: column;
- .title {
- padding-bottom: 0;
- }
+ .number-field {
+ align-content: center;
+ }
+ .title {
+ @extend .body-1;
+ padding-bottom: 5px;
+ &:not(:first-child) {
+ line-height: 0.9;
+ }
+ }
+ .description {
+ @include multiline-ellipsis(1.3em, 3);
+ }
+ .text {
+ @extend .body-1;
+ }
+ .textEllipses {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding-right: 5px;
+ }
+ }
}
-
- .description {
- @extend .body-1;
- @include multiline-ellipsis(1.3em, 3);
+ .list-editor-item-view-controller {
+ display: flex;
+ flex-basis: 5%;
+ align-self: center;
+ justify-content: center;
+ flex-direction: column;
+ .svg-icon-wrapper {
+ &:first-child {
+ margin-bottom: 10px;
+ }
+ }
+ .svg-icon {
+ margin-top: 5px;
+ transition: fill 0.3s;
+ fill: $white;
+ }
}
- }
+ &.selectable:hover {
+ @extend .box-hover;
+ cursor: pointer;
+ .list-editor-item-view-controller {
+ .svg-icon {
+ fill: $dark-gray;
+ &:hover {
+ fill: $black;
+ }
+ }
+ }
+ }
}
+ &.two-columns {
+ flex-direction: row;
+ flex-wrap: wrap;
- &:nth-child(odd){
- flex: 0 0 48.5%;
- margin-right: 50px;
+ .list-editor-item-view {
+ .list-editor-item-view-content {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 10px 18px 10px 0;
+ .list-editor-item-view-field {
+ flex: 0.3 1;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+ border-right: 1px solid $light-gray;
+ margin-left: 18px;
+ &:last-child {
+ border: none;
+ flex: 1;
+ }
+ .details {
+ display: flex;
+ flex-direction: row;
+ .title {
+ padding: 0;
+ margin-right: 5px;
+ }
+ }
+
+ .details-col {
+ flex-direction: column;
+ .title {
+ padding-bottom: 0;
+ }
+ }
+
+ .description {
+ @extend .body-1;
+ @include multiline-ellipsis(1.3em, 3);
+ }
+ }
+ }
+
+ &:nth-child(odd) {
+ flex: 0 0 48.5%;
+ margin-right: 50px;
+ }
+ &:nth-child(even) {
+ flex: 1;
+ margin-right: 0;
+ }
+ }
}
- &:nth-child(even) {
- flex: 1;
- margin-right: 0;
- }
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/components/_loader.scss b/openecomp-ui/resources/scss/components/_loader.scss
index ddff9af..ee7f6f3 100644
--- a/openecomp-ui/resources/scss/components/_loader.scss
+++ b/openecomp-ui/resources/scss/components/_loader.scss
@@ -1,159 +1,159 @@
.onboarding-loader {
- .onboarding-loader-backdrop {
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- position: absolute;
- background-color: #E1E4E6;
- opacity: 0.5;
- }
- .tlv-loader {
- height: 63px;
- width: 63px;
- position: absolute;
- top: 30%;
- left: 50%;
- margin-top: -10.5px;
- margin-left: -10.5px;
- }
- .tlv-loader.large {
- transform: scale(1);
- }
- .tlv-loader::before {
- background-color: $gray;
- border-radius: 50%;
- box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -21px 21px 0px 0px $gray;
- content: '';
- display: block;
- height: 21px;
- width: 21px;
- position: absolute;
- left: 50%;
- margin-left: -10.5px;
- }
- .tlv-loader::after {
- border-radius: 50%;
- content: '';
- display: block;
- position: absolute;
- height: 21px;
- width: 21px;
- animation: dot-move-2 4.5s infinite ease-in;
- }
- @keyframes dot-move {
- 0% {
- background-color: $blue;
- left: 21px;
- top: 0;
+ .onboarding-loader-backdrop {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background-color: $loader-background;
+ opacity: 0.5;
}
- 25% {
- background-color: $orange;
- left: 42px;
- top: 21px;
+ .tlv-loader {
+ height: 63px;
+ width: 63px;
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ margin-top: -10.5px;
+ margin-left: -10.5px;
}
- 50% {
- background-color: $light-purple;
- left: 21px;
- top: 42px;
+ .tlv-loader.large {
+ transform: scale(1);
}
- 75% {
- background-color: $light-green;
- left: 0;
- top: 21px;
+ .tlv-loader::before {
+ background-color: $gray;
+ border-radius: 50%;
+ box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray,
+ -21px 21px 0px 0px $gray;
+ content: '';
+ display: block;
+ height: 21px;
+ width: 21px;
+ position: absolute;
+ left: 50%;
+ margin-left: -10.5px;
}
- 100% {
- background-color: $blue;
- left: 21px;
- top: 0;
+ .tlv-loader::after {
+ border-radius: 50%;
+ content: '';
+ display: block;
+ position: absolute;
+ height: 21px;
+ width: 21px;
+ animation: dot-move-2 4.5s infinite ease-in;
}
- }
- @keyframes dot-move-2 {
- 0% {
- background-color: $blue;
- left: 21px;
- top: 0;
+ @keyframes dot-move {
+ 0% {
+ background-color: $blue;
+ left: 21px;
+ top: 0;
+ }
+ 25% {
+ background-color: $orange;
+ left: 42px;
+ top: 21px;
+ }
+ 50% {
+ background-color: $light-purple;
+ left: 21px;
+ top: 42px;
+ }
+ 75% {
+ background-color: $light-green;
+ left: 0;
+ top: 21px;
+ }
+ 100% {
+ background-color: $blue;
+ left: 21px;
+ top: 0;
+ }
}
- 6.25% {
- background-color: $blue;
- left: 42px;
- top: 21px;
+ @keyframes dot-move-2 {
+ 0% {
+ background-color: $blue;
+ left: 21px;
+ top: 0;
+ }
+ 6.25% {
+ background-color: $blue;
+ left: 42px;
+ top: 21px;
+ }
+ 12.5% {
+ background-color: $blue;
+ left: 21px;
+ top: 42px;
+ }
+ 18.75% {
+ background-color: $blue;
+ left: 0;
+ top: 21px;
+ }
+ 25% {
+ background-color: $orange;
+ left: 21px;
+ top: 0;
+ }
+ 31.25% {
+ background-color: $orange;
+ left: 42px;
+ top: 21px;
+ }
+ 37.5% {
+ background-color: $orange;
+ left: 21px;
+ top: 42px;
+ }
+ 43.75% {
+ background-color: $orange;
+ left: 0;
+ top: 21px;
+ }
+ 50% {
+ background-color: $light-purple;
+ left: 21px;
+ top: 0;
+ }
+ 56.25% {
+ background-color: $light-purple;
+ left: 42px;
+ top: 21px;
+ }
+ 62.5% {
+ background-color: $light-purple;
+ left: 21px;
+ top: 42px;
+ }
+ 68.75% {
+ background-color: $light-purple;
+ left: 0;
+ top: 21px;
+ }
+ 75% {
+ background-color: $light-green;
+ left: 21px;
+ top: 0;
+ }
+ 81.25% {
+ background-color: $light-green;
+ left: 42px;
+ top: 21px;
+ }
+ 87.5% {
+ background-color: $light-green;
+ left: 21px;
+ top: 42px;
+ }
+ 93.75% {
+ background-color: $light-green;
+ left: 0;
+ top: 21px;
+ }
+ 100% {
+ background-color: $blue;
+ left: 21px;
+ top: 0;
+ }
}
- 12.5% {
- background-color: $blue;
- left: 21px;
- top: 42px;
- }
- 18.75% {
- background-color: $blue;
- left: 0;
- top: 21px;
- }
- 25% {
- background-color: $orange;
- left: 21px;
- top: 0;
- }
- 31.25% {
- background-color: $orange;
- left: 42px;
- top: 21px;
- }
- 37.5% {
- background-color: $orange;
- left: 21px;
- top: 42px;
- }
- 43.75% {
- background-color: $orange;
- left: 0;
- top: 21px;
- }
- 50% {
- background-color: $light-purple;
- left: 21px;
- top: 0;
- }
- 56.25% {
- background-color: $light-purple;
- left: 42px;
- top: 21px;
- }
- 62.5% {
- background-color: $light-purple;
- left: 21px;
- top: 42px;
- }
- 68.75% {
- background-color: $light-purple;
- left: 0;
- top: 21px;
- }
- 75% {
- background-color: $light-green;
- left: 21px;
- top: 0;
- }
- 81.25% {
- background-color: $light-green;
- left: 42px;
- top: 21px;
- }
- 87.5% {
- background-color: $light-green;
- left: 21px;
- top: 42px;
- }
- 93.75% {
- background-color: $light-green;
- left: 0;
- top: 21px;
- }
- 100% {
- background-color: $blue;
- left: 21px;
- top: 0;
- }
- }
}
-
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index ab4d15f..adb3688 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -1,63 +1,63 @@
.software-product-navigation-side-bar {
- width: 245px;
- height: 100%;
- background-color: $white;
- border-right: 1px solid $light-gray;
- @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
- border-bottom: 0;
-
- .navigation-side-content {
- overflow: hidden;
+ width: 245px;
height: 100%;
+ background-color: $white;
+ border-right: 1px solid $light-gray;
+ @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
+ border-bottom: 0;
- .navigation-group {
- height: 100%;
- display: flex;
- flex-direction: column;
- background-color: $tlv-gray;
- .group-name {
- @extend .heading-4-semibold;
- @include ellipsis;
- min-height: 70px;
- display: block;
- height: 70px;
- padding: 24px 12px 13px 40px;
- background-color: $white;
- border-bottom: 1px solid $tlv-light-gray;
- }
- }
+ .navigation-side-content {
+ overflow: hidden;
+ height: 100%;
- .navigation-group-items {
- padding-left: 20px;
- overflow-y: auto;
+ .navigation-group {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: $tlv-gray;
+ .group-name {
+ @extend .heading-4-semibold;
+ @include ellipsis;
+ min-height: 70px;
+ display: block;
+ height: 70px;
+ padding: 24px 12px 13px 40px;
+ background-color: $white;
+ border-bottom: 1px solid $tlv-light-gray;
+ }
+ }
- .navigation-group-item {
- @extend .body-1;
- cursor: pointer;
- margin: 18px 0;
- padding-left: 20px;
- color: $dark-gray;
- line-height: 17px;
- &.selected-item {
- padding-left: 0;
- .collapse.in {
+ .navigation-group-items {
padding-left: 20px;
- }
+ overflow-y: auto;
+
+ .navigation-group-item {
+ @extend .body-1;
+ cursor: pointer;
+ margin: 18px 0;
+ padding-left: 20px;
+ color: $dark-gray;
+ line-height: 17px;
+ &.selected-item {
+ padding-left: 0;
+ .collapse.in {
+ padding-left: 20px;
+ }
+ }
+ .navigation-group-item-name {
+ @include ellipsis;
+ white-space: normal;
+ &.selected {
+ @extend .body-1-semibold;
+ border-left: 4px solid $blue;
+ padding-left: 18px;
+ color: $blue;
+ }
+ &.bold-name {
+ @extend .body-1-semibold;
+ }
+ }
+ }
}
- .navigation-group-item-name {
- @include ellipsis;
- white-space: normal;
- &.selected {
- @extend .body-1-semibold;
- border-left: 4px solid $blue;
- padding-left: 18px;
- color: $blue;
- }
- &.bold-name {
- @extend .body-1-semibold;
- }
- }
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
deleted file mode 100644
index 5b10dee..0000000
--- a/openecomp-ui/resources/scss/components/_notifications.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-
-.notification-modal {
-
- .modal-content {
- .modal-header {
- padding: 15px 10px 10px;
- .modal-title {
- @extend .heading-5-semibold;
- }
- }
- .modal-body {
- padding: 30px 15px;
- @extend .body-1-semibold;
- }
- }
-
- &.danger {
- .modal-content .modal-header {
- border-top: 3px solid $red;
- }
- }
-
- &.negative {
- .modal-content .modal-header {
- border-top: 3px solid $red;
- }
- }
-
- &.warning {
- .modal-content .modal-header {
- border-top: 3px solid $yellow;
- }
- }
-
-}
diff --git a/openecomp-ui/resources/scss/components/_overlay.scss b/openecomp-ui/resources/scss/components/_overlay.scss
index 7c310bf..3d2d0bb 100644
--- a/openecomp-ui/resources/scss/components/_overlay.scss
+++ b/openecomp-ui/resources/scss/components/_overlay.scss
@@ -1,26 +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
+ 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;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_progressBar.scss b/openecomp-ui/resources/scss/components/_progressBar.scss
index 040c8ce..5529a55 100644
--- a/openecomp-ui/resources/scss/components/_progressBar.scss
+++ b/openecomp-ui/resources/scss/components/_progressBar.scss
@@ -1,24 +1,24 @@
- .progress-bar-view {
+.progress-bar-view {
display: -webkit-box;
padding: 5px;
.progress-bar-outside {
- display: flex;
- width: 90%;
- justify-content: space-between;
- background-color: lightgray;
- border-radius: 15px;
- height: 10px;
- .progress-bar-inside {
- display: block;
- border: 1px solid gainsboro;
- background-color: #4faa39;
- border-radius: inherit;
- }
+ display: flex;
+ width: 90%;
+ justify-content: space-between;
+ background-color: lightgray;
+ border-radius: 15px;
+ height: 10px;
+ .progress-bar-inside {
+ display: block;
+ border: 1px solid gainsboro;
+ background-color: #4faa39;
+ border-radius: inherit;
+ }
}
.progress-bar-view-label {
- margin-right: -30px;
- margin-top: -2px;
- margin-left: 10px;
- color: black;
- }
- }
+ margin-right: -30px;
+ margin-top: -2px;
+ margin-left: 10px;
+ color: black;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index fa8eb31..90b45a5 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -1,145 +1,146 @@
.select-action-table-view {
- .svg-icon-wrapper {
- flex-direction: row;
- .svg-icon {
- &:not(.__plus) {
- margin-left: 5px;
- margin-right: 5px;
- width:16px;
- height:16px;
- }
- }
- }
- .dummy-icon {
- background-color: $white;
- fill: $white;
- .locked {
- fill: $white;
- }
- }
+ .svg-icon-wrapper {
+ flex-direction: row;
+ .svg-icon {
+ &:not(.__plus) {
+ margin-left: 5px;
+ margin-right: 5px;
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+ .dummy-icon {
+ background-color: $white;
+ fill: $white;
+ .locked {
+ fill: $white;
+ }
+ }
- .select-action-table-controllers {
- display: flex;
- .svg-icon-wrapper {
- &:hover {
- cursor: pointer;
- }
- &:first-child {
- margin-left: auto;
- }
- }
- }
- .select-action-table {
- display: flex;
- flex-direction: column;
- border-color: $light-gray;
+ .select-action-table-controllers {
+ display: flex;
+ .svg-icon-wrapper {
+ &:hover {
+ cursor: pointer;
+ }
+ &:first-child {
+ margin-left: auto;
+ }
+ }
+ }
+ .select-action-table {
+ display: flex;
+ flex-direction: column;
+ border-color: $light-gray;
- .select-action-table-headers {
- display: flex;
- background-color: $tlv-light-gray;
- border-color: inherit;
- .select-action-table-header {
- @extend .body-1-semibold;
- flex: 1;
- border-top: 1px solid;
- border-right: 1px solid;
- border-color: inherit;
- padding: 8px 0 7px 20px;
- &:first-child {
- border-left: 1px solid;
- border-color: inherit;
- }
- }
- }
- .select-action-table-row-wrapper {
- display: flex;
- flex-direction: row;
- margin-bottom: 14px;
- .svg-icon-wrapper.hideDelete {
- .svg-icon {
- fill: $white;
- }
- }
- .select-action-table-row {
- display: flex;
- flex: 1;
- border: 1px solid;
- border-color: $light-gray;
- &.has-error {
- border-color: $red;
- }
+ .select-action-table-headers {
+ display: flex;
+ background-color: $tlv-light-gray;
+ border-color: inherit;
+ .select-action-table-header {
+ @extend .body-1-semibold;
+ flex: 1;
+ border-top: 1px solid;
+ border-right: 1px solid;
+ border-color: inherit;
+ padding: 8px 0 7px 20px;
+ &:first-child {
+ border-left: 1px solid;
+ border-color: inherit;
+ }
+ }
+ }
+ .select-action-table-row-wrapper {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 14px;
+ .svg-icon-wrapper.hideDelete {
+ .svg-icon {
+ fill: $white;
+ }
+ }
+ .select-action-table-row {
+ display: flex;
+ flex: 1;
+ border: 1px solid;
+ border-color: $light-gray;
+ &.has-error {
+ border-color: $red;
+ }
- .select-action-table-cell {
- flex: 1;
- border-right: 1px solid;
- border-color: $light-gray;
- @extend .body-1;
- .dropdown-multi-select {
- .form-group {
- .Select{
- &.is-open {
- border: 1px solid $blue;
- }
- }
- }
- }
- .form-group {
- margin: 0;
- .Select-control {
- height:36px;
- border: none;
- .is-open {
- border-left-color: $blue;
- border-right-color: $blue;
- }
- .Select-value, .Select-placeholder, .Select-input {
- padding-left: 20px;
- padding-right: 50px;
- padding-top: 4px;
-
- }
- .Select-placeholder {
- color: $dark-gray;
- }
- .Select-arrow-zone {
- padding-right: 15px;
- }
- }
- }
- &:last-child {
- border-right: none;
- }
- }
- .Select-menu-outer {
- border-left: 1px solid $blue;
- border-right: 1px solid $blue;
- border-bottom: 1px solid $blue;
- overflow: auto;
- .Select-menu {
- .Select-option {
- overflow: hidden;
- text-overflow: ellipsis;
- border-bottom: 1px solid $light-gray;
- &:hover {
- background-color: $blue;
- color: $white;
- &.is-focused {
- background-color: $blue;
- }
- &.is-focused {
- background-color: $blue;
- }
- }
- &.is-selected {
- background-color: transparent;
- }
- &.is-focused {
- background-color: transparent;
- }
- }
- }
- }
- }
- }
- }
+ .select-action-table-cell {
+ flex: 1;
+ border-right: 1px solid;
+ border-color: $light-gray;
+ @extend .body-1;
+ .dropdown-multi-select {
+ .form-group {
+ .Select {
+ &.is-open {
+ border: 1px solid $blue;
+ }
+ }
+ }
+ }
+ .form-group {
+ margin: 0;
+ .Select-control {
+ height: 36px;
+ border: none;
+ .is-open {
+ border-left-color: $blue;
+ border-right-color: $blue;
+ }
+ .Select-value,
+ .Select-placeholder,
+ .Select-input {
+ padding-left: 20px;
+ padding-right: 50px;
+ padding-top: 4px;
+ }
+ .Select-placeholder {
+ color: $dark-gray;
+ }
+ .Select-arrow-zone {
+ padding-right: 15px;
+ }
+ }
+ }
+ &:last-child {
+ border-right: none;
+ }
+ }
+ .Select-menu-outer {
+ border-left: 1px solid $blue;
+ border-right: 1px solid $blue;
+ border-bottom: 1px solid $blue;
+ overflow: auto;
+ .Select-menu {
+ .Select-option {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border-bottom: 1px solid $light-gray;
+ &:hover {
+ background-color: $blue;
+ color: $white;
+ &.is-focused {
+ background-color: $blue;
+ }
+ &.is-focused {
+ background-color: $blue;
+ }
+ }
+ &.is-selected {
+ background-color: transparent;
+ }
+ &.is-focused {
+ background-color: transparent;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_sequenceDiagram.scss b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
index d89c342..f567e07 100644
--- a/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
+++ b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
@@ -1,18 +1,18 @@
.sequence-diagram {
- .sequence-diagram-sequencer {
- .asdcs-diagram {
- overflow: auto;
- max-height: 60vh;
- }
- .asdcs-editor {
- height: 60vh;
- }
- }
- .sequence-diagram-action-buttons {
- margin-left: 20px;
- margin-top: 20px;
- button:first-of-type {
- margin-right: 20px;
- }
- }
+ .sequence-diagram-sequencer {
+ .asdcs-diagram {
+ overflow: auto;
+ max-height: 60vh;
+ }
+ .asdcs-editor {
+ height: 60vh;
+ }
+ }
+ .sequence-diagram-action-buttons {
+ margin-left: 20px;
+ margin-top: 20px;
+ button:first-of-type {
+ margin-right: 20px;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index cd52840..e2e7b1b 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -1,65 +1,63 @@
.submit-error-response-view {
- max-height: 500px;
- overflow: auto;
- .list-group-item {
- border-top: none;
- }
- .panel-title {
- a {
- &:after {
- content: "(details)";
- color: $link-blue;
- float: right;
-
- }
- &:hover {
- color: $blue;
- text-decoration: underline;
- }
- }
- }
- .error-block {
- margin: 10px 0;
- .error-block-header {
- background-color: $tlv-gray;
- padding: 5px;
- cursor: pointer;
- .svg-icon {
- &.__chevronDown {
- margin-right: 10px;
- }
- }
- .collapse-right {
- .svg-icon {
- &.__chevronDown {
- transform: rotate(270deg);
- }
- }
- }
-
- }
- .error-code-list-item {
- display: flex;
- justify-content: flex-start;
- .icon-label {
- @extend .body-1;
- color: $dark-gray;
- margin-left: 10px;
- }
- .icon-component {
- align-items: baseline;
- }
- }
+ max-height: 500px;
+ overflow: auto;
.list-group-item {
- .error-item-text {
- margin-top:-2px;
- max-width: 100px;
- }
+ border-top: none;
}
- .component-name-header {
- margin-left: 45px;
- margin-top: 10px;
- @extend .heading-5-semibold;
+ .panel-title {
+ a {
+ &:after {
+ content: '(details)';
+ color: $link-blue;
+ float: right;
+ }
+ &:hover {
+ color: $blue;
+ text-decoration: underline;
+ }
+ }
}
- }
+ .error-block {
+ margin: 10px 0;
+ .error-block-header {
+ background-color: $tlv-gray;
+ padding: 5px;
+ cursor: pointer;
+ .svg-icon {
+ &.__chevronDown {
+ margin-right: 10px;
+ }
+ }
+ .collapse-right {
+ .svg-icon {
+ &.__chevronDown {
+ transform: rotate(270deg);
+ }
+ }
+ }
+ }
+ .error-code-list-item {
+ display: flex;
+ justify-content: flex-start;
+ .icon-label {
+ @extend .body-1;
+ color: $dark-gray;
+ margin-left: 10px;
+ }
+ .icon-component {
+ align-items: baseline;
+ }
+ }
+ .list-group-item {
+ .error-item-text {
+ margin-top: -2px;
+ max-width: 100px;
+ }
+ }
+ .component-name-header {
+ margin-left: 45px;
+ margin-top: 10px;
+ @extend .heading-5-semibold;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_toggleInput.scss b/openecomp-ui/resources/scss/components/_toggleInput.scss
index fcf0902..6bcf3a3 100644
--- a/openecomp-ui/resources/scss/components/_toggleInput.scss
+++ b/openecomp-ui/resources/scss/components/_toggleInput.scss
@@ -1,62 +1,63 @@
.toggle-input-wrapper {
- $toggle-width: 40px;
- $toggle-height: 20px;
- display: table;
- .toggle-switch, .toggle-input-label {
- display: table-cell;
- vertical-align: middle;
- padding-left: 10px;
- }
- .toggle {
- position: absolute;
- margin-left: -9999px;
- visibility: hidden;
- }
- .toggle + label {
- @extend %noselect;
- display: block;
- position: relative;
- cursor: pointer;
- outline: none;
- }
+ $toggle-width: 40px;
+ $toggle-height: 20px;
+ display: table;
+ .toggle-switch,
+ .toggle-input-label {
+ display: table-cell;
+ vertical-align: middle;
+ padding-left: 10px;
+ }
+ .toggle {
+ position: absolute;
+ margin-left: -9999px;
+ visibility: hidden;
+ }
+ .toggle + label {
+ @extend %noselect;
+ display: block;
+ position: relative;
+ cursor: pointer;
+ outline: none;
+ }
- input.toggle-round-flat + label {
- padding: 1px;
- width: $toggle-width;
- height: $toggle-height;
- background-color: $dark-gray;
- border-radius: $toggle-height;
- transition: background 0.4s;
- }
- input.toggle-round-flat + label:before,
- input.toggle-round-flat + label:after {
- display: block;
- position: absolute;
- content: "";
- }
- input.toggle-round-flat + label:before {
- top: 1px;
- left: 1px;
- bottom: 1px;
- right: 1px;
- background-color: $white;
- border-radius: $toggle-height;
- transition: background 0.4s;
- }
- input.toggle-round-flat + label:after {
- top: 4px;
- left: 4px;
- bottom: 4px;
- width: $toggle-height - 8;
- background-color: $dark-gray;
- border-radius: $toggle-height - 8;
- transition: margin 0.4s, background 0.4s;
- }
- input.toggle-round-flat:checked + label {
- background-color: $link-blue;
- }
- input.toggle-round-flat:checked + label:after {
- margin-left: $toggle-height;
- background-color: $link-blue;
- }
+ input.toggle-round-flat + label {
+ padding: 1px;
+ width: $toggle-width;
+ height: $toggle-height;
+ background-color: $dark-gray;
+ border-radius: $toggle-height;
+ transition: background 0.4s;
+ }
+ input.toggle-round-flat + label:before,
+ input.toggle-round-flat + label:after {
+ display: block;
+ position: absolute;
+ content: '';
+ }
+ input.toggle-round-flat + label:before {
+ top: 1px;
+ left: 1px;
+ bottom: 1px;
+ right: 1px;
+ background-color: $white;
+ border-radius: $toggle-height;
+ transition: background 0.4s;
+ }
+ input.toggle-round-flat + label:after {
+ top: 4px;
+ left: 4px;
+ bottom: 4px;
+ width: $toggle-height - 8;
+ background-color: $dark-gray;
+ border-radius: $toggle-height - 8;
+ transition: margin 0.4s, background 0.4s;
+ }
+ input.toggle-round-flat:checked + label {
+ background-color: $link-blue;
+ }
+ input.toggle-round-flat:checked + label:after {
+ margin-left: $toggle-height;
+ background-color: $link-blue;
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_tree.scss b/openecomp-ui/resources/scss/components/_tree.scss
index e03594e..380fb64 100644
--- a/openecomp-ui/resources/scss/components/_tree.scss
+++ b/openecomp-ui/resources/scss/components/_tree.scss
@@ -1,56 +1,53 @@
-
.tree-view {
- overflow: hidden;
+ overflow: hidden;
- &.scrollable {
- overflow: auto;
- }
+ &.scrollable {
+ overflow: auto;
+ }
- .node {
- text-shadow: none;
- stroke: none;
+ .node {
+ text-shadow: none;
+ stroke: none;
- .outer-circle {
- stroke: $blue;
- stroke-width: 2px;
- fill: $white;
- }
+ .outer-circle {
+ stroke: $blue;
+ stroke-width: 2px;
+ fill: $white;
+ }
- .inner-circle {
- fill: $blue;
- }
+ .inner-circle {
+ fill: $blue;
+ }
- text {
- text-anchor: end;
- @extend .body-2-semibold;
- fill: $blue;
- }
+ text {
+ text-anchor: end;
+ @extend .body-2-semibold;
+ fill: $blue;
+ }
- &.clickable {
- cursor: pointer;
- }
+ &.clickable {
+ cursor: pointer;
+ }
- &.selectedNode {
- .outer-circle {
- fill: $blue;
- }
+ &.selectedNode {
+ .outer-circle {
+ fill: $blue;
+ }
- .inner-circle {
- fill: $blue;
- }
+ .inner-circle {
+ fill: $blue;
+ }
- text {
- fill: $blue;
- }
- }
- }
+ text {
+ fill: $blue;
+ }
+ }
+ }
-
- .link {
- fill: none;
- stroke: $dark-gray;
- stroke-opacity: 0.4;
- stroke-width: 1.5px;
- }
-
+ .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
index 74cafae..649e636 100644
--- a/openecomp-ui/resources/scss/components/_userNotifications.scss
+++ b/openecomp-ui/resources/scss/components/_userNotifications.scss
@@ -1,123 +1,122 @@
-
.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;
+ margin-left: 10px;
+ .notifications-icon {
+ display: flex;
+ @extend .clickable;
+ .notifications-count {
color: $white;
- background-color: $blue;
- border-radius: 2px;
+ font-size: 11px;
text-align: center;
- line-height: 2;
- margin-top: 4px;
- &.active {
- background-color: #0091c7;
- border: solid 1px #006186;
+ width: 16px;
+ height: 16px;
+ background-color: $orange;
+ border-radius: 50%;
+ position: relative;
+ right: 7px;
+ top: -2px;
+ &.hidden-count {
+ background-color: transparent;
+ color: transparent;
}
- &:hover {
- background-color: #1ec2ff;
- border: solid 1px #0091c8;
- }
- }
}
- }
}
- }
+ .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: $action-button-active-bg;
+ border: solid 1px $action-button-active-border;
+ }
+ &:hover {
+ background-color: $action-button-hover-bg;
+ border: solid 1px $action-button-hover-border;
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index 52408f5..9f708c4 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -1,118 +1,110 @@
form {
- .validation-form-content {
- .validation-input-wrapper {
- position: relative;
- flex: 1;
- }
- .validation-radio-wrapper {
- position: relative;
- }
- .sdc-tabs {
- position: relative;
- .invalid-tab:not(.sdc-tab-active) {
- color: $red;
- }
- }
- .validation-error-message {
- &.bottom {
- .tooltip-arrow {
- border-bottom-color: $red;
+ .validation-form-content {
+ .validation-input-wrapper {
+ position: relative;
+ flex: 1;
}
- }
- &.right {
- .tooltip-arrow {
- border-right-color: $red;
+ .validation-radio-wrapper {
+ position: relative;
}
- }
- &.left {
- .tooltip-arrow {
- border-left-color: $red;
- }
- }
- .tooltip-inner {
- background-color: $red;
- }
- }
- .input-row {
- padding-bottom: 32px;
- &:only-child {
- padding-bottom: 0;
- }
- &:last-child {
- padding-bottom: 0;
- }
- .form-group {
- margin-bottom: 0;
- }
- }
-
- .rows-section {
- .row-flex-components {
- display: flex;
- }
- .validation-input-wrapper {
- flex: 1;
- }
- .empty-col {
- flex: 1.2;
- content: ' ';
- }
- .empty-two-col {
- flex: 2.4;
- content: ' ';
- }
-
- .two-col {
- flex: 2.2;
- }
- .three-col {
- flex: 3.4;
- }
- .single-col {
- flex: 1.2;
- display: flex;
- &:after {
- flex: 0.2;
- content: ' ';
- }
- @media (min-width: 1389px) {
- &.add-line-break {
- .control-label {
- &:after {
- content: "\00a0";
- display: block;
- }
+ .sdc-tabs {
+ position: relative;
+ .invalid-tab:not(.sdc-tab-active) {
+ color: $red;
}
- }
+ }
+ .validation-error-message {
+ &.bottom {
+ .tooltip-arrow {
+ border-bottom-color: $red;
+ }
+ }
+ &.right {
+ .tooltip-arrow {
+ border-right-color: $red;
+ }
+ }
+ &.left {
+ .tooltip-arrow {
+ border-left-color: $red;
+ }
+ }
+ .tooltip-inner {
+ background-color: $red;
+ }
+ }
+ .input-row {
+ padding-bottom: 32px;
+ &:only-child {
+ padding-bottom: 0;
+ }
+ &:last-child {
+ padding-bottom: 0;
+ }
+ .form-group {
+ margin-bottom: 0;
+ }
}
- }
- }
- }
+ .rows-section {
+ .row-flex-components {
+ display: flex;
+ }
+ .validation-input-wrapper {
+ flex: 1;
+ }
+ .empty-col {
+ flex: 1.2;
+ content: ' ';
+ }
+ .empty-two-col {
+ flex: 2.4;
+ content: ' ';
+ }
- .validation-buttons {
- padding: 20px 0;
- text-align: right;
- button:first-child {
- margin-right: 15px;
- min-width: 120px;
+ .two-col {
+ flex: 2.2;
+ }
+ .three-col {
+ flex: 3.4;
+ }
+ .single-col {
+ flex: 1.2;
+ display: flex;
+ &:after {
+ flex: 0.2;
+ content: ' ';
+ }
+ @media (min-width: 1389px) {
+ &.add-line-break {
+ .control-label {
+ &:after {
+ content: '\00a0';
+ display: block;
+ }
+ }
+ }
+ }
+ }
+ }
}
- .svg-icon {
- height: 14px;
- width: 14px;
- }
- .svg-icon.check {
- fill: $white;
- }
- .svg-icon.close {
- fill: $blue;
- }
- }
-}
-.modal-body {
- .validation-buttons {
- padding: 20px 15px;
- background-color: $tlv-gray;
- }
+ .validation-buttons {
+ padding: 20px 0;
+ text-align: right;
+ button:first-child {
+ margin-right: 15px;
+ min-width: 120px;
+ }
+ .svg-icon {
+ height: 14px;
+ width: 14px;
+ }
+ .svg-icon.check {
+ fill: $white;
+ }
+ .svg-icon.close {
+ fill: $blue;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 98771f1..cc83999 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,281 +1,294 @@
.version-controller-bar {
- display: flex;
- min-height: 70px;
- border-bottom: 1px solid $tlv-light-gray;
- background-color: transparent;
+ 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-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;
- }
+ .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-status-container {
+ display: flex;
+ height: 30px;
- .version-selector-more-versions {
- color: $blue;
- cursor: pointer;
- }
+ .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-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;
+ .version-section {
+ .form-group {
+ margin-right: 20px;
- .input-options {
- border: none;
+ .input-options {
+ border: none;
- .input-options-select {
- padding-top: 4px;
- }
- }
- }
- }
+ .input-options-select {
+ padding-top: 4px;
+ }
+ }
+ }
+ }
- .vc-status {
- display: flex;
- padding-left: 20px;
- border-left: $light-gray thin solid;
+ .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;
- }
- }
- .depricated-item-status {
- @extend .body-3;
- color: $white;
- background-color: $dark-purple;
- margin-left: 10px;
- padding: 1px 10px;
- align-self: center;
- border-radius: 3px;
- }
- }
+ .status-text {
+ align-self: center;
+ margin-top: 2px;
+ @extend .heading-5;
+ color: $dark-gray;
+ }
+ }
+ .depricated-item-status {
+ @extend .body-3;
+ color: $white;
+ background-color: $dark-purple;
+ margin-left: 10px;
+ padding: 1px 10px;
+ align-self: center;
+ border-radius: 3px;
+ }
+ }
- .save-submit-cancel-container {
- display: flex;
- align-items: center;
- height: 100%;
+ .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%;
+ .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;
+ .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;
- }
+ &:hover:not(.disabled) {
+ cursor: pointer;
+ background-color: $tlv-light-gray;
+ }
- &.disabled {
- border-color: $light-gray;
- }
+ &.disabled {
+ border-color: $light-gray;
+ }
- .vc-v-submit {
- width: 11px;
- height: 8px;
- margin-right: 10px;
- position: relative;
- top: -1px;
- }
- }
+ .vc-v-submit {
+ width: 11px;
+ height: 8px;
+ margin-right: 10px;
+ position: relative;
+ top: -1px;
+ }
+ }
- .version-control-buttons {
- display: flex;
- }
+ .version-control-buttons {
+ display: flex;
+ }
- .action-button-wrapper {
- display: flex;
- align-items: center;
- height: 70px;
+ .action-button-wrapper {
+ display: flex;
+ align-items: center;
+ height: 70px;
- &:hover:not(.disabled) {
- background-color: $tlv-light-gray;
- }
+ &:hover:not(.disabled) {
+ background-color: $tlv-light-gray;
+ }
- &:active:not(.disabled) {
- background-color: $light-gray;
- }
+ &:active:not(.disabled) {
+ background-color: $light-gray;
+ }
- .action-buttons-svg {
- padding-left: 10px;
- padding-right: 10px;
+ .action-buttons-svg {
+ padding-left: 10px;
+ padding-right: 10px;
- .svg-icon {
- fill: $text-black;
- height: 20px;
+ .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-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;
- }
- }
+ .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;
- }
+ .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;
+ .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;
- }
+ .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;
- }
- }
- }
- }
+ 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;
- }
- }
+ .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/components/_vnfBrowse.scss b/openecomp-ui/resources/scss/components/_vnfBrowse.scss
index 7e0085a..f47b736 100644
--- a/openecomp-ui/resources/scss/components/_vnfBrowse.scss
+++ b/openecomp-ui/resources/scss/components/_vnfBrowse.scss
@@ -1,109 +1,107 @@
$message-info-icon-size: 16px;
.vnf-creation-page {
- .list-editor-view-header {
- border-bottom: none;
- }
- .vnfBrowse-list-item {
- display: flex;
- height: 36px;
- @extend .body-1;
- &.header {
- @extend .body-1-semibold;
- background-color: $tlv-light-gray;
- color: $text-black;
- }
- &.selectedRow {
- background-color: $blue;
- color: $white;
- .svg-icon-wrapper {
- &.__positive {
- fill: $white;
- color: $white;
- }
- }
- }
- .svg-icon-wrapper {
- &.__positive {
- fill: $dark-gray;
- color: $dark-gray;
- }
- }
- }
+ .list-editor-view-header {
+ border-bottom: none;
+ }
+ .vnfBrowse-list-item {
+ display: flex;
+ height: 36px;
+ @extend .body-1;
+ &.header {
+ @extend .body-1-semibold;
+ background-color: $tlv-light-gray;
+ color: $text-black;
+ }
+ &.selectedRow {
+ background-color: $blue;
+ color: $white;
+ .svg-icon-wrapper {
+ &.__positive {
+ fill: $white;
+ color: $white;
+ }
+ }
+ }
+ .svg-icon-wrapper {
+ &.__positive {
+ fill: $dark-gray;
+ color: $dark-gray;
+ }
+ }
+ }
- .activity-action {
- .svg-icon-wrapper {
- float: left;
- }
- }
+ .activity-action {
+ .svg-icon-wrapper {
+ float: left;
+ }
+ }
- .message-further-info-icon {
- background-color: $gray;
- }
+ .message-further-info-icon {
+ background-color: $gray;
+ }
- .table-cell {
- border-right: 1px solid $light-gray;
- border-bottom: 1px solid $light-gray;
- &:last-child {
- border-right: none;
- }
- flex-basis: 22%;
- display: flex;
- padding: 0 20px;
- justify-content: center;
- flex-direction: column;
+ .table-cell {
+ border-right: 1px solid $light-gray;
+ border-bottom: 1px solid $light-gray;
+ &:last-child {
+ border-right: none;
+ }
+ flex-basis: 22%;
+ display: flex;
+ padding: 0 20px;
+ justify-content: center;
+ flex-direction: column;
- &.vnftable-action {
- flex-basis: 12%;
- span {
- margin: auto;
- }
- }
+ &.vnftable-action {
+ flex-basis: 12%;
+ span {
+ margin: auto;
+ }
+ }
+ }
+
+ .vnf-table-header {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ .header-sort-arrow {
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ margin-left: 9px;
+ &.up {
+ border-bottom: 5px solid $black;
+ }
+ &.down {
+ border-top: 5px solid $black;
+ }
+ }
+ }
+
+ .vnf-table-cell {
+ display: flex;
+ justify-content: space-between;
+ span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ .vnftable-name {
+ max-width: 22%;
+ }
+
+ .vnf-grid-section {
+ margin: 20px 20px 20px 50px;
+ }
+
+ .vnf-modal {
+ text-align: right;
+ margin-top: 22px;
+ }
+
+ .vnf-submit {
+ margin-right: 15px;
+ }
}
-
- .vnf-table-header {
- cursor: pointer;
- display: flex;
- align-items: center;
- .header-sort-arrow {
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- margin-left: 9px;
- &.up {
- border-bottom: 5px solid $black;
- }
- &.down {
- border-top: 5px solid $black;
- }
-
- }
- }
-
- .vnf-table-cell {
- display: flex;
- justify-content: space-between;
- span {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- .vnftable-name {
- max-width: 22%;
- }
-
- .vnf-grid-section {
- margin: 20px 20px 20px 50px;
- }
-
- .vnf-modal {
- text-align: right;
- margin-top: 22px;
- }
-
- .vnf-submit {
- margin-right: 15px;
- }
-
-}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss b/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss
index 294fd81..5938dc2 100644
--- a/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss
+++ b/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss
@@ -1,4 +1,4 @@
-.vsp-details-vendor-select {
+.vsp-details-vendor-select {
.validation-form-content {
padding-top: 20px;
.vendor-selector-modal-title {
@@ -9,5 +9,5 @@
margin-top: 10px;
margin-bottom: 20px;
}
- }
-}
\ No newline at end of file
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
index 06ef4d2..736927f 100644
--- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -1,37 +1,37 @@
-
-.entitlement-pools-list-editor {
+.entitlement-pools-list-editor {
.list-editor-item-view-field {
-
- .entitlement-pools-count {
- @extend .heading-1;
- color: $purple;
+ .entitlement-pools-count {
+ @extend .heading-1;
+ color: $purple;
+ }
}
- }
}
.entitlement-pools-modal {
- .entitlement-pools-form {
- .threshold-section, .date-section {
- display: flex;
- justify-content: space-between;
- .validation-input-wrapper {
- flex: 0 0 46%;
- }
- }
- .uuid-row-wrapper {
- display: flex;
- .separator{
- margin-left: 30px;
- margin-right: 30px;
- height: 35px;
- border: 1px solid $tlv-light-gray;
- }
- .uuid-container {
- .uuid-value {
- @extend .body-3;
- user-select: text;
+ .entitlement-pools-form {
+ .threshold-section,
+ .date-section {
+ display: flex;
+ justify-content: space-between;
+ .validation-input-wrapper {
+ flex: 0 0 46%;
+ }
}
- }
+ .uuid-row-wrapper {
+ display: flex;
+ margin-top: 20px;
+ .separator {
+ margin-left: 30px;
+ margin-right: 30px;
+ height: 35px;
+ border: 1px solid $tlv-light-gray;
+ }
+ .uuid-container {
+ .uuid-value {
+ @extend .body-3;
+ user-select: text;
+ }
+ }
+ }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index cf681b8..375bb2c 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -1,41 +1,38 @@
.feature-groups-list-editor {
- .list-editor-view{
- .list-editor-view-list {
- .list-editor-item-view {
- min-height: 110px;
- height: 110px;
- }
- .list-editor-item-view-content {
- .list-editor-item-view-field {
- &.smaller-field {
- flex: 0.35;
- }
- .feature-groups-count-field {
- display: inline-block;
- &:first-child {
- margin-right: 95px;
+ .list-editor-view {
+ .list-editor-view-list {
+ .list-editor-item-view {
+ min-height: 110px;
+ height: 110px;
}
- }
- .feature-groups-count-ep {
- @extend .heading-1;
- color: $light-blue;
- }
- .feature-groups-mrn-ep {
- @extend .body-1;
- color: $light-blue;
- }
- .feature-groups-count-lk {
- @extend .heading-1;
- color: $light-green;
- }
- .title-no-wrap {
- white-space: nowrap;
- }
+ .list-editor-item-view-content {
+ .list-editor-item-view-field {
+ &.smaller-field {
+ flex: 0.35;
+ }
+ .feature-groups-count-field {
+ display: inline-block;
+ &:first-child {
+ margin-right: 95px;
+ }
+ }
+ .feature-groups-count-ep {
+ @extend .heading-1;
+ color: $light-blue;
+ }
+ .feature-groups-mrn-ep {
+ @extend .body-1;
+ color: $light-blue;
+ }
+ .feature-groups-count-lk {
+ @extend .heading-1;
+ color: $light-green;
+ }
+ .title-no-wrap {
+ white-space: nowrap;
+ }
+ }
+ }
}
- }
}
- }
}
-
-
-
diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
index 579e9ba..acde2ed 100644
--- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
@@ -1,26 +1,24 @@
-
.license-agreement-list-editor {
-
- .list-editor-view-list {
- .list-editor-item-view-field {
- .list-editor-item-view-field-tight {
- vertical-align: top;
- display: inline-block;
- &:first-child {
- @include ellipsis;
- margin-right: 95px;
- width: 20%;
- overflow-wrap: break-word;
+ .list-editor-view-list {
+ .list-editor-item-view-field {
+ .list-editor-item-view-field-tight {
+ vertical-align: top;
+ display: inline-block;
+ &:first-child {
+ @include ellipsis;
+ margin-right: 95px;
+ width: 20%;
+ overflow-wrap: break-word;
+ }
+ }
+ .feature-groups-count,
+ .type {
+ color: $light-green;
+ }
+ .feature-groups-count {
+ @extend .heading-1;
+ padding-top: 2px;
+ }
}
- }
- .feature-groups-count, .type {
- color: $light-green;
- }
- .feature-groups-count {
- @extend .heading-1;
- padding-top: 2px;
- }
-
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index b7681fe..d873c39 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -1,31 +1,32 @@
.license-key-groups-list-editor {
- .list-editor-view-list {
- .list-editor-item-view-field {
-
- .operational-scope, .type {
- color: $orange;
- }
- .operational-scope {
- @include ellipsis;
- }
+ .list-editor-view-list {
+ .list-editor-item-view-field {
+ .operational-scope,
+ .type {
+ color: $orange;
+ }
+ .operational-scope {
+ @include ellipsis;
+ }
+ }
}
- }
}
.license-keygroup-editor {
- .uuid-row-wrapper {
- display: flex;
- .separator{
- margin-left: 30px;
- margin-right: 30px;
- height: 35px;
- border: 1px solid $tlv-light-gray;
+ .uuid-row-wrapper {
+ display: flex;
+ margin-top: 20px;
+ .separator {
+ margin-left: 30px;
+ margin-right: 30px;
+ height: 35px;
+ border: 1px solid $tlv-light-gray;
+ }
+ .uuid-container {
+ .uuid-value {
+ @extend .body-3;
+ user-select: text;
+ }
+ }
}
- .uuid-container {
- .uuid-value {
- @extend .body-3;
- user-select: text;
- }
- }
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
index e93ea98..da43e3e 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModel.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -1,55 +1,42 @@
.license-model-modal {
- .modal-body {
- padding: 0;
- }
- .modal-header {
- border-bottom: none;
- padding-bottom: 30px;
- }
- .sdc-tabs-list {
- padding-left: 50px;
- border-bottom: 1px solid $tlv-light-gray;
- display: flex;
- align-items: baseline;
- }
- .sdc-tab-content {
- margin-top: 0;
- }
- .add-limit-button {
- margin-left: auto;
- margin-right: 50px;
- padding-right: 0;
- text-align: end;
- }
- .license-model-form {
- .validation-form-content, .validation-buttons {
- padding: 20px 50px;
+ .sdc-tabs {
+ margin-top: 20px;
}
- &.license-agreement-form, &.feature-group-form {
- .validation-form-content {
- padding: 0;
- }
- .sdc-tab-content {
- padding: 20px 50px;
- }
- }
- }
- .license-model-modal-buttons {
- padding: 21px 50px;
- display: flex;
- justify-content: flex-end;
- background-color: $tlv-gray;
- margin-top: 2px;
- .sdc-button {
- margin-left: 20px;
+ .sdc-tabs-list {
+ padding-left: 40px;
+ border-bottom: 1px solid $tlv-light-gray;
+ display: flex;
+ align-items: baseline;
}
- }
+ .sdc-tab-content {
+ margin-top: 0;
+ }
+ .add-limit-button {
+ margin-left: auto;
+ margin-right: 50px;
+ padding-right: 0;
+ text-align: end;
+ }
+ .license-model-form {
+ &.license-agreement-form,
+ &.feature-group-form {
+ .validation-form-content {
+ padding: 0;
+ }
+ .sdc-tab-content {
+ padding: 20px 40px;
+ .dual-list-box {
+ margin: 0;
+ }
+ }
+ }
+ }
}
.license-model-list-editor {
- .list-editor-view-list {
- .list-editor-item-view {
- min-height: 110px;
- height: 110px;
- }
- }
+ .list-editor-view-list {
+ .list-editor-item-view {
+ min-height: 110px;
+ height: 110px;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
index 16b6af7..794ed38 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
@@ -1,133 +1,132 @@
.license-model-limits-view {
- max-height: 490px;
- overflow: auto;
+ max-height: 490px;
+ overflow: auto;
- .limit-editor-title {
- padding: 10px 50px;
- background-color: $blue;
- color: $white;
+ .limit-editor-title {
+ padding: 10px 50px;
+ background-color: $blue;
+ color: $white;
+ }
+ .list-editor-view-add-title {
+ margin-right: 20px;
+ }
- }
- .list-editor-view-add-title {
- margin-right: 20px;
- }
+ .no-limits-text {
+ padding-left: 50px;
+ }
- .no-limits-text {
- padding-left: 50px;
- }
+ .list-editor-view {
+ .list-editor-view-header {
+ border-bottom: none;
+ padding-top: 30px;
+ padding-bottom: 0;
+ }
- .list-editor-view {
- .list-editor-view-header {
- border-bottom: none;
- padding-top: 30px;
- padding-bottom: 0;
- }
+ .list-editor-view-list-scroller {
+ margin-top: 0;
+ margin-bottom: 30px;
+ }
+ .list-editor-view-list {
+ width: 100%;
+ .list-editor-item-view {
+ min-height: 50px;
+ height: 50px;
+ background-color: $tlv-light-gray;
+ border-color: transparent;
+ margin: 1px 0;
+ .list-editor-item-view-content {
+ padding-left: 0;
+ }
- .list-editor-view-list-scroller {
- margin-top: 0;
- margin-bottom: 30px;
- }
- .list-editor-view-list {
- width: 100%;
- .list-editor-item-view {
- min-height: 50px;
- height: 50px;
- background-color: $tlv-light-gray;
- border-color: transparent;
- margin: 1px 0;
- .list-editor-item-view-content {
- padding-left: 0;
- }
+ .svg-icon {
+ margin-top: 10px;
+ margin-right: 50px;
+ fill: $gray;
+ &:hover {
+ fill: $dark-gray;
+ }
+ }
- .svg-icon {
- margin-top: 10px;
- margin-right: 50px;
- fill: $gray;
- &:hover {
- fill: $dark-gray;
- }
- }
+ &.selectable {
+ &:hover {
+ .list-editor-item-view-field {
+ .text.description,
+ .text-name {
+ &:after {
+ background-color: darken(
+ $tlv-light-gray,
+ 4%
+ );
+ }
+ }
+ }
+ background-color: darken($tlv-light-gray, 4%);
+ cursor: pointer;
+ }
+ }
+ &:hover {
+ border-color: transparent;
+ cursor: default;
+ }
+ .list-editor-item-view-content {
+ .list-editor-item-view-field {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
- &.selectable {
- &:hover {
- .list-editor-item-view-field {
- .text.description, .text-name {
- &:after {
- background-color: darken($tlv-light-gray, 4%);
- }
- }
+ &.limit-name {
+ .text.name {
+ @extend .body-1-semibold;
+ color: $blue;
+ text-transform: uppercase;
+ margin-left: 45px;
+ }
- }
- background-color: darken($tlv-light-gray, 4%);
- cursor: pointer;
- }
+ border-right: 1px solid $light-gray;
+ margin-right: 22px;
+ flex: 0.4;
+ display: flex;
+ justify-content: left;
+ }
- }
- &:hover {
- border-color: transparent;
- cursor: default;
- }
- .list-editor-item-view-content {
- .list-editor-item-view-field {
- display: flex;
- align-items: center;
- white-space: nowrap;
+ &.limit-description {
+ max-width: 300px;
+ margin-right: 22px;
+ }
- &.limit-name {
- .text.name {
- @extend .body-1-semibold;
- color: $blue;
- text-transform: uppercase;
- margin-left : 45px;
- }
-
- border-right: 1px solid $light-gray;
- margin-right: 22px;
- flex: 0.4;
- display: flex;
- justify-content: left;
- }
+ &.limit-metric-details {
+ max-width: 300px;
+ }
- &.limit-description {
- max-width: 300px;
- margin-right: 22px;
- }
-
- &.limit-metric-details {
- max-width: 300px;
- }
-
-
- .text.description, .text.name {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- &:after {
- background: $tlv-light-gray;
- }
-
- }
- }
-
- }
- }
- }
- }
- .limit-editor{
- .limit-editor-form {
- .limit-editor-form-grid-section {
- padding-bottom: 0;
- }
- .validation-form-content {
- padding: 21px 45px;
- }
- .limit-editor-buttons {
- display: flex;
- justify-content: flex-end;
- .sdc-button {
- margin-left: 20px;
- }
- }
- }
- }
-}
\ No newline at end of file
+ .text.description,
+ .text.name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ &:after {
+ background: $tlv-light-gray;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .limit-editor {
+ .limit-editor-form {
+ .limit-editor-form-grid-section {
+ padding-bottom: 0;
+ }
+ .validation-form-content {
+ padding: 21px 45px;
+ }
+ .limit-editor-buttons {
+ display: flex;
+ justify-content: flex-end;
+ .sdc-button {
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 21c5bd8..eca87b6 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -4,236 +4,233 @@
$arrow-element-width: 30px;
$list-item-padding: 15px;
-
-
$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));
+ @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
}
.license-model-overview {
- .overview-top-section {
- .overview-title{
- @extend .heading-1;
- @extend .text-uppercase !optional;
- margin-bottom: 20px;
- color: $blue;
- }
- .license-model-overview-top {
- display: flex;
- justify-content: flex-start;
- flex-direction: row;
- padding-bottom: 10px;
- min-height: 155px;
- .separator {
- width: 1px;
- border-right: 1px solid $tlv-light-gray;
- margin-left: 20px;
- }
- .vendor-data-view {
- @extend .flex-column;
- background-color: $tlv-gray;
- padding: 13px 30px;
- border: 1px solid $tlv-light-gray;
- @include overview-tile-shadow();
- .vendor-title {
- margin-top:5px;
+ .overview-top-section {
+ .overview-title {
+ @extend .heading-1;
+ @extend .text-uppercase !optional;
+ margin-bottom: 20px;
+ color: $blue;
}
- .vendor-name {
- @extend .heading-4-semibold;
- text-transform: none;
- padding-bottom: 10px;
- border-bottom: 1px solid $tlv-light-gray;
- }
- .vendor-description, .vendor-description-readonly {
- @extend .flex;
- @extend .body-1;
- justify-content: space-between;
- overflow: hidden;
- position: relative;
- flex: initial;
- }
-
- &:not(.read-only) .vendor-description {
- border: 1px solid transparent;
- width: 100%;
- padding: 2px 0 2px 6px;
- margin-top: 10px;
- position: relative;
- .svg-icon-wrapper {
- position: absolute;;
- right:0;
- top:0;
- opacity: 0;
- }
- $hover-padding-right: 16px;
- @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
- &:hover {
- padding-right: $hover-padding-right;
- border: 1px solid $light-gray;
- cursor: pointer;
-
- background-color: $white;
- .svg-icon-wrapper {
- opacity: 1;
- z-index: 10;
- }
- .description-data:after {
- background: white;
- }
- .description-data {
- width: 100%;
- }
- }
- }
-
- .vendor-description-readonly {
- margin-top: 16px;
- }
-
- .description-data {
- @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
- flex: initial;
- }
-
- .vendor-description-edit {
- @extend .flex;
- flex-direction: column;
- border: none;
- margin-top: 10px;
- position: relative;
- left: -6px;
- width: 101%;
- textarea {
- padding-left: 6px;
- resize: vertical;
- }
- .buttons-row {
- @extend .flex;
- justify-content: flex-end;
+ .license-model-overview-top {
+ display: flex;
+ justify-content: flex-start;
flex-direction: row;
- margin-top: -25px;
- .buttons-wrapper {
- @extend .flex;
- @extend .body-3;
- border: 1px solid $light-gray;
- width: 95px;
- height: 19px;
- background-color: $tlv-light-gray;
- border-radius: 2px;
- position: relative;
- flex: 0 1 auto;
- text-align: center;
- .description-button {
- cursor: pointer;
- flex: 1;
- &:hover {
- background-color: $white;
- }
- }
- .description-save {
- cursor: pointer;
- flex: 1;
- color:$blue;
- &:hover {
- background-color: $white;
- }
- }
+ padding-bottom: 10px;
+ min-height: 155px;
+ .separator {
+ width: 1px;
+ border-right: 1px solid $tlv-light-gray;
+ margin-left: 20px;
}
- }
- .description-edit-textarea {
- height:67px;
- border: 1px solid $tlv-light-gray;
- resize: none;
- position: relative;
- left: -12px;
- }
- .validation-error-message.tooltip {
- z-index: 1000;
- .tooltip-inner {
- background-color: $red;
+ .vendor-data-view {
+ @extend .flex-column;
+ background-color: $tlv-gray;
+ padding: 13px 30px;
+ border: 1px solid $tlv-light-gray;
+ @include overview-tile-shadow();
+ .vendor-title {
+ margin-top: 5px;
+ }
+ .vendor-name {
+ @extend .heading-4-semibold;
+ text-transform: none;
+ padding-bottom: 10px;
+ border-bottom: 1px solid $tlv-light-gray;
+ }
+ .vendor-description,
+ .vendor-description-readonly {
+ @extend .flex;
+ @extend .body-1;
+ justify-content: space-between;
+ overflow: hidden;
+ position: relative;
+ flex: initial;
+ }
+
+ &:not(.read-only) .vendor-description {
+ border: 1px solid transparent;
+ width: 100%;
+ padding: 2px 0 2px 6px;
+ margin-top: 10px;
+ position: relative;
+ .svg-icon-wrapper {
+ position: absolute;
+ right: 0;
+ top: 0;
+ opacity: 0;
+ }
+ $hover-padding-right: 16px;
+ @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
+ &:hover {
+ padding-right: $hover-padding-right;
+ border: 1px solid $light-gray;
+ cursor: pointer;
+
+ background-color: $white;
+ .svg-icon-wrapper {
+ opacity: 1;
+ z-index: 10;
+ }
+ .description-data:after {
+ background: white;
+ }
+ .description-data {
+ width: 100%;
+ }
+ }
+ }
+
+ .vendor-description-readonly {
+ margin-top: 16px;
+ }
+
+ .description-data {
+ @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+ flex: initial;
+ }
+
+ .vendor-description-edit {
+ @extend .flex;
+ flex-direction: column;
+ border: none;
+ margin-top: 10px;
+ position: relative;
+ left: -6px;
+ width: 101%;
+ textarea {
+ padding-left: 6px;
+ resize: vertical;
+ }
+ .buttons-row {
+ @extend .flex;
+ justify-content: flex-end;
+ flex-direction: row;
+ margin-top: -25px;
+ .buttons-wrapper {
+ @extend .flex;
+ @extend .body-3;
+ border: 1px solid $light-gray;
+ width: 95px;
+ height: 19px;
+ background-color: $tlv-light-gray;
+ border-radius: 2px;
+ position: relative;
+ flex: 0 1 auto;
+ text-align: center;
+ .description-button {
+ cursor: pointer;
+ flex: 1;
+ &:hover {
+ background-color: $white;
+ }
+ }
+ .description-save {
+ cursor: pointer;
+ flex: 1;
+ color: $blue;
+ &:hover {
+ background-color: $white;
+ }
+ }
+ }
+ }
+ .description-edit-textarea {
+ height: 67px;
+ border: 1px solid $tlv-light-gray;
+ resize: none;
+ position: relative;
+ left: -12px;
+ }
+ .validation-error-message.tooltip {
+ z-index: 1000;
+ .tooltip-inner {
+ background-color: $red;
+ }
+ }
+ }
}
- }
+ .summary-count-list {
+ @extend .flex-column;
+ flex: 0.6;
+ margin-left: 20px;
+ justify-content: space-between;
+ border: 1px solid $tlv-light-gray;
+ @include overview-tile-shadow();
+ background-color: $tlv-gray;
+ .summary-count-item {
+ @extend .flex;
+ @extend .heading-5-semibold;
+ align-items: center;
+ padding-left: 45px;
+ padding-right: 45px;
+ border-bottom: 1px solid $tlv-light-gray;
+ &:last-child {
+ border-bottom: none;
+ }
+ .item-count {
+ flex-grow: 2;
+ margin-left: 5px;
+ }
+ .summary-name-and-count {
+ width: 100%;
+ }
+ .svg-icon-wrapper {
+ .svg-icon {
+ &.__plusCircle {
+ margin-top: 3px;
+ margin-left: auto;
+ fill: $dark-gray;
+ &:hover {
+ fill: $blue;
+ }
+ }
+ }
+ }
+
+ .summary-name-and-count {
+ &:hover {
+ cursor: pointer;
+ color: $blue;
+ }
+ }
+ }
+ }
+ .plus-icon {
+ font-size: $icon-font-size;
+ border-radius: 50%;
+ border: 1px solid $black;
+ color: $black;
+ height: 16px;
+ width: 16px;
+ padding: 2px 2px 2px 3px;
+ }
}
- }
- .summary-count-list {
- @extend .flex-column;
- flex: 0.6;
- margin-left: 20px;
- justify-content: space-between;
- border: 1px solid $tlv-light-gray;
- @include overview-tile-shadow();
- background-color: $tlv-gray;
- .summary-count-item {
- @extend .flex;
- @extend .heading-5-semibold;
- align-items: center;
- padding-left: 45px;
- padding-right: 45px;
- border-bottom: 1px solid $tlv-light-gray;
- &:last-child { border-bottom: none; }
- .item-count {
- flex-grow: 2;
- margin-left: 5px;
- }
- .summary-name-and-count {
- width: 100%;
- }
- .svg-icon-wrapper {
- .svg-icon {
- &.__plusCircle {
- margin-top: 3px;
- margin-left: auto;
- fill: $dark-gray;
- &:hover {
- fill: $blue;
- }
- }
- }
-
- }
-
- .summary-name-and-count {
- &:hover {
- cursor: pointer;
- color: $blue;
- }
- }
-
-
+ }
+ .vlm-list-tab-panel {
+ @extend .flex;
+ margin-bottom: 7px;
+ .section-title {
+ flex: 1;
}
- }
- .plus-icon {
- font-size: $icon-font-size;
- border-radius: 50%;
- border: 1px solid $black;
- color: $black;
- height: 16px;
- width: 16px;
- padding: 2px 2px 2px 3px;
- }
- }
- }
- .vlm-list-tab-panel {
-
- @extend .flex;
- margin-bottom: 7px;
- .section-title {
- flex: 1;
- }
- .overview-buttons-section {
- margin-top: 20px;
- display: flex;
- justify-content: flex-start;
- .button-vlm-list-view {
- height: 32px;
- width: 34px;
- margin-left:10px;
- cursor: pointer;
- }
- /**
+ .overview-buttons-section {
+ margin-top: 20px;
+ display: flex;
+ justify-content: flex-start;
+ .button-vlm-list-view {
+ height: 32px;
+ width: 34px;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+ /**
.vlm-list-icon {
background-size: 32px;
background-repeat: no-repeat;
@@ -251,262 +248,253 @@
}
}
**/
- }
- }
-
- .overview-list-section {
- @extend .flex-column;
- margin-top: 35px;
- .section-title {
- @extend .heading-2;
- padding-top: 20px;
- margin-bottom: 15px;
- padding-bottom: 0px;
- }
- &.overview-list-orphans {
- .chevron::before
- {
- display: none;
- }
- .vlm-list-view {
- .vlm-list {
- .vlm-list-item.orphan-list-item {
- @include overview-tile-shadow();
- margin-left: 0;
-
- .vlm-list-item-title {
-
- .item-name {
- color: $dark-gray;
- }
- }
- .list-item-icon-col {
- .overview-list-icon {
- background-color: $gray;
- border-color: $gray;
- }
- }
- .list-item-section {
- &:first-child {
- display: flex;
- color: $white;
- min-width: $arrow-element-width;
- }
- &.list-item-icon-col {
- margin-left: 65px;
- margin-right: 65px - $list-item-padding;
- }
- }
- }
}
- }
}
- .vlm-list-view {
- flex: 1;
- .vlm-list {
- @extend .flex;
- flex-direction: column;
- .vlm-list-item {
- @include border-shadow();
- min-height: 90px;
- height: 90px;
- background-color: $tlv-gray;
- @extend .flex;
- border: 1px solid $tlv-light-gray;
- margin-bottom: 0px;
- .clickable {
- cursor: pointer;
- }
- .list-item-section {
- .count-value {
- @extend .body-3;
- }
- &.list-item-icon-col {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 0;
- margin-right: 40px - $list-item-padding;
- margin-left: $icon-margin;
- .overview-list-icon {
- @extend .body-2;
- }
- }
- padding: 15px;
- &.list-item-arrow-col {
- padding: 0;
- }
- .children-count {
- @extend .body-1;
- color: $gray;
- padding-left: 5px;
- .count-value {
- padding: 0 5px;
- }
+ .overview-list-section {
+ @extend .flex-column;
+ margin-top: 35px;
+ .section-title {
+ @extend .heading-2;
+ padding-top: 20px;
+ margin-bottom: 15px;
+ padding-bottom: 0px;
+ }
+ &.overview-list-orphans {
+ .chevron::before {
+ display: none;
}
- .additional-data {
- padding-left: 60px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- *:last-child {
- margin-top: 20px;
- }
- *:only-child {
- margin-top: 0;
- }
- .additional-data-name {
- @extend .body-2-semibold;
- }
- }
- .additional-data-col-border {
- border-left: 1px solid $tlv-light-gray;
- min-height: 100%;
- height: 100%;
- }
- }
- .list-item-additional-data-col {
- @extend .body-2;
- @extend .flex;
- align-items: stretch;
- flex: 0.8;
- margin-left: 30px;
- padding-top: 17px;
- padding-bottom: 11px;
- }
- .arrow-icon {
- align-self: center;
+ .vlm-list-view {
+ .vlm-list {
+ .vlm-list-item.orphan-list-item {
+ @include overview-tile-shadow();
+ margin-left: 0;
- }
- .vlm-item-info {
+ .vlm-list-item-title {
+ .item-name {
+ color: $dark-gray;
+ }
+ }
+ .list-item-icon-col {
+ .overview-list-icon {
+ background-color: $gray;
+ border-color: $gray;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: flex;
+ color: $white;
+ min-width: $arrow-element-width;
+ }
+ &.list-item-icon-col {
+ margin-left: 65px;
+ margin-right: 65px - $list-item-padding;
+ }
+ }
+ }
+ }
+ }
+ }
+ .vlm-list-view {
flex: 1;
- }
- .vlm-list-item-title {
- @extend .flex;
- align-items: baseline;
- .item-name {
- @extend .heading-5-semibold;
- flex: 0 1 auto;
- margin-bottom: 4px;
- text-transform: uppercase;
- }
- }
- .vlm-list-item-description {
- @extend .body-1;
- @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
- max-height: 38px;
- }
- &.vlm-list-item-la {
- margin-top: 10px;
- .la-icon {
- @include create-circle($circle-icon-size, $la-color);
- color: $white;
- }
- .vlm-list-item-title {
- .item-name {
- color: $la-color;
- }
- }
- .list-item-section {
+ .vlm-list {
+ @extend .flex;
+ flex-direction: column;
+ .vlm-list-item {
+ @include border-shadow();
+ min-height: 90px;
+ height: 90px;
+ background-color: $tlv-gray;
+ @extend .flex;
+ border: 1px solid $tlv-light-gray;
+ margin-bottom: 0px;
+ .clickable {
+ cursor: pointer;
+ }
- &:first-child {
- display: flex;
- color: $la-color;
- min-width: $arrow-element-width;
- }
- }
- .list-item-arrow-col {
- flex: 0.01;
- margin-left: $arrow-margin;
- justify-content: center;
- }
- }
- &.vlm-list-item-fg {
- margin-left: $list-indentation;
- margin-top: 10px;
- .fg-pipeline-separator {
- color: $dark-gray;
- padding: 0 5px;
- }
- .list-item-icon-col {
- margin-left: 29px;
- }
- .fg-icon {
- @include create-circle($circle-icon-size, $fg-color);
- color: $white;
- }
+ .list-item-section {
+ .count-value {
+ @extend .body-3;
+ }
+ &.list-item-icon-col {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0;
+ margin-right: 40px - $list-item-padding;
+ margin-left: $icon-margin;
+ .overview-list-icon {
+ @extend .body-2;
+ }
+ }
+ padding: 15px;
+ &.list-item-arrow-col {
+ padding: 0;
+ }
+ .children-count {
+ @extend .body-1;
+ color: $gray;
+ padding-left: 5px;
+ .count-value {
+ padding: 0 5px;
+ }
+ }
+ .additional-data {
+ padding-left: 60px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ *:last-child {
+ margin-top: 20px;
+ }
+ *:only-child {
+ margin-top: 0;
+ }
+ .additional-data-name {
+ @extend .body-2-semibold;
+ }
+ }
+ .additional-data-col-border {
+ border-left: 1px solid $tlv-light-gray;
+ min-height: 100%;
+ height: 100%;
+ }
+ }
+ .list-item-additional-data-col {
+ @extend .body-2;
+ @extend .flex;
+ align-items: stretch;
+ flex: 0.8;
+ margin-left: 30px;
+ padding-top: 17px;
+ padding-bottom: 11px;
+ }
+ .arrow-icon {
+ align-self: center;
+ }
+ .vlm-item-info {
+ flex: 1;
+ }
+ .vlm-list-item-title {
+ @extend .flex;
+ align-items: baseline;
+ .item-name {
+ @extend .heading-5-semibold;
+ flex: 0 1 auto;
+ margin-bottom: 4px;
+ text-transform: uppercase;
+ }
+ }
+ .vlm-list-item-description {
+ @extend .body-1;
+ @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+ max-height: 38px;
+ }
+ &.vlm-list-item-la {
+ margin-top: 10px;
+ .la-icon {
+ @include create-circle($circle-icon-size, $la-color);
+ color: $white;
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $la-color;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: flex;
+ color: $la-color;
+ min-width: $arrow-element-width;
+ }
+ }
+ .list-item-arrow-col {
+ flex: 0.01;
+ margin-left: $arrow-margin;
+ justify-content: center;
+ }
+ }
+ &.vlm-list-item-fg {
+ margin-left: $list-indentation;
+ margin-top: 10px;
+ .fg-pipeline-separator {
+ color: $dark-gray;
+ padding: 0 5px;
+ }
+ .list-item-icon-col {
+ margin-left: 29px;
+ }
+ .fg-icon {
+ @include create-circle($circle-icon-size, $fg-color);
+ color: $white;
+ }
- .vlm-list-item-title {
- .item-name {
- color: $fg-color;
- }
- }
- .list-item-section {
- &:first-child {
- display: flex;
- color: $fg-color;
- min-width: $arrow-element-width;
-
- }
+ .vlm-list-item-title {
+ .item-name {
+ color: $fg-color;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: flex;
+ color: $fg-color;
+ min-width: $arrow-element-width;
+ }
+ }
+ .list-item-arrow-col {
+ flex: 0.01;
+ margin-left: $arrow-margin - $list-indentation;
+ padding-left: $list-indentation;
+ }
+ }
+ &.vlm-list-item-ep {
+ margin-left: $list-indentation * 2;
+ margin-top: 10px;
+ cursor: default;
+ .ep-icon {
+ @include create-circle($circle-icon-size, $lkg-ep-color);
+ color: $white;
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $lkg-ep-color;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: none;
+ }
+ &.list-item-icon-col {
+ margin-left: 52px;
+ }
+ }
+ }
+ &.vlm-list-item-lkg {
+ margin-top: 10px;
+ margin-left: $list-indentation * 2;
+ cursor: default;
+ .lkg-icon {
+ @include create-circle($circle-icon-size, $lkg-ep-color);
+ color: $white;
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $lkg-ep-color;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: none;
+ }
+ &.list-item-icon-col {
+ margin-left: 52px;
+ }
+ }
+ }
+ }
}
- .list-item-arrow-col {
- flex: 0.01;
- margin-left: $arrow-margin - $list-indentation;
- padding-left: $list-indentation;
- }
- }
- &.vlm-list-item-ep {
- margin-left: $list-indentation * 2;
- margin-top: 10px;
- cursor: default;
- .ep-icon {
- @include create-circle($circle-icon-size, $lkg-ep-color);
- color: $white;
- }
- .vlm-list-item-title {
- .item-name {
- color: $lkg-ep-color;
- }
- }
- .list-item-section {
- &:first-child {
- display: none;
- }
- &.list-item-icon-col {
- margin-left: 52px;
- }
- }
-
- }
- &.vlm-list-item-lkg {
- margin-top: 10px;
- margin-left: $list-indentation * 2;
- cursor: default;
- .lkg-icon {
- @include create-circle($circle-icon-size, $lkg-ep-color);
- color: $white;
- }
- .vlm-list-item-title {
- .item-name {
- color: $lkg-ep-color;
- }
- }
- .list-item-section {
- &:first-child {
- display: none;
- }
- &.list-item-icon-col {
- margin-left: 52px;
- }
-
- }
- }
}
-
- }
}
- }
-
}
diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
index 96648dd..000e42d 100644
--- a/openecomp-ui/resources/scss/modules/_mergeEditor.scss
+++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
@@ -5,203 +5,201 @@
$selected-color: $blue;
@mixin levels {
- @for $i from 1 to 6 {
- .level-#{$i} {
- padding-left: 18px + 10 * $i;
- }
- }
+ @for $i from 1 to 6 {
+ .level-#{$i} {
+ padding-left: 18px + 10 * $i;
+ }
+ }
}
.merge-editor-modal {
- .modal-lg {
- width: 1300px;
- }
+ .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;
- }
+ 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;
+ 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;
+ 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;
- }
+ .conflict-resolve-btn {
+ align-self: flex-end;
+ }
- .grid-items {
- align-items: center;
+ .grid-items {
+ align-items: center;
- input[type="radio"]:not(:checked) {
- cursor: pointer;
- }
- }
- }
+ input[type='radio']:not(:checked) {
+ cursor: pointer;
+ }
+ }
+ }
- .collapsible-section {
- display: flex;
- cursor: pointer;
+ .collapsible-section {
+ display: flex;
+ cursor: pointer;
- .conflict-title {
- @extend .heading-5-semibold;
- text-transform: uppercase;
- }
- }
+ .conflict-title {
+ @extend .heading-5-semibold;
+ text-transform: uppercase;
+ }
+ }
- .merge-chevron {
- margin-right: 7px;
- &.right {
- transform: rotate(90deg);
- }
- }
+ .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;
- }
+ .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;
- }
- }
+ &.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;
+ .merge-editor-text-field {
+ display: flex;
+ justify-content: space-between;
+ margin: 0;
- .field {
- color: $text-black;
+ .field {
+ color: $text-black;
- &.field-name:not(.field-object-name) {
- color: $gray;
- }
- }
+ &.field-name:not(.field-object-name) {
+ color: $gray;
+ }
+ }
- &.diff {
- .field {
- color: $red;
- }
- }
+ &.diff {
+ .field {
+ color: $red;
+ }
+ }
- &.grid-section {
- padding-bottom: 0;
+ &.grid-section {
+ padding-bottom: 0;
- .grid-items {
- flex: 1;
+ .grid-items {
+ flex: 1;
+ .field-col {
+ padding: 7px 0;
+ height: 100%;
- .field-col {
- padding: 7px 0;
- height: 100%;
+ &:not(:first-child) {
+ padding-left: 8px;
+ }
- &:not(:first-child) {
- padding-left: 8px;
- }
+ &.grid-col-yours {
+ background-color: $yours-bg-color;
+ }
- &.grid-col-yours {
- background-color: $yours-bg-color;
- }
+ &.grid-col-theirs {
+ background-color: $theirs-bg-color;
+ }
- &.grid-col-theirs {
- background-color: $theirs-bg-color;
- }
+ @include levels;
- @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 {
- @extend .body-1;
- flex: 2;
- min-width: 0;
+ &.field-yours {
+ @include multiline-ellipsis($bgColor: $yours-bg-color);
+ }
- &.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-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-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;
- }
- }
- }
+ &.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 39f7636..bf0c146 100644
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -1,63 +1,63 @@
$transitionLength: 0.6s;
.catalog-view {
- background-color: $background-gray;
- overflow: hidden;
- height: 100%;
- display: flex;
- @import "onboardingCatalog/catalogFilter.scss";
- .catalog-parts {
- width: 100%;
- @import "onboardingCatalog/onboardHeader";
- @import "onboardingCatalog/catalogHeader";
- }
- @import "onboardingCatalog/vendorPageHeader";
- @import "onboardingCatalog/catalogList";
- @import "onboardingCatalog/vspOverlay";
- .catalog-wrapper {
- height: 100%;
- overflow: auto;
- .tab-separator {
- content: '';
- height: 25px;
- border-right: 1px solid $dark-gray;
- }
- .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;
- text-transform: none;
- }
- }
- }
- }
+ background-color: $background-gray;
+ overflow: hidden;
+ height: 100%;
+ display: flex;
+ @import 'onboardingCatalog/catalogFilter.scss';
+ .catalog-parts {
+ width: 100%;
+ @import 'onboardingCatalog/onboardHeader';
+ @import 'onboardingCatalog/catalogHeader';
+ }
+ @import 'onboardingCatalog/vendorPageHeader';
+ @import 'onboardingCatalog/catalogList';
+ @import 'onboardingCatalog/vspOverlay';
+ .catalog-wrapper {
+ height: 100%;
+ overflow: auto;
+ .tab-separator {
+ content: '';
+ height: 25px;
+ border-right: 1px solid $dark-gray;
+ }
+ .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;
+ text-transform: none;
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_permissions.scss b/openecomp-ui/resources/scss/modules/_permissions.scss
index e652d9d..5f83dc2 100644
--- a/openecomp-ui/resources/scss/modules/_permissions.scss
+++ b/openecomp-ui/resources/scss/modules/_permissions.scss
@@ -1,55 +1,50 @@
-.modal-content {
- .modal-body {
- .manage-permissions-page {
- .validation-form-content {
- overflow-y: visible;
- }
+.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
- }
- }
- }
- }
+ .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
index 2b196c1..619fe7e 100644
--- a/openecomp-ui/resources/scss/modules/_revisions.scss
+++ b/openecomp-ui/resources/scss/modules/_revisions.scss
@@ -1,86 +1,68 @@
.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 {
+ .revision-list-item {
&.selected {
- .selectable, .selectable:hover {
- border-width: 2px;
- border-color: $light-blue;
- }
+ .selectable,
+ .selectable:hover {
+ border-width: 2px;
+ border-color: $light-blue;
+ }
}
- .selectable:hover{
- border-color: $gray;
+ .selectable:hover {
+ border-color: $gray;
}
.selectable:active {
- border-color: $light-blue;
+ border-color: $light-blue;
}
- }
+ }
- .list-editor-view-list-scroller {
- margin-top : 0px;
- }
+ .list-editor-view-list-scroller {
+ margin-top: 0px;
+ }
- .list-editor-view-header {
+ .list-editor-view-header {
border-bottom: none;
.list-editor-view-title {
- @extend .heading-5;
- text-transform: none;
- color: $blue;
+ @extend .heading-5;
+ text-transform: none;
+ color: $blue;
}
- }
+ }
- .list-editor-item-view-content {
+ .list-editor-item-view-content {
background-color: $background-gray;
- }
- .revision-list-item-fields {
+ }
+ .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;
- }
+ 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;
- }
+ 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;
- }
+ 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 81a109c..f24198c 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -1,267 +1,262 @@
-
.vsp-attachments-view {
- position: relative;
- .attachments-tabs {
- .sdc-tabs-list {
- padding-left: 28px;
- background-color: $tlv-gray;
- box-shadow: none;
- border-bottom: 1px solid $light-gray;
- .sdc-tab {
- @extend .heading-2;
- padding-top: 10px;
- margin-top: 0;
- &.sdc-tab-active {
- color: $blue;
- font-weight: bold;
+ position: relative;
+ .attachments-tabs {
+ .sdc-tabs-list {
+ padding-left: 28px;
+ background-color: $tlv-gray;
+ box-shadow: none;
+ border-bottom: 1px solid $light-gray;
+ .sdc-tab {
+ @extend .heading-2;
+ padding-top: 10px;
+ margin-top: 0;
+ &.sdc-tab-active {
+ color: $blue;
+ font-weight: bold;
+ }
+ }
}
- }
+ .sdc-tab-content {
+ margin-top: 0;
+ }
}
- .sdc-tab-content {
- margin-top: 0;
- }
- }
- .attachments-view-controllers {
- position: absolute;
- right: 40px;
- top: 10px;
- display: flex;
+ .attachments-view-controllers {
+ position: absolute;
+ right: 40px;
+ top: 10px;
+ display: flex;
-
- .icon-component {
- margin-right: 30px;
- }
+ .icon-component {
+ margin-right: 30px;
+ }
- input[type="file"] {
- visibility: hidden;
- width: 1px;
- padding: 0;
- margin-left: -1px;
- }
+ input[type='file'] {
+ visibility: hidden;
+ width: 1px;
+ padding: 0;
+ margin-left: -1px;
+ }
- .proceed-to-validation-btn {
- margin-right: 30px;
+ .proceed-to-validation-btn {
+ margin-right: 30px;
+ }
+ .go-to-overview-btn {
+ width: 191px;
+ margin-right: 36px;
+ height: 36px;
+ }
+ .separator {
+ height: 27px;
+ border: 1px solid $light-gray;
+ margin-right: 31px;
+ margin-left: 0px;
+ margin-top: 3px;
+ }
+ .abort-btn {
+ fill: $blue;
+ color: $blue;
+ &:hover {
+ color: $light-blue;
+ fill: $light-blue;
+ }
+ }
}
- .go-to-overview-btn {
- width: 191px;
- margin-right: 36px;
- height: 36px;
- }
- .separator {
- height: 27px;
- border: 1px solid $light-gray;
- margin-right: 31px;
- margin-left: 0px;
- margin-top: 3px;
- }
- .abort-btn {
- fill: $blue;
- color: $blue;
- &:hover {
- color: $light-blue;
- fill: $light-blue;
- }
- }
- }
}
.vsp-attachments-heat-validation {
- @extend .body-1;
- display: flex;
- .svg-icon.exclamationTriangleFull {
- fill: $orange;
- width: 15px;
- height: 15px;
- &.large {
- width: 20px;
- height: 20px;
- }
- }
- .validation-tree-section {
+ @extend .body-1;
display: flex;
- width: 400px;
- justify-content: space-between;
- }
- .vsp-attachments-heat-validation-tree {
- @extend .flex-column;
- margin: 0;
- overflow: auto;
- height: 100%;
- .attachments-tree-header {
- display: flex;
- justify-content: space-between;
- height: 55px;
- align-items: center;
- &.header-selected {
- background: $tlv-gray;
- }
- .header-icon {
- top: -3px;
- position: relative;
- margin-left: 20px;
- }
- .tree-header-title-text {
- @extend .heading-4-semibold;
- padding-left: 32px;
- cursor: pointer;
- &.tree-header-title-selected{
- color: $blue;
- }
- }
- .tree-header-title {
- display: flex;
- }
- }
- .counters {
- display: flex;
- justify-content: space-between;
- z-index: 1;
- padding-right: 20px;
- .counter {
- .svg-icon {
- &.__exclamationTriangleLine {
- fill: $orange;
- }
- }
- display: flex;
- &:first-child {
- margin-right: 20px;
- }
- &:only-child {
- margin-right: 0;
- }
- .svg-icon-wrapper {
- margin-right: 5px;
- }
- .counter-icon {
- margin-right: 5px;
- }
- .error-text, .warning-text {
- @extend .body-3;
- &.large {
- @extend .heading-4-semibold;
- }
- }
- }
- }
- .tree-wrapper {
- flex: 1 1;
- position: relative;
- padding-bottom: 10px;
-
- @-moz-document url-prefix() {
- .tree-block-inside {
- top: 0;
- position: relative;
- }
- }
- .tree-block-inside {
- padding-left: 20px;
- .tree-node-row {
- cursor: default;
- white-space: nowrap;
- display: flex;
- justify-content: space-between;
- height: 40px;
- align-items: center;
- .svg-icon {
- &.__chevronUp, &.__chevronDown {
- height: 10px;
- width: 10px;
- }
- }
-
- &:after {
- border-top: 1px solid $tlv-gray;
- height: 40px;
- position: absolute;
- left: 0;
- right: 0;
- content: ' ';
- }
- @-moz-document url-prefix() {
- &:after {
- top: 0;
- }
- }
- &.tree-node-selected::before {
- position: absolute;
- left: 0;
- right: 0;
+ .svg-icon.exclamationTriangleFull {
+ fill: $orange;
+ width: 15px;
+ height: 15px;
+ &.large {
+ width: 20px;
height: 20px;
- display: inline-block;
- content: ' ';
- background-color: $tlv-gray;
- color: $blue;
- }
-
- &.tree-node-clicked {
- color: $blue;
- &:after {
- background: $tlv-gray;
- height: 40px;
- position: absolute;
- left: 0;
- right: 0;
- content: ' ';
+ }
+ }
+ .validation-tree-section {
+ display: flex;
+ width: 400px;
+ justify-content: space-between;
+ }
+ .vsp-attachments-heat-validation-tree {
+ @extend .flex-column;
+ margin: 0;
+ overflow: auto;
+ height: 100%;
+ .attachments-tree-header {
+ display: flex;
+ justify-content: space-between;
+ height: 55px;
+ align-items: center;
+ &.header-selected {
+ background: $tlv-gray;
}
- }
- .tree-node-name {
- cursor: pointer;
- }
- .name-section {
+ .header-icon {
+ top: -3px;
+ position: relative;
+ margin-left: 20px;
+ }
+ .tree-header-title-text {
+ @extend .heading-4-semibold;
+ padding-left: 32px;
+ cursor: pointer;
+ &.tree-header-title-selected {
+ color: $blue;
+ }
+ }
+ .tree-header-title {
+ display: flex;
+ }
+ }
+ .counters {
+ display: flex;
+ justify-content: space-between;
z-index: 1;
- flex: 1;
- @include ellipsis(auto);
- }
- .tree-node-expander {
+ padding-right: 20px;
+ .counter {
+ .svg-icon {
+ &.__exclamationTriangleLine {
+ fill: $orange;
+ }
+ }
+ display: flex;
+ &:first-child {
+ margin-right: 20px;
+ }
+ &:only-child {
+ margin-right: 0;
+ }
+ .svg-icon-wrapper {
+ margin-right: 5px;
+ }
+ .counter-icon {
+ margin-right: 5px;
+ }
+ .error-text,
+ .warning-text {
+ @extend .body-3;
+ &.large {
+ @extend .heading-4-semibold;
+ }
+ }
+ }
+ }
+ .tree-wrapper {
+ flex: 1 1;
position: relative;
- display: inline-block;
- cursor: pointer;
- }
- .tree-node-icon {
- margin: 0 7px;
- }
+ padding-bottom: 10px;
+
+ @-moz-document url-prefix() {
+ .tree-block-inside {
+ top: 0;
+ position: relative;
+ }
+ }
+ .tree-block-inside {
+ padding-left: 20px;
+ .tree-node-row {
+ cursor: default;
+ white-space: nowrap;
+ display: flex;
+ justify-content: space-between;
+ height: 40px;
+ align-items: center;
+ .svg-icon {
+ &.__chevronUp,
+ &.__chevronDown {
+ height: 10px;
+ width: 10px;
+ }
+ }
+
+ &:after {
+ border-top: 1px solid $tlv-gray;
+ height: 40px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ content: ' ';
+ }
+ @-moz-document url-prefix() {
+ &:after {
+ top: 0;
+ }
+ }
+ &.tree-node-selected::before {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 20px;
+ display: inline-block;
+ content: ' ';
+ background-color: $tlv-gray;
+ color: $blue;
+ }
+
+ &.tree-node-clicked {
+ color: $blue;
+ &:after {
+ background: $tlv-gray;
+ height: 40px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ content: ' ';
+ }
+ }
+ .tree-node-name {
+ cursor: pointer;
+ }
+ .name-section {
+ z-index: 1;
+ flex: 1;
+ @include ellipsis(auto);
+ }
+ .tree-node-expander {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .tree-node-icon {
+ margin: 0 7px;
+ }
+ }
+ }
}
- }
}
- }
- .vsp-attachments-heat-validation-separator {
- border-left: 1px solid $tlv-light-gray;
- height: 100%;
- width: 5px;
- cursor: e-resize;
- }
-
- .message-board-section {
- @extend .flex-column;
- padding-left: 25px;
- padding-top: 10px;
- padding-right: 60px;
- overflow: auto;
- margin-bottom: 70px;
- .error-item {
- display: flex;
- margin: 10px 0;
- .large {
- .svg-icon {
- width: 20px;
- height: 20px;
- fill: $orange;
- }
- }
- .error-item-file-type {
- margin-left: 15px;
- }
- .error-file-name {
- @extend .body-1-semibold;
- margin-right: 5px;
- }
-
-
-
+ .vsp-attachments-heat-validation-separator {
+ border-left: 1px solid $tlv-light-gray;
+ height: 100%;
+ width: 5px;
+ cursor: e-resize;
}
- }
-
+ .message-board-section {
+ @extend .flex-column;
+ padding-left: 25px;
+ padding-top: 10px;
+ padding-right: 60px;
+ overflow: auto;
+ margin-bottom: 70px;
+ .error-item {
+ display: flex;
+ margin: 10px 0;
+ .large {
+ .svg-icon {
+ width: 20px;
+ height: 20px;
+ fill: $orange;
+ }
+ }
+ .error-item-file-type {
+ margin-left: 15px;
+ }
+ .error-file-name {
+ @extend .body-1-semibold;
+ margin-right: 5px;
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
index 164e3bc..83941c0 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
@@ -1,3 +1,3 @@
-.section-title.software-product-compute-number-of-vms{
- text-transform: initial;
-}
\ No newline at end of file
+.section-title.software-product-compute-number-of-vms {
+ text-transform: initial;
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
index d31c7f0..f50e342 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
@@ -1,13 +1,13 @@
.vsp-components-general {
- .general-data {
- .one-line-textarea {
- height: 30px;
+ .general-data {
+ .one-line-textarea {
+ height: 30px;
+ }
+ .multi-line-textarea {
+ height: calc(100% - 25px);
+ textarea {
+ height: inherit;
+ }
+ }
}
- .multi-line-textarea {
- height: calc(100% - 25px);
- textarea {
- height: inherit;
- }
- }
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
index b67c448..409b686 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
@@ -1,67 +1,51 @@
-.image-modal-new {
- .modal-dialog {
- width: 600px;
- }
- .image-filename {
- width: 480px;
- }
-}
-
-.image-modal-edit {
- .modal-dialog {
- width: 910px;
- }
- .image-filename {
- width: 550px;
- }
-}
-
.vsp-components-image-editor {
- .note-text {
- color: $red;
- }
+ .note-text {
+ color: $red;
+ }
}
-.image-modal-edit, .image-modal-new {
- .vsp-components-image-editor {
-
- .image-format, .image-md5, .image-version {
- width: 200px;
+.image-modal-edit,
+.image-modal-new {
+ .vsp-components-image-editor {
+ .image-format,
+ .image-md5,
+ .image-version {
+ width: 200px;
+ }
+ .image-version {
+ padding-left: 30px;
+ }
+ .section-title {
+ text-transform: uppercase;
+ font-size: 18px;
+ }
}
- .image-version {
- padding-left: 30px;
- }
- .section-title {
- text-transform: uppercase;
- font-size: 18px;
- }
- }
}
.vsp-components-image {
- .list-editor-view {
- margin-top: 50px;
- .manual-title {
- @extend .body-1-semibold;
+ .list-editor-view {
+ margin-top: 50px;
+ .manual-title {
+ @extend .body-1-semibold;
+ }
}
- }
- .list-editor-item-view-content {
- flex:1;
- min-width: 0;
- }
- .list-editor-item-view-controller {
- padding-top: 5px;
- }
- .image-filename-cell {
- display: flex;
- .image-filename {
- white-space: nowrap;
- overflow: hidden;
- display: inline-block;
- text-overflow: ellipsis;
- span {
- @include ellipsis(100%);
- }
+ .list-editor-item-view-content {
+ flex: 1;
+ min-width: 0;
}
- }
+ .list-editor-item-view-controller {
+ padding-top: 5px;
+ }
+ .image-filename-cell {
+ display: flex;
+ .image-filename {
+ white-space: nowrap;
+ overflow: hidden;
+ display: inline-block;
+ text-overflow: ellipsis;
+ span {
+ @include ellipsis(100%);
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
index eaba47a..464ef98 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
@@ -1,87 +1,85 @@
.vsp-components-network {
- .network-data {
- .single-col {
- .validation-input-wrapper {
- label {
- max-width: 230px;
+ .network-data {
+ .single-col {
+ .validation-input-wrapper {
+ label {
+ max-width: 230px;
+ }
+ }
}
- }
}
- }
- .list-editor-view {
- margin-top: 50px;
- .manual-title {
- @extend .body-1-semibold;
+ .list-editor-view {
+ margin-top: 50px;
+ .manual-title {
+ @extend .body-1-semibold;
+ }
}
- }
}
.network-nic-modal-create {
- .network-type-radio {
- display: flex;
- }
+ .network-type-radio {
+ display: flex;
+ .validation-radio-wrapper:first-child {
+ padding-right: 20px;
+ }
+ }
}
-.network-nic-modal-edit {
- .modal-dialog {
- width: 900px;
- }
- .vsp-components-network-editor {
+.vsp-components-network-editor {
.editor-data {
- height: 500px;
- .grid-section {
- padding-bottom: 15px;
- .section-title {
- @extend .heading-5;
- padding-bottom: 10px;
- padding-left: 0;
+ height: 500px;
+ .grid-section {
+ padding-bottom: 15px;
+ .section-title {
+ @extend .heading-5;
+ padding-bottom: 10px;
+ padding-left: 0;
+ }
}
- }
- .part-title {
- @extend .heading-5;
- padding-bottom: 10px;
- padding-left: 14px;
- }
- .part-title-small {
- @extend .heading-3;
- padding-bottom: 10px;
- padding-left: 0;
- }
- .network-radio label {
- font-size: 15px;
- }
-
- .packets-bytes-gen {
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- .top-row {
- display: flex;
- .part-title-small {
+ .part-title {
+ @extend .heading-5;
+ padding-bottom: 10px;
+ padding-left: 14px;
+ }
+ .part-title-small {
+ @extend .heading-3;
+ padding-bottom: 10px;
padding-left: 0;
- &.packets {
- flex: 0 0 52%;
- }
- &.bytes {
- flex: 0 0 48%;
- }
- }
}
- .bottom-row {
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- flex: 1;
- .inputs-wrapper {
+ .network-radio label {
+ font-size: 15px;
+ }
+
+ .packets-bytes-gen {
display: flex;
- flex-direction: row;
justify-content: space-between;
- flex: 1;
- .validation-input-wrapper {
- flex: 0 0 22%;
+ flex-direction: column;
+ .top-row {
+ display: flex;
+ .part-title-small {
+ padding-left: 0;
+ &.packets {
+ flex: 0 0 52%;
+ }
+ &.bytes {
+ flex: 0 0 48%;
+ }
+ }
}
- }
+ .bottom-row {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ flex: 1;
+ .inputs-wrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ flex: 1;
+ .validation-input-wrapper {
+ flex: 0 0 22%;
+ }
+ }
+ }
}
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
index 9476d70..b3c4800 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
@@ -1,9 +1,9 @@
.edit-process-modal {
- .component-process-description > textarea {
- height: 113px;
- }
+ .component-process-description > textarea {
+ height: 113px;
+ }
}
.software-product-landing-view-right-side.vsp-components-processes-page {
- overflow-y: initial;
-}
\ No newline at end of file
+ overflow-y: initial;
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
index b788a86..8b13789 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
@@ -1,39 +1 @@
-.software-product-type-modal {
- .modal-dialog {
- @extend .modal-lg !optional;
- .modal-body {
- padding: 0;
- }
- .validation-form-content {
- padding: 50px;
- .software-product-form-row {
- display: flex;
- justify-content: space-between;
- margin-bottom: 20px;
- .software-product-inline-section {
- padding: 0 20px;
- flex: 45%;
- .validation-input-wrapper {
- .field-section {
- @extend .body-2-semibold;
- margin-bottom: 23px;
- color: $black;
- }
- textarea {
- height: 191px;
- }
- select optgroup[label] {
- color: $dark-blue;
- }
- option {
- color: black;
- }
- }
- }
- }
- }
- .validation-buttons {
- padding: 20px 50px;
- }
- }
-}
+
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
index 65c558f..5358e7c 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
@@ -2,22 +2,22 @@
.software-product-dependencies-title {
@extend .heading-1;
@extend .text-uppercase !optional;
- position: sticky;
- top: -30px;
- z-index: 1;
- background: $white;
+ 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;
+ position: sticky;
+ top: 4px;
+ z-index: 1;
+ background: $white;
justify-content: flex-end;
cursor: pointer;
color: $blue;
- padding-right: 27px;
+ padding-right: 27px;
margin-bottom: 3px;
&:hover {
color: $dark-blue;
@@ -26,23 +26,24 @@
.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;
+ .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 b5f9a54..85eea9c 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
@@ -1,46 +1,38 @@
.deployment-flavor-editor {
- .modal-dialog {
- width: 780px;
- }
- .deployment-feature-groups-section.no-feature-groups {
- padding-bottom: 0;
- .form-group {
- margin-bottom: 5px;
- }
- }
- .deployment-feature-group-warning-section {
- padding-bottom: 30px;
- span {
- @extend .body-2;
- color: $red;
- }
- }
- .grid-section.vfc-table {
- .section-title {
- padding-bottom: 10px;
- }
- }
- .modal-content {
- .modal-body {
- .validation-form-content {
- overflow-y: visible;
- .grid-col-1 {
- flex-basis: 30%;
- }
+ .deployment-feature-groups-section.no-feature-groups {
+ padding-bottom: 0;
+ .form-group {
+ margin-bottom: 5px;
+ }
+ }
+ .deployment-feature-group-warning-section {
+ padding-bottom: 30px;
+ span {
+ @extend .body-2;
+ color: $red;
+ }
+ }
+ .grid-section.vfc-table {
+ .section-title {
+ padding-bottom: 10px;
+ }
+ }
+ &.sdc-modal__content {
+ .validation-form-content {
+ .grid-col-1 {
+ flex-basis: 30%;
+ }
+ .grid-section.vfc-table {
+ padding-bottom: 50px;
+ .Select-menu {
+ max-height: 100px;
+ }
+ }
- .grid-section.vfc-table {
- padding-bottom: 50px;
- .Select-menu {
- max-height: 100px;
- }
-
- }
-
- .grid-col-3 {
- flex-basis: 65%;
- }
- }
- }
- }
+ .grid-col-3 {
+ flex-basis: 65%;
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index 8d124c3..8f0803f 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -1,276 +1,273 @@
.upload-modal-body-content {
- padding-left: 30px;
- padding-right: 30px;
- padding-bottom: 10px;
- .title {
- @extend .body-1-semibold;
- }
- .file-name {
- padding-left: 5px;
- @extend .body-1-semibold;
- }
+ padding-left: 30px;
+ padding-right: 30px;
+ padding-bottom: 10px;
+ .title {
+ @extend .body-1-semibold;
+ }
+ .file-name {
+ padding-left: 5px;
+ @extend .body-1-semibold;
+ }
}
-
.software-product-view {
- display: flex;
- height:100%;
+ display: flex;
+ height: 100%;
- .description {
- @extend .body-1;
- padding-right: 20px;
+ .description {
+ @extend .body-1;
+ padding-right: 20px;
- .missing-license {
- display: flex;
- align-items: baseline;
- .svg-icon{
- margin-right: 7px;
- margin-left: 3px;
- &.__exclamationTriangleFull {
- fill: $orange;
- width: 17px;
- height: 17px;
- }
- }
- .warning-text {
- position: relative;
- top: -2px;
- }
- }
- }
- .name {
- @extend .body-1-semibold;
- }
- .software-product-landing-view-right-side {
- @extend .flex;
- overflow-y: hidden;
- .list-editor-view {
- .list-editor-view-title {
- margin-bottom: 0;
- }
- }
- }
- .software-product-landing-view {
- padding-bottom: 50px;
-
-
- .software-product-landing-view-top {
- .details-container {
- @extend .flex-column;
-
- .single-detail-section {
-
- @extend .flex-column;
- &.title-section {
- flex: 0.8;
- @extend .heading-5-semibold;
- }
- &.title-text {
- margin-bottom: 24px;
- }
- .description {
- @include multiline-ellipsis();
- }
- }
- .title {
- @extend .body-3;
- color: $gray;
- &.extra-large {
- min-width: 130px;
- }
- }
- .details-section {
- display: flex;
- }
- .multiple-details-section {
- @extend .flex-column;
- justify-content: space-between;
- .detail-col {
- padding-bottom: 10px;
- }
- }
- }
- .row {
- margin: 0;
- display: flex;
- .details-panel {
- flex: 1;
- margin-right: 50px;
- &:last-child {
- margin-right: 0;
- }
- .software-product-landing-view-top-block-col-upl {
- height: 215px;
- width: initial;
- }
- }
- .col-md-6 {
- padding: 0;
-
- overflow-wrap: break-word;
- &:first-child {
- padding-right: 25px;
- }
- &:last-child {
- padding-left: 25px;
- }
- }
- .title {
- @extend .body-1-semibold;
- }
- .software-product-landing-view-heading-title {
- @extend .section-title;
- color: $dark-gray;
- padding-bottom: 20px;
- &:first-child {
- padding-bottom: 20px;
- }
- }
- .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;
-
- .col-md-6 {
- @extend .body-1;
- }
- .software-product-landing-view-top-block-col {
- @extend .body-1;
- flex: 0.8;
+ .missing-license {
display: flex;
- justify-content: space-between;
- flex-direction: column;
- .description {
- overflow: hidden;
- padding-right: 20px;
+ align-items: baseline;
+ .svg-icon {
+ margin-right: 7px;
+ margin-left: 3px;
+ &.__exclamationTriangleFull {
+ fill: $orange;
+ width: 17px;
+ height: 17px;
+ }
}
- .attachment-details {
- padding-bottom: 10px;
+ .warning-text {
+ position: relative;
+ top: -2px;
}
- .attachment-details-count {
- 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;
- color: $light-gray;
- }
- .upload {
- width: 50%;
- border : 0px !important;
- }
- .vnfRepo {
- width: 50%;
- cursor: pointer;
- .searchRepo-text {
- color: $blue;
- @extend .body-1-semibold;
- width: 72px;
- line-height: 24px;
- margin-left: auto;
- margin-right: auto;
- }
- .svg-icon-wrapper {
- .svg-icon.__search {
- width: 34px;
- height: 34px;
- margin-top: 10px;
- }
- &.__positive {
- fill: $blue;
- color: $blue;
- }
- }
- }
- .verticalLine {
- height: 90%;
- border-left: 1px solid $light-gray;
- }
- }
- .showVnf {
- flex-direction: row;
- }
- }
}
- }
+ .name {
+ @extend .body-1-semibold;
+ }
+ .software-product-landing-view-right-side {
+ @extend .flex;
+ overflow-y: hidden;
+ .list-editor-view {
+ .list-editor-view-title {
+ margin-bottom: 0;
+ }
+ }
+ }
+ .software-product-landing-view {
+ padding-bottom: 50px;
+
+ .software-product-landing-view-top {
+ .details-container {
+ @extend .flex-column;
+
+ .single-detail-section {
+ @extend .flex-column;
+ &.title-section {
+ flex: 0.8;
+ @extend .heading-5-semibold;
+ }
+ &.title-text {
+ margin-bottom: 24px;
+ }
+ .description {
+ @include multiline-ellipsis();
+ }
+ }
+ .title {
+ @extend .body-3;
+ color: $gray;
+ &.extra-large {
+ min-width: 130px;
+ }
+ }
+ .details-section {
+ display: flex;
+ }
+ .multiple-details-section {
+ @extend .flex-column;
+ justify-content: space-between;
+ .detail-col {
+ padding-bottom: 10px;
+ }
+ }
+ }
+ .row {
+ margin: 0;
+ display: flex;
+ .details-panel {
+ flex: 1;
+ margin-right: 50px;
+ &:last-child {
+ margin-right: 0;
+ }
+ .software-product-landing-view-top-block-col-upl {
+ height: 215px;
+ width: initial;
+ }
+ }
+ .col-md-6 {
+ padding: 0;
+
+ overflow-wrap: break-word;
+ &:first-child {
+ padding-right: 25px;
+ }
+ &:last-child {
+ padding-left: 25px;
+ }
+ }
+ .title {
+ @extend .body-1-semibold;
+ }
+ .software-product-landing-view-heading-title {
+ @extend .section-title;
+ color: $dark-gray;
+ padding-bottom: 20px;
+ &:first-child {
+ padding-bottom: 20px;
+ }
+ }
+ .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;
+
+ .col-md-6 {
+ @extend .body-1;
+ }
+ .software-product-landing-view-top-block-col {
+ @extend .body-1;
+ flex: 0.8;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ .description {
+ overflow: hidden;
+ padding-right: 20px;
+ }
+ .attachment-details {
+ padding-bottom: 10px;
+ }
+ .attachment-details-count {
+ 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;
+ color: $light-gray;
+ }
+ .upload {
+ width: 50%;
+ border: 0px !important;
+ }
+ .vnfRepo {
+ width: 50%;
+ cursor: pointer;
+ .searchRepo-text {
+ color: $blue;
+ @extend .body-1-semibold;
+ width: 72px;
+ line-height: 24px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .svg-icon-wrapper {
+ .svg-icon.__search {
+ width: 34px;
+ height: 34px;
+ margin-top: 10px;
+ }
+ &.__positive {
+ fill: $blue;
+ color: $blue;
+ }
+ }
+ }
+ .verticalLine {
+ height: 90%;
+ border-left: 1px solid $light-gray;
+ }
+ }
+ .showVnf {
+ flex-direction: row;
+ }
+ }
+ }
+ }
}
.vsp-details-page {
- .grid-section-general {
- padding-bottom: 30px;
- }
- .vsp-general-tab {
- .validation-form-content {
- margin: 0;
+ .grid-section-general {
+ padding-bottom: 30px;
}
- .validation-buttons {
- margin: 43px 0;
- padding: 0 52px;
- }
- .validation-form-content {
- .vsp-general-tab-inline-section {
- display: flex;
+ .vsp-general-tab {
+ .validation-form-content {
+ margin: 0;
+ }
+ .validation-buttons {
+ margin: 43px 0;
+ padding: 0 52px;
+ }
+ .validation-form-content {
+ .vsp-general-tab-inline-section {
+ display: flex;
- .vsp-general-tab-sub-section:not(:last-of-type) {
- margin-right: 40px;
+ .vsp-general-tab-sub-section:not(:last-of-type) {
+ margin-right: 40px;
+ }
+ .field-section {
+ width: 440px;
+ }
+ .form-group textarea {
+ height: 192px;
+ }
+ select optgroup[label] {
+ color: $dark-blue;
+ }
+ option {
+ color: $dark-gray;
+ }
+ .Select,
+ .input-options {
+ width: 440px;
+ }
+ }
}
- .field-section {
- width: 440px;
+ .validation-buttons {
+ position: fixed;
+ display: block;
+ bottom: 0;
+ width: 66%;
}
- .form-group textarea {
- height: 192px;
+ .validation-input-wrapper {
+ select.form-control {
+ width: 100%;
+ }
}
- select optgroup[label] {
- color: $dark-blue;
- }
- option {
- color: $dark-gray;
- }
- .Select, .input-options {
- width: 440px;
- }
- }
}
- .validation-buttons {
- position: fixed;
- display: block;
- bottom: 0;
- width: 66%;
- }
- .validation-input-wrapper {
- select.form-control {
- width: 100%;
- }
- }
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
index 3f2a2f9..9ec074f 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
@@ -1,60 +1,60 @@
.edit-process-modal {
- height: 100%;
- .vsp-processes-editor {
- padding-left: 0;
- padding-right: 0;
- .editor-title {
- @extend .heading-2;
- color: $dark-gray;
- padding-bottom: 50px;
- }
- .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;
-
- .process-type {
- width: 100%;
- }
- }
- .vsp-processes-editor-data {
- .validation-input-wrapper {
- .form-group.vsp-process-description > textarea {
- height: 113px;
+ height: 100%;
+ .vsp-processes-editor {
+ padding-left: 0;
+ padding-right: 0;
+ .editor-title {
+ @extend .heading-2;
+ color: $dark-gray;
+ padding-bottom: 50px;
}
- }
- .process-type {
- width: 100%;
- }
- .process-editor-file-box {
- width: 380px;
- }
+ .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;
+
+ .process-type {
+ width: 100%;
+ }
+ }
+ .vsp-processes-editor-data {
+ .validation-input-wrapper {
+ .form-group.vsp-process-description > textarea {
+ height: 113px;
+ }
+ }
+ .process-type {
+ width: 100%;
+ }
+ .process-editor-file-box {
+ width: 380px;
+ }
+ }
}
- }
}
.software-product-landing-view-right-side.vsp-processes-page {
- overflow-y: initial;
- .processes-list {
- @extend .flex-column;
- }
- .list-editor-view {
- .list-editor-view-list {
- .list-editor-item-view {
- .list-editor-item-view-content {
- .list-editor-item-view-field {
- .artifact-name {
- @extend .body-1;
- color: $light-green;
- }
- }
- }
- }
+ overflow-y: initial;
+ .processes-list {
+ @extend .flex-column;
}
- }
+ .list-editor-view {
+ .list-editor-view-list {
+ .list-editor-item-view {
+ .list-editor-item-view-content {
+ .list-editor-item-view-field {
+ .artifact-name {
+ @extend .body-1;
+ color: $light-green;
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index 440b242..00f3ae4 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,35 +1,35 @@
.vsp-components-load-balancing {
- .svg-icon-wrapper {
- position: relative;
- top: -4px;
- }
+ .svg-icon-wrapper {
+ position: relative;
+ top: -4px;
+ }
- .halb-data {
- .question {
- padding-top: 10px;
- &:first-child {
- padding-top: 0;
- }
- }
- .title {
- @extend .body-1-semibold;
- margin-bottom: 8px;
- cursor: pointer;
- .svg-icon {
- @include transition(transform 0.3s);
- margin-right: 5px;
- position: relative;
- top: 4px;
- }
- }
- .add-padding {
- padding-bottom: 20px;
- }
- .new-line {
- margin-left: 16px;
- }
- textarea.form-control {
- height: 90px;
- }
- }
+ .halb-data {
+ .question {
+ padding-top: 10px;
+ &:first-child {
+ padding-top: 0;
+ }
+ }
+ .title {
+ @extend .body-1-semibold;
+ margin-bottom: 8px;
+ cursor: pointer;
+ .svg-icon {
+ @include transition(transform 0.3s);
+ margin-right: 5px;
+ position: relative;
+ top: 4px;
+ }
+ }
+ .add-padding {
+ padding-bottom: 20px;
+ }
+ .new-line {
+ margin-left: 16px;
+ }
+ textarea.form-control {
+ height: 90px;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_uploadScreen.scss b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
index 23f41c8..1c3ed2a 100644
--- a/openecomp-ui/resources/scss/modules/_uploadScreen.scss
+++ b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
@@ -1,32 +1,32 @@
.heat-validation-stand-alone {
- .upload-screen {
- margin-top: 100px;
- .title {
- text-align: center;
- margin-bottom: 50px;
- }
- }
-
- .attachments-screen {
- .back-button {
- z-index: 1000;
- position: absolute;
- top: 20px;
- right: 20px;
- width: 200px;
- }
- .software-product-attachments {
- display: block;
- .software-product-view {
- display: block;
- .software-product-landing-view-right-side {
- display: block;
- .software-product-attachments-main {
- display: flex;
- height: 100vh;
- }
+ .upload-screen {
+ margin-top: 100px;
+ .title {
+ text-align: center;
+ margin-bottom: 50px;
}
- }
}
- }
+
+ .attachments-screen {
+ .back-button {
+ z-index: 1000;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 200px;
+ }
+ .software-product-attachments {
+ display: block;
+ .software-product-view {
+ display: block;
+ .software-product-landing-view-right-side {
+ display: block;
+ .software-product-attachments-main {
+ display: flex;
+ height: 100vh;
+ }
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss
index 5651c89..c292301 100644
--- a/openecomp-ui/resources/scss/modules/_versionsPage.scss
+++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss
@@ -1,360 +1,361 @@
.dox-ui-punch-out {
- background-color: $content-background-color;
+ 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;
+ 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);
+ 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;
+@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;
- }
+ .tree-view {
+ display: flex;
+ align-items: center;
+ }
}
.versions-page-view {
- height: 100%;
- background-color: $background-gray;
- overflow: auto;
- padding: 35px 50px 20px 50px;
+ height: 100%;
+ background-color: $background-gray;
+ overflow: auto;
+ padding: 35px 50px 20px 50px;
- .svg-icon-wrapper {
- justify-content: flex-start;
- }
- .version-page-header {
- display: flex;
- justify-content: space-between;
- .versions-page-title {
- @extend .heading-1;
- text-transform: uppercase;
- margin-bottom: 29px;
- color: $blue;
- display: flex;
- .archived-title {
- @extend .body-3;
- color: $white;
- background-color: $dark-purple;
- margin-left: 20px;
- border-radius: 3px;
- padding: 1px 10px;
- align-self: center;
- text-transform: none;
- }
- }
- .deprecate-btn-wrapper {
- display: flex;
- justify-content: flex-end;
- margin-bottom: 10px;
- align-self: center;
- .svg-icon-wrapper {
- &:hover {
- fill: $light-blue;
- }
- .svg-icon {
- width: 24px;
- height: 24px;
- }
- }
- }
- }
- .versions-page-permissions-view-wrapper {
- @extend .body-1-semibold;
- @include version-page-box-shadow();
+ .svg-icon-wrapper {
+ justify-content: flex-start;
+ }
+ .version-page-header {
+ display: flex;
+ justify-content: space-between;
+ .versions-page-title {
+ @extend .heading-1;
+ text-transform: uppercase;
+ margin-bottom: 29px;
+ color: $blue;
+ display: flex;
+ .archived-title {
+ @extend .body-3;
+ color: $white;
+ background-color: $dark-purple;
+ margin-left: 20px;
+ border-radius: 3px;
+ padding: 1px 10px;
+ align-self: center;
+ text-transform: none;
+ }
+ }
+ .deprecate-btn-wrapper {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 10px;
+ align-self: center;
+ .svg-icon-wrapper {
+ &:hover {
+ fill: $light-blue;
+ }
+ .svg-icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
+ }
+ }
+ .versions-page-permissions-view-wrapper {
+ @extend .body-1-semibold;
+ @include version-page-box-shadow();
- .permissions-view-wrapper-title {
- @include version-page-sub-title();
- }
+ .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;
- }
- }
+ .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;
+ .permissions-view-content {
+ padding: 20px 40px 20px 25px;
+ background-color: $white;
- height: 120px;
- display: flex;
- }
+ height: 120px;
+ display: flex;
+ }
- .permissions-view {
- display: flex;
- flex: 1;
- flex-direction: column;
- justify-content: space-around;
+ .permissions-view {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: space-around;
- .permissions-view-title {
- text-transform: uppercase;
- color: $dark-gray;
- }
+ .permissions-view-title {
+ text-transform: uppercase;
+ color: $dark-gray;
+ }
- .contributors-view, .owner-view {
- display: flex;
- height: 16px;
- @extend .body-1-semibold;
+ .contributors-view,
+ .owner-view {
+ display: flex;
+ height: 16px;
+ @extend .body-1-semibold;
- .permissions-view-title {
- width: 130px;
- line-height: 16px;
- }
+ .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;
- }
- }
+ .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;
- }
+ .user-view {
+ margin-right: 38px;
+ }
- .manage-permissions {
- color: $blue;
- margin-left: auto;
- cursor: pointer;
+ .manage-permissions {
+ color: $blue;
+ margin-left: auto;
+ cursor: pointer;
- &:hover {
- color: $dark-blue;
- }
- }
- }
- }
- }
+ &:hover {
+ color: $dark-blue;
+ }
+ }
+ }
+ }
+ }
- .versions-page-list-and-tree {
- display: flex;
- margin-top: 20px;
+ .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-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-title-container {
+ display: flex;
+ align-items: center;
+ height: 40px;
+ @include version-page-sub-title();
+ padding-right: 10px;
- .version-tree-full-screen {
- margin-left: auto;
- }
- }
+ .version-tree-full-screen {
+ margin-left: auto;
+ }
+ }
- .tree-view {
- background-color: $white;
- flex: 1;
+ .tree-view {
+ background-color: $white;
+ flex: 1;
- .node:not(.selectedNode):hover {
- .outer-circle, .inner-circle {
- transform: scale(1.1);
- }
- }
- }
- }
- }
+ .node:not(.selectedNode):hover {
+ .outer-circle,
+ .inner-circle {
+ transform: scale(1.1);
+ }
+ }
+ }
+ }
+ }
- .version-list {
- flex: 1;
- @extend .body-1-semibold;
- color: $text-black;
- display: flex;
- flex-direction: column;
+ .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-list-items {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
- .version-item-row {
- border-bottom: 1px solid $tlv-light-gray;
+ .version-item-row {
+ border-bottom: 1px solid $tlv-light-gray;
- &:last-child {
- border-bottom: none;
- }
- }
- }
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
- .version-item-row {
- $row-hover-color: lighten($blue, 54%);
- $row-active-color: lighten($blue, 51%);
+ .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;
+ display: flex;
+ align-items: center;
+ padding: 15px 30px;
+ @include version-page-box-shadow();
+ background-color: $white;
+ height: 70px;
- &:hover {
- background-color: $row-hover-color;
- }
+ &: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;
+ &.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 {
- box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%);
- }
- }
+ &:hover {
+ box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06),
+ inset 5px 0 0 0 lighten($blue, 35%);
+ }
+ }
- &.header-row {
- height: 40px;
+ &.header-row {
+ height: 40px;
- @extend .body-1-semibold;
- @include version-page-sub-title();
- padding: 15px 27px;
+ @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;
- }
- }
+ &: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;
+ .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-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,
+ &.item-last-edited {
+ @extend .body-1;
+ color: $dark-gray;
+ }
- &.item-description, &.header-description {
- flex: 2 1 0;
- }
+ &.item-description,
+ &.header-description {
+ flex: 2 1 0;
+ }
- &.item-description > .description-text {
- margin-right: 10px;
- @include ellipsis($max-width: 300px);
- width: initial;
- }
+ &.item-description > .description-text {
+ margin-right: 10px;
+ @include ellipsis($max-width: 300px);
+ width: initial;
+ }
- &.item-actions {
- display: flex;
- flex: 1 1 3%;
- justify-content: space-between;
- }
+ &.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;
+ &.item-select,
+ &.item-create {
+ @extend .body-1;
+ flex: 0 1 auto;
+ margin-right: 0;
- .svg-icon-wrapper {
- fill: $blue;
- color: $blue;
+ .svg-icon-wrapper {
+ fill: $blue;
+ color: $blue;
- &[disabled] {
- cursor: default;
- }
+ &[disabled] {
+ cursor: default;
+ }
- .svg-icon {
- width: 16px;
- height: 16px;
- }
+ .svg-icon {
+ width: 16px;
+ height: 16px;
+ }
- &:hover:not([disabled]) {
- fill: $dark-blue;
- color: $dark-blue;
- }
- }
- }
+ &: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;
+ }
- /* 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;
+ }
+ }
+ }
- &:hover:active .item-description > .description-text:after {
- background: $row-active-color;
- }
-
- }
-
- }
-
- &.clickable {
- cursor: pointer;
- }
+ &.clickable {
+ cursor: pointer;
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
deleted file mode 100644
index 9f88e94..0000000
--- a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-
-.compute-flavor-editor-modal-edit {
- .modal-lg {
- width: 1182px;
- }
-}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
index 14bad18..867749d 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -1,24 +1,22 @@
-
.vsp-component-monitoring {
- .dropzone {
- &:not(:last-child) {
- padding-bottom: 50px;
- }
+ .dropzone {
+ &:not(:last-child) {
+ padding-bottom: 50px;
+ }
- .monitoring-file {
- display: flex;
- .filename {
- opacity: 1;
- width: auto;
- border-right-style: none;
- }
- .delete {
- display: flex;
- width: 30px;
- justify-content: center;
- align-items: center;
- }
+ .monitoring-file {
+ display: flex;
+ .filename {
+ opacity: 1;
+ width: auto;
+ border-right-style: none;
+ }
+ .delete {
+ display: flex;
+ width: 30px;
+ justify-content: center;
+ align-items: center;
+ }
+ }
}
- }
-
}
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
index 2a99263..8a7575f 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
@@ -1,48 +1,47 @@
-
.vsp-component-questionnaire-view {
- input[type='checkbox'] {
- &:before {
- border: 1px solid $dark-gray;
- cursor: pointer;
- }
- &:checked:before {
- border: 1px solid $blue;
- }
- }
- .component-questionnaire-validation-form {
-
- .section-field {
- textarea {
- height: 80px;
- }
- }
-
- .rows-section, .grid-items {
- .row-flex-components {
- display: flex;
- }
-
- .vertical-flex {
- flex-direction: column;
- .control-label {
- @extend .body-2-semibold;
+ input[type='checkbox'] {
+ &:before {
+ border: 1px solid $dark-gray;
+ cursor: pointer;
}
- .radio-options-content-row {
- display: flex;
- margin-top: -4px;
- .validation-radio-wrapper {
- margin-right: 20px;
-
- & > .form-group {
- display: flex;
- }
- .form-group .sdc-radio {
- width: auto;
- margin-right: 0;
- }
- }
+ &:checked:before {
+ border: 1px solid $blue;
}
- }
}
- }
+ .component-questionnaire-validation-form {
+ .section-field {
+ textarea {
+ height: 80px;
+ }
+ }
+
+ .rows-section,
+ .grid-items {
+ .row-flex-components {
+ display: flex;
+ }
+
+ .vertical-flex {
+ flex-direction: column;
+ .control-label {
+ @extend .body-2-semibold;
+ }
+ .radio-options-content-row {
+ display: flex;
+ margin-top: -4px;
+ .validation-radio-wrapper {
+ margin-right: 20px;
+
+ & > .form-group {
+ display: flex;
+ }
+ .form-group .sdc-radio {
+ width: auto;
+ margin-right: 0;
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
index bd216c7..e50ad2d 100644
--- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -1,282 +1,278 @@
@mixin modules-and-artifacts-list-items {
- background-color: $tlv-gray;
- margin-bottom: 12px;
- border: 1px solid $light-gray;
- border-left-width: 18px;
- border-left-color: $blue;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- padding: 10px 20px 0 20px;
+ background-color: $tlv-gray;
+ margin-bottom: 12px;
+ border: 1px solid $light-gray;
+ border-left-width: 18px;
+ border-left-color: $blue;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 10px 20px 0 20px;
}
.heat-setup-view {
- margin-top: 20px;
- display: flex;
- justify-content: space-between;
- padding: 0 60px 0 36px;
+ margin-top: 20px;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 60px 0 36px;
- .heat-setup-view-modules-and-artifacts {
- margin-right: 20px;
- flex: 1;
- .heat-setup-module-icon {
- margin: 0 6px 0 0;
- position: relative;
- top: -2px;
- }
+ .heat-setup-view-modules-and-artifacts {
+ margin-right: 20px;
+ flex: 1;
+ .heat-setup-module-icon {
+ margin: 0 6px 0 0;
+ position: relative;
+ top: -2px;
+ }
- .modules-list-wrapper {
- &.modules-list-wrapper-divider {
- border-bottom: 1px solid $tlv-light-gray;
- }
+ .modules-list-wrapper {
+ &.modules-list-wrapper-divider {
+ border-bottom: 1px solid $tlv-light-gray;
+ }
- ul {
- .undefined-dragging {
- opacity: 0.5;
- }
- .modules-list-item-selectors {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- padding-bottom: 3px;
- .Select-value-label {
- @include ellipsis(85%);
- }
+ ul {
+ .undefined-dragging {
+ opacity: 0.5;
+ }
+ .modules-list-item-selectors {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding-bottom: 3px;
+ .Select-value-label {
+ @include ellipsis(85%);
+ }
- .validation-input-wrapper {
- flex-basis: 48%;
- }
+ .validation-input-wrapper {
+ flex-basis: 48%;
+ }
- .control-label {
- margin-bottom: 4px;
- }
+ .control-label {
+ margin-bottom: 4px;
+ }
- .form-group {
- margin-bottom: 12px;
- }
- }
- }
+ .form-group {
+ margin-bottom: 12px;
+ }
+ }
+ }
- .modules-list-item-controllers {
- display: flex;
- justify-content: space-between;
- margin-bottom: 7px;
+ .modules-list-item-controllers {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 7px;
- .btn {
- min-width: 0;
- }
+ .btn {
+ min-width: 0;
+ }
- .svg-icon {
- &.__trashO {
- fill: $dark-gray;
- &:hover {
- fill: $black;
- }
- }
- }
+ .svg-icon {
+ &.__trashO {
+ fill: $dark-gray;
+ &:hover {
+ fill: $black;
+ }
+ }
+ }
- .module-title-by-type {
- @extend .heading-5-semibold;
- margin-right: 3px;
- }
- .modules-list-item-filename {
- display: flex;
- align-items: center;
+ .module-title-by-type {
+ @extend .heading-5-semibold;
+ margin-right: 3px;
+ }
+ .modules-list-item-filename {
+ display: flex;
+ align-items: center;
- .svg-icon {
- &.__pencil {
- margin-left: 3px;
- opacity: 0;
- }
- }
+ .svg-icon {
+ &.__pencil {
+ margin-left: 3px;
+ opacity: 0;
+ }
+ }
+ .filename-text {
+ @extend .heading-5-semibold;
+ }
+ .text-and-icon {
+ padding: 5px;
+ border: 1px solid transparent;
+ display: flex;
+ align-items: center;
+ height: 35px;
+ &.in-edit {
+ padding: 0;
+ .name-edit {
+ padding: 4px;
+ @extend .heading-5-semibold;
+ height: 100%;
+ border: 1px solid $light-gray;
+ width: 400px;
+ }
+ }
+ }
- .filename-text {
- @extend .heading-5-semibold;
+ input[disabled] {
+ border: none;
+ }
+ &:hover {
+ .text-and-icon {
+ border-color: $light-gray;
+ background-color: $white;
- }
+ &.in-edit {
+ border-color: transparent;
+ }
+ }
+ .svg-icon {
+ &.__pencil {
+ margin-left: 10px;
+ opacity: 1;
+ .svg-icon {
+ stroke: $dark-gray;
+ &:hover {
+ stroke: $black;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
- .text-and-icon {
- padding: 5px;
- border: 1px solid transparent;
- display: flex;
- align-items: center;
- height: 35px;
- &.in-edit {
- padding: 0;
- .name-edit {
- padding: 4px;
- @extend .heading-5-semibold;
- height: 100%;
- border: 1px solid $light-gray;
- width: 400px;
- }
- }
- }
+ .modules-list-item {
+ @include modules-and-artifacts-list-items;
+ position: relative;
+ .Select-option {
+ @extend .body-1;
+ &.is-selected {
+ @extend .body-1-semibold;
+ background-color: $white;
+ }
+ &.is-focused {
+ background-color: $blue;
+ color: $white;
+ }
+ }
+ .add-or-delete-volumes {
+ margin-right: 8px;
+ margin-bottom: 11px;
+ }
+ &:before {
+ content: '\00B7\00B7\00B7\00B7\00B7\00B7';
+ color: $white;
+ position: absolute;
+ left: -27px;
+ top: 56%;
+ font-size: 27px;
+ width: 75px;
+ @include transform-rotate(90);
+ height: 0;
+ letter-spacing: 1px;
+ }
+ }
+ }
- input[disabled] {
- border: none;
- }
- &:hover {
- .text-and-icon {
- border-color: $light-gray;
- background-color: $white;
+ .artifact-files {
+ @include modules-and-artifacts-list-items;
+ &.with-list-items {
+ margin-top: 10px;
+ }
- &.in-edit {
- border-color: transparent;
- }
- }
- .svg-icon {
- &.__pencil {
- margin-left: 10px;
- opacity: 1;
- .svg-icon {
- stroke: $dark-gray;
- &:hover {
- stroke: $black;
- }
- }
- }
- }
- }
- }
- }
+ &.nested {
+ .nested-list {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 18px;
+ }
- .modules-list-item {
- @include modules-and-artifacts-list-items;
- position: relative;
- .Select-option {
- @extend .body-1;
- &.is-selected {
- @extend .body-1-semibold;
- background-color: $white;
- }
- &.is-focused {
- background-color: $blue;
- color: $white;
- }
- }
- .add-or-delete-volumes {
- margin-right: 8px;
- margin-bottom: 11px;
- }
- &:before {
- content: "\00B7\00B7\00B7\00B7\00B7\00B7";
- color: $white;
- position: absolute;
- left: -27px;
- top: 56%;
- font-size: 27px;
- width: 75px;
- @include transform-rotate(90);
- height: 0;
- letter-spacing: 1px;
- }
- }
- }
+ .nested-list-item {
+ border-radius: 15px;
+ background-color: $tlv-light-gray;
+ padding: 4px 15px;
+ margin: 2px 10px 2px 0;
+ }
+ }
- .artifact-files {
- @include modules-and-artifacts-list-items;
- &.with-list-items {
- margin-top: 10px;
- }
+ .artifact-files-header {
+ @extend .heading-5-semibold;
+ display: flex;
+ margin-bottom: 10px;
+ justify-content: space-between;
+ .image-icon.artifacts {
+ margin-right: 10px;
+ }
- &.nested {
- .nested-list {
- display: flex;
- flex-wrap: wrap;
- margin-bottom: 18px;
- }
+ span {
+ display: flex;
+ }
+ }
+ }
+ }
- .nested-list-item {
- border-radius: 15px;
- background-color: $tlv-light-gray;
- padding: 4px 15px;
- margin: 2px 10px 2px 0;
- }
- }
+ .modules-list-header {
+ height: 30px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-end;
+ align-items: baseline;
+ }
- .artifact-files-header {
- @extend .heading-5-semibold;
- display: flex;
- margin-bottom: 10px;
- justify-content: space-between;
- .image-icon.artifacts {
- margin-right: 10px;
- }
+ .unassigned-files {
+ border: 1px solid $light-gray;
+ background-color: $white;
+ height: 250px;
+ width: 250px;
- span {
- display: flex;
- }
+ // Will work in chrome from chrome 56
+ position: sticky;
+ top: 10px;
- }
- }
- }
+ .unassigned-files-title {
+ @extend .heading-5-semibold;
+ background-color: $tlv-gray;
+ padding: 11px 0 9px 15px;
+ }
- .modules-list-header {
- height: 30px;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-end;
- align-items: baseline;
- }
+ .unassigned-files-list {
+ height: 207px;
+ overflow-y: auto;
+ padding-bottom: 5px;
- .unassigned-files {
- border: 1px solid $light-gray;
- background-color: $white;
- height: 250px;
- width: 250px;
+ .go-to-validation-button-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 70px;
+ .all-files-assigned {
+ @extend .heading-4;
+ margin-bottom: 10px;
+ }
+ .svg-icon-wrapper {
+ margin-bottom: 10px;
+ .svg-icon {
+ &.__angleRight {
+ width: 10px;
+ height: 10px;
+ }
+ }
+ }
+ }
- // Will work in chrome from chrome 56
- position: sticky;
- top: 10px;
-
- .unassigned-files-title {
- @extend .heading-5-semibold;
- background-color: $tlv-gray;
- padding: 11px 0 9px 15px;
- }
-
- .unassigned-files-list {
- height: 207px;
- overflow-y: auto;
- padding-bottom: 5px;
-
- .go-to-validation-button-wrapper {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top: 70px;
- .all-files-assigned {
- @extend .heading-4;
- margin-bottom: 10px;
- }
- .svg-icon-wrapper {
- margin-bottom: 10px;
- .svg-icon {
- &.__angleRight {
- width: 10px;
- height: 10px;
- }
- }
- }
- }
-
- .unassigned-files-list-item {
- @include ellipsis();
- border-bottom: 1px solid $tlv-light-gray;
- padding: 0 5px 5px 15px;
- &:first-child {
- padding-top: 5px;
- }
- &:last-child {
- border-bottom: none;
- padding-bottom: 0;
- }
- }
- }
- }
+ .unassigned-files-list-item {
+ @include ellipsis();
+ border-bottom: 1px solid $tlv-light-gray;
+ padding: 0 5px 5px 15px;
+ &:first-child {
+ padding-top: 5px;
+ }
+ &:last-child {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_workflows.scss b/openecomp-ui/resources/scss/modules/_workflows.scss
index 894b6e7..c7ce452 100644
--- a/openecomp-ui/resources/scss/modules/_workflows.scss
+++ b/openecomp-ui/resources/scss/modules/_workflows.scss
@@ -1,27 +1,19 @@
-
.workflows {
- position: absolute;
- bottom: 0;
- right: 0;
- left: 0;
- top: 0;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ top: 0;
- background-color: $background-gray;
- .list-editor-view-list .list-editor-item-view .list-editor-item-view-content .list-editor-item-view-field:last-child {
- flex: 2 1;
- }
+ background-color: $background-gray;
+ .list-editor-view-list
+ .list-editor-item-view
+ .list-editor-item-view-content
+ .list-editor-item-view-field:last-child {
+ flex: 2 1;
+ }
- .list-editor-view {
- padding: 30px 50px;
- }
-
-}
-
-.workflows-editor-modal {
- .modal-body {
- padding: 0;
- }
- .validation-form-content {
- padding: 15px;
- }
+ .list-editor-view {
+ padding: 30px 50px;
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
index e3fc6a9..1b6459a 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
@@ -13,7 +13,7 @@
height: 34px;
color: $blue;
font-weight: bolder;
- text-transform: uppercase;
+ text-transform: uppercase;
}
.sdc-accordion {
padding-left: 18px;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
index 0a234a5..429d6cc 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
@@ -1,33 +1,33 @@
.catalog-header {
- margin: 34px 0 29px 50px;
- display: flex;
- flex-direction: row;
- .expandable-input-top {
- margin-right: 60px;
- }
- &.workspace-header {
- @extend .heading-1;
- color: $blue;
- }
- .catalog-header-tabs {
- display: flex;
- flex-direction: row;
- .tab-separator {
- position: relative;
- top: 8px;
- }
- .catalog-header-tab {
- @extend .heading-1;
- cursor: pointer;
- padding: 0 15px 0 15px;
- display: flex;
- align-items: center;
- &.active {
- color: $blue;
- }
- &:first-child {
- padding-left: 0;
- }
- }
- }
+ margin: 34px 0 29px 50px;
+ display: flex;
+ flex-direction: row;
+ .expandable-input-top {
+ margin-right: 60px;
+ }
+ &.workspace-header {
+ @extend .heading-1;
+ color: $blue;
+ }
+ .catalog-header-tabs {
+ display: flex;
+ flex-direction: row;
+ .tab-separator {
+ position: relative;
+ top: 8px;
+ }
+ .catalog-header-tab {
+ @extend .heading-1;
+ cursor: pointer;
+ padding: 0 15px 0 15px;
+ display: flex;
+ align-items: center;
+ &.active {
+ color: $blue;
+ }
+ &:first-child {
+ padding-left: 0;
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
index 11a739d..c632beb 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
@@ -1,39 +1,37 @@
.catalog-list {
- height: 100%;
- overflow: auto;
- display: flex;
- flex-direction: column;
- padding: 0 10px 0 42px;
- .catalog-title {
- @extend .heading-1;
- color: $blue;
- margin:0 0 12px 18px;
- }
+ height: 100%;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ padding: 0 10px 0 42px;
+ .catalog-title {
+ @extend .heading-1;
+ color: $blue;
+ margin: 0 0 12px 18px;
+ }
- .catalog-items {
- display: flex;
- flex-wrap: wrap;
- @import "tile";
- @import "createItemTile";
- @import "catalogTile";
- @import "vendorTile";
- @import "vlmTile";
- &:after {
- content: " ";
- height: 250px;
- display: block;
- width: 100%;
- }
- .venodor-tile-btn {
- border: 1px solid $light-gray;
- color: $black;
- line-height: 20px;
- &:hover {
- background-color: $light-gray;
- }
- }
- }
+ .catalog-items {
+ display: flex;
+ flex-wrap: wrap;
+ @import 'tile';
+ @import 'createItemTile';
+ @import 'catalogTile';
+ @import 'vendorTile';
+ &:after {
+ content: ' ';
+ height: 250px;
+ display: block;
+ width: 100%;
+ }
+ .venodor-tile-btn {
+ border: 1px solid $light-gray;
+ color: $black;
+ line-height: 20px;
+ &:hover {
+ background-color: $light-gray;
+ }
+ }
+ }
- // Bottom spacing - cross browser solution
-
+ // Bottom spacing - cross browser solution
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 612ec49..a2c7997 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -1,147 +1,144 @@
.catalog-tile {
- &:hover {
- box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
- border: 1px solid $light-gray;
- }
- .catalog-tile-top {
- position: relative;
- flex: 1;
- display: flex;
- padding-top: 29px;
- padding-left: 10px;
- align-items: flex-start;
- flex-direction: column;
- .catalog-tile-content {
- margin-top: auto;
- width: 180px;
- }
-
- .catalog-tile-type {
- display: block;
- margin-top: -25px;
- font-size: $heading-font-5;
- &.license-model-type {
- color: $purple;
- }
- &.software-product-type {
- color: $blue;
- }
- }
- .catalog-tile-entity-details {
- margin-top: 20px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- flex: 0.8;
- .catalog-tile-version-info {
- display: flex;
- justify-content: space-between;
-
- .catalog-tile-item-version {
- @extend .body-2;
- line-height: 6px;
- }
- }
- .catalog-tile-vendor-name {
- @extend .body-3;
- flex: 0.4;
- align-self: baseline;
- color: $gray;
- line-height: 10px;
- &:first-letter {
- text-transform: capitalize;
+ &:hover {
+ box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+ border: 1px solid $light-gray;
}
- @include ellipsis(auto, inline-block, 178px);
- }
+ .catalog-tile-top {
+ position: relative;
+ flex: 1;
+ display: flex;
+ padding-top: 29px;
+ padding-left: 10px;
+ align-items: flex-start;
+ flex-direction: column;
+ .catalog-tile-content {
+ margin-top: auto;
+ width: 180px;
+ }
- }
- .catalog-tile-item-name {
- @extend .heading-5-semibold;
- color: $black;
- @include ellipsis(auto, inline-block, 175px);
- line-height: inherit;
- &:first-letter {
- text-transform: capitalize;
- }
- }
- }
- .catalog-tile-icon {
+ .catalog-tile-type {
+ display: block;
+ margin-top: -25px;
+ font-size: $heading-font-5;
+ &.license-model-type {
+ color: $purple;
+ }
+ &.software-product-type {
+ color: $blue;
+ }
+ }
+ .catalog-tile-entity-details {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ flex: 0.8;
+ .catalog-tile-version-info {
+ display: flex;
+ justify-content: space-between;
- width: 58px;
- height: 58px;
- text-align: center;
- justify-content: center;
- display: flex;
+ .catalog-tile-item-version {
+ @extend .body-2;
+ line-height: 6px;
+ }
+ }
+ .catalog-tile-vendor-name {
+ @extend .body-3;
+ flex: 0.4;
+ align-self: baseline;
+ color: $gray;
+ line-height: 10px;
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ @include ellipsis(auto, inline-block, 178px);
+ }
+ }
+ .catalog-tile-item-name {
+ @extend .heading-5-semibold;
+ color: $black;
+ @include ellipsis(auto, inline-block, 175px);
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ }
+ }
+ .catalog-tile-icon {
+ width: 58px;
+ height: 58px;
+ text-align: center;
+ justify-content: center;
+ display: flex;
- .icon {
- align-self: center;
- height: 58px;
- width: 58px;
- margin-left: 122px;
- background-repeat: no-repeat;
- .svg-icon {
- &.__vendor {
- fill: $dark-gray;
- &:hover {
- fill: $dark-gray;
- }
- margin-top: 22px;
- }
- &.__vsp {
- fill: $light-blue;
- }
- margin-top: 18px;
- margin-left: 3px;
- &.__vlm {
- margin-top: 18px;
- fill: $purple;
- }
- }
- }
- }
- .catalog-tile-content {
- border-top: 1px solid $background-gray;
- padding-top: 5px;
- display: flex;
- justify-content: space-between;
- margin-top: 2px;
- padding-bottom: 3px;
- @extend .body-2-semibold;
- .svg-icon {
- &.__plus {
- width: 20px;
- height: 20px;
- fill: $blue;
- }
- }
- .catalog-tile-item-details {
- overflow: hidden;
- }
+ .icon {
+ align-self: center;
+ height: 58px;
+ width: 58px;
+ margin-left: 122px;
+ background-repeat: no-repeat;
+ .svg-icon {
+ &.__vendor {
+ fill: $dark-gray;
+ &:hover {
+ fill: $dark-gray;
+ }
+ margin-top: 22px;
+ }
+ &.__vsp {
+ fill: $light-blue;
+ }
+ margin-top: 18px;
+ margin-left: 3px;
+ &.__vlm {
+ margin-top: 18px;
+ fill: $purple;
+ }
+ }
+ }
+ }
+ .catalog-tile-content {
+ border-top: 1px solid $background-gray;
+ padding-top: 5px;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 2px;
+ padding-bottom: 3px;
+ @extend .body-2-semibold;
+ .svg-icon {
+ &.__plus {
+ width: 20px;
+ height: 20px;
+ fill: $blue;
+ }
+ }
+ .catalog-tile-item-details {
+ overflow: hidden;
+ }
- .catalog-tile-add-new-vsp {
- color: $blue;
- .svg-icon {
- &.__plus {
- width: 20px;
- height: 20px;
-
- }
- }
- margin-left: 40px;
- }
- .catalog-tile-locking-user-name {
- @extend .body-2;
- @include ellipsis(auto, inline-block, 180px);
- }
- .catalog-tile-check-in-status {
- .svg-icon {
- &.__locked {
- fill: $gray;
- }
- &.__unlocked {
- fill: $gray;
- }
- }
- }
- }
+ .catalog-tile-add-new-vsp {
+ color: $blue;
+ .svg-icon {
+ &.__plus {
+ width: 20px;
+ height: 20px;
+ }
+ }
+ margin-left: 40px;
+ }
+ .catalog-tile-locking-user-name {
+ @extend .body-2;
+ @include ellipsis(auto, inline-block, 180px);
+ }
+ .catalog-tile-check-in-status {
+ .svg-icon {
+ &.__locked {
+ fill: $gray;
+ }
+ &.__unlocked {
+ fill: $gray;
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index d17dcdd..9838e65 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -1,73 +1,77 @@
.create-catalog-item-wrapper {
- width: 204px;
- height: 200px;
- display: flex;
- flex-direction: column;
- margin: 9px;
+ width: 204px;
+ height: 200px;
+ display: flex;
+ flex-direction: column;
+ margin: 9px;
- .tile.create-catalog-item {
- margin: 9px 0 9px 0;
- display: flex;
- background-color: $white;
- &:first-child{margin-top: 0;}
- &:last-child{margin-bottom: 0;}
- flex-direction: row;
- align-items: center;
- justify-content: center;
- &.disabled {
- color: $gray;
- .create-item-plus-icon {
- fill: $gray;
- }
- }
- &:hover {
- box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+ .tile.create-catalog-item {
+ margin: 9px 0 9px 0;
+ display: flex;
+ background-color: $white;
+ &:first-child {
+ margin-top: 0;
+ }
+ &:last-child {
+ margin-bottom: 0;
+ }
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ &.disabled {
+ color: $gray;
+ .create-item-plus-icon {
+ fill: $gray;
+ }
+ }
+ &:hover {
+ box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
- border: 1px solid $light-gray;
- }
- &:only-child {
- text-align: center;
- flex-direction: column;
- justify-content: center;
- .create-item-plus-icon {
- margin: 0 0 15px 0;
- }
- .create-item-text {
- @extend .heading-4-semibold;
- }
- }
- .create-item-plus-icon{
- margin: -5px 12px 0 0;
- height: 19px;
- width: 19px;
- .svg-icon {
- &.__plus {
- width: 19px;
- height: 19px;
- }
- }
- }
- &.vlm-type {
- .create-item-text {
- color: $purple;
- }
+ border: 1px solid $light-gray;
+ }
+ &:only-child {
+ text-align: center;
+ flex-direction: column;
+ justify-content: center;
+ .create-item-plus-icon {
+ margin: 0 0 15px 0;
+ }
+ .create-item-text {
+ @extend .heading-4-semibold;
+ }
+ }
+ .create-item-plus-icon {
+ margin: -5px 12px 0 0;
+ height: 19px;
+ width: 19px;
+ .svg-icon {
+ &.__plus {
+ width: 19px;
+ height: 19px;
+ }
+ }
+ }
+ &.vlm-type {
+ .create-item-text {
+ color: $purple;
+ }
- .create-item-plus-icon {
- fill: $purple;
- }
- }
- &.vsp-type {
- .create-item-text {
- color: $blue;
- }
+ .create-item-plus-icon {
+ fill: $purple;
+ }
+ }
+ &.vsp-type {
+ .create-item-text {
+ color: $blue;
+ }
- .create-item-plus-icon {
- fill: $blue;
- }
- }
- .create-item-text {
- width: 140px;
- @extend .heading-5-semibold;
- }
- }
+ .create-item-plus-icon {
+ fill: $blue;
+ }
+ }
+ .create-item-text {
+ width: 140px;
+ @extend .heading-5-semibold;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
index f97641c..5f8446b 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -1,32 +1,32 @@
.onboard-header {
- padding-top: 8px;
- display: flex;
- flex-direction: row;
- 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: 20px;
- margin-left: auto;
- }
- .onboard-header-tabs {
- display: flex;
- flex-direction: row;
- .onboard-header-tab {
- @extend .body-1-semibold;
- margin-right: 40px;
- cursor: pointer;
- display: flex;
- padding-bottom: 5px;
- align-items: flex-end;
- &.active {
- color: $blue;
- padding-bottom: 2px;
- border-bottom: 3px solid $blue;
- }
- }
- }
+ padding-top: 8px;
+ display: flex;
+ flex-direction: row;
+ 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: 20px;
+ margin-left: auto;
+ }
+ .onboard-header-tabs {
+ display: flex;
+ flex-direction: row;
+ .onboard-header-tab {
+ @extend .body-1-semibold;
+ margin-right: 40px;
+ cursor: pointer;
+ display: flex;
+ padding-bottom: 5px;
+ align-items: flex-end;
+ &.active {
+ color: $blue;
+ padding-bottom: 2px;
+ border-bottom: 3px solid $blue;
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
index 217098f..fa513fb 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
@@ -1,14 +1,14 @@
.tile {
- background-color: $white;
- margin: 9px;
- width: 204px;
- height: 200px;
- display: flex;
- flex-direction: column;
- cursor: pointer;
- border: 1px solid $tlv-light-gray;
- @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
- &:active {
- border: 1px solid $light-blue;
- }
+ background-color: $white;
+ margin: 9px;
+ width: 204px;
+ height: 200px;
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ border: 1px solid $tlv-light-gray;
+ @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+ &:active {
+ border: 1px solid $light-blue;
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
index f1af28a..a741764 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
@@ -1,21 +1,21 @@
.vendor-page-header {
- display: flex;
- align-items: center;
- margin-top: 34px;
- margin-left: 9px;
- margin-bottom: 29px;
- .vendor-name {
- @extend .heading-1;
- color: $blue;
- margin-left: 20px;
- text-transform: uppercase;
- }
- .svg-icon-wrapper {
- padding: 5px 18px 5px 0;
- .svg-icon.back {
- height: 25px;
- width: 25px;
- fill: $blue;
- }
- }
+ display: flex;
+ align-items: center;
+ margin-top: 34px;
+ margin-left: 9px;
+ margin-bottom: 29px;
+ .vendor-name {
+ @extend .heading-1;
+ color: $blue;
+ margin-left: 20px;
+ text-transform: uppercase;
+ }
+ .svg-icon-wrapper {
+ padding: 5px 18px 5px 0;
+ .svg-icon.back {
+ height: 25px;
+ width: 25px;
+ fill: $blue;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index d490fd6..63fb236 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -1,91 +1,91 @@
@mixin flipOverlayDirection($itemsInRow) {
- &:nth-child(#{$itemsInRow}n) {
- .vsp-overlay-wrapper {
- right: 74%;
- left: inherit;
- .vsp-overlay-arrow {
- border-right-color: transparent;
- border-left-color: $tlv-light-gray;
- border-right-width: 2px;
- border-left-width: 6px;
- left: 100%;
- &:after {
- border-left-color: $white;
- border-right-color: transparent;
- left: -11px;
- }
- }
- }
- }
+ &:nth-child(#{$itemsInRow}n) {
+ .vsp-overlay-wrapper {
+ right: 74%;
+ left: inherit;
+ .vsp-overlay-arrow {
+ border-right-color: transparent;
+ border-left-color: $tlv-light-gray;
+ border-right-width: 2px;
+ border-left-width: 6px;
+ left: 100%;
+ &:after {
+ border-left-color: $white;
+ border-right-color: transparent;
+ left: -11px;
+ }
+ }
+ }
+ }
}
.catalog-tile.vendor-type {
- position: relative;
- .catalog-tile-top {
- .catalog-tile-item-name {
- margin-top: 21px;
- line-height: inherit;
- &:first-letter {
- text-transform: capitalize;
- }
- }
- .catalog-tile-vsp-count {
- @extend .body-3-semibold;
- margin-top: 8px;
- margin-left: 54px;
- margin-bottom: 9px;
- color: $dark-gray;
- border: 1px solid $dark-gray;
- padding: 0 15px 0 15px;
- border-radius: 15px;
+ position: relative;
+ .catalog-tile-top {
+ .catalog-tile-item-name {
+ margin-top: 21px;
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ }
+ .catalog-tile-vsp-count {
+ @extend .body-3-semibold;
+ margin-top: 8px;
+ margin-left: 54px;
+ margin-bottom: 9px;
+ color: $dark-gray;
+ border: 1px solid $dark-gray;
+ padding: 0 15px 0 15px;
+ border-radius: 15px;
- &.clickable {
- &:hover {
- background-color: #eceff3;
- color: $dark-gray;
- }
- }
- &.active {
- background-color: $white;
- color: $dark-gray;
- }
- }
- }
+ &.clickable {
+ &:hover {
+ background-color: #eceff3;
+ color: $dark-gray;
+ }
+ }
+ &.active {
+ background-color: $white;
+ color: $dark-gray;
+ }
+ }
+ }
- .catalog-tile-content {
- flex-basis: auto;
- max-height: 31px;
- height: 31px;
- text-align: center;
- color: $blue;
- display: block;
- background-color: $white;
- margin-bottom: 7px;
- padding-bottom: 0px;
- .create-new-vsp-button {
- margin-top: 1px;
- }
- &:hover {
- color: $dark-blue;
- .svg-icon.plus {
- fill: $dark-blue;
- }
- }
- &.disabled {
- cursor: default;
- }
- }
- @media (min-width: 1900px) {
- @include flipOverlayDirection($itemsInRow: 8);
- }
- @media (min-width: 1586px) and (max-width: 1899px) {
- @include flipOverlayDirection($itemsInRow: 7);
- }
- @media (min-width: 1368px) and (max-width: 1585px) {
- @include flipOverlayDirection($itemsInRow: 6);
- }
- @media (max-width: 1367px) {
- @include flipOverlayDirection($itemsInRow: 5);
- }
- @import "vspOverlay";
+ .catalog-tile-content {
+ flex-basis: auto;
+ max-height: 31px;
+ height: 31px;
+ text-align: center;
+ color: $blue;
+ display: block;
+ background-color: $white;
+ margin-bottom: 7px;
+ padding-bottom: 0px;
+ .create-new-vsp-button {
+ margin-top: 1px;
+ }
+ &:hover {
+ color: $dark-blue;
+ .svg-icon.plus {
+ fill: $dark-blue;
+ }
+ }
+ &.disabled {
+ cursor: default;
+ }
+ }
+ @media (min-width: 1900px) {
+ @include flipOverlayDirection($itemsInRow: 8);
+ }
+ @media (min-width: 1586px) and (max-width: 1899px) {
+ @include flipOverlayDirection($itemsInRow: 7);
+ }
+ @media (min-width: 1368px) and (max-width: 1585px) {
+ @include flipOverlayDirection($itemsInRow: 6);
+ }
+ @media (max-width: 1367px) {
+ @include flipOverlayDirection($itemsInRow: 5);
+ }
+ @import 'vspOverlay';
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
deleted file mode 100644
index 721a4f3..0000000
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.catalog-tile.license-model-type {
- .catalog-tile-top {
- &:hover {
- //background-color: $purple;
- //color: $white;
- }
- }
-}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
index e0b72bf..e2617b8 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -1,74 +1,73 @@
-.vsp-overlay-wrapper{
- display:flex;
- align-items: center;
- position:absolute;
- left: 68%;
- top: 14%;
- height: 100%;
- pointer-events: none;
- z-index: 100;
- .vsp-overlay-list {
- padding: 0 20px;
- }
- .vsp-overlay-arrow {
- border-style: solid;
- position: relative;
- bottom: -18px;
- border-width: 6px;
- border-left-width: 2px;
- border-color: transparent;
- border-right-color: $light-gray;
- &:after {
- position: absolute;
- border-style: solid;
- bottom: -10px;
- left: -9px;
- border-width: 10px;
- border-color: transparent;
- border-right-color: $white;
- content:' ';
- }
- }
- .vsp-overlay {
- pointer-events: all;
- width: 205px;
- cursor: default;
- background-color: $white;
- @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
- border-radius: 6px;
- padding: 0 0 10px 0;
- display: flex;
- flex-direction: column;
- margin: 10px 0 10px 0;
- .vsp-overlay-title {
- @extend .heading-5-semibold;
- margin-bottom: 15px;
- padding: 10px 20px 10px 20px;
- background: $highlight-gray;
- color: $text-black;
- text-transform: uppercase;
- border-radius: 6px 6px 0 0;
- }
- .vsp-overlay-detail{
- @extend .body-2;
- &:hover {
- color: $blue;
- }
- text-transform: none;
- @include ellipsis(auto, block);
- border-bottom: 1px solid $tlv-light-gray;
- cursor: pointer;
- padding: 5px 0 5px 0;
- &:last-child {
- border-bottom: none;
- }
- }
- .vsp-overlay-see-more{
- color: $blue;
- cursor: pointer;
- margin-top: 12px;
- align-self:center;
- }
-
- }
+.vsp-overlay-wrapper {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ left: 68%;
+ top: 14%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 100;
+ .vsp-overlay-list {
+ padding: 0 20px;
+ }
+ .vsp-overlay-arrow {
+ border-style: solid;
+ position: relative;
+ bottom: -18px;
+ border-width: 6px;
+ border-left-width: 2px;
+ border-color: transparent;
+ border-right-color: $light-gray;
+ &:after {
+ position: absolute;
+ border-style: solid;
+ bottom: -10px;
+ left: -9px;
+ border-width: 10px;
+ border-color: transparent;
+ border-right-color: $white;
+ content: ' ';
+ }
+ }
+ .vsp-overlay {
+ pointer-events: all;
+ width: 205px;
+ cursor: default;
+ background-color: $white;
+ @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
+ border-radius: 6px;
+ padding: 0 0 10px 0;
+ display: flex;
+ flex-direction: column;
+ margin: 10px 0 10px 0;
+ .vsp-overlay-title {
+ @extend .heading-5-semibold;
+ margin-bottom: 15px;
+ padding: 10px 20px 10px 20px;
+ background: $highlight-gray;
+ color: $text-black;
+ text-transform: uppercase;
+ border-radius: 6px 6px 0 0;
+ }
+ .vsp-overlay-detail {
+ @extend .body-2;
+ &:hover {
+ color: $blue;
+ }
+ text-transform: none;
+ @include ellipsis(auto, block);
+ border-bottom: 1px solid $tlv-light-gray;
+ cursor: pointer;
+ padding: 5px 0 5px 0;
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ .vsp-overlay-see-more {
+ color: $blue;
+ cursor: pointer;
+ margin-top: 12px;
+ align-self: center;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index c38809c..da0c8b7 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -1,234 +1,157 @@
-.dox-ui {
- @import "bootstrap";
- @import "~react-select/dist/react-select.min.css";
- @import "~react-datepicker/dist/react-datepicker.min.css";
+.dox-ui,
+.onap-sdc-portal {
+ @import 'bootstrap';
+ @import '~react-select/dist/react-select.min.css';
+ @import '~react-datepicker/dist/react-datepicker.min.css';
- @import "common";
- @import "components";
- @import "modules";
+ @import 'common';
+ @import 'components';
+ @import 'modules';
- &.dox-ui-punch-out {
- background-color: $content-background-color;
- &.dox-ui-punch-out-full-page {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- overflow-y: auto;
+ .sdc-alert__header,
+ .sdc-error__header,
+ .sdc-info__header {
+ box-sizing: content-box;
}
- }
-}
-
-/* Out of namespace context for datepicker */
-div[data-reactroot].customized-date-picker-calendar {
- @import "common/variables";
- @import "common/typography";
- border-color: $light-gray;
- margin-top: -8px;
- color: $black;
- .react-datepicker__triangle {
- margin-top: 0px;
- }
- .react-datepicker__navigation--previous::before, .react-datepicker__navigation--next::before {
- width: 8px;
- height: 8px;
- display: inline-block;
- position: absolute;
- top: -4px;
- }
- .react-datepicker__navigation--previous::before {
- left: 0;
- content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
- }
- .react-datepicker__navigation--next::before {
- right: 0;
- content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
- }
-
- .react-datepicker__navigation--previous, .react-datepicker__navigation--next {
- border: none;
- }
-
-
- .react-datepicker__month-container {
- .react-datepicker__header {
- background-color: $background-gray;
- border-bottom: none;
- .react-datepicker__current-month {
- @extend .body-1-semibold;
- background-color: $background-gray;
- margin-bottom: 10px;
- }
- .react-datepicker__day-names {
- @extend .body-1;
- background-color: $white;
- }
- }
- .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
- @extend .body-1;
- background-color: $blue;
- color: $white;
+ &.dox-ui-punch-out {
+ background-color: $content-background-color;
+ &.dox-ui-punch-out-full-page {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow-y: auto;
+ }
}
- .react-datepicker__day {
- border-radius: 0px;
- margin: 0;
- flex: 1;
- @extend .body-1;
- }
-
- .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
- background-color: $tlv-hover;
- color: $black;
- &.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected, &.react-datepicker__day--range-start, &.react-datepicker__day--range-end {
- background-color: $blue;
- color: $white;
- }
- &.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selecting-range-end {
- background-color: lighten($blue, 40%);
- color: $black;
- }
- &.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
- &.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
- &.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
- background-color: $blue;
- color: $white;
- }
- }
-
- .react-datepicker__week {
- display: flex;
- }
- }
}
/* Out of namespace context for tooltips */
-div[data-reactroot].tooltip {
- @import "common/variables";
- @import "common/typography";
+div[data-onboardingroot].tooltip {
+ @import 'common/variables';
+ @import 'common/typography';
- &.in {
- opacity: 1;
- }
- &.validation-error-message {
+ &.in {
+ opacity: 1;
+ }
+ &.validation-error-message {
+ &.bottom {
+ .tooltip-arrow {
+ border-bottom-color: $red !important;
+ }
+ }
+ &.left {
+ .tooltip-arrow {
+ border-left-color: $red !important;
+ }
+ }
+ &.right {
+ .tooltip-arrow {
+ border-right-color: $red !important;
+ }
+ }
+ &.top {
+ .tooltip-arrow {
+ border-top-color: $red !important;
+ }
+ }
+ }
&.bottom {
- .tooltip-arrow {
- border-bottom-color: $red !important;
- }
- }
- &.left {
- .tooltip-arrow {
- border-left-color: $red !important;
- }
- }
- &.right {
- .tooltip-arrow {
- border-right-color: $red !important;
- }
+ .tooltip-arrow {
+ border-bottom-color: $dark-gray !important;
+ }
}
&.top {
- .tooltip-arrow {
- border-top-color: $red !important;
- }
+ .tooltip-arrow {
+ border-top-color: $dark-gray !important;
+ }
}
- }
- &.bottom {
- .tooltip-arrow {
- border-bottom-color: $dark-gray !important;
+ &.right {
+ .tooltip-arrow {
+ border-right-color: $dark-gray !important;
+ }
}
- }
- &.top {
- .tooltip-arrow {
- border-top-color: $dark-gray !important;
+ &.left {
+ .tooltip-arrow {
+ border-left-color: $dark-gray !important;
+ }
}
- }
- &.right {
- .tooltip-arrow {
- border-right-color: $dark-gray !important;
+ .tooltip-inner {
+ @extend .body-1;
+ max-width: 100%;
+ background-color: $dark-gray;
+ padding: 6px 9px;
+ &:first-letter {
+ text-transform: capitalize;
+ }
}
- }
- &.left {
- .tooltip-arrow {
- border-left-color: $dark-gray !important;
- }
- }
- .tooltip-inner {
- @extend .body-1;
- max-width: 100%;
- background-color: $dark-gray;
- padding: 6px 9px;
- &:first-letter {
- text-transform: capitalize;
- }
- }
- // activity log tooltip
- &.activity-log-message-tooltip {
- @include base-font-regular;
- font-size: $body-font-2;
- .message-block {
- text-align: left;
- padding: 3px 12px;
+ // activity log tooltip
+ &.activity-log-message-tooltip {
+ @include base-font-regular;
+ font-size: $body-font-2;
+ .message-block {
+ text-align: left;
+ padding: 3px 12px;
+ }
}
- }
- // manage permisions modal
- &.manage-permissions-owner-tooltip {
- .tooltip-inner {
- width: 400px;
+ // manage permisions modal
+ &.manage-permissions-owner-tooltip {
+ .tooltip-inner {
+ width: 400px;
+ }
}
- }
- // WS/Catalog Tile
- &.tile-super-info {
- .tooltip-inner {
- font-size: $body-font-3;
+ // 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;
- margin-right: 5px;
- font-size: $body-font-2;
- .message-block {
- text-align: left;
- padding: 3px 12px;
- }
- .tooltip-arrow {
- border-bottom-color: $red !important;
- }
+ //dependency table error tooltip
+ &.select-action-table-error-tooltip {
+ @include base-font-regular;
+ margin-right: 5px;
+ font-size: $body-font-2;
+ .message-block {
+ text-align: left;
+ padding: 3px 12px;
+ }
+ .tooltip-arrow {
+ border-bottom-color: $red !important;
+ }
- .tooltip-inner {
- background-color: $red;
- padding: 6px 8px;
- font-size: $body-font-2;
+ .tooltip-inner {
+ background-color: $red;
+ padding: 6px 8px;
+ font-size: $body-font-2;
+ }
}
- }
- // for read-only mode, vendor description in VLM overview
- &.vendor-description-tooltip {
- .tooltip-inner {
- max-width: 600px;
+ // for read-only mode, vendor description in VLM overview
+ &.vendor-description-tooltip {
+ .tooltip-inner {
+ max-width: 600px;
+ }
}
- }
}
/* Out of namespace context for notifications */
.onboarding-notifications-container {
- position: absolute;
- &.position-top-right {
- right: 30px;
- top: 50px;
- }
+ position: absolute;
+ &.position-top-right {
+ right: 30px;
+ top: 50px;
+ }
}
-
.onboarding-loader {
- .onboarding-loader-backdrop {
- @import "common/variables";
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- position: absolute;
- background-color: $transparent-black;
- }
+ .onboarding-loader-backdrop {
+ @import 'common/variables';
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background-color: $transparent-black;
+ }
}
diff --git a/openecomp-ui/resources/scss/style.scss b/openecomp-ui/resources/scss/style.scss
index ac02021..ba22cf6 100644
--- a/openecomp-ui/resources/scss/style.scss
+++ b/openecomp-ui/resources/scss/style.scss
@@ -1,3 +1,3 @@
-@import "common";
-@import "components";
-@import "modules";
+@import 'common';
+@import 'components';
+@import 'modules';