diff options
Diffstat (limited to 'openecomp-ui/resources/scss/components/_versionController.scss')
| -rw-r--r-- | openecomp-ui/resources/scss/components/_versionController.scss | 513 |
1 files changed, 263 insertions, 250 deletions
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss index 98771f1dbd..cc839995cb 100644 --- a/openecomp-ui/resources/scss/components/_versionController.scss +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -1,281 +1,294 @@ .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; + } + } } |