.version-controller-bar {
- display: flex;
- min-height: 70px;
- border-bottom: 1px solid $tlv-light-gray;
- background-color: transparent;
+ 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-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;
- }
+ .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-status-container {
+ display: flex;
+ height: 30px;
- .version-selector-more-versions {
- color: $blue;
- cursor: pointer;
- }
+ .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-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;
+ .version-section {
+ .form-group {
+ margin-right: 20px;
- .input-options {
- border: none;
+ .input-options {
+ border: none;
- .input-options-select {
- padding-top: 4px;
- }
- }
- }
- }
+ .input-options-select {
+ padding-top: 4px;
+ }
+ }
+ }
+ }
- .vc-status {
- display: flex;
- padding-left: 20px;
- border-left: $light-gray thin solid;
+ .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;
- }
- }
+ .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%;
+ .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%;
+ .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;
+ .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;
- }
+ &:hover:not(.disabled) {
+ cursor: pointer;
+ background-color: $tlv-light-gray;
+ }
- &.disabled {
- border-color: $light-gray;
- }
+ &.disabled {
+ border-color: $light-gray;
+ }
- .vc-v-submit {
- width: 11px;
- height: 8px;
- margin-right: 10px;
- position: relative;
- top: -1px;
- }
- }
+ .vc-v-submit {
+ width: 11px;
+ height: 8px;
+ margin-right: 10px;
+ position: relative;
+ top: -1px;
+ }
+ }
- .version-control-buttons {
- display: flex;
- }
+ .version-control-buttons {
+ display: flex;
+ }
- .action-button-wrapper {
- display: flex;
- align-items: center;
- height: 70px;
+ .action-button-wrapper {
+ display: flex;
+ align-items: center;
+ height: 70px;
- &:hover:not(.disabled) {
- background-color: $tlv-light-gray;
- }
+ &:hover:not(.disabled) {
+ background-color: $tlv-light-gray;
+ }
- &:active:not(.disabled) {
- background-color: $light-gray;
- }
+ &:active:not(.disabled) {
+ background-color: $light-gray;
+ }
- .action-buttons-svg {
- padding-left: 10px;
- padding-right: 10px;
+ .action-buttons-svg {
+ padding-left: 10px;
+ padding-right: 10px;
- .svg-icon {
- fill: $text-black;
- height: 20px;
+ .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-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;
- }
- }
+ .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;
- }
+ .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;
+ .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;
- }
+ .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;
- }
- }
- }
- }
+ 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;
- }
- }
+ .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;
+ }
+ }
}
Code Review / sdc.git / blobdiff