diff options
Diffstat (limited to 'openecomp-ui/resources/scss/components')
18 files changed, 1030 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss new file mode 100644 index 0000000000..b39ea495ab --- /dev/null +++ b/openecomp-ui/resources/scss/components/_buttons.scss @@ -0,0 +1,46 @@ + +$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; + color: $blue; + font-weight: bolder; + @extend .body-1; + text-align: center; + padding: 7px; + border-radius: 5px; + cursor: pointer; + align-self: center; + background-color: $white; + .primary-btn-text { + width: 100%; + } + &:hover { + color: $blue; + border-color: $blue; + background-color: $tlv-hover; + &:active { + color: $blue; + border-color: $blue; + } + } + + &:focus:not(:hover) { + color: $blue; + border-color: $blue; + background-color: $white; + } +} diff --git a/openecomp-ui/resources/scss/components/_dropzone.scss b/openecomp-ui/resources/scss/components/_dropzone.scss new file mode 100644 index 0000000000..cad752d415 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_dropzone.scss @@ -0,0 +1,8 @@ + +.active-dragging { + border: 3px dashed $dark-blue; + border-radius: 20px; + .draggable-wrapper { + opacity: 0.5; + } +} diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss new file mode 100644 index 0000000000..543c1c8b92 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_dualListBox.scss @@ -0,0 +1,46 @@ +.dual-list-box { + display: flex; + margin: 25px 0 10px 0; + + .dual-search-multi-select-section { + $multi-select-box-width: 398px; + width: $multi-select-box-width; + .dual-text-box-search-title, .dual-list-box-multi-select-text { + @extend .body-1; + color: $dark-gray; + } + .dual-text-box-search { + margin: 5px 0 30px 0; + } + .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-list-options-bar { + margin: 62px 54px 27px 54px; + padding-top: 23px; + .dual-list-option { + text-align: center; + line-height: 10px; + font-size: 25px; + width: 20px; + height: 15px; + cursor: pointer; + margin-top: 20px; + color: $blue; + } + } +} diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss new file mode 100644 index 0000000000..52f410a61b --- /dev/null +++ b/openecomp-ui/resources/scss/components/_expandableInput.scss @@ -0,0 +1,61 @@ +$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-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-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 new file mode 100644 index 0000000000..3c50fe694a --- /dev/null +++ b/openecomp-ui/resources/scss/components/_forms.scss @@ -0,0 +1,45 @@ +.section-title { + @extend .heading-3-medium; + padding: 50px 0 30px 0; + &:first-child { + padding: 0 0 30px 0; + } +} +.dropdown-multi-select { + .Select { + display: block; + width: 100%; + .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: transparent; + border-color: $light-gray; + margin-top: 2px; + margin-left: 2px; + border-radius: 1px; + } + .Select-value-icon { + border-right-color: $light-gray; + } + .Select-arrow-zone { + padding-top: 4px; + } + } + } +} + + diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss new file mode 100644 index 0000000000..107751b07b --- /dev/null +++ b/openecomp-ui/resources/scss/components/_inputOptions.scss @@ -0,0 +1,39 @@ +.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; + 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: #A94442; +} + diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss new file mode 100644 index 0000000000..704faaf098 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_listEditorView.scss @@ -0,0 +1,157 @@ +.list-editor-view { + @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; + } + + .list-editor-view-actions { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid $light-gray; + padding-bottom: 18px; + .list-editor-view-add-controller { + @extend .body-1-medium; + color: $blue; + display: table; + cursor: pointer; + position: relative; + top: 9px; + span { + display: table-cell; + vertical-align: middle; + &:nth-child(2) { + padding-left: 10px; + } + } + } + + .search-wrapper { + width: 265px; + } + } + + .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; + 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%; + .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; + } + } + .text { + @extend .body-1; + } + } + } + .list-editor-item-view-controller { + display: flex; + flex-basis: 5%; + align-self: center; + justify-content: center; + flex-direction: column; + .fa { + transition: color .3s; + font-size: 22px; + color: $white; + &:first-child{ + margin-bottom: 10px; + } + } + } + &:hover { + @extend .box-hover; + .list-editor-item-view-controller { + .fa { + color: $gray; + } + } + } + } + } + + &.thinner-list { + background-color: $white; + padding: 0; + margin-top: 35px; + + .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%; + } + } + .list-editor-item-view-controller { + .fa-trash-o { + font-size: 20px; + } + } + } + } + } +} + + diff --git a/openecomp-ui/resources/scss/components/_loader.scss b/openecomp-ui/resources/scss/components/_loader.scss new file mode 100644 index 0000000000..ddff9af6e3 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_loader.scss @@ -0,0 +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; + } + 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; + } + } + @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; + } + } +} + diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss new file mode 100644 index 0000000000..404f43ca68 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss @@ -0,0 +1,62 @@ +.software-product-navigation-side-bar { + width: 245px; + height: 100%; + background-color: $white; + border-right: 1px solid $light-gray; + box-shadow: 1px -1px 3px 0px $tlv-light-gray; + border-bottom: 0; + + .navigation-side-content { + overflow: hidden; + height: 100%; + + .navigation-group { + height: 100%; + display: flex; + flex-direction: column; + background-color: $tlv-gray; + .group-name { + @extend .heading-5-medium; + @include ellipsis; + min-height: 56px; + display: block; + padding: 18px 12px 16px 40px; + background-color: $white; + border-bottom: 1px solid $tlv-light-gray; + } + } + + .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-medium; + border-left: 4px solid $blue; + padding-left: 18px; + color: $blue; + } + &.bold-name { + @extend .body-1-medium; + } + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss new file mode 100644 index 0000000000..426f05cd89 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_notifications.scss @@ -0,0 +1,29 @@ + +.notification-modal { + + .modal-content { + .modal-header { + padding: 15px 10px 10px; + .modal-title { + @extend .heading-5-medium; + } + } + .modal-body { + padding: 30px 15px; + @extend .body-1-medium; + } + } + + &.danger { + .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/_progressBar.scss b/openecomp-ui/resources/scss/components/_progressBar.scss new file mode 100644 index 0000000000..040c8cefd7 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_progressBar.scss @@ -0,0 +1,24 @@ + .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; + } + } + .progress-bar-view-label { + margin-right: -30px; + margin-top: -2px; + margin-left: 10px; + color: black; + } + } diff --git a/openecomp-ui/resources/scss/components/_punchOut.scss b/openecomp-ui/resources/scss/components/_punchOut.scss new file mode 100644 index 0000000000..65ba24d884 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_punchOut.scss @@ -0,0 +1,12 @@ +&.dox-ui-punch-out { + background-color: $content-background-color; +} + +&.dox-ui-punch-out.dox-ui-punch-out-full-page { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-y: auto; +} diff --git a/openecomp-ui/resources/scss/components/_sequenceDiagram.scss b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss new file mode 100644 index 0000000000..5fad92a668 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss @@ -0,0 +1,11 @@ +.sequence-diagram { + @extend .flex-column; + .sequence-diagram-sequencer { + flex: 0 1 auto; + margin-bottom: 30px; + } + .sequence-diagram-action-buttons { + flex: 0.1; + text-align: center; + } +} diff --git a/openecomp-ui/resources/scss/components/_slidePanel.scss b/openecomp-ui/resources/scss/components/_slidePanel.scss new file mode 100644 index 0000000000..61c9a189f0 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_slidePanel.scss @@ -0,0 +1,35 @@ + +.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 new file mode 100644 index 0000000000..fdac5ebe45 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss @@ -0,0 +1,23 @@ + +.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; + } + } + } +} diff --git a/openecomp-ui/resources/scss/components/_toggleInput.scss b/openecomp-ui/resources/scss/components/_toggleInput.scss new file mode 100644 index 0000000000..fcf0902adf --- /dev/null +++ b/openecomp-ui/resources/scss/components/_toggleInput.scss @@ -0,0 +1,62 @@ +.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; + } + + 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/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss new file mode 100644 index 0000000000..93444c2e88 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_validationForm.scss @@ -0,0 +1,102 @@ +form { + .validation-form-content { + .validation-input-wrapper { + position: relative; + flex: 1; + } + .nav-tabs { + .invalid-tab:not(.active) { + a { + 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: ' '; + } + + .two-col { + flex: 2.2; + } + .three-col { + flex: 3.4; + } + .single-col { + flex: 1.2; + display: flex; + &:after { + flex: 0.2; + content: ' '; + } + &.add-line-break { + .control-label { + &:after { + content: "\00a0"; + display: block; + } + } + } + } + } + } + + .validation-buttons { + padding: 20px 0; + text-align: right; + button:first-child { + margin-right: 15px; + } + } +} + +.modal-body { + .validation-buttons { + padding: 20px 15px; + background-color: $tlv-gray; + } +} diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss new file mode 100644 index 0000000000..3511470bfb --- /dev/null +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -0,0 +1,109 @@ +.version-controller-bar { + .navbar-inverse { + @extend .body-1-medium; + 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; + 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; + } + } + } + } + .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; + } + } + .onboarding-status-icon { + width: 25px; + height: 19px; + background-image: url('../images/ecomp/ASDC_Sprite.png'); + background-position: -306px 674px; + align-self: center; + } + .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; + } + } + } + } + .items-in-right { + display: flex; + height: 30px; + .action-buttons { + display: flex; + border-right: $gray thin solid; + padding: 0 13px; + .version-control-buttons { + display: flex; + } + .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; + } + } + .revert-btn, .save-btn { + height: 24px; + width: 24px; + align-self: center; + cursor: pointer; + margin-right: 10px; + } + } + .vc-nav-item-close { + display: flex; + padding-left: 18px; + padding-top: 3px; + align-self: center; + @extend .body-1; + color: $gray; + cursor: pointer; + } + } + } + } + } +} |