openecomp-ui/resources/scss/modules/_mergeEditor.scss

   1 $yours-bg-color: $tlv-gray;
   2 $theirs-bg-color: $tlv-light-gray;
   3 $error-text-color: $red;
   4 $selected-width: 1px;
   5 $selected-color: $blue;
   6
   7 @mixin levels {
   8         @for $i from 1 to 6 {
   9                 .level-#{$i} {
  10                         padding-left: 18px + 10 * $i;
  11                 }
  12         }
  13 }
  14
  15 .merge-editor-modal {
  16         .modal-lg {
  17                 width: 1300px;
  18         }
  19 }
  20
  21 .merge-editor {
  22         margin: 30px 40px;
  23         max-height: 600px;
  24         border: 1px solid $light-gray;
  25         .grid-section {
  26                 &.conflict-titles-section {
  27                         @extend .body-1;
  28                         background-color: $blue;
  29                         height: 33px;
  30                         padding-top: 6px;
  31                         padding-bottom: 3px;
  32                         color: $white;
  33                         position: sticky;
  34                         top: 0;
  35                         z-index: 2;
  36                         border-bottom: 1px solid $tlv-light-gray;
  37                         .grid-item {
  38                                 padding-left: 10px;
  39                         }
  40                         .form-group {
  41                                 margin-bottom: 0;
  42                                 .checkbox {
  43                                         label {
  44                                                 margin-right: 0;
  45                                         }
  46
  47                                         text-align: right;
  48
  49                                         input[type="checkbox"] {
  50                                                 cursor: pointer;
  51                                                 margin-top: 1px;
  52                                         }
  53                                 }
  54                         }
  55                 }
  56         }
  57         .merge-editor-body {
  58                 max-height: 500px;
  59                 overflow-y: scroll;
  60                 padding: 10px;
  61                 .conflict-section {
  62                         margin-bottom: 0;
  63                         border-left: 0;
  64                         border-right: 0;
  65                         padding: 5px 0;
  66
  67                         .conflict-resolve-btn {
  68                                 align-self: flex-end;
  69                         }
  70
  71                         .grid-items {
  72                                 align-items: center;
  73
  74                                 input[type="radio"]:not(:checked) {
  75                                         cursor: pointer;
  76                                 }
  77                         }
  78                 }
  79
  80                 .collapsible-section {
  81                         display: flex;
  82                         cursor: pointer;
  83
  84                         .conflict-title {
  85                                 @extend .heading-5-semibold;
  86                                 text-transform: uppercase;
  87                         }
  88                 }
  89
  90                 .merge-chevron {
  91                         margin-right: 7px;
  92                         &.right {
  93                                 transform: rotate(90deg);
  94                         }
  95                 }
  96
  97                 .grid-section .grid-items .field-col:not(.grid-col-title) {
  98                         &.grid-col-yours {
  99                                 border-top: $selected-width solid $yours-bg-color;
 100                                 border-bottom: $selected-width solid $yours-bg-color;
 101                         }
 102
 103                         &.theirs-color {
 104                                 border-top: $selected-width solid $theirs-bg-color;
 105                                 border-bottom: $selected-width solid $theirs-bg-color;
 106                         }
 107                 }
 108
 109                 .merge-editor-text-field {
 110                         display: flex;
 111                         justify-content: space-between;
 112                         // margin: 0 0 10px 0;
 113                         margin: 0;
 114
 115                         .field {
 116                                 color: $text-black;
 117
 118                                 &.field-name:not(.field-object-name) {
 119                                         color: $gray;
 120                                 }
 121                         }
 122
 123                         &.diff {
 124                                 .field {
 125                                         color: $red;
 126                                 }
 127                         }
 128
 129                         &.grid-section {
 130                                 padding-bottom: 0;
 131
 132                                 .grid-items {
 133                                         flex: 1;
 134
 135
 136                                         .field-col {
 137                                                 padding: 7px 0;
 138                                                 height: 100%;
 139
 140                                                 &:not(:first-child) {
 141                                                         padding-left: 8px;
 142                                                 }
 143
 144                                                 &.grid-col-yours {
 145                                                         background-color: $yours-bg-color;
 146                                                 }
 147
 148                                                 &.grid-col-theirs {
 149                                                         background-color: $theirs-bg-color;
 150                                                 }
 151
 152                                                 @include levels;
 153
 154
 155                                                 .field {
 156                                                         @extend .body-1;
 157                                                         flex: 2;
 158                                                         min-width: 0;
 159
 160                                                         &.field-name {
 161                                                                 @include multiline-ellipsis($bgColor: white);
 162                                                                 &.diff {
 163                                                                         color: $red;
 164                                                                 }
 165                                                                 text-transform: uppercase;
 166                                                                 &.field-object-name {
 167                                                                         @extend .body-1-semibold;
 168                                                                         margin-bottom: 5px;
 169                                                                         margin-top: 10px;
 170
 171                                                                 }
 172                                                         }
 173
 174                                                         &.field-yours {
 175                                                                 @include multiline-ellipsis($bgColor: $yours-bg-color);
 176                                                         }
 177
 178                                                         &.field-theirs {
 179                                                                 @include multiline-ellipsis($bgColor: $theirs-bg-color);
 180                                                         }
 181                                                         &.field-name, &.field.field-yours, &.field.field-theirs {
 182                                                                 word-break: break-word;
 183                                                                 text-align: initial;
 184                                                         }
 185                                                         &.empty-field {
 186                                                                 padding-top: 2px;
 187                                                         }
 188                                                 }
 189
 190                                                 *::after {
 191                                                         bottom: 0;
 192                                                 }
 193                                         }
 194                                 }
 195                         }
 196
 197                         &.field-error {
 198                                 @extend .body-1;
 199                                 color: $error-text-color;
 200                                 min-width: 0;
 201                                 white-space: nowrap;
 202                                 overflow: hidden;
 203                                 text-overflow: ellipsis;
 204                         }
 205                 }
 206         }
 207 }