openecomp-ui/resources/scss/components/_versionController.scss

.version-controller-bar {
	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;
				}
			}
			.depricated-item-status {
				@extend .body-3;
				color: $white;
				background-color: $dark-purple;
				margin-left: 10px;
				padding: 1px 10px;
				align-self: center;
				border-radius: 3px; 
			}
		}

		.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;
		}
	}
}