aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/modules/_versionsPage.scss
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/modules/_versionsPage.scss')
-rw-r--r--openecomp-ui/resources/scss/modules/_versionsPage.scss689
1 files changed, 345 insertions, 344 deletions
diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss
index 5651c89032..c29230198a 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;
-
- .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();
- }
-
- .svg-icon-wrapper.user-view {
- fill: transparent;
- stroke: $blue;
- .svg-icon {
- height: 18px;
- width: 16px;
- margin: 0 7px;
- }
- &.current-user {
- .svg-icon {
- background-color: $blue;
- stroke: $white;
- padding-top: 5px;
- padding-bottom: 3px;
- height: 29px;
- width: 29px;
- border-radius: 20px;
- border: 1px solid $blue;
- box-shadow: inset 0px 0px 0px 2px $white;
- margin: 0;
- }
- .svg-icon-label {
- margin-left: 7px;
- }
- }
- .svg-icon-label {
- @extend .body-2;
- color: $dark-gray;
- margin-left: 6px;
- }
- }
-
- .permissions-view-content {
- padding: 20px 40px 20px 25px;
- background-color: $white;
-
- height: 120px;
- display: flex;
- }
-
- .permissions-view {
- display: flex;
- flex: 1;
- flex-direction: column;
- justify-content: space-around;
-
- .permissions-view-title {
- text-transform: uppercase;
- color: $dark-gray;
- }
-
- .contributors-view, .owner-view {
- display: flex;
- height: 16px;
- @extend .body-1-semibold;
-
- .permissions-view-title {
- width: 130px;
- line-height: 16px;
- }
-
- .extra-contributors {
- border-radius: 30px;
- background-color: $gray;
- width: 26px;
- height: 26px;
- padding-right: 2px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: $white;
- cursor: default;
- &:hover {
- background-color: $dark-gray;
- }
- }
-
- .user-view {
- margin-right: 38px;
- }
-
- .manage-permissions {
- color: $blue;
- margin-left: auto;
- cursor: pointer;
-
- &:hover {
- color: $dark-blue;
- }
- }
- }
- }
- }
-
- .versions-page-list-and-tree {
- display: flex;
- margin-top: 20px;
-
- .version-tree-wrapper {
- display: flex;
- flex-direction: column;
- margin-right:10px;
- transition: all 1s ease;
- @include version-page-box-shadow();
-
- .version-tree-title-container {
- display: flex;
- align-items: center;
- height: 40px;
- @include version-page-sub-title();
- padding-right: 10px;
-
- .version-tree-full-screen {
- margin-left: auto;
- }
- }
-
- .tree-view {
- background-color: $white;
- flex: 1;
-
- .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-items {
- flex: 1;
- display: flex;
- flex-direction: column;
-
- .version-item-row {
- border-bottom: 1px solid $tlv-light-gray;
-
- &:last-child {
- border-bottom: none;
- }
- }
- }
-
- .version-item-row {
- $row-hover-color: lighten($blue, 54%);
- $row-active-color: lighten($blue, 51%);
-
- display: flex;
- align-items: center;
- padding: 15px 30px;
- @include version-page-box-shadow();
- background-color: $white;
- height: 70px;
-
- &:hover {
- background-color: $row-hover-color;
- }
-
- &.selected {
- box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue;
- background-color: $row-active-color;
-
- &:hover {
- box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%);
- }
- }
-
- &.header-row {
- height: 40px;
-
- @extend .body-1-semibold;
- @include version-page-sub-title();
- padding: 15px 27px;
-
- &:hover {
- background-color: $white;
- pointer-events: none;
- &:active {
- background-color: $white;
- @include version-page-box-shadow();
- }
- }
- .header-field.actions {
- margin-right: 57px;
- }
- }
-
- .version-item-field {
- flex: 1;
- display: flex;
- margin-right: 10px;
-
- &.item-version, &.item-status {
- flex: 0 1 10%;
- @extend .body-1-semibold;
- color: $text-black;
- }
-
- &.item-description, &.item-last-edited {
- @extend .body-1;
- color: $dark-gray;
- }
-
- &.item-description, &.header-description {
- flex: 2 1 0;
- }
-
- &.item-description > .description-text {
- margin-right: 10px;
- @include ellipsis($max-width: 300px);
- width: initial;
- }
-
- &.item-actions {
- display: flex;
- flex: 1 1 3%;
- justify-content: space-between;
- }
-
- &.item-select, &.item-create {
- @extend .body-1;
- flex: 0 1 auto;
- margin-right: 0;
-
- .svg-icon-wrapper {
- fill: $blue;
- color: $blue;
-
- &[disabled] {
- cursor: default;
- }
-
- .svg-icon {
- width: 16px;
- height: 16px;
- }
-
- &:hover:not([disabled]) {
- fill: $dark-blue;
- color: $dark-blue;
- }
- }
- }
-
- }
-
- /* To keep ellipsis hider's background the same color as row background */
- &:not(.selected):hover .item-description > .description-text:after {
- background: $row-hover-color;
- }
-
- &:hover:active .item-description > .description-text:after {
- background: $row-active-color;
- }
-
- }
-
- }
-
- &.clickable {
- cursor: pointer;
- }
+ 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();
+
+ .permissions-view-wrapper-title {
+ @include version-page-sub-title();
+ }
+
+ .svg-icon-wrapper.user-view {
+ fill: transparent;
+ stroke: $blue;
+ .svg-icon {
+ height: 18px;
+ width: 16px;
+ margin: 0 7px;
+ }
+ &.current-user {
+ .svg-icon {
+ background-color: $blue;
+ stroke: $white;
+ padding-top: 5px;
+ padding-bottom: 3px;
+ height: 29px;
+ width: 29px;
+ border-radius: 20px;
+ border: 1px solid $blue;
+ box-shadow: inset 0px 0px 0px 2px $white;
+ margin: 0;
+ }
+ .svg-icon-label {
+ margin-left: 7px;
+ }
+ }
+ .svg-icon-label {
+ @extend .body-2;
+ color: $dark-gray;
+ margin-left: 6px;
+ }
+ }
+
+ .permissions-view-content {
+ padding: 20px 40px 20px 25px;
+ background-color: $white;
+
+ height: 120px;
+ display: flex;
+ }
+
+ .permissions-view {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: space-around;
+
+ .permissions-view-title {
+ text-transform: uppercase;
+ color: $dark-gray;
+ }
+
+ .contributors-view,
+ .owner-view {
+ display: flex;
+ height: 16px;
+ @extend .body-1-semibold;
+
+ .permissions-view-title {
+ width: 130px;
+ line-height: 16px;
+ }
+
+ .extra-contributors {
+ border-radius: 30px;
+ background-color: $gray;
+ width: 26px;
+ height: 26px;
+ padding-right: 2px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $white;
+ cursor: default;
+ &:hover {
+ background-color: $dark-gray;
+ }
+ }
+
+ .user-view {
+ margin-right: 38px;
+ }
+
+ .manage-permissions {
+ color: $blue;
+ margin-left: auto;
+ cursor: pointer;
+
+ &:hover {
+ color: $dark-blue;
+ }
+ }
+ }
+ }
+ }
+
+ .versions-page-list-and-tree {
+ display: flex;
+ margin-top: 20px;
+
+ .version-tree-wrapper {
+ display: flex;
+ flex-direction: column;
+ margin-right: 10px;
+ transition: all 1s ease;
+ @include version-page-box-shadow();
+
+ .version-tree-title-container {
+ display: flex;
+ align-items: center;
+ height: 40px;
+ @include version-page-sub-title();
+ padding-right: 10px;
+
+ .version-tree-full-screen {
+ margin-left: auto;
+ }
+ }
+
+ .tree-view {
+ background-color: $white;
+ flex: 1;
+
+ .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-items {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
+ .version-item-row {
+ border-bottom: 1px solid $tlv-light-gray;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+
+ .version-item-row {
+ $row-hover-color: lighten($blue, 54%);
+ $row-active-color: lighten($blue, 51%);
+
+ display: flex;
+ align-items: center;
+ padding: 15px 30px;
+ @include version-page-box-shadow();
+ background-color: $white;
+ height: 70px;
+
+ &:hover {
+ background-color: $row-hover-color;
+ }
+
+ &.selected {
+ box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06),
+ inset 5px 0 0 0 $blue;
+ background-color: $row-active-color;
+
+ &:hover {
+ box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06),
+ inset 5px 0 0 0 lighten($blue, 35%);
+ }
+ }
+
+ &.header-row {
+ height: 40px;
+
+ @extend .body-1-semibold;
+ @include version-page-sub-title();
+ padding: 15px 27px;
+
+ &:hover {
+ background-color: $white;
+ pointer-events: none;
+ &:active {
+ background-color: $white;
+ @include version-page-box-shadow();
+ }
+ }
+ .header-field.actions {
+ margin-right: 57px;
+ }
+ }
+
+ .version-item-field {
+ flex: 1;
+ display: flex;
+ margin-right: 10px;
+
+ &.item-version,
+ &.item-status {
+ flex: 0 1 10%;
+ @extend .body-1-semibold;
+ color: $text-black;
+ }
+
+ &.item-description,
+ &.item-last-edited {
+ @extend .body-1;
+ color: $dark-gray;
+ }
+
+ &.item-description,
+ &.header-description {
+ flex: 2 1 0;
+ }
+
+ &.item-description > .description-text {
+ margin-right: 10px;
+ @include ellipsis($max-width: 300px);
+ width: initial;
+ }
+
+ &.item-actions {
+ display: flex;
+ flex: 1 1 3%;
+ justify-content: space-between;
+ }
+
+ &.item-select,
+ &.item-create {
+ @extend .body-1;
+ flex: 0 1 auto;
+ margin-right: 0;
+
+ .svg-icon-wrapper {
+ fill: $blue;
+ color: $blue;
+
+ &[disabled] {
+ cursor: default;
+ }
+
+ .svg-icon {
+ width: 16px;
+ height: 16px;
+ }
+
+ &:hover:not([disabled]) {
+ fill: $dark-blue;
+ color: $dark-blue;
+ }
+ }
+ }
+ }
+
+ /* To keep ellipsis hider's background the same color as row background */
+ &:not(.selected):hover .item-description > .description-text:after {
+ background: $row-hover-color;
+ }
+
+ &:hover:active .item-description > .description-text:after {
+ background: $row-active-color;
+ }
+ }
+ }
+
+ &.clickable {
+ cursor: pointer;
+ }
}