summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components
diff options
context:
space:
mode:
authorAvi Ziv <avi.ziv@amdocs.com>2017-07-18 19:45:38 +0300
committerAvi Ziv <avi.ziv@amdocs.com>2017-07-18 19:45:38 +0300
commitb8e2faf476202b6ffe61bc3a9a37df1304881d40 (patch)
treef78b8c0517d8e16c5ae610bf8b49f68ea8a312a1 /openecomp-ui/resources/scss/components
parent75aacbbe1acf78fa53378f07f0a8c7769449a17e (diff)
[SDC] Onboarding 1710 rebase.
Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535 Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss/components')
-rw-r--r--openecomp-ui/resources/scss/components/_activityLog.scss4
-rw-r--r--openecomp-ui/resources/scss/components/_buttons.scss3
-rw-r--r--openecomp-ui/resources/scss/components/_datepicker.scss51
-rw-r--r--openecomp-ui/resources/scss/components/_forms.scss2
-rw-r--r--openecomp-ui/resources/scss/components/_grid.scss4
-rw-r--r--openecomp-ui/resources/scss/components/_listEditorView.scss15
-rw-r--r--openecomp-ui/resources/scss/components/_navigationSideBar.scss6
-rw-r--r--openecomp-ui/resources/scss/components/_notifications.scss4
-rw-r--r--openecomp-ui/resources/scss/components/_selectActionTable.scss55
-rw-r--r--openecomp-ui/resources/scss/components/_submitErrorResponse.scss4
-rw-r--r--openecomp-ui/resources/scss/components/_svgIcon.scss51
-rw-r--r--openecomp-ui/resources/scss/components/_validationForm.scss3
-rw-r--r--openecomp-ui/resources/scss/components/_versionController.scss12
13 files changed, 115 insertions, 99 deletions
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 1e31e06814..9ada804934 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -29,7 +29,7 @@ $message-info-icon-size: 16px;
height: 36px;
@extend .body-1;
&.header {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
background-color: $tlv-light-gray;
color: $text-black;
}
@@ -39,7 +39,7 @@ $message-info-icon-size: 16px;
.svg-icon-wrapper {
float: right;
}
- .check-circle {
+ .checkCircle {
fill: $green;
width: 16px;
height: 16px;
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
index fbf2c3e728..357a799e93 100644
--- a/openecomp-ui/resources/scss/components/_buttons.scss
+++ b/openecomp-ui/resources/scss/components/_buttons.scss
@@ -2,8 +2,7 @@
border: 1px solid;
border-color: $blue;
color: $blue;
- font-weight: bolder;
- @extend .body-1;
+ @extend .body-1-semibold;
text-align: center;
padding: 7px;
border-radius: 5px;
diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
new file mode 100644
index 0000000000..593bb09d7d
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_datepicker.scss
@@ -0,0 +1,51 @@
+.customized-date-picker {
+ margin-bottom: 24px;
+ .date-picker-label {
+ &.required {
+ &:before {
+ content: "*";
+ color: $red;
+ margin: 0 4px 0 0;
+ }
+ }
+
+ @extend .body-2-semibold;
+ color: $dark-gray;
+ margin-bottom: 8px;
+ }
+ .datepicker-custom-input {
+ display: flex;
+ justify-content: space-between;
+ width: 243px;
+ height: 30px;
+ border-radius: 2px;
+ color: $dark-gray;
+ border: 1px solid $light-gray;
+ padding: 6px 12px;
+ &:hover {
+ border-color: $gray;
+ .clear-input {
+ &:before {
+ cursor: pointer;
+ content: 'x';
+ }
+ }
+ }
+ .datepicker-text {
+ cursor: pointer;
+ width: 170px;
+ @extend .body-1;
+ &.placeholder {
+ color: $light-gray;
+ }
+
+ }
+ .calendar-input {
+ fill: $light-gray;
+ }
+ }
+
+
+
+}
+
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 23c58ea4ac..b662ce873c 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -1,5 +1,5 @@
.section-title {
- @extend .heading-3-medium;
+ @extend .heading-3-semibold;
padding: 50px 0 30px 0;
&:first-child {
padding: 0 0 30px 0;
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index d4d1fa7ccd..9a76f97546 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,7 +1,9 @@
$gridItemSpace: 15%;
.grid-section {
- padding-bottom: 30px;
+ &:not(:last-of-type) {
+ padding-bottom: 30px;
+ }
.grid-items {
display: flex;
flex-direction: row;
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 18d5426eb7..1c837ca4c2 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -15,16 +15,16 @@
border-bottom: 1px solid $light-gray;
padding-bottom: 5px;
.list-editor-view-title {
- @extend .heading-3-medium;
+ @extend .heading-3-semibold;
}
.list-editor-view-add-controller {
- @extend .heading-4-medium;
+ @extend .body-1-semibold;
color: $blue;
display: table;
cursor: pointer;
position: relative;
- padding-top: 0px;
- padding-bottom: 0px;
+ padding-top: 0;
+ padding-bottom: 0;
margin-left: auto;
.list-editor-view-add-title {
display: flex;
@@ -151,6 +151,13 @@
}
}
+ .details-col{
+ flex-direction: column;
+ .title {
+ padding-bottom: 0;
+ }
+ }
+
.description {
@extend .body-1;
@include multiline-ellipsis(1.3em, 3);
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index 36c14a2785..daf5025bee 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -16,7 +16,7 @@
flex-direction: column;
background-color: $tlv-gray;
.group-name {
- @extend .heading-4-medium;
+ @extend .heading-4-semibold;
@include ellipsis;
min-height: 56px;
display: block;
@@ -47,13 +47,13 @@
@include ellipsis;
white-space: normal;
&.selected {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
border-left: 4px solid $blue;
padding-left: 18px;
color: $blue;
}
&.bold-name {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
}
}
}
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
index 426f05cd89..7165e57ef9 100644
--- a/openecomp-ui/resources/scss/components/_notifications.scss
+++ b/openecomp-ui/resources/scss/components/_notifications.scss
@@ -5,12 +5,12 @@
.modal-header {
padding: 15px 10px 10px;
.modal-title {
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
}
}
.modal-body {
padding: 30px 15px;
- @extend .body-1-medium;
+ @extend .body-1-semibold;
}
}
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index fa17733374..4e42b6ce5b 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -1,16 +1,16 @@
.select-action-table-view {
.svg-icon-wrapper {
flex-direction: row;
-
+
&::before {
- content:"";
+ content:"";
}
.svg-icon {
margin-left: 5px;
margin-right: 5px;
width:16px;
height:16px;
- }
+ }
}
.dummy-icon {
background-color: $white;
@@ -39,34 +39,39 @@
.select-action-table-headers {
display: flex;
background-color: $tlv-light-gray;
- border-color: inherit;
+ border-color: inherit;
.select-action-table-header {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
flex: 1;
border-top: 1px solid;
- border-right: 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;
+ flex-direction: row;
margin-bottom: 14px;
- .svg-icon.trash-o {
-
- fill: $dark-gray;
+ .svg-icon-wrapper.trashO {
+ .svg-icon {
+ fill: $dark-gray;
+ }
+ }
+ .svg-icon-wrapper.errorCircle {
+ .svg-icon {
+ fill: $red;
+ }
}
- .svg-icon.error-circle {
- fill: $red;
+ .svg-icon-wrapper.checkCircle {
+ .svg-icon {
+ fill: $green;
+ }
}
- .svg-icon.check-circle {
- fill: $green;
- }
.select-action-table-row {
display: flex;
flex: 1;
@@ -90,7 +95,7 @@
}
}
.form-group {
- margin: 0;
+ margin: 0;
.Select-control {
height:36px;
border: none;
@@ -102,7 +107,7 @@
padding-left: 20px;
padding-right: 50px;
padding-top: 4px;
-
+
}
.Select-placeholder {
color: $dark-gray;
@@ -110,23 +115,23 @@
.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-menu {
display: inline-block;
- .Select-option {
+ .Select-option {
width: 100%;
display: inline-block;
- border-bottom: 1px solid $light-gray;
+ border-bottom: 1px solid $light-gray;
&:hover {
background-color: $blue;
color: $white;
@@ -142,9 +147,9 @@
}
&.is-focused {
background-color: transparent;
- }
+ }
}
- }
+ }
}
}
}
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index e34be01af2..b917dfefeb 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -26,7 +26,7 @@
background-color: $tlv-gray;
padding: 5px;
cursor: pointer;
- .chevron-down {
+ .chevronDown {
width:10px;
height:10px;
margin-right: 10px;
@@ -54,7 +54,7 @@
.component-name-header {
margin-left: 45px;
margin-top: 10px;
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
}
}
}
diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss
deleted file mode 100644
index fc02f81fd4..0000000000
--- a/openecomp-ui/resources/scss/components/_svgIcon.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@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 9404f2841a..46269ad699 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -4,6 +4,9 @@ form {
position: relative;
flex: 1;
}
+ .validation-radio-wrapper {
+ position: relative;
+ }
.nav-tabs {
position: relative;
.invalid-tab:not(.active) {
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 3c30cdcc37..b454d3496b 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -20,7 +20,7 @@
padding-right: 10px;
margin-right: 15px;
margin-left: 10px;
- @extend .body-1;
+ @extend .body-1;
}
.version-section {
.form-group {
@@ -59,7 +59,7 @@
margin-right: 20px;
padding-bottom: 5px;
- .version-controller-lock-closed {
+ .versionControllerLockClosed {
fill: $dark-gray;
width: 21px;
height: 23px;
@@ -71,7 +71,7 @@
fill: $black;
}
}
- .version-controller-lock-open {
+ .versionControllerLockOpen {
fill: $dark-gray;
width: 24px;
height: 28px;
@@ -80,7 +80,7 @@
fill: $black;
}
}
- .version-controller-submit {
+ .versionControllerSubmit {
fill: $blue;
&.disabled {
fill: $light-gray;
@@ -90,7 +90,7 @@
}
}
- .version-controller-revert {
+ .versionControllerRevert {
fill: $dark-gray;
&.disabled {
fill: $light-gray;
@@ -99,7 +99,7 @@
fill: $black;
}
}
- .version-controller-save {
+ .versionControllerSave {
fill: $dark-gray;
&.disabled {
fill: $light-gray;