aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components
diff options
context:
space:
mode:
authortalig <talig@amdocs.com>2017-12-20 14:30:43 +0200
committerVitaly Emporopulo <Vitaliy.Emporopulo@amdocs.com>2017-12-21 11:12:33 +0000
commit8e9c0653dd6c6862123c9609ae34e1206d86456e (patch)
tree5eeef00ec0677133baa439ca8d7ffd7aca4804b6 /openecomp-ui/resources/scss/components
parent785ebcc95de3e064e843bec04ba7a209d854fc7c (diff)
Add collaboration feature
Issue-ID: SDC-767 Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795 Signed-off-by: talig <talig@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss/components')
-rw-r--r--openecomp-ui/resources/scss/components/_activityLog.scss1
-rw-r--r--openecomp-ui/resources/scss/components/_buttons.scss30
-rw-r--r--openecomp-ui/resources/scss/components/_commitModal.scss10
-rw-r--r--openecomp-ui/resources/scss/components/_dropzone.scss23
-rw-r--r--openecomp-ui/resources/scss/components/_dualListBox.scss8
-rw-r--r--openecomp-ui/resources/scss/components/_forms.scss4
-rw-r--r--openecomp-ui/resources/scss/components/_grid.scss121
-rw-r--r--openecomp-ui/resources/scss/components/_icon.scss164
-rw-r--r--openecomp-ui/resources/scss/components/_listEditorView.scss30
-rw-r--r--openecomp-ui/resources/scss/components/_navigationSideBar.scss5
-rw-r--r--openecomp-ui/resources/scss/components/_overlay.scss26
-rw-r--r--openecomp-ui/resources/scss/components/_tree.scss56
-rw-r--r--openecomp-ui/resources/scss/components/_userNotifications.scss123
-rw-r--r--openecomp-ui/resources/scss/components/_versionController.scss370
14 files changed, 585 insertions, 386 deletions
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 5e9418ed7d..7a5b77b58c 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -23,6 +23,7 @@ $message-info-icon-size: 16px;
.list-editor-view-list {
border: 1px solid $light-gray;
border-bottom: none;
+ overflow-y: hidden;
}
.activity-list-item {
display: flex;
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
deleted file mode 100644
index 357a799e93..0000000000
--- a/openecomp-ui/resources/scss/components/_buttons.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.primary-btn{
- border: 1px solid;
- border-color: $blue;
- color: $blue;
- @extend .body-1-semibold;
- 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/_commitModal.scss b/openecomp-ui/resources/scss/components/_commitModal.scss
new file mode 100644
index 0000000000..e7f5d28933
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_commitModal.scss
@@ -0,0 +1,10 @@
+
+.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
diff --git a/openecomp-ui/resources/scss/components/_dropzone.scss b/openecomp-ui/resources/scss/components/_dropzone.scss
index cad752d415..2479ae7f0c 100644
--- a/openecomp-ui/resources/scss/components/_dropzone.scss
+++ b/openecomp-ui/resources/scss/components/_dropzone.scss
@@ -6,3 +6,26 @@
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;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
index 4353ab39e8..0c7d82e31c 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -8,10 +8,7 @@
.dual-search-multi-select-section {
flex: 1;
- .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;
}
@@ -30,6 +27,9 @@
padding: 4px 0 4px 10px;
}
}
+ option:checked {
+ background: $blue linear-gradient(0deg, $blue 0%, $blue 100%);
+ }
}
}
.dual-list-options-bar {
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index b662ce873c..58e843047f 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -1,8 +1,8 @@
.section-title {
@extend .heading-3-semibold;
- padding: 50px 0 30px 0;
+ padding: 50px 0 20px 0;
&:first-child {
- padding: 0 0 30px 0;
+ padding-top: 0;
}
}
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index 9a76f97546..f210b64df6 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,66 +1,71 @@
-$gridItemSpace: 15%;
-
.grid-section {
- &: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;
- }
- }
+ $gridItemSpace: 15%;
- .grid-col-1 {
- @extend %grid-col-base;
- flex-basis: 25%;
- &:after {
- flex-basis: $gridItemSpace;
+ @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: ' ';
}
- }
+ }
+ }
- .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: ' ';
+ @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
+ .#{grid-col- + $numOfCols} {
+ @extend %grid-col-base;
+ &:not(.last-col-in-row) {
+ flex-basis: $flexBasis;
+ margin-right: 5%;
}
- }
- .grid-col-4 {
- @extend %grid-col-base;
- flex-basis: 100%;
- &:after {
- flex-basis: $gridItemSpace / 4;
- content: ' ';
+ &.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;
+ }
+ }
+
+ &.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/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss
deleted file mode 100644
index c80055d055..0000000000
--- a/openecomp-ui/resources/scss/components/_icon.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-$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/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index c3e9fa6081..354a6a1f70 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -17,27 +17,6 @@
.list-editor-view-title {
@extend .heading-3-semibold;
}
- .list-editor-view-add-controller {
- @extend .body-1-semibold;
- color: $blue;
- display: table;
- cursor: pointer;
- position: relative;
- padding-top: 0;
- padding-bottom: 0;
- 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;
- }
- }
- }
}
.list-editor-view-list-scroller {
@@ -68,9 +47,6 @@
overflow-wrap: break-word;
white-space: initial;
- .description {
- @include multiline-ellipsis(1.3em, 3);
- }
.number-field {
align-content: center;
@@ -82,6 +58,9 @@
line-height: 0.9;
}
}
+ .description {
+ @include multiline-ellipsis(1.3em, 3);
+ }
.text {
@extend .body-1;
}
@@ -105,9 +84,8 @@
}
}
.svg-icon {
+ margin-top: 5px;
transition: fill .3s;
- height: 18px;
- width: 18px;
fill: $white;
}
}
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index daf5025bee..ab4d15fd90 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -18,9 +18,10 @@
.group-name {
@extend .heading-4-semibold;
@include ellipsis;
- min-height: 56px;
+ min-height: 70px;
display: block;
- padding: 18px 12px 13px 40px;
+ height: 70px;
+ padding: 24px 12px 13px 40px;
background-color: $white;
border-bottom: 1px solid $tlv-light-gray;
}
diff --git a/openecomp-ui/resources/scss/components/_overlay.scss b/openecomp-ui/resources/scss/components/_overlay.scss
new file mode 100644
index 0000000000..7c310bf1a6
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_overlay.scss
@@ -0,0 +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
diff --git a/openecomp-ui/resources/scss/components/_tree.scss b/openecomp-ui/resources/scss/components/_tree.scss
new file mode 100644
index 0000000000..e03594ee64
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_tree.scss
@@ -0,0 +1,56 @@
+
+.tree-view {
+ overflow: hidden;
+
+ &.scrollable {
+ overflow: auto;
+ }
+
+ .node {
+ text-shadow: none;
+ stroke: none;
+
+ .outer-circle {
+ stroke: $blue;
+ stroke-width: 2px;
+ fill: $white;
+ }
+
+ .inner-circle {
+ fill: $blue;
+ }
+
+ text {
+ text-anchor: end;
+ @extend .body-2-semibold;
+ fill: $blue;
+ }
+
+ &.clickable {
+ cursor: pointer;
+ }
+
+ &.selectedNode {
+ .outer-circle {
+ fill: $blue;
+ }
+
+ .inner-circle {
+ fill: $blue;
+ }
+
+ text {
+ fill: $blue;
+ }
+ }
+ }
+
+
+ .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
new file mode 100644
index 0000000000..74cafae438
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_userNotifications.scss
@@ -0,0 +1,123 @@
+
+.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;
+ color: $white;
+ background-color: $blue;
+ border-radius: 2px;
+ text-align: center;
+ line-height: 2;
+ margin-top: 4px;
+ &.active {
+ background-color: #0091c7;
+ border: solid 1px #006186;
+ }
+ &:hover {
+ background-color: #1ec2ff;
+ border: solid 1px #0091c8;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 57610986c3..11e5b41675 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,102 +1,272 @@
.version-controller-bar {
- 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;
- justify-content: space-between;
- padding-left: 16px;
- padding-right: 40px;
- .version-status-container {
- display: flex;
- height: 30px;
- .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: 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;
-
-
- .svg-icon {
- fill: $dark-gray;
- &:hover {
- fill: $black;
- }
- &.__versionControllerLockClosed {
- margin-top: -3px;
- }
- &.__versionControllerLockOpen {
- margin-top: -6px;
- }
- &.__versionControllerSubmit {
- fill: $blue;
- &:hover {
- fill: $dark-blue;
- }
- &.disabled {
- fill: $dark-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;
- }
- }
- }
+ 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-separator {
+ border-left: 1px solid $tlv-light-gray;
+ height: 37px;
+ margin-left: 5px;
+ margin-right: 5px;
+ }
+
+ .version-status-container {
+ display: flex;
+ height: 30px;
+
+ .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-section {
+ .form-group {
+ margin-right: 20px;
+
+ .input-options {
+ border: none;
+
+ .input-options-select {
+ padding-top: 4px;
+ }
+ }
+ }
+ }
+
+ .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;
+ 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;
+
+ &:hover:not(.disabled) {
+ cursor: pointer;
+ background-color: $tlv-light-gray;
+ }
+
+ &.disabled {
+ border-color: $light-gray;
+ }
+
+ .vc-v-submit {
+ width: 11px;
+ height: 8px;
+ margin-right: 10px;
+ position: relative;
+ top: -1px;
+ }
+ }
+
+ .version-control-buttons {
+ display: flex;
+ }
+
+ .action-button-wrapper {
+ display: flex;
+ align-items: center;
+ height: 70px;
+
+ &:hover:not(.disabled) {
+ background-color: $tlv-light-gray;
+ }
+
+ &:active:not(.disabled) {
+ background-color: $light-gray;
+ }
+
+ .action-buttons-svg {
+ padding-left: 10px;
+ padding-right: 10px;
+
+ .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-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;
+ }
+
+ .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;
+ }
+
+ 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;
+ }
+ }
}