diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules/_mergeEditor.scss')
| -rw-r--r-- | openecomp-ui/resources/scss/modules/_mergeEditor.scss | 384 |
1 files changed, 191 insertions, 193 deletions
diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss index 96648dd20f..000e42d5b4 100644 --- a/openecomp-ui/resources/scss/modules/_mergeEditor.scss +++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss @@ -5,203 +5,201 @@ $selected-width: 1px; $selected-color: $blue; @mixin levels { - @for $i from 1 to 6 { - .level-#{$i} { - padding-left: 18px + 10 * $i; - } - } + @for $i from 1 to 6 { + .level-#{$i} { + padding-left: 18px + 10 * $i; + } + } } .merge-editor-modal { - .modal-lg { - width: 1300px; - } + .modal-lg { + width: 1300px; + } } .merge-editor { - margin: 30px 40px; - max-height: 600px; - border: 1px solid $light-gray; - .grid-section { - &.conflict-titles-section { - @extend .body-1; - background-color: $blue; - height: 33px; - padding-top: 6px; - padding-bottom: 3px; - color: $white; - position: sticky; - top: 0; - z-index: 2; - border-bottom: 1px solid $tlv-light-gray; - .grid-item { - padding-left: 10px; - } - .form-group { - margin-bottom: 0; - .checkbox { - label { - margin-right: 0; - } - - text-align: right; - - input[type="checkbox"] { - cursor: pointer; - margin-top: 1px; - } - } - } - } - } - .merge-editor-body { - max-height: 500px; - overflow-y: scroll; - padding: 10px; - .conflict-section { - margin-bottom: 0; - border-left: 0; - border-right: 0; - padding: 5px 0; - - .conflict-resolve-btn { - align-self: flex-end; - } - - .grid-items { - align-items: center; - - input[type="radio"]:not(:checked) { - cursor: pointer; - } - } - } - - .collapsible-section { - display: flex; - cursor: pointer; - - .conflict-title { - @extend .heading-5-semibold; - text-transform: uppercase; - } - } - - .merge-chevron { - margin-right: 7px; - &.right { - transform: rotate(90deg); - } - } - - .grid-section .grid-items .field-col:not(.grid-col-title) { - &.grid-col-yours { - border-top: $selected-width solid $yours-bg-color; - border-bottom: $selected-width solid $yours-bg-color; - } - - &.theirs-color { - border-top: $selected-width solid $theirs-bg-color; - border-bottom: $selected-width solid $theirs-bg-color; - } - } - - .merge-editor-text-field { - display: flex; - justify-content: space-between; - // margin: 0 0 10px 0; - margin: 0; - - .field { - color: $text-black; - - &.field-name:not(.field-object-name) { - color: $gray; - } - } - - &.diff { - .field { - color: $red; - } - } - - &.grid-section { - padding-bottom: 0; - - .grid-items { - flex: 1; - - - .field-col { - padding: 7px 0; - height: 100%; - - &:not(:first-child) { - padding-left: 8px; - } - - &.grid-col-yours { - background-color: $yours-bg-color; - } - - &.grid-col-theirs { - background-color: $theirs-bg-color; - } - - @include levels; - - - .field { - @extend .body-1; - flex: 2; - min-width: 0; - - &.field-name { - @include multiline-ellipsis($bgColor: white); - &.diff { - color: $red; - } - text-transform: uppercase; - &.field-object-name { - @extend .body-1-semibold; - margin-bottom: 5px; - margin-top: 10px; - - } - } - - &.field-yours { - @include multiline-ellipsis($bgColor: $yours-bg-color); - } - - &.field-theirs { - @include multiline-ellipsis($bgColor: $theirs-bg-color); - } - &.field-name, &.field.field-yours, &.field.field-theirs { - word-break: break-word; - text-align: initial; - } - &.empty-field { - padding-top: 2px; - } - } - - *::after { - bottom: 0; - } - } - } - } - - &.field-error { - @extend .body-1; - color: $error-text-color; - min-width: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } + margin: 30px 40px; + max-height: 600px; + border: 1px solid $light-gray; + .grid-section { + &.conflict-titles-section { + @extend .body-1; + background-color: $blue; + height: 33px; + padding-top: 6px; + padding-bottom: 3px; + color: $white; + position: sticky; + top: 0; + z-index: 2; + border-bottom: 1px solid $tlv-light-gray; + .grid-item { + padding-left: 10px; + } + .form-group { + margin-bottom: 0; + .checkbox { + label { + margin-right: 0; + } + + text-align: right; + + input[type='checkbox'] { + cursor: pointer; + margin-top: 1px; + } + } + } + } + } + .merge-editor-body { + max-height: 500px; + overflow-y: scroll; + padding: 10px; + .conflict-section { + margin-bottom: 0; + border-left: 0; + border-right: 0; + padding: 5px 0; + + .conflict-resolve-btn { + align-self: flex-end; + } + + .grid-items { + align-items: center; + + input[type='radio']:not(:checked) { + cursor: pointer; + } + } + } + + .collapsible-section { + display: flex; + cursor: pointer; + + .conflict-title { + @extend .heading-5-semibold; + text-transform: uppercase; + } + } + + .merge-chevron { + margin-right: 7px; + &.right { + transform: rotate(90deg); + } + } + + .grid-section .grid-items .field-col:not(.grid-col-title) { + &.grid-col-yours { + border-top: $selected-width solid $yours-bg-color; + border-bottom: $selected-width solid $yours-bg-color; + } + + &.theirs-color { + border-top: $selected-width solid $theirs-bg-color; + border-bottom: $selected-width solid $theirs-bg-color; + } + } + + .merge-editor-text-field { + display: flex; + justify-content: space-between; + margin: 0; + + .field { + color: $text-black; + + &.field-name:not(.field-object-name) { + color: $gray; + } + } + + &.diff { + .field { + color: $red; + } + } + + &.grid-section { + padding-bottom: 0; + + .grid-items { + flex: 1; + + .field-col { + padding: 7px 0; + height: 100%; + + &:not(:first-child) { + padding-left: 8px; + } + + &.grid-col-yours { + background-color: $yours-bg-color; + } + + &.grid-col-theirs { + background-color: $theirs-bg-color; + } + + @include levels; + + .field { + @extend .body-1; + flex: 2; + min-width: 0; + + &.field-name { + @include multiline-ellipsis($bgColor: white); + &.diff { + color: $red; + } + text-transform: uppercase; + &.field-object-name { + @extend .body-1-semibold; + margin-bottom: 5px; + margin-top: 10px; + } + } + + &.field-yours { + @include multiline-ellipsis($bgColor: $yours-bg-color); + } + + &.field-theirs { + @include multiline-ellipsis($bgColor: $theirs-bg-color); + } + &.field-name, + &.field.field-yours, + &.field.field-theirs { + word-break: break-word; + text-align: initial; + } + &.empty-field { + padding-top: 2px; + } + } + + *::after { + bottom: 0; + } + } + } + } + + &.field-error { + @extend .body-1; + color: $error-text-color; + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } } |