aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/components')
-rw-r--r--openecomp-ui/resources/scss/components/_activityLog.scss104
-rw-r--r--openecomp-ui/resources/scss/components/_buttons.scss15
-rw-r--r--openecomp-ui/resources/scss/components/_dualListBox.scss10
-rw-r--r--openecomp-ui/resources/scss/components/_expandableInput.scss108
-rw-r--r--openecomp-ui/resources/scss/components/_forms.scss49
-rw-r--r--openecomp-ui/resources/scss/components/_grid.scss64
-rw-r--r--openecomp-ui/resources/scss/components/_icon.scss164
-rw-r--r--openecomp-ui/resources/scss/components/_inputOptions.scss48
-rw-r--r--openecomp-ui/resources/scss/components/_listEditorView.scss145
-rw-r--r--openecomp-ui/resources/scss/components/_navigationSideBar.scss6
-rw-r--r--openecomp-ui/resources/scss/components/_selectActionTable.scss152
-rw-r--r--openecomp-ui/resources/scss/components/_slidePanel.scss35
-rw-r--r--openecomp-ui/resources/scss/components/_submitErrorResponse.scss37
-rw-r--r--openecomp-ui/resources/scss/components/_svgIcon.scss51
-rw-r--r--openecomp-ui/resources/scss/components/_validationForm.scss24
-rw-r--r--openecomp-ui/resources/scss/components/_versionController.scss196
16 files changed, 927 insertions, 281 deletions
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
new file mode 100644
index 0000000000..1e31e06814
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -0,0 +1,104 @@
+$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;
+}
+
+.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;
+ }
+ .activity-list-item {
+ display: flex;
+ height: 36px;
+ @extend .body-1;
+ &.header {
+ @extend .body-1-medium;
+ background-color: $tlv-light-gray;
+ color: $text-black;
+ }
+ }
+
+ .activity-status {
+ .svg-icon-wrapper {
+ float: right;
+ }
+ .check-circle {
+ fill: $green;
+ width: 16px;
+ height: 16px;
+ }
+ .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;
+ }
+
+ .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-cell {
+ display: flex;
+ justify-content: space-between;
+ }
+
+}
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
index b39ea495ab..fbf2c3e728 100644
--- a/openecomp-ui/resources/scss/components/_buttons.scss
+++ b/openecomp-ui/resources/scss/components/_buttons.scss
@@ -1,18 +1,3 @@
-
-$plus-circle-icon-size: 18px;
-.plus-icon-button {
- background: url($plus-circle-icon) no-repeat;
- background-size: $plus-circle-icon-size;
- width: $plus-circle-icon-size;
- height: $plus-circle-icon-size;
- cursor: pointer;
- &.small {
- background-size: $plus-circle-icon-size - 6;
- width: $plus-circle-icon-size - 6;
- height: $plus-circle-icon-size - 6;
- }
-}
-
.primary-btn{
border: 1px solid;
border-color: $blue;
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
index 543c1c8b92..4a1a940c34 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -1,6 +1,10 @@
.dual-list-box {
display: flex;
margin: 25px 0 10px 0;
+ .svg-icon.search {
+ height: 14px;
+ width: 14px;
+ }
.dual-search-multi-select-section {
$multi-select-box-width: 398px;
@@ -32,6 +36,10 @@
.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;
@@ -40,7 +48,7 @@
height: 15px;
cursor: pointer;
margin-top: 20px;
- color: $blue;
+ fill: $blue;
}
}
}
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
index 52f410a61b..52b72d7c91 100644
--- a/openecomp-ui/resources/scss/components/_expandableInput.scss
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -1,61 +1,55 @@
-$transitionLength: 0.5s;
-
-@mixin expand-transition($tl){
- transition: width $tl, background-color $tl, cursor $tl;
-}
-
-@mixin color-transition($tl){
- transition: color $tl;
-}
-
-.expandable-input-wrapper {
- display: flex;
- &:hover{
- .form-control {
- border-color: $gray;
- }
- }
- .expandable-input-control {
- flex: 1 1;
- margin: 0;
- .form-control {
- border-radius: 20px;
- }
- align-self: center;
- }
- .expandable-active {
- @include expand-transition($transitionLength);
- width: 215px;
- cursor: text;
- }
- .expandable-not-active {
- @include expand-transition($transitionLength);
- width: 28px;
- cursor: pointer;
- background-color: transparent;
- color: transparent;
+.expandable-input-top {
+ display: flex;
+ height: 22px;
+ .svg-icon-wrapper {
+ height: 17px;
+ width: 17px;
}
-
- .expandable-icon {
- @include color-transition($transitionLength);
- position: relative;
- left: -20px;
- align-self: center;
- width: 0;
- cursor: pointer;
- color: $dark-gray;
- }
-
- .expandable-close-button{
- @extend .expandable-icon;
- color: $gray;
- opacity: 0.5;
- &:hover {
- opacity: 1;
+ .expandable-input-wrapper {
+ display: flex;
+ .svg-icon.search {
+ height: 17px;
+ width: 17px;
+ }
+ &.closed {
+ .svg-icon.search {
+ 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 {
+ fill: $dark-blue;
+ }
+ .svg-icon.close {
+ margin-left: 7px;
+ height: 10px;
+ width: 10px;
+ 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;
}
- }
- .expandable-icon-active {
- @include color-transition($transitionLength);
- color: $blue;
}
}
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 3c50fe694a..23c58ea4ac 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -5,10 +5,37 @@
padding: 0 0 30px 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;
+ }
+ }
+ }
+ }
+}
+
.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;
@@ -26,20 +53,24 @@
&.Select--multi {
.Select-value {
color: $text-black;
- background-color: transparent;
- border-color: $light-gray;
- margin-top: 2px;
- margin-left: 2px;
- border-radius: 1px;
+ background-color: $background-gray;
+ border: none;
+ margin: 3px 0 3px 10px;
+ border-radius: 10px;
+ padding-left: 8px;
+ padding-right: 6px;
}
.Select-value-icon {
- border-right-color: $light-gray;
+ border: none;
+ float: right;
+ &:hover {
+ background-color: inherit;
+ color: inherit;
+ }
}
.Select-arrow-zone {
- padding-top: 4px;
+ padding-top: 4px;
}
}
}
}
-
-
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
new file mode 100644
index 0000000000..d4d1fa7ccd
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -0,0 +1,64 @@
+$gridItemSpace: 15%;
+
+.grid-section {
+ 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;
+ }
+ }
+
+ .grid-col-1 {
+ @extend %grid-col-base;
+ flex-basis: 25%;
+ &:after {
+ flex-basis: $gridItemSpace;
+ content: ' ';
+ }
+ }
+
+ .grid-col-2 {
+ @extend %grid-col-base;
+ flex-basis: 50%;
+ &:after {
+ flex-basis: $gridItemSpace / 2;
+ content: ' ';
+ }
+ }
+ .grid-col-3 {
+ @extend %grid-col-base;
+ flex-basis: 75%;
+ &:after {
+ flex-basis: $gridItemSpace / 3;
+ content: ' ';
+ }
+ }
+ .grid-col-4 {
+ @extend %grid-col-base;
+ flex-basis: 100%;
+ &:after {
+ flex-basis: $gridItemSpace / 4;
+ content: ' ';
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss
new file mode 100644
index 0000000000..c80055d055
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_icon.scss
@@ -0,0 +1,164 @@
+$image-icon-normal-size: 20px;
+
+.icon-component {
+ display: inline-flex;
+ align-items: center;
+
+ &.clickable:hover {
+ cursor: pointer;
+ }
+ .icon-label {
+ color: $blue;
+ }
+ &.disabled {
+ .icon-label {
+ color: $tlv-light-gray;
+ opacity: 0.7;
+ }
+ }
+ .icon {
+ width: $image-icon-normal-size;
+ height: $image-icon-normal-size;
+ margin: 0 6px;
+ background-repeat: no-repeat;
+
+ &.trash {
+ background-image: url($trash-icon);
+ }
+
+ &.artifacts {
+ background-image: url($artifacts-icon);
+ }
+
+ &.base {
+ background-image: url($base-module-icon);
+ }
+
+ &.module {
+ background-image: url($module-icon);
+ }
+
+ &.pencil {
+ background-image: url($pencil-icon);
+ }
+
+ &.check {
+ background-image: url($check-icon);
+ width: 30px;
+ height: 30px;
+ }
+
+ &.download {
+ background-image: url($download-icon);
+ width: 16px;
+ height: 14px;
+ }
+
+ &.upload {
+ background-image: url($upload-icon);
+ width: 16px;
+ height: 14px;
+ }
+ &.validation-artifacts {
+ width: 13px;
+ height: 17px;
+ position: relative;
+ top: 3px;
+ background-image: url($artifacts-regular-icon);
+ &.selected {
+ background-image: url($artifacts-selected-icon);
+ }
+ }
+ &.network {
+ background-image: url($network-icon);
+ width: 12px;
+ height: 12px;
+ &.selected {
+ background-image: url($network-selected-icon);
+ }
+ }
+ &.validation-other {
+ background-image: url($others-icon);
+ width: 12px;
+ height: 12px;
+ &.selected {
+ background-image: url($others-selected-icon);
+ }
+ }
+ &.volume {
+ width: 15px;
+ height: 16px;
+ background-image: url($volume-icon);
+ &.selected {
+ background-image: url($volume-selected-icon);
+ }
+ }
+ &.zip {
+ background-image: url($zip-icon);
+ height: 23px;
+ width: 29px;
+ &.selected {
+ background-image: url($zip-selected-icon);
+ }
+ }
+ &.heat {
+ background-image: url($heat-icon);
+ height: 14px;
+ width: 16px;
+ &.selected {
+ background-image: url($heat-selected-icon);
+ }
+ }
+ &.env {
+ background-image: url($env-icon);
+ height: 15px;
+ width: 16px;
+ &.selected {
+ background-image: url($env-selected-icon);
+ }
+ }
+ &.error {
+ width: 14px;
+ min-width: 14px;
+ height: 14px;
+ background-image: url($error-icon-sm);
+ }
+ &.warning {
+ height: 13px;
+ width: 15px;
+ min-width: 15px;
+ background-image: url($warning-icon-sm);
+ }
+ &.error-lg {
+ width: 17px;
+ min-width: 17px;
+ height: 17px;
+ background-image: url($error-icon-lg);
+ }
+ &.warning-lg {
+ width: 19px;
+ min-width: 19px;
+ height: 17px;
+ background-image: url($warning-icon-lg);
+ }
+ &.chevron-up {
+ background-image: url($chevron_down);
+ transform: rotate(180deg);
+ height: 7px;
+ width: 11px;
+ }
+ &.chevron-down {
+ background-image: url($chevron_down);
+ height: 7px;
+ width: 11px;
+ }
+ &.go-to-overview {
+ background-image: url($go-to-overview-icon);
+ height: 15px;
+ width: 18px;
+ &.disabled {
+ background-image: url($go-to-overview-disabled-icon);
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss
index 107751b07b..face03d64d 100644
--- a/openecomp-ui/resources/scss/components/_inputOptions.scss
+++ b/openecomp-ui/resources/scss/components/_inputOptions.scss
@@ -1,3 +1,12 @@
+.disabled {
+ .Select-control {
+ background-color: $tlv-light-gray;
+ .Select-placeholder {
+ color: $dark-gray;
+ }
+ }
+}
+
.input-options {
display: flex;
border: 1px solid $light-gray;
@@ -14,6 +23,7 @@
padding-top:0px;
padding-bottom: 0px;
height:28px;
+
}
.input-options-other{
@@ -34,6 +44,42 @@
}
.input-options.has-error {
- border-color: #A94442;
+ 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;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 704faaf098..18d5426eb7 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -2,49 +2,42 @@
@extend .flex-column;
background-color: $content-background-color;
- .list-editor-view-title {
- @extend .section-title;
- }
-
- .list-editor-view-title-inline {
- @extend .list-editor-view-title;
- position: relative;
- top: 9px;
- &:first-child {
- padding: 0;
- }
- }
-
- .list-editor-view-add-section {
- display: inline-block;
- padding: 0 10px 0 10px;
+ .expandble-search-wrapper {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 10px;
}
- .list-editor-view-actions {
+ .list-editor-view-header {
display: flex;
justify-content: space-between;
- align-items: center;
+ align-items: flex-end;
border-bottom: 1px solid $light-gray;
- padding-bottom: 18px;
+ padding-bottom: 5px;
+ .list-editor-view-title {
+ @extend .heading-3-medium;
+ }
.list-editor-view-add-controller {
- @extend .body-1-medium;
+ @extend .heading-4-medium;
color: $blue;
display: table;
cursor: pointer;
position: relative;
- top: 9px;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ margin-left: auto;
+ .list-editor-view-add-title {
+ display: flex;
+ }
span {
display: table-cell;
vertical-align: middle;
+ margin-top:4px;
&:nth-child(2) {
padding-left: 10px;
}
}
}
-
- .search-wrapper {
- width: 265px;
- }
}
.list-editor-view-list-scroller {
@@ -56,21 +49,17 @@
.list-editor-view-list {
@extend .flex-column;
-
.list-editor-item-view {
margin: 8px 0;
border: 1px solid $light-gray;
background-color: $white;
- cursor: pointer;
display: flex;
- height: 100px;
min-height: 100px;
overflow: hidden;
.list-editor-item-view-content {
padding: 10px 28px;
display: flex;
- flex-basis: 95%;
- width: 95%;
+ flex: 1 1 auto;
.list-editor-item-view-field {
flex: 1 1;
color: $black;
@@ -91,6 +80,12 @@
.text {
@extend .body-1;
}
+ .textEllipses {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding-right: 5px;
+ }
}
}
.list-editor-item-view-controller {
@@ -99,59 +94,79 @@
align-self: center;
justify-content: center;
flex-direction: column;
- .fa {
- transition: color .3s;
- font-size: 22px;
- color: $white;
- &:first-child{
+ .svg-icon-wrapper {
+ &:first-child {
margin-bottom: 10px;
}
}
+ .svg-icon {
+ transition: fill .3s;
+ height: 18px;
+ width: 18px;
+ fill: $white;
+ }
}
- &:hover {
+ &.selectable:hover{
@extend .box-hover;
+ cursor: pointer;
.list-editor-item-view-controller {
- .fa {
- color: $gray;
+ .svg-icon {
+ fill: $dark-gray;
+ &:hover {
+ fill: $black;
+ }
}
}
}
}
- }
+ &.two-columns {
- &.thinner-list {
- background-color: $white;
- padding: 0;
- margin-top: 35px;
+ flex-direction: row;
+ flex-wrap: wrap;
- .list-editor-view-list {
- border-top: 0;
- padding-top: 0;
- margin-top: 23px;
.list-editor-item-view {
- &:hover {
- border-color: $light-gray;
- }
- margin: 5px 0 0 0;
- height: 30px;
- border-top: 0;
- border-left: 0;
- border-right: 0;
.list-editor-item-view-content {
- padding: 4px;
- .name {
- @extend .body-2-medium;
- flex-basis: 36%;
+ 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;
+ }
+ }
+
+ .description {
+ @extend .body-1;
+ @include multiline-ellipsis(1.3em, 3);
+ }
}
}
- .list-editor-item-view-controller {
- .fa-trash-o {
- font-size: 20px;
- }
+
+ &:nth-child(odd){
+ flex: 0 0 48.5%;
+ margin-right: 50px;
+ }
+ &:nth-child(even) {
+ flex: 1;
+ margin-right: 0;
}
}
}
}
}
-
-
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index 404f43ca68..36c14a2785 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -3,7 +3,7 @@
height: 100%;
background-color: $white;
border-right: 1px solid $light-gray;
- box-shadow: 1px -1px 3px 0px $tlv-light-gray;
+ @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
border-bottom: 0;
.navigation-side-content {
@@ -16,11 +16,11 @@
flex-direction: column;
background-color: $tlv-gray;
.group-name {
- @extend .heading-5-medium;
+ @extend .heading-4-medium;
@include ellipsis;
min-height: 56px;
display: block;
- padding: 18px 12px 16px 40px;
+ padding: 18px 12px 13px 40px;
background-color: $white;
border-bottom: 1px solid $tlv-light-gray;
}
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
new file mode 100644
index 0000000000..fa17733374
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -0,0 +1,152 @@
+.select-action-table-view {
+ .svg-icon-wrapper {
+ flex-direction: row;
+
+ &::before {
+ content:"";
+ }
+ .svg-icon {
+ 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-headers {
+ display: flex;
+ background-color: $tlv-light-gray;
+ border-color: inherit;
+ .select-action-table-header {
+ @extend .body-1-medium;
+ 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.trash-o {
+
+ fill: $dark-gray;
+ }
+ .svg-icon.error-circle {
+ fill: $red;
+ }
+ .svg-icon.check-circle {
+ fill: $green;
+ }
+ .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 {
+ display: inline-block;
+ .Select-option {
+ width: 100%;
+ display: inline-block;
+ 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/_slidePanel.scss b/openecomp-ui/resources/scss/components/_slidePanel.scss
deleted file mode 100644
index 61c9a189f0..0000000000
--- a/openecomp-ui/resources/scss/components/_slidePanel.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-
-.slide-panel {
- transition: left .5s,right .5s;
-
- .slide-panel-header {
- padding: 10px;
- height: 45px;
- display: table;
- width: 100%;
- .slide-panel-header-title, .collapse-double-icon {
- display: table-cell;
- vertical-align: middle;
- }
- .slide-panel-header-title {
- @extend .body-2;
- text-align: center;
- width: 100%;
- color: $text-black;
- }
- .collapse-double-icon {
- color: $text-black;
- cursor: pointer;
- }
- }
-
- .slide-panel-content {
- opacity: 1;
- transition: opacity .5s, visibility .5s;
-
- &.closed {
- opacity: 0;
- visibility: hidden;
- }
- }
-}
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index fdac5ebe45..e34be01af2 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -20,4 +20,41 @@
}
}
}
+ .error-block {
+ margin: 10px 0;
+ .error-block-header {
+ background-color: $tlv-gray;
+ padding: 5px;
+ cursor: pointer;
+ .chevron-down {
+ width:10px;
+ height:10px;
+ margin-right: 10px;
+ &.right {
+ transform: rotate(270deg);
+ }
+ }
+
+ }
+ .error-code-list-item {
+ .icon-label {
+ @extend .body-1;
+ color: $dark-gray;
+ }
+ .icon-component {
+ align-items: baseline;
+ }
+ }
+ .list-group-item {
+ .error-item-text {
+ margin-top:-2px;
+ //position: fixed;
+ }
+ }
+ .component-name-header {
+ margin-left: 45px;
+ margin-top: 10px;
+ @extend .heading-5-medium;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss
new file mode 100644
index 0000000000..fc02f81fd4
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_svgIcon.scss
@@ -0,0 +1,51 @@
+@mixin overrideBootstrapClose(){
+ opacity: 1;
+ float: none;
+ &:hover {
+ opacity: 1;
+ }
+}
+
+.svg-icon-wrapper {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ &.bottom {
+ flex-direction: column;
+ .svg-icon-label {
+ margin-bottom: 5px;
+ }
+ }
+ &.right {
+ float: none;
+ .svg-icon-label {
+ margin-left: 5px;
+ }
+ }
+ &.top {
+ flex-direction: column-reverse;;
+ .svg-icon-label {
+ margin-top: 5px;
+ }
+ }
+ &.left {
+ flex-direction: row-reverse;;
+ .svg-icon-label {
+ margin-right: 5px;
+ }
+ }
+ // bootstrap override
+ &.close {
+ @include overrideBootstrapClose();
+ }
+ .close {
+ @include overrideBootstrapClose();
+ }
+ .svg-icon {
+ width: 20px;
+ height: 20px;
+ }
+ .svg-icon-label {
+ @extend .body-1;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index 93444c2e88..9404f2841a 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -5,6 +5,7 @@ form {
flex: 1;
}
.nav-tabs {
+ position: relative;
.invalid-tab:not(.active) {
a {
color: $red;
@@ -73,14 +74,17 @@ form {
flex: 0.2;
content: ' ';
}
- &.add-line-break {
- .control-label {
- &:after {
- content: "\00a0";
- display: block;
+ @media (min-width: 1349px) {
+ &.add-line-break {
+ .control-label {
+ &:after {
+ content: "\00a0";
+ display: block;
+ }
}
}
}
+
}
}
}
@@ -91,6 +95,16 @@ form {
button:first-child {
margin-right: 15px;
}
+ .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 3511470bfb..3c30cdcc37 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,109 +1,125 @@
.version-controller-bar {
- .navbar-inverse {
- @extend .body-1-medium;
+ display: flex;
+ min-height: 57px;
+ border-bottom: 1px solid $tlv-light-gray;
+ background-color: transparent;
+ .vc-container {
+ display: flex;
+ flex: 1;
+ align-self: center;
background-color: transparent;
- border-bottom: $tlv-light-gray thin solid;
- padding-top: 14px;
- padding-bottom: 12px;
- margin-bottom: 0;
- .container {
- width: 100%;
- padding: 0 52px;
+ justify-content: space-between;
+ padding-left: 16px;
+ padding-right: 40px;
+ .version-status-container {
+ display: flex;
height: 30px;
- .navbar-collapse {
- padding-left: 0;
- .items-in-left {
- display: flex;
- height: 30px;
- .version-section {
- .form-group {
- margin-right: 5px;
- .input-options {
- border: none;
- .input-options-select {
- padding-top: 4px;
- }
- }
+ .version-selector {
+ border: none;
+ margin-top: 7px;
+ padding-right: 10px;
+ margin-right: 15px;
+ margin-left: 10px;
+ @extend .body-1;
+ }
+ .version-section {
+ .form-group {
+ margin-right: 20px;
+ .input-options {
+ border: none;
+ .input-options-select {
+ padding-top: 4px;
}
}
- .vc-status {
- display: flex;
- padding-left: 14px;
- border-left: $light-gray thin solid;
- .status-text {
- align-self: center;
- display: flex;
- padding-left: 3px;
- .status-text-dash {
- padding: 0 9px;
- }
+ }
+ }
+ .vc-status {
+ display: flex;
+ padding-left: 20px;
+ border-left: $light-gray thin solid;
+ .status-text {
+ align-self: center;
+ margin-top: 2px;
+ @extend .heading-5;
+ color: $dark-gray;
+ }
+ }
+ }
+ .save-submit-cancel-container {
+ display: flex;
+ height: 30px;
+ .action-buttons {
+ display: flex;
+ padding: 0 13px;
+ .version-control-buttons {
+ display: flex;
+ }
+ .action-buttons-svg {
+ padding-top: 5px;
+ margin-right: 20px;
+ padding-bottom: 5px;
+
+ .version-controller-lock-closed {
+ fill: $dark-gray;
+ width: 21px;
+ height: 23px;
+ margin-top: -3px;
+ &.disabled {
+ fill: $light-gray;
}
- .onboarding-status-icon {
- width: 25px;
- height: 19px;
- background-image: url('../images/ecomp/ASDC_Sprite.png');
- background-position: -306px 674px;
- align-self: center;
+ &:hover {
+ fill: $black;
}
- .checkout-status-icon {
- display: flex;
- & > .catalog-tile-check-in-status.sprite-new.checkout-editable-status-icon {
- width: 25px;
- height: 19px;
- align-self: center;
- margin-left: 5px;
- }
+ }
+ .version-controller-lock-open {
+ fill: $dark-gray;
+ width: 24px;
+ height: 28px;
+ margin-top: -6px;
+ &:hover {
+ fill: $black;
}
}
- }
- .items-in-right {
- display: flex;
- height: 30px;
- .action-buttons {
- display: flex;
- border-right: $gray thin solid;
- padding: 0 13px;
- .version-control-buttons {
- display: flex;
+ .version-controller-submit {
+ fill: $blue;
+ &.disabled {
+ fill: $light-gray;
}
- .vc-nav-item-button {
- border: 1px solid $light-gray;
- border-radius: 5px;
- cursor: pointer;
- margin-right:10px;
- padding: 6px 20px;
- &:hover, &:focus {
- background-color: lightgrey;
- }
- &.button-submit{
- background-color: transparent;
- color: $green;
- border-color: $green;
- }
- &.button-checkin-checkout {
- background-color: $white;
- @extend .body-1;
- }
+ &:hover {
+ fill: $dark-blue;
}
- .revert-btn, .save-btn {
- height: 24px;
- width: 24px;
- align-self: center;
- cursor: pointer;
- margin-right: 10px;
+ }
+
+ .version-controller-revert {
+ fill: $dark-gray;
+ &.disabled {
+ fill: $light-gray;
+ }
+ &:hover {
+ fill: $black;
}
}
- .vc-nav-item-close {
- display: flex;
- padding-left: 18px;
- padding-top: 3px;
- align-self: center;
- @extend .body-1;
- color: $gray;
- cursor: pointer;
+ .version-controller-save {
+ fill: $dark-gray;
+ &.disabled {
+ fill: $light-gray;
+ }
+ &:hover {
+ fill: $black;
+ }
}
}
}
+ .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;
+ }
}
}
}