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;
 113
 114             .field {
 115                 color: $text-black;
 116
 117                 &.field-name:not(.field-object-name) {
 118                     color: $gray;
 119                 }
 120             }
 121
 122             &.diff {
 123                 .field {
 124                     color: $red;
 125                 }
 126             }
 127
 128             &.grid-section {
 129                 padding-bottom: 0;
 130
 131                 .grid-items {
 132                     flex: 1;
 133
 134                     .field-col {
 135                         padding: 7px 0;
 136                         height: 100%;
 137
 138                         &:not(:first-child) {
 139                             padding-left: 8px;
 140                         }
 141
 142                         &.grid-col-yours {
 143                             background-color: $yours-bg-color;
 144                         }
 145
 146                         &.grid-col-theirs {
 147                             background-color: $theirs-bg-color;
 148                         }
 149
 150                         @include levels;
 151
 152                         .field {
 153                             @extend .body-1;
 154                             flex: 2;
 155                             min-width: 0;
 156
 157                             &.field-name {
 158                                 @include multiline-ellipsis($bgColor: white);
 159                                 &.diff {
 160                                     color: $red;
 161                                 }
 162                                 text-transform: uppercase;
 163                                 &.field-object-name {
 164                                     @extend .body-1-semibold;
 165                                     margin-bottom: 5px;
 166                                     margin-top: 10px;
 167                                 }
 168                             }
 169
 170                             &.field-yours {
 171                                 @include multiline-ellipsis($bgColor: $yours-bg-color);
 172                             }
 173
 174                             &.field-theirs {
 175                                 @include multiline-ellipsis($bgColor: $theirs-bg-color);
 176                             }
 177                             &.field-name,
 178                             &.field.field-yours,
 179                             &.field.field-theirs {
 180                                 word-break: break-word;
 181                                 text-align: initial;
 182                             }
 183                             &.empty-field {
 184                                 padding-top: 2px;
 185                             }
 186                         }
 187
 188                         *::after {
 189                             bottom: 0;
 190                         }
 191                     }
 192                 }
 193             }
 194
 195             &.field-error {
 196                 @extend .body-1;
 197                 color: $error-text-color;
 198                 min-width: 0;
 199                 white-space: nowrap;
 200                 overflow: hidden;
 201                 text-overflow: ellipsis;
 202             }
 203         }
 204     }
 205 }